order detail

This commit is contained in:
hamid zarghami
2025-12-25 09:28:06 +03:30
parent 40794a9cca
commit 931e4dac39
2 changed files with 73 additions and 42 deletions
@@ -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;
deliveryFeeForKilometer: number | null;
perKilometerFee: 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[];
}
@@ -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 justify-between items-center py-3 border-b border-border'>
<div className='flex flex-col'>
<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'>