order detail

src/app/[name]/(Dialogs)/order/checkout/types/Types.ts

@@ -326,6 +326,8 @@ export interface OrderDetailRestaurant {
   vat: number;
   domain: string;
   score: RestaurantScore;
+  plan: string;
+  subscriptionId: string;
 }
 
 export interface OrderDetailDeliveryMethod {
@@ -337,8 +339,8 @@ export interface OrderDetailDeliveryMethod {
   restaurant: string;
   deliveryFee: number;
   deliveryFeeType: "fixed" | "percentage";
-  kilometerNumber: number | null;
+  perKilometerFee: number | null;
-  deliveryFeeForKilometer: number | null;
+  distanceBasedMinCost: number | null;
   minOrderPrice: number;
   description: string;
   enabled: boolean;
@@ -396,6 +398,30 @@ export interface OrderDetailItem {
   totalPrice: number;
 }
 
+export interface OrderDetailHistory {
+  status: string;
+  changedAt: string;
+}
+
+export interface OrderDetailPayment {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  order: string;
+  amount: number;
+  referenceId: string | null;
+  method: string;
+  gateway: string | null;
+  transactionId: string | null;
+  status: string;
+  cardPan: string | null;
+  verifyResponse: unknown | null;
+  paidAt: string | null;
+  failedAt: string | null;
+  description: string | null;
+}
+
 export interface OrderDetail {
   id: string;
   createdAt: string;
@@ -420,13 +446,15 @@ export interface OrderDetail {
   description: string | null;
   tableNumber: string;
   status:
+    | "pendingPayment"
     | "new"
     | "preparing"
     | "ready"
     | "delivering"
     | "delivered"
     | "cancelled";
-  paymentStatus: "pending" | "paid" | "failed" | "refunded";
+  history: OrderDetailHistory[];
+  payments: OrderDetailPayment[];
   items: OrderDetailItem[];
 }
 

src/app/[name]/(Dialogs)/order/track/[id]/page.tsx

@@ -4,8 +4,6 @@ import { useParams, useRouter } from 'next/navigation';
 import React from 'react';
 import Button from '@/components/button/PrimaryButton';
 import { Skeleton } from '@/components/ui/skeleton';
-import { HandPlatter, Package } from 'lucide-react';
-import AnimatedBar from '@/components/utils/AnimatedBar';
 import { Clock } from 'iconsax-react';
 import clsx from 'clsx';
 import useToggle from '@/hooks/helpers/useToggle';
@@ -19,13 +17,13 @@ import { useQueryClient } from '@tanstack/react-query';
 const getDeliveryMethodTitle = (method: string) => {
     switch (method) {
         case 'deliveryCourier':
-            return 'ارسال توسط پیک رستوران';
+            return 'ارسال توسط پیک';
         case 'deliveryCar':
-            return 'ارسال توسط خودرو';
+            return 'تحویل به خودرو';
         case 'pickup':
             return 'تحویل حضوری';
         case 'dineIn':
-            return 'سرو در محل';
+            return 'سرو در رستوران';
         default:
             return 'روش ارسال';
     }
@@ -59,6 +57,23 @@ const getStatusText = (status: string): string => {
     return ordersTranslations.status[statusKey] || 'نامشخص';
 };
 
+const formatDate = (dateString: string): string => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('fa-IR', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric'
+    });
+};
+
+// const formatTime = (dateString: string): string => {
+//     const date = new Date(dateString);
+//     return date.toLocaleTimeString('fa-IR', {
+//         hour: '2-digit',
+//         minute: '2-digit'
+//     });
+// };
+
 function OrderTrackingPage() {
     const { id } = useParams();
     const router = useRouter();
@@ -102,16 +117,34 @@ function OrderTrackingPage() {
                                 {getDeliveryMethodTitle(orderDetail.data.deliveryMethod.method)}
                             </h1>
 
-                            <div className='flex flex-col gap-4'>
+                            <div className='flex flex-col'>
-                                <div className='flex justify-between items-center py-3 border-b border-border'>
+                                <div className='flex justify-between items-center h-16 border-b border-border'>
+                                    <span className='text-sm text-muted-foreground flex items-center gap-2'>
+                                        <Clock className='stroke-current' size={16} />
+                                        زمان سفارش
+                                    </span>
+                                    <div className='flex  items-end gap-0.5'>
+                                        <span className='text-base font-semibold'>{formatDate(orderDetail.data.createdAt)}</span>
+                                        {/* <span className='text-xs text-muted-foreground'>{formatTime(orderDetail.data.createdAt)}</span> */}
+                                    </div>
+                                </div>
+                                <div className='flex justify-between items-center h-16 border-b border-border'>
+                                    <span className='text-sm text-muted-foreground'>نوع ارسال</span>
+                                    <span className='text-base font-semibold'>{orderDetail.data?.deliveryMethod?.description}</span>
+                                </div>
+                                <div className='flex justify-between items-center h-16 border-b border-border'>
                                     <span className='text-sm text-muted-foreground'>شماره سفارش</span>
                                     <span className='text-base font-semibold'>#{orderDetail.data.orderNumber}</span>
                                 </div>
+                                <div className='flex justify-between items-center h-16 border-b border-border'>
+                                    <span className='text-sm text-muted-foreground'>وضعیت سفارش</span>
+                                    <span className='text-base font-semibold'>{getStatusText(orderDetail.data.status)}</span>
+                                </div>
 
                                 {orderDetail.data.tableNumber && (
-                                    <div className='flex justify-between items-center py-3 border-b border-border'>
+                                    <div className='flex justify-between items-center h-16 border-b border-border'>
                                         <span className='text-sm text-muted-foreground'>شماره میز</span>
-                                        <span className='text-base font-semibold'>{orderDetail.data.tableNumber}</span>
+                                        <span className='text-base font-semibold'>#{orderDetail.data.tableNumber}</span>
                                     </div>
                                 )}
 
@@ -122,36 +155,6 @@ function OrderTrackingPage() {
                                     </div>
                                 )}
 
-                                <div className='py-4 bg-card rounded-lg flex flex-col gap-4'>
-                                    <div className='px-4'>
-                                        <div className='text-xs text-muted-foreground mb-1'>وضعیت سفارش</div>
-                                        <div className='text-base font-semibold text-primary'>
-                                            {getStatusText(orderDetail.data.status)}
-                                        </div>
-                                    </div>
-
-                                    <div className='px-4 flex gap-2 items-center'>
-                                        <HandPlatter className='text-muted-foreground' size={24} />
-                                        <div className='flex-1'>
-                                            <AnimatedBar percentage={getStatusPercentage(orderDetail.data.status)} />
-                                        </div>
-                                        <Package className='text-muted-foreground' size={24} />
-                                    </div>
-
-                                    <div className='px-4 flex gap-2 items-center text-muted-foreground'>
-                                        <Clock className='stroke-current' size={20} />
-                                        <span className='text-sm'>
-                                            {new Date(orderDetail.data.createdAt).toLocaleDateString('fa-IR', {
-                                                year: 'numeric',
-                                                month: 'long',
-                                                day: 'numeric',
-                                                hour: '2-digit',
-                                                minute: '2-digit'
-                                            })}
-                                        </span>
-                                    </div>
-                                </div>
-
                                 <div className='flex justify-between items-center py-4 border-t border-border'>
                                     <span className='text-base font-medium'>مجموع سفارش</span>
                                     <span className='text-lg font-bold text-primary'>