order item
This commit is contained in:
@@ -3,6 +3,7 @@ import { Receipt1 } from 'iconsax-react'
|
||||
import { useParams } from 'react-router-dom'
|
||||
import { useGetOrderDetails } from './hooks/useOrderData'
|
||||
import TicketSection from './components/TicketSection'
|
||||
import OrderItem from './components/OrderItem'
|
||||
|
||||
const OrderDetail: FC = () => {
|
||||
|
||||
@@ -32,42 +33,7 @@ const OrderDetail: FC = () => {
|
||||
{
|
||||
data?.data?.items?.map((item) => {
|
||||
return (
|
||||
<div key={item.product.id}>
|
||||
<div className="flex items-center gap-6">
|
||||
{/* Product Image */}
|
||||
<div className='size-[86px] rounded-lg overflow-hidden'>
|
||||
<img src={item.product?.images?.[0]} className='size-full' />
|
||||
</div>
|
||||
|
||||
{/* Order Details */}
|
||||
<div className="flex-1 flex gap-20 pr-10">
|
||||
<div className='flex items-center gap-2'>
|
||||
<div className="text-xs text-desc">عنوان:</div>
|
||||
<div className="text-sm font-medium text-black">{item.product.title}</div>
|
||||
</div>
|
||||
<div className='flex items-center gap-2'>
|
||||
<div className="text-xs text-desc">نام طرح:</div>
|
||||
<div className="text-sm font-medium text-black">{'orderData.designer'}</div>
|
||||
</div>
|
||||
<div className='flex items-center gap-2'>
|
||||
<div className="text-xs text-desc">تعداد:</div>
|
||||
<div className="text-sm font-medium text-black">{item.quantity}</div>
|
||||
</div>
|
||||
<div className='flex items-center gap-2'>
|
||||
<div className="text-xs text-desc">تخمین زمان:</div>
|
||||
<div className="text-sm font-medium text-black">{data?.data?.estimatedDays}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Order Description */}
|
||||
<div className="mt-6 pt-6 border-t border-dashed border-desc">
|
||||
<div className="text-sm font-medium mb-2 text-desc">شرح سفارش:</div>
|
||||
<p className="text-sm font-light text-black leading-6">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<OrderItem estimatedDays={data?.data?.estimatedDays} item={item} />
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
import { type FC } from 'react'
|
||||
import type { OrderItemType } from '../types/Types'
|
||||
import { useGetEntityField } from '@/pages/formBuilder/hooks/useFormBuilderData'
|
||||
|
||||
type Props = {
|
||||
item: OrderItemType,
|
||||
estimatedDays?: number,
|
||||
}
|
||||
|
||||
const OrderItem: FC<Props> = ({ item, estimatedDays }) => {
|
||||
|
||||
const { data: fields } = useGetEntityField(item.product?.id)
|
||||
|
||||
|
||||
return (
|
||||
<div key={item.product.id}>
|
||||
<div className="flex items-center gap-6">
|
||||
{/* Product Image */}
|
||||
<div className='size-[86px] rounded-lg overflow-hidden'>
|
||||
<img src={item.product?.images?.[0]} className='size-full' />
|
||||
</div>
|
||||
|
||||
{/* Order Details */}
|
||||
<div className="flex-1 flex gap-20 pr-10">
|
||||
<div className='flex items-center gap-2'>
|
||||
<div className="text-xs text-desc">عنوان:</div>
|
||||
<div className="text-sm font-medium text-black">{item.product.title}</div>
|
||||
</div>
|
||||
<div className='flex items-center gap-2'>
|
||||
<div className="text-xs text-desc">نام طرح:</div>
|
||||
<div className="text-sm font-medium text-black">{'orderData.designer'}</div>
|
||||
</div>
|
||||
<div className='flex items-center gap-2'>
|
||||
<div className="text-xs text-desc">تعداد:</div>
|
||||
<div className="text-sm font-medium text-black">{item.quantity}</div>
|
||||
</div>
|
||||
<div className='flex items-center gap-2'>
|
||||
<div className="text-xs text-desc">تخمین زمان:</div>
|
||||
<div className="text-sm font-medium text-black">{estimatedDays}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Order Description */}
|
||||
<div className="mt-6 pt-6 border-t border-dashed border-desc">
|
||||
<div className="text-sm font-medium mb-2 text-desc">شرح سفارش:</div>
|
||||
<p className="text-sm font-light text-black leading-6">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className='font-bold mb-5 mt-7 '>
|
||||
ویژگی ها
|
||||
</div>
|
||||
{
|
||||
fields?.data?.map((field) => {
|
||||
const value = item.attributes?.find((o => Number(o.attributeId) === Number(field.id)))
|
||||
|
||||
|
||||
return (
|
||||
<div className='flex gap-3 items-center mt-3' key={field.id}>
|
||||
<div className='text-sm text-gray-500'>
|
||||
{field.name} :
|
||||
</div>
|
||||
<div className='text-sm -mt-px'>
|
||||
{value?.value || '-'}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default OrderItem
|
||||
@@ -114,20 +114,25 @@ export interface MyOrderType extends RowDataType {
|
||||
subTotal: number;
|
||||
taxAmount: number;
|
||||
total: number;
|
||||
items: {
|
||||
adminDescription?: string;
|
||||
attachments: {
|
||||
type: string;
|
||||
url: string;
|
||||
}[];
|
||||
description: string;
|
||||
product: ProductType;
|
||||
quantity: number;
|
||||
subTotal: number;
|
||||
total: number;
|
||||
unitPrice: number;
|
||||
}[];
|
||||
items: OrderItemType[];
|
||||
}
|
||||
|
||||
export type OrderItemType = {
|
||||
adminDescription?: string;
|
||||
attachments: {
|
||||
type: string;
|
||||
url: string;
|
||||
}[];
|
||||
description: string;
|
||||
product: ProductType;
|
||||
quantity: number;
|
||||
subTotal: number;
|
||||
total: number;
|
||||
unitPrice: number;
|
||||
attributes: {
|
||||
attributeId: number;
|
||||
value: string;
|
||||
}[];
|
||||
};
|
||||
export type TicketsResponseType = BaseResponse<TicketType[]>;
|
||||
export type OrderDetailResponseType = BaseResponse<MyOrderType>;
|
||||
|
||||
Reference in New Issue
Block a user