order history ui
This commit is contained in:
hamid zarghami
@@ -67,9 +67,10 @@ function OrdersIndex() {
|
||||
{ id: 1, title: t('Tab.PreviousOrders'), icon: <Receipt2 size={22} /> }
|
||||
]
|
||||
|
||||
const firstTab = () => {
|
||||
const renderOrders = (isActiveTab: boolean) => {
|
||||
const emptyMessage = isActiveTab ? 'سفارش فعالی وجود ندارد' : 'سفارش قبلی وجود ندارد';
|
||||
if (orders.length === 0) {
|
||||
return [<div key="empty" className='text-center text-sm text-disabled-text py-8'>سفارش فعالی وجود ندارد</div>];
|
||||
return [<div key="empty" className='text-center text-sm text-disabled-text py-8'>{emptyMessage}</div>];
|
||||
}
|
||||
|
||||
return orders.map((order) => {
|
||||
@@ -83,6 +84,7 @@ function OrdersIndex() {
|
||||
<div className="text-sm2">
|
||||
<div className='flex items-center justify-between mb-2'>
|
||||
<div className='flex gap-2 items-center'>
|
||||
{!isActiveTab && <DocumentText size={16} />}
|
||||
<p>#{order.orderNumber}</p>
|
||||
</div>
|
||||
<div className={`flex gap-2 items-center ${getStatusColor(order.status)}`}>
|
||||
@@ -109,10 +111,10 @@ function OrdersIndex() {
|
||||
const itemTotalPrice = (item.totalPrice || item.unitPrice * item.quantity).toLocaleString('fa-IR');
|
||||
return (
|
||||
<div key={item.id} className='flex gap-3 items-center'>
|
||||
<div className='relative w-16 h-16 shrink-0'>
|
||||
<div className='relative max-w-16 max-h-16 w-16 h-16 overflow-hidden shrink-0'>
|
||||
<Image
|
||||
priority
|
||||
className='rounded-lg object-cover'
|
||||
className='rounded-lg max-h-16 max-w-16 object-contain'
|
||||
src={imageUrl}
|
||||
width={64}
|
||||
height={64}
|
||||
@@ -132,92 +134,7 @@ function OrdersIndex() {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className='flex justify-end mt-4'>
|
||||
<div className='font-medium text-sm' dir='ltr'>
|
||||
{formattedPrice} T
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Link href={`track/${order.id}`}>
|
||||
<Button className='mt-6 font-medium!'>{t('Card.TrackOrder')}</Button>
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
const secondTab = () => {
|
||||
if (orders.length === 0) {
|
||||
return [<div key="empty" className='text-center text-sm text-disabled-text py-8'>سفارش قبلی وجود ندارد</div>];
|
||||
}
|
||||
|
||||
return orders.map((order) => {
|
||||
const address = order.userAddress?.address || 'آدرس ثبت نشده';
|
||||
const formattedDate = formatDate(order.createdAt);
|
||||
const formattedPrice = order.total.toLocaleString('fa-IR');
|
||||
const items: HistoryOrderItem[] = order.items || [];
|
||||
|
||||
return (
|
||||
<div key={order.id} className='w-full px-[17px] mb-4 pt-8 pb-6 bg-container rounded-3xl'>
|
||||
<div className="text-sm2">
|
||||
<div className='flex items-center justify-between mb-2'>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<DocumentText size={16} />
|
||||
<p>#{order.orderNumber}</p>
|
||||
</div>
|
||||
<div className={`flex gap-2 items-center ${getStatusColor(order.status)}`}>
|
||||
<TickCircle size={16} />
|
||||
<p className='font-medium'>{t(`status.${order.status}`)}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='mt-2 flex gap-2'>
|
||||
<LocationPinIcon size={16} />
|
||||
<p>{address}</p>
|
||||
</div>
|
||||
<div className='mt-2 flex gap-2'>
|
||||
<CalendarIcon size={16} />
|
||||
<p>{formattedDate}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr className='mx-4 mt-6 text-disabled3 border-2 dark:border-neutral-500' />
|
||||
|
||||
<div className='mt-6 space-y-3'>
|
||||
{items.map((item) => {
|
||||
const imageUrl = getFoodImage(item.variant?.product.images);
|
||||
const foodName = item.variant?.product.title || 'بدون نام';
|
||||
const itemTotalPrice = (item.totalPrice || item.unitPrice * item.quantity).toLocaleString('fa-IR');
|
||||
return (
|
||||
<div key={item.id} className='flex gap-3 items-center'>
|
||||
<div className='relative w-16 h-16 shrink-0'>
|
||||
<Image
|
||||
priority
|
||||
className='rounded-lg object-cover'
|
||||
src={imageUrl}
|
||||
width={64}
|
||||
height={64}
|
||||
alt={foodName}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex-1 min-w-0'>
|
||||
<p className='text-sm2 font-normal text-black dark:text-white truncate'>
|
||||
{foodName}
|
||||
</p>
|
||||
<div className='flex items-center gap-2 mt-1'>
|
||||
<span className='text-xs text-disabled-text'>
|
||||
{item.quantity}x
|
||||
</span>
|
||||
<span className='text-xs font-medium' dir='ltr'>
|
||||
{itemTotalPrice} T
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{order.status === OrderStatus.COMPLETED && (
|
||||
{!isActiveTab && order.status === OrderStatus.COMPLETED && (
|
||||
<Link href={`rate/${order.id}?foodId=${item.variant?.product.id}`}>
|
||||
<Button className='text-xs px-3 py-2 h-auto'>{t('Card.Rate')}</Button>
|
||||
</Link>
|
||||
@@ -233,8 +150,13 @@ function OrdersIndex() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button className='mt-6 font-medium! bg-disabled! text-disabled-text! w-full'>{t('Card.Reorder')}</Button>
|
||||
|
||||
{isActiveTab ? (
|
||||
<Link href={`track/${order.id}`}>
|
||||
<Button className='mt-6 font-medium!'>{t('Card.TrackOrder')}</Button>
|
||||
</Link>
|
||||
) : (
|
||||
<Button className='mt-6 font-medium! bg-disabled! text-disabled-text! w-full'>{t('Card.Reorder')}</Button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
@@ -245,12 +167,12 @@ function OrdersIndex() {
|
||||
<div className='pt-8'>
|
||||
<TabContainer selectedTab={selectedTab} onTabChange={setSelectedTab}>
|
||||
<TabHeader
|
||||
viewRenderer={<div className='pt-4'>{firstTab()}</div>}
|
||||
viewRenderer={<div className='pt-4'>{renderOrders(true)}</div>}
|
||||
title={categories[0].title}
|
||||
icon={categories[0].icon}
|
||||
/>
|
||||
<TabHeader
|
||||
viewRenderer={<div className='pt-4'>{secondTab()}</div>}
|
||||
viewRenderer={<div className='pt-4'>{renderOrders(false)}</div>}
|
||||
title={categories[1].title}
|
||||
icon={categories[1].icon}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user