contentoh-components-library 21.4.36 → 21.4.38

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

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+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-direction:row-reverse;\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      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: 100%;\n    .dropzone {\n      height: 100%;\n      width: 100%;\n    }\n  }\n"])), function (_ref) {
+  var headerTop = _ref.headerTop;
+  return headerTop;
+}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4);
+
+exports.Container = Container;

package/dist/global-files/data.js

@@ -20,7 +20,7 @@ var _jsBase = require("js-base64");
 var _uuid = require("uuid");
 
 var getRetailerServices = /*#__PURE__*/function () {
-  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(articleId, category, categoryId, version) {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(articleId, category, categoryId, version, token) {
     var _images$values, responseArray, datasheets, descriptions, images;
 
     return _regenerator.default.wrap(function _callee$(_context) {
@@ -29,7 +29,11 @@ var getRetailerServices = /*#__PURE__*/function () {
           case 0:
             _context.prev = 0;
             _context.next = 3;
-            return Promise.all([_axios.default.post("".concat(process.env.REACT_APP_ARTICLE_DATA_DATASHEET_ENDPOINT, "?idCategory=").concat(categoryId, "&articleId=").concat(articleId, "&version=").concat(version)), _axios.default.get("".concat(process.env.REACT_APP_ARTICLE_DATA_DESCRIPTION_ENDPOINT, "?idCategory=").concat(categoryId, "&articleId=").concat(articleId, "&version=").concat(version)), _axios.default.post("".concat(process.env.REACT_APP_ARTICLE_DATA_IMAGES_ENDPOINT, "?articleId=").concat(articleId, "&version=").concat(version), {
+            return Promise.all([_axios.default.post("".concat(process.env.REACT_APP_ARTICLE_DATA_DATASHEET_ENDPOINT, "?idCategory=").concat(categoryId, "&articleId=").concat(articleId, "&version=").concat(version), {}, {
+              headers: {
+                Authorization: token
+              }
+            }), _axios.default.get("".concat(process.env.REACT_APP_ARTICLE_DATA_DESCRIPTION_ENDPOINT, "?idCategory=").concat(categoryId, "&articleId=").concat(articleId, "&version=").concat(version)), _axios.default.post("".concat(process.env.REACT_APP_ARTICLE_DATA_IMAGES_ENDPOINT, "?articleId=").concat(articleId, "&version=").concat(version), {
               category: category
             })]);
 
@@ -61,7 +65,7 @@ var getRetailerServices = /*#__PURE__*/function () {
     }, _callee, null, [[0, 11]]);
   }));
 
-  return function getRetailerServices(_x, _x2, _x3, _x4) {
+  return function getRetailerServices(_x, _x2, _x3, _x4, _x5) {
     return _ref.apply(this, arguments);
   };
 }();
@@ -263,7 +267,7 @@ var fetchUsers = /*#__PURE__*/function () {
     }, _callee4);
   }));
 
-  return function fetchUsers(_x5) {
+  return function fetchUsers(_x6) {
     return _ref4.apply(this, arguments);
   };
 }();

package/dist/global-files/variables.js

@@ -20,7 +20,11 @@ var GlobalColors = {
   reception: "#E57432",
   finished: "#18A0FB",
   exported: "#71DE56",
-  white: "#FFFFFF"
+  white: "#FFFFFF",
+  gray_light: "#F0F0F0",
+  gray: "#707070",
+  blue_light: "#F7F7FC",
+  purple: "#8A6CAA"
 };
 exports.GlobalColors = GlobalColors;
 var FontFamily = {

package/package.json

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

package/src/assets/images/Icons/info.svg

@@ -0,0 +1,8 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_37_379" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="8" height="8">
+<rect width="8" height="8" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_37_379)">
+<path d="M3.63807 5.98825H4.40893V3.62867H3.63807V5.98825ZM3.99596 3.07403C4.124 3.07403 4.2311 3.03169 4.31727 2.947C4.40345 2.86232 4.44653 2.75738 4.44653 2.6322C4.44653 2.49463 4.40331 2.38347 4.31685 2.29871C4.2304 2.21394 4.12327 2.17156 3.99547 2.17156C3.86061 2.17156 3.75166 2.21394 3.66863 2.29871C3.58559 2.38347 3.54407 2.49307 3.54407 2.6275C3.54407 2.7566 3.58737 2.8633 3.67398 2.94759C3.7606 3.03188 3.86792 3.07403 3.99596 3.07403ZM3.9991 8C3.44212 8 2.92156 7.89633 2.43741 7.68899C1.95324 7.48165 1.52964 7.19646 1.16659 6.83341C0.803541 6.47036 0.518349 6.04696 0.311013 5.5632C0.103671 5.07943 0 4.5588 0 4.0013C0 3.44379 0.103671 2.92273 0.311013 2.4381C0.518349 1.95348 0.803049 1.53104 1.16511 1.1708C1.52718 0.810554 1.95032 0.525358 2.43455 0.315215C2.91877 0.105072 3.43989 0 3.99792 0C4.55595 0 5.07764 0.10483 5.56301 0.314491C6.04837 0.524146 6.47094 0.80868 6.83072 1.16809C7.1905 1.52751 7.47533 1.95015 7.6852 2.43603C7.89507 2.92191 8 3.44396 8 4.0022C8 4.56004 7.89493 5.08098 7.68479 5.56504C7.47464 6.04909 7.18945 6.47169 6.8292 6.83282C6.46896 7.19395 6.04646 7.47876 5.56169 7.68726C5.07694 7.89575 4.55607 8 3.9991 8ZM4 7.11633C4.86173 7.11633 5.59499 6.81435 6.19977 6.21037C6.80454 5.60639 7.10693 4.8696 7.10693 4C7.10693 3.13827 6.80513 2.40501 6.20153 1.80024C5.59793 1.19546 4.86095 0.893067 3.9906 0.893067C3.12887 0.893067 2.39561 1.19487 1.79083 1.79847C1.18606 2.40207 0.883666 3.13905 0.883666 4.0094C0.883666 4.87113 1.18565 5.60439 1.78963 6.20917C2.39361 6.81394 3.1304 7.11633 4 7.11633Z" fill="#ECDD1D"/>
+</g>
+</svg>

package/src/components/molecules/BoxAttribute/BoxAttribute.stories.js

@@ -0,0 +1,17 @@
+import { BoxAttribute } from "./index";
+
+export default {
+  title: "Components/molecules/BoxAttribute",
+  component: BoxAttribute,
+};
+
+const Template = (args) => <BoxAttribute {...args} />;
+
+export const BoxAttributeDefault = Template.bind({});
+
+BoxAttributeDefault.args = {
+    text:"texto prueba",
+    isEditEnabled:true,
+    titletool:"Porcentaje de requeridos",
+    texttool:"Este porcentaje indica la completitud de los atributos requeridos para todos los servicios.",
+};

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

@@ -0,0 +1,71 @@
+import { Container } from "./styles";
+import IconInfo from "../../../assets/images/Icons/info.svg";
+import { Tooltip } from "../../atoms/Tooltip";
+import TextField from '@mui/material/TextField';
+
+export const BoxAttribute = (props) => {
+  const {
+    id,
+    key,
+    className,
+    text,
+    borderType, 
+    isEditEnabled,
+    titletool,
+    texttool,
+  } = props;
+
+  return (
+    <>
+      <Container
+        id={id}
+        key={key}
+        className={className}
+        borderType={borderType}
+      >
+         <Tooltip
+            componentTooltip={
+              <>
+                <p>
+                  <b>{titletool}</b>
+                </p>
+                <p>{texttool}</p>
+              </>
+            }
+            children={
+              <Container className="">
+                <img className="icon" src={IconInfo} alt="iconInfo" />
+              </Container>
+            }
+            classNameTooltip={"container-tooltip"}
+          />
+          <span>{text}</span>
+          {isEditEnabled ? (
+            <TextField
+              hiddenLabel
+              id="caja-borde"
+              defaultValue={text}
+              variant="outlined"
+              size="small"
+            />
+          ) : (
+            <TextField
+              hiddenLabel
+              id="caja-borde"
+              defaultValue={text}
+              variant="outlined"
+              size="small"
+              disabled
+            />
+          )}
+          {/* <TextField
+            hiddenLabel
+            id="caja-borde"
+            defaultValue={text}
+            variant="outlined"
+            size="small"
+            /> */}
+      </Container>
+    </>
+  );
+};

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

@@ -0,0 +1,35 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  gap:4px;
+  #atr-alto {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  #caja-borde {
+    font-family: ${FontFamily.RobotoMedium}, sans-serif;
+    font-size: 12px;
+    line-height: 1.2;
+    border-radius: ${({ borderType }) => {
+      return borderType?.toLowerCase() === "rectangle"
+        ? "5px"
+        : borderType?.toLowerCase() === "circle"
+        ? "50%"
+        : "none";
+    }};
+  }
+  span {
+    font-family: ${FontFamily.RobotoMedium}, sans-serif;
+    font-size: 12px;
+    line-height: 1.2;
+    font-weight: 600;
+  }
+  .icon {
+    width: 8px;
+    height: 8px;
+  }
+`;

package/src/components/molecules/BoxButtons/BoxButtons.stories.js

@@ -0,0 +1,15 @@
+import { BoxButtons } from "./index";
+
+export default {
+  title: "Components/molecules/BoxButtons",
+  component: BoxButtons,
+};
+
+const Template = (args) => <BoxButtons {...args} />;
+
+export const BoxButtonsDefault = Template.bind({});
+
+BoxButtonsDefault.args = {
+    text:"texto prueba",
+    showAdd:true,
+};

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

@@ -0,0 +1,32 @@
+import { Container, ContainerIcon } from "./styles";
+import { Button } from "@mui/material";
+
+export const BoxButtons = ({ showAdd, onAdd, onDelete, isTheFirstBox, onToggleEdit, isEditEnabled  }) => {
+  return (
+      <Container>
+        <Button variant="outlined" className="button-circle" onClick={onToggleEdit}>
+          <ContainerIcon>
+            <span className={`iconos-out ${isEditEnabled ? "iconos-grises" : ""}`}>edit</span>
+          </ContainerIcon>
+        </Button>
+        {!isTheFirstBox && (
+          <Button
+            variant="outlined"
+            className="button-circle"
+            onClick={onDelete}
+          >
+            <ContainerIcon>
+              <span className="iconos-out">delete_forever</span>
+            </ContainerIcon>
+          </Button>
+        )}
+        {showAdd && (
+          <Button onClick={onAdd} variant="outlined" className="button-circle">
+            <ContainerIcon>
+              <span className="iconos-out iconos-grises">add</span>
+            </ContainerIcon>
+          </Button>
+        )}
+      </Container>
+  );
+};

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

@@ -0,0 +1,43 @@
+import styled from "styled-components";
+import { GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+    display:flex;
+    flex-direction:row;
+    gap:8px;
+  .button-circle{
+    width:30px;
+    height:30px;
+    padding:2px;
+    border-radius:100%;
+    min-width:30px;
+    border: 1px solid #F0F0F0;
+  }
+  .button-circle:hover {
+    border: 1px solid #F0F0F0;
+  }
+
+`;
+export const ContainerIcon = styled.div`
+cursor: pointer;
+@font-face {
+  font-family: "Material Symbols Outlined";
+  font-style: normal;
+  font-weight: 100 700;
+  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v68/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2)
+    format("woff2");
+}
+.iconos-out {
+  font-family: "Material Symbols Outlined";
+  font-size: 20px;
+  //line-height: 1;
+  margin-top: 10px;
+}
+.iconos-out {
+  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
+  color:  #B64545;
+}
+.iconos-grises {
+  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
+  color:  ${GlobalColors.gray};
+}`;

package/src/components/organisms/Box/Box.stories.js

@@ -0,0 +1,17 @@
+import { Box } from "./index";
+import LoginImage from "../../../assets/images/carouselImagesLogin/loginImage.svg";
+import Login2 from "../../../assets/images/carouselImagesLogin/login2.svg";
+import Login3 from "../../../assets/images/carouselImagesLogin/login3.svg";
+
+export default {
+  title: "Components/organisms/Box",
+  component: Box,
+};
+
+const Template = (args) => <Box {...args} />;
+
+export const BoxDefault = Template.bind({});
+BoxDefault.args = {
+  panelImg:[LoginImage, Login2, Login3],
+  panelText:"Elige la plataforma que conecta proovedores y retailers",
+};

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

@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import { Container } from "./styles";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+import { BoxOnboarding } from "../BoxOnboarding";
+import { BoxButtons } from "../../molecules/BoxButtons";
+
+export const Box = () => {
+  const [isDeleteDisabled, setIsDeleteDisabled] = useState(true);
+  const [isEditEnabled, setIsEditEnabled] = useState(false);
+  const [boxOnboardingList, setBoxOnboardingList] = useState([
+    {
+      showAdd: true,
+    },
+  ]);
+  
+  const handleAddBoxOnboarding = () => {
+    const newBoxOnboarding = {
+      showAdd: false, 
+    };
+
+    setBoxOnboardingList([...boxOnboardingList, newBoxOnboarding]);
+  };
+
+  const handleDeleteBoxOnboarding = (index) => {
+    if (index !== 0) {
+      const updatedBoxOnboardingList = [...boxOnboardingList];
+      updatedBoxOnboardingList.splice(index, 1);
+      setBoxOnboardingList(updatedBoxOnboardingList);
+    } else {
+      setIsDeleteDisabled(true);
+    }
+  };
+  const handleToggleEdit = () => {
+    setIsEditEnabled(!isEditEnabled);
+  };
+
+  return (
+    <Container fontFamily={FontFamily.Raleway} color={GlobalColors.original_magenta}>
+      <h1 fontFamily={FontFamily.Raleway}>Cajas</h1>
+      <div className="container-box">
+        {boxOnboardingList.map((boxOnboarding, index) => (
+          <>
+          <div className="container-buttons">
+            <BoxOnboarding key={index} showAdd={boxOnboarding.showAdd} isEditEnabled={isEditEnabled}/>
+            <BoxButtons
+              showAdd={boxOnboarding.showAdd}
+              onAdd={handleAddBoxOnboarding}
+              onDelete={() => handleDeleteBoxOnboarding(index)}
+              isDeleteDisabled={isDeleteDisabled}
+              onToggleEdit={handleToggleEdit}
+              isEditEnabled={isEditEnabled}
+            />
+          </div>
+           
+          </>
+        ))}
+       
+      </div>
+    </Container>
+  );
+};

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

@@ -0,0 +1,48 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  font-family: ${FontFamily.Roboto}, sans-serif;
+  font-weight: 400;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  font-size: var(--size);
+  line-height: 1.2;
+  height: auto;
+  border-radius: 10px;
+  background: white;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  text-align: center;
+  .container-buttons {
+    display: flex;
+    gap:10px;
+  }
+  .container-box{
+    display: flex;
+    flex-direction:column-reverse;
+    gap:10px;
+  }
+  #contenedor-caja {
+    display: flex;
+    justify-content: space-between;
+    color: #262626;
+    white-space: nowrap;
+    gap: 10px;
+  }
+  #atr-alto {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 6px;
+  }
+  h1 {
+    font-family: ${FontFamily.RobotoMedium}, sans-serif;
+    font-size: 17px;
+    line-height: 1.2;
+    font-weight: 500;
+    text-align: left;
+  }
+`;

package/src/components/organisms/BoxOnboarding/BoxOnboarding.stories.js

@@ -0,0 +1,17 @@
+import { BoxOnboarding } from "./index";
+import LoginImage from "../../../assets/images/carouselImagesLogin/loginImage.svg";
+import Login2 from "../../../assets/images/carouselImagesLogin/login2.svg";
+import Login3 from "../../../assets/images/carouselImagesLogin/login3.svg";
+
+export default {
+  title: "Components/organisms/BoxOnboarding",
+  component: BoxOnboarding,
+};
+
+const Template = (args) => <BoxOnboarding {...args} />;
+
+export const BoxOnboardingDefault = Template.bind({});
+BoxOnboardingDefault.args = {
+  panelImg:[LoginImage, Login2, Login3],
+  panelText:"Elige la plataforma que conecta proovedores y retailers",
+};

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

@@ -0,0 +1,63 @@
+import { Container, ContainerIcon } from "./styles";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+import { BoxAttribute } from "../../molecules/BoxAttribute";
+import { useState } from "react";
+
+export const BoxOnboarding = ({ panelColor, isEditEnabled }) => {
+  const [boxAttributesActive, setBoxAttributesActive] = useState(true);
+   
+  return (
+    <Container
+      panelColor={panelColor}
+      fontFamily={FontFamily.Raleway}
+      color={GlobalColors.original_magenta}
+    >
+      <div id="contenedor-caja">
+        <p fontFamily={FontFamily.Raleway}>Caja 1, chica</p>
+        {boxAttributesActive && (
+          <BoxAttribute
+            id="atr-alto"
+            borderType="rectangle"
+            className="caja"
+            text="Largo"
+            isEditEnabled={isEditEnabled}
+          ></BoxAttribute>
+        )}
+        {boxAttributesActive &&
+          <BoxAttribute
+            id="atr-alto"
+            borderType="rectangle"
+            className="caja"
+            text="Alto"
+            isEditEnabled={isEditEnabled}
+          ></BoxAttribute>
+        }
+        {boxAttributesActive &&
+        <BoxAttribute
+          id="atr-alto"
+          borderType="rectangle"
+          className="caja"
+          text="Ancho"
+          isEditEnabled={isEditEnabled}
+        ></BoxAttribute>}
+        {boxAttributesActive &&
+        <BoxAttribute
+          id="atr-alto"
+          borderType="rectangle"
+          className="caja"
+          text="Peso"
+          isEditEnabled={isEditEnabled}
+        ></BoxAttribute>}
+          {/* {boxAttributes.map((attr, index) => (
+          <BoxAttribute
+            key={attr.id}
+            id={`atr-alto-${index}`}
+            borderType="rectangle"
+            className="caja"
+            text="Largo"
+          ></BoxAttribute>
+        ))} */}
+      </div>
+    </Container>
+  );
+};

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

@@ -0,0 +1,44 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  font-family: ${FontFamily.Roboto}, sans-serif;
+  font-weight: 400;
+  font-size: var(--size);
+  line-height: 1.2;
+  background: white;
+  position: relative;
+  overflow: hidden;
+  width: 80%;
+  height: 100%;
+  text-align: center;
+  #contenedor-caja {
+    display: flex;
+    justify-content: space-between;
+    color: #262626;
+  }
+  #atr-alto {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  p {
+    font-family: ${FontFamily.RobotoMedium}, sans-serif;
+    font-size: 12px;
+    line-height: 1.2;
+    font-weight: 600;
+    align-self: center;
+  }
+  }
+  .icon-red {
+    color: #B64545;
+    height:18px;
+  }
+  .icon-gray {
+    color: #707070;
+  }
+  .icon-gray-l {
+    color: #707070;
+    height:18px;
+  }
+`

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

@@ -1,6 +1,8 @@
 import { Container } from "./styles";
 import { ScreenHeader } from "../../atoms/ScreenHeader";
 import { TagAndInput } from "../../molecules/TagAndInput";
+import { BoxOnboarding } from "../BoxOnboarding";
+import { Box } from "../Box";
 
 export const InputGroup = ({
   inputGroup = {},
@@ -16,6 +18,7 @@ export const InputGroup = ({
   version,
   dinamicHeight,
   compare,
+  dataGroup=12,
 }) => {
   const inputTypeValue = (type) => {
     switch (type) {
@@ -28,12 +31,19 @@ export const InputGroup = ({
     }
   };
 
+  const isOnboarding = (dataGroup, group) => {
+    const result = dataGroup === group;
+    return result;
+  }
+  
+
   const isEquals = (dataInputsVal, auditInputsVal) => {
     const result = dataInputsVal === auditInputsVal;
     return result;
   };
 
   return (
+    <>
     <Container
       className={
         activeSection === "Ficha técnica"
@@ -50,6 +60,8 @@ export const InputGroup = ({
       <div className="inputs-container">
         {inputGroup?.inputs?.map((input, index) =>
           activeSection === "Ficha técnica" ? (
+            <>
+            
             <TagAndInput
               key={
                 index +
@@ -92,6 +104,8 @@ export const InputGroup = ({
                   : ""
               }
             />
+            </>
+            
           ) : (
             <TagAndInput
               key={index + "-" + input?.value + "-" + compare}
@@ -123,5 +137,13 @@ export const InputGroup = ({
         )}
       </div>
     </Container>
+    <Container className={
+        activeSection === "Ficha técnica"
+          ? "datasheets-layout"
+          : "descriptions-layout"
+      }>
+      { isOnboarding && <Box/>}
+    </Container>
+    </>
   );
 };

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

@@ -473,7 +473,8 @@ export const ProviderProductEdition = ({
       product?.id_article || product?.article?.id_article,
       product?.article?.company_name || product?.categoryName,
       parseInt(product?.article?.id_category || product?.id_category),
-      version
+      version,
+      token
     );
 
     //Converts the data inside the datasheets object to array