contentoh-components-library 21.3.16 → 21.3.18

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

@@ -16,74 +16,76 @@ ProviderProductEditionDefault.args = {
     Imágenes: true,
   },
   token:
-    "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIyOWY3YWY3Zi0yNmQ0LTRiMWItODZmZS0zOWY2ZTUyMDFhNzAiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2OTkyNzAyMSwibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2Njk5MzA2MjEsImlhdCI6MTY2OTkyNzAyMSwiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.NK6hVSiBksguboJ1m8yYqtDq19kzgE3GqYDEJHLUya_n_TsXriv6W1ypq7XiSo9zrqWcmHBpOoJQS7WbWzjGe__NlJEXjo8bykS8QBTTOiMrKxz1KzGRYJkwgG0axk-zVysUQH0_y-fbwgEgMPtd6qO46DB_KlFI_PEL1-uR5MJ9U0kNkS61gMbHwFQFs_DU-sS01NxjBsjUEp783rs1r-jm7TelZac1rGaFNUyi5vHdSozYzlnzfzGcuACZ0lHqvah2FHbDyurp-G_uhpUn5lNmcL4rVNh2lDd4TOnhJ3AtN1wGSmtErmhjmBHTvavh1ub9pklA1B9qjVuTRpYANw",
+    "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIwM2ViMjZhMC1hYjU2LTQ3NjctYjY0Zi04NDkyNTgwNzcwMmEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjAzZWIyNmEwLWFiNTYtNDc2Ny1iNjRmLTg0OTI1ODA3NzAyYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJmNmNkMzA1My1iODE4LTQzYzgtOGZhMC0yNTZmMTBhMDYwNjciLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY3NDU5OTgwNiwibmFtZSI6IlBydWViYSBNZXJjaGFudHMiLCJwaG9uZV9udW1iZXIiOiIrNTIxMjM0NTY3ODkxIiwiZXhwIjoxNjc0NjAzNDA2LCJpYXQiOjE2NzQ1OTk4MDYsImVtYWlsIjoibWVyY2hhbnRzMjRlbmVAYWxsZnJlZW1haWwubmV0In0.osGY8Rdr20hTwL86dZ_CzXxHLvPe-L0iaLtWVwJ78prdMlbDoEZWNePr-Di1rb8F2efV6FAsf9mELW6Tw3PETo_d5yeDEPVAGD0pXFvVntTlSrJGtfEDMnpNWTG2uaMlL1_zJ8BcFYmIUniZN8VvEKW6ezFOt01cK3We-Vrv92TqKa-ePQRkDnhKu52nnTgxs5aysGf-mYLxLumQ4TcOPXJ2x6OsszedJaujFDeCPN7JVGbg9HC68__WklpgocSasU6fQg4Glh1kXWQ-fy4XaFw6cBParJjkqic2Gg1iqwB5wGbrwD4E0crZyPkgwwPydTLLu6WguGWBuQHhcoG-xg",
   articleId: 238,
   category: 846,
   version: 2,
   productSelected: {
-    id_article: 3,
-    id_category: 2032,
-    name: "CORTINA BLACKOUT DE POLIÉSTER CAFÉ 2.13 X 1.06 M",
-    upc: "161157",
-    timestamp: "2022-11-14T16:02:47.000Z",
-    categoryName: "Decoración|Cortinas y Persianas|Cortinas",
+    category: "Decoración|Accesorios Decorativos|Accesorios Decorativos",
+    company_name: "merchants24ene@allfreemail.net",
+    company_id: 918,
+    id_category: "2028",
+    id_article: 432,
+    name: "VELA AROMA 18 OZ MAN/CAN",
+    upc: "102852",
     version: 1,
     retailersAvailable: [
       {
-        name: "The Home Depot Golden",
-        id: 58,
+        id: 68,
+        name: "The Home Depot Merchants",
       },
     ],
   },
   productToEdit: {
-    idCategory: 2032,
-    ArticleId: 3,
+    idCategory: "2028",
+    ArticleId: 432,
     product: [
       {
-        id_article: 3,
-        id_category: 2032,
-        name: "CORTINA BLACKOUT DE POLIÉSTER CAFÉ 2.13 X 1.06 M",
-        upc: "161157",
-        timestamp: "2022-11-14T16:02:47.000Z",
-        categoryName: "Decoración|Cortinas y Persianas|Cortinas",
+        category: "Decoración|Accesorios Decorativos|Accesorios Decorativos",
+        company_name: "merchants24ene@allfreemail.net",
+        company_id: 918,
+        id_category: "2028",
+        id_article: 432,
+        name: "VELA AROMA 18 OZ MAN/CAN",
+        upc: "102852",
         version: 1,
         retailersAvailable: [
           {
-            name: "The Home Depot Golden",
-            id: 58,
+            id: 68,
+            name: "The Home Depot Merchants",
           },
         ],
       },
     ],
   },
   location: {
-    state: { origin: "Contentoh" },
+    state: { origin: "Contentoh", withChat: true },
   },
   user: {
-    id_user: 28,
-    name: "Ismael",
-    last_name: "López",
-    email: "ilopez@contentoh.com",
-    position: "Test States",
-    telephone: "+523111366336",
+    id_user: 140,
+    name: "Prueba",
+    last_name: "Merchants",
+    email: "merchants24ene@allfreemail.net",
+    position: "merchants24ene@allfreemail.net",
+    telephone: "+521234567891",
     country: "México",
-    id_company: 1,
-    id_cognito: "f5927f8e-cbf7-4922-9e09-e69ec0b2731a",
+    id_company: 918,
+    id_cognito: "03eb26a0-ab56-4767-b64f-84925807702a",
     birth_Date: null,
-    about_me: "",
-    zip_code: "",
-    address: "",
-    job: "",
-    id_stripe: "cus_KuEt6R6vwmN09f",
+    about_me: null,
+    zip_code: null,
+    address: null,
+    job: null,
+    id_stripe: null,
     id_role: 0,
     active: 1,
     is_retailer: 0,
-    email_notify: 0,
-    is_user_tech: "AS",
+    email_notify: 1,
+    is_user_tech: null,
     membership: {
-      id: 76,
-      start_date: "2022-01-18T17:25:35.000Z",
-      end_date: "2023-01-18T17:25:35.000Z",
+      id: 109,
+      start_date: "2023-01-24T22:07:34.000Z",
+      end_date: "2024-01-24T22:07:34.000Z",
       planID: 8,
       plan: "prod_KtlhECVSFG2iro",
       name: "Plan Pro",
@@ -91,21 +93,37 @@ ProviderProductEditionDefault.args = {
       products_limit: "5000",
       type: "Enterprise",
     },
-    src: "https://content-management-profile.s3.amazonaws.com/id-28/28.png?1669927021851",
+    src: "https://content-management-profile.s3.amazonaws.com/id-140/140.png?1674599807427",
   },
   company: {
-    id_company: 1,
-    trade_name: "GRUPO BRAHMA",
-    company_name: "GRUPO BRAHMA",
-    rfc: "XAXX010101000",
-    adress: "AA",
-    about_company: "",
-    telephone: "",
-    web_site: "",
-    zip_code: "",
+    id_company: 918,
+    trade_name: "merchants24ene@allfreemail.net",
+    company_name: "merchants24ene@allfreemail.net",
+    rfc: "merchants24ene@allfreemail.net",
+    adress: "merchants24ene@allfreemail.net",
+    about_company: null,
+    telephone: null,
+    web_site: null,
+    zip_code: null,
     email: null,
-    social_link: "",
+    social_link: null,
     is_retailer: 0,
+    financedRetailers: [
+      {
+        id: 68,
+        name: "The Home Depot Merchants",
+        country: "México",
+        id_region: 1,
+        active: 1,
+      },
+    ],
+    retailers: [
+      {
+        id: null,
+        name: null,
+        country: null,
+      },
+    ],
   },
   showSurvey: (v) => v && alert("se muestra"),
 };

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

@@ -42,6 +42,7 @@ import Slide1_4 from "../../../assets/images/sliderToolTip/slide4.svg";
 import Slide1_5 from "../../../assets/images/sliderToolTip/slide5.svg";
 import { VersionSelector } from "../../organisms/VersionSelector";
 import { useCloseModal } from "../../../global-files/customHooks";
+import { number } from "prop-types";
 
 const reducerImages = (state, action) => {
   let { values, attrForImgs, inputsByRetailer } = state;
@@ -133,6 +134,7 @@ export const ProviderProductEdition = ({
   setShowContentohRequestModal,
   showSurvey,
   company,
+  withChat,
 }) => {
   const [activeTab, setActiveTab] = useState("Descripción");
   const [activeImage, setActiveImage] = useState();
@@ -272,8 +274,7 @@ export const ProviderProductEdition = ({
 
     setImages({ action: "init", init: services[2] });
     if (services[2]?.values?.length > 0) setActiveImage(0);
-
-    getPercentage({ data: [product] }).then((res) => setPercentages(res));
+    getPercentage({ data: [product] }).then((res) => setPercentages(res[0]));
     setLoading(false);
   };
 
@@ -363,12 +364,13 @@ export const ProviderProductEdition = ({
   useEffect(() => {
     const productTemp = product;
     const retailers = productTemp?.retailersAvailable || productTemp?.retailers;
-    retailers?.forEach((retailer) => {
-      retailer["percentage"] = percentages?.find(
-        (percent) => retailer?.id === percent?.id_retailer
-      )?.percentage;
-    });
-
+    if (Object.keys(percentages[productTemp.id_article] ?? {})?.length > 0) {
+      retailers?.forEach((retailer, index) => {
+        retailer["percentage"] = Number(
+          percentages[productTemp.id_article][retailer.id].percentageRequired
+        );
+      });
+    }
     setProduct(productTemp);
     setActivePercentage(retailers[0]?.percentage);
   }, [percentages]);
@@ -1056,7 +1058,12 @@ export const ProviderProductEdition = ({
   ];
   return (
     <Container headerTop={headerTop}>
-      <HeaderTop setHeaderTop={setHeaderTop} />
+      <HeaderTop
+        setHeaderTop={setHeaderTop}
+        withChat={location?.state?.withChat}
+        productSelected={productSelected}
+        token={token}
+      />
       <div className="data-container">
         <div className="image-data-panel">
           <ImagePreviewer

package/src/components/pages/RetailerProductEdition/RetailerProductEdition.stories.js

@@ -12,54 +12,49 @@ export const RetailerProductEditionDefault = Template.bind({});
 RetailerProductEditionDefault.args = {
   tabsSections: {
     Descripción: true,
-    "Ficha técnica": false,
-    Imágenes: false,
+    "Ficha técnica": true,
+    Imágenes: true,
   },
   token:
-    "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJhNmM0ZDNkNi0yNGE0LTQxZDQtYWQwZi1kMDg3NDM4YWI1YjYiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6ImE2YzRkM2Q2LTI0YTQtNDFkNC1hZDBmLWQwODc0MzhhYjViNiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI0MmE2OWE4My02OGY0LTRmZjktOGU4Zi1jYzgxODQ5MDU5NGYiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2OTkyODUxMSwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTY2OTkzMjExMSwiaWF0IjoxNjY5OTI4NTExLCJlbWFpbCI6ImV0Y0Bjb250ZW50b2guY29tIn0.Mv1hFVjkF2y__7XP0bXzU2Yq8YMc0go9OgB7all5F4HvfK62I0l9rNRqddlaLjDSCmjvyYI-M8WFwHtdlOL1-liazZr8hhu7_9SciapRzkuuHlWwu0g3EEK54NuHR3-YYRax85hKyN9YoV1MY_fTzT9WUVXWoqf4UPj2SH79g_A0l0lm18ODzzdhXFSpubuI8-Ml7MbXUh8klzl7T55S16sj8zPONpesrA01WsG1PWGqfRZI2g37edj_en2_fIcfi49tQjbSjnQOVOPnkO5TPiyoMtZdS53Rx75iSI8-fP-Z7kD-5TI_KK6vK35PHoG1B-N3EzDUjXek4MowNswnGA",
+    "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI1ODg0YWUzNC01OWQ2LTQ0NTQtYjk4ZS04MjE1MThiY2MzYTciLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjU4ODRhZTM0LTU5ZDYtNDQ1NC1iOThlLTgyMTUxOGJjYzNhNyIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJmMzY2YTdjYi02YjA0LTRiMzAtOTJmYy1iMzY0MmY3ZjEzNmEiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY3MTc0MzE0OSwibmFtZSI6IkNhZGVuYSBJc21hZWwiLCJwaG9uZV9udW1iZXIiOiIrNTIzMTExMzY2MzM2IiwiZXhwIjoxNjcxNzQ2NzQ5LCJpYXQiOjE2NzE3NDMxNDksImVtYWlsIjoiY2FkZW5hLmlzbWFlbEBhbGxmcmVlbWFpbC5uZXQifQ.J8kTv1sEotxoicaRclaK1r0tjVbwHPDxIzdDfxYo9J4XwBYYfS180__KYYE0Dh1AfUK_K0mrk2_78_rhTNxCQT85W7XS3ZEcxIOUekqoxaKFl8LSVN_eWz3SlsGG0yRflhJGt6d4gBVByXZbdNiyp1rkjgMln6fhwlRUnuGRbG1WKQvdAPli3qfH8mLzgoTz-6HWs1Jf2Ujheavf3ipGMNtj-OSUdQsh04Ov7jehDWdnPNn2s2DAl4eubgjdXrwIiBPCRkbuFeYZZJpzj1wy__a0nCM7bzly5uTZ2aWujgEJvf9bJb-Y4gkS8TxyJaggJ01ZsMki36aEpIt8J1tJag",
   productSelected: {
     services: {
       datasheets: 1,
       descriptions: 1,
       images: 1,
     },
-    orderId: 123,
-    status: "PA",
-    datasheet_status: "PA",
+    orderId: 194,
+    status: "AC",
+    datasheet_status: "AC",
     prio: "none",
     version: 3,
-    description_status: "PA",
-    images_status: "PA",
+    description_status: "AC",
+    images_status: "AC",
     statusByRetailer: {
-      4: {
-        datasheet: "PA",
-        description: "PA",
-        images: "PA",
+      40: {
+        description: "AC",
+        images: "AC",
+        datasheet: "AC",
       },
-      5: {
-        datasheet: "PA",
-        description: "PA",
-        images: "PA",
-      },
-      6: {
-        datasheet: "PA",
-        description: "PA",
-        images: "PA",
+      43: {
+        datasheet: "AC",
+        description: "AC",
+        images: "AC",
       },
     },
     article: {
-      id_article: 127,
-      id_category: "700",
-      name: "prueba prod flujo",
-      upc: "34234353324",
-      timestamp: "2022-11-23T23:12:30.000Z",
+      id_article: 354,
+      id_category: "684",
+      name: "Enjuague Bucal ",
+      upc: "22342342",
+      timestamp: "2023-01-03T16:19:49.000Z",
       id_user: 28,
       status: "NULL",
       active: 1,
       company_id: 1,
       company_name: "GRUPO BRAHMA",
       country: "México",
-      id_order: 123,
+      id_order: 194,
       id_datasheet_especialist: 54,
       id_datasheet_facilitator: 52,
       id_description_especialist: 54,
@@ -68,42 +63,37 @@ RetailerProductEditionDefault.args = {
       id_images_facilitator: 53,
       id_auditor: 37,
       id_recepcionist: null,
-      category:
-        "Salud y Belleza|Cuidado Facial|Cremas, Mascarillas y Tratamientos",
+      category: "Salud y Belleza|Cuidado Bucal|Pastas Dentales y Aseo Bucal",
       missingAttributes: 0,
       missingDescriptions: 0,
       missingImages: 0,
     },
     retailers: [
       {
-        id: 4,
-        name: "Walmart Super y Superama",
-      },
-      {
-        id: 5,
-        name: "Chedraui",
+        id: 40,
+        name: "Nadro",
       },
       {
-        id: 6,
-        name: "HEB",
+        id: 43,
+        name: "City Club",
       },
     ],
     country: "México",
-    upc: "34234353324",
+    upc: "22342342",
   },
   location: {
-    product: { articleId: 109485, versionId: 3 },
+    product: { articleId: 354, versionId: 3 },
   },
   user: {
-    id_user: 51,
-    name: "ADMIN PRUEBA",
-    last_name: "",
-    email: "etc@contentoh.com",
+    id_user: 65,
+    name: "Oscar Alberto",
+    last_name: "Arenas",
+    email: "oarenas@contentoh.com",
     position: "",
     telephone: "",
     country: "",
     id_company: 2,
-    id_cognito: "a6c4d3d6-24a4-41d4-ad0f-d087438ab5b6",
+    id_cognito: "73cc8d40-c841-422a-a2f2-e69d7fe26ebf",
     birth_Date: null,
     about_me: "",
     zip_code: "",
@@ -114,7 +104,7 @@ RetailerProductEditionDefault.args = {
     active: 1,
     is_retailer: 0,
     email_notify: 1,
-    is_user_tech: null,
+    is_user_tech: "AS",
     membership: {
       id: 2,
       start_date: "2021-11-05T02:35:12.000Z",
@@ -126,6 +116,6 @@ RetailerProductEditionDefault.args = {
       products_limit: "3",
       type: "PyMES",
     },
-    src: "https://content-management-profile.s3.amazonaws.com/id-51/51.png?1669928511679",
+    src: "https://content-management-profile.s3.amazonaws.com/id-65/65.png?1675063399869",
   },
 };

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

@@ -175,6 +175,7 @@ export const RetailerProductEdition = ({
   const [percentages, setPercentages] = useState(
     new Array(product?.retailers?.length).fill({ percentage: 0 })
   );
+  // const [percentages, setPercentages] = useState([{ retailers: {} }]);
   const [activePercentage, setActivePercentage] = useState(0);
   const [activeRetailer, setActiveRetailer] = useState({});
   const [services, setServices] = useState([]);
@@ -225,12 +226,9 @@ export const RetailerProductEdition = ({
       //Converts the data inside the datasheets object to array
       setServices(services);
       getServices();
-
-      // setActiveRetailer(product?.retailers[0]);
       setImages({ action: "init", init: services[2] });
       if (services[2]?.values?.length > 0) setActiveImage(0);
-
-      getPercentage({ data: [product] }).then((res) => setPercentages(res));
+      getPercentage({ data: [product] }).then((res) => setPercentages(res[0]));
       setLoading(false);
     } catch (error) {
       console.log(error);
@@ -371,12 +369,18 @@ export const RetailerProductEdition = ({
   }, [userGroups]);
 
   useEffect(() => {
-    product?.retailers?.forEach((retailer) => {
-      retailer["percentage"] = percentages?.filter(
-        (percent) => retailer?.id === percent?.id_retailer
-      )[0]?.percentage;
-    });
-    setActivePercentage(product?.retailers[0]?.percentage);
+    const retailers = product?.retailersAvailable || product?.retailers;
+    if (
+      Object.keys(percentages[product.article.id_article] ?? {})?.length > 0
+    ) {
+      retailers?.forEach((retailer, index) => {
+        retailer["percentage"] = Number(
+          percentages[product.article.id_article][retailer.id]
+            .percentageRequired
+        );
+      });
+    }
+    setActivePercentage(retailers[0]?.percentage);
   }, [percentages]);
 
   useEffect(() => {

package/src/global-files/data.js

@@ -86,32 +86,27 @@ export const getImage = (imageGeneral, width = 250, height = 250) => {
 export const getPercentage = async (params = {}) => {
   const func = async () => {
     const dataToSend = [];
+    const arrayRetailers = [];
     let retailers =
       params.data[0].retailers || params.data[0].retailersAvailable;
-    params.data.forEach((product) => {
+    params.data.forEach((product, i) => {
+      dataToSend.push(
+        product.article
+          ? {
+              id_article: product.article.id_article,
+              id_category: product.article.id_category,
+              version: product.version,
+            }
+          : {
+              id_article: product.id_article,
+              id_category: product.id_category,
+              version: product.version,
+            }
+      );
       retailers.forEach((retailer) => {
-        dataToSend.push(
-          product.article
-            ? {
-                id_article: product.article.id_article,
-                id_category: product.article.id_category,
-                id_retailer: retailer.id,
-                version: product.version,
-                upc: product.article.upc,
-                name: product.article.name,
-                retailerName: retailer.name,
-              }
-            : {
-                id_article: product.id_article,
-                id_category: product.id_category,
-                id_retailer: retailer.id,
-                version: product.version,
-                upc: product.upc,
-                name: product.name,
-                retailerName: retailer.name,
-              }
-        );
+        arrayRetailers.push(retailer.id);
       });
+      dataToSend[i].id_retailer_array = arrayRetailers;
     });
 
     return await axios
@@ -125,7 +120,7 @@ export const getPercentage = async (params = {}) => {
         }
       )
       .then((response) => {
-        return response.data;
+        return [response.data];
       })
       .catch((err) => console.log(err, "Errror"));
   };

package/src/global-files/fonts.css

@@ -61,3 +61,9 @@
   src: url("../assets/fonts/roboto/Roboto-Regular.ttf");
   font-weight: 400;
 }
+
+.prueba {
+  color: #9e3e26;
+  color: #b42983;
+  color: #e7e7e7;
+}