contentoh-components-library 21.2.101 → 21.2.103

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

@@ -31,66 +31,75 @@ RetailerProductEditionDefault.args = {
     "Ficha técnica": false,
     Imágenes: false
   },
-  token: "eyJraWQiOiJEV3owZnNieXg2MXNFcVduN3RCXC81bVhod3ZNbFZIOTgwUnZcL3RjT0lKdEk9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI4ZDAxMDIxNC01YmZhLTQzYzMtOTZmYi1jNTU2ZGMwNTc3NGIiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfbFN6UVo0WjdSIiwiY29nbml0bzp1c2VybmFtZSI6IjhkMDEwMjE0LTViZmEtNDNjMy05NmZiLWM1NTZkYzA1Nzc0YiIsImF1ZCI6IjUyZDlza2tkY2c4cWpwODhvb2sxdXNlNm1rIiwiZXZlbnRfaWQiOiI2ZWY3Y2UxYy0xYjBjLTRkNGYtYTc3Yy1jMWIwYTk0ZjIwOWEiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2NzMyMTQ5NCwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTY2NzMyNTA5NCwiaWF0IjoxNjY3MzIxNDk0LCJlbWFpbCI6ImthcmFmZTMyMThAbW9tMmtpZC5jb20ifQ.GjBtY-LW5eYzvNfrIJOdb9pDMU_CZlIxRAn1ZszjMfWNU9s8s_j6o4_2x0J7AyiSjgu9TaLRcRpF6FZ5pzwNGs8G5AxnO3r_PIg2mznM44QLnt5PTfdoFx2jJmU53UA8GZU1SFDvDlR1QZR-EtANz2wfNs8RqY_mKTz5WjY7RdGTFVkowTv-Y1Q9T7x_fpv_5o-nB5GzLBQoHwTLQ_vjguSLH17l2BUn0QxLi2WJVs-qWX4ze4QysADVxYOlMkAQql328oqoqdXRbZrntnxYxa5EMpmref1bGbSOFk4qgHax4qa3gD2_h291NLjCZS7IMGDSIhOk9r7irItbojM01Q",
+  token: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJhNmM0ZDNkNi0yNGE0LTQxZDQtYWQwZi1kMDg3NDM4YWI1YjYiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6ImE2YzRkM2Q2LTI0YTQtNDFkNC1hZDBmLWQwODc0MzhhYjViNiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI0MmE2OWE4My02OGY0LTRmZjktOGU4Zi1jYzgxODQ5MDU5NGYiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2OTkyODUxMSwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTY2OTkzMjExMSwiaWF0IjoxNjY5OTI4NTExLCJlbWFpbCI6ImV0Y0Bjb250ZW50b2guY29tIn0.Mv1hFVjkF2y__7XP0bXzU2Yq8YMc0go9OgB7all5F4HvfK62I0l9rNRqddlaLjDSCmjvyYI-M8WFwHtdlOL1-liazZr8hhu7_9SciapRzkuuHlWwu0g3EEK54NuHR3-YYRax85hKyN9YoV1MY_fTzT9WUVXWoqf4UPj2SH79g_A0l0lm18ODzzdhXFSpubuI8-Ml7MbXUh8klzl7T55S16sj8zPONpesrA01WsG1PWGqfRZI2g37edj_en2_fIcfi49tQjbSjnQOVOPnkO5TPiyoMtZdS53Rx75iSI8-fP-Z7kD-5TI_KK6vK35PHoG1B-N3EzDUjXek4MowNswnGA",
   productSelected: {
     services: {
       datasheets: 1,
       descriptions: 1,
       images: 1
     },
-    orderId: 3321,
+    orderId: 123,
     status: "PA",
-    datasheet_status: "AC",
+    datasheet_status: "PA",
     prio: "none",
-    version: 2,
-    description_status: "AC",
+    version: 3,
+    description_status: "PA",
     images_status: "PA",
     statusByRetailer: {
-      58: {
-        datasheet: "AC",
-        description: "AC",
+      4: {
+        datasheet: "PA",
+        description: "PA",
+        images: "PA"
+      },
+      5: {
+        datasheet: "PA",
+        description: "PA",
+        images: "PA"
+      },
+      6: {
+        datasheet: "PA",
+        description: "PA",
         images: "PA"
       }
     },
     article: {
-      id_article: 85655,
-      id_category: "2052",
-      name: "EXTENSION P/ EXTERIOR 3X10 AWG 10M ROJO",
-      upc: "165679",
-      timestamp: "2022-11-01T15:46:51.000Z",
-      id_user: 1436,
-      status: null,
+      id_article: 127,
+      id_category: "700",
+      name: "prueba prod flujo",
+      upc: "34234353324",
+      timestamp: "2022-11-23T23:12:30.000Z",
+      id_user: 28,
+      status: "NULL",
       active: 1,
-      company_id: 409,
-      SKU: null,
-      Descripcion: null,
-      Proveedor: null,
-      id_proveedor: 0,
-      company_name: "HIGHLINE-WARREN LLC",
-      country: null,
-      id_order: 3321,
-      id_datasheet_especialist: 1248,
-      id_datasheet_facilitator: null,
-      id_description_especialist: 1248,
-      id_description_facilitator: null,
-      id_images_especialist: null,
-      id_images_facilitator: null,
-      id_auditor: null,
+      company_id: 1,
+      company_name: "GRUPO BRAHMA",
+      country: "México",
+      id_order: 123,
+      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: 37,
       id_recepcionist: null,
-      category: "Eléctrico|Extensiones y Multicontactos|Extensiones y Multicontactos",
-      missingAttributes: null,
-      missingDescriptions: null,
-      missingImages: null
+      category: "Salud y Belleza|Cuidado Facial|Cremas, Mascarillas y Tratamientos",
+      missingAttributes: 0,
+      missingDescriptions: 0,
+      missingImages: 0
     },
     retailers: [{
-      id: 58,
-      name: "The Home Depot Golden",
-      country: "México",
-      id_region: 1,
-      active: 1
+      id: 4,
+      name: "Walmart Super y Superama"
+    }, {
+      id: 5,
+      name: "Chedraui"
+    }, {
+      id: 6,
+      name: "HEB"
     }],
-    country: null,
-    upc: "165679"
+    country: "México",
+    upc: "34234353324"
   },
   location: {
     product: {
@@ -99,36 +108,37 @@ RetailerProductEditionDefault.args = {
     }
   },
   user: {
-    id_user: 426,
-    name: "Especialista Textos",
-    last_name: " ",
-    email: "karafe3218@mom2kid.com",
-    position: "Tester",
-    telephone: null,
-    country: null,
-    id_company: 254,
-    id_cognito: "8d010214-5bfa-43c3-96fb-c556dc05774b",
+    id_user: 51,
+    name: "ADMIN PRUEBA",
+    last_name: "",
+    email: "etc@contentoh.com",
+    position: "",
+    telephone: "",
+    country: "",
+    id_company: 2,
+    id_cognito: "a6c4d3d6-24a4-41d4-ad0f-d087438ab5b6",
     birth_Date: null,
-    about_me: null,
-    zip_code: null,
-    address: null,
-    job: null,
-    id_stripe: null,
-    id_role: 7,
+    about_me: "",
+    zip_code: "",
+    address: "",
+    job: "",
+    id_stripe: "",
+    id_role: 1,
     active: 1,
     is_retailer: 0,
-    email_notify: null,
+    email_notify: 1,
+    is_user_tech: null,
     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-426/426.png?1667321494598"
+    src: "https://content-management-profile.s3.amazonaws.com/id-51/51.png?1669928511679"
   }
 };

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

@@ -77,8 +77,6 @@ var _VersionSelector = require("../../organisms/VersionSelector");
 
 var _customHooks = require("../../../global-files/customHooks");
 
-var _CreateVersion = require("../../organisms/CreateVersion");
-
 var _jsxRuntime = require("react/jsx-runtime");
 
 var reducerImages = function reducerImages(state, action) {
@@ -433,22 +431,10 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
       socketType = _useState66[0],
       setSocketType = _useState66[1];
 
-  var _useState67 = (0, _react.useState)([]),
+  var _useState67 = (0, _react.useState)(loading),
       _useState68 = (0, _slicedToArray2.default)(_useState67, 2),
-      servicesStatus = _useState68[0],
-      setServicesStatus = _useState68[1];
-
-  var _useState69 = (0, _react.useState)(loading),
-      _useState70 = (0, _slicedToArray2.default)(_useState69, 2),
-      saving = _useState70[0],
-      setSaving = _useState70[1];
-
-  var isAuditor = user.id_role === 6;
-
-  var _useState71 = (0, _react.useState)(false),
-      _useState72 = (0, _slicedToArray2.default)(_useState71, 2),
-      showCreateVersion = _useState72[0],
-      setShowCreateVersion = _useState72[1];
+      saving = _useState68[0],
+      setSaving = _useState68[1];
 
   var _useCloseModal = (0, _customHooks.useCloseModal)("version-selector"),
       _useCloseModal2 = (0, _slicedToArray2.default)(_useCloseModal, 2),
@@ -2053,13 +2039,8 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
       setVersion: setVersion,
       companyName: product.article.company_name,
       currentVersion: version,
-      setShowCreateVersion: setShowCreateVersion,
       setShowVersionSelector: setShowVersionSelector,
       jwt: token
-    }), showCreateVersion && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CreateVersion.CreateVersion, {
-      idArticle: product.article.id_article,
-      version: version,
-      setShowCreateVersion: setShowCreateVersion
     })]
   });
 };

package/package.json

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

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

@@ -15,7 +15,10 @@ export const Button = ({
       id={id}
       className={buttonType}
       buttonFont={buttonFont}
-      onClick={onClick}
+      onClick={(e) => {
+        e.stopPropagation();
+        onClick(e);
+      }}
       key={`button-${buttonType}`}
       disabled={buttonType === "general-button-disabled"}
     >

package/src/components/atoms/Select/VersionSelect.js

@@ -13,11 +13,13 @@ export const VersionSelect = ({
       <select
         id={id}
         name={id}
-        value={`Version ${selectedVersions[id]}`}
+        value={selectedVersions[id]}
         onChange={onChange}
       >
         {versions.map((item, index) => (
-          <option key={`${id}-${index}`}>Version {item.version}</option>
+          <option key={`${id}-${index}`} value={item.version}>
+            Version {item.version}
+          </option>
         ))}
       </select>
     </VrsnSelect>

package/src/components/organisms/CreateVersion/RenderChilds.js

@@ -21,27 +21,25 @@ export const Children = (
           <img src={createVersionImg} alt="create version icon" />
           <ScreenHeader
             fontFamily={FontFamily.Raleway_500}
-            headerType={"product-name-header"}
+            headerType="product-name-header"
             color={GlobalColors.white}
-            text={"Crea una nueva versión"}
+            text="Crea una nueva versión"
           />
           <ScreenHeader
             fontFamily={FontFamily.Raleway}
-            headerType={"retailer-name-header"}
+            headerType="retailer-name-header"
             color={GlobalColors.white}
-            text={
-              "Puedes elegir el contenido de versiones anteriores o crear una versión desde cero"
-            }
+            text="Puedes elegir el contenido de versiones anteriores o crear una versión desde cero"
           />
           <div className="buttons-container">
             <Button
-              label={"Versión desde cero"}
-              buttonType={"general-transparent-button"}
+              label="Versión desde cero"
+              buttonType="general-transparent-button"
               onClick={() => setStep("empty-version")}
             />
             <Button
-              label={"Versión personalizada"}
-              buttonType={"general-default-button"}
+              label="Versión personalizada"
+              buttonType="general-default-button"
               onClick={() => setStep("create-version")}
             />
           </div>
@@ -53,27 +51,25 @@ export const Children = (
           <img src={genericModalWarning} alt="warning icon" />
           <ScreenHeader
             fontFamily={FontFamily.Raleway_500}
-            headerType={"product-name-header"}
+            headerType="product-name-header"
             color={GlobalColors.white}
-            text={
-              "Si creas una versión desde cero perderas la información actual"
-            }
+            text="Si creas una versión desde cero perderas la información actual"
           />
           <ScreenHeader
             fontFamily={FontFamily.Raleway}
-            headerType={"retailer-name-header"}
+            headerType="retailer-name-header"
             color={GlobalColors.white}
-            text={"¿Deseas Continuar?"}
+            text="¿Deseas Continuar?"
           />
           <div className="buttons-container">
             <Button
-              label={"Atrás"}
-              buttonType={"general-transparent-button"}
+              label="Atrás"
+              buttonType="general-transparent-button"
               onClick={() => setStep("version-options")}
             />
             <Button
-              label={"Continuar"}
-              buttonType={"general-default-button"}
+              label="Continuar"
+              buttonType="general-default-button"
               onClick={() => createVersion(true)}
             />
           </div>
@@ -84,18 +80,16 @@ export const Children = (
         <CreateVersion>
           <ScreenHeader
             fontFamily={FontFamily.Raleway_500}
-            headerType={"retailer-name-header"}
+            headerType="retailer-name-header"
             color={GlobalColors.white}
-            text={
-              "Elige el contenido que deseas utilizar de versiones anteriores"
-            }
+            text="Elige el contenido que deseas utilizar de versiones anteriores"
           />
           <div className="version-selector">
             <div className="selector">
               <VersionSelect
                 versions={versions}
-                label={"Ficha técnica"}
-                id={"datasheet"}
+                label="Ficha técnica"
+                id="datasheet"
                 selectedVersions={selectedVersions}
                 onChange={(e) => onChange(e)}
               />
@@ -103,8 +97,8 @@ export const Children = (
             <div className="selector">
               <VersionSelect
                 versions={versions}
-                label={"Descripción"}
-                id={"description"}
+                label="Descripción"
+                id="description"
                 selectedVersions={selectedVersions}
                 onChange={(e) => onChange(e)}
               />
@@ -112,8 +106,8 @@ export const Children = (
             <div className="selector">
               <VersionSelect
                 versions={versions}
-                label={"Imágenes"}
-                id={"image"}
+                label="Imágenes"
+                id="image"
                 selectedVersions={selectedVersions}
                 onChange={(e) => onChange(e)}
               />
@@ -121,13 +115,13 @@ export const Children = (
           </div>
           <div className="buttons-container">
             <Button
-              label={"Atrás"}
-              buttonType={"general-transparent-button"}
+              label="Atrás"
+              buttonType="general-transparent-button"
               onClick={() => setStep("version-options")}
             />
             <Button
-              label={"Continuar"}
-              buttonType={"general-default-button"}
+              label="Continuar"
+              buttonType="general-default-button"
               onClick={() => createVersion()}
             />
           </div>

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

@@ -5,48 +5,32 @@ import { useEffect, useState } from "react";
 import { Children } from "./RenderChilds";
 import axios from "axios";
 
-export const CreateVersion = ({ idArticle, version, setShowCreateVersion }) => {
+export const CreateVersion = ({
+  articleId,
+  version,
+  setShowCreateVersion,
+  versionsList,
+  realoadVersion,
+  jwt,
+}) => {
   const [step, setStep] = useState("version-options");
-  const [versions, setVersions] = useState([]);
   const [selectedVersions, setSelectedVersions] = useState({
     datasheet: version,
     description: version,
     image: version,
   });
 
-  const getVersions = async () => {
-    try {
-      const response = await axios({
-        method: "get",
-        url: `${process.env.REACT_APP_VERSIONS_ENDPOINT}?articleId=${idArticle}&provider=true`,
-        headers: {
-          Authorization: sessionStorage.getItem("jwt"),
-        },
-      });
-      setVersions(JSON.parse(response.data.body).data);
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
   const createVersion = async (isEmpty) => {
     try {
-      let data = {
-        articleId: idArticle,
-        isEmpty,
-      };
+      let data = { articleId, isEmpty };
 
-      isEmpty && (data["version"] = selectedVersions);
+      if (!isEmpty) data["version"] = selectedVersions;
 
-      await axios({
-        method: "post",
-        url: process.env.REACT_APP_VERSIONS_ENDPOINT,
-        data: data,
-        headers: {
-          Authorization: sessionStorage.getItem("jwt"),
-        },
+      await axios.post(process.env.REACT_APP_VERSIONS_ENDPOINT, data, {
+        headers: { Authorization: jwt },
       });
       setShowCreateVersion(false);
+      realoadVersion && realoadVersion();
     } catch (error) {
       console.log(error);
     }
@@ -55,17 +39,13 @@ export const CreateVersion = ({ idArticle, version, setShowCreateVersion }) => {
   const onChange = (e) => {
     setSelectedVersions({
       ...selectedVersions,
-      [e.target.name]: parseInt(e.target.value.slice(-1)),
+      [e.target.name]: parseInt(e.target.value),
     });
   };
 
-  useEffect(async () => {
-    await getVersions();
-  }, []);
-
   return (
     <Container>
-      <div className="modal-container">
+      <div id="create-version" className="modal-container">
         <div className="button-container">
           <Button
             image={closeIcon}
@@ -77,7 +57,7 @@ export const CreateVersion = ({ idArticle, version, setShowCreateVersion }) => {
         {Children(
           step,
           setStep,
-          versions,
+          versionsList,
           selectedVersions,
           onChange,
           createVersion

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

@@ -8,7 +8,8 @@ import closeIcon from "../../../assets/images/versionSelector/closeVersionSelect
 import { GlobalColors } from "contentoh-components-library/dist/global-files/variables";
 import { FontFamily } from "../../../global-files/variables";
 import { VersionItem } from "../../molecules/VersionItem";
-import { version } from "react";
+import { CreateVersion } from "../../organisms/CreateVersion";
+import { useCloseModal } from "../../../global-files/customHooks";
 
 export const VersionSelector = ({
   modalId,
@@ -16,11 +17,13 @@ export const VersionSelector = ({
   setVersion,
   companyName,
   currentVersion,
-  setShowCreateVersion,
   setShowVersionSelector,
   jwt,
 }) => {
   const [versions, setVersions] = useState([]);
+  const [showCreateVersion, setShowCreateVersion] =
+    useCloseModal("create-version");
+  const [reload, setReload] = useState(false);
 
   const loadProductVersions = async (articleId) => {
     try {
@@ -41,13 +44,15 @@ export const VersionSelector = ({
   };
 
   useEffect(() => {
+    const ac = new AbortController();
     loadProductVersions(articleId);
 
     return () => {
       setVersions([]);
       setShowCreateVersion(false);
+      return () => ac.abort(); // Abort both fetches on unmount
     };
-  }, []);
+  }, [reload]);
 
   return (
     <Container id={modalId}>
@@ -86,6 +91,16 @@ export const VersionSelector = ({
           />
         ))}
       </div>
+      {showCreateVersion && (
+        <CreateVersion
+          articleId={articleId}
+          version={currentVersion}
+          versionsList={versions}
+          setShowCreateVersion={setShowCreateVersion}
+          realoadVersion={() => setReload(!reload)}
+          jwt={jwt}
+        />
+      )}
     </Container>
   );
 };