[Auto Generated]

Author: jigardafda

dist/components/order-shipment/order-shipment.js

@@ -2905,6 +2905,9 @@ h5,
   font-weight: 600;
   line-height: 140%;
 }
+.shipment-item__bagItem___YVBW1 .shipment-item__bagInfo___j7W8G .shipment-item__productCustomizationContainer___wXSug {
+  margin-top: 8px;
+}
 .shipment-item__bagItem___YVBW1 .shipment-item__bagInfo___j7W8G .shipment-item__requestReattempt___iY8FT {
   width: 163px;
   padding-top: 16px;

dist/components/shipment-item/shipment-item.css

@@ -1 +1 @@
-eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE3NzM3NTc1MTksImV4cCI6MTc3Mzc1ODA4OSwiaXNzIjoiMzA1NjEyNSJ9.YmKdTeiERCyZ_mr7d0AmyFN1mMhMiDljr6gokoeEIhEyegN3k8aQHVPCr8RAP9AdhEQKjDseQAe1gxm-qjz5oI-_BNuvOhV6gsgBjBId42SlHuw6dfGMqyOGPRtXo4W4wwv6jRowvuFdxXBrVr7wocx-xON0d7uotWfMU_bGiIYdY3BZpFDXBlDPGw8O4D-7RmYuK5sfsY3cDtrZ1V8sxRDTfDNlY1XQHFImAzHYW1tLGhIQBYXmCV6Z-ZWN86u9d8ZA_vU5WXQ2s-7rpDRRcE3L9aYO9jojfgBjFBWx1h33P_5hnxmiwmmkxTyrDxM4ncVPrMTvql0KPZyEK_Pysw
+eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE3NzM3NzMwMjMsImV4cCI6MTc3Mzc3MzU5MywiaXNzIjoiMzA1NjEyNSJ9.MowOObXiXR9M8FhsBKl-maRGyfQgEiytJCletBBXHBzjl6N_oMinjgnrSfBycvQAP0W10wZL98P5A8mcJ7uBFY_16RtvQV0ZBJ7bZx5QLLb2i7ZxstiR5Iqf0nXp7t5wMQ24eodyIRDf0NDmFYsZ_Nmnv3GjzO4-Yxfc9qSKyDbLc8iyBENVmGkYvFeB5G3qU3vBL8Ii2vyZnNJUftTBLX0TqqGBJEXFZZ_VuLLi5mWxF21GV-GLTTNkesVUTablqs-THCPR2KQRB5gAc3ceA2T8E-07qkTwaYvgyCOt_Usaxh-A9qx0tcqkfSUHfwhIyNVtoW0Ura_YMCdw3RNXyw

dist/components/shipment-item/shipment-item.js

@@ -14,7 +14,7 @@
  *
  */
 
-import React, { useMemo } from "react";
+import React, { useMemo, useState } from "react";
 import { FDKLink } from "fdk-core/components";
 import * as styles from "./shipment-item.less";
 import SvgWrapper from "../../components/core/svgWrapper/SvgWrapper";
@@ -23,6 +23,8 @@ import { useGlobalTranslation } from "fdk-core/utils";
 import ScheduleIcon from "../../assets/images/schedule.svg";
 import { BagImage, BundleBagImage } from "../../components/bag/bag";
 import { getProductImgAspectRatio } from "../../helper/utils";
+import Accordion from "../accordion/accordion";
+import { transformDisplayToAccordionContent } from "../../helper/customization-display";
 
 function ShipmentItem({
   bag,
@@ -76,6 +78,13 @@ function ShipmentItem({
     return endDate < now;
   };
 
+  const customizationOptions = transformDisplayToAccordionContent(
+    bag?.meta?._custom_json?._display || []
+  );
+  const [accordionItems, setAccordionItems] = useState([
+    { title: "Customization", content: customizationOptions, open: false },
+  ]);
+
   const bundleGroupId = bag?.bundle_details?.bundle_group_id;
   const isBundleItem =
     bundleGroupId && bundleGroups && bundleGroups[bundleGroupId]?.length > 0;
@@ -208,6 +217,20 @@ function ShipmentItem({
               </div>
             )}
           </div>
+          {customizationOptions.length > 0 && (
+            <div className={styles.productCustomizationContainer}>
+              <Accordion
+                items={accordionItems}
+                onItemClick={(index) =>
+                  setAccordionItems((prev) =>
+                    prev.map((acc, i) =>
+                      i === index ? { ...acc, open: !acc.open } : acc
+                    )
+                  )
+                }
+              />
+            </div>
+          )}
           <div className={styles.buttonContainer}>
             <div
               className={`${styles.requestReattempt} ${

dist/pages/order/order-tracking-details/order-tracking-details.css

@@ -114,6 +114,10 @@
       line-height: 140%;
     }
 
+    .productCustomizationContainer {
+      margin-top: 8px;
+    }
+
     .requestReattempt {
       width: 163px;
       padding-top: 16px;