contentoh-components-library 21.6.24 → 21.6.26

package/dist/components/organisms/LinkVariantsModal/index.js

@@ -25,6 +25,8 @@ var _axios = _interopRequireDefault(require("axios"));
 
 var _api = require("./api");
 
+var _SingleSelect = require("../../molecules/SingleSelect");
+
 var _helper = require("../../../_utils/helper");
 
 var _styles = require("./styles");
@@ -182,9 +184,12 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
     cuatro decisiones por producto. Al desmarcarlo aparecen las pestañas y cada
     producto guarda su propia selección en `perChild`.
   */
+  // Desmarcado a propósito: aplicar la misma herencia a varios productos es una
+  // decisión, no un valor por omisión. Marcado de entrada se ligaban todos igual
+  // sin que nadie lo hubiera elegido.
 
 
-  var _useState29 = (0, _react.useState)(true),
+  var _useState29 = (0, _react.useState)(false),
       _useState30 = (0, _slicedToArray2.default)(_useState29, 2),
       applyToAll = _useState30[0],
       setApplyToAll = _useState30[1];
@@ -199,53 +204,68 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
       perChild = _useState34[0],
       setPerChild = _useState34[1]; // Cadenas que el padre NO tiene y el usuario decidió agregar a la variante.
 
+  /*
+    Imágenes que la base lista pero cuyo archivo no está en S3.
+     Pasa: hay filas de rel_article_image con un src válido que apunta a un objeto
+    que ya no existe —comprobado, CloudFront responde 404—. Sin esto el paso 4
+    muestra una tarjeta rota, con el texto alternativo donde debería ir la foto, y
+    deja marcar para heredar algo que no se puede heredar.
+     No se puede saber desde el servidor sin ir a S3 por cada imagen, así que se
+    detecta al fallar la carga y se descuenta de la lista y del conteo.
+  */
+
 
   var _useState35 = (0, _react.useState)([]),
       _useState36 = (0, _slicedToArray2.default)(_useState35, 2),
-      extraRetailers = _useState36[0],
-      setExtraRetailers = _useState36[1];
+      brokenImages = _useState36[0],
+      setBrokenImages = _useState36[1];
 
-  var _useState37 = (0, _react.useState)(""),
+  var _useState37 = (0, _react.useState)([]),
       _useState38 = (0, _slicedToArray2.default)(_useState37, 2),
-      newRetailer = _useState38[0],
-      setNewRetailer = _useState38[1];
+      extraRetailers = _useState38[0],
+      setExtraRetailers = _useState38[1];
 
   var _useState39 = (0, _react.useState)(""),
       _useState40 = (0, _slicedToArray2.default)(_useState39, 2),
-      newDepartment = _useState40[0],
-      setNewDepartment = _useState40[1];
+      newRetailer = _useState40[0],
+      setNewRetailer = _useState40[1];
 
   var _useState41 = (0, _react.useState)(""),
       _useState42 = (0, _slicedToArray2.default)(_useState41, 2),
-      newCategory = _useState42[0],
-      setNewCategory = _useState42[1]; // Las categorías no son una lista plana: dependen de la cadena y del
+      newDepartment = _useState42[0],
+      setNewDepartment = _useState42[1];
+
+  var _useState43 = (0, _react.useState)(""),
+      _useState44 = (0, _slicedToArray2.default)(_useState43, 2),
+      newCategory = _useState44[0],
+      setNewCategory = _useState44[1]; // Las categorías no son una lista plana: dependen de la cadena y del
   // departamento. Es la misma cascada que usa el alta de productos, y se sirve
   // del mismo endpoint para no acabar con dos árboles de categorías distintos.
 
 
-  var _useState43 = (0, _react.useState)({
+  var _useState45 = (0, _react.useState)({
     retailers: [],
     departments: [],
     categories: []
   }),
-      _useState44 = (0, _slicedToArray2.default)(_useState43, 2),
-      filters = _useState44[0],
-      setFilters = _useState44[1];
-
-  var _useState45 = (0, _react.useState)(false),
       _useState46 = (0, _slicedToArray2.default)(_useState45, 2),
-      loadingFilters = _useState46[0],
-      setLoadingFilters = _useState46[1];
+      filters = _useState46[0],
+      setFilters = _useState46[1];
 
   var _useState47 = (0, _react.useState)(false),
       _useState48 = (0, _slicedToArray2.default)(_useState47, 2),
-      loading = _useState48[0],
-      setLoading = _useState48[1];
+      loadingFilters = _useState48[0],
+      setLoadingFilters = _useState48[1];
 
-  var _useState49 = (0, _react.useState)(null),
+  var _useState49 = (0, _react.useState)(false),
       _useState50 = (0, _slicedToArray2.default)(_useState49, 2),
-      error = _useState50[0],
-      setError = _useState50[1];
+      loading = _useState50[0],
+      setLoading = _useState50[1];
+
+  var _useState51 = (0, _react.useState)(null),
+      _useState52 = (0, _slicedToArray2.default)(_useState51, 2),
+      error = _useState52[0],
+      setError = _useState52[1];
 
   var request = (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(action, body) {
@@ -456,29 +476,30 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
                 images: null
               });
               setExtraRetailers([]);
+              setBrokenImages([]);
               setPerChild({});
-              setApplyToAll(true);
+              setApplyToAll(false);
               setActiveChild(mode === "children" ? selected[0] : null);
               setStep("inherit");
-              _context4.next = 21;
+              _context4.next = 22;
               break;
 
-            case 18:
-              _context4.prev = 18;
+            case 19:
+              _context4.prev = 19;
               _context4.t0 = _context4["catch"](2);
               setError(readError(_context4.t0));
 
-            case 21:
-              _context4.prev = 21;
+            case 22:
+              _context4.prev = 22;
               setLoading(false);
-              return _context4.finish(21);
+              return _context4.finish(22);
 
-            case 24:
+            case 25:
             case "end":
               return _context4.stop();
           }
         }
-      }, _callee4, null, [[2, 18, 21, 24]]);
+      }, _callee4, null, [[2, 19, 22, 25]]);
     }));
 
     return function goToInheritance() {
@@ -506,7 +527,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
 
   var loadFilters = (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5(retailer, department) {
-      var _data, _ref7, res, _readPayload, body, lista;
+      var _readPayload$data, _readPayload, res, lista;
 
       return _regenerator.default.wrap(function _callee5$(_context5) {
         while (1) {
@@ -523,8 +544,10 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
 
             case 4:
               res = _context5.sent;
-              _readPayload = (0, _api.readPayload)(res), body = _readPayload.body;
-              lista = (_data = (_ref7 = body ? JSON.parse(body) : res.data) === null || _ref7 === void 0 ? void 0 : _ref7.data) !== null && _data !== void 0 ? _data : [];
+              // readPayload YA devuelve el cuerpo parseado. Volver a buscar `body`
+              // dentro dejaba la lista siempre vacía, y por eso el selector de cadenas
+              // no mostraba nada.
+              lista = (_readPayload$data = (_readPayload = (0, _api.readPayload)(res)) === null || _readPayload === void 0 ? void 0 : _readPayload.data) !== null && _readPayload$data !== void 0 ? _readPayload$data : [];
               setFilters(function (current) {
                 if (!retailer) {
                   return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, current), {}, {
@@ -547,36 +570,42 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
                     }),
                     categories: []
                   });
-                }
+                } // El tercer nivel no viene como {id, name} sino como
+                // {category_id, subcategory}: con el mapeo de los otros dos, la
+                // categoría salía en la lista pero sin texto. Mismo criterio que usa
+                // el alta de productos, incluido el separador legible.
+
 
                 return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, current), {}, {
                   categories: lista.map(function (item) {
+                    var _item$subcategory;
+
                     return {
-                      value: item.id,
-                      label: item.name
+                      value: item.category_id,
+                      label: ((_item$subcategory = item.subcategory) !== null && _item$subcategory !== void 0 ? _item$subcategory : "").replace("|", " > ")
                     };
                   })
                 });
               });
-              _context5.next = 13;
+              _context5.next = 12;
               break;
 
-            case 10:
-              _context5.prev = 10;
+            case 9:
+              _context5.prev = 9;
               _context5.t0 = _context5["catch"](1);
               console.error("linkVariants/filters: ", _context5.t0);
 
-            case 13:
-              _context5.prev = 13;
+            case 12:
+              _context5.prev = 12;
               setLoadingFilters(false);
-              return _context5.finish(13);
+              return _context5.finish(12);
 
-            case 16:
+            case 15:
             case "end":
               return _context5.stop();
           }
         }
-      }, _callee5, null, [[1, 10, 13, 16]]);
+      }, _callee5, null, [[1, 9, 12, 15]]);
     }));
 
     return function (_x4, _x5) {
@@ -636,7 +665,13 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
      Las parejas cadena+categoría viajan como objetos, no como ids, porque pueden
     ser cadenas que el padre no tiene: ahí no hay nada que heredar, se asigna.
   */
+  // Las que de verdad se pueden heredar: la base puede listar filas cuyo archivo
+  // ya no existe, y esas no cuentan ni para la lista ni para el "todas".
+
 
+  var imagenesUtiles = offered.images.filter(function (image) {
+    return !brokenImages.includes(image.id);
+  });
 
   var buildInherit = function buildInherit(seleccion) {
     var _seleccion$extraRetai;
@@ -654,9 +689,9 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
       images: seleccion.modes.images === "all" ? "all" : seleccion.chosen.images,
       categoryRetailers: parejas.filter(function (par) {
         return seleccion.chosen.categoryRetailers.includes(par.clave);
-      }).map(function (_ref8) {
-        var retailerId = _ref8.retailerId,
-            categoryId = _ref8.categoryId;
+      }).map(function (_ref7) {
+        var retailerId = _ref7.retailerId,
+            categoryId = _ref7.categoryId;
         return {
           retailerId: retailerId,
           categoryId: categoryId
@@ -706,7 +741,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
   };
 
   var submit = /*#__PURE__*/function () {
-    var _ref9 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6() {
+    var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6() {
       var inherit, inheritByChild, body, data;
       return _regenerator.default.wrap(function _callee6$(_context6) {
         while (1) {
@@ -780,14 +815,21 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
     }));
 
     return function submit() {
-      return _ref9.apply(this, arguments);
+      return _ref8.apply(this, arguments);
     };
   }(); // Una dimensión está decidida si el usuario eligió un modo, o si el padre no
   // ofrece nada en ella —no se puede pedir que decida sobre una lista vacía—.
 
 
   var decidida = function decidida(dimension) {
-    return modes[dimension] !== null || (dimension === "categoryRetailers" ? offered.categoryRetailers.length === 0 && extraRetailers.length === 0 : offered[dimension].length === 0);
+    if (modes[dimension] !== null) return true;
+
+    if (dimension === "categoryRetailers") {
+      return offered.categoryRetailers.length === 0 && extraRetailers.length === 0;
+    } // Una imagen cuyo archivo no existe no es algo sobre lo que se pueda decidir.
+
+
+    return dimension === "images" ? imagenesUtiles.length === 0 : offered[dimension].length === 0;
   };
 
   var DIMENSIONES = ["categoryRetailers", "descriptions", "attributes", "images"]; // Con pestañas, que la que estoy viendo esté completa no basta: ligar escribe
@@ -802,22 +844,27 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
     } : perChild[id];
     if (!guardado) return false;
     return DIMENSIONES.every(function (dimension) {
-      var _guardado$extraRetail2;
-
       if (guardado.modes[dimension] !== null) return true;
-      return dimension === "categoryRetailers" ? offered.categoryRetailers.length === 0 && ((_guardado$extraRetail2 = guardado.extraRetailers) !== null && _guardado$extraRetail2 !== void 0 ? _guardado$extraRetail2 : []).length === 0 : offered[dimension].length === 0;
+
+      if (dimension === "categoryRetailers") {
+        var _guardado$extraRetail2;
+
+        return offered.categoryRetailers.length === 0 && ((_guardado$extraRetail2 = guardado.extraRetailers) !== null && _guardado$extraRetail2 !== void 0 ? _guardado$extraRetail2 : []).length === 0;
+      }
+
+      return dimension === "images" ? imagenesUtiles.length === 0 : offered[dimension].length === 0;
     });
   };
 
   var todoDecidido = step === "inherit" && (applyToAll || mode !== "children" ? DIMENSIONES.every(decidida) : selected.every(decididoPara));
-  var faltantes = [["categoryRetailers", "cadenas"], ["descriptions", "descripciones"], ["attributes", "atributos"], ["images", "imágenes"]].filter(function (_ref10) {
-    var _ref11 = (0, _slicedToArray2.default)(_ref10, 1),
-        clave = _ref11[0];
+  var faltantes = [["categoryRetailers", "cadenas"], ["descriptions", "descripciones"], ["attributes", "atributos"], ["images", "imágenes"]].filter(function (_ref9) {
+    var _ref10 = (0, _slicedToArray2.default)(_ref9, 1),
+        clave = _ref10[0];
 
     return !decidida(clave);
-  }).map(function (_ref12) {
-    var _ref13 = (0, _slicedToArray2.default)(_ref12, 2),
-        nombre = _ref13[1];
+  }).map(function (_ref11) {
+    var _ref12 = (0, _slicedToArray2.default)(_ref11, 2),
+        nombre = _ref12[1];
 
     return nombre;
   });
@@ -964,6 +1011,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
               children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
                   type: "radio",
+                  name: "categoryRetailers-".concat(activeChild !== null && activeChild !== void 0 ? activeChild : "todos"),
                   checked: modes.categoryRetailers === "all",
                   onChange: function onChange() {
                     return chooseMode("categoryRetailers", "all", offered.categoryRetailers.map(function (item) {
@@ -979,6 +1027,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
               }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
                   type: "radio",
+                  name: "categoryRetailers-".concat(activeChild !== null && activeChild !== void 0 ? activeChild : "todos"),
                   checked: modes.categoryRetailers === "some",
                   onChange: function onChange() {
                     return chooseMode("categoryRetailers", "some", []);
@@ -1024,62 +1073,45 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
                 }, item.clave);
               })
             }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.AddRetailer, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SingleSelect.SingleSelect, {
+                id: "link-variants-retailer",
+                placeholder: "Agregar otra cadena\u2026",
+                options: filters.retailers,
                 value: newRetailer,
-                onChange: function onChange(event) {
-                  var valor = event.target.value;
-                  setNewRetailer(valor);
+                loading: loadingFilters && !filters.retailers.length,
+                onChange: function onChange(valor) {
+                  setNewRetailer(valor !== null && valor !== void 0 ? valor : "");
                   setNewDepartment("");
                   setNewCategory("");
                   if (valor) loadFilters(valor, null);
-                },
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-                  value: "",
-                  children: "Agregar otra cadena\u2026"
-                }), filters.retailers.map(function (item) {
-                  return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-                    value: item.value,
-                    children: item.label
-                  }, item.value);
-                })]
-              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
+                }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SingleSelect.SingleSelect, {
+                id: "link-variants-department",
+                placeholder: "Departamento\u2026",
+                options: filters.departments,
                 value: newDepartment,
-                disabled: !newRetailer || !filters.departments.length,
-                onChange: function onChange(event) {
-                  var valor = event.target.value;
-                  setNewDepartment(valor);
+                disabled: !newRetailer,
+                loading: loadingFilters && !!newRetailer,
+                onChange: function onChange(valor) {
+                  setNewDepartment(valor !== null && valor !== void 0 ? valor : "");
                   setNewCategory("");
                   if (valor) loadFilters(newRetailer, valor);
-                },
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-                  value: "",
-                  children: "Departamento\u2026"
-                }), filters.departments.map(function (item) {
-                  return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-                    value: item.value,
-                    children: item.label
-                  }, item.value);
-                })]
-              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
+                }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SingleSelect.SingleSelect, {
+                id: "link-variants-category",
+                placeholder: "Categor\xEDa\u2026",
+                options: filters.categories,
                 value: newCategory,
-                disabled: !newDepartment || !filters.categories.length,
-                onChange: function onChange(event) {
-                  return setNewCategory(event.target.value);
-                },
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-                  value: "",
-                  children: "Categor\xEDa\u2026"
-                }), filters.categories.map(function (item) {
-                  return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-                    value: item.value,
-                    children: item.label
-                  }, item.value);
-                })]
+                disabled: !newDepartment,
+                loading: loadingFilters && !!newDepartment,
+                onChange: function onChange(valor) {
+                  return setNewCategory(valor !== null && valor !== void 0 ? valor : "");
+                }
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
                 type: "button",
                 onClick: addRetailer,
                 disabled: !newRetailer || !newCategory || loadingFilters,
-                children: loadingFilters ? "…" : "Agregar"
+                children: "Agregar"
               })]
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Block, {
@@ -1093,6 +1125,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
                   children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
                     type: "radio",
+                    name: "descriptions-".concat(activeChild !== null && activeChild !== void 0 ? activeChild : "todos"),
                     checked: modes.descriptions === "all",
                     onChange: function onChange() {
                       return chooseMode("descriptions", "all", offered.descriptions.map(function (item) {
@@ -1108,6 +1141,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
                 }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
                   children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
                     type: "radio",
+                    name: "descriptions-".concat(activeChild !== null && activeChild !== void 0 ? activeChild : "todos"),
                     checked: modes.descriptions === "some",
                     onChange: function onChange() {
                       return chooseMode("descriptions", "some", []);
@@ -1158,6 +1192,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
                   children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
                     type: "radio",
+                    name: "attributes-".concat(activeChild !== null && activeChild !== void 0 ? activeChild : "todos"),
                     checked: modes.attributes === "all",
                     onChange: function onChange() {
                       return chooseMode("attributes", "all", offered.attributes.map(function (item) {
@@ -1173,6 +1208,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
                 }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
                   children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
                     type: "radio",
+                    name: "attributes-".concat(activeChild !== null && activeChild !== void 0 ? activeChild : "todos"),
                     checked: modes.attributes === "some",
                     onChange: function onChange() {
                       return chooseMode("attributes", "some", []);
@@ -1217,65 +1253,68 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
             }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Message, {
               children: "El producto padre no tiene atributos con valor que heredar."
             })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Block, {
+          }), imagenesUtiles.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Block, {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("h3", {
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                 className: "paso",
                 children: "4"
               }), " Im\xE1genes"]
-            }), offered.images.length ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Choices, {
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-                    type: "radio",
-                    checked: modes.images === "all",
-                    onChange: function onChange() {
-                      return chooseMode("images", "all", offered.images.map(function (item) {
-                        return item.id;
-                      }));
-                    }
-                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-                    children: ["Todas", /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-                      className: "hint",
-                      children: [offered.images.length, " imagen(es) en el padre."]
-                    })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Choices, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                  type: "radio",
+                  name: "images-".concat(activeChild !== null && activeChild !== void 0 ? activeChild : "todos"),
+                  checked: modes.images === "all",
+                  onChange: function onChange() {
+                    return chooseMode("images", "all", imagenesUtiles.map(function (item) {
+                      return item.id;
+                    }));
+                  }
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                  children: ["Todas", /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                    className: "hint",
+                    children: [imagenesUtiles.length, " imagen(es) en el padre."]
                   })]
-                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                })]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                  type: "radio",
+                  name: "images-".concat(activeChild !== null && activeChild !== void 0 ? activeChild : "todos"),
+                  checked: modes.images === "some",
+                  onChange: function onChange() {
+                    return chooseMode("images", "some", []);
+                  }
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                  children: ["Elegir cu\xE1les", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                    className: "hint",
+                    children: "\xDAtil cuando la variante cambia de color o de empaque."
+                  })]
+                })]
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ImageGrid, {
+              children: imagenesUtiles.map(function (image) {
+                return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                  className: [chosen.images.includes(image.id) ? "picked" : "", modes.images === "all" ? "locked" : ""].filter(Boolean).join(" "),
                   children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-                    type: "radio",
-                    checked: modes.images === "some",
+                    type: "checkbox",
+                    disabled: modes.images === "all",
+                    checked: chosen.images.includes(image.id),
                     onChange: function onChange() {
-                      return chooseMode("images", "some", []);
+                      return toggleChoice("images", image.id);
                     }
-                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-                    children: ["Elegir cu\xE1les", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                      className: "hint",
-                      children: "\xDAtil cuando la variante cambia de color o de empaque."
-                    })]
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                    src: (0, _helper.getProductImage)(image.src),
+                    alt: "",
+                    onError: function onError() {
+                      return setBrokenImages(function (current) {
+                        return current.includes(image.id) ? current : [].concat((0, _toConsumableArray2.default)(current), [image.id]);
+                      });
+                    }
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                    children: image.imageType || "Sin tipo de toma"
                   })]
-                })]
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ImageGrid, {
-                children: offered.images.map(function (image) {
-                  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-                    className: [chosen.images.includes(image.id) ? "picked" : "", modes.images === "all" ? "locked" : ""].filter(Boolean).join(" "),
-                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-                      type: "checkbox",
-                      disabled: modes.images === "all",
-                      checked: chosen.images.includes(image.id),
-                      onChange: function onChange() {
-                        return toggleChoice("images", image.id);
-                      }
-                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-                      src: (0, _helper.getProductImage)(image.src),
-                      alt: image.imageType || "Imagen del producto"
-                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                      children: image.imageType || "Sin tipo de toma"
-                    })]
-                  }, image.id);
-                })
-              })]
-            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Message, {
-              children: "El producto padre no tiene im\xE1genes que heredar."
+                }, image.id);
+              })
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Message, {
             children: "Lo que elijas heredar reemplaza el valor actual de la variante, incluso si alguien lo hab\xEDa capturado a mano."