order item

2026-01-31 14:13:02 +03:30
parent b730f86b1e
commit a0d099b50f
6 changed files with 125 additions and 57 deletions
@@ -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