contentoh-components-library 21.5.85 → 21.5.86

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

@@ -61,6 +61,9 @@ import { Container } from "./styles";
 import { Commentary } from "../../atoms/Commentary";
 
 import { AiProductEditionProvider } from "../../../contexts/AiProductEdition";
+import ChangeStatusModal from "../../organisms/ChangeStatusModal";
+
+import { Skeleton, Box, Stack } from "@mui/material";
 
 const RetailerProductEditionView = ({
   tabsSections,
@@ -149,6 +152,8 @@ const RetailerProductEditionView = ({
     },
   });
 
+  const [openChangeStatusModal, setOpenChangeStatusModal] = useState(false);
+
   const thumbs = () => {
     const imageInputs = state.images_values?.inputs?.map((e) => ({
       value: e?.id,
@@ -195,68 +200,68 @@ const RetailerProductEditionView = ({
     ));
   };
 
-  // Setter del producto y carga inicial (optimizado para evitar cascada)
-  useEffect(() => {
-    const initializeProduct = async () => {
-      try {
-        const product = JSON.parse(sessionStorage.getItem("productSelected"))
-          ? JSON.parse(sessionStorage.getItem("productSelected"))
-          : productSelected;
+  const initializeProduct = async () => {
+    try {
+      const product = JSON.parse(sessionStorage.getItem("productSelected"))
+        ? JSON.parse(sessionStorage.getItem("productSelected"))
+        : productSelected;
 
-        const productNormalized = normalizeProduct(product);
+      const productNormalized = normalizeProduct(product);
 
-        dispatch({
-          type: "SET_PRODUCT",
-          payload: productNormalized,
-        });
-        dispatch({
-          type: "SET_ACTIVE_RETAILER",
-          payload: productNormalized.categoryRetailerInOrder[0],
-        });
-        setShotThd(
-          [58, 59, 60, 61].includes(
-            productNormalized.categoryRetailerInOrder[0].id_retailer,
-          ),
-        );
+      dispatch({
+        type: "SET_PRODUCT",
+        payload: productNormalized,
+      });
+      dispatch({
+        type: "SET_ACTIVE_RETAILER",
+        payload: productNormalized.categoryRetailerInOrder[0],
+      });
+      setShotThd(
+        [58, 59, 60, 61].includes(
+          productNormalized.categoryRetailerInOrder[0].id_retailer,
+        ),
+      );
 
-        // Configurar statusArray según el rol del usuario
-        setStatusArray(getStatusArrayByRole(user.id_role));
+      // Configurar statusArray según el rol del usuario
+      setStatusArray(getStatusArrayByRole(user.id_role));
 
-        // Cargar usuarios y asignaciones
-        const users = await fetchUsers(token);
-        if (users.length > 0) {
-          dispatch({
-            type: "SET_COLLABORATOR_ASSIGNATIONS",
-            payload: buildCollaboratorAssignations(productNormalized, users),
-          });
-        }
+      // Cargar usuarios y asignaciones
+      const users = await fetchUsers(token);
+      if (users.length > 0) {
+        dispatch({
+          type: "SET_COLLABORATOR_ASSIGNATIONS",
+          payload: buildCollaboratorAssignations(productNormalized, users),
+        });
+      }
 
-        const { id_article } = productNormalized;
-        if (id_article) {
-          await getAuditVersion(id_article, setAuditableVersion, token);
-        }
+      const { id_article } = productNormalized;
+      if (id_article) {
+        await getAuditVersion(id_article, setAuditableVersion, token);
+      }
 
-        if (id_article && productNormalized.id_order) {
-          const response = await axios.get(
-            process.env.REACT_APP_READ_OBSERVATION,
-            {
-              params: {
-                articleId: id_article,
-                orderId: productNormalized.id_order,
-              },
-              headers: {
-                Authorization: sessionStorage.getItem("jwt"),
-              },
+      if (id_article && productNormalized.id_order) {
+        const response = await axios.get(
+          process.env.REACT_APP_READ_OBSERVATION,
+          {
+            params: {
+              articleId: id_article,
+              orderId: productNormalized.id_order,
             },
-          );
-          const parseData = JSON.parse(response.data.body).data[0];
-          setObservation(parseData.observations);
-        }
-      } catch (error) {
-        console.log("Error setting product data: ", error);
+            headers: {
+              Authorization: sessionStorage.getItem("jwt"),
+            },
+          },
+        );
+        const parseData = JSON.parse(response.data.body).data[0];
+        setObservation(parseData.observations);
       }
-    };
+    } catch (error) {
+      console.log("Error setting product data: ", error);
+    }
+  };
 
+  // Setter del producto y carga inicial (optimizado para evitar cascada)
+  useEffect(() => {
     initializeProduct();
   }, []);
 
@@ -284,10 +289,9 @@ const RetailerProductEditionView = ({
     }
   }, [auditableVersion]);
 
-  const loadData = async (enableLoading = true) => {
+  const loadData = async (enableLoading = true, versionSelected = null) => {
     try {
-
-      if(enableLoading) dispatch({ type: "SET_LOADING", payload: true });
+      if (enableLoading) dispatch({ type: "SET_LOADING", payload: true });
 
       const { id_article, version, id_order } = state.product;
       const { category, id_category, id_retailer } = state.active_retailer;
@@ -296,7 +300,7 @@ const RetailerProductEditionView = ({
       const data = [
         {
           id_article,
-          version,
+          version: versionSelected ? versionSelected : version,
           relations: [
             {
               id_retailer,
@@ -314,7 +318,7 @@ const RetailerProductEditionView = ({
             id_article,
             category,
             id_category,
-            version,
+            versionSelected ?? version,
             token,
             id_retailer,
           ),
@@ -332,7 +336,7 @@ const RetailerProductEditionView = ({
                 articleId: id_article,
                 concept: "description",
                 orderIdColab: id_order,
-                version: version,
+                version: versionSelected ?? version,
               },
             }),
             axios.get(process.env.REACT_APP_COMMENTS_ENDPOINT, {
@@ -340,7 +344,7 @@ const RetailerProductEditionView = ({
                 articleId: id_article,
                 concept: "datasheet",
                 orderIdColab: id_order,
-                version: version,
+                version: versionSelected ?? version,
               },
             }),
             axios.get(process.env.REACT_APP_COMMENTS_ENDPOINT, {
@@ -348,12 +352,22 @@ const RetailerProductEditionView = ({
                 articleId: id_article,
                 concept: "images",
                 orderIdColab: id_order,
-                version: version,
+                version: versionSelected ?? version,
               },
             }),
           ]),
         ]);
 
+      dispatch({
+        type: "SET_RETAILER_STATUS",
+        payload: servicesDataRes.map((service) => ({
+          retailer_id: service?.id_retailer,
+          service: service?.service,
+          status: service?.status,
+          task_user_group_id: service?.task_user_group_id,
+        })),
+      });
+
       // Extraer relaciones del response
       const percentages =
         JSON.parse(percentagesRes?.[0]?.body)?.[0]?.relations ?? [];
@@ -599,8 +613,6 @@ const RetailerProductEditionView = ({
   const handleOnClickSave = async () => {
     if (state.saving) return;
 
-    
-
     switch (state.active_tab) {
       case "Descripción":
         await saveDescriptions(token);
@@ -1121,12 +1133,139 @@ const RetailerProductEditionView = ({
       type: "SET_PRODUCT_VERSION",
       payload: version,
     });
+
+    loadData(true, version);
+  };
+
+  const ProductEditionSkeleton = () => {
+    return (
+      <Container headerTop={0}>
+        <Box
+          px={1.5}
+          py={1}
+          pb={0}
+          display="flex"
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          <Skeleton variant="text" width={300} height={40} />
+          <Stack direction="row" spacing={2}>
+            <Skeleton variant="circular" width={32} height={32} />
+          </Stack>
+        </Box>
+
+        <div
+          className="data-container"
+          style={{ display: "flex", gap: "8px", padding: "0 12px 12px" }}
+        >
+          <div
+            className="image-data-panel"
+            style={{
+              flex: "0 0 320px",
+              display: "flex",
+              flexDirection: "column",
+              gap: "20px",
+            }}
+          >
+            <Skeleton variant="rounded" width="100%" height={400} />
+
+            <Stack direction="row" spacing={2} justifyContent="center">
+              {[1, 2, 3, 4].map((item) => (
+                <Skeleton key={item} variant="rounded" width={60} height={80} />
+              ))}
+            </Stack>
+
+            <Box mt={2}>
+              {[1, 2, 3, 4].map((item) => (
+                <Box
+                  key={item}
+                  display="flex"
+                  justifyContent="space-between"
+                  py={1}
+                  borderBottom="1px solid #f0f0f0"
+                >
+                  <Skeleton variant="text" width="40%" />
+                  <Skeleton variant="text" width="20%" />
+                </Box>
+              ))}
+            </Box>
+          </div>
+
+          <div
+            className="product-information"
+            style={{
+              flex: 1,
+              display: "flex",
+              flexDirection: "column",
+              gap: "14px",
+            }}
+          >
+            <Box>
+              <Skeleton variant="text" width="80%" height={50} />
+              <Stack direction="row" spacing={2} alignItems="center">
+                <Skeleton variant="rounded" width={180} height={24} />
+                <Skeleton variant="rounded" width={300} height={24} />
+              </Stack>
+            </Box>
+
+            <Box display="flex" gap={4} pb={1}>
+              <Skeleton variant="text" width={140} height={45} />
+              <Skeleton variant="text" width={140} height={45} />
+              <Skeleton variant="text" width={140} height={45} />
+            </Box>
+
+            <Box display="flex" flexDirection="column" gap={4}>
+              {[1, 2, 3].map((item) => (
+                <Box key={item}>
+                  <Box
+                    display="flex"
+                    justifyContent="space-between"
+                    alignItems="center"
+                    mb={1}
+                  >
+                    <Skeleton variant="text" width="30%" height={24} />
+                    <Skeleton
+                      variant="rounded"
+                      width={175}
+                      height={25}
+                      sx={{ borderRadius: "7.5px" }}
+                    />
+                  </Box>
+                  <Skeleton variant="rounded" width="100%" height={70} />
+                  <Box display="flex" justifyContent="flex-end" mt={0.5}>
+                    <Skeleton variant="text" width={60} />
+                  </Box>
+                </Box>
+              ))}
+            </Box>
+
+            <Box mt="auto" pt={4}>
+              <Skeleton variant="rounded" width="100%" height={120} />
+              <Box display="flex" justifyContent="flex-end" gap={2} mt={2}>
+                <Skeleton
+                  variant="rounded"
+                  width={180}
+                  height={45}
+                  sx={{ borderRadius: "24px" }}
+                />
+                <Skeleton
+                  variant="rounded"
+                  width={180}
+                  height={45}
+                  sx={{ borderRadius: "24px" }}
+                />
+              </Box>
+            </Box>
+          </div>
+        </div>
+      </Container>
+    );
   };
 
   if (state.loading || !state.services || !state.product)
     return (
       <>
-        <Loading />
+        <ProductEditionSkeleton />
       </>
     );
 
@@ -1590,27 +1729,46 @@ const RetailerProductEditionView = ({
                       />
                     </div>
                   )}
-                  {[7, 8].includes(user.id_role) && (
+
+                  <div className="action-buttons">
                     <Button
-                      buttonType={
-                        isEvaluationFinished(
-                          user.id_role,
-                          state.active_tab,
-                          statusArray,
-                        ) &&
-                        state.missing_required_fields[state.active_tab] === 0
-                          ? "general-green-button"
-                          : "general-button-disabled"
-                      }
-                      label={"Enviar evaluación"}
-                      onClick={handleOnSendEvaluationToFacilitator}
+                      buttonType={"general-pink-button"}
+                      label={"Cambio de Estatus"}
+                      onClick={() => setOpenChangeStatusModal(true)}
+                      id="button-change-status"
                     />
-                  )}
+                    {[7, 8].includes(user.id_role) && (
+                      <Button
+                        buttonType={
+                          isEvaluationFinished(
+                            user.id_role,
+                            state.active_tab,
+                            statusArray,
+                          ) &&
+                          state.missing_required_fields[state.active_tab] === 0
+                            ? "general-green-button"
+                            : "general-button-disabled"
+                        }
+                        label={"Enviar evaluación"}
+                        onClick={handleOnSendEvaluationToFacilitator}
+                      />
+                    )}
+                  </div>
                 </div>
               )}
           </div>
         </div>
       </Container>
+
+      <ChangeStatusModal
+        state={state}
+        open={openChangeStatusModal}
+        onClose={() => {
+          setOpenChangeStatusModal(false);
+        }}
+        reloadData={loadData}
+        token={token}
+      />
     </AiProductEditionProvider>
   );
 };

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

@@ -48,6 +48,12 @@ export const Container = styled.div`
         padding: 10px;
         padding-left: 0;
 
+        .action-buttons{
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+        }
+
         .commentary {
           display: flex;
           align-items: flex-end;

package/src/contexts/AiProductEdition.jsx

@@ -204,6 +204,7 @@ export const AiProductEditionProvider = ({
     } = currentCategory;
 
     //Checamos si el servicio de ficha técnica e imagenes esta completo
+
     const currentRetailerPercentages = productSelected?.percentages?.find(retailer => retailer?.id_retailer === activeRetailer?.id_retailer);
 
     if(!currentRetailerPercentages) return console.log("Error: No hay porcentajes disponibles");

package/src/global-files/statusDictionary.js

@@ -0,0 +1,103 @@
+const STATUS_DICTIONARY = {
+  // R: {
+  //   status: "R",
+  //   name: "Recepción",
+  //   weight: 1
+  // },
+  PA: {
+    status: "PA",
+    name: "Por Asignar",
+    weight: 2
+  },
+  AS: {
+    status: "AS",
+    name: "Asignado",
+    weight: 3
+  },
+  CA: {
+    status: "CA",
+    name: "Capturando",
+    weight: 4
+  },
+  // IE: {
+  //   status: "IE",
+  //   name: "Información Enviada",
+  //   weight: 5
+  // },
+  RCA: {
+    status: "RCA",
+    name: "Rechazado Cadena",
+    weight: 6
+  },
+  RP: {
+    status: "RP",
+    name: "Rechazado Proveedor",
+    weight: 7
+  },
+  RA: {
+    status: "RA",
+    name: "Rechazado Auditor",
+    weight: 8
+  },
+  RC: {
+    status: "RC",
+    name: "Rechazo Coordinador",
+    weight: 9
+  },
+  AC: {
+    status: "AC",
+    name: "Aprobado Coordinador",
+    weight: 10
+  },
+  AA: {
+    status: "AA",
+    name: "Aprobado Auditor",
+    weight: 11
+  },
+  AP: {
+    status: "AP",
+    name: "Aprobado Proveedor",
+    weight: 12
+  },
+  ACA: {
+    status: "ACA",
+    name: "Aprobado Cadena",
+    weight: 13
+  },
+  Ex: {
+    status: "Ex",
+    name: "Exportado",
+    weight: 14
+  },
+  // RAC: {
+  //   status: "RAC",
+  //   name: "Rechazo de Auditoría Content-oh!",
+  //   weight: 15
+  // },
+  // SAC: {
+  //   status: "SAC",
+  //   name: "Solicitud de Auditoría Content-oh!",
+  //   weight: 16
+  // },
+  // AAC: {
+  //   status: "AAC",
+  //   name: "Aprobado Auditoría Content-oh!",
+  //   weight: 17
+  // },
+  // FAP: {
+  //   status: "FAP",
+  //   name: "Finalización de Auditoría por Proveedor",
+  //   weight: 18
+  // },
+
+  //El status NS necesita ser el mayor de todos
+  NS: {
+    status: "NS",
+    name: "No Solicitado",
+    weight: 100
+  },
+};
+
+module.exports = {
+  STATUS_DICTIONARY
+}