contentoh-components-library 21.6.17 → 21.6.19

package/package.json

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

package/src/components/atoms/InheritanceTag/InheritanceTag.stories.js

@@ -0,0 +1,39 @@
+import { InheritanceTag } from "./index";
+
+export default {
+  title: "Components/atoms/InheritanceTag",
+  label: "Inheritance Tag",
+  component: InheritanceTag,
+};
+
+const Template = (args) => <InheritanceTag {...args} />;
+
+export const Heredado = Template.bind({});
+Heredado.args = {
+  isVariant: true,
+  isOverridden: false,
+  parentUpc: "7501234567890",
+};
+
+export const Propio = Template.bind({});
+Propio.args = {
+  isVariant: true,
+  isOverridden: true,
+  parentUpc: "7501234567890",
+  onRestore: () => {},
+};
+
+// Un valor propio sin onRestore no ofrece la acción: se marca, pero no se puede
+// revertir desde ahí. Es el caso de las vistas de solo lectura.
+export const PropioSinAccion = Template.bind({});
+PropioSinAccion.args = {
+  isVariant: true,
+  isOverridden: true,
+};
+
+// En un producto que no es variante no se pinta nada.
+export const NoEsVariante = Template.bind({});
+NoEsVariante.args = {
+  isVariant: false,
+  isOverridden: true,
+};

package/src/components/atoms/InheritanceTag/index.js

@@ -0,0 +1,45 @@
+import { Container } from "./styles";
+
+/**
+ * Marca si el valor de un atributo viene del producto padre o es propio de la
+ * variante. Solo tiene sentido dentro de una variante: en un producto sin padre
+ * no se pinta nada, porque no hay de quién heredar.
+ *
+ * El estado "propio" es el que carga información —ese campo se separó del padre—
+ * así que es el que lleva acento y el que ofrece la acción de volver a heredar.
+ * "Heredado" es el caso normal y se mantiene discreto: si gritara en cada campo,
+ * la ficha entera se volvería ruido.
+ */
+export const InheritanceTag = ({
+  isVariant = false,
+  isOverridden = false,
+  parentUpc,
+  onRestore,
+  restoreLabel = "Volver a heredar",
+  className = "",
+}) => {
+  if (!isVariant) return null;
+
+  const state = isOverridden ? "own" : "inherited";
+
+  return (
+    <Container className={`inheritance-tag ${state} ${className}`}>
+      <span
+        className="tag-label"
+        title={
+          isOverridden
+            ? "Valor propio de esta variante. La propagación del producto padre no lo modifica."
+            : `Valor heredado${parentUpc ? ` del producto ${parentUpc}` : " del producto padre"}.`
+        }
+      >
+        {isOverridden ? "Propio" : "Heredado"}
+      </span>
+
+      {isOverridden && onRestore && (
+        <button type="button" className="tag-action" onClick={onRestore}>
+          {restoreLabel}
+        </button>
+      )}
+    </Container>
+  );
+};

package/src/components/atoms/InheritanceTag/styles.js

@@ -0,0 +1,56 @@
+import styled from "styled-components";
+import "../../../global-files/global-styles.css";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  width: fit-content;
+  height: 16px;
+
+  .tag-label {
+    border-radius: 3px;
+    padding: 2px 5px;
+    font-family: ${FontFamily.Raleway_500};
+    font-size: 10px;
+    line-height: 12px;
+    letter-spacing: -0.015em;
+    white-space: nowrap;
+    cursor: default;
+  }
+
+  /* Heredado: el caso normal. Discreto a propósito. */
+  &.inherited .tag-label {
+    background-color: ${GlobalColors.s2};
+    color: ${GlobalColors.gray};
+  }
+
+  /* Propio: la excepción que informa. Lleva el acento de marca. */
+  &.own .tag-label {
+    background-color: rgba(${GlobalColors.rgb_color_pink}, 0.12);
+    color: ${GlobalColors.original_magenta};
+  }
+
+  .tag-action {
+    border: none;
+    background: none;
+    padding: 0;
+    font-family: ${FontFamily.Raleway_500};
+    font-size: 10px;
+    line-height: 12px;
+    color: ${GlobalColors.s4};
+    text-decoration: underline;
+    cursor: pointer;
+
+    &:hover {
+      color: ${GlobalColors.original_magenta};
+    }
+
+    &:focus-visible {
+      outline: 1px solid ${GlobalColors.magenta_s2};
+      outline-offset: 2px;
+      border-radius: 2px;
+    }
+  }
+`;

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/molecules/TagAndInputv2/index.js

@@ -1,6 +1,7 @@
 import { Container } from "./styles";
 import { GeneralInputv2 } from "../../atoms/GeneralInputv2";
 import { ScreenHeaderv2 } from "../../atoms/ScreenHeaderv2";
+import { InheritanceTag } from "../../atoms/InheritanceTag";
 
 export const TagAndInputv2 = ({
   inputType,
@@ -33,6 +34,10 @@ export const TagAndInputv2 = ({
   showTooltip,
   auditClass,
   showMissingChars,
+  isVariant,
+  isOverridden,
+  parentUpc,
+  onRestoreInheritance,
 }) => {
   return (
     <Container
@@ -55,6 +60,16 @@ export const TagAndInputv2 = ({
             description={description}
             showMissingChars={showMissingChars}
           />
+          <InheritanceTag
+            isVariant={isVariant}
+            isOverridden={isOverridden}
+            parentUpc={parentUpc}
+            onRestore={
+              onRestoreInheritance
+                ? () => onRestoreInheritance(inputId)
+                : undefined
+            }
+          />
         </div>
       )}
       <GeneralInputv2

package/src/components/molecules/TagAndInputv2/styles.js

@@ -4,6 +4,19 @@ import { FontFamily, GlobalColors } from "../../../global-files/variables";
 export const Container = styled.div`
   .title-container {
     position: relative;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    /* El nombre del atributo manda; el chip se acomoda a su lado sin
+       empujarlo ni robarle ancho cuando el texto es largo. */
+    & > :first-child {
+      min-width: 0;
+    }
+    .inheritance-tag {
+      flex-shrink: 0;
+    }
+
     .tooltip {
       display: none;
       position: absolute;

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/InputGroupv2/index.js

@@ -21,6 +21,8 @@ export const InputGroupv2 = ({
   activeRetailer,
   setUpdatedBoxData,
   showMissingChars,
+  variant,
+  onRestoreInheritance,
 }) => {
   const inputTypeValue = (type) => {
     switch (type) {
@@ -144,6 +146,10 @@ export const InputGroupv2 = ({
                       : ""
                   }
                   showMissingChars={showMissingChars}
+                  isVariant={variant?.isVariant}
+                  isOverridden={dataInputs[input]?.isOverridden}
+                  parentUpc={variant?.parent?.upc}
+                  onRestoreInheritance={onRestoreInheritance}
                 />
               </>
             ) : (
@@ -252,6 +258,10 @@ export const InputGroupv2 = ({
                       : ""
                   }
                   showMissingChars={showMissingChars}
+                  isVariant={variant?.isVariant}
+                  isOverridden={dataInputs[input]?.isOverridden}
+                  parentUpc={variant?.parent?.upc}
+                  onRestoreInheritance={onRestoreInheritance}
                 />
               </>
             ) : (

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

@@ -1504,6 +1504,7 @@ export const ProductEditionv2 = ({
                         activeSection={activeTab}
                         inputGroup={dataGroup}
                         dataInputs={datasheets[1]}
+                        variant={services[0]?.variant}
                         updatedDatasheets={updatedDatasheets}
                         setUpdatedDatasheets={setUpdatedDatasheets}
                         isShowbox={true}

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

@@ -1433,6 +1433,7 @@ const ProviderProductEditionView = ({
                                   activeSection={state.active_tab}
                                   inputGroup={dataGroup}
                                   dataInputs={state.datasheets_inputs[1] ?? []}
+                                  variant={state.services?.datasheets?.variant}
                                   activeRetailer={
                                     state.services.datasheets[
                                       state.active_retailer.id_retailer

package/src/index.js

@@ -11,6 +11,7 @@ export * from "./components/atoms/GeneralButton/index";
 export * from "./components/atoms/GeneralInput/index";
 export * from "./components/atoms/GeneralTextBox/index";
 export * from "./components/atoms/GradientPanel/index";
+export * from "./components/atoms/InheritanceTag/index";
 export * from "./components/atoms/Loading/index";
 export * from "./components/atoms/LogoImage/index";
 export * from "./components/atoms/PriorityFlag/index";