contentoh-components-library 21.6.19 → 21.6.21

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

@@ -0,0 +1,264 @@
+import styled from "styled-components";
+import "../../../global-files/global-styles.css";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Overlay = styled.div`
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(40, 31, 51, 0.45);
+`;
+
+export const Panel = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: min(680px, 92vw);
+  max-height: 86vh;
+  border-radius: 10px;
+  background-color: ${GlobalColors.white};
+  font-family: ${FontFamily.Raleway};
+  overflow: hidden;
+`;
+
+export const Header = styled.div`
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 20px 24px 12px;
+
+  h2 {
+    margin: 0;
+    font-family: ${FontFamily.Raleway_700};
+    font-size: 16px;
+    color: ${GlobalColors.deep_gray};
+  }
+
+  p {
+    margin: 4px 0 0;
+    font-size: 12px;
+    color: ${GlobalColors.gray};
+  }
+
+  .close {
+    border: none;
+    background: none;
+    cursor: pointer;
+    font-size: 20px;
+    line-height: 1;
+    color: ${GlobalColors.gray};
+  }
+`;
+
+export const ModeSwitch = styled.div`
+  display: flex;
+  gap: 8px;
+  padding: 0 24px 16px;
+
+  button {
+    flex: 1;
+    padding: 10px 12px;
+    border-radius: 6px;
+    border: 1px solid ${GlobalColors.s2};
+    background-color: ${GlobalColors.white};
+    font-family: ${FontFamily.Raleway_600};
+    font-size: 12px;
+    color: ${GlobalColors.gray};
+    cursor: pointer;
+    text-align: left;
+  }
+
+  button.active {
+    border-color: ${GlobalColors.original_magenta};
+    color: ${GlobalColors.original_magenta};
+    background-color: rgba(${GlobalColors.rgb_color_pink}, 0.08);
+  }
+`;
+
+export const Body = styled.div`
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 24px;
+`;
+
+export const SearchRow = styled.form`
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+
+  input {
+    flex: 1;
+    height: 36px;
+    padding: 0 12px;
+    border: 1px solid ${GlobalColors.s2};
+    border-radius: 6px;
+    font-family: ${FontFamily.Raleway};
+    font-size: 12px;
+    color: ${GlobalColors.deep_gray};
+  }
+
+  button {
+    height: 36px;
+    padding: 0 18px;
+    border: none;
+    border-radius: 6px;
+    background-color: ${GlobalColors.original_magenta};
+    color: ${GlobalColors.white};
+    font-family: ${FontFamily.Raleway_600};
+    font-size: 12px;
+    cursor: pointer;
+  }
+
+  button:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+`;
+
+export const List = styled.ul`
+  list-style: none;
+  margin: 0 0 16px;
+  padding: 0;
+  border: 1px solid ${GlobalColors.s2};
+  border-radius: 6px;
+
+  li + li {
+    border-top: 1px solid ${GlobalColors.s2};
+  }
+
+  label {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 12px;
+    cursor: pointer;
+    font-size: 12px;
+    color: ${GlobalColors.deep_gray};
+  }
+
+  .meta {
+    display: block;
+    font-size: 11px;
+    color: ${GlobalColors.gray};
+  }
+
+  .count {
+    margin-left: auto;
+    font-size: 11px;
+    color: ${GlobalColors.original_magenta};
+    white-space: nowrap;
+  }
+`;
+
+export const AttributeList = styled(List)`
+  max-height: 220px;
+  overflow-y: auto;
+
+  .note {
+    display: block;
+    font-size: 10px;
+    font-style: italic;
+    color: ${GlobalColors.gray};
+  }
+
+  .value {
+    margin-left: auto;
+    max-width: 45%;
+    font-size: 11px;
+    color: ${GlobalColors.gray};
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;
+
+export const Section = styled.div`
+  margin-bottom: 16px;
+
+  h3 {
+    margin: 0 0 8px;
+    font-family: ${FontFamily.Raleway_600};
+    font-size: 13px;
+    color: ${GlobalColors.deep_gray};
+  }
+
+  label.choice {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 6px 0;
+    font-size: 12px;
+    color: ${GlobalColors.deep_gray};
+    cursor: pointer;
+  }
+
+  label.choice span.hint {
+    display: block;
+    font-size: 11px;
+    color: ${GlobalColors.gray};
+  }
+`;
+
+export const Message = styled.p`
+  margin: 0 0 12px;
+  padding: 10px 12px;
+  border-radius: 6px;
+  font-size: 12px;
+  line-height: 1.4;
+  background-color: ${GlobalColors.s2};
+  color: ${GlobalColors.deep_gray};
+
+  &.error {
+    background-color: rgba(${GlobalColors.rgb_color_pink}, 0.1);
+    color: ${GlobalColors.original_magenta};
+  }
+`;
+
+export const Footer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 16px 24px;
+  border-top: 1px solid ${GlobalColors.s2};
+
+  .summary {
+    font-size: 12px;
+    color: ${GlobalColors.gray};
+  }
+
+  .actions {
+    display: flex;
+    gap: 8px;
+    margin-left: auto;
+  }
+
+  button {
+    height: 36px;
+    padding: 0 18px;
+    border-radius: 6px;
+    font-family: ${FontFamily.Raleway_600};
+    font-size: 12px;
+    cursor: pointer;
+  }
+
+  button.secondary {
+    border: 1px solid ${GlobalColors.s2};
+    background-color: ${GlobalColors.white};
+    color: ${GlobalColors.gray};
+  }
+
+  button.primary {
+    border: none;
+    background-color: ${GlobalColors.original_magenta};
+    color: ${GlobalColors.white};
+  }
+
+  button:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+`;

package/src/components/pages/ProviderProductEdition/context/reducers/inputs.js

@@ -92,7 +92,7 @@ export const inputsReducer = (state, action) => {
         ...state.services.datasheets.inputs,
       };
 
-      action.payload.forEach(({ attributeId, value }) => {
+      action.payload.forEach(({ attributeId, value, isOverridden }) => {
         const key = `${attributeId}_${retailerId}`;
 
         if (!updatedServiceInputs[key]) return;
@@ -100,6 +100,10 @@ export const inputsReducer = (state, action) => {
         updatedServiceInputs[key] = {
           ...updatedServiceInputs[key],
           value,
+          // Opcional a propósito: quien solo cambia el valor no toca la marca de
+          // herencia. La usa "Volver a heredar", que sí necesita devolver el
+          // atributo a heredado para que el chip deje de decir "Propio".
+          ...(isOverridden === undefined ? {} : { isOverridden }),
         };
       });
 
@@ -110,18 +114,22 @@ export const inputsReducer = (state, action) => {
 
           return {
             ...group,
-            ...action.payload.reduce((acc, { attributeId, value }) => {
-              const key = `${attributeId}_${retailerId}`;
-
-              if (!group[key]) return acc;
-
-              acc[key] = {
-                ...group[key],
-                value,
-              };
-
-              return acc;
-            }, {}),
+            ...action.payload.reduce(
+              (acc, { attributeId, value, isOverridden }) => {
+                const key = `${attributeId}_${retailerId}`;
+
+                if (!group[key]) return acc;
+
+                acc[key] = {
+                  ...group[key],
+                  value,
+                  ...(isOverridden === undefined ? {} : { isOverridden }),
+                };
+
+                return acc;
+              },
+              {}
+            ),
           };
         }
       );

package/src/components/pages/ProviderProductEdition/index.js

@@ -34,6 +34,8 @@ import { FullTabsMenu } from "../../organisms/FullTabsMenu";
 import { ImageDataTable } from "../../organisms/ImageDataTable";
 import { ImagePreviewer } from "../../organisms/ImagePreviewer";
 import { InputGroup } from "../../organisms/InputGroup";
+import { LinkVariantsModal } from "../../organisms/LinkVariantsModal";
+import { readPayload } from "../../organisms/LinkVariantsModal/api";
 import { ProductImageModal } from "../../organisms/ProductImageModal";
 import { VersionSelector } from "../../organisms/VersionSelector";
 import { Modal } from "../../organisms/Modal";
@@ -73,6 +75,7 @@ const ProviderProductEditionView = ({
 
   const [boxData, setBoxData] = useState(null);
   const [showModal, setShowModal] = useState(false);
+  const [showLinkVariants, setShowLinkVariants] = useState(false);
   const [showRejectModal, setShowRejectModal] = useState(false);
   const [headerTop, setHeaderTop] = useState(0);
   const [assig, setAssig] = useState({});
@@ -694,6 +697,44 @@ const ProviderProductEditionView = ({
     });
   };
 
+  /*
+    Acción "Volver a heredar del producto" de los chips de herencia.
+
+    La inicia la variante, no el padre, y descarta un valor capturado a mano: por
+    eso el endpoint exige la lista explícita de atributos y no acepta un "todos"
+    implícito.
+
+    El repintado es en sitio, con lo que devuelve el propio endpoint. La
+    alternativa —recargar la ficha— se llevaría por delante lo que el usuario
+    tenga sin guardar en las otras pestañas.
+  */
+  const handleOnRestoreInheritance = async (attributeId) => {
+    if (!attributeId || !state.product?.id_article) return;
+
+    try {
+      const res = await axios.post(
+        `${process.env.REACT_APP_VARIANTS_ENDPOINT}/restore`,
+        { articleId: state.product.id_article, attributes: [Number(attributeId)] },
+        { headers: { Authorization: token } }
+      );
+
+      // El API responde 200 aunque la lambda haya devuelto 400: el resultado
+      // real viaja en el cuerpo y readPayload lo convierte en excepción.
+      const data = readPayload(res);
+
+      dispatch({
+        type: "UPDATE_DATASHEETS_INPUTS",
+        payload: (data.values || []).map((item) => ({
+          attributeId: item.id,
+          value: item.value,
+          isOverridden: 0,
+        })),
+      });
+    } catch (error) {
+      console.error("restoreInheritance: ", error);
+    }
+  };
+
   const handleOnSetSelectedImages = () => {
     /*
     Esta función no se utiliza actualmente.
@@ -1143,6 +1184,17 @@ const ProviderProductEditionView = ({
             jwt={token}
           />
         )}
+        {showLinkVariants && (
+          <LinkVariantsModal
+            articleId={state.product?.id_article}
+            articleName={state.product?.name}
+            articleUpc={state.product?.upc}
+            activeRetailerId={state.active_retailer?.id_retailer}
+            token={token}
+            onClose={() => setShowLinkVariants(false)}
+            onLinked={() => window.location.reload()}
+          />
+        )}
         {showModal && (
           <ProductImageModal
             images={state.images_values}
@@ -1329,6 +1381,27 @@ const ProviderProductEditionView = ({
           </div>
           <div className="product-information">
             <div className="product-information">
+              {/* Solo cuando el producto NO es ya variante de alguien: ligarlo
+                  otra vez devolvería VARIANT_ALREADY_LINKED sin excepción, y un
+                  botón que siempre falla es peor que no tenerlo. Para salir de
+                  una familia está la desvinculación, no este botón. */}
+              {!state.product?.parentArticleId && (
+                <div className="variants-actions">
+                  <button
+                    type="button"
+                    className="link-variants"
+                    onClick={() => setShowLinkVariants(true)}
+                  >
+                    Ligar productos
+                  </button>
+                  {state.product?.variantsCount > 0 && (
+                    <span className="variants-count">
+                      {state.product.variantsCount} variante
+                      {state.product.variantsCount === 1 ? "" : "s"}
+                    </span>
+                  )}
+                </div>
+              )}
               <FullProductNameHeader
                 headerData={state.product}
                 percent={state.active_percentage?.percentagesGeneral?.required}
@@ -1434,6 +1507,9 @@ const ProviderProductEditionView = ({
                                   inputGroup={dataGroup}
                                   dataInputs={state.datasheets_inputs[1] ?? []}
                                   variant={state.services?.datasheets?.variant}
+                                  onRestoreInheritance={
+                                    handleOnRestoreInheritance
+                                  }
                                   activeRetailer={
                                     state.services.datasheets[
                                       state.active_retailer.id_retailer

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

@@ -160,4 +160,27 @@ export const Container = styled.div`
       }
     }
   }
+  .variants-actions {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 8px;
+
+    .link-variants {
+      border: 1px solid ${GlobalColors.original_magenta};
+      border-radius: 6px;
+      background: none;
+      padding: 6px 12px;
+      font-family: ${FontFamily.Raleway_600};
+      font-size: 11px;
+      color: ${GlobalColors.original_magenta};
+      cursor: pointer;
+    }
+
+    .variants-count {
+      font-family: ${FontFamily.Raleway_500};
+      font-size: 11px;
+      color: ${GlobalColors.gray};
+    }
+  }
 `;

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

@@ -48,6 +48,14 @@ export const normalizeProduct = (product) => {
     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:
+      productData.parentArticleId ?? article.parentArticleId ?? null,
+    parent: productData.parent ?? article.parent ?? null,
+    variantsCount: productData.variantsCount ?? article.variantsCount ?? 0,
+
     // from tasks
     id_order: productData.orderId || null,
     status: productData.statusByRetailer

package/src/index.js

@@ -86,6 +86,7 @@ export * from "./components/organisms/ImageDataTable/index";
 export * from "./components/organisms/ImagePreviewer/index";
 export * from "./components/organisms/ImagesGroup/index";
 export * from "./components/organisms/InputGroup/index";
+export * from "./components/organisms/LinkVariantsModal/index";
 export * from "./components/organisms/ProductImageModal/index";
 export * from "./components/organisms/Chat/index";
 export * from "./components/organisms/Modal/index";

package/dist/ai/prompts/attribute.prompt.js

@@ -1,28 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.generateAttributePrompt = void 0;
-
-var generateAttributePrompt = function generateAttributePrompt(_ref) {
-  var _ref$upc = _ref.upc,
-      upc = _ref$upc === void 0 ? 0 : _ref$upc,
-      _ref$inputName = _ref.inputName,
-      inputName = _ref$inputName === void 0 ? "" : _ref$inputName,
-      _ref$description = _ref.description,
-      description = _ref$description === void 0 ? "" : _ref$description,
-      _ref$currentValue = _ref.currentValue,
-      currentValue = _ref$currentValue === void 0 ? "" : _ref$currentValue,
-      _ref$name = _ref.name,
-      name = _ref$name === void 0 ? "" : _ref$name,
-      _ref$category = _ref.category,
-      category = _ref$category === void 0 ? "" : _ref$category,
-      _ref$retailer = _ref.retailer,
-      retailer = _ref$retailer === void 0 ? "" : _ref$retailer,
-      _ref$maxChar = _ref.maxChar,
-      maxChar = _ref$maxChar === void 0 ? 100 : _ref$maxChar;
-  return "\n    Eres un especialista en la generaci\xF3n, optimizaci\xF3n, mejora y captura de atributos de la ficha t\xE9cnica de productos para cat\xE1logos en l\xEDnea.\n    Tu tarea es crear atributos claros, concisos y relevantes que resalten las caracter\xEDsticas y beneficios del producto, utilizando un lenguaje preciso y adaptado al p\xFAblico objetivo.\n\n    Datos del producto:\n    - UPC: ".concat(upc, "\n    - Nombre del producto: ").concat(name, "\n    - Categor\xEDa: ").concat(category, "\n    - Nombre del atributo: ").concat(inputName, "\n    - Requerimiento del atributo: ").concat(description, "\n    - Valor actual del atributo: ").concat(currentValue, "\n    - Cadena comercial dirigida: ").concat(retailer, "\n\n    Instrucciones:\n    1. Analiza el nombre del producto y la categor\xEDa para entender su contexto.\n    2. Analiza la descripci\xF3n del atributo actual del producto.\n    3. Identifica la informaci\xF3n clave del atributo que sean relevantes y \xFAtiles para los clientes potenciales.\n    4. Genera una lista de atributos que:\n      - Cumplan con la descripcion del atributo proporcionada, no inventes datos o cambies el contexto de lo que pide la descripci\xF3n del atributo.\n      - Sean claros y f\xE1ciles de entender.\n      - Destaquen las caracter\xEDsticas y beneficios clave del producto.\n      - Utilicen un lenguaje preciso y adaptado al p\xFAblico objetivo.\n      - Mantengan un tono profesional y coherente con la marca.\n      - Aumenten la probabilidad de compra del producto.\n      - No excedan los ").concat(maxChar, " caracteres en total.\n      - Si existe ejemplo en la descripci\xF3n del atributo, sigue el mismo formato para generar los atributos.\n    5. No incluyas emojis ni signos especiales (*/+\xB4!\xA1?\xBF)\n    6. No repitas el encabezado: ").concat(inputName, "\n    7. No incluyas call to action, ejemplo: \"!Compra ya!\" \"!Da click!\" \"!Apurate!\"\n\n    Aseg\xFArate de que los atributos generados cumplan con todas las instrucciones proporcionadas.\n\n    No lo olvides, el objetivo principal es mejorar la captura de atributos para la ficha t\xE9cnica del producto para atraer, convencer y dar la informaci\xF3n completa a los clientes potenciales que puedan realizar una compra.\n  ");
-};
-
-exports.generateAttributePrompt = generateAttributePrompt;

package/dist/ai/prompts/description.prompt.js

@@ -1,33 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.generateDescriptionPrompt = void 0;
-
-// Cadena y Proveedor
-
-/**
- * La cadena ${cadena} tiene estas reglas ${reglas} para el tipo de descripcion que es: ${descripcion}
-*/
-var generateDescriptionPrompt = function generateDescriptionPrompt(_ref) {
-  var _ref$upc = _ref.upc,
-      upc = _ref$upc === void 0 ? 0 : _ref$upc,
-      _ref$inputName = _ref.inputName,
-      inputName = _ref$inputName === void 0 ? "" : _ref$inputName,
-      _ref$description = _ref.description,
-      description = _ref$description === void 0 ? "" : _ref$description,
-      _ref$currentValue = _ref.currentValue,
-      currentValue = _ref$currentValue === void 0 ? "" : _ref$currentValue,
-      _ref$name = _ref.name,
-      name = _ref$name === void 0 ? "" : _ref$name,
-      _ref$category = _ref.category,
-      category = _ref$category === void 0 ? "" : _ref$category,
-      _ref$retailer = _ref.retailer,
-      retailer = _ref$retailer === void 0 ? "" : _ref$retailer,
-      _ref$maxChar = _ref.maxChar,
-      maxChar = _ref$maxChar === void 0 ? 100 : _ref$maxChar;
-  return "\n    Eres un especialista en la generaci\xF3n, optimizaci\xF3n y mejora de descripciones de productos para cat\xE1logos en l\xEDnea.\n    Tu tarea es crear descripciones claras, concisas y atractivas que resalten las caracter\xEDsticas y beneficios del producto, utilizando un lenguaje persuasivo y adaptado al p\xFAblico objetivo.\n\n    Datos del producto:\n    - UPC: ".concat(upc, "\n    - Nombre del producto: ").concat(name, "\n    - Categor\xEDa: ").concat(category, "\n    - Encabezado de la descripci\xF3n: ").concat(inputName, "\n    - Requerimiento de la descripcion: ").concat(description, "\n    - Descripcion actual del producto: ").concat(currentValue, "\n    - Cadena comercial dirigida: ").concat(retailer, "\n\n    Instrucciones:\n    1. Analiza la descripci\xF3n actual del producto en caso de tenerla.\n    2. Identifica \xE1reas de mejora, como claridad, concisi\xF3n, atractivo y relevancia.\n    3. Genera una descripci\xF3n que:\n      - Sea clara y f\xE1cil de entender.\n      - Destaque las caracter\xEDsticas y beneficios clave del producto.\n      - Utilice un lenguaje persuasivo y adaptado al p\xFAblico objetivo.\n      - Mantenga un tono profesional y coherente con la marca.\n      - No exceda los ").concat(maxChar, " caracteres.\n      - Aumente la probabilidad de compra del producto, utilizando persuasi\xF3n en la necesidad de compra del producto.\n    4. No incluyas emojis ni signos especiales (*/+\xB4!\xA1?\xBF)\n    5. No repitas el encabezado: ").concat(inputName, "\n    6. No incluyas call to action, ejemplo: \"!Compra ya!\" \"!Da click!\" \"!Apurate!\"\n\n\n    Aseg\xFArate de que la descripci\xF3n generada cumpla con todas las instrucciones proporcionadas.\n\n    No lo olvides, el objetivo principal es mejorar la descripci\xF3n del producto para atraer y convencer a los clientes potenciales de realizar una compra. Eres un experto en marketing y redacci\xF3n persuasiva.\n\n    Nota: No estas hablando con los clientes, estas descripciones ir\xE1n en la tienda de E-commerce de la cadena comercial. No realices saludos, despedidas, sugerencias\n  ");
-};
-
-exports.generateDescriptionPrompt = generateDescriptionPrompt;

package/dist/ai/schemas/attribute.schema.js

@@ -1,35 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var schema = {
-  type: "object",
-  properties: {
-    results: {
-      type: "array",
-      items: {
-        type: "object",
-        properties: {
-          label: {
-            type: "string"
-          },
-          value: {
-            type: "string"
-          }
-        }
-      },
-      maxItems: 3
-    },
-    compliance_warnings: {
-      type: "array",
-      items: {
-        type: "string"
-      }
-    }
-  },
-  required: ["results"]
-};
-var _default = schema;
-exports.default = _default;

package/dist/ai/schemas/description.schema.js

@@ -1,27 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var schema = {
-  type: "object",
-  properties: {
-    results: {
-      type: "array",
-      items: {
-        type: "object",
-        properties: {
-          value: {
-            type: "string"
-          }
-        }
-      },
-      minItems: 1,
-      maxItems: 3
-    }
-  },
-  required: ["results"]
-};
-var _default = schema;
-exports.default = _default;