contentoh-components-library 21.5.95 → 21.5.97

package/src/components/pages/ProviderProductEdition/index.js

@@ -143,8 +143,9 @@ const ProviderProductEditionView = ({
   useEffect(() => {
     const setProductData = () => {
       try {
-
-        const product = productSelected ? productSelected : JSON.parse(sessionStorage.getItem("productSelected"));
+        const product = productSelected
+          ? productSelected
+          : JSON.parse(sessionStorage.getItem("productSelected"));
 
         const productNormalized = normalizeProduct(product);
 
@@ -152,10 +153,35 @@ const ProviderProductEditionView = ({
           type: "SET_PRODUCT",
           payload: productNormalized,
         });
-        dispatch({
-          type: "SET_ACTIVE_RETAILER",
-          payload: productNormalized.categoryRetailer[0],
-        });
+        if (
+          productNormalized.categoryRetailerInOrder.length > 0 &&
+          productNormalized.statusByRetailer
+        ) {
+          dispatch({
+            type: "SET_ACTIVE_RETAILER",
+            payload: productNormalized.categoryRetailerInOrder[0],
+          });
+          const firstRetailerStatus =
+            productNormalized.statusByRetailer[
+              productNormalized.categoryRetailerInOrder[0].id_retailer
+            ];
+          const initialTab = firstRetailerStatus.description
+            ? "Descripción"
+            : firstRetailerStatus.datasheet
+            ? "Ficha técnica"
+            : firstRetailerStatus.images
+            ? "Imágenes"
+            : "Imágenes";
+          dispatch({
+            type: "SET_ACTIVE_TAB",
+            payload: initialTab,
+          });
+        } else {
+          dispatch({
+            type: "SET_ACTIVE_RETAILER",
+            payload: productNormalized.categoryRetailer[0],
+          });
+        }
       } catch (error) {
         console.log("Error setting product data: ", error);
       }
@@ -199,7 +225,7 @@ const ProviderProductEditionView = ({
             id_category,
             version,
             token,
-            id_retailer
+            id_retailer,
           ),
           getPercentage({ data, headers }),
           getServicesData({
@@ -213,14 +239,14 @@ const ProviderProductEditionView = ({
         const percentages =
           JSON.parse(percentageRes?.[0]?.body)?.[0]?.relations ?? [];
 
-        const orderMap = services[2].inputsByRetailer
-          .flat()
-          .reduce((acc, item) => {
+        const orderMap =
+          services[2].inputsByRetailer ??
+          [].flat().reduce((acc, item) => {
             acc[item.id_image] = item.order;
             return acc;
           }, {});
 
-        const orderedValues = [...services[2].values].sort((a, b) => {
+        const orderedValues = [...(services[2].values ?? [])].sort((a, b) => {
           const orderA = orderMap[a.image_id] ?? Number.MAX_SAFE_INTEGER;
           const orderB = orderMap[b.image_id] ?? Number.MAX_SAFE_INTEGER;
 
@@ -229,22 +255,26 @@ const ProviderProductEditionView = ({
 
         //Cuando carguemos la información de los servicios, las actualizamos en el estado del producto
 
-        const updatedStatusByRetailer = servicesDataRes.reduce((acc, current, idx) => {
-
-          const { id_retailer, service, status } = current;
-
-          if(!acc[id_retailer]) acc[id_retailer] = {};
+        const updatedStatusByRetailer = servicesDataRes.reduce(
+          (acc, current, idx) => {
+            const { id_retailer, service, status } = current;
 
-          acc[id_retailer][service] = status;
+            if (!acc[id_retailer]) acc[id_retailer] = {};
 
-          return acc;
+            acc[id_retailer][service] = status;
 
-        }, {});
+            return acc;
+          },
+          {},
+        );
 
-        dispatch({ type: "SET_PRODUCT", payload: {
-          ...state.product,
-          statusByRetailer: updatedStatusByRetailer
-        }});
+        dispatch({
+          type: "SET_PRODUCT",
+          payload: {
+            ...state.product,
+            statusByRetailer: updatedStatusByRetailer,
+          },
+        });
 
         dispatch({
           type: "SET_SERVICES",
@@ -295,45 +325,49 @@ const ProviderProductEditionView = ({
     const updateInputsActiveRetailer = () => {
       if (!state.services) return;
 
-      const retailerDatasheets =
-        state.services.datasheets[state.active_retailer.id_retailer];
-
-      const datasheetsActiveRetailer = {
-        ...retailerDatasheets,
-        data: Object.values(retailerDatasheets.data),
-      };
-
-      const descriptionsActiveRetailer = state.services.descriptions.filter(
-        (item) => item.id === state.active_retailer.id_retailer
-      );
+      if (state.services.datasheets) {
+        const retailerDatasheets =
+          state.services.datasheets[state.active_retailer.id_retailer];
+        const datasheetsActiveRetailer = {
+          ...retailerDatasheets,
+          data: Object.values(retailerDatasheets.data),
+        };
+        dispatch({
+          type: "SET_DATASHEETS_INPUTS",
+          payload: [datasheetsActiveRetailer, state.services.datasheets.inputs],
+        });
+      }
 
-      const filteredValues = state.services.images.values.filter((value) => {
-        return state.services.images.inputsByRetailer.some((retailerInput) =>
-          retailerInput.some(
-            (input) =>
-              input.id_retailer === state.active_retailer.id_retailer &&
-              input.id_image === value.image_id
-          )
+      if (state.services.descriptions) {
+        const descriptionsActiveRetailer = state.services.descriptions.filter(
+          (item) => item.id === state.active_retailer.id_retailer,
         );
-      });
 
-      dispatch({
-        type: "SET_DATASHEETS_INPUTS",
-        payload: [datasheetsActiveRetailer, state.services.datasheets.inputs],
-      });
+        dispatch({
+          type: "SET_DESCRIPTIONS_INPUTS",
+          payload: descriptionsActiveRetailer,
+        });
+      }
 
-      dispatch({
-        type: "SET_DESCRIPTIONS_INPUTS",
-        payload: descriptionsActiveRetailer,
-      });
+      if (state.services.images) {
+        const filteredValues = state.services.images.values.filter((value) => {
+          return state.services.images.inputsByRetailer.some((retailerInput) =>
+            retailerInput.some(
+              (input) =>
+                input.id_retailer === state.active_retailer.id_retailer &&
+                input.id_image === value.image_id,
+            ),
+          );
+        });
 
-      dispatch({
-        type: "SET_IMAGES_VALUES",
-        payload: {
-          ...state.services.images,
-          values: filteredValues,
-        },
-      });
+        dispatch({
+          type: "SET_IMAGES_VALUES",
+          payload: {
+            ...state.services.images,
+            values: filteredValues,
+          },
+        });
+      }
     };
 
     updateInputsActiveRetailer();
@@ -343,38 +377,41 @@ const ProviderProductEditionView = ({
   const canShowValidationButtons = () => {
     if (!state.product?.statusByRetailer) return false;
 
-    const currentService = getConceptByTab(state.active_tab);
-    // const currentStatus = state.product[`${currentService}_status`];
-    const currentRetailer = state.active_retailer.id_retailer;
-
-    //Información del servicio de la cadena seleccionada
-    const {
-      status: currentStatus
-    } = state.services_data.find(service => service.service === currentService && service.id_retailer === currentRetailer);
+    try {
+      const currentService = getConceptByTab(state.active_tab);
+      // const currentStatus = state.product[`${currentService}_status`];
+      const currentRetailer = state.active_retailer.id_retailer;
+
+      //Información del servicio de la cadena seleccionada
+      const { status: currentStatus } = state.services_data.find(
+        (service) =>
+          service.service === currentService &&
+          service.id_retailer === currentRetailer,
+      );
 
-    const originTab = origin[state.active_tab];
-    const isRetailerUser = user?.is_retailer === 1;
+      const originTab = origin[state.active_tab];
+      const isRetailerUser = user?.is_retailer === 1;
 
-    const validStatuses = ["AA", "AP", "R", "CA", "RCA"];
-    if (!validStatuses.includes(currentStatus)) return false;
+      const validStatuses = ["AA", "AP", "R", "CA", "RCA"];
+      if (!validStatuses.includes(currentStatus)) return false;
 
-    const validOrigins = [
-      "RequestWithContentoh",
-      "RequestWithoutContentoh",
-      "Contentoh",
-    ];
+      const validOrigins = [
+        "RequestWithContentoh",
+        "RequestWithoutContentoh",
+        "Contentoh",
+      ];
 
-    if (!validOrigins.includes(originTab)) return false;
+      if (!validOrigins.includes(originTab)) return false;
 
-    // Retailer: solo AP
-    if (isRetailerUser) {
-      return currentStatus === "AP";
-    }
+      // Retailer: solo AP
+      if (isRetailerUser) {
+        return currentStatus === "AP";
+      }
 
-    // No retailer
-    const hasNoOrder = !state.product.id_order && !state.product.orderId;
+      // No retailer
+      const hasNoOrder = !state.product.id_order && !state.product.orderId;
 
-    const condition =
+      const condition =
       (
         originTab === "RequestWithoutContentoh" && (
           ["R", "CA"].includes(currentStatus) || (currentStatus === "RCA" && hasNoOrder)
@@ -384,7 +421,10 @@ const ProviderProductEditionView = ({
         ["RequestWithContentoh", "Contentoh"].includes(originTab) && currentStatus === "AA"
       )
 
-    return condition;
+      return condition;
+    } catch (error) {
+      return false;
+    }
   };
 
   const canShowSaveButton = (version_status) => {
@@ -407,7 +447,7 @@ const ProviderProductEditionView = ({
     const currentRetailer = state.active_retailer.id_retailer;
 
     const currentStatus =
-      statusByRetailer[currentRetailer][currentService] || "ERR";
+      statusByRetailer[currentRetailer][currentService] || "N/S";
     return currentStatus;
   };
 
@@ -417,7 +457,7 @@ const ProviderProductEditionView = ({
       name: e?.name,
       required: e?.required,
       active: state.images_values?.values?.some(
-        (value) => value?.image_id === e?.id
+        (value) => value?.image_id === e?.id,
       ),
     }));
     const imageType = state.images_values?.imageType?.map((e) => ({
@@ -428,7 +468,7 @@ const ProviderProductEditionView = ({
       (e) => ({
         value: e?.id,
         name: e?.name,
-      })
+      }),
     );
 
     return state.images_values?.values?.map((image, index) => (
@@ -684,14 +724,13 @@ const ProviderProductEditionView = ({
             headers: {
               Authorization: token,
             },
-          }
+          },
         );
 
         const newStatuses = JSON.parse(res.data.body);
         const serviceStatus =
           newStatuses.newServiceStatus[articleId][`${concept}Status`];
-
-        console.log({product: state.product, newStatuses, serviceStatus, servicesData: state.services_data});
+          
 
         // Actualizar el producto con los nuevos estados
         const updatedProduct = {
@@ -705,9 +744,12 @@ const ProviderProductEditionView = ({
           },
         };
 
-        const updatedServicesData = state.services_data?.map(service => ({
+        const updatedServicesData = state.services_data?.map((service) => ({
           ...service,
-          status: service?.id_retailer === retailerId && service?.service === concept ? (newStatuses?.newStatus ?? serviceStatus) : service?.status
+          status:
+            service?.id_retailer === retailerId && service?.service === concept
+              ? newStatuses?.newStatus ?? serviceStatus
+              : service?.status,
         }));
 
         dispatch({ type: "SET_SERVICES_DATA", payload: updatedServicesData });
@@ -1152,7 +1194,7 @@ const ProviderProductEditionView = ({
                 size={12}
                 onClick={async () => {
                   const elements = document.querySelectorAll(
-                    "#modal-message-box .ql-container .ql-editor > p"
+                    "#modal-message-box .ql-container .ql-editor > p",
                   );
 
                   if (!elements || elements.length === 0) {
@@ -1162,14 +1204,17 @@ const ProviderProductEditionView = ({
 
                   const isMessageEmpty = Array.from(elements).every((el) => {
                     const body = el.innerHTML;
-                    return !body || body.replace(/<.*?\/?>/gm, "").trim() === "";
+                    return (
+                      !body || body.replace(/<.*?\/?>/gm, "").trim() === ""
+                    );
                   });
 
                   if (isMessageEmpty) {
                     const container = document.querySelector(
-                      ".container-customComponent"
+                      ".container-customComponent",
                     );
-                    const existingAlert = container.querySelector(".alert-error");
+                    const existingAlert =
+                      container.querySelector(".alert-error");
 
                     if (!existingAlert) {
                       const alert = document.createElement("div");
@@ -1224,7 +1269,9 @@ const ProviderProductEditionView = ({
         <div className="data-container">
           <div className="image-data-panel">
             <ImagePreviewer
-              activeImage={state.images_values.values[state.current_image] ?? {}}
+              activeImage={
+                state.images_values.values[state.current_image] ?? {}
+              }
               imagesArray={state.images_values || []}
               setActiveImage={handleOnChangeCurrentImage}
               setShowModal={handleOnShowModalGalery}
@@ -1310,12 +1357,16 @@ const ProviderProductEditionView = ({
                         <InputGroup
                           activeSection={state.active_tab}
                           inputGroup={state.descriptions_inputs[0]}
-                          updatedDescriptions={state.updated_descriptions_inputs}
+                          updatedDescriptions={
+                            state.updated_descriptions_inputs
+                          }
                           articleId={state.product?.id_article}
                           version={state.product.version}
                           isShowbox={false}
                           dinamicHeight={true}
-                          setUpdatedDescriptions={handleOnSetUpdatedDescriptions}
+                          setUpdatedDescriptions={
+                            handleOnSetUpdatedDescriptions
+                          }
                           updateApprovedInputs={handleOnUpdateApprovedInputs} // No se usa?
                         />
                       ) : (
@@ -1332,12 +1383,14 @@ const ProviderProductEditionView = ({
                             (dataGroup, index) => (
                               <InputGroup
                                 index={index}
-                                key={index + "-" + state.active_retailer.retailer}
+                                key={
+                                  index + "-" + state.active_retailer.retailer
+                                }
                                 articleId={state.product.id_article}
                                 version={state.version}
                                 activeSection={state.active_tab}
                                 inputGroup={dataGroup}
-                                dataInputs={state.datasheets_inputs[1]}
+                                dataInputs={state.datasheets_inputs[1] ?? []}
                                 activeRetailer={
                                   state.services.datasheets[
                                     state.active_retailer.id_retailer
@@ -1362,7 +1415,7 @@ const ProviderProductEditionView = ({
                                   handleOnUpdateApprovedInputs // No se usa?
                                 }
                               />
-                            )
+                            ),
                           )}
                         </>
                       ) : (
@@ -1440,7 +1493,8 @@ const ProviderProductEditionView = ({
                                       textDecoration: "underline",
                                     }}
                                   >
-                                    haz clic para abrir el explorador de archivos
+                                    haz clic para abrir el explorador de
+                                    archivos
                                   </span>
                                 </p>
                               </div>
@@ -1467,7 +1521,7 @@ const ProviderProductEditionView = ({
 export const ProviderProductEdition = (props) => {
   return (
     <ProviderProductEditionProvider>
-        <ProviderProductEditionView {...props} />
+      <ProviderProductEditionView {...props} />
     </ProviderProductEditionProvider>
   );
 };

package/src/components/pages/RetailerProductEdition/RetailerProductEdition.stories.js

@@ -18,107 +18,53 @@ RetailerProductEditionDefault.args = {
   token:
     "eyJraWQiOiJEV3owZnNieXg2MXNFcVduN3RCXC81bVhod3ZNbFZIOTgwUnZcL3RjT0lKdEk9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI4ZDAxMDIxNC01YmZhLTQzYzMtOTZmYi1jNTU2ZGMwNTc3NGIiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfbFN6UVo0WjdSIiwiY29nbml0bzp1c2VybmFtZSI6IjhkMDEwMjE0LTViZmEtNDNjMy05NmZiLWM1NTZkYzA1Nzc0YiIsImF1ZCI6IjUyZDlza2tkY2c4cWpwODhvb2sxdXNlNm1rIiwiZXZlbnRfaWQiOiI1MDgwMTVmMy1mZGVkLTQ2ODUtYTIxNy1mYzgyMTg0ZWRmNGMiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTc2ODI1MzE3NywibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTc2ODI1Njc3NywiaWF0IjoxNzY4MjUzMTc3LCJlbWFpbCI6ImthcmFmZTMyMThAbW9tMmtpZC5jb20ifQ.QiZiscuTvrur0g328Zmh2bI-kZyg7YO_T5jT63096JNuSxGnX9wpK87cVTV1dED4ruD-2NMsgLShUIMcklAg17FL6i5_vCuB1dSIDY0LaybvSpriFJaVVdMUIMGFi_1Q7bI9qqyXYkevcf-HO33vVPdU-_-4-u8YRd-QganUk35vPYPh9vFJWbC0Qtvv25ZR4L2xuRIXx4e7StlTvZXysnYL8A84jkK1zn6d77V-9GqQQW8exO6sBW7R6cGt55vnF80NIfG_9lAqCK0PcZH4o50aqrAVhtfV5edlEmXBHeGK5R3Sz5iTeKb51QF3TWVFZCYGvQJ7FShulUWHcm3X2Q",
   productSelected: {
-    "articleId": 145210,
+    "articleId": 145188,
     "services": {
         "datasheets": 1,
         "descriptions": 1,
         "images": 1
     },
-    "orderId": 10459,
+    "orderId": 10451,
     "city": "CDMX, México",
-    "status": "AC",
-    "datasheet_status": "AC",
+    "status": "AS",
+    "datasheet_status": "AA",
     "prio": "none",
     "version": 3,
-    "description_status": "AC",
-    "images_status": "AC",
+    "description_status": "CA",
+    "images_status": "AA",
     "statusByRetailer": [
         {
-            "status": "AC",
+            "retailer_id": 2,
             "service": "datasheet",
-            "retailer_id": 13,
-            "task_user_group_id": 4
+            "status": "AA",
+            "task_user_group_id": 2
         },
         {
-            "status": "AC",
+            "retailer_id": 2,
             "service": "description",
-            "retailer_id": 13,
-            "task_user_group_id": 4
+            "status": "CA",
+            "task_user_group_id": 2
         },
         {
-            "status": "AC",
+            "retailer_id": 2,
             "service": "images",
-            "retailer_id": 13,
-            "task_user_group_id": 4
-        },
-        {
-            "status": "AC",
-            "service": "datasheet",
-            "retailer_id": 29,
-            "task_user_group_id": 4
-        },
-        {
-            "status": "AC",
-            "service": "description",
-            "retailer_id": 29,
-            "task_user_group_id": 4
-        },
-        {
-            "status": "AC",
-            "service": "images",
-            "retailer_id": 29,
-            "task_user_group_id": 4
-        },
-        {
-            "status": "AC",
-            "service": "datasheet",
-            "retailer_id": 36,
-            "task_user_group_id": 4
-        },
-        {
-            "status": "AC",
-            "service": "description",
-            "retailer_id": 36,
-            "task_user_group_id": 4
-        },
-        {
-            "status": "AC",
-            "service": "images",
-            "retailer_id": 36,
-            "task_user_group_id": 4
-        },
-        {
-            "status": "AC",
-            "service": "datasheet",
-            "retailer_id": 70,
-            "task_user_group_id": 4
-        },
-        {
-            "status": "AC",
-            "service": "description",
-            "retailer_id": 70,
-            "task_user_group_id": 4
-        },
-        {
-            "status": "AC",
-            "service": "images",
-            "retailer_id": 70,
-            "task_user_group_id": 4
+            "status": "AA",
+            "task_user_group_id": 2
         }
     ],
     "article": {
-        "id_article": 145210,
-        "id_category": "4874",
-        "brand": "Generico",
-        "name": "Serna Status Bug 7",
-        "upc": "16168153",
-        "sku": "15631130151",
-        "timestamp": "2026-05-07T16:00:51.000Z",
+        "id_article": 145188,
+        "id_category": "5739",
+        "brand": null,
+        "name": "Pantalla",
+        "upc": "91449",
+        "sku": "144",
+        "timestamp": "2026-04-24T16:09:39.000Z",
         "active": 1,
         "company_id": 291,
         "company_name": "LATAM LOGISTICS",
         "country": "México",
-        "id_order": 10459,
+        "id_order": 10451,
         "id_datasheet_especialist": 426,
         "id_datasheet_facilitator": null,
         "id_description_especialist": 426,
@@ -127,55 +73,25 @@ RetailerProductEditionDefault.args = {
         "id_images_facilitator": null,
         "id_auditor": 425,
         "id_recepcionist": null,
-        "category": "Productos de Higiene Personal|Productos de Higiene Personal|Productos de Higiene Personal",
+        "category": "Tecnología y Electrónica|Televisores|Pantallas",
         "categoryRetailer": [
             {
-                "id_category": 3561,
-                "id_retailer": 29,
-                "category_name": "Abarrotes Farmacias del Ahorro|Abarrotes|Abarrotes",
-                "retailer_name": "Farmacias del Ahorro"
-            },
-            {
-                "id_category": 4216,
-                "id_retailer": 70,
-                "category_name": "Limpieza|Cuarto de Lavado|Cuarto de Lavado",
-                "retailer_name": "Bodega Aurrera"
-            },
-            {
-                "id_category": 4874,
-                "id_retailer": 36,
-                "category_name": "Productos de Higiene Personal|Productos de Higiene Personal|Productos de Higiene Personal",
-                "retailer_name": "Oxxo"
-            },
-            {
-                "id_category": 4941,
-                "id_retailer": 13,
-                "category_name": "Supermercado Soriana|Supermercado|Supermercado",
-                "retailer_name": "Soriana"
+                "id_category": 5739,
+                "id_retailer": 2,
+                "category_name": "Tecnología y Electrónica|Televisores|Pantallas",
+                "retailer_name": "Walmart Mercancías Generales"
             }
         ]
     },
     "retailers": [
         {
-            "id": 13,
-            "name": "Soriana"
-        },
-        {
-            "id": 29,
-            "name": "Farmacias del Ahorro"
-        },
-        {
-            "id": 36,
-            "name": "Oxxo"
-        },
-        {
-            "id": 70,
-            "name": "Bodega Aurrera"
+            "id": 2,
+            "name": "Walmart Mercancías Generales"
         }
     ],
     "country": "México",
-    "upc": "16168153"
-  },
+    "upc": "91449"
+},
 
 
 // location: {