contentoh-components-library 21.5.85 → 21.5.87

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;