contentoh-components-library 21.6.18 → 21.6.20

package/dist/components/pages/ProviderProductEdition/styles.js

@@ -15,9 +15,9 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-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"])), function (_ref) {
+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      font-family: ", ";\n      font-size: 11px;\n      color: ", ";\n    }\n  }\n"])), function (_ref) {
   var headerTop = _ref.headerTop;
   return headerTop;
-}, _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);
+}, _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, _variables.GlobalColors.original_magenta, _variables.FontFamily.Raleway_600, _variables.GlobalColors.original_magenta, _variables.FontFamily.Raleway_500, _variables.GlobalColors.gray);
 
 exports.Container = Container;

package/dist/components/pages/ProviderProductEdition/utils.js

@@ -8,6 +8,8 @@ exports.normalizeProduct = exports.getConceptByTab = void 0;
 var _statusDictionary = require("../../../global-files/statusDictionary");
 
 var normalizeProduct = function normalizeProduct(product) {
+  var _ref, _productData$parentAr, _ref2, _productData$parent, _ref3, _productData$variants;
+
   // Handle case where product might be wrapped in a product property
   var productData = product.product || product;
   var article = productData.article || {};
@@ -43,6 +45,12 @@ var normalizeProduct = function normalizeProduct(product) {
     percentages: productData.percentages || null,
     summary: productData.summary || null,
     version: productData.version || 0,
+    // Parentesco. read-articles-v2 ya lo devuelve; sin arrastrarlo hasta aquí la
+    // pantalla de edición no puede saber si el producto pertenece a una familia.
+    // Ojo con `?? null` en vez de `|| null`: variantsCount 0 es un dato válido.
+    parentArticleId: (_ref = (_productData$parentAr = productData.parentArticleId) !== null && _productData$parentAr !== void 0 ? _productData$parentAr : article.parentArticleId) !== null && _ref !== void 0 ? _ref : null,
+    parent: (_ref2 = (_productData$parent = productData.parent) !== null && _productData$parent !== void 0 ? _productData$parent : article.parent) !== null && _ref2 !== void 0 ? _ref2 : null,
+    variantsCount: (_ref3 = (_productData$variants = productData.variantsCount) !== null && _productData$variants !== void 0 ? _productData$variants : article.variantsCount) !== null && _ref3 !== void 0 ? _ref3 : 0,
     // from tasks
     id_order: productData.orderId || null,
     status: productData.statusByRetailer ? (0, _statusDictionary.getMinorStatusFromRetailerMap)(productData.statusByRetailer) : productData.status || null,

package/dist/index.js

@@ -1083,7 +1083,7 @@ Object.keys(_index82).forEach(function (key) {
   });
 });
 
-var _index83 = require("./components/organisms/ProductImageModal/index");
+var _index83 = require("./components/organisms/LinkVariantsModal/index");
 
 Object.keys(_index83).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1096,7 +1096,7 @@ Object.keys(_index83).forEach(function (key) {
   });
 });
 
-var _index84 = require("./components/organisms/Chat/index");
+var _index84 = require("./components/organisms/ProductImageModal/index");
 
 Object.keys(_index84).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1109,7 +1109,7 @@ Object.keys(_index84).forEach(function (key) {
   });
 });
 
-var _index85 = require("./components/organisms/Modal/index");
+var _index85 = require("./components/organisms/Chat/index");
 
 Object.keys(_index85).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1122,7 +1122,7 @@ Object.keys(_index85).forEach(function (key) {
   });
 });
 
-var _index86 = require("./components/organisms/OrderDetail/index");
+var _index86 = require("./components/organisms/Modal/index");
 
 Object.keys(_index86).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1135,6 +1135,19 @@ Object.keys(_index86).forEach(function (key) {
   });
 });
 
+var _index87 = require("./components/organisms/OrderDetail/index");
+
+Object.keys(_index87).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _index87[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index87[key];
+    }
+  });
+});
+
 var _RangeCalendar = require("./components/organisms/RangeCalendar");
 
 Object.keys(_RangeCalendar).forEach(function (key) {
@@ -1161,28 +1174,28 @@ Object.keys(_TableResizable).forEach(function (key) {
   });
 });
 
-var _index87 = require("./components/organisms/SideModal/index");
+var _index88 = require("./components/organisms/SideModal/index");
 
-Object.keys(_index87).forEach(function (key) {
+Object.keys(_index88).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _index87[key]) return;
+  if (key in exports && exports[key] === _index88[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _index87[key];
+      return _index88[key];
     }
   });
 });
 
-var _index88 = require("./components/organisms/GridProducts/index");
+var _index89 = require("./components/organisms/GridProducts/index");
 
-Object.keys(_index88).forEach(function (key) {
+Object.keys(_index89).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _index88[key]) return;
+  if (key in exports && exports[key] === _index89[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _index88[key];
+      return _index89[key];
     }
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.6.18",
+  "version": "21.6.20",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

package/src/components/molecules/TagAndInput/index.js

@@ -1,5 +1,6 @@
 import { Container } from "./styles";
 import { ScreenHeader } from "../../atoms/ScreenHeader/index";
+import { InheritanceTag } from "../../atoms/InheritanceTag";
 import { GeneralInput } from "../../atoms/GeneralInput/index";
 import { useState, useEffect } from "react";
 import acceptIcon from "../../../assets/images/generalButton/acceptIcon.svg";
@@ -44,6 +45,10 @@ export const TagAndInput = ({
   dataInputs,
   inputGroup,
   boxOnboardingData,
+  isVariant,
+  isOverridden,
+  parentUpc,
+  onRestoreInheritance,
 }) => {
   const [boxOnboardingList, setBoxOnboardingList] = useState(
     boxOnboardingData || []
@@ -323,6 +328,16 @@ export const TagAndInput = ({
               headerType={"input-name-header"}
               color={color}
             />
+            <InheritanceTag
+              isVariant={isVariant}
+              isOverridden={isOverridden}
+              parentUpc={parentUpc}
+              onRestore={
+                onRestoreInheritance
+                  ? () => onRestoreInheritance(inputId)
+                  : undefined
+              }
+            />
             {description && (
               <Tooltip
                 componentTooltip={

package/src/components/organisms/InputGroup/index.js

@@ -27,6 +27,8 @@ export const InputGroup = ({
   setUpdatedBoxData,
   activeRetailer,
   updateApprovedInputs,
+  variant,
+  onRestoreInheritance,
 }) => {
   const InputReviewSection = ({
     inputId,
@@ -230,6 +232,10 @@ export const InputGroup = ({
                   optionList={dataInputs[input]?.option_list}
                   description={dataInputs[input]?.description}
                   showTooltip={true}
+                  isVariant={variant?.isVariant}
+                  isOverridden={dataInputs[input]?.isOverridden}
+                  parentUpc={variant?.parent?.upc}
+                  onRestoreInheritance={onRestoreInheritance}
                   auditClass={
                     compare &&
                     !isEquals(

package/src/components/organisms/LinkVariantsModal/api.js

@@ -0,0 +1,61 @@
+/*
+  Las lambdas de este API están declaradas con `integration: lambda`, no con
+  lambda-proxy. Eso tiene dos consecuencias que se pagan caras si se ignoran:
+
+  1. La respuesta llega ENVUELTA: axios entrega { statusCode, headers, body },
+     con `body` en texto. Leer `res.data.candidates` da undefined.
+  2. El HTTP siempre es 200, incluso cuando la lambda respondió 400 o 500. Un
+     try/catch alrededor de axios NUNCA se dispara por un error de negocio: el
+     error viaja dentro del cuerpo y hay que mirar `statusCode` a mano.
+
+  El repo ya vive con esto —provider-product-edition.context.jsx hace
+  JSON.parse(res.data.body)— pero sin un lugar común cada llamada nueva vuelve a
+  tropezar. Esto lo centraliza.
+*/
+
+export const unwrap = (res) => {
+  const payload = res?.data;
+
+  const envuelto = payload
+    && typeof payload === "object"
+    && "statusCode" in payload
+    && "body" in payload;
+
+  if (!envuelto) return { status: res?.status ?? 200, body: payload };
+
+  const body =
+    typeof payload.body === "string" ? safeParse(payload.body) : payload.body;
+
+  return { status: Number(payload.statusCode), body };
+};
+
+const safeParse = (text) => {
+  try {
+    return JSON.parse(text);
+  } catch (error) {
+    return { message: text };
+  }
+};
+
+/*
+  Error de negocio con el código estable que manda el backend
+  (VARIANT_CROSS_COMPANY, VARIANT_ALREADY_LINKED, ...). Se lanza para que el
+  llamador use un try/catch normal, aunque el transporte haya dicho 200.
+*/
+export class ApiError extends Error {
+  constructor(code, message) {
+    super(message);
+    this.name = "ApiError";
+    this.code = code;
+  }
+}
+
+export const readPayload = (res) => {
+  const { status, body } = unwrap(res);
+
+  if (status >= 400) {
+    throw new ApiError(body?.code, body?.message || "La operación falló.");
+  }
+
+  return body ?? {};
+};