contentoh-components-library 21.6.31 → 21.6.33

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.
Files changed (31) hide show
  1. package/dist/ai/prompts/attribute.prompt.js +28 -0
  2. package/dist/ai/prompts/description.prompt.js +33 -0
  3. package/dist/ai/schemas/attribute.schema.js +35 -0
  4. package/dist/ai/schemas/description.schema.js +27 -0
  5. package/dist/components/atoms/InheritanceTag/InheritanceTag.stories.js +5 -5
  6. package/dist/components/atoms/InheritanceTag/index.js +6 -6
  7. package/dist/components/organisms/InputGroup/index.js +12 -1
  8. package/dist/components/organisms/LinkVariantsModal/index.js +269 -356
  9. package/dist/components/organisms/LinkVariantsModal/styles.js +14 -5
  10. package/dist/components/organisms/PropagateChangesModal/index.js +12 -13
  11. package/dist/components/pages/ProviderProductEdition/context/provider-product-edition.context.js +5 -5
  12. package/dist/components/pages/ProviderProductEdition/context/reducers/inputs.js +5 -2
  13. package/dist/components/pages/ProviderProductEdition/index.js +76 -33
  14. package/dist/components/pages/RetailerProductEdition/context/provider-product-edition.context.js +5 -5
  15. package/dist/components/pages/RetailerProductEdition/context/reducers/inputs.js +5 -2
  16. package/dist/components/pages/RetailerProductEdition/index.js +303 -309
  17. package/dist/components/pages/RetailerProductEdition/styles.js +2 -2
  18. package/package.json +1 -1
  19. package/src/components/atoms/InheritanceTag/InheritanceTag.stories.js +3 -3
  20. package/src/components/atoms/InheritanceTag/index.js +6 -6
  21. package/src/components/organisms/InputGroup/index.js +12 -0
  22. package/src/components/organisms/LinkVariantsModal/index.js +260 -287
  23. package/src/components/organisms/LinkVariantsModal/styles.js +65 -32
  24. package/src/components/organisms/PropagateChangesModal/index.js +19 -17
  25. package/src/components/pages/ProviderProductEdition/context/provider-product-edition.context.jsx +4 -4
  26. package/src/components/pages/ProviderProductEdition/context/reducers/inputs.js +13 -1
  27. package/src/components/pages/ProviderProductEdition/index.js +48 -20
  28. package/src/components/pages/RetailerProductEdition/context/provider-product-edition.context.jsx +4 -4
  29. package/src/components/pages/RetailerProductEdition/context/reducers/inputs.js +13 -1
  30. package/src/components/pages/RetailerProductEdition/index.js +89 -73
  31. package/src/components/pages/RetailerProductEdition/styles.js +0 -11
package/dist/components/pages/RetailerProductEdition/styles.js CHANGED
@@ -18,9 +18,9 @@ var _templateObject;
18
18
  // Rosa ContentOh, el mismo del modal de ligar productos.
19
19
  var PINK = "#E13AA8";
20
20
 
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 .action-buttons{\n display: flex;\n flex-direction: column;\n gap: 1rem;\n }\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\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) {
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 .action-buttons{\n display: flex;\n flex-direction: column;\n gap: 1rem;\n }\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\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-radius: 4px;\n text-align: left;\n font-family: ", ";\n font-size: 12px;\n color: ", ";\n }\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) {
22
22
  var headerTop = _ref.headerTop;
23
23
  return headerTop;
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);
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, PINK, _variables.GlobalColors.gray, _variables.GlobalColors.gray);
25
25
 
26
26
  exports.Container = Container;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "contentoh-components-library",
3
- "version": "21.6.31",
3
+ "version": "21.6.33",
4
4
  "dependencies": {
5
5
  "@aws-amplify/auth": "^4.5.3",
6
6
  "@aws-amplify/datastore": "^3.11.0",
package/src/components/atoms/InheritanceTag/InheritanceTag.stories.js CHANGED
@@ -31,9 +31,9 @@ PropioSinAccion.args = {
31
31
  isOverridden: true,
32
32
  };
33
33
 
34
- // En un producto que no es variante no se pinta nada.
35
- export const NoEsVariante = Template.bind({});
36
- NoEsVariante.args = {
34
+ // En un producto que no es hijo de nadie no se pinta nada.
35
+ export const NoEsHijo = Template.bind({});
36
+ NoEsHijo.args = {
37
37
  isVariant: false,
38
38
  isOverridden: true,
39
39
  };
package/src/components/atoms/InheritanceTag/index.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import { Container } from "./styles";
2
2
 
3
3
  /**
4
- * Marca si el valor de un atributo viene del producto padre o es propio de la
5
- * variante. Solo tiene sentido dentro de una variante: en un producto sin padre
6
- * no se pinta nada, porque no hay de quién heredar.
4
+ * Marca si el valor de un atributo viene del producto padre o es propio del
5
+ * hijo. Solo tiene sentido dentro de un producto hijo: en uno sin padre no se
6
+ * pinta nada, porque no hay de quién heredar.
7
7
  *
8
8
  * El estado "propio" es el que carga información —ese campo se separó del padre—
9
9
  * así que es el que lleva acento y el que ofrece la acción de volver a heredar.
@@ -11,8 +11,8 @@ import { Container } from "./styles";
11
11
  * la ficha entera se volvería ruido.
12
12
  *
13
13
  * Un campo VACÍO no lleva marca: no heredó nada y tampoco tiene valor propio, así
14
- * que llamarlo "Heredado" es falso además de ruidoso. Sin esto la ficha de una
15
- * variante sale con el chip repetido en cada campo, incluidos los obligatorios en
14
+ * que llamarlo "Heredado" es falso además de ruidoso. Sin esto la ficha de un
15
+ * hijo sale con el chip repetido en cada campo, incluidos los obligatorios en
16
16
  * rojo que están sin capturar, y la marca deja de distinguir nada.
17
17
  *
18
18
  * Tampoco la lleva un atributo NO heredable. El UPC y el SKU son la identidad del
@@ -41,7 +41,7 @@ export const InheritanceTag = ({
41
41
  className="tag-label"
42
42
  title={
43
43
  isOverridden
44
- ? "Valor propio de esta variante. La propagación del producto padre no lo modifica."
44
+ ? "Valor propio de este producto hijo. La propagación del padre no lo modifica."
45
45
  : `Valor heredado${parentUpc ? ` del producto ${parentUpc}` : " del producto padre"}.`
46
46
  }
47
47
  >
package/src/components/organisms/InputGroup/index.js CHANGED
@@ -296,6 +296,18 @@ export const InputGroup = ({
296
296
  dinamicHeight={dinamicHeight}
297
297
  description={input?.description}
298
298
  showTooltip={true}
299
+ isVariant={variant?.isVariant}
300
+ isOverridden={input?.isOverridden}
301
+ inheritable={input?.inheritable}
302
+ parentUpc={variant?.parent?.upc}
303
+ /* Las descripciones viven en otra tabla que la ficha
304
+ técnica, así que restore necesita saber cuál de las dos
305
+ listas está recibiendo. */
306
+ onRestoreInheritance={
307
+ onRestoreInheritance
308
+ ? (id) => onRestoreInheritance(id, "description")
309
+ : undefined
310
+ }
299
311
  auditClass={
300
312
  compare &&
301
313
  !isEquals(