order item

src/pages/formBuilder/hooks/useFormBuilderData.ts

@@ -96,3 +96,11 @@ export const useDeleteFieldValue = () => {
     mutationFn: (id: number) => api.deleteFieldValue(id),
   });
 };
+
+export const useGetEntityField = (entityId: number) => {
+  return useQuery({
+    queryKey: ["entity-field", entityId],
+    queryFn: () => api.getEntityField(entityId),
+    enabled: !!entityId,
+  });
+};

src/pages/formBuilder/service/FormBuilderService.ts

@@ -6,6 +6,7 @@ import type {
   FieldResponseType,
   FieldValueDetailResponseType,
   FieldValuesResponseType,
+  GetEnitityFieldResponseType,
 } from "../types/Types";
 
 export const createField = async (id: number, params: CreateFieldType) => {
@@ -15,14 +16,14 @@ export const createField = async (id: number, params: CreateFieldType) => {
 
 export const getFields = async (id: number) => {
   const { data } = await axios.get<FieldResponseType>(
-    `/admin/entity/${id}/field`,
+    `/admin/entity/${id}/field`
   );
   return data;
 };
 
 export const getFieldDetail = async (id: number) => {
   const { data } = await axios.get<FieldDetailResponseType>(
-    `/admin/entity/field/${id}`,
+    `/admin/entity/field/${id}`
   );
   return data;
 };
@@ -39,14 +40,14 @@ export const deleteFields = async (id: number) => {
 
 export const getFieldValues = async (id: number) => {
   const { data } = await axios.get<FieldValuesResponseType>(
-    `/admin/entity/field/${id}/option`,
+    `/admin/entity/field/${id}/option`
   );
   return data;
 };
 
 export const createFieldValues = async (
   id: number,
-  params: CreateFieldValueType,
+  params: CreateFieldValueType
 ) => {
   const { data } = await axios.post(`/admin/entity/field/${id}/option`, params);
   return data;
@@ -54,18 +55,18 @@ export const createFieldValues = async (
 
 export const updateFieldValues = async (
   id: number,
-  params: CreateFieldValueType,
+  params: CreateFieldValueType
 ) => {
   const { data } = await axios.patch(
     `/admin/entity/field/option/${id}`,
-    params,
+    params
   );
   return data;
 };
 
 export const getFieldValueDetail = async (id: number) => {
   const { data } = await axios.get<FieldValueDetailResponseType>(
-    `/admin/entity/field/option/${id}`,
+    `/admin/entity/field/option/${id}`
   );
   return data;
 };
@@ -74,3 +75,10 @@ export const deleteFieldValue = async (id: number) => {
   const { data } = await axios.delete(`/admin/entity/field/option/${id}`);
   return data;
 };
+
+export const getEntityField = async (entityId: number) => {
+  const { data } = await axios.get<GetEnitityFieldResponseType>(
+    `/admin/entity/${entityId}/field`
+  );
+  return data;
+};

src/pages/formBuilder/types/Types.ts

@@ -10,7 +10,7 @@ export type CreateFieldType = {
   entityType:string, // 'product' | 'print'
 }
 
-export type FieldType = {
+export interface FieldType {
     createdAt: string,
     id: number,
     isRequired: boolean,
@@ -37,5 +37,10 @@ export type FieldValueType = {
     value: string,
 }
 
+export interface EntityType extends FieldType {
+    options: FieldValueType[]
+}
+
 export type FieldValuesResponseType = BaseResponse<FieldValueType[]>;
 export type FieldValueDetailResponseType = BaseResponse<FieldValueType>;
+export type GetEnitityFieldResponseType = BaseResponse<EntityType[]>;

src/pages/order/OrderDetail.tsx

@@ -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}>
+                                <OrderItem estimatedDays={data?.data?.estimatedDays} item={item} />
-                                    <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>
                             )
                         })
                     }

src/pages/order/components/OrderItem.tsx

@@ -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

src/pages/order/types/Types.ts

@@ -114,20 +114,25 @@ export interface MyOrderType extends RowDataType {
   subTotal: number;
   taxAmount: number;
   total: number;
-  items: {
+  items: OrderItemType[];
-    adminDescription?: string;
-    attachments: {
-      type: string;
-      url: string;
-    }[];
-    description: string;
-    product: ProductType;
-    quantity: number;
-    subTotal: number;
-    total: number;
-    unitPrice: number;
-  }[];
 }
 
+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>;