contentoh-components-library 21.6.0 → 21.6.11

package/src/components/atoms/ProgressBar/styles.js

@@ -2,7 +2,8 @@ import styled from "styled-components";
 import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.div`
-  background-color: ${GlobalColors.s3};
+  background-color: ${(props) =>
+    props.percentageRequired >= 100 ? GlobalColors.color_pink : GlobalColors.s3};
   width: fit-content;
   height: 27px;
   padding: 4px;
@@ -11,62 +12,7 @@ export const Container = styled.div`
   font-weight: 600;
   font-size: 14px;
   line-height: 19px;
-  color: ${(backgroundColor) =>
-    backgroundColor === "s2" || backgroundColor === "s1"
-      ? GlobalColors.s4
-      : GlobalColors.white};
-
-  &.status-CA,
-  &.status-IE {
-    background-color: ${GlobalColors.in_progress};
-  }
-
-  &.status-R,
-  &.status-AS,
-  &.status-PA {
-    background-color: ${GlobalColors.reception};
-  }
-
-  &.status-AA,
-  &.status-AP,
-  &.status-ACA,
-  &.status-AC {
-    background-color: ${GlobalColors.finished};
-  }
-
-  &.status-RA,
-  &.status-RC,
-  &.status-RP,
-  &.status-RCA {
-    background-color: ${GlobalColors.rejected_status};
-  }
-
-  &.status-Dat,
-  &.status-Dsc,
-  &.status-Imgs {
-    background-color: ${GlobalColors.s4};
-  }
-
-  &.status-Ex {
-    background-color: ${GlobalColors.exported};
-  }
-
-  &.status-DDI {
-    background-color: ${GlobalColors.original_purpura};
-  }
-
-  &.status-GLD {
-    background-color: ${GlobalColors.in_progress};
-  }
-
-  &.status-TAB {
-    background-color: ${GlobalColors.deep_gray};
-  }
-
-  &.status-Pt {
-    background-color: ${GlobalColors.s2};
-    color: ${GlobalColors.s4};
-  }
+  color: ${GlobalColors.white};
 `;
 export const ContainerIcon = styled.div`
   cursor: pointer;
@@ -89,6 +35,6 @@ export const ContainerIcon = styled.div`
         ${(props) => (props.percentageRequired < 100 ? 0 : 1)},
       "wght" 400, "GRAD" 0, "opsz" 48;
     color: ${(props) =>
-      props.percentageRequired < 100 ? "#d4d1d7" : "#e33aa9"};
+      props.percentageRequired < 100 ? "#d4d1d7" : GlobalColors.color_pink};
   }
 `;

package/src/components/atoms/Status/index.js

@@ -1,11 +1,19 @@
 import { Container } from "./styles";
+import { STATUS_DICTIONARY } from "../../../global-files/statusDictionary";
+
+const getStatusName = (statusType) => {
+  if (!statusType) return null;
+  const parts = statusType.split("/");
+  const names = parts.map((key) => STATUS_DICTIONARY[key]?.name).filter(Boolean);
+  return names.length > 0 ? names.join(" / ") : null;
+};
 
 export const Status = ({ statusType, ovalForm }) => {
+  const tooltipLabel = getStatusName(statusType);
   return (
     <Container
-      className={`status-${statusType?.replace(/\/.*/, "")} ${
-        ovalForm && "oval-form"
-      }`}
+      className={`status-${statusType?.replace(/\/.*/, "")} ${ovalForm ? "oval-form" : ""}`}
+      data-tooltip={tooltipLabel}
     >
       <p>{statusType ?? "NS"}</p>
     </Container>

package/src/components/atoms/Status/styles.js

@@ -2,11 +2,13 @@ import styled from "styled-components";
 import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.div`
+  position: relative;
   width: fit-content;
   padding: 0 10px;
   height: 20px;
   background-color: ${GlobalColors.s3};
   border-radius: 3px;
+  cursor: default;
 
   p {
     text-align: center;
@@ -16,6 +18,117 @@ export const Container = styled.div`
     line-height: 20px;
   }
 
+  &[data-tooltip]::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    bottom: calc(100% + 7px);
+    left: 50%;
+    transform: translateX(-50%) translateY(4px);
+    background-color: ${GlobalColors.s3};
+    color: ${GlobalColors.white};
+    font-family: ${FontFamily.Lato};
+    font-size: 11px;
+    font-weight: 600;
+    padding: 4px 10px;
+    border-radius: 6px;
+    white-space: nowrap;
+    z-index: 200;
+    pointer-events: none;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.18s ease, transform 0.18s ease;
+  }
+
+  &[data-tooltip]::before {
+    content: "";
+    position: absolute;
+    bottom: calc(100% + 1px);
+    left: 50%;
+    transform: translateX(-50%) translateY(4px);
+    border: 6px solid transparent;
+    border-top-color: ${GlobalColors.s3};
+    z-index: 200;
+    pointer-events: none;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.18s ease, transform 0.18s ease;
+  }
+
+  &[data-tooltip]:hover::after,
+  &[data-tooltip]:hover::before {
+    opacity: 1;
+    visibility: visible;
+    transform: translateX(-50%) translateY(0);
+  }
+
+  &.status-CA[data-tooltip]::after,
+  &.status-IE[data-tooltip]::after {
+    background-color: ${GlobalColors.in_progress};
+  }
+  &.status-CA[data-tooltip]::before,
+  &.status-IE[data-tooltip]::before {
+    border-top-color: ${GlobalColors.in_progress};
+  }
+
+  &.status-R[data-tooltip]::after,
+  &.status-AS[data-tooltip]::after,
+  &.status-SAC[data-tooltip]::after,
+  &.status-PA[data-tooltip]::after {
+    background-color: ${GlobalColors.reception};
+  }
+  &.status-R[data-tooltip]::before,
+  &.status-AS[data-tooltip]::before,
+  &.status-SAC[data-tooltip]::before,
+  &.status-PA[data-tooltip]::before {
+    border-top-color: ${GlobalColors.reception};
+  }
+
+  &.status-AA[data-tooltip]::after,
+  &.status-AP[data-tooltip]::after,
+  &.status-AC[data-tooltip]::after,
+  &.status-AAC[data-tooltip]::after,
+  &.status-ACA[data-tooltip]::after {
+    background-color: ${GlobalColors.finished};
+  }
+  &.status-AA[data-tooltip]::before,
+  &.status-AP[data-tooltip]::before,
+  &.status-AC[data-tooltip]::before,
+  &.status-AAC[data-tooltip]::before,
+  &.status-ACA[data-tooltip]::before {
+    border-top-color: ${GlobalColors.finished};
+  }
+
+  &.status-RA[data-tooltip]::after,
+  &.status-RC[data-tooltip]::after,
+  &.status-RP[data-tooltip]::after,
+  &.status-RAC[data-tooltip]::after,
+  &.status-RCA[data-tooltip]::after {
+    background-color: ${GlobalColors.rejected_status};
+  }
+  &.status-RA[data-tooltip]::before,
+  &.status-RC[data-tooltip]::before,
+  &.status-RP[data-tooltip]::before,
+  &.status-RAC[data-tooltip]::before,
+  &.status-RCA[data-tooltip]::before {
+    border-top-color: ${GlobalColors.rejected_status};
+  }
+
+  &.status-FAP[data-tooltip]::after,
+  &.status-Ex[data-tooltip]::after {
+    background-color: ${GlobalColors.exported};
+  }
+  &.status-FAP[data-tooltip]::before,
+  &.status-Ex[data-tooltip]::before {
+    border-top-color: ${GlobalColors.exported};
+  }
+
+  &.status-DDI[data-tooltip]::after {
+    background-color: ${GlobalColors.original_purpura};
+  }
+  &.status-DDI[data-tooltip]::before {
+    border-top-color: ${GlobalColors.original_purpura};
+  }
+
   &.status-CA,
   &.status-IE {
     background-color: ${GlobalColors.in_progress};

package/src/components/organisms/ChangeStatusModal/index.jsx

@@ -31,6 +31,8 @@ import {
   ScopeButton,
   HelperText,
   StatusGrid,
+  StatusGridWrapper,
+  StatusGridOverlay,
   StatusPill,
   StyledTextArea,
   StyledFormControl,
@@ -42,15 +44,6 @@ import {
 } from "./styles";
 import axios from "axios";
 
-const statusOptions = [
-  { value: "PA", label: "Por Asignar" },
-  { value: "AS", label: "Asignado" },
-  { value: "AC", label: "Aprobado Coordinador" },
-  { value: "AP", label: "Aprobado Proveedor" },
-  { value: "R", label: "Rechazado" },
-  { value: "RP", label: "Rechazo Pendiente" },
-];
-
 const availableServices = ["description", "datasheet", "images"];
 
 const ChangeStatusModal = ({
@@ -71,8 +64,68 @@ const ChangeStatusModal = ({
 
   const [currentStatusObj, setCurrentStatusObj] = useState({});
 
-  const isStatusValid =
-    newStatus !== "" && newStatus !== currentStatusObj.label;
+  const getServiceStatusStr = (retailerId, service) => {
+    const sbyR = state?.product?.statusByRetailer;
+    if (!sbyR) return null;
+    if (Array.isArray(sbyR)) {
+      return sbyR.find((item) => item.retailer_id === retailerId && item.service === service)?.status ?? null;
+    }
+    return sbyR[retailerId]?.[service] ?? null;
+  };
+
+  const serviceStatusObj = (() => {
+    if (scope !== "service" || selectedChains.length !== 1 || selectedServices.length !== 1) return null;
+    const statusStr = getServiceStatusStr(selectedChains[0], selectedServices[0]);
+    const statusKey = statusStr?.split("/").pop();
+    return statusKey ? STATUS_DICTIONARY[statusKey] : null;
+  })();
+
+  // Statuses for multi-service/chain selection (when not exactly 1+1)
+  const multiServiceStatuses = (() => {
+    if (scope !== "service" || selectedChains.length === 0 || selectedServices.length === 0) return [];
+    if (selectedChains.length === 1 && selectedServices.length === 1) return [];
+    const results = [];
+    for (const chainId of selectedChains) {
+      const chainName = availableRetailers.find((r) => r.id_retailer === chainId)?.name ?? chainId;
+      for (const service of selectedServices) {
+        const statusStr = getServiceStatusStr(chainId, service);
+        const statusKey = statusStr?.split("/").pop();
+        const statusObj = statusKey ? STATUS_DICTIONARY[statusKey] : null;
+        if (statusObj) {
+          results.push({ chainId, chainName, service, statusName: statusObj.name });
+        }
+      }
+    }
+    return results;
+  })();
+
+  // If all selected services share the same status, block it; otherwise null
+  const multiAllSameStatus = (() => {
+    if (multiServiceStatuses.length === 0) return null;
+    const names = [...new Set(multiServiceStatuses.map((s) => s.statusName))];
+    return names.length === 1 ? names[0] : null;
+  })();
+
+  // Map statusName -> owner labels to show below each pill when statuses differ
+  const statusOwnerMap = (() => {
+    if (multiServiceStatuses.length === 0 || multiAllSameStatus !== null) return {};
+    const serviceLabel = (service) =>
+      service === "description" ? "Descripciones" : service === "datasheet" ? "Ficha Técnica" : "Imágenes";
+    return multiServiceStatuses.reduce((acc, item) => {
+      if (!acc[item.statusName]) acc[item.statusName] = [];
+      const label = selectedChains.length > 1
+        ? `${item.chainName}: ${serviceLabel(item.service)}`
+        : serviceLabel(item.service);
+      acc[item.statusName].push(label);
+      return acc;
+    }, {});
+  })();
+
+  const disabledStatusName = scope === "service"
+    ? serviceStatusObj?.name ?? multiAllSameStatus ?? null
+    : currentStatusObj?.name;
+
+  const isStatusValid = newStatus !== "" && newStatus !== disabledStatusName;
   const isCommentValid = comment.trim().length > 0;
 
   let isScopeValid = false;
@@ -157,7 +210,8 @@ const ChangeStatusModal = ({
 
   useEffect(() => {
     if (!state) return;
-    setCurrentStatusObj(STATUS_DICTIONARY[state?.product?.status]);
+    const statusKey = state?.product?.status?.split("/").pop();
+    setCurrentStatusObj(STATUS_DICTIONARY[statusKey]);
 
     setAvailableRetailers(state?.product?.categoryRetailerInOrder || []);
   }, [state]);
@@ -381,9 +435,9 @@ const ChangeStatusModal = ({
         )}
 
         <Section>
-          <SectionTitle>Estatus actual:</SectionTitle>
+          <SectionTitle>Estatus actual del producto:</SectionTitle>
           <StatusPill
-            label={currentStatusObj?.name}
+            label={serviceStatusObj?.name ?? multiAllSameStatus ?? currentStatusObj?.name}
             selected={false}
             disabled={true}
           />
@@ -391,20 +445,40 @@ const ChangeStatusModal = ({
 
         <Section>
           <SectionTitle>Nuevo estatus:</SectionTitle>
-          <StatusGrid>
-            {Object.values(STATUS_DICTIONARY).map((status) => (
-              <StatusPill
-                key={status.name}
-                label={status.name}
-                disabled={status.name === currentStatusObj?.name}
-                selected={status.name === newStatus}
-                onClick={() =>
-                  status.name !== currentStatusObj?.name &&
-                  setNewStatus(status.name)
-                }
-              />
-            ))}
-          </StatusGrid>
+          <StatusGridWrapper>
+            <StatusGrid>
+              {Object.values(STATUS_DICTIONARY).map((status) => {
+                const ownerLabels = statusOwnerMap[status.name];
+                return (
+                  <div
+                    key={status.name}
+                    style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 4 }}
+                  >
+                    <StatusPill
+                      label={status.name}
+                      disabled={status.name === disabledStatusName}
+                      selected={status.name === newStatus}
+                      onClick={() =>
+                        status.name !== disabledStatusName && setNewStatus(status.name)
+                      }
+                    />
+                    {ownerLabels?.length > 0 && (
+                      <span style={{ fontSize: "0.68rem", color: colors.primary, fontFamily: "Raleway, sans-serif", paddingLeft: 2 }}>
+                        {ownerLabels.join(", ")}
+                      </span>
+                    )}
+                  </div>
+                );
+              })}
+            </StatusGrid>
+            {!isScopeValid && (
+              <StatusGridOverlay>
+                {scope === "retailer"
+                  ? "Selecciona una cadena para continuar"
+                  : "Selecciona una cadena y un servicio para continuar"}
+              </StatusGridOverlay>
+            )}
+          </StatusGridWrapper>
         </Section>
 
         <Section>
@@ -431,7 +505,7 @@ const ChangeStatusModal = ({
           <span className="summary-title">Resumen de impacto:</span>
           <div className="status-flow">
             <StatusPill
-              label={currentStatusObj?.name}
+              label={serviceStatusObj?.name ?? multiAllSameStatus ?? currentStatusObj?.name}
               selected={false}
               disabled={true}
               size="small"

package/src/components/organisms/ChangeStatusModal/styles.js

@@ -181,6 +181,26 @@ export const StatusGrid = styled(Box)`
   gap: 12px;
 `;
 
+export const StatusGridWrapper = styled(Box)`
+  position: relative;
+`;
+
+export const StatusGridOverlay = styled(Box)`
+  position: absolute;
+  inset: -8px -4px;
+  background: rgba(255, 255, 255, 0.82);
+  backdrop-filter: blur(1px);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: "Raleway", sans-serif;
+  font-size: 13px;
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.45);
+  pointer-events: none;
+`;
+
 export const StyledTextArea = styled(TextField)`
   && {
     width: 100%;

package/src/components/pages/ProviderProductEdition/context/provider-product-edition.context.jsx

@@ -6,6 +6,7 @@ import {
   ACTIONS,
 } from "./provider-product-edition.reducer";
 import axios from "axios";
+import { getConceptByTab } from "../utils";
 import successIcon from "../../../../assets/images/genericModal/genericModalCheck.svg";
 import errorIcon from "../../../../assets/images/genericModal/errorModal.svg";
 import warningIcon from "../../../../assets/images/genericModal/genericModalWarning.svg";

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

@@ -9,6 +9,7 @@ import {
   useProviderProductEdition,
 } from "./context/provider-product-edition.context";
 import { normalizeProduct, getConceptByTab } from "./utils";
+import { getMinorStatus, getMinorStatusFromRetailerMap, STATUS_DICTIONARY } from "../../../global-files/statusDictionary";
 
 import {
   getPercentage,
@@ -269,11 +270,24 @@ const ProviderProductEditionView = ({
           {},
         );
 
+        const getServiceMinorStatus = (serviceName) => {
+          const records = servicesDataRes.filter((s) => s.service === serviceName);
+          return records.length > 0 ? getMinorStatus(records.map((s) => s.status)) : undefined;
+        };
+
+        const imagesMinorStatus = getServiceMinorStatus("images");
+        const descriptionMinorStatus = getServiceMinorStatus("description");
+        const datasheetMinorStatus = getServiceMinorStatus("datasheet");
+
         dispatch({
           type: "SET_PRODUCT",
           payload: {
             ...state.product,
             statusByRetailer: updatedStatusByRetailer,
+            status: getMinorStatusFromRetailerMap(updatedStatusByRetailer),
+            ...(imagesMinorStatus !== undefined && { images_status: imagesMinorStatus }),
+            ...(descriptionMinorStatus !== undefined && { description_status: descriptionMinorStatus }),
+            ...(datasheetMinorStatus !== undefined && { datasheet_status: datasheetMinorStatus }),
           },
         });
 
@@ -703,14 +717,14 @@ const ProviderProductEditionView = ({
     const concept = getConceptByTab(state.active_tab);
     const articleId = state.product.id_article;
     const orderId = state.product.id_order ?? state.product.orderId;
-    const sectionStatusKey = `${concept}_status`;
+    const retailerId = state.active_retailer?.id_retailer;
     const evalStatus =
-      state.product[sectionStatusKey] || state.product?.version_status;
+      state.product.statusByRetailer?.[retailerId]?.[concept] ||
+      state.product[`${concept}_status`] ||
+      state.product?.version_status;
 
     let data = { articleId, orderId, concept, evalStatus };
 
-    const retailerId = state.active_retailer?.id_retailer;
-
     try {
       if (result) {
         data.result = result;
@@ -731,15 +745,19 @@ const ProviderProductEditionView = ({
           newStatuses.newServiceStatus[articleId][`${concept}Status`];
 
         // Actualizar el producto con los nuevos estados
+        const updatedStatusByRetailer = {
+          ...state.product.statusByRetailer,
+          [retailerId]: {
+            ...state.product.statusByRetailer[retailerId],
+            [concept]: newStatuses?.newStatus ?? serviceStatus,
+          },
+        };
         const updatedProduct = {
           ...state.product,
-          statusByRetailer: {
-            ...state.product.statusByRetailer,
-            [retailerId]: {
-              ...state.product.statusByRetailer[retailerId],
-              [concept]: newStatuses?.newStatus ?? serviceStatus,
-            },
-          },
+          statusByRetailer: updatedStatusByRetailer,
+          status: getMinorStatus(
+            Object.values(updatedStatusByRetailer).flatMap(Object.values)
+          ),
         };
 
         const updatedServicesData = state.services_data?.map((service) => ({
@@ -967,14 +985,19 @@ const ProviderProductEditionView = ({
       };
 
       // Crear todas las evaluaciones para cada servicio y retailer
+      const isProvider = !user.is_retailer;
       state.services_data?.forEach((ret) => {
         const { service, id_retailer } = ret;
-        let data = {};
-        data = {
+        const currentEvalStatus = state.product.statusByRetailer[id_retailer]?.[service];
+
+        if (isProvider && currentEvalStatus !== STATUS_DICTIONARY.AA.status) return;
+        if (!isProvider && currentEvalStatus !== STATUS_DICTIONARY.AP.status) return;
+
+        const data = {
           ...dataGeneral,
           concept: service,
           retailerId: id_retailer,
-          evalStatus: state.product.statusByRetailer[id_retailer][service],
+          evalStatus: currentEvalStatus,
         };
         evaluationArray.push(
           axios.put(`${process.env.REACT_APP_EVALUATION_ENDPOINT}`, data, {
@@ -1005,6 +1028,9 @@ const ProviderProductEditionView = ({
       const updatedProduct = {
         ...state.product,
         article_status: status,
+        status: getMinorStatus(
+          Object.values(updatedStatusByRetailer).flatMap(Object.values)
+        ),
         datasheet_status:
           state.product.datasheet_status === "NA" ? "NA" : status,
         description_status:

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

@@ -1,3 +1,5 @@
+import { getMinorStatusFromRetailerMap } from "../../../global-files/statusDictionary";
+
 export const normalizeProduct = (product) => {
   // Handle case where product might be wrapped in a product property
   const productData = product.product || product;
@@ -44,7 +46,9 @@ export const normalizeProduct = (product) => {
 
     // from tasks
     id_order: productData.orderId || 0,
-    status: productData.status || null,
+    status: productData.statusByRetailer
+      ? getMinorStatusFromRetailerMap(productData.statusByRetailer)
+      : productData.status || null,
     datasheet_status: productData.datasheet_status || null,
     description_status: productData.description_status || null,
     images_status: productData.images_status || null,

package/src/components/pages/RetailerProductEdition/context/reducers/product.js

@@ -1,4 +1,4 @@
-import { STATUS_DICTIONARY } from "../../../../../global-files/statusDictionary";
+import { STATUS_DICTIONARY, getMinorStatus } from "../../../../../global-files/statusDictionary";
 
 export const productInitialState = {
   product: null,
@@ -92,23 +92,7 @@ export const productReducer = (state, action) => {
   }
 };
 
-function getMinorStatus(servicesStatus = []) {
-  if (!servicesStatus || servicesStatus.length === 0)
-    return STATUS_DICTIONARY.NS.name;
-
-  console.log({ servicesStatus });
-
-  const winner = servicesStatus.reduce((minor, current) => {
-    const currentObj =
-      typeof current === "string" ? STATUS_DICTIONARY[current] : current;
-    const minorObj =
-      typeof minor === "string" ? STATUS_DICTIONARY[minor] : minor;
-
-    if (!currentObj || typeof currentObj.weight === "undefined") return minor;
-    if (!minorObj || typeof minorObj.weight === "undefined") return current;
-
-    return currentObj.weight < minorObj.weight ? currentObj : minorObj;
-  }, servicesStatus[0] || STATUS_DICTIONARY.NS);
-
-  return winner?.status || STATUS_DICTIONARY.NS?.status;
+// Wrapper for array format: [{ status: "AS" }, ...]
+export function getMinorStatusFromRetailer(statusByRetailer = []) {
+  return getMinorStatus(statusByRetailer.map((s) => s?.status));
 }