contentoh-components-library 21.6.24 → 21.6.25
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/organisms/LinkVariantsModal/index.js +115 -63
- package/dist/components/organisms/LinkVariantsModal/styles.js +26 -16
- package/dist/components/pages/ProviderProductEdition/styles.js +4 -1
- package/package.json +1 -1
- package/src/components/organisms/LinkVariantsModal/index.js +133 -44
- package/src/components/organisms/LinkVariantsModal/styles.js +69 -49
- package/src/components/pages/ProviderProductEdition/styles.js +6 -3
|
@@ -182,9 +182,12 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
|
|
|
182
182
|
cuatro decisiones por producto. Al desmarcarlo aparecen las pestañas y cada
|
|
183
183
|
producto guarda su propia selección en `perChild`.
|
|
184
184
|
*/
|
|
185
|
+
// Desmarcado a propósito: aplicar la misma herencia a varios productos es una
|
|
186
|
+
// decisión, no un valor por omisión. Marcado de entrada se ligaban todos igual
|
|
187
|
+
// sin que nadie lo hubiera elegido.
|
|
185
188
|
|
|
186
189
|
|
|
187
|
-
var _useState29 = (0, _react.useState)(
|
|
190
|
+
var _useState29 = (0, _react.useState)(false),
|
|
188
191
|
_useState30 = (0, _slicedToArray2.default)(_useState29, 2),
|
|
189
192
|
applyToAll = _useState30[0],
|
|
190
193
|
setApplyToAll = _useState30[1];
|
|
@@ -199,53 +202,68 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
|
|
|
199
202
|
perChild = _useState34[0],
|
|
200
203
|
setPerChild = _useState34[1]; // Cadenas que el padre NO tiene y el usuario decidió agregar a la variante.
|
|
201
204
|
|
|
205
|
+
/*
|
|
206
|
+
Imágenes que la base lista pero cuyo archivo no está en S3.
|
|
207
|
+
Pasa: hay filas de rel_article_image con un src válido que apunta a un objeto
|
|
208
|
+
que ya no existe —comprobado, CloudFront responde 404—. Sin esto el paso 4
|
|
209
|
+
muestra una tarjeta rota, con el texto alternativo donde debería ir la foto, y
|
|
210
|
+
deja marcar para heredar algo que no se puede heredar.
|
|
211
|
+
No se puede saber desde el servidor sin ir a S3 por cada imagen, así que se
|
|
212
|
+
detecta al fallar la carga y se descuenta de la lista y del conteo.
|
|
213
|
+
*/
|
|
214
|
+
|
|
202
215
|
|
|
203
216
|
var _useState35 = (0, _react.useState)([]),
|
|
204
217
|
_useState36 = (0, _slicedToArray2.default)(_useState35, 2),
|
|
205
|
-
|
|
206
|
-
|
|
218
|
+
brokenImages = _useState36[0],
|
|
219
|
+
setBrokenImages = _useState36[1];
|
|
207
220
|
|
|
208
|
-
var _useState37 = (0, _react.useState)(
|
|
221
|
+
var _useState37 = (0, _react.useState)([]),
|
|
209
222
|
_useState38 = (0, _slicedToArray2.default)(_useState37, 2),
|
|
210
|
-
|
|
211
|
-
|
|
223
|
+
extraRetailers = _useState38[0],
|
|
224
|
+
setExtraRetailers = _useState38[1];
|
|
212
225
|
|
|
213
226
|
var _useState39 = (0, _react.useState)(""),
|
|
214
227
|
_useState40 = (0, _slicedToArray2.default)(_useState39, 2),
|
|
215
|
-
|
|
216
|
-
|
|
228
|
+
newRetailer = _useState40[0],
|
|
229
|
+
setNewRetailer = _useState40[1];
|
|
217
230
|
|
|
218
231
|
var _useState41 = (0, _react.useState)(""),
|
|
219
232
|
_useState42 = (0, _slicedToArray2.default)(_useState41, 2),
|
|
220
|
-
|
|
221
|
-
|
|
233
|
+
newDepartment = _useState42[0],
|
|
234
|
+
setNewDepartment = _useState42[1];
|
|
235
|
+
|
|
236
|
+
var _useState43 = (0, _react.useState)(""),
|
|
237
|
+
_useState44 = (0, _slicedToArray2.default)(_useState43, 2),
|
|
238
|
+
newCategory = _useState44[0],
|
|
239
|
+
setNewCategory = _useState44[1]; // Las categorías no son una lista plana: dependen de la cadena y del
|
|
222
240
|
// departamento. Es la misma cascada que usa el alta de productos, y se sirve
|
|
223
241
|
// del mismo endpoint para no acabar con dos árboles de categorías distintos.
|
|
224
242
|
|
|
225
243
|
|
|
226
|
-
var
|
|
244
|
+
var _useState45 = (0, _react.useState)({
|
|
227
245
|
retailers: [],
|
|
228
246
|
departments: [],
|
|
229
247
|
categories: []
|
|
230
248
|
}),
|
|
231
|
-
_useState44 = (0, _slicedToArray2.default)(_useState43, 2),
|
|
232
|
-
filters = _useState44[0],
|
|
233
|
-
setFilters = _useState44[1];
|
|
234
|
-
|
|
235
|
-
var _useState45 = (0, _react.useState)(false),
|
|
236
249
|
_useState46 = (0, _slicedToArray2.default)(_useState45, 2),
|
|
237
|
-
|
|
238
|
-
|
|
250
|
+
filters = _useState46[0],
|
|
251
|
+
setFilters = _useState46[1];
|
|
239
252
|
|
|
240
253
|
var _useState47 = (0, _react.useState)(false),
|
|
241
254
|
_useState48 = (0, _slicedToArray2.default)(_useState47, 2),
|
|
242
|
-
|
|
243
|
-
|
|
255
|
+
loadingFilters = _useState48[0],
|
|
256
|
+
setLoadingFilters = _useState48[1];
|
|
244
257
|
|
|
245
|
-
var _useState49 = (0, _react.useState)(
|
|
258
|
+
var _useState49 = (0, _react.useState)(false),
|
|
246
259
|
_useState50 = (0, _slicedToArray2.default)(_useState49, 2),
|
|
247
|
-
|
|
248
|
-
|
|
260
|
+
loading = _useState50[0],
|
|
261
|
+
setLoading = _useState50[1];
|
|
262
|
+
|
|
263
|
+
var _useState51 = (0, _react.useState)(null),
|
|
264
|
+
_useState52 = (0, _slicedToArray2.default)(_useState51, 2),
|
|
265
|
+
error = _useState52[0],
|
|
266
|
+
setError = _useState52[1];
|
|
249
267
|
|
|
250
268
|
var request = (0, _react.useCallback)( /*#__PURE__*/function () {
|
|
251
269
|
var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(action, body) {
|
|
@@ -456,29 +474,30 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
|
|
|
456
474
|
images: null
|
|
457
475
|
});
|
|
458
476
|
setExtraRetailers([]);
|
|
477
|
+
setBrokenImages([]);
|
|
459
478
|
setPerChild({});
|
|
460
|
-
setApplyToAll(
|
|
479
|
+
setApplyToAll(false);
|
|
461
480
|
setActiveChild(mode === "children" ? selected[0] : null);
|
|
462
481
|
setStep("inherit");
|
|
463
|
-
_context4.next =
|
|
482
|
+
_context4.next = 22;
|
|
464
483
|
break;
|
|
465
484
|
|
|
466
|
-
case
|
|
467
|
-
_context4.prev =
|
|
485
|
+
case 19:
|
|
486
|
+
_context4.prev = 19;
|
|
468
487
|
_context4.t0 = _context4["catch"](2);
|
|
469
488
|
setError(readError(_context4.t0));
|
|
470
489
|
|
|
471
|
-
case
|
|
472
|
-
_context4.prev =
|
|
490
|
+
case 22:
|
|
491
|
+
_context4.prev = 22;
|
|
473
492
|
setLoading(false);
|
|
474
|
-
return _context4.finish(
|
|
493
|
+
return _context4.finish(22);
|
|
475
494
|
|
|
476
|
-
case
|
|
495
|
+
case 25:
|
|
477
496
|
case "end":
|
|
478
497
|
return _context4.stop();
|
|
479
498
|
}
|
|
480
499
|
}
|
|
481
|
-
}, _callee4, null, [[2,
|
|
500
|
+
}, _callee4, null, [[2, 19, 22, 25]]);
|
|
482
501
|
}));
|
|
483
502
|
|
|
484
503
|
return function goToInheritance() {
|
|
@@ -506,7 +525,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
|
|
|
506
525
|
|
|
507
526
|
var loadFilters = (0, _react.useCallback)( /*#__PURE__*/function () {
|
|
508
527
|
var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5(retailer, department) {
|
|
509
|
-
var
|
|
528
|
+
var _readPayload$data, _readPayload, res, lista;
|
|
510
529
|
|
|
511
530
|
return _regenerator.default.wrap(function _callee5$(_context5) {
|
|
512
531
|
while (1) {
|
|
@@ -523,8 +542,10 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
|
|
|
523
542
|
|
|
524
543
|
case 4:
|
|
525
544
|
res = _context5.sent;
|
|
526
|
-
|
|
527
|
-
|
|
545
|
+
// readPayload YA devuelve el cuerpo parseado. Volver a buscar `body`
|
|
546
|
+
// dentro dejaba la lista siempre vacía, y por eso el selector de cadenas
|
|
547
|
+
// no mostraba nada.
|
|
548
|
+
lista = (_readPayload$data = (_readPayload = (0, _api.readPayload)(res)) === null || _readPayload === void 0 ? void 0 : _readPayload.data) !== null && _readPayload$data !== void 0 ? _readPayload$data : [];
|
|
528
549
|
setFilters(function (current) {
|
|
529
550
|
if (!retailer) {
|
|
530
551
|
return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, current), {}, {
|
|
@@ -558,25 +579,25 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
|
|
|
558
579
|
})
|
|
559
580
|
});
|
|
560
581
|
});
|
|
561
|
-
_context5.next =
|
|
582
|
+
_context5.next = 12;
|
|
562
583
|
break;
|
|
563
584
|
|
|
564
|
-
case
|
|
565
|
-
_context5.prev =
|
|
585
|
+
case 9:
|
|
586
|
+
_context5.prev = 9;
|
|
566
587
|
_context5.t0 = _context5["catch"](1);
|
|
567
588
|
console.error("linkVariants/filters: ", _context5.t0);
|
|
568
589
|
|
|
569
|
-
case
|
|
570
|
-
_context5.prev =
|
|
590
|
+
case 12:
|
|
591
|
+
_context5.prev = 12;
|
|
571
592
|
setLoadingFilters(false);
|
|
572
|
-
return _context5.finish(
|
|
593
|
+
return _context5.finish(12);
|
|
573
594
|
|
|
574
|
-
case
|
|
595
|
+
case 15:
|
|
575
596
|
case "end":
|
|
576
597
|
return _context5.stop();
|
|
577
598
|
}
|
|
578
599
|
}
|
|
579
|
-
}, _callee5, null, [[1,
|
|
600
|
+
}, _callee5, null, [[1, 9, 12, 15]]);
|
|
580
601
|
}));
|
|
581
602
|
|
|
582
603
|
return function (_x4, _x5) {
|
|
@@ -636,8 +657,14 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
|
|
|
636
657
|
Las parejas cadena+categoría viajan como objetos, no como ids, porque pueden
|
|
637
658
|
ser cadenas que el padre no tiene: ahí no hay nada que heredar, se asigna.
|
|
638
659
|
*/
|
|
660
|
+
// Las que de verdad se pueden heredar: la base puede listar filas cuyo archivo
|
|
661
|
+
// ya no existe, y esas no cuentan ni para la lista ni para el "todas".
|
|
639
662
|
|
|
640
663
|
|
|
664
|
+
var imagenesUtiles = offered.images.filter(function (image) {
|
|
665
|
+
return !brokenImages.includes(image.id);
|
|
666
|
+
});
|
|
667
|
+
|
|
641
668
|
var buildInherit = function buildInherit(seleccion) {
|
|
642
669
|
var _seleccion$extraRetai;
|
|
643
670
|
|
|
@@ -654,9 +681,9 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
|
|
|
654
681
|
images: seleccion.modes.images === "all" ? "all" : seleccion.chosen.images,
|
|
655
682
|
categoryRetailers: parejas.filter(function (par) {
|
|
656
683
|
return seleccion.chosen.categoryRetailers.includes(par.clave);
|
|
657
|
-
}).map(function (
|
|
658
|
-
var retailerId =
|
|
659
|
-
categoryId =
|
|
684
|
+
}).map(function (_ref7) {
|
|
685
|
+
var retailerId = _ref7.retailerId,
|
|
686
|
+
categoryId = _ref7.categoryId;
|
|
660
687
|
return {
|
|
661
688
|
retailerId: retailerId,
|
|
662
689
|
categoryId: categoryId
|
|
@@ -706,7 +733,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
|
|
|
706
733
|
};
|
|
707
734
|
|
|
708
735
|
var submit = /*#__PURE__*/function () {
|
|
709
|
-
var
|
|
736
|
+
var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6() {
|
|
710
737
|
var inherit, inheritByChild, body, data;
|
|
711
738
|
return _regenerator.default.wrap(function _callee6$(_context6) {
|
|
712
739
|
while (1) {
|
|
@@ -780,14 +807,21 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
|
|
|
780
807
|
}));
|
|
781
808
|
|
|
782
809
|
return function submit() {
|
|
783
|
-
return
|
|
810
|
+
return _ref8.apply(this, arguments);
|
|
784
811
|
};
|
|
785
812
|
}(); // Una dimensión está decidida si el usuario eligió un modo, o si el padre no
|
|
786
813
|
// ofrece nada en ella —no se puede pedir que decida sobre una lista vacía—.
|
|
787
814
|
|
|
788
815
|
|
|
789
816
|
var decidida = function decidida(dimension) {
|
|
790
|
-
|
|
817
|
+
if (modes[dimension] !== null) return true;
|
|
818
|
+
|
|
819
|
+
if (dimension === "categoryRetailers") {
|
|
820
|
+
return offered.categoryRetailers.length === 0 && extraRetailers.length === 0;
|
|
821
|
+
} // Una imagen cuyo archivo no existe no es algo sobre lo que se pueda decidir.
|
|
822
|
+
|
|
823
|
+
|
|
824
|
+
return dimension === "images" ? imagenesUtiles.length === 0 : offered[dimension].length === 0;
|
|
791
825
|
};
|
|
792
826
|
|
|
793
827
|
var DIMENSIONES = ["categoryRetailers", "descriptions", "attributes", "images"]; // Con pestañas, que la que estoy viendo esté completa no basta: ligar escribe
|
|
@@ -802,22 +836,27 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
|
|
|
802
836
|
} : perChild[id];
|
|
803
837
|
if (!guardado) return false;
|
|
804
838
|
return DIMENSIONES.every(function (dimension) {
|
|
805
|
-
var _guardado$extraRetail2;
|
|
806
|
-
|
|
807
839
|
if (guardado.modes[dimension] !== null) return true;
|
|
808
|
-
|
|
840
|
+
|
|
841
|
+
if (dimension === "categoryRetailers") {
|
|
842
|
+
var _guardado$extraRetail2;
|
|
843
|
+
|
|
844
|
+
return offered.categoryRetailers.length === 0 && ((_guardado$extraRetail2 = guardado.extraRetailers) !== null && _guardado$extraRetail2 !== void 0 ? _guardado$extraRetail2 : []).length === 0;
|
|
845
|
+
}
|
|
846
|
+
|
|
847
|
+
return dimension === "images" ? imagenesUtiles.length === 0 : offered[dimension].length === 0;
|
|
809
848
|
});
|
|
810
849
|
};
|
|
811
850
|
|
|
812
851
|
var todoDecidido = step === "inherit" && (applyToAll || mode !== "children" ? DIMENSIONES.every(decidida) : selected.every(decididoPara));
|
|
813
|
-
var faltantes = [["categoryRetailers", "cadenas"], ["descriptions", "descripciones"], ["attributes", "atributos"], ["images", "imágenes"]].filter(function (
|
|
814
|
-
var
|
|
815
|
-
clave =
|
|
852
|
+
var faltantes = [["categoryRetailers", "cadenas"], ["descriptions", "descripciones"], ["attributes", "atributos"], ["images", "imágenes"]].filter(function (_ref9) {
|
|
853
|
+
var _ref10 = (0, _slicedToArray2.default)(_ref9, 1),
|
|
854
|
+
clave = _ref10[0];
|
|
816
855
|
|
|
817
856
|
return !decidida(clave);
|
|
818
|
-
}).map(function (
|
|
819
|
-
var
|
|
820
|
-
nombre =
|
|
857
|
+
}).map(function (_ref11) {
|
|
858
|
+
var _ref12 = (0, _slicedToArray2.default)(_ref11, 2),
|
|
859
|
+
nombre = _ref12[1];
|
|
821
860
|
|
|
822
861
|
return nombre;
|
|
823
862
|
});
|
|
@@ -964,6 +1003,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
|
|
|
964
1003
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
|
|
965
1004
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
|
|
966
1005
|
type: "radio",
|
|
1006
|
+
name: "categoryRetailers-".concat(activeChild !== null && activeChild !== void 0 ? activeChild : "todos"),
|
|
967
1007
|
checked: modes.categoryRetailers === "all",
|
|
968
1008
|
onChange: function onChange() {
|
|
969
1009
|
return chooseMode("categoryRetailers", "all", offered.categoryRetailers.map(function (item) {
|
|
@@ -979,6 +1019,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
|
|
|
979
1019
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
|
|
980
1020
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
|
|
981
1021
|
type: "radio",
|
|
1022
|
+
name: "categoryRetailers-".concat(activeChild !== null && activeChild !== void 0 ? activeChild : "todos"),
|
|
982
1023
|
checked: modes.categoryRetailers === "some",
|
|
983
1024
|
onChange: function onChange() {
|
|
984
1025
|
return chooseMode("categoryRetailers", "some", []);
|
|
@@ -1093,6 +1134,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
|
|
|
1093
1134
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
|
|
1094
1135
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
|
|
1095
1136
|
type: "radio",
|
|
1137
|
+
name: "descriptions-".concat(activeChild !== null && activeChild !== void 0 ? activeChild : "todos"),
|
|
1096
1138
|
checked: modes.descriptions === "all",
|
|
1097
1139
|
onChange: function onChange() {
|
|
1098
1140
|
return chooseMode("descriptions", "all", offered.descriptions.map(function (item) {
|
|
@@ -1108,6 +1150,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
|
|
|
1108
1150
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
|
|
1109
1151
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
|
|
1110
1152
|
type: "radio",
|
|
1153
|
+
name: "descriptions-".concat(activeChild !== null && activeChild !== void 0 ? activeChild : "todos"),
|
|
1111
1154
|
checked: modes.descriptions === "some",
|
|
1112
1155
|
onChange: function onChange() {
|
|
1113
1156
|
return chooseMode("descriptions", "some", []);
|
|
@@ -1158,6 +1201,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
|
|
|
1158
1201
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
|
|
1159
1202
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
|
|
1160
1203
|
type: "radio",
|
|
1204
|
+
name: "attributes-".concat(activeChild !== null && activeChild !== void 0 ? activeChild : "todos"),
|
|
1161
1205
|
checked: modes.attributes === "all",
|
|
1162
1206
|
onChange: function onChange() {
|
|
1163
1207
|
return chooseMode("attributes", "all", offered.attributes.map(function (item) {
|
|
@@ -1173,6 +1217,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
|
|
|
1173
1217
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
|
|
1174
1218
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
|
|
1175
1219
|
type: "radio",
|
|
1220
|
+
name: "attributes-".concat(activeChild !== null && activeChild !== void 0 ? activeChild : "todos"),
|
|
1176
1221
|
checked: modes.attributes === "some",
|
|
1177
1222
|
onChange: function onChange() {
|
|
1178
1223
|
return chooseMode("attributes", "some", []);
|
|
@@ -1223,26 +1268,28 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
|
|
|
1223
1268
|
className: "paso",
|
|
1224
1269
|
children: "4"
|
|
1225
1270
|
}), " Im\xE1genes"]
|
|
1226
|
-
}),
|
|
1271
|
+
}), imagenesUtiles.length ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
1227
1272
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Choices, {
|
|
1228
1273
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
|
|
1229
1274
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
|
|
1230
1275
|
type: "radio",
|
|
1276
|
+
name: "images-".concat(activeChild !== null && activeChild !== void 0 ? activeChild : "todos"),
|
|
1231
1277
|
checked: modes.images === "all",
|
|
1232
1278
|
onChange: function onChange() {
|
|
1233
|
-
return chooseMode("images", "all",
|
|
1279
|
+
return chooseMode("images", "all", imagenesUtiles.map(function (item) {
|
|
1234
1280
|
return item.id;
|
|
1235
1281
|
}));
|
|
1236
1282
|
}
|
|
1237
1283
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
|
|
1238
1284
|
children: ["Todas", /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
|
|
1239
1285
|
className: "hint",
|
|
1240
|
-
children: [
|
|
1286
|
+
children: [imagenesUtiles.length, " imagen(es) en el padre."]
|
|
1241
1287
|
})]
|
|
1242
1288
|
})]
|
|
1243
1289
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
|
|
1244
1290
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
|
|
1245
1291
|
type: "radio",
|
|
1292
|
+
name: "images-".concat(activeChild !== null && activeChild !== void 0 ? activeChild : "todos"),
|
|
1246
1293
|
checked: modes.images === "some",
|
|
1247
1294
|
onChange: function onChange() {
|
|
1248
1295
|
return chooseMode("images", "some", []);
|
|
@@ -1255,7 +1302,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
|
|
|
1255
1302
|
})]
|
|
1256
1303
|
})]
|
|
1257
1304
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ImageGrid, {
|
|
1258
|
-
children:
|
|
1305
|
+
children: imagenesUtiles.map(function (image) {
|
|
1259
1306
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
|
|
1260
1307
|
className: [chosen.images.includes(image.id) ? "picked" : "", modes.images === "all" ? "locked" : ""].filter(Boolean).join(" "),
|
|
1261
1308
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
|
|
@@ -1267,7 +1314,12 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
|
|
|
1267
1314
|
}
|
|
1268
1315
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
|
|
1269
1316
|
src: (0, _helper.getProductImage)(image.src),
|
|
1270
|
-
alt:
|
|
1317
|
+
alt: "",
|
|
1318
|
+
onError: function onError() {
|
|
1319
|
+
return setBrokenImages(function (current) {
|
|
1320
|
+
return current.includes(image.id) ? current : [].concat((0, _toConsumableArray2.default)(current), [image.id]);
|
|
1321
|
+
});
|
|
1322
|
+
}
|
|
1271
1323
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
1272
1324
|
children: image.imageType || "Sin tipo de toma"
|
|
1273
1325
|
})]
|
|
@@ -17,68 +17,78 @@ var _variables = require("../../../global-files/variables");
|
|
|
17
17
|
|
|
18
18
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
|
|
19
19
|
|
|
20
|
+
// Rosa ContentOh. Va aquí y no en variables.js porque cambiar la constante
|
|
21
|
+
// global tocaría todos los componentes que ya la usan; este modal es lo que hay
|
|
22
|
+
// que alinear con la marca.
|
|
23
|
+
var PINK = "#E13AA8";
|
|
24
|
+
var PINK_RGB = "225, 58, 168"; // accent-color pinta el relleno de checkboxes y radios con el color de marca en
|
|
25
|
+
// vez del azul del sistema, sin reemplazarlos por divs: siguen siendo controles
|
|
26
|
+
// nativos, con su foco y su navegación por teclado intactos.
|
|
27
|
+
|
|
28
|
+
var controls = "\n input[type=\"checkbox\"],\n input[type=\"radio\"] {\n accent-color: ".concat(PINK, ";\n width: 15px;\n height: 15px;\n cursor: pointer;\n }\n");
|
|
29
|
+
|
|
20
30
|
var Overlay = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: fixed;\n inset: 0;\n z-index: 100;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgba(40, 31, 51, 0.45);\n"])));
|
|
21
31
|
|
|
22
32
|
exports.Overlay = Overlay;
|
|
23
33
|
|
|
24
|
-
var Panel = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n width: min(680px, 92vw);\n max-height: 86vh;\n border-radius: 10px;\n background-color: ", ";\n font-family: ", ";\n overflow: hidden;\n"])), _variables.GlobalColors.white, _variables.FontFamily.Raleway);
|
|
34
|
+
var Panel = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n display: flex;\n flex-direction: column;\n width: min(680px, 92vw);\n max-height: 86vh;\n border-radius: 10px;\n background-color: ", ";\n font-family: ", ";\n overflow: hidden;\n"])), controls, _variables.GlobalColors.white, _variables.FontFamily.Raleway);
|
|
25
35
|
|
|
26
36
|
exports.Panel = Panel;
|
|
27
37
|
|
|
28
|
-
var Header = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 16px;\n padding: 20px 24px 12px;\n\n h2 {\n margin: 0;\n font-family: ", ";\n font-size:
|
|
38
|
+
var Header = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 16px;\n padding: 20px 24px 12px;\n\n h2 {\n margin: 0;\n font-family: ", ";\n font-size: 17px;\n color: ", ";\n }\n\n p {\n margin: 4px 0 0;\n font-size: 13px;\n color: ", ";\n }\n\n .close {\n border: none;\n background: none;\n cursor: pointer;\n font-size: 21px;\n line-height: 1;\n color: ", ";\n }\n"])), _variables.FontFamily.Raleway_700, _variables.GlobalColors.deep_gray, _variables.GlobalColors.gray, _variables.GlobalColors.gray);
|
|
29
39
|
|
|
30
40
|
exports.Header = Header;
|
|
31
41
|
|
|
32
|
-
var ModeSwitch = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 8px;\n padding: 0 24px 16px;\n\n button {\n flex: 1;\n padding: 10px 12px;\n border-radius: 6px;\n border: 1px solid ", ";\n background-color: ", ";\n font-family: ", ";\n font-size:
|
|
42
|
+
var ModeSwitch = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 8px;\n padding: 0 24px 16px;\n\n button {\n flex: 1;\n padding: 10px 12px;\n border-radius: 6px;\n border: 1px solid ", ";\n background-color: ", ";\n font-family: ", ";\n font-size: 13px;\n color: ", ";\n cursor: pointer;\n text-align: left;\n }\n\n button.active {\n border-color: ", ";\n color: ", ";\n background-color: rgba(", ", 0.08);\n }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.white, _variables.FontFamily.Raleway_600, _variables.GlobalColors.gray, PINK, PINK, PINK_RGB);
|
|
33
43
|
|
|
34
44
|
exports.ModeSwitch = ModeSwitch;
|
|
35
45
|
|
|
36
|
-
var Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n flex: 1;\n overflow-y: auto;\n padding: 0 24px;\n\n .apply-all {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n margin-bottom: 12px;\n padding: 10px 12px;\n border-radius: 6px;\n background-color: ", ";\n font-size:
|
|
46
|
+
var Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n flex: 1;\n overflow-y: auto;\n padding: 0 24px;\n\n .apply-all {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n margin-bottom: 12px;\n padding: 10px 12px;\n border-radius: 6px;\n background-color: ", ";\n font-size: 13px;\n color: ", ";\n cursor: pointer;\n }\n\n .apply-all .hint {\n display: block;\n font-size: 12px;\n color: ", ";\n }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.deep_gray, _variables.GlobalColors.gray);
|
|
37
47
|
|
|
38
48
|
exports.Body = Body;
|
|
39
49
|
|
|
40
|
-
var SearchRow = _styledComponents.default.form(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 8px;\n margin-bottom: 12px;\n\n input {\n flex: 1;\n height: 36px;\n padding: 0 12px;\n border: 1px solid ", ";\n border-radius: 6px;\n font-family: ", ";\n font-size:
|
|
50
|
+
var SearchRow = _styledComponents.default.form(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 8px;\n margin-bottom: 12px;\n\n input {\n flex: 1;\n height: 36px;\n padding: 0 12px;\n border: 1px solid ", ";\n border-radius: 6px;\n font-family: ", ";\n font-size: 13px;\n color: ", ";\n }\n\n button {\n height: 36px;\n padding: 0 18px;\n border: none;\n border-radius: 6px;\n background-color: ", ";\n color: ", ";\n font-family: ", ";\n font-size: 13px;\n cursor: pointer;\n }\n\n button:disabled {\n opacity: 0.5;\n cursor: default;\n }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.Raleway, _variables.GlobalColors.deep_gray, PINK, _variables.GlobalColors.white, _variables.FontFamily.Raleway_600);
|
|
41
51
|
|
|
42
52
|
exports.SearchRow = SearchRow;
|
|
43
53
|
|
|
44
|
-
var List = _styledComponents.default.ul(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n list-style: none;\n margin: 0 0 16px;\n padding: 0;\n border: 1px solid ", ";\n border-radius: 6px;\n\n li + li {\n border-top: 1px solid ", ";\n }\n\n label {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 12px;\n cursor: pointer;\n font-size:
|
|
54
|
+
var List = _styledComponents.default.ul(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n list-style: none;\n margin: 0 0 16px;\n padding: 0;\n border: 1px solid ", ";\n border-radius: 6px;\n\n li + li {\n border-top: 1px solid ", ";\n }\n\n label {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 12px;\n cursor: pointer;\n font-size: 13px;\n color: ", ";\n }\n\n .meta {\n display: block;\n font-size: 12px;\n color: ", ";\n }\n\n .logo {\n width: 24px;\n height: 24px;\n object-fit: contain;\n border-radius: 3px;\n flex-shrink: 0;\n }\n\n .count {\n margin-left: auto;\n font-size: 12px;\n color: ", ";\n white-space: nowrap;\n }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s2, _variables.GlobalColors.deep_gray, _variables.GlobalColors.gray, PINK);
|
|
45
55
|
|
|
46
56
|
exports.List = List;
|
|
47
|
-
var AttributeList = (0, _styledComponents.default)(List)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n max-height: 220px;\n overflow-y: auto;\n\n .note {\n display: block;\n font-size:
|
|
57
|
+
var AttributeList = (0, _styledComponents.default)(List)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n max-height: 220px;\n overflow-y: auto;\n\n .note {\n display: block;\n font-size: 11px;\n font-style: italic;\n color: ", ";\n }\n\n .value {\n margin-left: auto;\n max-width: 45%;\n font-size: 12px;\n color: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n"])), _variables.GlobalColors.gray, _variables.GlobalColors.gray);
|
|
48
58
|
exports.AttributeList = AttributeList;
|
|
49
59
|
|
|
50
|
-
var Section = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n margin-bottom: 16px;\n\n h3 {\n margin: 0 0 8px;\n font-family: ", ";\n font-size:
|
|
60
|
+
var Section = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n margin-bottom: 16px;\n\n h3 {\n margin: 0 0 8px;\n font-family: ", ";\n font-size: 14px;\n color: ", ";\n }\n\n label.choice {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 6px 0;\n font-size: 13px;\n color: ", ";\n cursor: pointer;\n }\n\n label.choice span.hint {\n display: block;\n font-size: 12px;\n color: ", ";\n }\n"])), _variables.FontFamily.Raleway_600, _variables.GlobalColors.deep_gray, _variables.GlobalColors.deep_gray, _variables.GlobalColors.gray);
|
|
51
61
|
|
|
52
62
|
exports.Section = Section;
|
|
53
63
|
|
|
54
|
-
var Message = _styledComponents.default.p(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0 0 12px;\n padding: 10px 12px;\n border-radius: 6px;\n font-size:
|
|
64
|
+
var Message = _styledComponents.default.p(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0 0 12px;\n padding: 10px 12px;\n border-radius: 6px;\n font-size: 13px;\n line-height: 1.4;\n background-color: ", ";\n color: ", ";\n\n &.error {\n background-color: rgba(", ", 0.1);\n color: ", ";\n }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.deep_gray, PINK_RGB, PINK);
|
|
55
65
|
|
|
56
66
|
exports.Message = Message;
|
|
57
67
|
|
|
58
|
-
var Footer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 16px 24px;\n border-top: 1px solid ", ";\n\n .summary {\n font-size:
|
|
68
|
+
var Footer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 16px 24px;\n border-top: 1px solid ", ";\n\n .summary {\n font-size: 13px;\n color: ", ";\n }\n\n .actions {\n display: flex;\n gap: 8px;\n margin-left: auto;\n }\n\n button {\n height: 36px;\n padding: 0 18px;\n border-radius: 6px;\n font-family: ", ";\n font-size: 13px;\n cursor: pointer;\n }\n\n button.secondary {\n border: 1px solid ", ";\n background-color: ", ";\n color: ", ";\n }\n\n button.primary {\n border: none;\n background-color: ", ";\n color: ", ";\n }\n\n button:disabled {\n opacity: 0.5;\n cursor: default;\n }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.gray, _variables.FontFamily.Raleway_600, _variables.GlobalColors.s2, _variables.GlobalColors.white, _variables.GlobalColors.gray, PINK, _variables.GlobalColors.white);
|
|
59
69
|
|
|
60
70
|
exports.Footer = Footer;
|
|
61
71
|
|
|
62
|
-
var ImageGrid = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));\n gap: 8px;\n margin-bottom: 16px;\n\n label {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 4px;\n padding: 6px;\n border: 1px solid ", ";\n border-radius: 6px;\n cursor: pointer;\n }\n\n label.picked {\n border-color: ", ";\n background-color: rgba(", ", 0.06);\n }\n\n label.locked {\n cursor: default;\n }\n\n label input {\n position: absolute;\n top: 8px;\n left: 8px;\n }\n\n label img {\n width: 100%;\n height: 72px;\n object-fit: contain;\n background-color: ", ";\n border-radius: 4px;\n }\n\n label span {\n font-size:
|
|
72
|
+
var ImageGrid = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));\n gap: 8px;\n margin-bottom: 16px;\n\n label {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 4px;\n padding: 6px;\n border: 1px solid ", ";\n border-radius: 6px;\n cursor: pointer;\n }\n\n label.picked {\n border-color: ", ";\n background-color: rgba(", ", 0.06);\n }\n\n label.locked {\n cursor: default;\n }\n\n label input {\n position: absolute;\n top: 8px;\n left: 8px;\n }\n\n label img {\n width: 100%;\n height: 72px;\n object-fit: contain;\n background-color: ", ";\n border-radius: 4px;\n }\n\n label span {\n font-size: 11px;\n color: ", ";\n text-align: center;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n"])), _variables.GlobalColors.s2, PINK, PINK_RGB, _variables.GlobalColors.s2, _variables.GlobalColors.gray);
|
|
63
73
|
|
|
64
74
|
exports.ImageGrid = ImageGrid;
|
|
65
75
|
|
|
66
|
-
var AddRetailer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 16px;\n\n select {\n flex: 1 1 140px;\n min-width: 0;\n height: 32px;\n padding: 0 8px;\n border: 1px solid ", ";\n border-radius: 6px;\n font-family: ", ";\n font-size:
|
|
76
|
+
var AddRetailer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 16px;\n\n select {\n flex: 1 1 140px;\n min-width: 0;\n height: 32px;\n padding: 0 8px;\n border: 1px solid ", ";\n border-radius: 6px;\n font-family: ", ";\n font-size: 13px;\n color: ", ";\n background-color: ", ";\n }\n\n button {\n height: 32px;\n padding: 0 14px;\n border: 1px solid ", ";\n border-radius: 6px;\n background: none;\n font-family: ", ";\n font-size: 13px;\n color: ", ";\n cursor: pointer;\n }\n\n select:disabled {\n opacity: 0.5;\n cursor: default;\n }\n\n button:disabled {\n opacity: 0.4;\n cursor: default;\n }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.Raleway, _variables.GlobalColors.deep_gray, _variables.GlobalColors.white, PINK, _variables.FontFamily.Raleway_600, PINK);
|
|
67
77
|
|
|
68
78
|
exports.AddRetailer = AddRetailer;
|
|
69
79
|
|
|
70
|
-
var Block = _styledComponents.default.section(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n margin-bottom: 20px;\n padding-bottom: 16px;\n border-bottom: 1px solid ", ";\n\n &:last-of-type {\n border-bottom: none;\n }\n\n h3 {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 0 0 8px;\n font-family: ", ";\n font-size:
|
|
80
|
+
var Block = _styledComponents.default.section(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n margin-bottom: 20px;\n padding-bottom: 16px;\n border-bottom: 1px solid ", ";\n\n &:last-of-type {\n border-bottom: none;\n }\n\n h3 {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 0 0 8px;\n font-family: ", ";\n font-size: 14px;\n color: ", ";\n }\n\n h3 .paso {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background-color: ", ";\n color: ", ";\n font-size: 11px;\n }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.Raleway_600, _variables.GlobalColors.deep_gray, PINK, _variables.GlobalColors.white);
|
|
71
81
|
|
|
72
82
|
exports.Block = Block;
|
|
73
83
|
|
|
74
|
-
var Choices = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n gap: 2px;\n margin-bottom: 10px;\n\n label {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 4px 0;\n font-size:
|
|
84
|
+
var Choices = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n gap: 2px;\n margin-bottom: 10px;\n\n label {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 4px 0;\n font-size: 13px;\n color: ", ";\n cursor: pointer;\n }\n\n label .hint {\n display: block;\n font-size: 12px;\n color: ", ";\n }\n"])), _variables.GlobalColors.deep_gray, _variables.GlobalColors.gray);
|
|
75
85
|
|
|
76
86
|
exports.Choices = Choices;
|
|
77
87
|
|
|
78
|
-
var Paging = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n margin: -8px 0 16px;\n font-family: ", ";\n font-size:
|
|
88
|
+
var Paging = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n margin: -8px 0 16px;\n font-family: ", ";\n font-size: 12px;\n color: ", ";\n\n button {\n border: 1px solid ", ";\n border-radius: 6px;\n background: none;\n padding: 5px 12px;\n cursor: pointer;\n font-family: ", ";\n font-size: 12px;\n color: ", ";\n }\n\n button:disabled {\n opacity: 0.5;\n cursor: default;\n }\n"])), _variables.FontFamily.Raleway_500, _variables.GlobalColors.gray, _variables.GlobalColors.s2, _variables.FontFamily.Raleway_600, PINK);
|
|
79
89
|
|
|
80
90
|
exports.Paging = Paging;
|
|
81
91
|
|
|
82
|
-
var Tabs = _styledComponents.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-bottom: 16px;\n padding-bottom: 12px;\n border-bottom: 1px solid ", ";\n\n button {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n max-width: 200px;\n padding: 6px 10px;\n border: 1px solid ", ";\n border-radius: 6px;\n background-color: ", ";\n cursor: pointer;\n font-family: ", ";\n font-size:
|
|
92
|
+
var Tabs = _styledComponents.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-bottom: 16px;\n padding-bottom: 12px;\n border-bottom: 1px solid ", ";\n\n button {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n max-width: 200px;\n padding: 6px 10px;\n border: 1px solid ", ";\n border-radius: 6px;\n background-color: ", ";\n cursor: pointer;\n font-family: ", ";\n font-size: 12px;\n color: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n button.active {\n border-color: ", ";\n color: ", ";\n background-color: rgba(", ", 0.08);\n }\n\n button .orden {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background-color: ", ";\n font-size: 10px;\n flex-shrink: 0;\n }\n\n button.active .orden {\n background-color: ", ";\n color: ", ";\n }\n\n button .listo {\n color: ", ";\n flex-shrink: 0;\n }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s2, _variables.GlobalColors.white, _variables.FontFamily.Raleway_500, _variables.GlobalColors.gray, PINK, PINK, PINK_RGB, _variables.GlobalColors.s2, PINK, _variables.GlobalColors.white, PINK);
|
|
83
93
|
|
|
84
94
|
exports.Tabs = Tabs;
|
|
@@ -15,9 +15,12 @@ var _variables = require("../../../global-files/variables");
|
|
|
15
15
|
|
|
16
16
|
var _templateObject;
|
|
17
17
|
|
|
18
|
+
// Rosa ContentOh, el mismo del modal de ligar productos.
|
|
19
|
+
var PINK = "#E13AA8";
|
|
20
|
+
|
|
18
21
|
var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n height: 100%;\n flex: 1;\n overflow: auto;\n\n .data-container {\n display: flex;\n flex: 0%;\n height: calc(100% - ", "px);\n .image-data-panel {\n width: 340px;\n\n & + * {\n margin-left: 10px;\n }\n }\n\n .product-information {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n\n .services-information-container {\n height: 100%;\n overflow: auto;\n }\n\n .image-services {\n aside {\n display: grid;\n grid-template-columns: repeat(auto-fill, 179px);\n column-gap: 15px;\n row-gap: 15px;\n padding: 20px;\n }\n }\n\n .commentary-box {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n padding: 10px;\n padding-left: 0;\n\n .commentary {\n display: flex;\n align-items: flex-end;\n\n .input-container {\n width: 500px;\n\n .quill {\n height: 100px;\n }\n\n & + * {\n margin-left: 5px;\n }\n }\n\n .buttons-box {\n display: flex;\n width: 210px;\n flex-wrap: wrap;\n\n .general-transparent-button {\n & + * {\n margin-top: 5px;\n }\n }\n\n .general-transparent-button,\n .general-green-button,\n .general-button-disabled {\n width: fit-content;\n min-width: 201px;\n height: 40px;\n }\n }\n }\n }\n\n .feedback-box {\n display: flex;\n }\n\n .required-inputs-message {\n font-family: ", ";\n font-size: 13px;\n color: ", ";\n padding: 10px;\n display: flex;\n align-items: center;\n\n p + * {\n margin-top: 10px;\n }\n\n button {\n min-width: fit-content;\n }\n }\n }\n }\n #modal-message-box {\n width: 400px;\n height: 100px;\n }\n .container {\n width: 100%;\n height: 90%;\n .dropzone {\n height: 100%;\n width: 100%;\n position: relative;\n transition: all 0.5s ease;\n\n &.drag-active {\n background-color: rgba(", ", 0.05);\n border: 2px dashed ", ";\n border-radius: 8px;\n\n aside {\n opacity: 0.3;\n pointer-events: none;\n }\n }\n\n .drag-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgba(", ", 0.1);\n border-radius: 8px;\n pointer-events: none;\n z-index: 10;\n\n p {\n font-family: ", ";\n font-size: 24px;\n font-weight: 600;\n color: ", ";\n text-align: center;\n padding: 20px;\n background-color: ", ";\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n }\n }\n }\n }\n .variants-actions {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 8px;\n\n .link-variants {\n border: 1px solid ", ";\n border-radius: 6px;\n background: none;\n padding: 6px 12px;\n font-family: ", ";\n font-size: 11px;\n color: ", ";\n cursor: pointer;\n }\n\n .variants-count {\n border: none;\n background: none;\n padding: 0;\n cursor: pointer;\n font-family: ", ";\n font-size: 11px;\n color: ", ";\n text-decoration: underline;\n }\n }\n\n .variants-family {\n display: flex;\n flex-direction: column;\n gap: 4px;\n margin-bottom: 10px;\n padding: 8px;\n border: 1px solid ", ";\n border-radius: 6px;\n\n .loading {\n margin: 0;\n font-family: ", ";\n font-size: 11px;\n color: ", ";\n }\n\n .family-row {\n display: flex;\n align-items: baseline;\n gap: 8px;\n padding: 6px 8px;\n border: none;\n border-radius: 4px;\n background: none;\n cursor: pointer;\n text-align: left;\n font-family: ", ";\n font-size: 12px;\n color: ", ";\n }\n\n .family-row:hover:not(:disabled) {\n background-color: ", ";\n }\n\n .family-row:disabled {\n cursor: default;\n opacity: 0.7;\n }\n\n .family-row .role {\n min-width: 96px;\n font-size: 10px;\n color: ", ";\n }\n\n .family-row.current .role {\n color: ", ";\n }\n\n .family-row .name {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .family-row .upc {\n font-size: 11px;\n color: ", ";\n }\n }\n"])), function (_ref) {
|
|
19
22
|
var headerTop = _ref.headerTop;
|
|
20
23
|
return headerTop;
|
|
21
|
-
}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.color_gray, _variables.GlobalColors.rgb_color_pink, _variables.GlobalColors.color_pink, _variables.GlobalColors.rgb_color_pink, _variables.FontFamily.AvenirNext, _variables.GlobalColors.color_pink, _variables.GlobalColors.white,
|
|
24
|
+
}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.color_gray, _variables.GlobalColors.rgb_color_pink, _variables.GlobalColors.color_pink, _variables.GlobalColors.rgb_color_pink, _variables.FontFamily.AvenirNext, _variables.GlobalColors.color_pink, _variables.GlobalColors.white, PINK, _variables.FontFamily.Raleway_600, PINK, _variables.FontFamily.Raleway_500, _variables.GlobalColors.gray, _variables.GlobalColors.s2, _variables.FontFamily.Raleway_500, _variables.GlobalColors.gray, _variables.FontFamily.Raleway_500, _variables.GlobalColors.deep_gray, _variables.GlobalColors.s2, PINK, _variables.GlobalColors.gray, _variables.GlobalColors.gray);
|
|
22
25
|
|
|
23
26
|
exports.Container = Container;
|