contentoh-components-library 21.3.4 → 21.3.6

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/FullProductNameHeader/index.js

@@ -42,6 +42,7 @@ export const FullProductNameHeader = ({
           headerData?.status ||
           headerData?.article_status
         }
+        percentRequired={percent}
         percent={percent?.toFixed(0)}
         priority={headerData?.prio}
         date={new Date(

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

@@ -58,7 +58,7 @@ OrderDetailDefault.args = {
     company_name: "GRUPO BRAHMA",
     date: "2022-11-12T00:00:00.000Z",
     type: "En oficina",
-    id_order: 1,
+    id_order: 5,
     status: "PA",
     total: 731.2639770507812,
     timestamp: "2022-11-12T22:48:23.000Z",

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

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { Status } from "../../atoms/Status/index";
 import { ProgressBar } from "../../atoms/ProgressBar/index";
+import { Loading } from "../../atoms/Loading/index";
 import moment from "moment";
 import "moment/locale/es";
 import {
@@ -18,6 +19,7 @@ moment.locale("es");
 
 export const OrderDetail = (props) => {
   const { order } = props;
+  const [isLoading, setIsLoading] = useState(true);
   const [showPaymentButton, setShowPaymentButton] = useState(
     order.payment !== "pagado"
   );
@@ -51,6 +53,7 @@ export const OrderDetail = (props) => {
 
   useEffect(() => {
     const ac = new AbortController();
+    setIsLoading(true);
     props.getOrderDetail &&
       props
         .getOrderDetail({ query: { orderId: order.id_order } })
@@ -75,6 +78,7 @@ export const OrderDetail = (props) => {
           });
           setOrderData(obj);
           setDataGeneral({ ...countArticles, totalArticles });
+          setIsLoading(false);
         });
     return () => ac.abort(); // Abort both fetches on unmount
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -155,18 +159,21 @@ export const OrderDetail = (props) => {
         </div>
       </Details>
       <div className="body">
-        <Table
-          headers={[
-            { width: 140, name: "UPC" },
-            { width: 210, name: "Nombre" },
-            { width: 100, name: "Cadena", type: "groupImages" },
-            { width: 130, name: "Servicios", type: "services" },
-            { width: 70, name: "Estatus", type: "status" },
-            { width: 65, name: "Fact.", type: "checkout" },
-          ]}
-          data={orderData}
-          isProvider={props.isProvider}
-        />
+        {isLoading
+          ? <Loading />
+          : <Table
+              headers={[
+                { width: 140, name: "UPC" },
+                { width: 210, name: "Nombre" },
+                { width: 100, name: "Cadena", type: "groupImages" },
+                { width: 130, name: "Servicios", type: "services" },
+                { width: 70, name: "Estatus", type: "status" },
+                { width: 65, name: "Fact.", type: "checkout" },
+              ]}
+              data={orderData}
+              isProvider={props.isProvider}
+            />
+        }
       </div>
       <div className="footer">
         <h2 className="headerTitle">Totales</h2>

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

@@ -14,6 +14,7 @@ export const MainContainer = styled.div`
   & > * {
     padding: 0 30px;
   }
+  box-shadow: -4px 0px 8px 0px rgba(0,0,0,0.1);
   .headerTitle {
     font-weight: bold;
     font-size: 25px;

package/src/components/organisms/OrderDetail/utils/Table/styles.js

@@ -36,6 +36,32 @@ export const Column = styled.div`
   &:nth-child(2) {
     overflow: hidden;
   }
+
+  .tooltip {
+    position: relative;
+    display: inline-block;
+  }
+
+  .tooltip .tooltiptext {
+    visibility: hidden;
+    background-color: #fff;
+    color: black;
+    text-align: center;
+    padding: 5px 0;
+    border-radius: 3px;
+  
+    position: absolute;
+    z-index: 1;
+    top: -8px;
+    left: 3px;
+    font-family: Roboto;
+    font-size: 10px;
+    padding: 2px 5px;
+  }
+
+  .tooltip:hover .tooltiptext {
+    visibility: visible;
+  }
 `;
 
 export const Rows = styled.div`

package/src/components/organisms/OrderDetail/utils/Table/utils.js

@@ -1,27 +1,42 @@
 export const servicesCodeIcon = {
   datasheet: (
-    <span key="datasheet" className="material-icons small">
-      &#xf8ee;
-    </span>
+    <div key="datasheet" className="tooltip">
+      <span className="material-icons small">
+        &#xf8ee;
+      </span>
+      <span className="tooltiptext">Ficha Técnica</span>
+    </div>
   ),
   description: (
-    <span key="description" className="material-icons small">
-      &#xe873;
-    </span>
+    <div key="description" className="tooltip">
+      <span className="material-icons small">
+          &#xe873;
+        </span>
+      <span className="tooltiptext">Descripción</span>
+    </div>
   ),
   image: (
-    <span key="image" className="material-icons small">
-      &#xe3f4;
-    </span>
+    <div key="image" className="tooltip">
+      <span className="material-icons small">
+        &#xe3f4;
+      </span>
+      <span className="tooltiptext">Imagen</span>
+    </div>
   ),
   translate: (
-    <span key="translate" className="material-icons small">
-      &#xe8e2;
-    </span>
+    <div key="translate" className="tooltip">
+      <span className="material-icons small">
+        &#xe8e2;
+      </span>
+      <span className="tooltiptext">Traducción</span>
+    </div>
   ),
   build: (
-    <span key="build" className="material-icons small">
-      &#xe1bd;
-    </span>
+    <div key="build"  className="tooltip">
+      <span className="material-icons small">
+        &#xe1bd;
+      </span>
+      <span className="tooltiptext">Construcción</span>
+    </div>
   ),
 };

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>
   );
 };

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

@@ -16,187 +16,96 @@ ProviderProductEditionDefault.args = {
     Imágenes: true,
   },
   token:
-    "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI5MmFiMWFkNS0zOWM4LTRhMjAtODFlNC02N2VjMTRmMzhmNDMiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjkyYWIxYWQ1LTM5YzgtNGEyMC04MWU0LTY3ZWMxNGYzOGY0MyIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI4Y2U5MjYyMi0xYjZlLTQ1MWEtODUyYy04MjMxYzcwOTk5YTciLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2ODEwODQ1MiwibmFtZSI6IkVsaSBJbmRhIiwicGhvbmVfbnVtYmVyIjoiKzUyMzExMTkwODg2OCIsImV4cCI6MTY2ODExMjA1MiwiaWF0IjoxNjY4MTA4NDUyLCJlbWFpbCI6Im1hcnRoYTI1Lm1pb0BnbWFpbC5jb20ifQ.JbpinyPv_38xvwwT_td3M_vP3xEffZ6dI0Xl3B9EVjPF7uW4ctZ_B7nKydPyUcB6LTaYEzCI1RfAgZpUQUFbYTfFHJ3T9kgwa9b9mDeDx3kiy2GK3CdYIuWiii5ZivxVKK10gV871OvxDish4w-vEOsClXDncoTX2zAx3wDM4xO83UdI0ahECOTYszuGB3FRnkrHnWJO0b2dpsyhqAmhw0aEcw6gwbqP5l-spOjMM3lE-bGm89pK_9oLYcyRMr09vcGJartmk_ctUisCflrYudnwVgwTwCi1PRBkiaUoDywYeGr6HxRoU1zsiC3LwB-m9b2YnNhEZmPanLfPstKVbw",
+    "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIyOWY3YWY3Zi0yNmQ0LTRiMWItODZmZS0zOWY2ZTUyMDFhNzAiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2OTkyNzAyMSwibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2Njk5MzA2MjEsImlhdCI6MTY2OTkyNzAyMSwiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.NK6hVSiBksguboJ1m8yYqtDq19kzgE3GqYDEJHLUya_n_TsXriv6W1ypq7XiSo9zrqWcmHBpOoJQS7WbWzjGe__NlJEXjo8bykS8QBTTOiMrKxz1KzGRYJkwgG0axk-zVysUQH0_y-fbwgEgMPtd6qO46DB_KlFI_PEL1-uR5MJ9U0kNkS61gMbHwFQFs_DU-sS01NxjBsjUEp783rs1r-jm7TelZac1rGaFNUyi5vHdSozYzlnzfzGcuACZ0lHqvah2FHbDyurp-G_uhpUn5lNmcL4rVNh2lDd4TOnhJ3AtN1wGSmtErmhjmBHTvavh1ub9pklA1B9qjVuTRpYANw",
   articleId: 238,
   category: 846,
   version: 2,
   productSelected: {
-    "orderId": 3366,
-    "article_status": "AP",
-    "datasheet_status": "NS",
-    "description_status": "NS",
-    "images_status": "AP",
-    "prio": "none",
-    "version": 3,
-    "brand": null,
-    "article": {
-        "category": "Iluminación|Lámparas|Lámparas de Mesa",
-        "company_name": "Norday",
-        "id_company": 810,
-        "country": "México",
-        "id_category": "2454",
-        "id_article": 84492,
-        "name": "prueba dos",
-        "upc": "8375"
-    },
-    "retailers": [
-        {
-            "id": 59,
-            "name": "The Home Depot Platinum"
-        }
-    ],
-    "services": {
-        "datasheets": 0,
-        "descriptions": 0,
-        "images": 1
-    },
-    "statusByRetailer": {
-        "59": {
-            "images": "AP"
-        }
-    },
-    "retailersWithService": [
-        "59"
+    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",
+    version: 1,
+    retailersAvailable: [
+      {
+        name: "The Home Depot Golden",
+        id: 58,
+      },
     ],
-    "id_article": 84492,
-    "retailersAvailable": [
-        {
-            "id": 59,
-            "name": "The Home Depot Platinum"
-        }
-    ]
   },
   productToEdit: {
-    "ArticleId": 84492,
-    "idCategory": "2454",
-    "product": {
-        "orderId": 3366,
-        "article_status": "AP",
-        "datasheet_status": "NS",
-        "description_status": "NS",
-        "images_status": "AP",
-        "prio": "none",
-        "version": 3,
-        "brand": null,
-        "article": {
-            "category": "Iluminación|Lámparas|Lámparas de Mesa",
-            "company_name": "Norday",
-            "id_company": 810,
-            "country": "México",
-            "id_category": "2454",
-            "id_article": 84492,
-            "name": "prueba dos",
-            "upc": "8375"
-        },
-        "retailers": [
-            {
-                "id": 59,
-                "name": "The Home Depot Platinum"
-            }
+    idCategory: 2032,
+    ArticleId: 3,
+    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",
+        version: 1,
+        retailersAvailable: [
+          {
+            name: "The Home Depot Golden",
+            id: 58,
+          },
         ],
-        "services": {
-            "datasheets": 0,
-            "descriptions": 0,
-            "images": 1
-        },
-        "statusByRetailer": {
-            "59": {
-                "images": "AP"
-            }
-        },
-        "retailersWithService": [
-            "59"
-        ],
-        "id_article": 84492,
-        "retailersAvailable": [
-            {
-                "id": 59,
-                "name": "The Home Depot Platinum"
-            }
-        ]
-    }
+      },
+    ],
   },
   location: {
     state: { origin: "Contentoh" },
   },
   user: {
-    "id_user": 59,
-    "name": "The Home",
-    "last_name": "Depot",
-    "email": "cadena.ismael@allfreemail.net",
-    "position": "Admin",
-    "telephone": "+523111366336",
-    "country": "México",
-    "id_company": 817,
-    "id_cognito": "5884ae34-59d6-4454-b98e-821518bcc3a7",
-    "birth_Date": null,
-    "about_me": "",
-    "zip_code": "",
-    "address": "",
-    "job": "",
-    "id_stripe": "",
-    "id_role": 0,
-    "active": 1,
-    "is_retailer": 1,
-    "email_notify": 0,
-    "is_user_tech": null,
-    "membership": {
-        "id": 47,
-        "start_date": "2022-05-25T14:31:12.000Z",
-        "end_date": "2023-05-25T14:31:12.000Z",
-        "planID": 5,
-        "plan": "prod_Ktl6B5Ou2gqTB2",
-        "name": "Plan Pro",
-        "user_limit": "5",
-        "products_limit": "500",
-        "type": "PyMES"
+    id_user: 28,
+    name: "Ismael",
+    last_name: "López",
+    email: "ilopez@contentoh.com",
+    position: "Test States",
+    telephone: "+523111366336",
+    country: "México",
+    id_company: 1,
+    id_cognito: "f5927f8e-cbf7-4922-9e09-e69ec0b2731a",
+    birth_Date: null,
+    about_me: "",
+    zip_code: "",
+    address: "",
+    job: "",
+    id_stripe: "cus_KuEt6R6vwmN09f",
+    id_role: 0,
+    active: 1,
+    is_retailer: 0,
+    email_notify: 0,
+    is_user_tech: "AS",
+    membership: {
+      id: 76,
+      start_date: "2022-01-18T17:25:35.000Z",
+      end_date: "2023-01-18T17:25:35.000Z",
+      planID: 8,
+      plan: "prod_KtlhECVSFG2iro",
+      name: "Plan Pro",
+      user_limit: "20",
+      products_limit: "5000",
+      type: "Enterprise",
     },
-    "src": "https://content-management-profile.s3.amazonaws.com/id-59/59.png?1668127460068"
+    src: "https://content-management-profile.s3.amazonaws.com/id-28/28.png?1669927021851",
   },
   company: {
-    "id_company": 817,
-    "trade_name": "Retailer acc",
-    "company_name": "Retailer acc",
-    "rfc": "ASER12345",
-    "adress": "Av. Insurgentes",
-    "about_company": null,
-    "telephone": null,
-    "web_site": null,
-    "zip_code": null,
-    "email": null,
-    "social_link": null,
-    "is_retailer": 1,
-    "financedRetailers": [
-        {
-            "id": 68,
-            "name": "The Home Depot Merchants",
-            "country": "México",
-            "id_region": 1,
-            "active": 1
-        }
-    ],
-    "retailers": [
-        {
-            "id": 59,
-            "name": "The Home Depot Platinum",
-            "country": "México"
-        },
-        {
-            "id": 60,
-            "name": "The Home Depot Resizing",
-            "country": "México"
-        },
-        {
-            "id": 61,
-            "name": "Home Depot TAB",
-            "country": "México"
-        },
-        {
-            "id": 68,
-            "name": "The Home Depot Merchants",
-            "country": "México"
-        }
-    ]
+    id_company: 1,
+    trade_name: "GRUPO BRAHMA",
+    company_name: "GRUPO BRAHMA",
+    rfc: "XAXX010101000",
+    adress: "AA",
+    about_company: "",
+    telephone: "",
+    web_site: "",
+    zip_code: "",
+    email: null,
+    social_link: "",
+    is_retailer: 0,
   },
-  showSurvey: (v) => v && alert('se muestra'),
+  showSurvey: (v) => v && alert("se muestra"),
 };