contentoh-components-library 21.6.49 → 21.6.50
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/.claude/launch.json +14 -0
- package/.env.test +1 -0
- package/dist/ai/prompts/attribute.prompt.js +28 -0
- package/dist/ai/prompts/description.prompt.js +33 -0
- package/dist/ai/schemas/attribute.schema.js +35 -0
- package/dist/ai/schemas/description.schema.js +27 -0
- package/dist/components/atoms/AssetPreview/AssetPreview.stories.js +118 -0
- package/dist/components/atoms/AssetPreview/index.js +150 -0
- package/dist/components/atoms/AssetPreview/styles.js +28 -0
- package/dist/components/atoms/IconFile/index.js +85 -2
- package/dist/components/atoms/IconFile/styles.js +1 -1
- package/dist/components/atoms/ProductImage/ProductImage.stories.js +70 -2
- package/dist/components/atoms/ProductImage/index.js +100 -27
- package/dist/components/atoms/ProductImage/styles.js +3 -1
- package/dist/components/molecules/EditionActiveImage/index.js +4 -2
- package/dist/components/molecules/GalleryAssetElement/GalleryAssetElement.stories.js +147 -0
- package/dist/components/molecules/GalleryAssetElement/index.js +178 -0
- package/dist/components/molecules/GalleryAssetElement/styles.js +26 -0
- package/dist/components/molecules/GalleryElement/index.js +13 -4
- package/dist/components/molecules/GalleryHeader/index.js +96 -24
- package/dist/components/molecules/GalleryHeader/styles.js +4 -1
- package/dist/components/molecules/GalleryTrayTabs/GalleryTrayTabs.stories.js +56 -0
- package/dist/components/molecules/GalleryTrayTabs/index.js +60 -0
- package/dist/components/molecules/GalleryTrayTabs/styles.js +20 -0
- package/dist/components/molecules/ImageSelector/index.js +1 -0
- package/dist/components/organisms/DigitalAssetsTray/DigitalAssetsTray.stories.js +171 -0
- package/dist/components/organisms/DigitalAssetsTray/index.js +211 -0
- package/dist/components/organisms/DigitalAssetsTray/styles.js +22 -0
- package/dist/components/organisms/ImagePreviewer/index.js +1 -0
- package/dist/components/organisms/ProductImageModal/index.js +3 -2
- package/dist/components/organisms/PropagateChangesModal/index.js +12 -1
- package/dist/components/organisms/PropagateChangesModal/non-propagable.js +45 -0
- package/dist/components/pages/ProviderProductEdition/index.js +11 -1
- package/dist/components/pages/RetailerProductEdition/context/provider-product-edition.context.js +330 -15
- package/dist/components/pages/RetailerProductEdition/context/provider-product-edition.reducer.js +12 -2
- package/dist/components/pages/RetailerProductEdition/index.js +605 -414
- package/dist/components/pages/RetailerProductEdition/stories/ImageEditor.stories.js +1 -0
- package/dist/components/pages/RetailerProductEdition/stories/TextEditor.stories.js +45 -145
- package/dist/global-files/data.js +16 -3
- package/dist/global-files/digital-assets/assetTypes.js +480 -0
- package/dist/global-files/digital-assets/assets.actions.js +64 -0
- package/dist/global-files/digital-assets/assets.adapter.js +304 -0
- package/dist/global-files/digital-assets/assets.mock.js +136 -0
- package/dist/global-files/digital-assets/assets.reducer.js +220 -0
- package/dist/global-files/digital-assets/uploadAssets.js +179 -0
- package/dist/global-files/digital-assets/useDigitalAssets.js +522 -0
- package/dist/index.js +142 -90
- package/docs/activos-digitales.md +273 -0
- package/package.json +1 -1
- package/src/components/atoms/AssetPreview/AssetPreview.stories.js +78 -0
- package/src/components/atoms/AssetPreview/index.js +119 -0
- package/src/components/atoms/AssetPreview/styles.js +190 -0
- package/src/components/atoms/IconFile/index.js +28 -1
- package/src/components/atoms/IconFile/styles.js +8 -0
- package/src/components/atoms/ProductImage/ProductImage.stories.js +38 -0
- package/src/components/atoms/ProductImage/index.js +95 -20
- package/src/components/atoms/ProductImage/styles.js +92 -7
- package/src/components/molecules/EditionActiveImage/index.js +2 -2
- package/src/components/molecules/GalleryAssetElement/GalleryAssetElement.stories.js +102 -0
- package/src/components/molecules/GalleryAssetElement/index.js +162 -0
- package/src/components/molecules/GalleryAssetElement/styles.js +159 -0
- package/src/components/molecules/GalleryElement/index.js +9 -0
- package/src/components/molecules/GalleryHeader/index.js +65 -13
- package/src/components/molecules/GalleryHeader/styles.js +2 -1
- package/src/components/molecules/GalleryTrayTabs/GalleryTrayTabs.stories.js +32 -0
- package/src/components/molecules/GalleryTrayTabs/index.js +41 -0
- package/src/components/molecules/GalleryTrayTabs/styles.js +52 -0
- package/src/components/molecules/ImageSelector/index.js +1 -0
- package/src/components/organisms/DigitalAssetsTray/DigitalAssetsTray.stories.js +101 -0
- package/src/components/organisms/DigitalAssetsTray/index.js +189 -0
- package/src/components/organisms/DigitalAssetsTray/styles.js +183 -0
- package/src/components/organisms/ImagePreviewer/index.js +1 -0
- package/src/components/organisms/ProductImageModal/index.js +1 -0
- package/src/components/organisms/PropagateChangesModal/index.js +11 -1
- package/src/components/organisms/PropagateChangesModal/non-propagable.js +29 -0
- package/src/components/pages/ProviderProductEdition/index.js +10 -1
- package/src/components/pages/RetailerProductEdition/context/provider-product-edition.context.jsx +201 -0
- package/src/components/pages/RetailerProductEdition/context/provider-product-edition.reducer.js +12 -0
- package/src/components/pages/RetailerProductEdition/index.js +366 -140
- package/src/components/pages/RetailerProductEdition/stories/ImageEditor.stories.js +1 -0
- package/src/components/pages/RetailerProductEdition/stories/TextEditor.stories.js +51 -104
- package/src/global-files/data.js +17 -2
- package/src/global-files/digital-assets/assetTypes.js +419 -0
- package/src/global-files/digital-assets/assets.actions.js +50 -0
- package/src/global-files/digital-assets/assets.adapter.js +229 -0
- package/src/global-files/digital-assets/assets.mock.js +122 -0
- package/src/global-files/digital-assets/assets.reducer.js +197 -0
- package/src/global-files/digital-assets/uploadAssets.js +109 -0
- package/src/global-files/digital-assets/useDigitalAssets.js +329 -0
- package/src/index.js +4 -0
|
@@ -0,0 +1,211 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.DigitalAssetsTray = void 0;
|
|
9
|
+
|
|
10
|
+
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
|
|
11
|
+
|
|
12
|
+
var _reactDropzone = require("react-dropzone");
|
|
13
|
+
|
|
14
|
+
var _styles = require("./styles");
|
|
15
|
+
|
|
16
|
+
var _GalleryAssetElement = require("../../molecules/GalleryAssetElement");
|
|
17
|
+
|
|
18
|
+
var _GalleryHeader = require("../../molecules/GalleryHeader");
|
|
19
|
+
|
|
20
|
+
var _ButtonV = require("../../atoms/ButtonV2");
|
|
21
|
+
|
|
22
|
+
var _assetTypes = require("../../../global-files/digital-assets/assetTypes");
|
|
23
|
+
|
|
24
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
25
|
+
|
|
26
|
+
var CHECK_ALL_ID = "check-all-assets";
|
|
27
|
+
var ITEM_SELECTOR = "[id^='gallery-asset-']";
|
|
28
|
+
/**
|
|
29
|
+
* Bandeja de activos digitales: soltar archivos, verlos, reetiquetarlos y
|
|
30
|
+
* quitarlos.
|
|
31
|
+
*
|
|
32
|
+
* Tiene su propio dropzone en vez de compartir el de las imágenes porque los
|
|
33
|
+
* formatos aceptados son distintos: mezclarlos dejaría soltar un PDF sobre la
|
|
34
|
+
* bandeja de fotos y un JPG sobre la de activos.
|
|
35
|
+
*
|
|
36
|
+
* No guarda ni sube nada. Recibe el estado ya armado por `useDigitalAssets`,
|
|
37
|
+
* así que cuando se defina el contrato del backend solo hay que conectarle las
|
|
38
|
+
* llamadas; la interfaz no cambia.
|
|
39
|
+
*/
|
|
40
|
+
|
|
41
|
+
var DigitalAssetsTray = function DigitalAssetsTray(_ref) {
|
|
42
|
+
var _ref$assets = _ref.assets,
|
|
43
|
+
assets = _ref$assets === void 0 ? [] : _ref$assets,
|
|
44
|
+
_ref$notices = _ref.notices,
|
|
45
|
+
notices = _ref$notices === void 0 ? [] : _ref$notices,
|
|
46
|
+
_ref$unsaved = _ref.unsaved,
|
|
47
|
+
unsaved = _ref$unsaved === void 0 ? {
|
|
48
|
+
nuevos: 0,
|
|
49
|
+
modificados: 0,
|
|
50
|
+
borrados: 0,
|
|
51
|
+
total: 0
|
|
52
|
+
} : _ref$unsaved,
|
|
53
|
+
_ref$remaining = _ref.remaining,
|
|
54
|
+
remaining = _ref$remaining === void 0 ? _assetTypes.MAX_ASSETS_PER_PRODUCT : _ref$remaining,
|
|
55
|
+
addFiles = _ref.addFiles,
|
|
56
|
+
removeAsset = _ref.removeAsset,
|
|
57
|
+
changeAssetType = _ref.changeAssetType,
|
|
58
|
+
clearNotices = _ref.clearNotices,
|
|
59
|
+
_ref$selectedAssets = _ref.selectedAssets,
|
|
60
|
+
selectedAssets = _ref$selectedAssets === void 0 ? [] : _ref$selectedAssets,
|
|
61
|
+
setSelectedAssets = _ref.setSelectedAssets,
|
|
62
|
+
setCheckAll = _ref.setCheckAll,
|
|
63
|
+
_ref$gridLayout = _ref.gridLayout,
|
|
64
|
+
gridLayout = _ref$gridLayout === void 0 ? false : _ref$gridLayout,
|
|
65
|
+
_ref$readOnly = _ref.readOnly,
|
|
66
|
+
readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
|
|
67
|
+
_ref$emptyMessage = _ref.emptyMessage,
|
|
68
|
+
emptyMessage = _ref$emptyMessage === void 0 ? "Este producto no tiene activos digitales" : _ref$emptyMessage;
|
|
69
|
+
|
|
70
|
+
var _useDropzone = (0, _reactDropzone.useDropzone)({
|
|
71
|
+
accept: (0, _assetTypes.buildDropzoneAccept)(),
|
|
72
|
+
noKeyboard: true,
|
|
73
|
+
multiple: true,
|
|
74
|
+
noClick: true,
|
|
75
|
+
disabled: readOnly,
|
|
76
|
+
onDrop: function onDrop(acceptedFiles) {
|
|
77
|
+
return addFiles === null || addFiles === void 0 ? void 0 : addFiles(acceptedFiles);
|
|
78
|
+
}
|
|
79
|
+
}),
|
|
80
|
+
getRootProps = _useDropzone.getRootProps,
|
|
81
|
+
getInputProps = _useDropzone.getInputProps,
|
|
82
|
+
isDragActive = _useDropzone.isDragActive,
|
|
83
|
+
open = _useDropzone.open;
|
|
84
|
+
|
|
85
|
+
var noticesBy = function noticesBy(level) {
|
|
86
|
+
return notices.filter(function (item) {
|
|
87
|
+
return item.level === level;
|
|
88
|
+
});
|
|
89
|
+
};
|
|
90
|
+
/*
|
|
91
|
+
Se desglosa en vez de mostrar solo el número: "3 cambios sin guardar" no le
|
|
92
|
+
dice al usuario qué perdería si se va, y no es lo mismo dejar sin guardar un
|
|
93
|
+
borrado que un archivo nuevo.
|
|
94
|
+
*/
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
var detalleSinGuardar = [unsaved.nuevos && "".concat(unsaved.nuevos, " nuevo").concat(unsaved.nuevos > 1 ? "s" : ""), unsaved.modificados && "".concat(unsaved.modificados, " modificado").concat(unsaved.modificados > 1 ? "s" : ""), unsaved.borrados && "".concat(unsaved.borrados, " por borrar")].filter(Boolean).join(" · ");
|
|
98
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
|
|
99
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
100
|
+
className: "tray-toolbar",
|
|
101
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
|
|
102
|
+
className: "tray-hint",
|
|
103
|
+
title: "Formatos permitidos: ".concat((0, _assetTypes.acceptedFormatsLabel)()),
|
|
104
|
+
children: ["Arrastra aqu\xED videos, 360, GIF, documentos, hojas de c\xE1lculo o archivos editables. Quedan ", remaining, " de ", _assetTypes.MAX_ASSETS_PER_PRODUCT, "."]
|
|
105
|
+
}), !readOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
|
|
106
|
+
label: "Agregar activos",
|
|
107
|
+
type: "pink",
|
|
108
|
+
size: 12,
|
|
109
|
+
onClick: open
|
|
110
|
+
})]
|
|
111
|
+
}), unsaved.total > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
112
|
+
className: "tray-unsaved",
|
|
113
|
+
role: "status",
|
|
114
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
115
|
+
className: "tray-unsaved-dot"
|
|
116
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
|
|
117
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("strong", {
|
|
118
|
+
children: [unsaved.total, " cambio", unsaved.total > 1 ? "s" : "", " sin guardar"]
|
|
119
|
+
}), detalleSinGuardar && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
|
|
120
|
+
className: "tray-unsaved-detail",
|
|
121
|
+
children: [" \u2014 ", detalleSinGuardar]
|
|
122
|
+
})]
|
|
123
|
+
})]
|
|
124
|
+
}), noticesBy("error").length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
125
|
+
className: "tray-notice tray-notice-error",
|
|
126
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
127
|
+
className: "tray-notice-head",
|
|
128
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
|
|
129
|
+
children: ["No se pudieron agregar ", noticesBy("error").length, " archivo(s):"]
|
|
130
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
|
|
131
|
+
type: "button",
|
|
132
|
+
onClick: clearNotices,
|
|
133
|
+
title: "Cerrar",
|
|
134
|
+
children: "\xD7"
|
|
135
|
+
})]
|
|
136
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
|
|
137
|
+
children: noticesBy("error").map(function (item, index) {
|
|
138
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
|
|
139
|
+
children: item.message
|
|
140
|
+
}, "err-".concat(item.name, "-").concat(index));
|
|
141
|
+
})
|
|
142
|
+
})]
|
|
143
|
+
}), noticesBy("warning").length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
144
|
+
className: "tray-notice tray-notice-warning",
|
|
145
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
146
|
+
className: "tray-notice-head",
|
|
147
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
|
|
148
|
+
children: "Se agregaron, pero ten en cuenta:"
|
|
149
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
|
|
150
|
+
type: "button",
|
|
151
|
+
onClick: clearNotices,
|
|
152
|
+
title: "Cerrar",
|
|
153
|
+
children: "\xD7"
|
|
154
|
+
})]
|
|
155
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
|
|
156
|
+
children: noticesBy("warning").map(function (item, index) {
|
|
157
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
|
|
158
|
+
children: item.message
|
|
159
|
+
}, "warn-".concat(item.name, "-").concat(index));
|
|
160
|
+
})
|
|
161
|
+
})]
|
|
162
|
+
}), !gridLayout && assets.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GalleryHeader.GalleryHeader, {
|
|
163
|
+
variant: "asset",
|
|
164
|
+
checkAllId: CHECK_ALL_ID,
|
|
165
|
+
itemSelector: ITEM_SELECTOR,
|
|
166
|
+
setCheckAll: setCheckAll,
|
|
167
|
+
setSelectedImages: setSelectedAssets
|
|
168
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, getRootProps({
|
|
169
|
+
className: "dropzone ".concat(isDragActive ? "drag-active" : "").trim()
|
|
170
|
+
})), {}, {
|
|
171
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", (0, _objectSpread2.default)({}, getInputProps())), isDragActive && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
172
|
+
className: "drag-overlay",
|
|
173
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
|
|
174
|
+
children: "Suelta los activos aqu\xED"
|
|
175
|
+
})
|
|
176
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("aside", {
|
|
177
|
+
className: gridLayout ? "tray-grid" : "tray-rows",
|
|
178
|
+
children: assets.map(function (asset, index) {
|
|
179
|
+
var _asset$id;
|
|
180
|
+
|
|
181
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GalleryAssetElement.GalleryAssetElement, {
|
|
182
|
+
asset: asset,
|
|
183
|
+
index: index,
|
|
184
|
+
gridLayout: gridLayout,
|
|
185
|
+
checkAllId: CHECK_ALL_ID,
|
|
186
|
+
itemSelector: ITEM_SELECTOR,
|
|
187
|
+
selectedAssets: selectedAssets,
|
|
188
|
+
setSelectedAssets: setSelectedAssets,
|
|
189
|
+
setCheckAll: setCheckAll,
|
|
190
|
+
changeAsset: function changeAsset(_ref2) {
|
|
191
|
+
var value = _ref2.value;
|
|
192
|
+
return changeAssetType === null || changeAssetType === void 0 ? void 0 : changeAssetType(index, value);
|
|
193
|
+
},
|
|
194
|
+
onRemove: removeAsset,
|
|
195
|
+
readOnly: readOnly
|
|
196
|
+
}, (_asset$id = asset.id) !== null && _asset$id !== void 0 ? _asset$id : asset.tempId);
|
|
197
|
+
})
|
|
198
|
+
}), assets.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
199
|
+
className: "tray-empty",
|
|
200
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
|
|
201
|
+
children: emptyMessage
|
|
202
|
+
}), !readOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
|
|
203
|
+
className: "tray-empty-hint",
|
|
204
|
+
children: "Arr\xE1stralos aqu\xED o usa \xABAgregar activos\xBB."
|
|
205
|
+
})]
|
|
206
|
+
})]
|
|
207
|
+
}))]
|
|
208
|
+
});
|
|
209
|
+
};
|
|
210
|
+
|
|
211
|
+
exports.DigitalAssetsTray = DigitalAssetsTray;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.Container = void 0;
|
|
9
|
+
|
|
10
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
|
|
11
|
+
|
|
12
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
13
|
+
|
|
14
|
+
var _variables = require("../../../global-files/variables");
|
|
15
|
+
|
|
16
|
+
var _templateObject;
|
|
17
|
+
|
|
18
|
+
/* El dropzone replica el de la bandeja de imágenes para que arrastrar se sienta
|
|
19
|
+
igual en las dos. */
|
|
20
|
+
var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 8px;\n\n .tray-toolbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n }\n\n .tray-hint {\n margin: 0;\n font-family: ", ";\n font-size: 12px;\n line-height: 18px;\n color: ", ";\n }\n\n /*\n Aviso de cambios sin guardar. Va arriba del listado y no junto al bot\xF3n de\n guardar, que vive en otra barra: el usuario mira la bandeja, no el men\xFA.\n */\n .tray-unsaved {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 12px;\n border-radius: 6px;\n border: 1px solid ", ";\n background: rgba(237, 154, 77, 0.08);\n\n p {\n margin: 0;\n font-family: ", ";\n font-size: 12px;\n line-height: 18px;\n color: ", ";\n }\n\n strong {\n font-family: ", ";\n color: ", ";\n }\n }\n\n .tray-unsaved-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: ", ";\n flex-shrink: 0;\n }\n\n .tray-unsaved-detail {\n color: ", ";\n }\n\n .tray-notice {\n border-radius: 6px;\n padding: 8px 12px;\n border: 1px solid;\n\n .tray-notice-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n p {\n margin: 0;\n font-family: ", ";\n font-size: 12px;\n }\n\n button {\n border: none;\n background: none;\n cursor: pointer;\n font-size: 16px;\n line-height: 1;\n color: inherit;\n }\n }\n\n ul {\n margin: 4px 0 0;\n padding-left: 18px;\n }\n\n li {\n font-family: ", ";\n font-size: 12px;\n line-height: 18px;\n color: ", ";\n }\n }\n\n /* Rojo = no entr\xF3. \xC1mbar = entr\xF3, pero hay algo que saber. */\n .tray-notice-error {\n border-color: ", ";\n background: rgba(", ", 0.05);\n color: ", ";\n }\n\n .tray-notice-warning {\n border-color: ", ";\n background: rgba(237, 154, 77, 0.08);\n color: ", ";\n }\n\n .dropzone {\n position: relative;\n width: 100%;\n min-height: 160px;\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 inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1;\n\n p {\n font-family: ", ";\n font-size: 16px;\n color: ", ";\n }\n }\n }\n\n .tray-rows {\n display: flex;\n flex-direction: column;\n }\n\n .tray-grid {\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n }\n\n .tray-empty {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n width: 80%;\n\n p {\n margin: 0;\n font-family: ", ";\n font-size: 16px;\n color: ", ";\n }\n\n .tray-empty-hint {\n margin-top: 6px;\n font-size: 13px;\n color: ", ";\n }\n }\n"])), _variables.FontFamily.Lato, _variables.GlobalColors.s4, _variables.GlobalColors.in_progress, _variables.FontFamily.Lato, _variables.GlobalColors.s5, _variables.FontFamily.Raleway_600, _variables.GlobalColors.in_progress, _variables.GlobalColors.in_progress, _variables.GlobalColors.s4, _variables.FontFamily.Raleway_600, _variables.FontFamily.Lato, _variables.GlobalColors.s5, _variables.GlobalColors.secondary_magenta, _variables.GlobalColors.rgb_color_pink, _variables.GlobalColors.secondary_magenta, _variables.GlobalColors.in_progress, _variables.GlobalColors.in_progress, _variables.GlobalColors.rgb_color_pink, _variables.GlobalColors.color_pink, _variables.FontFamily.AvenirNext, _variables.GlobalColors.color_pink, _variables.FontFamily.Lato, _variables.GlobalColors.gray, _variables.GlobalColors.s4);
|
|
21
|
+
|
|
22
|
+
exports.Container = Container;
|
|
@@ -23,6 +23,7 @@ var ImagePreviewer = function ImagePreviewer(_ref) {
|
|
|
23
23
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_EditionActiveImage.EditionActiveImage, {
|
|
24
24
|
img: activeImage === null || activeImage === void 0 ? void 0 : activeImage.src,
|
|
25
25
|
altText: activeImage === null || activeImage === void 0 ? void 0 : activeImage.name,
|
|
26
|
+
ext: activeImage === null || activeImage === void 0 ? void 0 : activeImage.ext,
|
|
26
27
|
setShowModal: setShowModal
|
|
27
28
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageSelector.ImageSelector, {
|
|
28
29
|
images: imagesArray,
|
|
@@ -26,7 +26,7 @@ var _GeneralButton = require("../../atoms/GeneralButton");
|
|
|
26
26
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
27
27
|
|
|
28
28
|
var ProductImageModal = function ProductImageModal(_ref) {
|
|
29
|
-
var _images$values$active, _images$values$active2, _images$values$active3;
|
|
29
|
+
var _images$values$active, _images$values$active2, _images$values$active3, _images$values$active4;
|
|
30
30
|
|
|
31
31
|
var _ref$images = _ref.images,
|
|
32
32
|
images = _ref$images === void 0 ? [] : _ref$images,
|
|
@@ -72,6 +72,7 @@ var ProductImageModal = function ProductImageModal(_ref) {
|
|
|
72
72
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductImage.ProductImage, {
|
|
73
73
|
img: "https://" + process.env.REACT_APP_IMAGES_BUCKET + ".s3.amazonaws.com/" + (images === null || images === void 0 ? void 0 : (_images$values$active = images.values[activeImage]) === null || _images$values$active === void 0 ? void 0 : _images$values$active.srcDB),
|
|
74
74
|
altText: images === null || images === void 0 ? void 0 : (_images$values$active2 = images.values[activeImage]) === null || _images$values$active2 === void 0 ? void 0 : _images$values$active2.name,
|
|
75
|
+
ext: images === null || images === void 0 ? void 0 : (_images$values$active3 = images.values[activeImage]) === null || _images$values$active3 === void 0 ? void 0 : _images$values$active3.ext,
|
|
75
76
|
imageType: "expanded-modal-image"
|
|
76
77
|
})
|
|
77
78
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
@@ -102,7 +103,7 @@ var ProductImageModal = function ProductImageModal(_ref) {
|
|
|
102
103
|
}
|
|
103
104
|
})]
|
|
104
105
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageDataTable.ImageDataTable, {
|
|
105
|
-
imageData: images === null || images === void 0 ? void 0 : (_images$values$
|
|
106
|
+
imageData: images === null || images === void 0 ? void 0 : (_images$values$active4 = images.values[activeImage]) === null || _images$values$active4 === void 0 ? void 0 : _images$values$active4.data,
|
|
106
107
|
headerInfo: headerInfo,
|
|
107
108
|
activeImage: images === null || images === void 0 ? void 0 : images.values[activeImage],
|
|
108
109
|
darkMode: true,
|
|
@@ -17,6 +17,8 @@ var _react = require("react");
|
|
|
17
17
|
|
|
18
18
|
var _styles = require("./styles");
|
|
19
19
|
|
|
20
|
+
var _nonPropagable = require("./non-propagable");
|
|
21
|
+
|
|
20
22
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
21
23
|
|
|
22
24
|
/*
|
|
@@ -46,7 +48,7 @@ var UMBRAL_SEGUNDO_PLANO = 20;
|
|
|
46
48
|
|
|
47
49
|
var PropagateChangesModal = function PropagateChangesModal(_ref) {
|
|
48
50
|
var _ref$changedAttribute = _ref.changedAttributes,
|
|
49
|
-
|
|
51
|
+
cambiosRecibidos = _ref$changedAttribute === void 0 ? [] : _ref$changedAttribute,
|
|
50
52
|
_ref$variants = _ref.variants,
|
|
51
53
|
variants = _ref$variants === void 0 ? [] : _ref$variants,
|
|
52
54
|
_ref$groupMembers = _ref.groupMembers,
|
|
@@ -58,6 +60,15 @@ var PropagateChangesModal = function PropagateChangesModal(_ref) {
|
|
|
58
60
|
_ref$saving = _ref.saving,
|
|
59
61
|
saving = _ref$saving === void 0 ? false : _ref$saving;
|
|
60
62
|
|
|
63
|
+
/*
|
|
64
|
+
Segundo filtro, a propósito redundante: quien llama ya debería quitarlos —de
|
|
65
|
+
eso depende que el diálogo no se abra por un cambio que no propaga nada—,
|
|
66
|
+
pero ofrecer el UPC y descartarlo en el servidor es exactamente el camino
|
|
67
|
+
por el que un usuario concluye que la propagación no sirve. Vale más
|
|
68
|
+
repetirlo aquí que confiar en que ningún llamador futuro lo olvide.
|
|
69
|
+
*/
|
|
70
|
+
var changedAttributes = (0, _nonPropagable.soloPropagables)(cambiosRecibidos);
|
|
71
|
+
|
|
61
72
|
var _useState = (0, _react.useState)([]),
|
|
62
73
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
63
74
|
chosenAttributes = _useState2[0],
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.soloPropagables = exports.UPC_ATTRIBUTE_ID = exports.SKU_ATTRIBUTE_ID = exports.NON_PROPAGABLE_ATTRIBUTES = void 0;
|
|
7
|
+
|
|
8
|
+
/*
|
|
9
|
+
Atributos que la propagación nunca copia.
|
|
10
|
+
|
|
11
|
+
UPC y SKU son la IDENTIDAD del producto, y una variante existe precisamente
|
|
12
|
+
porque la suya es distinta: el acuerdo lo dice literal —"cambian UPC/color/
|
|
13
|
+
talla"—. Bajarlos del padre dejaría dos productos con el mismo código de
|
|
14
|
+
barras, que es lo contrario de una variante.
|
|
15
|
+
|
|
16
|
+
El servidor ya los descarta y esa es la defensa de verdad: la exclusión vive
|
|
17
|
+
allá, no aquí, y aunque esta pantalla los mandara no se copiarían. Lo de este
|
|
18
|
+
archivo es otra cosa —que el diálogo no los OFREZCA—, porque ofrecer una
|
|
19
|
+
opción que se descarta en silencio es peor que no ofrecerla: el usuario elige
|
|
20
|
+
el UPC, guarda, no ve error, y concluye que la propagación está rota.
|
|
21
|
+
|
|
22
|
+
Los ids son los mismos que `variants/utils/constants.js` en el backend. Están
|
|
23
|
+
duplicados porque no hay un contrato compartido entre repos; si allá cambian,
|
|
24
|
+
aquí hay que cambiarlos.
|
|
25
|
+
*/
|
|
26
|
+
var UPC_ATTRIBUTE_ID = 683;
|
|
27
|
+
exports.UPC_ATTRIBUTE_ID = UPC_ATTRIBUTE_ID;
|
|
28
|
+
var SKU_ATTRIBUTE_ID = 40001;
|
|
29
|
+
exports.SKU_ATTRIBUTE_ID = SKU_ATTRIBUTE_ID;
|
|
30
|
+
var NON_PROPAGABLE_ATTRIBUTES = [UPC_ATTRIBUTE_ID, SKU_ATTRIBUTE_ID];
|
|
31
|
+
/**
|
|
32
|
+
* Quita de una lista de cambios los que no se pueden propagar.
|
|
33
|
+
* @param {Array<{id: number}>} cambios
|
|
34
|
+
*/
|
|
35
|
+
|
|
36
|
+
exports.NON_PROPAGABLE_ATTRIBUTES = NON_PROPAGABLE_ATTRIBUTES;
|
|
37
|
+
|
|
38
|
+
var soloPropagables = function soloPropagables() {
|
|
39
|
+
var cambios = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
40
|
+
return cambios.filter(function (c) {
|
|
41
|
+
return !NON_PROPAGABLE_ATTRIBUTES.includes(Number(c === null || c === void 0 ? void 0 : c.id));
|
|
42
|
+
});
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
exports.soloPropagables = soloPropagables;
|
|
@@ -73,6 +73,8 @@ var _VariantGroupModal = require("../../organisms/VariantGroupModal");
|
|
|
73
73
|
|
|
74
74
|
var _PropagateChangesModal = require("../../organisms/PropagateChangesModal");
|
|
75
75
|
|
|
76
|
+
var _nonPropagable = require("../../organisms/PropagateChangesModal/non-propagable");
|
|
77
|
+
|
|
76
78
|
var _api = require("../../organisms/LinkVariantsModal/api");
|
|
77
79
|
|
|
78
80
|
var _ProductImageModal = require("../../organisms/ProductImageModal");
|
|
@@ -858,7 +860,7 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
|
|
|
858
860
|
|
|
859
861
|
var retailerId = (_state$active_retaile2 = state.active_retailer) === null || _state$active_retaile2 === void 0 ? void 0 : _state$active_retaile2.id_retailer;
|
|
860
862
|
var inputs = (_state$services$datas = (_state$services = state.services) === null || _state$services === void 0 ? void 0 : (_state$services$datas2 = _state$services.datasheets) === null || _state$services$datas2 === void 0 ? void 0 : _state$services$datas2.inputs) !== null && _state$services$datas !== void 0 ? _state$services$datas : {};
|
|
861
|
-
|
|
863
|
+
var cambios = ((_state$updated_datash = state.updated_datasheets_inputs) !== null && _state$updated_datash !== void 0 ? _state$updated_datash : []).map(function (item) {
|
|
862
864
|
var _input$name;
|
|
863
865
|
|
|
864
866
|
var input = inputs["".concat(item.attributeId, "_").concat(retailerId)];
|
|
@@ -868,6 +870,14 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
|
|
|
868
870
|
value: item.value
|
|
869
871
|
};
|
|
870
872
|
});
|
|
873
|
+
/*
|
|
874
|
+
UPC y SKU se quitan aquí y no dentro del diálogo porque esta lista también
|
|
875
|
+
decide SI el diálogo se abre. Editar solo el UPC no tiene nada que
|
|
876
|
+
propagar, así que preguntarlo sería pedirle al usuario una decisión sobre
|
|
877
|
+
un conjunto vacío.
|
|
878
|
+
*/
|
|
879
|
+
|
|
880
|
+
return (0, _nonPropagable.soloPropagables)(cambios);
|
|
871
881
|
};
|
|
872
882
|
|
|
873
883
|
var handleOnClickSave = function handleOnClickSave() {
|