contentoh-components-library 21.5.92 → 21.5.93

package/dist/global-files/statusDictionary.js

@@ -1,103 +0,0 @@
-"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/src/ai/utils/compare-strings.js

@@ -1,45 +0,0 @@
-
-//Calcula el porcentaje de similitud entre la descripción generada por IA y la versión editada por el usuario.
-
-export function getTextSimilarityPercentage(originalText, candidateText) {
-
-  if(!originalText || !candidateText) return;
-
-  const normalize = (text) => {
-    return text
-    .trim()
-    .toLowerCase()
-    .replace(/\s+/g, ' ');
-  };
-
-  const source = normalize(originalText);
-  const target = normalize(candidateText);
-
-  if (source === target) return 100;
-  if (source.length === 0 || target.length === 0) return 0;
-
-  const sourceLength = source.length;
-  const targetLength = target.length;
-  const distanceMatrix = Array(targetLength + 1).fill(null).map(() => []);
-
-  for (let i = 0; i <= sourceLength; i++) distanceMatrix[0][i] = i;
-  for (let j = 0; j <= targetLength; j++) distanceMatrix[j][0] = j;
-
-  for (let j = 1; j <= targetLength; j++) {
-    for (let i = 1; i <= sourceLength; i++) {
-      const substitutionCost = (source[i - 1] === target[j - 1]) ? 0 : 1;
-
-      distanceMatrix[j][i] = Math.min(
-        distanceMatrix[j - 1][i] + 1,
-        distanceMatrix[j][i - 1] + 1,
-        distanceMatrix[j - 1][i - 1] + substitutionCost
-      );
-    }
-  }
-
-  const editDistance = distanceMatrix[targetLength][sourceLength];
-  const maxLength = Math.max(sourceLength, targetLength);
-  const similarityScore = 1 - (editDistance / maxLength);
-
-  return similarityScore * 100;
-}

package/src/assets/images/Icons/loading.svg

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" width="283" height="283" style="shape-rendering: auto; display: block; background: transparent;" xmlns:xlink="http://www.w3.org/1999/xlink"><g><g>
-  <path stroke-width="10" stroke="#e13aa7" fill="none" d="M50 27A23 23 0 1 0 69.9785248320784 38.604450626054636"></path>
-  <path fill="#e13aa7" d="M49 15L49 39L61 27L49 15"></path>
-  <animateTransform keyTimes="0;1" values="0 50 50;360 50 50" dur="0.9803921568627451s" repeatCount="indefinite" type="rotate" attributeName="transform"></animateTransform>
-</g><g></g></g><!-- [ldio] generated by https://loading.io --></svg>

package/src/components/atoms/RetailerSelector/RetailerSelector.stories.js

@@ -1,10 +0,0 @@
-import { RetailerSelector } from ".";
-
-export default {
-  component: RetailerSelector,
-  parameters: {
-    layout: "centered",
-  },
-};
-
-export const Default = {};

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

@@ -1,3 +0,0 @@
-export const RetailerSelector = () => {
-  return <div>RetailerSelector Component</div>;
-};

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

@@ -1,488 +0,0 @@
-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;