history orders
This commit is contained in:
hamid zarghami
@@ -9,103 +9,48 @@ import { TabHeader } from '@/components/tab/TabHeader';
|
||||
import { Receipt2, ReceiptItem } from 'iconsax-react';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import React from 'react'
|
||||
import React, { useMemo } from 'react'
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useGetOrders } from './hooks/useHistoryData';
|
||||
import { HistoryOrderItem } from './types/Types';
|
||||
|
||||
const currentOrders = [
|
||||
{
|
||||
id: 0,
|
||||
address: 'خیابان دانشگاه روبروی بیمارستان خوانساری ساختمان مهر...',
|
||||
date: 'دوشنبه، 28 مرداد 1403',
|
||||
price: '560,000',
|
||||
items: [
|
||||
{ id: 0, quantity: 1, image: '/assets/images/food-preview.png' },
|
||||
{ id: 1, quantity: 1, image: '/assets/images/food-preview.png' },
|
||||
{ id: 2, quantity: 2, image: '/assets/images/food-preview.png' },
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
address: '1...',
|
||||
date: 'دوشنبه، 28 مرداد 1403',
|
||||
price: '560,000',
|
||||
items: [
|
||||
{ id: 0, quantity: 1, image: '/assets/images/food-preview.png' },
|
||||
{ id: 1, quantity: 1, image: '/assets/images/food-preview.png' },
|
||||
{ id: 2, quantity: 2, image: '/assets/images/food-preview.png' },
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
address: '2...',
|
||||
date: 'دوشنبه، 28 مرداد 1403',
|
||||
price: '560,000',
|
||||
items: [
|
||||
{ id: 0, quantity: 1, image: '/assets/images/food-preview.png' },
|
||||
{ id: 1, quantity: 1, image: '/assets/images/food-preview.png' },
|
||||
{ id: 2, quantity: 2, image: '/assets/images/food-preview.png' },
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
address: '3...',
|
||||
date: 'دوشنبه، 28 مرداد 1403',
|
||||
price: '560,000',
|
||||
items: [
|
||||
{ id: 0, quantity: 1, image: '/assets/images/food-preview.png' },
|
||||
{ id: 1, quantity: 1, image: '/assets/images/food-preview.png' },
|
||||
{ id: 2, quantity: 2, image: '/assets/images/food-preview.png' },
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
address: '2...',
|
||||
date: 'دوشنبه، 28 مرداد 1403',
|
||||
price: '560,000',
|
||||
items: [
|
||||
{ id: 0, quantity: 1, image: '/assets/images/food-preview.png' },
|
||||
{ id: 1, quantity: 1, image: '/assets/images/food-preview.png' },
|
||||
{ id: 2, quantity: 2, image: '/assets/images/food-preview.png' },
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
address: '3...',
|
||||
date: 'دوشنبه، 28 مرداد 1403',
|
||||
price: '560,000',
|
||||
items: [
|
||||
{ id: 0, quantity: 1, image: '/assets/images/food-preview.png' },
|
||||
{ id: 1, quantity: 1, image: '/assets/images/food-preview.png' },
|
||||
{ id: 2, quantity: 2, image: '/assets/images/food-preview.png' },
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
address: '2...',
|
||||
date: 'دوشنبه، 28 مرداد 1403',
|
||||
price: '560,000',
|
||||
items: [
|
||||
{ id: 0, quantity: 1, image: '/assets/images/food-preview.png' },
|
||||
{ id: 1, quantity: 1, image: '/assets/images/food-preview.png' },
|
||||
{ id: 2, quantity: 2, image: '/assets/images/food-preview.png' },
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
address: '3...',
|
||||
date: 'دوشنبه، 28 مرداد 1403',
|
||||
price: '560,000',
|
||||
items: [
|
||||
{ id: 0, quantity: 1, image: '/assets/images/food-preview.png' },
|
||||
{ id: 1, quantity: 1, image: '/assets/images/food-preview.png' },
|
||||
{ id: 2, quantity: 2, image: '/assets/images/food-preview.png' },
|
||||
]
|
||||
},
|
||||
]
|
||||
const fallbackImage = '/assets/images/food-preview.png';
|
||||
|
||||
const getFoodImage = (images: string | null | undefined): string => {
|
||||
if (!images || typeof images !== 'string') {
|
||||
return fallbackImage;
|
||||
}
|
||||
return images;
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string): string => {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('fa-IR', {
|
||||
weekday: 'long',
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
});
|
||||
};
|
||||
|
||||
function OrdersIndex() {
|
||||
|
||||
const { t } = useTranslation('orders');
|
||||
const { data: ordersData } = useGetOrders();
|
||||
|
||||
const orders = useMemo(() => ordersData?.data || [], [ordersData?.data]);
|
||||
|
||||
const activeOrders = useMemo(() => {
|
||||
return orders.filter((order) => {
|
||||
return order.status !== 'delivered' && order.status !== 'cancelled';
|
||||
});
|
||||
}, [orders]);
|
||||
|
||||
const previousOrders = useMemo(() => {
|
||||
return orders.filter((order) => {
|
||||
return order.status === 'delivered' || order.status === 'cancelled';
|
||||
});
|
||||
}, [orders]);
|
||||
|
||||
const categories = [
|
||||
{ id: 0, title: t('Tab.ActiveOrders'), icon: <ReceiptItem size={22} /> },
|
||||
@@ -113,17 +58,26 @@ function OrdersIndex() {
|
||||
]
|
||||
|
||||
const firstTab = () => {
|
||||
return currentOrders.map((order) => {
|
||||
if (activeOrders.length === 0) {
|
||||
return [<div key="empty" className='text-center text-sm text-disabled-text py-8'>سفارش فعالی وجود ندارد</div>];
|
||||
}
|
||||
|
||||
return activeOrders.map((order) => {
|
||||
const address = order.address?.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 gap-2'>
|
||||
<LocationPinIcon size={16} />
|
||||
<p>{order.address}</p>
|
||||
<p>{address}</p>
|
||||
</div>
|
||||
<div className='mt-2 flex gap-2'>
|
||||
<CalendarIcon size={16} />
|
||||
<p>{order.date}</p>
|
||||
<p>{formattedDate}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -131,13 +85,14 @@ function OrdersIndex() {
|
||||
|
||||
<div className='flex justify-between mt-6'>
|
||||
<div className='flex justify-start gap-[9px]'>
|
||||
{order.items.map((item) => {
|
||||
{items.map((item) => {
|
||||
const imageUrl = getFoodImage(item.food.images);
|
||||
return (
|
||||
<span key={item.id} className='w-8 h-8 relative'>
|
||||
<Image
|
||||
priority
|
||||
className='rounded-lg'
|
||||
src={item.image}
|
||||
src={imageUrl}
|
||||
width={32}
|
||||
height={32}
|
||||
alt="order image"
|
||||
@@ -150,7 +105,7 @@ function OrdersIndex() {
|
||||
})}
|
||||
</div>
|
||||
<div className='font-medium text-sm' dir='ltr'>
|
||||
{order.price} T
|
||||
{formattedPrice} T
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -163,17 +118,26 @@ function OrdersIndex() {
|
||||
}
|
||||
|
||||
const secondTab = () => {
|
||||
return currentOrders.map((order) => {
|
||||
if (previousOrders.length === 0) {
|
||||
return [<div key="empty" className='text-center text-sm text-disabled-text py-8'>سفارش قبلی وجود ندارد</div>];
|
||||
}
|
||||
|
||||
return previousOrders.map((order) => {
|
||||
const address = order.address?.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 gap-2'>
|
||||
<LocationPinIcon size={16} />
|
||||
<p>{order.address}</p>
|
||||
<p>{address}</p>
|
||||
</div>
|
||||
<div className='mt-2 flex gap-2'>
|
||||
<CalendarIcon size={16} />
|
||||
<p>{order.date}</p>
|
||||
<p>{formattedDate}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -181,13 +145,14 @@ function OrdersIndex() {
|
||||
|
||||
<div className='flex justify-between mt-6'>
|
||||
<div className='flex justify-start gap-[9px]'>
|
||||
{order.items.map((item) => {
|
||||
{items.map((item) => {
|
||||
const imageUrl = getFoodImage(item.food.images);
|
||||
return (
|
||||
<span key={item.id} className='w-8 h-8 relative'>
|
||||
<Image
|
||||
priority
|
||||
className='rounded-lg'
|
||||
src={item.image}
|
||||
src={imageUrl}
|
||||
width={32}
|
||||
height={32}
|
||||
alt="order image"
|
||||
@@ -200,7 +165,7 @@ function OrdersIndex() {
|
||||
})}
|
||||
</div>
|
||||
<div className='font-medium text-sm' dir='ltr'>
|
||||
{order.price} T
|
||||
{formattedPrice} T
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -222,12 +187,14 @@ function OrdersIndex() {
|
||||
<TabContainer>
|
||||
<TabHeader
|
||||
viewRenderer={<PerformantTabRenderer rowHeight={320}>{firstTab()}</PerformantTabRenderer>}
|
||||
title={categories[0].title} icon={categories[0].icon}>
|
||||
</TabHeader>
|
||||
title={categories[0].title}
|
||||
icon={categories[0].icon}
|
||||
/>
|
||||
<TabHeader
|
||||
viewRenderer={<PerformantTabRenderer rowHeight={320}>{secondTab()}</PerformantTabRenderer>}
|
||||
title={categories[1].title} icon={categories[1].icon}>
|
||||
</TabHeader>
|
||||
title={categories[1].title}
|
||||
icon={categories[1].icon}
|
||||
/>
|
||||
</TabContainer>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user