contentoh-components-library 15.0.0 → 18.0.0

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

@@ -13,7 +13,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 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      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            & + * {\n              margin-left: 5px;\n            }\n          }\n\n          .buttons-box {\n            display: flex;\n            max-width: 201px;\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              width: 201px;\n              height: 40px;\n            }\n          }\n        }\n      }\n\n      .feedback-box {\n        display: flex;\n      }\n    }\n  }\n  .container {\n    width: 100%;\n    height: 100%;\n    .dropzone {\n      height: 100%;\n      width: 100%;\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      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  }\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;
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "15.0.0",
+  "version": "18.0.0",
   "dependencies": {
     "@babel/runtime": "^7.17.2",
     "@storybook/addon-postcss": "^2.0.0",
@@ -11,13 +11,17 @@
     "axios": "^0.25.0",
     "babel-preset-react-app": "^10.0.1",
     "chart.js": "^3.7.1",
+    "draft-js": "^0.11.7",
+    "file-saver": "^2.0.5",
     "js-base64": "^3.7.2",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-chartjs-2": "^4.0.1",
     "react-dom": "^17.0.2",
+    "react-draft-wysiwyg": "^1.14.7",
     "react-dropzone": "^12.0.4",
     "react-image-fallback": "^8.0.0",
+    "react-quill": "^1.3.5",
     "styled-components": "^5.3.3",
     "uuid": "^8.3.2",
     "web-vitals": "^1.0.1"

package/src/assets/images/generalButton/downloadIcon.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.7063 7.61134C13.2246 5.16759 11.0783 3.33301 8.5 3.33301C6.45292 3.33301 4.675 4.49467 3.78958 6.19467C1.6575 6.42134 0 8.22759 0 10.4163C0 12.7609 1.90542 14.6663 4.25 14.6663H13.4583C15.4133 14.6663 17 13.0797 17 11.1247C17 9.25467 15.5479 7.73884 13.7063 7.61134ZM12.0417 9.70801L8.5 13.2497L4.95833 9.70801H7.08333V6.87467H9.91667V9.70801H12.0417Z" fill="#817393"/>
+</svg>

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

@@ -1,9 +1,15 @@
 import { Container } from "./styles";
 
-export const CheckBox = ({ id, label, onChange, isFilter }) => {
+export const CheckBox = ({ id, label, onChange, isFilter, defaultChecked }) => {
   return (
     <Container key={`check-${id}`}>
-      <input type="checkbox" name={id} id={id} onChange={onChange} />
+      <input
+        type="checkbox"
+        name={id}
+        id={id}
+        onChange={onChange}
+        defaultChecked={defaultChecked}
+      />
       <label htmlFor={id}>
         {label && <p className={isFilter && "filter-text"}>{label}</p>}
       </label>

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

@@ -12,6 +12,7 @@ import saveIcon from "../../../assets/images/generalButton/saveIcon.svg";
 import saveIconHover from "../../../assets/images/generalButton/saveIconHover.svg";
 import deleteIcon from "../../../assets/images/generalButton/deleteIcon.svg";
 import deleteIconHover from "../../../assets/images/generalButton/deleteIconHover.svg";
+import downloadIcon from "../../../assets/images/generalButton/downloadIcon.svg";
 import { GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.button`
@@ -92,6 +93,19 @@ export const Container = styled.button`
         border: 1px solid ${GlobalColors.magenta_s2};
       }
     }
+
+    &.download-button {
+      background-image: url(${downloadIcon});
+      border: 1px solid ${GlobalColors.s3};
+      border-radius: 15px;
+      background-size: 15px;
+
+      &:hover {
+        color: white;
+        background-color: ${GlobalColors.magenta_s2};
+        border: 1px solid ${GlobalColors.magenta_s2};
+      }
+    }
   }
 
   &.general-arrow-button {

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

@@ -1,21 +1,15 @@
-import { isValid } from "js-base64";
-import { number } from "prop-types";
 import { useEffect, useState } from "react";
-import { version } from "styled-components";
 import { Container } from "./styles";
+import { InputFormatter } from "../InputFormatter";
 
 export const GeneralInput = ({
   inputType,
   inputId,
-  inputCols,
-  inputRows,
-  inputName,
   inputValue,
   articleId,
   isRequired,
   version,
   inputPlaceholder,
-  updatedDescriptions,
   setUpdatedDescriptions,
   updatedDatasheets,
   setUpdatedDatasheets,
@@ -36,16 +30,6 @@ export const GeneralInput = ({
       );
   };
 
-  const onHandleTextAreaChange = (e) => {
-    setTextValue(({ value }) => (value = e.target.value));
-    updatedDatasheets &&
-      addTextAreaToArray(
-        e.target.value,
-        updatedDescriptions,
-        setUpdatedDescriptions
-      );
-  };
-
   useEffect(() => {
     if (dinamicHeight) {
       const input = document.querySelector(
@@ -57,7 +41,7 @@ export const GeneralInput = ({
     }
   }, [textValue]);
 
-  const addTextAreaToArray = (textValue, array, setArray) => {
+  const addTextAreaToArray = (textValue, array = [], setArray) => {
     const tempDescriptions = array;
     const newArticle = {
       articleId: articleId,
@@ -65,18 +49,18 @@ export const GeneralInput = ({
       value: textValue,
       versionId: version,
     };
-    const isOnArray = tempDescriptions.some((desc, index) => {
+    const isOnArray = tempDescriptions?.some((desc, index) => {
       if (desc.attributeId === newArticle.attributeId) {
         tempDescriptions[index] = newArticle;
         return true;
       }
     });
-    !isOnArray && tempDescriptions.push(newArticle);
+    !isOnArray && tempDescriptions?.push(newArticle);
     setArray(tempDescriptions);
   };
 
   return (
-    <Container isRequired={isRequired && !textValue}>
+    <Container isRequired={isRequired && !textValue.value}>
       {inputType !== "textarea" ? (
         <input
           type={inputType}
@@ -87,15 +71,14 @@ export const GeneralInput = ({
           onChange={onHandleChange}
         />
       ) : (
-        <textarea
-          name={inputName}
+        <InputFormatter
           id={"description-" + inputId + "-" + index}
-          cols={inputCols}
-          rows={inputRows}
-          placeholder={inputPlaceholder}
-          value={textValue.value}
-          onChange={onHandleTextAreaChange}
-        ></textarea>
+          addTextAreaToArray={addTextAreaToArray}
+          updatedDescriptions={updatedDatasheets}
+          setUpdatedDescriptions={setUpdatedDescriptions}
+          inputValue={inputValue?.replace(/<br>/gm, "<p><br></p>")}
+          isRequired={isRequired && !inputValue}
+        ></InputFormatter>
       )}
     </Container>
   );

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

@@ -1,10 +1,10 @@
 import { Container } from "./styles";
 
-export const GenericModal = ({ componentsArray = [], buttonType }) => {
+export const GenericModal = ({ componentsArray = [], buttonType, onClick }) => {
   return (
     <Container>
       <div className={"global-styles " + buttonType}>
-        <button className="close-button" />
+        <button className="close-button" onClick={onClick} />
         {componentsArray?.map((component) => component)}
       </div>
     </Container>

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

@@ -12,6 +12,9 @@ export const Container = styled.div`
   position: fixed;
   background-color: rgba(59, 59, 59, 0.53);
   backdrop-filter: blur(4px);
+  top: 0;
+  left: 0;
+  z-index: 100;
 
   .global-styles {
     background-color: ${GlobalColors.deep_gray};

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

@@ -2,8 +2,9 @@ import { MainContainer, InputCustom } from "./style";
 
 export default function Input(props) {
   return (
-    <MainContainer width={props.width} error={props.error}>
+    <MainContainer error={props.error}>
       <InputCustom
+        autoFocus
         onChange={(event) =>
           props.onChange && props.onChange(event.target.value)
         }

package/src/components/atoms/Input/style.js

@@ -1,9 +1,10 @@
 import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
 
 export const MainContainer = styled.div`
   display: flex;
   align-items: center;
-  width: ${(props) => (props.width ? props.width : "150px")};
+  width: fit-content;
   height: 20px;
   padding: 0 5px;
   box-sizing: border-box;
@@ -15,11 +16,14 @@ export const MainContainer = styled.div`
 export const InputCustom = styled.input`
   border-width: 0;
   width: 100%;
-  font-family: Avenir Next;
-  font-style: normal;
-  font-weight: normal;
+  font-family: ${FontFamily.AvenirNext};
+  font-weight: 400;
+  font-size: 11px;
+  line-height: 19px;
   border-width: 0;
-  background-color: rgba(0, 0, 0, 0);
+  color: ${GlobalColors.s5};
+  background-color: ${GlobalColors.s2};
+  outline: none;
   &::placeholder {
     font-size: 12px;
     color: #d4d1d7;

package/src/components/atoms/InputFormatter/Wysiwyg.stories.js

@@ -0,0 +1,12 @@
+import { InputFormatter } from "./index";
+
+export default {
+  title: "Components/atoms/InputFormatter",
+  component: InputFormatter,
+};
+
+const Template = (args) => <InputFormatter {...args} />;
+
+export const DefaultInputFormatter = Template.bind({});
+
+DefaultInputFormatter.args = { text: "hola mundo" };

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

@@ -0,0 +1,76 @@
+import ReactQuill from "react-quill";
+import "react-quill/dist/quill.snow.css";
+import { useState } from "react";
+import { Container } from "./styles";
+
+export const InputFormatter = ({
+  inputValue = "",
+  id,
+  updatedDescriptions,
+  setUpdatedDescriptions,
+  addTextAreaToArray,
+  isRequired,
+}) => {
+  const [convertedText, setConvertedText] = useState(inputValue);
+  const [focus, setFocus] = useState(false);
+  const [selection, setSelection] = useState(false);
+  const [position, setPosition] = useState({ left: 0, top: 0 });
+
+  const onHandleTextAreaChange = (value) => {
+    setConvertedText((current) => (current = value));
+    !id.includes("commentary") &&
+      addTextAreaToArray(
+        value.replace(/<\/?p>/gm, ""),
+        updatedDescriptions,
+        setUpdatedDescriptions
+      );
+  };
+
+  function getSelectionText() {
+    setPosition({ left: 0, top: 0 });
+    var text = "";
+    if (window.getSelection) {
+      text = window.getSelection().toString();
+    } else if (document.selection && document.selection.type != "Control") {
+      text = document.selection.createRange().text;
+    }
+    setSelection(text.length > 0);
+  }
+
+  const getCursorPosition = (e) => {
+    const input = document.getElementById(id);
+    const elementPosition = input.getBoundingClientRect();
+    position.top === 0 &&
+      position.left === 0 &&
+      setPosition({
+        left: e.clientX - elementPosition.x,
+        top: e.clientY - elementPosition.y,
+      });
+  };
+
+  return (
+    <Container
+      focus={focus}
+      selection={selection}
+      position={position}
+      isRequired={isRequired}
+      onClick={(e) => {
+        getCursorPosition(e);
+      }}
+    >
+      <ReactQuill
+        id={id}
+        value={convertedText}
+        onChange={onHandleTextAreaChange}
+        modules={{ toolbar: ["bold"] }}
+        onFocus={() => setFocus(true)}
+        onBlur={() => {
+          setFocus(false);
+          setSelection(false);
+          setPosition({ left: 0, top: 0 });
+        }}
+        onChangeSelection={() => getSelectionText()}
+      />
+    </Container>
+  );
+};

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

@@ -0,0 +1,34 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  .quill {
+    border: 1px solid
+      ${({ focus, isRequired }) =>
+        focus ? GlobalColors.magenta_s2 : isRequired ? "red" : GlobalColors.s3};
+    position: relative;
+    border-radius: 2px;
+
+    .ql-toolbar {
+      background-color: ${GlobalColors.s2};
+      position: absolute;
+      z-index: 10;
+      border: 1px solid ${GlobalColors.s3};
+      width: 45px;
+      height: 45px;
+      border-radius: 4px;
+      visibility: ${({ selection }) => (selection ? "visible" : "hidden")};
+      top: ${({ position }) => position.top}px;
+      left: ${({ position }) => position.left}px;
+    }
+
+    .ql-container {
+      border: none;
+      font-family: ${FontFamily.AvenirNext};
+      color: ${GlobalColors.s4};
+      strong {
+        font-family: ${FontFamily.Raleway_900};
+      }
+    }
+  }
+`;

package/src/components/atoms/LabelToInput/style.js

@@ -1,9 +1,10 @@
 import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
 
 export const MainContainer = styled.div`
   display: flex;
   align-items: center;
-  width: ${(props) => (props.width ? props.width : "150px")};
+  width: fit-content;
   height: 20px;
   padding: 0 5px;
   box-sizing: border-box;
@@ -13,7 +14,14 @@ export const MainContainer = styled.div`
   overflow-x: auto;
   overflow-y: hidden;
   & > p {
-    color: #000;
+    font-family: ${FontFamily.AvenirNext};
+    font-weight: 400;
+    font-size: 11px;
+    line-height: 19px;
+    color: ${GlobalColors.s5};
+    background-color: ${GlobalColors.s2};
+    padding: 1px 3px;
+    border-radius: 3px;
   }
   border: ${(props) => props.error && "1px solid red"};
   ::-webkit-scrollbar {

package/src/components/atoms/ProductPercentCard/Percent.stories.js

@@ -0,0 +1,41 @@
+import { ProductPercentCard } from "./index";
+
+const status = [
+  "-",
+  "Pr",
+  "Rc",
+  "As",
+  "P",
+  "QF",
+  "AF",
+  "AA",
+  "AP",
+  "AC",
+  "RA",
+  "RF",
+  "RP",
+  "RC",
+  "Ex",
+];
+
+export default {
+  title: "Components/atoms/ProductPercentCard",
+  component: ProductPercentCard,
+  argTypes: {
+    statusType: {
+      options: status,
+      control: { type: "select" },
+    },
+  },
+};
+
+const Template = (args) => <ProductPercentCard {...args}/>;
+
+export const ProductPercentCardDefault = Template.bind ({});
+
+ProductPercentCardDefault.args = {
+  statusType: "-",
+  productsInStatus: 0,
+  totalProcucts: 0,
+
+};

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

@@ -0,0 +1,23 @@
+import { Container } from "./styles";
+import polygon from "../../../assets/images/arrow/polygon.svg";
+
+export const ProductPercentCard = ({
+  statusType,
+  totalProcucts = 0,
+  productsInStatus = 0,
+}) => {
+  var result = (productsInStatus / totalProcucts) * 100;
+
+  var percent = result.toString().search(/\./) ? result.toFixed(2) : result;
+  
+  return (
+    <Container className={`status-${statusType}`}>
+      <p className="text">Productos en proceso</p>
+      <div className="percent-text">
+        <p className="number">{productsInStatus}</p>
+        <img src={polygon} alt="" />
+        <span className="span">{percent == "NaN" ? 0 : percent}%</span>
+      </div>
+    </Container>
+  );
+};

package/src/components/atoms/{Percent → ProductPercentCard}/styles.js

@@ -3,10 +3,10 @@ import { GlobalColors, FontFamily } from "../../../global-files/variables";
 
 export const Container = styled.div`
   border-radius: 7px;
-  width: 97px;
+  max-width: fit-content;
+  flex-direction: column;
   height: 83px;
-  text-align: center;
-  padding: 15px;
+  padding: 10px;
 
   &.status-Pr,
   &.status-Rc {
@@ -60,20 +60,24 @@ export const Container = styled.div`
 
   .text {
     color: ${GlobalColors.s4};
+    text-align: center;
     font-size: 12px;
+    width: 70px;
     font-family: ${FontFamily.Raleway};
     line-height: 14px;
+    margin: auto;
   }
   .percent-text {
     display: flex;
+    font-family: ${FontFamily.AvenirNext};
+    align-items: center;
     .number {
-      font-family: ${FontFamily.AvenirNext};
       font-size: 28px;
       color: ${GlobalColors.s4};
     }
-    .span{
-    padding-top: 8px;
-    font-size: 18px;
+    .span {
+      padding-top: 8px;
+      font-size: 18px;
     }
   }
 `;

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

@@ -17,6 +17,9 @@ export const GalleryElement = ({
   imageType,
   imagePackagingType,
   changeImage,
+  selectedImages,
+  setSelectedImages,
+  setCheckAll,
 }) => {
   const [statusValidation, setStatusValidation] = useState(validation);
   const [showValidationPanel, setShowValidationPanel] = useState(false);
@@ -31,6 +34,20 @@ export const GalleryElement = ({
     }
   };
 
+  const checkOnChange = (e) => {
+    const chkGlobal = document.getElementById("check-all-images");
+    const checkboxList = document.querySelectorAll("[id^='gallery-element-']");
+    let temp = selectedImages.slice();
+    e.target.checked
+      ? temp.push(image)
+      : (temp = temp.filter((img) => image.id !== img.id));
+    let counter = 0;
+    checkboxList?.forEach((chk) => chk.checked && counter++);
+    chkGlobal.checked = checkboxList.length === counter;
+    setCheckAll(checkboxList.length === counter);
+    setSelectedImages(temp);
+  };
+
   useEffect(() => {
     if (showValidationPanel) {
       document.addEventListener("click", closeValidationPanel, false);
@@ -40,7 +57,7 @@ export const GalleryElement = ({
   return (
     <Container className={gridLayout ? "grid-gallery" : "row-gallery"}>
       <div className="buttons-container">
-        <CheckBox id={id} label={label} />
+        <CheckBox id={id} label={label} onChange={(e) => checkOnChange(e)} />
       </div>
       <div className="image-container">
         <ProductImage

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

@@ -1,11 +1,17 @@
 import { Container } from "./styles";
 import { CheckBox } from "../../atoms/CheckBox";
 
-export const GalleryHeader = () => {
+export const GalleryHeader = ({ setCheckAll, setSelectedImages }) => {
+  const checkAll = (e) => {
+    const checkboxList = document.querySelectorAll("[id^='gallery-element-']");
+    checkboxList.forEach((chk) => (chk.checked = e.target.checked));
+    setCheckAll(e.target.checked);
+    if (!e.target.checked) setSelectedImages([]);
+  };
   return (
     <Container>
       <div>
-        <CheckBox />
+        <CheckBox id="check-all-images" onChange={(e) => checkAll(e)} />
       </div>
       <p className="image-header">Image</p>
       <p className="image-name">Nombre</p>

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

@@ -11,20 +11,17 @@ export const StatusAsignationInfo = ({
   status = "-",
   imagesSection,
   setImageLayout,
-  asignationsList,
   percent = 0,
-  activeTab,
-  deleteImages,
-  saveDatasheets,
-  saveDescriptions,
-  updateImages,
   assignationsImages,
   setAssignation,
   isRetailer,
+  downloadImages,
+  askToDeleteImages,
   id = "default-id",
+  onClickSave,
 }) => {
   const [showAsignationPanel, setShowAsignationPanel] = useState(false);
-  const [layout, setLayout] = useState(true);
+  const [layout, setLayout] = useState(false);
   const [assignationType, setAssignationType] = useState("facilitator");
 
   const closeAsignations = (e) => {
@@ -44,29 +41,20 @@ export const StatusAsignationInfo = ({
     <Container id={id}>
       <Button
         buttonType={"circular-button save-button"}
-        onClick={() => {
-          switch (activeTab) {
-            case "Descripción":
-              saveDescriptions && saveDescriptions();
-              break;
-            case "Ficha técnica":
-              saveDatasheets && saveDatasheets();
-              break;
-            case "Imágenes":
-              updateImages && updateImages();
-              break;
-
-            default:
-              break;
-          }
-        }}
+        onClick={onClickSave}
       />
       {imagesSection && (
         <div className="images-buttons">
           <Button
             buttonType={"circular-button delete-button"}
             onClick={() => {
-              deleteImages && deleteImages();
+              askToDeleteImages && askToDeleteImages();
+            }}
+          />
+          <Button
+            buttonType={"circular-button download-button"}
+            onClick={() => {
+              downloadImages();
             }}
           />
           <Button

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

@@ -9,6 +9,7 @@ export const TableHeader = ({
   assignationsImages,
   setAssignation,
   isRetailer,
+  onClickSave,
 }) => {
   return (
     <Container>
@@ -22,6 +23,7 @@ export const TableHeader = ({
         assignationsImages={assignationsImages}
         setAssignation={setAssignation}
         isRetailer={isRetailer}
+        onClickSave={onClickSave}
       />
     </Container>
   );

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

@@ -18,7 +18,7 @@ export const FullProductNameHeader = ({
       <ProductNameHeader
         productName={headerData?.article?.name}
         statusType={headerData?.status}
-        percent={percent}
+        percent={percent?.toFixed(0)}
         priority={headerData?.prio}
         date={new Date(headerData?.article?.timestamp).toLocaleDateString()}
       />