diff --git a/src/app/profile/orders/[id]/components/TrackCode.tsx b/src/app/profile/orders/[id]/components/TrackCode.tsx new file mode 100644 index 0000000..d37e796 --- /dev/null +++ b/src/app/profile/orders/[id]/components/TrackCode.tsx @@ -0,0 +1,21 @@ +'use client' +import { FC } from 'react' + +type Props = { + orderId: number +} + +const TrackCode: FC = ({ orderId }) => { + return ( +
+
+
کد پیگیری:
+
+ {orderId.toString().padStart(8, '0')} +
+
+
+ ) +} + +export default TrackCode diff --git a/src/app/profile/orders/[id]/page.tsx b/src/app/profile/orders/[id]/page.tsx new file mode 100644 index 0000000..12142e5 --- /dev/null +++ b/src/app/profile/orders/[id]/page.tsx @@ -0,0 +1,417 @@ +'use client' +import { FC, useState } from 'react' +import { ArrowRight2, ShieldTick, Truck, MessageText, CloseCircle } from 'iconsax-react' +import { useRouter, useParams } from 'next/navigation' +import { useForm } from 'react-hook-form' +import { yupResolver } from '@hookform/resolvers/yup' +import * as yup from 'yup' +import PageLoading from '@/components/PageLoading' +import TrackCode from './components/TrackCode' +import { Button } from '@/components/ui/button' +import Modal from '@/components/Modal' +import Select from '@/components/Select' +import Input from '@/components/Input' +import withLayout from '@/hoc/withLayout' +import Image from 'next/image' + +// Mock data +const mockOrderDetail = { + payment: { + transaction_id: 'TRX123456789' + }, + order: { + _id: 'ORD001', + user: { + fullName: 'احمد محمدی' + }, + shipmentAddress: { + postalCode: '1234567890', + phone: '09123456789', + address: 'تهران، خیابان ولیعصر، پلاک 123' + }, + createdAt: '1402/12/15', + orderItems: { + _id: 'ITEM001', + itemsCount: 3, + status: 'processing', + totalShipmentCost: '25000 تومان', + totalPaymentPrice: '450000', + shipper: { + name: 'پست ایران', + deliveryTime: 3 + }, + shipmentItems: [ + { + _id: 'SHIP001', + product: { + _id: 'PROD001', + title_fa: 'لپ‌تاپ اپل مک‌بوک پرو 13 اینچی', + imagesUrl: { + cover: 'https://via.placeholder.com/80x80' + } + }, + quantity: 1, + cancelled_quantity: 0, + returned_quantity: 0, + selling_price: 450000, + variant: { + color: { + name: 'نقره‌ای' + }, + size: { + name: '13 اینچ' + }, + meterages: { + name: '256GB' + }, + warranty: { + duration: '2 سال', + name: 'گارانتی' + } + } + } + ] + } + } +} + +const mockCancelReasons = [ + { _id: 'REASON1', title: 'تغییر نظر در خرید' }, + { _id: 'REASON2', title: 'یافتن قیمت بهتر' }, + { _id: 'REASON3', title: 'مشکل در محصول' }, + { _id: 'REASON4', title: 'تأخیر در ارسال' } +] + +// Form validation schema +const cancelOrderSchema = yup.object({ + reason: yup.string().required('لطفا دلیل لغو سفارش را انتخاب کنید'), + description: yup.string().required('لطفا توضیحات لغو سفارش را وارد کنید'), + count: yup.string().required('تعداد لغو سفارش را وارد کنید') +}) + +type CancelOrderFormData = yup.InferType + +const OrderDetail: FC = () => { + const { id } = useParams() + const [showModalCancel, setShowModalCancel] = useState(false) + const [isLoading, setIsLoading] = useState(false) + const router = useRouter() + + // Form with react-hook-form + const { + register, + handleSubmit, + watch, + setValue, + formState: { errors }, + reset + } = useForm({ + resolver: yupResolver(cancelOrderSchema) + }) + + const getStatusText = (status: string) => { + const statusMap: Record = { + 'processing': 'در حال پردازش', + 'shipped': 'ارسال شده', + 'delivered': 'تحویل داده شده', + 'cancelled': 'لغو شده' + } + return statusMap[status] || status + } + + const onSubmit = async () => { + setIsLoading(true) + + // Simulate API call + setTimeout(() => { + setIsLoading(false) + setShowModalCancel(false) + reset() // Reset form + alert('درخواست لغو سفارش با موفقیت ثبت شد') + router.push('/profile/orders') + }, 1000) + } + + return ( +
+
+
+ +
جزئیات سفارش
+
+ + {isLoading ? ( + + ) : ( +
+ {/* Sidebar */} +
+
+
شناسه تراکنش :
+
+ {mockOrderDetail.payment.transaction_id} +
+
+ +
+
گیرنده :
+
+ {mockOrderDetail.order.user.fullName} +
+
+ +
+
کدپستی :
+
+ {mockOrderDetail.order.shipmentAddress.postalCode} +
+
+ +
+
تاریخ ثبت سفارش :
+
+ {mockOrderDetail.order.createdAt} +
+
+ +
+
شماره موبایل :
+
+ {mockOrderDetail.order.shipmentAddress.phone} +
+
+ +
+
آدرس :
+
+ {mockOrderDetail.order.shipmentAddress.address} +
+
+ + + + +
+ + {/* Main Content */} +
+
+
+
+
تعداد مرسوله :
+
1
+
+ +
+
تعداد اقلام :
+
+ {mockOrderDetail.order.orderItems.itemsCount} +
+
+
+ +
+ {getStatusText(mockOrderDetail.order.orderItems.status)} +
+
+ +
+
حداکثر مهلت ارسال :
+
+ {mockOrderDetail.order.orderItems.shipper.deliveryTime} روز +
+
+ +
+
+
هزینه ارسال :
+
+ {mockOrderDetail.order.orderItems.totalShipmentCost} +
+
+
+
مبلغ مرسوله :
+
+ {mockOrderDetail.order.orderItems.totalPaymentPrice} تومان +
+
+
+
شناسه سفارش :
+
+ {mockOrderDetail.order._id} +
+
+
+ + {/* Product Items */} + {mockOrderDetail.order.orderItems.shipmentItems.map((item) => ( +
+ {item.product.title_fa} + +
+
+ {item.product.title_fa} +
+ +
+
+
تعداد اقلام :‌
+
{item.quantity}
+
+
+
تعداد کنسلی :‌
+
{item.cancelled_quantity}
+
+
+
تعداد مرجوعی :‌
+
{item.returned_quantity}
+
+ +
+
+
+ {item.variant.color?.name || + item.variant.size?.name || + item.variant.meterages?.name} +
+
+ +
+ +
+ SKP_{item.product._id} +
+
+ +
+ +
+ گارانتی {item.variant.warranty.duration} {item.variant.warranty.name} +
+
+ +
+ +
+ {mockOrderDetail.order.orderItems.shipper.name} +
+
+
+ +
+
+
+ {Intl.NumberFormat('fa-IR').format(item.selling_price)} +
+
تومان
+
+ + {item.quantity !== item.cancelled_quantity && ( + + )} +
+
+
+ ))} +
+
+ )} +
+ + {/* Cancel Order Modal */} + setShowModalCancel(false)} + isHeader + title='درخواست لغو سفارش' + > +
+ + +
+
توضیحات :
+