contentoh-components-library 21.1.62 → 21.1.65

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

@@ -16,171 +16,134 @@ ProviderProductEditionDefault.args = {
     Imágenes: false,
   },
   token:
-    "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI1ODg0YWUzNC01OWQ2LTQ0NTQtYjk4ZS04MjE1MThiY2MzYTciLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjU4ODRhZTM0LTU5ZDYtNDQ1NC1iOThlLTgyMTUxOGJjYzNhNyIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJhODE2NGMwNi1hN2U5LTQ2OGItYTBiMS02MDIxNzMyNWY0ZTgiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY1NjExMzE0NiwibmFtZSI6IkNhZGVuYSBJc21hZWwiLCJwaG9uZV9udW1iZXIiOiIrNTIzMTExMzY2MzM2IiwiZXhwIjoxNjU2MTE2NzQ2LCJpYXQiOjE2NTYxMTMxNDYsImVtYWlsIjoiY2FkZW5hLmlzbWFlbEBhbGxmcmVlbWFpbC5uZXQifQ.kfMoKcxYDkpNZJibGdw50oOkRwPVl26YNAwwDoLEfQjOZB6WRCY95iHfU1maYcTTvA5KlT5ali8XZ-nLnxh60vZoLGTDOfCvEnwd1t94JtfE5CsWDr_jfH1U0AVidxihqKnkwvCezkHwU1DUFlbu2iBNo7MHQw4ydiK2sx4q0-QGltmE7W2JJ0sayRDuNchy2S6FQoyIWhsP3oaKTvJGDKCaJxwkFEKk-3antoMtfua9H8V4p2Kkqa_eDbFk8pLYGaYgImLlaia2orGgETkHZIWEMr4WJq1V_7qOg4lYq2BUUuMhWdmK6XUL_Jhmv05TUJ3Rp_Ti4_J2WE4zQqhbfQ",
+    "eyJraWQiOiJEV3owZnNieXg2MXNFcVduN3RCXC81bVhod3ZNbFZIOTgwUnZcL3RjT0lKdEk9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI5ZTQ0OGMwZS0xOGVkLTRlYWYtOWY4OC0zYjMxOTdkNGEyZmQiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfbFN6UVo0WjdSIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjllNDQ4YzBlLTE4ZWQtNGVhZi05Zjg4LTNiMzE5N2Q0YTJmZCIsImF1ZCI6IjUyZDlza2tkY2c4cWpwODhvb2sxdXNlNm1rIiwiZXZlbnRfaWQiOiI5ODg5YTFhYi1mMTljLTRiNzQtYjQ5Ni0xZDM3YzZjY2U3YmQiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY1NjQzMTQ5OCwibmFtZSI6IkdlcnNvbiBNYXJ0w61uZXoiLCJwaG9uZV9udW1iZXIiOiIrNTIxMjMxMjMxMjMiLCJleHAiOjE2NTY0MzUwOTgsImlhdCI6MTY1NjQzMTQ5OCwiZW1haWwiOiJnbWFydGluZXpAY29udGVudG9oLmNvbSJ9.qMBMYKxcaQrXT-3373y3K4eX73vgRApuFsT9-FVl9AuP_BKy51nHReEvwWHO4SMVpFxf3eHoQhUHG2PTl8qlvnoXlLqfCdgJEnq5DMFIOqcs_WzUHfb3k4r3y66DMzPwQI0aEk35ZYsAvkxd9m6Ax9fwJBuMCpb3jf7Az0SBpDvUgT7iRvS2b09UTwkW3ZIxfnaUE4uoqacoTUm7239AjuNe5Qh3UZl0rVvZ-mnh3SmAcNpxl-RtUEdcw4gO0MbIch39gIJ_1CcvBxXR2tVSUILZWfbpXI2ubA_sQZ0VJy5kWpe4pYF5beJISZ7sZ0Fzrv2ftE7poEtueYloftRfng",
   articleId: 238,
   category: 846,
   version: 2,
   productSelected: {
-    orderId: 55,
-    article_status: "AP",
-    datasheet_status: "AP",
-    description_status: "AP",
-    images_status: "AP",
-    prio: "none",
-    version: 2,
-    brand: null,
-    article: {
-      category: "ILUMINACIÓN|FOCOS|FOCOS",
-      company_name: "THD Proveedor",
-      country: "México",
-      id_category: "2143",
-      id_article: 55118,
-      name: "FOCO BLUETOOTH SPOT PHILIPS 6 WATTS 300 LÚMENES MULTICOLOR",
-      upc: "145582",
-    },
-    retailers: [
-      {
-        id: 58,
-        name: "The Home Depot Golden",
-      },
-      {
-        id: 59,
-        name: "The Home Depot Platinum",
-      },
-      {
-        id: 60,
-        name: "The Home Depot Resizing",
-      },
-      {
-        id: 61,
-        name: "Home Depot TAB",
-      },
-    ],
-    services: {
-      datasheets: 1,
-      descriptions: 1,
-      images: 1,
-    },
-    id_article: 55118,
+    id_article: 76145,
+    id_category: "700",
+    name: "prod 8 LCR",
+    upc: "8484161",
+    timestamp: "2022-07-11T15:28:44.000Z",
+    status: "NULL",
+    categoryName:
+      "Salud y Belleza|Cuidado Facial|Cremas, Mascarillas y Tratamientos",
+    asignations: [],
+    version: 3,
+    version_status: "R",
     retailersAvailable: [
       {
-        id: 58,
-        name: "The Home Depot Golden",
-      },
-      {
-        id: 59,
-        name: "The Home Depot Platinum",
-      },
-      {
-        id: 60,
-        name: "The Home Depot Resizing",
-      },
-      {
-        id: 61,
-        name: "Home Depot TAB",
+        id: 12,
+        name: "La Comer",
+        country: "México",
+        id_region: 1,
+        active: 1,
       },
     ],
+    missing: {},
   },
   productToEdit: {
-    ArticleId: 55118,
-    idCategory: "2143",
-    product: {
-      orderId: 55,
-      article_status: "AP",
-      datasheet_status: "AP",
-      description_status: "AP",
-      images_status: "AP",
-      prio: "none",
-      version: 2,
-      brand: null,
-      article: {
-        category: "ILUMINACIÓN|FOCOS|FOCOS",
-        company_name: "THD Proveedor",
-        country: "México",
-        id_category: "2143",
-        id_article: 55118,
-        name: "FOCO BLUETOOTH SPOT PHILIPS 6 WATTS 300 LÚMENES MULTICOLOR",
-        upc: "145582",
-      },
-      retailers: [
-        {
-          id: 58,
-          name: "The Home Depot Golden",
-        },
-        {
-          id: 59,
-          name: "The Home Depot Platinum",
+    idCategory: "2999",
+    ArticleId: 69031,
+    product: [
+      {
+        orderId: 1829,
+        id_category: "2999",
+        status: "AC",
+        datasheet_status: "NS",
+        prio: "none",
+        version: 2,
+        description_status: "NS",
+        images_status: "AC",
+        brand: null,
+        missing: {
+          datasheet: 0,
+          descriptions: 0,
+          images: 0,
         },
-        {
-          id: 60,
-          name: "The Home Depot Resizing",
+        article: {
+          category: "RESIZING|RESIZING|RESIZING",
+          company_name: "The Home Depot Resize",
+          id_category: "2999",
+          id_article: 69031,
+          name: "RESIZING",
+          timestamp: "2022-06-23T15:53:54.000Z",
+          upc: "130994",
         },
-        {
-          id: 61,
-          name: "Home Depot TAB",
+        retailers: [
+          {
+            id: 60,
+            name: "The Home Depot Resizing",
+          },
+        ],
+        services: {
+          datasheets: 0,
+          descriptions: 0,
+          images: 1,
         },
-      ],
-      services: {
-        datasheets: 1,
-        descriptions: 1,
-        images: 1,
+        checked: false,
+        retailersAvailable: [
+          {
+            id: 60,
+            name: "The Home Depot Resizing",
+          },
+        ],
+        id_article: 69031,
+        categoryName: "RESIZING|RESIZING|RESIZING",
+        version_status: "AC",
       },
-      id_article: 55118,
-      retailersAvailable: [
-        {
-          id: 58,
-          name: "The Home Depot Golden",
-        },
-        {
-          id: 59,
-          name: "The Home Depot Platinum",
-        },
-        {
-          id: 60,
-          name: "The Home Depot Resizing",
-        },
-        {
-          id: 61,
-          name: "Home Depot TAB",
-        },
-      ],
-    },
+    ],
   },
   location: {
     product: { articleId: 109485, versionId: 3 },
     state: { origin: "Contentoh" },
   },
   user: {
-    id_user: 59,
-    name: "The Home",
-    last_name: "Depot",
-    email: "cadena.ismael@allfreemail.net",
-    position: "Admin",
-    telephone: "+523111366336",
+    id_user: 1287,
+    name: "Gerson",
+    last_name: "Martinez",
+    email: "gmartinez@contentoh.com",
+    position: "Cuenta financiada",
+    telephone: "+525551234567",
     country: "México",
-    id_company: 7,
-    id_cognito: "5884ae34-59d6-4454-b98e-821518bcc3a7",
+    id_company: 819,
+    id_cognito: "9e448c0e-18ed-4eaf-9f88-3b3197d4a2fd",
     birth_Date: null,
     about_me: null,
     zip_code: null,
     address: null,
     job: null,
-    id_stripe: "",
+    id_stripe: null,
     id_role: 0,
     active: 1,
     is_retailer: 0,
     email_notify: 1,
     membership: {
-      id: 24,
-      start_date: "2021-11-23T03:35:50.000Z",
-      end_date: "2022-11-23T03:35:50.000Z",
-      planID: 9,
-      plan: "prod_KtlkzZVGq6bRTO",
-      name: "Plan Enterprise Full",
-      user_limit: "30",
-      products_limit: "10000",
+      id: 799,
+      start_date: "2022-06-19T15:48:09.000Z",
+      end_date: "2023-06-19T15:48:09.000Z",
+      planID: 6,
+      plan: "prod_KvGd6YSTJyR3AP",
+      name: "Plan Small",
+      user_limit: "10",
+      products_limit: "1000",
       type: "Enterprise",
     },
-    src: "https://content-management-profile.s3.amazonaws.com/id-59/59.png?1656113146885",
+    src: "https://content-management-profile-prod.s3.amazonaws.com/id-1287/1287.png?1656431499310",
   },
-};
+  company: {
+    id_company: 1,
+    trade_name: "COMPANY DEV",
+    company_name: "COMPANY DEV",
+    rfc: null,
+    adress: "",
+    about_company: "...",
+    telephone: "",
+    web_site: "",
+    zip_code: "",
+    email: null,
+    social_link: "",
+    is_retailer: 0,
+  },
+};

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

@@ -40,6 +40,8 @@ import Slide1_2 from "../../../assets/images/sliderToolTip/slide2.svg";
 import Slide1_3 from "../../../assets/images/sliderToolTip/slide3.svg";
 import Slide1_4 from "../../../assets/images/sliderToolTip/slide4.svg";
 import Slide1_5 from "../../../assets/images/sliderToolTip/slide5.svg";
+import { VersionSelector } from "../../organisms/VersionSelector";
+import { closeModals } from "../../../global-files/customHooks";
 
 const reducerImages = (state, action) => {
   let { values, attrForImgs } = state;
@@ -88,6 +90,7 @@ export const ProviderProductEdition = ({
   revision = false,
   setShowContentohRequestModal,
   showSurvey,
+  company,
 }) => {
   const [activeTab, setActiveTab] = useState("Descripción");
   const [activeImage, setActiveImage] = useState();
@@ -208,6 +211,8 @@ export const ProviderProductEdition = ({
   const [modalViewTextArea, setModalViewTextArea] = useState(false);
   const [socketType, setSocketType] = useState(null);
   const [saving, setSaving] = useState(loading);
+  const [showVersionSelector, setShowVersionSelector] =
+    closeModals("version-selector");
 
   useEffect(() => {
     checkAll && setSelectedImages(images.values);
@@ -218,7 +223,7 @@ export const ProviderProductEdition = ({
       product?.id_article || product?.article?.id_article,
       product?.article?.company_name || product?.categoryName,
       parseInt(product?.article?.id_category || product?.id_category),
-      product?.version
+      version
     );
 
     //Converts the data inside the datasheets object to array
@@ -306,6 +311,7 @@ export const ProviderProductEdition = ({
   };
 
   useEffect(async () => {
+    setLoading(true);
     sessionStorage.setItem("user", JSON.stringify(user));
     loadData();
     getCart();
@@ -328,7 +334,7 @@ export const ProviderProductEdition = ({
         break;
     }
     setStatusArray(arr);
-  }, [product]);
+  }, [product, version]);
 
   const loadAssignations = (currentProduct) => {
     setAssig(product?.asignations);
@@ -1181,6 +1187,8 @@ export const ProviderProductEdition = ({
             setAssignation={setAssignation}
             isRetailer={isRetailer}
             showSaveButton={enableActions(product.version_status)}
+            version={version}
+            setShowVersionSelector={setShowVersionSelector}
             onClickSave={() => {
               switch (activeTab) {
                 case "Descripción":
@@ -1439,6 +1447,15 @@ export const ProviderProductEdition = ({
           textArea={false}
         />
       )}
+      {showVersionSelector && (
+        <VersionSelector
+          modalId={"version-selector"}
+          articleId={product.id_article}
+          setVersion={setVersion}
+          companyName={company.company_name}
+          currentVersion={version}
+        />
+      )}
     </Container>
   );
 };

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

@@ -16,76 +16,69 @@ RetailerProductEditionDefault.args = {
     Imágenes: false,
   },
   token:
-    "eyJraWQiOiJEV3owZnNieXg2MXNFcVduN3RCXC81bVhod3ZNbFZIOTgwUnZcL3RjT0lKdEk9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI5ZDBjYzVjOC1hODllLTRiZGQtOWUyZC0zNThhMDFjYzlhNjIiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfbFN6UVo0WjdSIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjp0cnVlLCJjb2duaXRvOnVzZXJuYW1lIjoiOWQwY2M1YzgtYTg5ZS00YmRkLTllMmQtMzU4YTAxY2M5YTYyIiwiYXVkIjoiNTJkOXNra2RjZzhxanA4OG9vazF1c2U2bWsiLCJldmVudF9pZCI6IjBkNmZjYzMxLTBkZTctNGU1NC1iYTYzLWU1YzU3ODE4MzZkNSIsInRva2VuX3VzZSI6ImlkIiwiYXV0aF90aW1lIjoxNjU4OTQzMjk0LCJuYW1lIjoiSXNtYWVsIExvcGV6IiwicGhvbmVfbnVtYmVyIjoiKzUyMzExMTM2NjMzNiIsImV4cCI6MTY1ODk0Njg5NCwiaWF0IjoxNjU4OTQzMjk0LCJlbWFpbCI6Imlsb3BlekBjb250ZW50b2guY29tIn0.qO6HSA8-g0XQSKbvZfJfrKeztVmBUE4yBm_1Vb9QpQaNF_KYQi2onyxTCViMpN4yxtwN0ToBTpZO4h5oK0qZl0Ua2qo64eKh1_-pLoHQnlaELVgkL33eYcigZG78W9zhrC2Eregcp62dlrzV-SLDBadZoiIy5Ywn4t_NrYhSpHXpRxRsr5it1DAumMQ6hQhnZwrJmXa7mTZ9OoK4MJTI19LC15c6xXwq-GzZ0olI5mkrdZsfC7Ginf5PhXMHIsx-rx0GTFSzMq4sfYf0ggZp7L5hHGtSMoIIOSSJGaL5xrgCb7D7bFqS7oG54OO2z6BgIkaEZT2dSHfvCZgD94k_jg",
+    "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJhNmM0ZDNkNi0yNGE0LTQxZDQtYWQwZi1kMDg3NDM4YWI1YjYiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6ImE2YzRkM2Q2LTI0YTQtNDFkNC1hZDBmLWQwODc0MzhhYjViNiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJmZTM3NjZmNS0zY2E0LTQ2N2MtOTIxMS0yM2Y0NWQ1ZWU4NjgiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY1ODk5MTc2NSwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTY1ODk5NTM2NSwiaWF0IjoxNjU4OTkxNzY1LCJlbWFpbCI6ImV0Y0Bjb250ZW50b2guY29tIn0.bQDE_eVpwSBWXqgbX2bicpPTgAoG8mfeA_P0l92vBWV0Q7m7llCNOmLvaaZn-EtYNf3xjVH8pGivJGT5KMOLl9adBl8TnUxD0IS2BJp0wB3m3l79BFAswLbfCAFb-x0XJw4LznnnrlN12ZF-9sPcE4s8RXRxw2cSX3Lt4pdJqi8sOG_DNu3BvxmML3Ckv23aK82zWzskXQb_gNdTM2mqi7SvxvE87yb4X_5cfvP6QtA6hEh1jezbHWdzPDxKkme0ZdVOpqEb3c1JMSIP06EQ9NfnXVt0S19hz6kfppC2laFEwrK2M8tO8EH06k2qlSk3Hp5b6Ga3BACvKAWnfOnC1A",
   productSelected: {
     services: {
       datasheets: 1,
       descriptions: 1,
       images: 1,
     },
-    orderId: 2012,
-    status: "QF",
-    datasheet_status: "QF",
+    orderId: 131,
+    status: "AA",
+    datasheet_status: "AA",
     prio: "none",
     version: 2,
-    description_status: "QF",
-    images_status: "AF",
+    description_status: "AA",
+    images_status: "AA",
     article: {
-      id_article: 76958,
-      id_category: "2627",
-      name: "COLGANTE MAGIC NAVIDAD",
-      upc: "163963",
-      timestamp: "2022-07-07T17:01:17.000Z",
-      id_user: 1195,
+      id_article: 76201,
+      id_category: "632",
+      name: "DEMO SB BAA PLAY CR SM FP PANDAS",
+      upc: "7501816169170",
+      timestamp: "2022-07-25T20:42:40.000Z",
+      id_user: 119,
       status: "NULL",
       active: 1,
-      company_id: 657,
-      SKU: null,
-      Descripcion: null,
-      Proveedor: null,
-      id_proveedor: 0,
-      company_name: "",
-      country: null,
-      id_order: 2012,
-      id_datasheet_especialist: 1248,
-      id_datasheet_facilitator: 1252,
-      id_description_especialist: 334,
-      id_description_facilitator: 1252,
-      id_images_especialist: 1251,
-      id_images_facilitator: 1286,
-      id_auditor: 1254,
+      company_id: 841,
+      company_name: "Financiado Bodega",
+      country: "México",
+      id_order: 131,
+      id_datasheet_especialist: 54,
+      id_datasheet_facilitator: 52,
+      id_description_especialist: 54,
+      id_description_facilitator: 52,
+      id_images_especialist: 55,
+      id_images_facilitator: 53,
+      id_auditor: 30,
       id_recepcionist: null,
-      category: "Navidad|Esferas y Colgantes|Colgantes",
-      missingAttributes: 3,
+      category: "Ropa, Accesorios, Fragancias y Joyería|Ropa Bebés|Bebé Niña",
+      missingAttributes: 0,
       missingDescriptions: 0,
       missingImages: 0,
     },
     retailers: [
       {
-        id: 58,
-        name: "The Home Depot Golden",
-        country: "México",
-        id_region: 1,
-        active: 1,
+        id: 13,
+        name: "Soriana",
       },
     ],
-    country: null,
-    upc: "163963",
+    country: "México",
+    upc: "7501816169170",
   },
   location: {
     product: { articleId: 109485, versionId: 3 },
   },
   user: {
-    id_user: 460,
-    name: "Ismael",
-    last_name: "López",
-    email: "ilopez@contentoh.com",
-    position: "Desarrollador",
+    id_user: 51,
+    name: "ADMIN PRUEBA",
+    last_name: "",
+    email: "etc@contentoh.com",
+    position: null,
     telephone: null,
-    country: "México",
-    id_company: 254,
-    id_cognito: "9d0cc5c8-a89e-4bdd-9e2d-358a01cc9a62",
-    birth_Date: "1997-08-15T00:00:00.000Z",
+    country: null,
+    id_company: 2,
+    id_cognito: "a6c4d3d6-24a4-41d4-ad0f-d087438ab5b6",
+    birth_Date: null,
     about_me: null,
     zip_code: null,
     address: null,
@@ -94,18 +87,18 @@ RetailerProductEditionDefault.args = {
     id_role: 1,
     active: 1,
     is_retailer: 0,
-    email_notify: null,
+    email_notify: 0,
     membership: {
-      id: 750,
-      start_date: "2022-01-07T21:32:54.000Z",
-      end_date: "2023-01-07T21:32:54.000Z",
-      planID: 6,
-      plan: "prod_KvGd6YSTJyR3AP",
-      name: "Plan Small",
-      user_limit: "10",
-      products_limit: "1000",
-      type: "Enterprise",
+      id: 2,
+      start_date: "2021-11-05T02:35:12.000Z",
+      end_date: "2022-11-05T02:34:49.000Z",
+      planID: 1,
+      plan: "prod_KtkvuFFLpOdP6e",
+      name: "Plan Free",
+      user_limit: "1",
+      products_limit: "3",
+      type: "PyMES",
     },
-    src: "https://content-management-profile-prod.s3.amazonaws.com/id-460/460.png?1658943295529",
+    src: "https://content-management-profile.s3.amazonaws.com/id-51/51.png?1658991766462",
   },
 };

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

@@ -31,6 +31,9 @@ import { Loading } from "../../atoms/Loading";
 import succes from "../../../assets/images/genericModal/genericModalCheck.svg";
 import { getNewStatus } from "../../../global-files/data";
 import errorModal from "../../../assets/images/genericModal/errorModal.svg";
+import { VersionSelector } from "../../organisms/VersionSelector";
+import { closeModals } from "../../../global-files/customHooks";
+import { CreateVersion } from "../../organisms/CreateVersion";
 
 const reducerImages = (state, action) => {
   let { values, attrForImgs } = state;
@@ -165,6 +168,9 @@ export const RetailerProductEdition = ({
   const [servicesStatus, setServicesStatus] = useState([]);
   const [saving, setSaving] = useState(loading);
   const isAuditor = user.id_role === 6;
+  const [showVersionSelector, setShowVersionSelector] =
+    closeModals("version-selector");
+  const [showCreateVersion, setShowCreateVersion] = useState(false);
 
   useEffect(() => {
     checkAll && setSelectedImages(images.values);
@@ -176,7 +182,7 @@ export const RetailerProductEdition = ({
         product?.article?.id_article,
         product?.article?.category,
         parseInt(product?.article?.id_category),
-        product?.version
+        version
       );
       //Converts the data inside the datasheets object to array
       setServices(services);
@@ -250,6 +256,7 @@ export const RetailerProductEdition = ({
   };
 
   useEffect(async () => {
+    setLoading(true);
     loadData();
     getComments();
     setUserGroups(await fetchUsers(token));
@@ -271,7 +278,7 @@ export const RetailerProductEdition = ({
         break;
     }
     setStatusArray(arr);
-  }, [product]);
+  }, [product, version]);
 
   const loadAssignations = (currentProduct) => {
     setAssig({
@@ -1267,6 +1274,8 @@ export const RetailerProductEdition = ({
             setAssignation={setAssignation}
             isRetailer={isRetailer}
             showSaveButton={auditorAssigned() || userAssigned()}
+            version={version}
+            setShowVersionSelector={setShowVersionSelector}
             onClickSave={() => {
               switch (activeTab) {
                 case "Descripción":
@@ -1447,6 +1456,23 @@ export const RetailerProductEdition = ({
           onClick={() => setMessage("")}
         />
       )}
+      {showVersionSelector && (
+        <VersionSelector
+          modalId={"version-selector"}
+          articleId={product.article.id_article}
+          setVersion={setVersion}
+          companyName={product.article.company_name}
+          currentVersion={version}
+          setShowCreateVersion={setShowCreateVersion}
+        />
+      )}
+      {showCreateVersion && (
+        <CreateVersion
+          idArticle={product.article.id_article}
+          version={version}
+          setShowCreateVersion={setShowCreateVersion}
+        />
+      )}
     </Container>
   );
 };

package/src/global-files/customHooks.js

@@ -0,0 +1,26 @@
+import { useState } from "react";
+import { useEffect } from "react";
+
+export const closeModals = (id) => {
+  const [showModal, setShowModal] = useState(false);
+
+  const closeModal = (e) => {
+    if (
+      (!e.target.closest(`#${id}`) ||
+        e.target.closest("#close-button") ||
+        e.target.closest("#add-version")) &&
+      showModal
+    ) {
+      document.removeEventListener("click", closeModal);
+      setShowModal(false);
+    }
+  };
+
+  useEffect(() => {
+    if (showModal) {
+      document.addEventListener("click", closeModal);
+    }
+  }, [showModal]);
+
+  return [showModal, setShowModal];
+};

package/src/global-files/global-styles.css

@@ -12,6 +12,7 @@ body.sb-main-padded.sb-show-main {
   padding: 0;
   height: 100vh;
   overflow: hidden;
+  position: relative;
 }
 
 .sb-main-padded.sb-show-main #root {