discount

src/pages/requests/components/RequestItem.tsx

@@ -9,6 +9,29 @@ type Props = {
 
 const RequestItem: FC<Props> = ({ item }) => {
     const { data: fields } = useGetEntityField(String(item.product?.id ?? ''))
+    const attributes = item.attributes ?? []
+
+    const getAttributeFieldId = (attribute: NonNullable<RequestDetailItemType['attributes']>[number]) =>
+        attribute.fieldId ?? attribute.attributeId ?? attribute.field?.id
+
+    const fieldRows = fields?.data?.map((field) => ({
+        id: field.id,
+        name: field.name,
+        value: attributes.find((attribute) => String(getAttributeFieldId(attribute)) === String(field.id))?.value,
+    })) ?? []
+
+    const matchedFieldIds = new Set(fieldRows.map((field) => String(field.id)))
+    const extraAttributeRows = attributes
+        .filter((attribute) => {
+            const fieldId = getAttributeFieldId(attribute)
+            return fieldId && !matchedFieldIds.has(String(fieldId))
+        })
+        .map((attribute) => ({
+            id: String(getAttributeFieldId(attribute)),
+            name: attribute.field?.name ?? String(getAttributeFieldId(attribute)),
+            value: attribute.value,
+        }))
+    const attributeRows = [...fieldRows, ...extraAttributeRows]
 
     const handleOpenAttachment = (url: string) => {
         window.open(url, '_blank')
@@ -53,19 +76,16 @@ const RequestItem: FC<Props> = ({ item }) => {
             )}
 
             {/* Attributes */}
-            {fields?.data?.length ? (
+            {attributeRows.length ? (
                 <>
                     <div className='font-bold mb-5 mt-7'>ویژگی ها</div>
                     {
-                        fields.data.map((field) => {
-                            const value = item.attributes?.find((o) => String(o.attributeId) === String(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>
-                            )
-                        })
+                        attributeRows.map((field) => (
+                            <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'>{field.value || '-'}</div>
+                            </div>
+                        ))
                     }
                 </>
             ) : null}