order detail
This commit is contained in:
@@ -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'>
|
||||
|
||||
Reference in New Issue
Block a user