contentoh-components-library 21.6.46 → 21.6.49

package/dist/components/pages/RetailerProductEdition/index.js

@@ -109,7 +109,7 @@ var _material = require("@mui/material");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var allowedAccountsToViewChangeStatus = ["mperez@contentoh.com", "gmorales@contentoh.com", "rvega@contentoh.com", "amora@contentoh.com", //PRODUCT DEV ACCOUNTS
+var allowedAccountsToViewChangeStatus = ["mperez@contentoh.com", "gmorales@contentoh.com", "rvega@contentoh.com", "amora@contentoh.com", "maltamirano@contentoh.com", //PRODUCT DEV ACCOUNTS
 "oparra@contentoh.com", "zsegura@contentoh.com", "oserna@contentoh.com", "jalvarado@contentoh.com", //DEV ACCOUNTS
 "kikije1467@mtlcz.com", //IMÁGENES
 "karafe3218@mom2kid.com", //TEXTOS
@@ -238,7 +238,7 @@ function _regenerateVideoThumbnails() {
 }
 
 var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
-  var _state$product10, _family$variants, _state$product11, _state$product15, _state$errors, _family$variants2, _state$product19, _state$product20, _state$product21, _state$active_retaile6, _state$product22, _state$product23, _state$product24, _variantGroup$group, _location$state, _location$state2, _state$active_retaile7, _state$active_retaile8, _state$images_values$2, _state$images_values10, _state$images_values11, _state$product25, _state$active_retaile9, _family$variants3, _family$variants4, _variantGroup$members, _variantGroup$members2, _state$active_percent, _state$active_percent2, _state$active_percent3, _state$active_retaile10, _state$active_retaile11, _state$active_retaile12, _state$product31, _state$services2, _state$services2$data, _state$product32, _state$product33, _state$datasheets_inp, _state$datasheets_inp2, _state$product34, _state$images_values12, _state$comment;
+  var _state$product10, _family$variants, _state$product11, _state$product15, _state$errors, _family$variants2, _variantGroup$members2, _variantGroup$group, _state$product19, _state$product20, _state$product21, _state$active_retaile6, _state$product22, _state$product23, _state$product24, _variantGroup$group2, _location$state, _location$state2, _state$active_retaile7, _state$active_retaile8, _state$images_values$2, _state$images_values10, _state$images_values11, _state$product25, _state$active_retaile9, _family$variants3, _family$variants4, _variantGroup$members3, _variantGroup$members4, _state$active_percent, _state$active_percent2, _state$active_percent3, _state$active_retaile10, _state$active_retaile11, _state$active_retaile12, _state$product31, _state$services2, _state$services2$data, _state$product32, _state$product33, _state$datasheets_inp, _state$datasheets_inp2, _state$product34, _state$images_values12, _state$comment;
 
   var tabsSections = _ref.tabsSections,
       _ref$productSelected = _ref.productSelected,
@@ -1811,7 +1811,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
 
   var handleOnClickSave = /*#__PURE__*/function () {
     var _ref16 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee11() {
-      var _familia$variants, cambios, familia, hijos;
+      var _familia$variants, _variantGroup$members, cambios, familia, hijos, companeras;
 
       return _regenerator.default.wrap(function _callee11$(_context11) {
         while (1) {
@@ -1826,7 +1826,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
 
             case 2:
               _context11.t0 = state.active_tab;
-              _context11.next = _context11.t0 === "Descripción" ? 5 : _context11.t0 === "Ficha técnica" ? 8 : _context11.t0 === "Imágenes" ? 32 : 35;
+              _context11.next = _context11.t0 === "Descripción" ? 5 : _context11.t0 === "Ficha técnica" ? 8 : _context11.t0 === "Imágenes" ? 33 : 36;
               break;
 
             case 5:
@@ -1834,7 +1834,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
               return saveDescriptions(token);
 
             case 7:
-              return _context11.abrupt("break", 36);
+              return _context11.abrupt("break", 37);
 
             case 8:
               cambios = cambiosDeFichaTecnica();
@@ -1848,7 +1848,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
               return saveDatasheets(token);
 
             case 12:
-              return _context11.abrupt("break", 36);
+              return _context11.abrupt("break", 37);
 
             case 13:
               /*
@@ -1924,9 +1924,18 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
               hijos = ((_familia$variants = familia.variants) !== null && _familia$variants !== void 0 ? _familia$variants : []).filter(function (v) {
                 return !v.isCurrent;
               });
+              /*
+                También cuentan las compañeras de grupo: un producto puede no tener
+                hijos y aun así pertenecer a un grupo de variantes, y el cambio se les
+                puede copiar igual. Si no se miraran, guardar no ofrecería nada.
+              */
+
+              companeras = ((_variantGroup$members = variantGroup === null || variantGroup === void 0 ? void 0 : variantGroup.members) !== null && _variantGroup$members !== void 0 ? _variantGroup$members : []).filter(function (m) {
+                return !m.isCurrent;
+              });
 
-              if (!(hijos.length > 0)) {
-                _context11.next = 29;
+              if (!(hijos.length > 0 || companeras.length > 0)) {
+                _context11.next = 30;
                 break;
               }
 
@@ -1935,28 +1944,28 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
               });
               return _context11.abrupt("return");
 
-            case 29:
-              _context11.next = 31;
+            case 30:
+              _context11.next = 32;
               return saveDatasheets(token);
 
-            case 31:
-              return _context11.abrupt("break", 36);
-
             case 32:
-              _context11.next = 34;
-              return updateImages(token);
+              return _context11.abrupt("break", 37);
 
-            case 34:
-              return _context11.abrupt("break", 36);
+            case 33:
+              _context11.next = 35;
+              return updateImages(token);
 
             case 35:
-              return _context11.abrupt("break", 36);
+              return _context11.abrupt("break", 37);
 
             case 36:
-              _context11.next = 38;
+              return _context11.abrupt("break", 37);
+
+            case 37:
+              _context11.next = 39;
               return loadData(false);
 
-            case 38:
+            case 39:
             case "end":
               return _context11.stop();
           }
@@ -2888,6 +2897,10 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
         variants: ((_family$variants2 = family === null || family === void 0 ? void 0 : family.variants) !== null && _family$variants2 !== void 0 ? _family$variants2 : []).filter(function (v) {
           return !v.isCurrent;
         }),
+        groupMembers: ((_variantGroup$members2 = variantGroup === null || variantGroup === void 0 ? void 0 : variantGroup.members) !== null && _variantGroup$members2 !== void 0 ? _variantGroup$members2 : []).filter(function (m) {
+          return !m.isCurrent;
+        }),
+        groupCode: (_variantGroup$group = variantGroup === null || variantGroup === void 0 ? void 0 : variantGroup.group) !== null && _variantGroup$group !== void 0 ? _variantGroup$group : null,
         saving: state.saving,
         onCancel: function onCancel() {
           return setPendingPropagation(null);
@@ -2910,7 +2923,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
         articleId: (_state$product22 = state.product) === null || _state$product22 === void 0 ? void 0 : _state$product22.id_article,
         articleName: (_state$product23 = state.product) === null || _state$product23 === void 0 ? void 0 : _state$product23.name,
         articleUpc: (_state$product24 = state.product) === null || _state$product24 === void 0 ? void 0 : _state$product24.upc,
-        currentGroup: (_variantGroup$group = variantGroup === null || variantGroup === void 0 ? void 0 : variantGroup.group) !== null && _variantGroup$group !== void 0 ? _variantGroup$group : null,
+        currentGroup: (_variantGroup$group2 = variantGroup === null || variantGroup === void 0 ? void 0 : variantGroup.group) !== null && _variantGroup$group2 !== void 0 ? _variantGroup$group2 : null,
         token: token,
         onClose: function onClose() {
           return setShowGroupModal(false);
@@ -3251,7 +3264,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
             })]
           }), showGroup && (variantGroup === null || variantGroup === void 0 ? void 0 : variantGroup.group) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: "variants-family",
-            children: [((_variantGroup$members = variantGroup.members) !== null && _variantGroup$members !== void 0 ? _variantGroup$members : []).filter(function (miembro) {
+            children: [((_variantGroup$members3 = variantGroup.members) !== null && _variantGroup$members3 !== void 0 ? _variantGroup$members3 : []).filter(function (miembro) {
               return !miembro.isCurrent;
             }).map(function (miembro) {
               return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -3275,7 +3288,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                   })]
                 })
               }, miembro.articleId);
-            }), ((_variantGroup$members2 = variantGroup.members) !== null && _variantGroup$members2 !== void 0 ? _variantGroup$members2 : []).filter(function (m) {
+            }), ((_variantGroup$members4 = variantGroup.members) !== null && _variantGroup$members4 !== void 0 ? _variantGroup$members4 : []).filter(function (m) {
               return !m.isCurrent;
             }).length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
               className: "loading",

package/package.json

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

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

@@ -40,15 +40,50 @@ const UMBRAL_SEGUNDO_PLANO = 20;
 export const PropagateChangesModal = ({
   changedAttributes = [],
   variants = [],
+  groupMembers = [],
+  groupCode = null,
   onCancel,
   onConfirm,
   saving = false,
 }) => {
   const [chosenAttributes, setChosenAttributes] = useState([]);
-  const [scope, setScope] = useState("all");
+
+  /*
+    DOS DESTINOS INDEPENDIENTES, y esa independencia es el punto.
+
+      hijos      cuelgan de este producto y heredan de él. Hay jerarquía.
+      variantes  comparten un código de grupo. No hay jerarquía; son el mismo
+                 producto en otra presentación.
+
+    Elegir variantes NO debe alcanzar a los hijos ni al revés, así que cada uno
+    lleva su propio alcance y su propia selección. Un solo control con tres
+    opciones —hijos / variantes / ambos— no bastaría: el usuario también tiene
+    que poder decir "a estas dos variantes y a ese hijo".
+
+    Arrancan en "none" los dos: propagar sobrescribe, así que ningún destino se
+    da por elegido sin que alguien lo pida.
+  */
+  const [scopeChildren, setScopeChildren] = useState("none");
   const [chosenChildren, setChosenChildren] = useState([]);
+  const [scopeVariants, setScopeVariants] = useState("none");
+  const [chosenVariants, setChosenVariants] = useState([]);
 
-  const destinatarios = scope === "all" ? variants.length : chosenChildren.length;
+  const seleccion = (scope, todos, elegidos) => {
+    if (scope === "none") return [];
+    if (scope === "all") return todos;
+    return todos.filter((item) => elegidos.includes(item.articleId));
+  };
+
+  const hijosDestino = seleccion(scopeChildren, variants, chosenChildren);
+  const variantesDestino = seleccion(scopeVariants, groupMembers, chosenVariants);
+
+  // Un producto puede ser hijo Y estar en el grupo: se cuenta una sola vez.
+  const idsDestino = new Set([
+    ...hijosDestino.map((x) => x.articleId),
+    ...variantesDestino.map((x) => x.articleId),
+  ]);
+
+  const destinatarios = idsDestino.size;
   const puedePropagar = chosenAttributes.length > 0 && destinatarios > 0;
   const enSegundoPlano = destinatarios > UMBRAL_SEGUNDO_PLANO;
 
@@ -64,9 +99,9 @@ export const PropagateChangesModal = ({
     desmarca el atributo conflictivo, el aviso desaparece — que es justo la
     salida que el aviso debería estar ofreciendo.
   */
-  const destinos = scope === "all"
-    ? variants
-    : variants.filter((item) => chosenChildren.includes(item.articleId));
+  const destinos = [...hijosDestino, ...variantesDestino].filter(
+    (item, i, lista) => lista.findIndex((x) => x.articleId === item.articleId) === i
+  );
 
   const conValorPropio = destinos
     .map((hijo) => ({
@@ -85,18 +120,30 @@ export const PropagateChangesModal = ({
     );
   };
 
-  const toggleChild = (id) => {
-    setChosenChildren((current) =>
+  const toggleEn = (setter) => (id) => {
+    setter((current) =>
       current.includes(id)
         ? current.filter((item) => item !== id)
         : [...current, id]
     );
   };
 
+  const toggleChild = toggleEn(setChosenChildren);
+  const toggleVariant = toggleEn(setChosenVariants);
+
   const confirmar = () => {
+    // Se manda "none" explícito y no una lista vacía para que el servidor no
+    // tenga que adivinar si "sin ids" quiere decir "a ninguno" o "no me lo
+    // preguntaron". Cada destino viaja por su cuenta.
+    const comoLista = (scope, elegidos) => {
+      if (scope === "none") return "none";
+      return scope === "all" ? "all" : elegidos;
+    };
+
     onConfirm?.({
       attributes: chosenAttributes,
-      targetChildren: scope === "all" ? "all" : chosenChildren,
+      targetChildren: comoLista(scopeChildren, chosenChildren),
+      targetVariants: comoLista(scopeVariants, chosenVariants),
     });
   };
 
@@ -105,18 +152,29 @@ export const PropagateChangesModal = ({
       <Panel onClick={(event) => event.stopPropagation()}>
         <Header>
           <h2>
-            Este producto tiene {variants.length} hijo
-            {variants.length === 1 ? "" : "s"}
+            {[
+              variants.length
+                ? `${variants.length} hijo${variants.length === 1 ? "" : "s"}`
+                : null,
+              groupMembers.length
+                ? `${groupMembers.length} variante${
+                    groupMembers.length === 1 ? "" : "s"
+                  }`
+                : null,
+            ]
+              .filter(Boolean)
+              .join(" y ")}
+            {" pueden recibir este cambio"}
           </h2>
           <p>
             Cambiaste {changedAttributes.length} atributo
-            {changedAttributes.length === 1 ? "" : "s"}. Elige cuáles bajan a los
-            hijos; el resto se guarda solo en este producto.
+            {changedAttributes.length === 1 ? "" : "s"}. Elige cuáles se copian y
+            a quiénes; el resto se guarda solo en este producto.
           </p>
         </Header>
 
         <Body>
-          <h3>¿Qué se baja a los hijos?</h3>
+          <h3>¿Qué se copia?</h3>
           <List>
             {changedAttributes.map((attribute) => (
               <li key={attribute.id}>
@@ -135,52 +193,124 @@ export const PropagateChangesModal = ({
             ))}
           </List>
 
-          <h3>¿A cuáles?</h3>
-          <Choices>
-            <label>
-              <input
-                type="radio"
-                name="propagation-scope"
-                checked={scope === "all"}
-                onChange={() => setScope("all")}
-              />
-              <span>
-                A todos
-                <span className="hint">
-                  {variants.length} hijo{variants.length === 1 ? "" : "s"} activo
-                  {variants.length === 1 ? "" : "s"}.
-                </span>
-              </span>
-            </label>
-            <label>
-              <input
-                type="radio"
-                name="propagation-scope"
-                checked={scope === "some"}
-                onChange={() => setScope("some")}
-              />
-              <span>Elegir cuáles</span>
-            </label>
-          </Choices>
-
-          {scope === "some" && (
-            <List>
-              {variants.map((variant) => (
-                <li key={variant.articleId}>
-                  <label>
-                    <input
-                      type="checkbox"
-                      checked={chosenChildren.includes(variant.articleId)}
-                      onChange={() => toggleChild(variant.articleId)}
-                    />
-                    <span>
-                      {variant.name}
-                      <span className="meta">UPC {variant.upc || "—"}</span>
-                    </span>
-                  </label>
-                </li>
-              ))}
-            </List>
+          {/* Cada destino con su propio alcance. Van separados porque
+              propagar a las variantes NO debe alcanzar a los hijos: si fuera
+              un solo control, elegir "todos" mandaría a los dos lados. */}
+          {variants.length > 0 && (
+            <>
+              <h3>
+                ¿A cuáles de los {variants.length} hijo
+                {variants.length === 1 ? "" : "s"}?
+              </h3>
+              <Choices>
+                <label>
+                  <input
+                    type="radio"
+                    name="scope-children"
+                    checked={scopeChildren === "none"}
+                    onChange={() => setScopeChildren("none")}
+                  />
+                  <span>A ninguno</span>
+                </label>
+                <label>
+                  <input
+                    type="radio"
+                    name="scope-children"
+                    checked={scopeChildren === "all"}
+                    onChange={() => setScopeChildren("all")}
+                  />
+                  <span>A todos</span>
+                </label>
+                <label>
+                  <input
+                    type="radio"
+                    name="scope-children"
+                    checked={scopeChildren === "some"}
+                    onChange={() => setScopeChildren("some")}
+                  />
+                  <span>Elegir cuáles</span>
+                </label>
+              </Choices>
+
+              {scopeChildren === "some" && (
+                <List>
+                  {variants.map((variant) => (
+                    <li key={variant.articleId}>
+                      <label>
+                        <input
+                          type="checkbox"
+                          checked={chosenChildren.includes(variant.articleId)}
+                          onChange={() => toggleChild(variant.articleId)}
+                        />
+                        <span>
+                          {variant.name}
+                          <span className="meta">UPC {variant.upc || "—"}</span>
+                        </span>
+                      </label>
+                    </li>
+                  ))}
+                </List>
+              )}
+            </>
+          )}
+
+          {groupMembers.length > 0 && (
+            <>
+              <h3>
+                ¿A cuáles de las {groupMembers.length} variante
+                {groupMembers.length === 1 ? "" : "s"}
+                {groupCode ? ` del grupo ${groupCode}` : ""}?
+              </h3>
+              <Choices>
+                <label>
+                  <input
+                    type="radio"
+                    name="scope-variants"
+                    checked={scopeVariants === "none"}
+                    onChange={() => setScopeVariants("none")}
+                  />
+                  <span>A ninguna</span>
+                </label>
+                <label>
+                  <input
+                    type="radio"
+                    name="scope-variants"
+                    checked={scopeVariants === "all"}
+                    onChange={() => setScopeVariants("all")}
+                  />
+                  <span>A todas</span>
+                </label>
+                <label>
+                  <input
+                    type="radio"
+                    name="scope-variants"
+                    checked={scopeVariants === "some"}
+                    onChange={() => setScopeVariants("some")}
+                  />
+                  <span>Elegir cuáles</span>
+                </label>
+              </Choices>
+
+              {scopeVariants === "some" && (
+                <List>
+                  {groupMembers.map((miembro) => (
+                    <li key={miembro.articleId}>
+                      <label>
+                        <input
+                          type="checkbox"
+                          checked={chosenVariants.includes(miembro.articleId)}
+                          onChange={() => toggleVariant(miembro.articleId)}
+                        />
+                        <span>
+                          {miembro.name}
+                          <span className="meta">UPC {miembro.upc || "—"}</span>
+                        </span>
+                      </label>
+                    </li>
+                  ))}
+                </List>
+              )}
+            </>
           )}
 
           {/* Lo que sorprende si no se dice: aquí se pisa lo que el hijo
@@ -209,9 +339,11 @@ export const PropagateChangesModal = ({
 
         <Footer>
           <span className="resumen">
+            {/* Se cuentan los destinos DISTINTOS: un producto que es hijo y
+                además comparte grupo recibe el valor una sola vez. */}
             {puedePropagar
-              ? `${chosenAttributes.length} atributo(s) a ${destinatarios} hijo(s).`
-              : "No se bajará nada a los hijos."}
+              ? `${chosenAttributes.length} atributo(s) a ${destinatarios} producto(s).`
+              : "No se copiará nada: elige al menos un atributo y un destino."}
           </span>
           <button
             type="button"