contentoh-components-library 21.5.84 → 21.5.86

package/dist/global-files/statusDictionary.js

@@ -0,0 +1,103 @@
+"use strict";
+
+var 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: STATUS_DICTIONARY
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.5.84",
+  "version": "21.5.86",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

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

@@ -38,6 +38,10 @@ export const Container = styled.button`
     background-color: #603888;
   }
 
+  &.general-pink-button {
+    background-color: #E33AA9;
+  }
+
   &.general-transparent-button {
     background-color: transparent;
     border: 1px solid #503d66;

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

@@ -68,11 +68,12 @@ export const GeneralInput = ({
   const [aiSuggestionAccepted, setAiSuggestionAccepted] = useState(false);
   const [valueAccepted, setValueAccepted] = useState(inputValue);
 
-  const updateParentData = (generalValue, isAiAccepted) => {
-
+  const updateParentData = (generalValue, isAiAccepted, newBaseValue = null) => {
     setTextValue({ value: generalValue });
 
-    const similarity = getTextSimilarityPercentage(valueAccepted, generalValue);
+    const baseToCompare = newBaseValue !== null ? newBaseValue : valueAccepted;
+
+    const similarity = getTextSimilarityPercentage(baseToCompare, generalValue);
 
     const generatedWithAi = (isAiAccepted || aiGenerated) && similarity >= 50;
 
@@ -186,13 +187,13 @@ export const GeneralInput = ({
   //AI Generation
 
   const handleAcceptSuggestion = (suggestionValue) => {
-    if(!suggestionValue) return;
+      if(!suggestionValue) return;
 
-    setValueAccepted(suggestionValue);
-    setAiSuggestionAccepted(true);
-    setIsAiActive(false);
+      setValueAccepted(suggestionValue);
+      setAiSuggestionAccepted(true);
+      setIsAiActive(false);
 
-    updateParentData(suggestionValue, true);
+      updateParentData(suggestionValue, true, suggestionValue);
   }
 
   return (

package/src/components/molecules/TagAndInput/index.js

@@ -234,7 +234,6 @@ export const TagAndInput = ({
   }, [boxOnboardingList]);
 
   useEffect(() => {
-
     const currentDescriptionUpdate = Array.isArray(updatedDescriptions)
       ? updatedDescriptions.find(desc => desc?.attributeId === inputId)
       : null;
@@ -253,7 +252,7 @@ export const TagAndInput = ({
 
     setInputsGeneratedWithAi(prev => ({
       ...prev,
-      [`${inputId}-${inputType}-${version ?? label}`]: {
+      [`${inputId}-${inputType}-${version}`]: {
         inputType,
         inputId,
         version,
@@ -265,9 +264,7 @@ export const TagAndInput = ({
   }, [updatedDescriptions, updatedDatasheets, aiGenerated, inputId]);
 
   useEffect(() => {
-
-    setIsAiGenerated(!!inputsGeneratedWithAi[`${inputId}-${inputType}-${version ?? label}`]?.isAiGenerated);
-
+    setIsAiGenerated(!!inputsGeneratedWithAi[`${inputId}-${inputType}-${version}`]?.isAiGenerated);
   }, [inputsGeneratedWithAi]);
 
   useEffect(() => {

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

@@ -0,0 +1,488 @@
+import { startTransition, useEffect, useState } from "react";
+import {
+  IconButton,
+  MenuItem,
+  Checkbox,
+  ListItemText,
+  InputLabel,
+} from "@mui/material";
+
+import CloseIcon from "@mui/icons-material/Close";
+import LinkIcon from "@mui/icons-material/Link";
+import BuildOutlinedIcon from "@mui/icons-material/BuildOutlined";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+import LayersIcon from "@mui/icons-material/Layers";
+import ViewInArOutlined from "@mui/icons-material/ViewInArOutlined";
+import { CachedOutlined } from "@mui/icons-material";
+
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import RadioButtonUncheckedIcon from "@mui/icons-material/RadioButtonUnchecked";
+
+import { STATUS_DICTIONARY } from "../../../global-files/statusDictionary";
+
+import {
+  StyledDialog,
+  ModalHeader,
+  BadgeCircle,
+  MainSection,
+  Section,
+  SectionTitle,
+  ScopeButtonGroup,
+  ScopeButton,
+  HelperText,
+  StatusGrid,
+  StatusPill,
+  StyledTextArea,
+  StyledFormControl,
+  StyledSelect,
+  FooterActions,
+  ActionButton,
+  ImpactSummary,
+  colors,
+} 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 = ({
+  state,
+  open,
+  onClose,
+  token = "",
+  reloadData = () => {},
+}) => {
+  const [scope, setScope] = useState("product");
+  const [newStatus, setNewStatus] = useState("");
+  const [comment, setComment] = useState("");
+  const [availableRetailers, setAvailableRetailers] = useState([]);
+  const [selectedChains, setSelectedChains] = useState([]);
+  const [selectedServices, setSelectedServices] = useState([]);
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const [currentStatusObj, setCurrentStatusObj] = useState({});
+
+  const isStatusValid =
+    newStatus !== "" && newStatus !== currentStatusObj.label;
+  const isCommentValid = comment.trim().length > 0;
+
+  let isScopeValid = false;
+  if (scope === "product") isScopeValid = true;
+  if (scope === "retailer") isScopeValid = selectedChains.length > 0;
+  if (scope === "service")
+    isScopeValid = selectedChains.length > 0 && selectedServices.length > 0;
+
+  const canSubmit = isStatusValid && isCommentValid && isScopeValid;
+
+  const handleScopeChange = (newScope) => {
+    setScope(newScope);
+    setSelectedChains([]);
+    setSelectedServices([]);
+  };
+
+  const handleSubmit = async () => {
+    if (!canSubmit || isSubmitting) return;
+
+    setIsSubmitting(true);
+
+    const upc = state?.product?.upc;
+    const article_id = state?.product?.id_article;
+    const order_id = state?.product?.id_order;
+    const version = state?.product?.version;
+    const retailers_selected = availableRetailers
+      ?.filter((retailer) => selectedChains?.includes(retailer.id_retailer))
+      ?.map((retailer) => ({
+        id: retailer?.id_retailer,
+        name: retailer?.name,
+      }));
+    const services_selected = selectedServices;
+
+    const old_status = state?.product?.status;
+    const new_status = Object.values(STATUS_DICTIONARY).find(
+      (status) => status.name === newStatus,
+    ).status;
+
+    const commentary = comment;
+
+    const payload = {
+      upc,
+      articleId: article_id,
+      orderId: order_id,
+      version: version,
+      retailers:
+        scope === "product"
+          ? availableRetailers?.map((retailer) => ({
+              id: retailer?.id_retailer,
+              name: retailer?.name,
+            }))
+          : retailers_selected,
+      services:
+        scope !== "service"
+          ? Object.keys(state?.product.services)
+              .filter((service) => !!state?.product?.services[service])
+              .map((service) =>
+                service
+                  .replace("datasheets", "datasheet")
+                  .replace("descriptions", "description"),
+              )
+          : services_selected,
+      oldStatus: old_status,
+      newStatus: new_status,
+      commentary: commentary,
+    };
+
+    const response = await axios.post(
+      process.env.REACT_APP_REQUEST_CHANGE_STATUS,
+      payload,
+      {
+        headers: {
+          Authorization: token,
+        },
+      },
+    );
+
+    reloadData();
+    setIsSubmitting(false);
+    onClose();
+  };
+
+  useEffect(() => {
+    if (!state) return;
+    setCurrentStatusObj(STATUS_DICTIONARY[state?.product?.status]);
+
+    setAvailableRetailers(state?.product?.categoryRetailerInOrder || []);
+  }, [state]);
+
+  const selectMenuProps = {
+    PaperProps: {
+      style: {
+        borderRadius: "5px",
+        marginTop: "5px",
+        boxShadow: "0px 4px 20px rgba(0,0,0,0.1)",
+      },
+    },
+  };
+
+  return (
+    <StyledDialog open={open} onClose={onClose}>
+      <ModalHeader>
+        <IconButton className="close-icon" onClick={onClose} size="small">
+          <CloseIcon fontSize="small" />
+        </IconButton>
+        <BadgeCircle>
+          <CachedOutlined />
+        </BadgeCircle>
+        <div className="title-container">
+          <h2>Cambio de Estatus</h2>
+          <p>{state?.product?.name}</p>
+        </div>
+      </ModalHeader>
+
+      <MainSection>
+        <Section>
+          <SectionTitle>Alcance del cambio:</SectionTitle>
+          <ScopeButtonGroup>
+            <ScopeButton
+              active={scope === "product"}
+              onClick={() => handleScopeChange("product")}
+            >
+              <ViewInArOutlined /> Producto completo
+            </ScopeButton>
+            <ScopeButton
+              active={scope === "retailer"}
+              onClick={() => handleScopeChange("retailer")}
+            >
+              <LinkIcon /> Por Cadena
+            </ScopeButton>
+            <ScopeButton
+              active={scope === "service"}
+              onClick={() => handleScopeChange("service")}
+            >
+              <BuildOutlinedIcon /> Por Servicio
+            </ScopeButton>
+          </ScopeButtonGroup>
+          {scope === "product" && (
+            <HelperText>
+              Se cambiará el estatus de todos los servicios y cadenas
+            </HelperText>
+          )}
+          {scope === "retailer" && (
+            <HelperText>
+              Afectará todos los servicios de las cadenas seleccionadas
+            </HelperText>
+          )}
+          {scope === "service" && (
+            <HelperText>
+              Afectará únicamente los servicios de las cadenas seleccionadas
+            </HelperText>
+          )}
+        </Section>
+
+        {(scope === "retailer" || scope === "service") && (
+          <Section style={{ paddingTop: 10 }}>
+            <StyledFormControl fullWidth size="small">
+              <InputLabel id="chain-label">Selecciona Cadena(s)</InputLabel>
+              <StyledSelect
+                labelId="chain-label"
+                multiple
+                // 1. El value debe ser directamente tu estado (el arreglo de IDs)
+                value={selectedChains}
+                // 2. onChange seguro para MUI
+                onChange={(e) => {
+                  const {
+                    target: { value },
+                  } = e;
+                  setSelectedChains(
+                    typeof value === "string" ? value.split(",") : value,
+                  );
+                }}
+                // 3. renderValue traduce los IDs a los Nombres de las cadenas para mostrarlos separados por coma
+                renderValue={(selected) =>
+                  availableRetailers
+                    .filter((retailer) =>
+                      selected.includes(retailer.id_retailer),
+                    )
+                    .map((retailer) => retailer.name)
+                    .join(", ")
+                }
+                MenuProps={selectMenuProps}
+              >
+                {availableRetailers.map((retailer) => (
+                  <MenuItem
+                    key={retailer.name}
+                    value={retailer.id_retailer}
+                    sx={{
+                      fontFamily: "Raleway",
+                      fontSize: "0.85rem",
+                      padding: "6px 12px",
+                      "&.Mui-selected": {
+                        backgroundColor: `${colors.primary}1A`,
+                      },
+                      "&.Mui-selected:hover": {
+                        backgroundColor: `${colors.primary}33`,
+                      },
+                    }}
+                  >
+                    <Checkbox
+                      icon={<RadioButtonUncheckedIcon sx={{ fontSize: 18 }} />}
+                      checkedIcon={<CheckCircleIcon sx={{ fontSize: 18 }} />}
+                      checked={
+                        selectedChains.indexOf(retailer.id_retailer) > -1
+                      }
+                      style={{
+                        color: colors.primary,
+                        padding: "4px 8px 4px 4px",
+                      }}
+                    />
+                    <img
+                      src={`https://content-management-images.s3.amazonaws.com/retailers/${retailer?.id_retailer}.png`}
+                      alt={retailer?.name}
+                      style={{
+                        width: "20px",
+                        height: "20px",
+                        objectFit: "contain",
+                        marginRight: "12px",
+                        borderRadius: "4px",
+                      }}
+                    />
+                    <ListItemText
+                      primary={retailer?.name}
+                      primaryTypographyProps={{
+                        style: { fontFamily: "Raleway", fontSize: "0.85rem" },
+                      }}
+                    />
+                  </MenuItem>
+                ))}
+              </StyledSelect>
+            </StyledFormControl>
+          </Section>
+        )}
+
+        {scope === "service" && (
+          <Section style={{ paddingTop: 0 }}>
+            <StyledFormControl fullWidth size="small">
+              <InputLabel id="service-label">Selecciona Servicio(s)</InputLabel>
+              <StyledSelect
+                labelId="service-label"
+                multiple
+                value={selectedServices}
+                onChange={(e) => {
+                  const {
+                    target: { value },
+                  } = e;
+                  setSelectedServices(
+                    typeof value === "string" ? value.split(",") : value,
+                  );
+                }}
+                renderValue={(selected) =>
+                  selected
+                    .map((service) =>
+                      service === "description"
+                        ? "Descripciones"
+                        : service === "datasheet"
+                        ? "Ficha Técnica"
+                        : "Imágenes",
+                    )
+                    .join(", ")
+                }
+                MenuProps={selectMenuProps}
+              >
+                {availableServices.map((service) => (
+                  <MenuItem
+                    key={service}
+                    value={service}
+                    sx={{
+                      fontFamily: "Raleway",
+                      fontSize: "0.85rem",
+                      padding: "6px 12px",
+                      "&.Mui-selected": {
+                        backgroundColor: `${colors.primary}1A`,
+                      },
+                      "&.Mui-selected:hover": {
+                        backgroundColor: `${colors.primary}33`,
+                      },
+                    }}
+                  >
+                    <Checkbox
+                      icon={<RadioButtonUncheckedIcon sx={{ fontSize: 18 }} />}
+                      checkedIcon={<CheckCircleIcon sx={{ fontSize: 18 }} />}
+                      checked={selectedServices.indexOf(service) > -1}
+                      style={{
+                        color: colors.primary,
+                        padding: "4px 8px 4px 4px",
+                      }}
+                    />
+                    <ListItemText
+                      primary={
+                        service === "description"
+                          ? "Descripciones"
+                          : service === "datasheet"
+                          ? "Ficha Técnica"
+                          : "Imágenes"
+                      }
+                      primaryTypographyProps={{
+                        style: { fontFamily: "Raleway", fontSize: "0.85rem" },
+                      }}
+                    />
+                  </MenuItem>
+                ))}
+              </StyledSelect>
+            </StyledFormControl>
+          </Section>
+        )}
+
+        <Section>
+          <SectionTitle>Estatus actual:</SectionTitle>
+          <StatusPill
+            label={currentStatusObj.name}
+            selected={false}
+            disabled={true}
+          />
+        </Section>
+
+        <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>
+        </Section>
+
+        <Section>
+          <SectionTitle>Comentario:</SectionTitle>
+          <StyledTextArea
+            multiline
+            rows={3}
+            placeholder="Explica el motivo del cambio de estatus..."
+            value={comment}
+            onChange={(e) => {
+              if (e.target.value.length <= 255) {
+                setComment(e.target.value);
+              }
+            }}
+            inputProps={{ maxLength: 255 }}
+            helperText={`${comment.length}/255 caracteres`}
+            FormHelperTextProps={{
+              style: { textAlign: "right" }
+            }}
+          />
+        </Section>
+
+        <ImpactSummary>
+          <span className="summary-title">Resumen de impacto:</span>
+          <div className="status-flow">
+            <StatusPill
+              label={currentStatusObj.name}
+              selected={false}
+              disabled={true}
+              size="small"
+            />
+            <ArrowForwardIcon
+              fontSize="small"
+              sx={{ color: colors.textMuted }}
+            />
+            <StatusPill
+              label={newStatus || "Selecciona un estatus"}
+              selected={!!newStatus}
+              size="small"
+            />
+          </div>
+          <div className="impact-counts">
+            <div>
+              <LinkIcon fontSize="small" />
+              {scope === "product"
+                ? state?.product?.categoryRetailerInOrder?.length
+                : selectedChains.length}{" "}
+              cadena(s)
+            </div>
+            <div>
+              <BuildOutlinedIcon fontSize="small" />
+              {scope === "service"
+                ? selectedServices.length
+                : Object.values(state?.product?.services ?? {})
+                ? Object.values(state?.product?.services ?? {}).filter(
+                    (service) => !!service,
+                  ).length
+                : "No es un array"}
+              &nbsp;servicios
+            </div>
+          </div>
+        </ImpactSummary>
+      </MainSection>
+
+      <FooterActions>
+        <ActionButton className="cancel" onClick={onClose}>
+          Cancelar
+        </ActionButton>
+        <ActionButton
+          className="submit"
+          disabled={!canSubmit || isSubmitting}
+          onClick={handleSubmit}
+        >
+          {isSubmitting ? "Guardando..." : "Realizar cambio"}
+        </ActionButton>
+      </FooterActions>
+    </StyledDialog>
+  );
+};
+
+export default ChangeStatusModal;