track code

src/pages/orders/Native.tsx

@@ -5,11 +5,14 @@ import Error from '../../components/Error'
 import PaginationUi from '../../components/PaginationUi'
 import PageTitle from '../../components/PageTitle'
 import Td from '../../components/Td'
-import { Eye } from 'iconsax-react'
+import { Eye, Add } from 'iconsax-react'
 import { Link } from 'react-router-dom'
 import { type NativeOrderType } from '@/pages/orders/types/Types'
 import { useGetNativeOrders } from '@/pages/orders/hooks/useOrderData'
 import { Pages } from '@/config/Pages'
+import Button from '@/components/Button'
+import AddTrackCodeModal from '@/pages/orders/components/AddTrackCodeModal'
+import { useQueryClient } from '@tanstack/react-query'
 
 const STATUS_CONFIG = {
     Cancelled: { label: 'کنسل شده', color: 'bg-red-100 text-red-800' },
@@ -30,6 +33,9 @@ const Native: FC = () => {
     const [searchParams] = useSearchParams()
     const status = searchParams.get('status') || ''
     const [currentPage, setCurrentPage] = useState(1)
+    const [openTrackModal, setOpenTrackModal] = useState(false)
+    const [selectedOrderId, setSelectedOrderId] = useState<string | null>(null)
+    const queryClient = useQueryClient()
 
     const { data, isLoading, error } = useGetNativeOrders(currentPage, status === 'Admin' ? undefined : status)
 
@@ -96,6 +102,22 @@ const Native: FC = () => {
                         <Link to={`${Pages.orders.detailUser}${order._id}`}>
                             <Eye color='#8C90A3' size={16} className="cursor-pointer hover:text-blue-500 transition-colors" />
                         </Link>
+                        {order.orderStatus === 'process_by_sellers' && (
+                            <Button
+                                size='sm'
+                                variant='outline'
+                                className='!px-2 !py-1 w-fit'
+                                onClick={() => {
+                                    setSelectedOrderId(order._id.toString())
+                                    setOpenTrackModal(true)
+                                }}
+                            >
+                                <span className='flex items-center gap-1'>
+                                    <Add color='#8C90A3' size={16} />
+                                    افزودن کد رهگیری
+                                </span>
+                            </Button>
+                        )}
                     </div>
                 </Td>
             </tr>
@@ -135,6 +157,15 @@ const Native: FC = () => {
                     onPageChange={setCurrentPage}
                 />
             )}
+
+            <AddTrackCodeModal
+                open={openTrackModal}
+                onClose={() => setOpenTrackModal(false)}
+                orderId={selectedOrderId}
+                onSuccess={() => {
+                    queryClient.invalidateQueries({ queryKey: ['orders'] })
+                }}
+            />
         </div>
     )
 }

src/pages/orders/components/AddTrackCodeModal.tsx

@@ -0,0 +1,86 @@
+import { type FC, useState } from 'react'
+import DefaulModal from '@/components/DefaulModal'
+import Input from '@/components/Input'
+import DatePicker from '@/components/DatePicker'
+import Button from '@/components/Button'
+import { useAddTrackCode } from '@/pages/orders/hooks/useOrderData'
+import type { AddTrackCodeType } from '@/pages/orders/types/ReturnTypes'
+
+type Props = {
+  open: boolean
+  onClose: () => void
+  orderId: string | null
+  onSuccess?: () => void
+}
+
+const AddTrackCodeModal: FC<Props> = ({ open, onClose, orderId, onSuccess }) => {
+  const [trackCode, setTrackCode] = useState('')
+  const [postingDate, setPostingDate] = useState('')
+  const [postingReceipt, setPostingReceipt] = useState('')
+
+  const { mutateAsync, isPending } = useAddTrackCode()
+
+  const handleSubmit = async () => {
+    if (!orderId) return
+    if (!trackCode || !postingDate) return
+
+    const payload: AddTrackCodeType = {
+      orderId,
+      trackCode,
+      postingDate,
+      postingReceipt,
+    }
+
+    await mutateAsync(payload)
+    setTrackCode('')
+    setPostingDate('')
+    setPostingReceipt('')
+    onClose()
+    if (onSuccess) {
+      onSuccess()
+    }
+  }
+
+  return (
+    <DefaulModal open={open} close={onClose} isHeader title_header='افزودن کد رهگیری' width={520}>
+      <div className='space-y-4 mt-4 w-[400px]'>
+
+        <DatePicker
+          label='تاریخ ارسال'
+          placeholder='انتخاب تاریخ'
+          defaulValue={postingDate}
+          onChange={(val) => setPostingDate(val)}
+        />
+
+        <Input
+          label='کد رهگیری'
+          placeholder='مثال: 1234567890'
+          value={trackCode}
+          onChange={(e) => setTrackCode(e.target.value)}
+        />
+
+
+
+        <Input
+          label='شماره رسید پست (اختیاری)'
+          placeholder='مثال: 98-001-ABC'
+          value={postingReceipt}
+          onChange={(e) => setPostingReceipt(e.target.value)}
+        />
+
+        <div className='flex items-center gap-3 pt-2'>
+          <Button variant='outline' onClick={onClose} disabled={isPending}>
+            انصراف
+          </Button>
+          <Button onClick={handleSubmit} disabled={!trackCode || !postingDate || isPending}>
+            ثبت
+          </Button>
+        </div>
+      </div>
+    </DefaulModal>
+  )
+}
+
+export default AddTrackCodeModal
+
+

src/pages/orders/hooks/useOrderData.ts

@@ -78,3 +78,9 @@ export const useGetOrderReturns = (page: number = 1) => {
     queryFn: () => api.getOrderReturns(page),
   });
 };
+
+export const useAddTrackCode = () => {
+  return useMutation({
+    mutationFn: api.addTrackCode,
+  });
+};

src/pages/orders/service/OrderService.ts

@@ -1,4 +1,5 @@
 import axios from "../../../config/axios";
+import type { AddTrackCodeType } from "../types/ReturnTypes";
 import type {
   CancelReasonsResponseType,
   CreateCancelReasonType,
@@ -77,3 +78,11 @@ export const getOrderReturns = async (page: number = 1) => {
   });
   return data;
 };
+
+export const addTrackCode = async (params: AddTrackCodeType) => {
+  const { data } = await axios.post(
+    `/order/${params.orderId}/admin/track-code`,
+    params
+  );
+  return data;
+};

src/pages/orders/types/ReturnTypes.ts

@@ -1,4 +1,7 @@
-import type { PagerType, ShipmentAddressType } from "@/pages/orders/types/Types";
+import type {
+  PagerType,
+  ShipmentAddressType,
+} from "@/pages/orders/types/Types";
 
 export type ReturnOrderItemType = {
   quantity: number;
@@ -41,3 +44,10 @@ export type ReturnOrdersResponseType = {
     returnsOrders: ReturnOrderType[];
   };
 };
+
+export type AddTrackCodeType = {
+  trackCode: string;
+  postingDate: string;
+  postingReceipt: string;
+  orderId: string;
+};