contentoh-components-library 21.6.44 → 21.6.46

package/dist/index.js

@@ -1135,7 +1135,7 @@ Object.keys(_index86).forEach(function (key) {
   });
 });
 
-var _index87 = require("./components/organisms/ProductImageModal/index");
+var _index87 = require("./components/organisms/VariantGroupModal/index");
 
 Object.keys(_index87).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1148,7 +1148,7 @@ Object.keys(_index87).forEach(function (key) {
   });
 });
 
-var _index88 = require("./components/organisms/Chat/index");
+var _index88 = require("./components/organisms/ProductImageModal/index");
 
 Object.keys(_index88).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1161,7 +1161,7 @@ Object.keys(_index88).forEach(function (key) {
   });
 });
 
-var _index89 = require("./components/organisms/Modal/index");
+var _index89 = require("./components/organisms/Chat/index");
 
 Object.keys(_index89).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1174,7 +1174,7 @@ Object.keys(_index89).forEach(function (key) {
   });
 });
 
-var _index90 = require("./components/organisms/OrderDetail/index");
+var _index90 = require("./components/organisms/Modal/index");
 
 Object.keys(_index90).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1187,6 +1187,19 @@ Object.keys(_index90).forEach(function (key) {
   });
 });
 
+var _index91 = require("./components/organisms/OrderDetail/index");
+
+Object.keys(_index91).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _index91[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index91[key];
+    }
+  });
+});
+
 var _RangeCalendar = require("./components/organisms/RangeCalendar");
 
 Object.keys(_RangeCalendar).forEach(function (key) {
@@ -1213,28 +1226,28 @@ Object.keys(_TableResizable).forEach(function (key) {
   });
 });
 
-var _index91 = require("./components/organisms/SideModal/index");
+var _index92 = require("./components/organisms/SideModal/index");
 
-Object.keys(_index91).forEach(function (key) {
+Object.keys(_index92).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _index91[key]) return;
+  if (key in exports && exports[key] === _index92[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _index91[key];
+      return _index92[key];
     }
   });
 });
 
-var _index92 = require("./components/organisms/GridProducts/index");
+var _index93 = require("./components/organisms/GridProducts/index");
 
-Object.keys(_index92).forEach(function (key) {
+Object.keys(_index93).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _index92[key]) return;
+  if (key in exports && exports[key] === _index93[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _index92[key];
+      return _index93[key];
     }
   });
 });

package/package.json

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

package/src/components/organisms/VariantGroupModal/index.js

@@ -0,0 +1,252 @@
+import { useCallback, useEffect, useState } from "react";
+import axios from "axios";
+
+import { readPayload, ApiError } from "../LinkVariantsModal/api";
+import {
+  Overlay,
+  Panel,
+  Header,
+  Body,
+  SearchRow,
+  List,
+  NewGroup,
+  Message,
+  Footer,
+} from "./styles";
+
+/*
+  Agrupar el producto como variante de otros.
+
+  Ojo con la palabra: esto NO es padre/hijo. Ahí hay jerarquía y herencia —un
+  padre baja valores a sus hijos—. Aquí no hay ninguna de las dos: los productos
+  de un grupo son "el mismo producto en otra presentación" y nada más. Comparten
+  un código en `article.variant_group` y ya. Por eso el modal no pregunta qué
+  heredar: no hay nada que heredar.
+
+  Dos formas de agrupar, y son la misma operación por debajo:
+    - elegir un grupo que ya existe
+    - teclear un código nuevo, que crea el grupo con este producto dentro
+
+  No hay tabla de grupos: un grupo existe mientras algún producto use su código.
+  Eso hace que una errata no falle, solo cree un grupo de un miembro — de ahí que
+  la lista de los existentes vaya PRIMERO y el campo de código nuevo después.
+
+  props (* requerido):
+    - *articleId: el producto que se va a agrupar
+    - articleName / articleUpc: para nombrarlo
+    - currentGroup: el grupo en el que ya está, si lo hay
+    - *token, endpoint
+    - *onClose, onSaved
+*/
+export const VariantGroupModal = ({
+  articleId,
+  articleName,
+  articleUpc,
+  currentGroup = null,
+  token,
+  endpoint = process.env.REACT_APP_VARIANTS_ENDPOINT,
+  onClose,
+  onSaved,
+}) => {
+  const [query, setQuery] = useState("");
+  const [groups, setGroups] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState(null);
+
+  // Qué eligió el usuario: un código de la lista, o el que está escribiendo.
+  const [selected, setSelected] = useState(null);
+  const [nuevo, setNuevo] = useState("");
+
+  const request = useCallback(
+    async (action, body) => {
+      const res = await axios.post(`${endpoint}/${action}`, body, {
+        headers: { Authorization: token },
+      });
+      // El transporte siempre responde 200; el resultado real va en el cuerpo.
+      return readPayload(res);
+    },
+    [endpoint, token]
+  );
+
+  const buscar = useCallback(
+    async (texto) => {
+      setLoading(true);
+      setError(null);
+      try {
+        const data = await request("groups", { articleId, query: texto ?? "" });
+        setGroups(data.groups ?? []);
+      } catch (err) {
+        setError(
+          err instanceof ApiError || err?.name === "ApiError"
+            ? err.message
+            : "No se pudieron cargar los grupos."
+        );
+      } finally {
+        setLoading(false);
+      }
+    },
+    [request, articleId]
+  );
+
+  // Al abrir se listan los grupos que ya existen. Es lo que evita que el usuario
+  // teclee un código nuevo cuando en realidad quería sumarse a uno que ya está.
+  useEffect(() => {
+    buscar("");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  /*
+    El código se normaliza igual que en el servidor —mayúsculas, sin espacios—
+    para que lo que se ve en el campo sea lo que se va a guardar. Si el front
+    mostrara "abc 1" y la base guardara "ABC-1", el usuario buscaría después su
+    grupo por el texto que creyó escribir y no lo encontraría.
+  */
+  const normalizar = (texto) =>
+    `${texto ?? ""}`.trim().replace(/\s+/g, "-").toUpperCase();
+
+  const codigoNuevo = normalizar(nuevo);
+  const codigoFinal = selected ?? codigoNuevo;
+  const esNuevo = !selected && !!codigoNuevo;
+  const yaEstaba = codigoFinal && codigoFinal === currentGroup;
+
+  const guardar = async () => {
+    if (!codigoFinal || yaEstaba) return;
+
+    setSaving(true);
+    setError(null);
+    try {
+      const data = await request("join", { articleId, code: codigoFinal });
+      onSaved?.({ ...data, group: data.group ?? codigoFinal });
+      onClose?.();
+    } catch (err) {
+      setError(
+        err instanceof ApiError || err?.name === "ApiError"
+          ? err.message
+          : "No se pudo agrupar el producto. Intenta de nuevo."
+      );
+      setSaving(false);
+    }
+  };
+
+  const resumen = () => {
+    if (yaEstaba) return `Este producto ya está en «${codigoFinal}».`;
+    if (esNuevo) return `Se creará el grupo «${codigoNuevo}» con este producto.`;
+    if (selected) return `Se agregará a «${selected}».`;
+    return "Elige un grupo o escribe un código nuevo.";
+  };
+
+  return (
+    <Overlay onClick={saving ? undefined : onClose}>
+      <Panel onClick={(event) => event.stopPropagation()}>
+        <Header>
+          <h2>Agrupar como variante</h2>
+          <p>
+            {articleName || `Producto ${articleId}`}
+            {articleUpc ? ` · UPC ${articleUpc}` : ""}
+            {currentGroup ? ` · hoy en «${currentGroup}»` : ""}
+          </p>
+        </Header>
+
+        <Body>
+          {error && <Message className="error">{error}</Message>}
+
+          <SearchRow
+            onSubmit={(event) => {
+              event.preventDefault();
+              buscar(query);
+            }}
+          >
+            <input
+              type="text"
+              value={query}
+              placeholder="Busca un grupo por su código"
+              onChange={(event) => setQuery(event.target.value)}
+            />
+            <button type="submit" disabled={loading}>
+              {loading ? "Buscando…" : "Buscar"}
+            </button>
+          </SearchRow>
+
+          {groups.length > 0 && (
+            <List>
+              {groups.map((grupo) => (
+                <li key={grupo.code}>
+                  <label>
+                    <input
+                      type="radio"
+                      name="variant-group"
+                      checked={selected === grupo.code}
+                      onChange={() => {
+                        setSelected(grupo.code);
+                        setNuevo("");
+                      }}
+                    />
+                    <span className="codigo">{grupo.code}</span>
+                    {grupo.code === currentGroup ? (
+                      <span className="actual">grupo actual</span>
+                    ) : (
+                      <span className="cuenta">
+                        {grupo.products} producto
+                        {grupo.products === 1 ? "" : "s"}
+                      </span>
+                    )}
+                  </label>
+                </li>
+              ))}
+            </List>
+          )}
+
+          {!loading && groups.length === 0 && (
+            <Message>
+              {query.trim()
+                ? "Ningún grupo coincide con esa búsqueda."
+                : "Todavía no hay grupos en esta compañía. Crea el primero abajo."}
+            </Message>
+          )}
+
+          <NewGroup>
+            <label htmlFor="nuevo-grupo">O crea un grupo nuevo</label>
+            <input
+              id="nuevo-grupo"
+              type="text"
+              value={nuevo}
+              placeholder="RELOJ-CASIO-A158"
+              maxLength={50}
+              onChange={(event) => {
+                setNuevo(event.target.value);
+                setSelected(null);
+              }}
+            />
+            <span className="ayuda">
+              Letras, números, guion y guion bajo. Se guarda en mayúsculas, así
+              que «abc-1» y «ABC-1» son el mismo grupo.
+            </span>
+          </NewGroup>
+        </Body>
+
+        <Footer>
+          <span className="resumen">{resumen()}</span>
+          <div className="acciones">
+            <button
+              type="button"
+              className="secondary"
+              onClick={onClose}
+              disabled={saving}
+            >
+              Cancelar
+            </button>
+            <button
+              type="button"
+              className="primary"
+              onClick={guardar}
+              disabled={saving || !codigoFinal || yaEstaba}
+            >
+              {saving ? "Guardando…" : "Aceptar"}
+            </button>
+          </div>
+        </Footer>
+      </Panel>
+    </Overlay>
+  );
+};

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

@@ -0,0 +1,254 @@
+import styled from "styled-components";
+
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+const PINK = "#E13AA8";
+const PINK_RGB = "225, 58, 168";
+
+export const Overlay = styled.div`
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(40, 31, 51, 0.4);
+`;
+
+export const Panel = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: min(560px, 92vw);
+  max-height: 86vh;
+  border-radius: 10px;
+  background-color: ${GlobalColors.white};
+  font-family: ${FontFamily.Raleway};
+  overflow: hidden;
+`;
+
+export const Header = styled.div`
+  padding: 20px 24px 12px;
+
+  h2 {
+    margin: 0;
+    font-family: ${FontFamily.Raleway_700};
+    font-size: 17px;
+    color: ${GlobalColors.deep_gray};
+  }
+
+  p {
+    margin: 4px 0 0;
+    font-size: 13px;
+    line-height: 1.4;
+    color: ${GlobalColors.gray};
+  }
+`;
+
+export const Body = styled.div`
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 4px 24px 12px;
+`;
+
+export const SearchRow = styled.form`
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+
+  input {
+    flex: 1;
+    min-width: 0;
+    height: 36px;
+    padding: 0 12px;
+    border: 1px solid ${GlobalColors.s2};
+    border-radius: 6px;
+    font-family: ${FontFamily.Raleway};
+    font-size: 13px;
+    color: ${GlobalColors.deep_gray};
+  }
+
+  input:focus {
+    outline: none;
+    border-color: ${PINK};
+  }
+
+  /*
+    Estas reglas faltaban y el botón se salía del panel.
+
+    Llevaba className="secondary", pero esa clase solo está definida dentro de
+    Footer, así que aquí no aplicaba nada: salía como un botón crudo del
+    navegador, sin altura ni ancho acotados. El flex-shrink es para que el texto
+    no se parta cuando el campo de búsqueda se lleva el espacio.
+  */
+  button {
+    flex-shrink: 0;
+    height: 36px;
+    padding: 0 18px;
+    border: none;
+    border-radius: 6px;
+    background-color: ${PINK};
+    color: ${GlobalColors.white};
+    font-family: ${FontFamily.Raleway_600};
+    font-size: 13px;
+    cursor: pointer;
+  }
+
+  button:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+`;
+
+export const List = styled.ul`
+  margin: 0 0 12px;
+  padding: 0;
+  list-style: none;
+  border: 1px solid ${GlobalColors.s2};
+  border-radius: 6px;
+  overflow: hidden;
+
+  li + li {
+    border-top: 1px solid ${GlobalColors.s2};
+  }
+
+  label {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 9px 12px;
+    cursor: pointer;
+    font-size: 13px;
+    color: ${GlobalColors.deep_gray};
+  }
+
+  label:hover {
+    background-color: ${GlobalColors.s1};
+  }
+
+  input[type="radio"] {
+    accent-color: ${PINK};
+    flex-shrink: 0;
+  }
+
+  .codigo {
+    font-family: ${FontFamily.Raleway_600};
+  }
+
+  .cuenta {
+    margin-left: auto;
+    font-size: 11px;
+    color: ${GlobalColors.gray};
+    white-space: nowrap;
+  }
+
+  /* El grupo en el que ya está el producto: se marca para que no lo elija otra
+     vez creyendo que hace algo. */
+  .actual {
+    margin-left: auto;
+    font-size: 11px;
+    font-style: italic;
+    color: ${PINK};
+    white-space: nowrap;
+  }
+`;
+
+export const NewGroup = styled.div`
+  padding: 12px;
+  border: 1px dashed rgba(${PINK_RGB}, 0.5);
+  border-radius: 6px;
+  background-color: rgba(${PINK_RGB}, 0.04);
+
+  label {
+    display: block;
+    margin-bottom: 6px;
+    font-family: ${FontFamily.Raleway_600};
+    font-size: 12px;
+    color: ${GlobalColors.deep_gray};
+  }
+
+  input {
+    width: 100%;
+    height: 36px;
+    padding: 0 12px;
+    border: 1px solid ${GlobalColors.s2};
+    border-radius: 6px;
+    font-family: inherit;
+    font-size: 13px;
+    text-transform: uppercase;
+    color: ${GlobalColors.deep_gray};
+  }
+
+  input:focus {
+    outline: none;
+    border-color: ${PINK};
+  }
+
+  .ayuda {
+    display: block;
+    margin-top: 6px;
+    font-size: 11px;
+    line-height: 1.4;
+    color: ${GlobalColors.gray};
+  }
+`;
+
+export const Message = styled.p`
+  margin: 0 0 12px;
+  padding: 10px 12px;
+  border-radius: 6px;
+  font-size: 13px;
+  line-height: 1.4;
+  background-color: ${GlobalColors.s2};
+  color: ${GlobalColors.deep_gray};
+
+  &.error {
+    background-color: rgba(${PINK_RGB}, 0.1);
+    color: ${PINK};
+  }
+`;
+
+export const Footer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 16px 24px;
+  border-top: 1px solid ${GlobalColors.s2};
+
+  .resumen {
+    font-size: 12px;
+    color: ${GlobalColors.gray};
+  }
+
+  .acciones {
+    display: flex;
+    gap: 10px;
+  }
+
+  button {
+    height: 38px;
+    padding: 0 16px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-family: ${FontFamily.Raleway_600};
+    font-size: 13px;
+  }
+
+  button:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  .secondary {
+    border: 1px solid ${GlobalColors.s2};
+    background: none;
+    color: ${GlobalColors.deep_gray};
+  }
+
+  .primary {
+    border: 1px solid ${PINK};
+    background-color: ${PINK};
+    color: ${GlobalColors.white};
+  }
+`;