contentoh-components-library 21.6.22 → 21.6.23

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

@@ -9,6 +9,10 @@ exports.LinkVariantsModal = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _objectSpread4 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
 
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
@@ -70,6 +74,8 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
       articleName = _ref.articleName,
       articleUpc = _ref.articleUpc,
       activeRetailerId = _ref.activeRetailerId,
+      retailersAvailable = _ref.retailersAvailable,
+      categoriesAvailable = _ref.categoriesAvailable,
       token = _ref.token,
       _ref$endpoint = _ref.endpoint,
       endpoint = _ref$endpoint === void 0 ? process.env.REACT_APP_VARIANTS_ENDPOINT : _ref$endpoint,
@@ -109,52 +115,71 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
   var _useState13 = (0, _react.useState)([]),
       _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
       selected = _useState14[0],
-      setSelected = _useState14[1];
+      setSelected = _useState14[1]; // Lo que el padre ofrece en cada dimensión, y lo que el usuario eligió de
+  // cada una. Se guardan por separado porque se eligen por separado: heredar
+  // todos los atributos no dice nada sobre qué fotos quiere la variante.
 
-  var _useState15 = (0, _react.useState)([]),
-      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-      attributes = _useState16[0],
-      setAttributes = _useState16[1];
 
-  var _useState17 = (0, _react.useState)(null),
+  var _useState15 = (0, _react.useState)({
+    attributes: [],
+    descriptions: [],
+    images: [],
+    categoryRetailers: []
+  }),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      offered = _useState16[0],
+      setOffered = _useState16[1];
+
+  var _useState17 = (0, _react.useState)({
+    attributes: [],
+    descriptions: [],
+    images: [],
+    categoryRetailers: []
+  }),
       _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
-      nameScope = _useState18[0],
-      setNameScope = _useState18[1];
+      chosen = _useState18[0],
+      setChosen = _useState18[1];
 
-  var _useState19 = (0, _react.useState)("all-filled"),
+  var _useState19 = (0, _react.useState)(null),
       _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
-      inheritMode = _useState20[0],
-      setInheritMode = _useState20[1];
+      nameScope = _useState20[0],
+      setNameScope = _useState20[1];
 
-  var _useState21 = (0, _react.useState)([]),
+  var _useState21 = (0, _react.useState)("all-filled"),
       _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
-      chosenAttributes = _useState22[0],
-      setChosenAttributes = _useState22[1];
+      inheritMode = _useState22[0],
+      setInheritMode = _useState22[1];
 
-  var _useState23 = (0, _react.useState)(true),
+  var _useState23 = (0, _react.useState)("attributes"),
       _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
-      inheritImages = _useState24[0],
-      setInheritImages = _useState24[1];
+      openSection = _useState24[0],
+      setOpenSection = _useState24[1]; // Cadenas que el padre NO tiene y el usuario decidió agregar a la variante.
+
 
-  var _useState25 = (0, _react.useState)(true),
+  var _useState25 = (0, _react.useState)([]),
       _useState26 = (0, _slicedToArray2.default)(_useState25, 2),
-      inheritDescriptions = _useState26[0],
-      setInheritDescriptions = _useState26[1];
+      extraRetailers = _useState26[0],
+      setExtraRetailers = _useState26[1];
 
-  var _useState27 = (0, _react.useState)(true),
+  var _useState27 = (0, _react.useState)(""),
       _useState28 = (0, _slicedToArray2.default)(_useState27, 2),
-      inheritCategoryRetailers = _useState28[0],
-      setInheritCategoryRetailers = _useState28[1];
+      newRetailer = _useState28[0],
+      setNewRetailer = _useState28[1];
 
-  var _useState29 = (0, _react.useState)(false),
+  var _useState29 = (0, _react.useState)(""),
       _useState30 = (0, _slicedToArray2.default)(_useState29, 2),
-      loading = _useState30[0],
-      setLoading = _useState30[1];
+      newCategory = _useState30[0],
+      setNewCategory = _useState30[1];
 
-  var _useState31 = (0, _react.useState)(null),
+  var _useState31 = (0, _react.useState)(false),
       _useState32 = (0, _slicedToArray2.default)(_useState31, 2),
-      error = _useState32[0],
-      setError = _useState32[1];
+      loading = _useState32[0],
+      setLoading = _useState32[1];
+
+  var _useState33 = (0, _react.useState)(null),
+      _useState34 = (0, _slicedToArray2.default)(_useState33, 2),
+      error = _useState34[0],
+      setError = _useState34[1];
 
   var request = (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(action, body) {
@@ -262,7 +287,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
 
   var goToInheritance = /*#__PURE__*/function () {
     var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
-      var _data$nameScope, data;
+      var _data$nameScope, data, listas;
 
       return _regenerator.default.wrap(function _callee3$(_context3) {
         while (1) {
@@ -279,31 +304,51 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
 
             case 5:
               data = _context3.sent;
-              setAttributes(data.attributes || []);
-              setNameScope((_data$nameScope = data.nameScope) !== null && _data$nameScope !== void 0 ? _data$nameScope : null);
-              setChosenAttributes((data.attributes || []).map(function (item) {
-                return item.id;
-              }));
+              listas = {
+                attributes: data.attributes || [],
+                descriptions: data.descriptions || [],
+                images: data.images || [],
+                categoryRetailers: data.categoryRetailers || []
+              };
+              setOffered(listas);
+              setNameScope((_data$nameScope = data.nameScope) !== null && _data$nameScope !== void 0 ? _data$nameScope : null); // Todo preseleccionado: heredar es el caso normal, y quitar lo que sobra
+              // es menos trabajo que marcar de cero lo que casi siempre se quiere.
+
+              setChosen({
+                attributes: listas.attributes.map(function (item) {
+                  return item.id;
+                }),
+                descriptions: listas.descriptions.map(function (item) {
+                  return item.id;
+                }),
+                images: listas.images.map(function (item) {
+                  return item.id;
+                }),
+                categoryRetailers: listas.categoryRetailers.map(function (item) {
+                  return "".concat(item.retailerId, "-").concat(item.categoryId);
+                })
+              });
+              setExtraRetailers([]);
               setStep("inherit");
-              _context3.next = 15;
+              _context3.next = 17;
               break;
 
-            case 12:
-              _context3.prev = 12;
+            case 14:
+              _context3.prev = 14;
               _context3.t0 = _context3["catch"](2);
               setError(readError(_context3.t0));
 
-            case 15:
-              _context3.prev = 15;
+            case 17:
+              _context3.prev = 17;
               setLoading(false);
-              return _context3.finish(15);
+              return _context3.finish(17);
 
-            case 18:
+            case 20:
             case "end":
               return _context3.stop();
           }
         }
-      }, _callee3, null, [[2, 12, 15, 18]]);
+      }, _callee3, null, [[2, 14, 17, 20]]);
     }));
 
     return function goToInheritance() {
@@ -311,28 +356,94 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
     };
   }();
 
-  var toggleAttribute = function toggleAttribute(id) {
-    setChosenAttributes(function (current) {
-      return current.includes(id) ? current.filter(function (item) {
+  var toggleChoice = function toggleChoice(dimension, id) {
+    setChosen(function (current) {
+      var lista = current[dimension];
+      return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, current), {}, (0, _defineProperty2.default)({}, dimension, lista.includes(id) ? lista.filter(function (item) {
         return item !== id;
-      }) : [].concat((0, _toConsumableArray2.default)(current), [id]);
+      }) : [].concat((0, _toConsumableArray2.default)(lista), [id])));
+    });
+  };
+
+  var toggleAll = function toggleAll(dimension, ids) {
+    setChosen(function (current) {
+      return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, current), {}, (0, _defineProperty2.default)({}, dimension, current[dimension].length === ids.length ? [] : ids));
     });
   };
 
+  var addRetailer = function addRetailer() {
+    var retailerId = Number(newRetailer);
+    var categoryId = Number(newCategory);
+    if (!retailerId || !categoryId) return;
+    var clave = "".concat(retailerId, "-").concat(categoryId);
+    var yaEsta = offered.categoryRetailers.some(function (item) {
+      return "".concat(item.retailerId, "-").concat(item.categoryId) === clave;
+    }) || extraRetailers.some(function (item) {
+      return item.clave === clave;
+    });
+    if (yaEsta) return;
+    var retailer = (retailersAvailable || []).find(function (item) {
+      var _item$id;
+
+      return Number((_item$id = item.id) !== null && _item$id !== void 0 ? _item$id : item.value) === retailerId;
+    });
+    var category = (categoriesAvailable || []).find(function (item) {
+      var _item$id2;
+
+      return Number((_item$id2 = item.id) !== null && _item$id2 !== void 0 ? _item$id2 : item.value) === categoryId;
+    });
+    setExtraRetailers(function (current) {
+      var _ref5, _retailer$name, _ref6, _category$name;
+
+      return [].concat((0, _toConsumableArray2.default)(current), [{
+        clave: clave,
+        retailerId: retailerId,
+        categoryId: categoryId,
+        retailerName: (_ref5 = (_retailer$name = retailer === null || retailer === void 0 ? void 0 : retailer.name) !== null && _retailer$name !== void 0 ? _retailer$name : retailer === null || retailer === void 0 ? void 0 : retailer.label) !== null && _ref5 !== void 0 ? _ref5 : "Cadena ".concat(retailerId),
+        categoryName: (_ref6 = (_category$name = category === null || category === void 0 ? void 0 : category.name) !== null && _category$name !== void 0 ? _category$name : category === null || category === void 0 ? void 0 : category.label) !== null && _ref6 !== void 0 ? _ref6 : "Categor\xEDa ".concat(categoryId)
+      }]);
+    });
+    setChosen(function (current) {
+      return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, current), {}, {
+        categoryRetailers: [].concat((0, _toConsumableArray2.default)(current.categoryRetailers), [clave])
+      });
+    });
+    setNewRetailer("");
+    setNewCategory("");
+  };
+
   var submit = /*#__PURE__*/function () {
-    var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
-      var inherit, body, data;
+    var _ref7 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
+      var todasLasParejas, inherit, body, data;
       return _regenerator.default.wrap(function _callee4$(_context4) {
         while (1) {
           switch (_context4.prev = _context4.next) {
             case 0:
               setLoading(true);
-              setError(null);
+              setError(null); // Las parejas cadena+categoría viajan como objetos, no como ids: pueden ser
+              // cadenas que el padre no tiene, y ahí no hay nada que "heredar" — se asigna.
+
+              todasLasParejas = [].concat((0, _toConsumableArray2.default)(offered.categoryRetailers.map(function (item) {
+                return {
+                  clave: "".concat(item.retailerId, "-").concat(item.categoryId),
+                  retailerId: item.retailerId,
+                  categoryId: item.categoryId
+                };
+              })), (0, _toConsumableArray2.default)(extraRetailers));
               inherit = {
-                attributes: inheritMode === "all-filled" ? "all-filled" : chosenAttributes,
-                images: inheritImages,
-                descriptions: inheritDescriptions,
-                categoryRetailers: inheritCategoryRetailers
+                attributes: inheritMode === "all-filled" ? "all-filled" : chosen.attributes,
+                descriptions: chosen.descriptions,
+                images: chosen.images,
+                categoryRetailers: todasLasParejas.filter(function (par) {
+                  return chosen.categoryRetailers.includes(par.clave);
+                }).map(function (_ref8) {
+                  var retailerId = _ref8.retailerId,
+                      categoryId = _ref8.categoryId;
+                  return {
+                    retailerId: retailerId,
+                    categoryId: categoryId
+                  };
+                })
               };
               body = mode === "parent" ? {
                 mode: mode,
@@ -345,37 +456,43 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
                 childrenArticleIds: selected,
                 inherit: inherit
               };
-              _context4.prev = 4;
-              _context4.next = 7;
+              _context4.prev = 5;
+              _context4.next = 8;
               return request("link", body);
 
-            case 7:
+            case 8:
               data = _context4.sent;
-              onLinked === null || onLinked === void 0 ? void 0 : onLinked(data);
+              // El modo importa para quien escucha: en `children` este producto GANA
+              // variantes; en `parent` pasa a SER una. Son efectos opuestos sobre la
+              // misma ficha, así que quien refresque el estado necesita distinguirlos.
+              onLinked === null || onLinked === void 0 ? void 0 : onLinked((0, _objectSpread4.default)((0, _objectSpread4.default)({}, data), {}, {
+                mode: mode,
+                parentArticleId: mode === "parent" ? selected[0] : articleId
+              }));
               onClose === null || onClose === void 0 ? void 0 : onClose();
-              _context4.next = 15;
+              _context4.next = 16;
               break;
 
-            case 12:
-              _context4.prev = 12;
-              _context4.t0 = _context4["catch"](4);
+            case 13:
+              _context4.prev = 13;
+              _context4.t0 = _context4["catch"](5);
               setError(readError(_context4.t0));
 
-            case 15:
-              _context4.prev = 15;
+            case 16:
+              _context4.prev = 16;
               setLoading(false);
-              return _context4.finish(15);
+              return _context4.finish(16);
 
-            case 18:
+            case 19:
             case "end":
               return _context4.stop();
           }
         }
-      }, _callee4, null, [[4, 12, 15, 18]]);
+      }, _callee4, null, [[5, 13, 16, 19]]);
     }));
 
     return function submit() {
-      return _ref5.apply(this, arguments);
+      return _ref7.apply(this, arguments);
     };
   }();
 
@@ -467,7 +584,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
         }), step === "inherit" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Section, {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
-              children: "\xBFQu\xE9 se hereda del producto padre?"
+              children: "Atributos de la ficha t\xE9cnica"
             }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
               className: "choice",
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
@@ -477,9 +594,9 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
                   return setInheritMode("all-filled");
                 }
               }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-                children: ["Todos los atributos con valor", /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                children: ["Todos los que tienen valor", /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
                   className: "hint",
-                  children: [attributes.length, " atributo(s) con informaci\xF3n en el padre."]
+                  children: [offered.attributes.length, " atributo(s) con informaci\xF3n en el padre."]
                 })]
               })]
             }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
@@ -500,14 +617,14 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
           }), inheritMode === "selected" && activeRetailerId && !nameScope && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Message, {
             children: "El producto padre no comparte la cadena que tienes abierta, as\xED que los nombres de abajo son los de otra de sus cadenas."
           }), inheritMode === "selected" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.AttributeList, {
-            children: attributes.map(function (attribute) {
+            children: offered.attributes.map(function (attribute) {
               return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
                 children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
                   children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
                     type: "checkbox",
-                    checked: chosenAttributes.includes(attribute.id),
+                    checked: chosen.attributes.includes(attribute.id),
                     onChange: function onChange() {
-                      return toggleAttribute(attribute.id);
+                      return toggleChoice("attributes", attribute.id);
                     }
                   }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
                     children: [attribute.name, attribute.unconfigured && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -526,48 +643,176 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
               }, attribute.id);
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Section, {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
-              children: "Tambi\xE9n se hereda"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-              className: "choice",
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-                type: "checkbox",
-                checked: inheritImages,
-                onChange: function onChange() {
-                  return setInheritImages(function (value) {
-                    return !value;
-                  });
-                }
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                children: "Im\xE1genes"
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.SectionHead, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+                type: "button",
+                className: "toggle",
+                "aria-expanded": openSection === "descriptions",
+                onClick: function onClick() {
+                  return setOpenSection(openSection === "descriptions" ? null : "descriptions");
+                },
+                children: ["Descripciones", /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                  className: "count",
+                  children: [chosen.descriptions.length, " de", " ", offered.descriptions.length]
+                })]
+              }), offered.descriptions.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+                type: "button",
+                className: "all",
+                onClick: function onClick() {
+                  return toggleAll("descriptions", offered.descriptions.map(function (item) {
+                    return item.id;
+                  }));
+                },
+                children: chosen.descriptions.length === offered.descriptions.length ? "Ninguna" : "Todas"
               })]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-              className: "choice",
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-                type: "checkbox",
-                checked: inheritDescriptions,
-                onChange: function onChange() {
-                  return setInheritDescriptions(function (value) {
-                    return !value;
-                  });
-                }
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                children: "Descripciones"
+            }), openSection === "descriptions" && (offered.descriptions.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.AttributeList, {
+              children: offered.descriptions.map(function (item) {
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                      type: "checkbox",
+                      checked: chosen.descriptions.includes(item.id),
+                      onChange: function onChange() {
+                        return toggleChoice("descriptions", item.id);
+                      }
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                      children: item.name
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                      className: "value",
+                      title: item.value,
+                      children: item.value
+                    })]
+                  })
+                }, item.id);
+              })
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Message, {
+              children: "El producto padre no tiene descripciones."
+            }))]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Section, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.SectionHead, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+                type: "button",
+                className: "toggle",
+                "aria-expanded": openSection === "images",
+                onClick: function onClick() {
+                  return setOpenSection(openSection === "images" ? null : "images");
+                },
+                children: ["Im\xE1genes", /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                  className: "count",
+                  children: [chosen.images.length, " de ", offered.images.length]
+                })]
+              }), offered.images.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+                type: "button",
+                className: "all",
+                onClick: function onClick() {
+                  return toggleAll("images", offered.images.map(function (item) {
+                    return item.id;
+                  }));
+                },
+                children: chosen.images.length === offered.images.length ? "Ninguna" : "Todas"
               })]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-              className: "choice",
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-                type: "checkbox",
-                checked: inheritCategoryRetailers,
-                onChange: function onChange() {
-                  return setInheritCategoryRetailers(function (value) {
-                    return !value;
+            }), openSection === "images" && (offered.images.length ? /*#__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" : "",
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                    type: "checkbox",
+                    checked: chosen.images.includes(image.id),
+                    onChange: function onChange() {
+                      return toggleChoice("images", image.id);
+                    }
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                    src: image.src,
+                    alt: image.imageType || ""
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                    children: image.imageType || "Sin tipo"
+                  })]
+                }, image.id);
+              })
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Message, {
+              children: "El producto padre no tiene im\xE1genes."
+            }))]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Section, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.SectionHead, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+                type: "button",
+                className: "toggle",
+                "aria-expanded": openSection === "retailers",
+                onClick: function onClick() {
+                  return setOpenSection(openSection === "retailers" ? null : "retailers");
+                },
+                children: ["Cadenas y categor\xEDas", /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                  className: "count",
+                  children: [chosen.categoryRetailers.length, " seleccionada(s)"]
+                })]
+              })
+            }), openSection === "retailers" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.List, {
+                children: [].concat((0, _toConsumableArray2.default)(offered.categoryRetailers.map(function (item) {
+                  return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, item), {}, {
+                    clave: "".concat(item.retailerId, "-").concat(item.categoryId),
+                    delPadre: true
                   });
-                }
-              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-                children: ["Cadenas y categor\xEDas", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                  className: "hint",
-                  children: "Las parejas cadena-categor\xEDa del padre se copian a la variante."
+                })), (0, _toConsumableArray2.default)(extraRetailers.map(function (item) {
+                  return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, item), {}, {
+                    delPadre: false
+                  });
+                }))).map(function (item) {
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                        type: "checkbox",
+                        checked: chosen.categoryRetailers.includes(item.clave),
+                        onChange: function onChange() {
+                          return toggleChoice("categoryRetailers", item.clave);
+                        }
+                      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                        children: [item.retailerName, /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                          className: "meta",
+                          children: [item.categoryName || "Sin categoría", !item.delPadre && " · no la tiene el padre"]
+                        })]
+                      })]
+                    })
+                  }, item.clave);
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.AddRetailer, {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
+                  value: newRetailer,
+                  onChange: function onChange(event) {
+                    return setNewRetailer(event.target.value);
+                  },
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+                    value: "",
+                    children: "Agregar otra cadena\u2026"
+                  }), (retailersAvailable || []).map(function (item) {
+                    var _item$id3, _item$id4, _item$name;
+
+                    return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+                      value: (_item$id4 = item.id) !== null && _item$id4 !== void 0 ? _item$id4 : item.value,
+                      children: (_item$name = item.name) !== null && _item$name !== void 0 ? _item$name : item.label
+                    }, (_item$id3 = item.id) !== null && _item$id3 !== void 0 ? _item$id3 : item.value);
+                  })]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
+                  value: newCategory,
+                  onChange: function onChange(event) {
+                    return setNewCategory(event.target.value);
+                  },
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+                    value: "",
+                    children: "Categor\xEDa\u2026"
+                  }), (categoriesAvailable || []).map(function (item) {
+                    var _item$id5, _item$id6, _item$name2;
+
+                    return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+                      value: (_item$id6 = item.id) !== null && _item$id6 !== void 0 ? _item$id6 : item.value,
+                      children: (_item$name2 = item.name) !== null && _item$name2 !== void 0 ? _item$name2 : item.label
+                    }, (_item$id5 = item.id) !== null && _item$id5 !== void 0 ? _item$id5 : item.value);
+                  })]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+                  type: "button",
+                  onClick: addRetailer,
+                  disabled: !newRetailer || !newCategory,
+                  children: "Agregar"
                 })]
               })]
             })]
@@ -608,7 +853,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
             disabled: loading || // Solo estorba cuando hay algo que elegir y no se eligió nada.
             // Con el padre sin atributos heredables, ligar sigue siendo
             // válido: se heredan imágenes, descripciones y cadenas.
-            inheritMode === "selected" && attributes.length > 0 && !chosenAttributes.length,
+            inheritMode === "selected" && offered.attributes.length > 0 && !chosen.attributes.length,
             children: loading ? "Ligando…" : "Ligar"
           })]
         })]