contentoh-components-library 21.4.74 → 21.4.77

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

@@ -1,106 +1,106 @@
-import { Container } from "./styles";
-import axios from "axios";
-import { useEffect, useState } from "react";
-import { ScreenHeader } from "../../atoms/ScreenHeader";
-import { Button } from "../../atoms/GeneralButton";
-import addVersion from "../../../assets/images/versionSelector/addVersion.svg";
-import closeIcon from "../../../assets/images/versionSelector/closeVersionSelector.svg";
-import { GlobalColors } from "../../../../dist/global-files/variables";
-import { FontFamily } from "../../../global-files/variables";
-import { VersionItem } from "../../molecules/VersionItem";
-import { CreateVersion } from "../../organisms/CreateVersion";
-import { useCloseModal } from "../../../global-files/customHooks";
+// import { Container } from "./styles";
+// import axios from "axios";
+// import { useEffect, useState } from "react";
+// import { ScreenHeader } from "../../atoms/ScreenHeader";
+// import { Button } from "../../atoms/GeneralButton";
+// import addVersion from "../../../assets/images/versionSelector/addVersion.svg";
+// import closeIcon from "../../../assets/images/versionSelector/closeVersionSelector.svg";
+// import { GlobalColors } from "../../../../dist/global-files/variables";
+// import { FontFamily } from "../../../global-files/variables";
+// import { VersionItem } from "../../molecules/VersionItem";
+// import { CreateVersion } from "../../organisms/CreateVersion";
+// import { useCloseModal } from "../../../global-files/customHooks";
 
-export const VersionSelector = ({
-  modalId,
-  articleId,
-  setVersion,
-  companyName,
-  currentVersion,
-  setShowVersionSelector,
-  jwt,
-}) => {
-  const [versions, setVersions] = useState([]);
-  const [showCreateVersion, setShowCreateVersion] =
-    useCloseModal("create-version");
-  const [reload, setReload] = useState(false);
+// export const VersionSelector = ({
+//   modalId,
+//   articleId,
+//   setVersion,
+//   companyName,
+//   currentVersion,
+//   setShowVersionSelector,
+//   jwt,
+// }) => {
+//   const [versions, setVersions] = useState([]);
+//   const [showCreateVersion, setShowCreateVersion] =
+//     useCloseModal("create-version");
+//   const [reload, setReload] = useState(false);
 
-  const loadProductVersions = async (articleId) => {
-    try {
-      const response = await axios.get(
-        `${process.env.REACT_APP_VERSIONS_ENDPOINT}?articleId=${articleId}&provider=true`,
-        {
-          headers: {
-            Authorization: jwt,
-          },
-        }
-      );
+//   const loadProductVersions = async (articleId) => {
+//     try {
+//       const response = await axios.get(
+//         `${process.env.REACT_APP_VERSIONS_ENDPOINT}?articleId=${articleId}&provider=true`,
+//         {
+//           headers: {
+//             Authorization: jwt,
+//           },
+//         }
+//       );
 
-      const versionList = JSON.parse(response.data.body).data;
-      setVersions(versionList);
-    } catch (error) {
-      console.log(error);
-    }
-  };
+//       const versionList = JSON.parse(response.data.body).data;
+//       setVersions(versionList);
+//     } catch (error) {
+//       console.log(error);
+//     }
+//   };
 
-  useEffect(() => {
-    const ac = new AbortController();
-    loadProductVersions(articleId);
+//   useEffect(() => {
+//     const ac = new AbortController();
+//     loadProductVersions(articleId);
 
-    return () => {
-      setVersions([]);
-      setShowCreateVersion(false);
-      return () => ac.abort(); // Abort both fetches on unmount
-    };
-  }, [reload]);
+//     return () => {
+//       setVersions([]);
+//       setShowCreateVersion(false);
+//       return () => ac.abort(); // Abort both fetches on unmount
+//     };
+//   }, [reload]);
 
-  return (
-    <Container id={modalId}>
-      <div className="versions-header">
-        <ScreenHeader
-          text={"Versión del producto"}
-          headerType={"input-name-header"}
-          color={GlobalColors.white}
-          fontFamily={FontFamily.Lato}
-        />
-        <div className="buttons-container">
-          <Button
-            image={addVersion}
-            buttonType={"circular-button"}
-            onClick={() => setShowCreateVersion(true)}
-            id="add-version"
-          />
-          <Button
-            image={closeIcon}
-            buttonType={"circular-button"}
-            onClick={() => setShowVersionSelector(false)}
-            id="close-button"
-          />
-        </div>
-      </div>
-      <div className="versions-container">
-        {versions?.map((item) => (
-          <VersionItem
-            key={item.version}
-            version={item.version}
-            articleStatus={item.article_status}
-            currentVersion={item.version === currentVersion}
-            productOwner={companyName}
-            setVersion={setVersion}
-            timestamp={item.timestamp}
-          />
-        ))}
-      </div>
-      {showCreateVersion && (
-        <CreateVersion
-          articleId={articleId}
-          version={currentVersion}
-          versionsList={versions}
-          setShowCreateVersion={setShowCreateVersion}
-          realoadVersion={() => setReload(!reload)}
-          jwt={jwt}
-        />
-      )}
-    </Container>
-  );
-};
+//   return (
+//     <Container id={modalId}>
+//       <div className="versions-header">
+//         <ScreenHeader
+//           text={"Versión del producto"}
+//           headerType={"input-name-header"}
+//           color={GlobalColors.white}
+//           fontFamily={FontFamily.Lato}
+//         />
+//         <div className="buttons-container">
+//           <Button
+//             image={addVersion}
+//             buttonType={"circular-button"}
+//             onClick={() => setShowCreateVersion(true)}
+//             id="add-version"
+//           />
+//           <Button
+//             image={closeIcon}
+//             buttonType={"circular-button"}
+//             onClick={() => setShowVersionSelector(false)}
+//             id="close-button"
+//           />
+//         </div>
+//       </div>
+//       <div className="versions-container">
+//         {versions?.map((item) => (
+//           <VersionItem
+//             key={item.version}
+//             version={item.version}
+//             articleStatus={item.article_status}
+//             currentVersion={item.version === currentVersion}
+//             productOwner={companyName}
+//             setVersion={setVersion}
+//             timestamp={item.timestamp}
+//           />
+//         ))}
+//       </div>
+//       {showCreateVersion && (
+//         <CreateVersion
+//           articleId={articleId}
+//           version={currentVersion}
+//           versionsList={versions}
+//           setShowCreateVersion={setShowCreateVersion}
+//           realoadVersion={() => setReload(!reload)}
+//           jwt={jwt}
+//         />
+//       )}
+//     </Container>
+//   );
+// };

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

@@ -0,0 +1,15 @@
+import { VersionSelectorv2 } from "./index";
+
+export default {
+  title: "Components/organisms/VersionSelectorv2",
+  component: VersionSelectorv2,
+};
+
+const Template = (args) => <VersionSelectorv2 {...args} />;
+
+export const VersionSelectorv2Default = Template.bind({});
+VersionSelectorv2Default.args = {
+  articleId: 35707,
+  companyName: "COMPANY DEV",
+  currentVersion: 7,
+};

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

@@ -0,0 +1,105 @@
+import { Container } from "./styles";
+import axios from "axios";
+import { useEffect, useState } from "react";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { Button } from "../../atoms/GeneralButton";
+import addVersion from "../../../assets/images/versionSelector/addVersion.svg";
+import closeIcon from "../../../assets/images/versionSelector/closeVersionSelector.svg";
+import { GlobalColors } from "../../../global-files/variables";
+import { FontFamily } from "../../../global-files/variables";
+import { VersionItemv2 } from "../../molecules/VersionItemv2";
+import { CreateVersion } from "../../organisms/CreateVersion";
+import { useCloseModal } from "../../../global-files/customHooks";
+
+export const VersionSelectorv2 = ({
+  modalId,
+  articleId,
+  setVersion,
+  companyName,
+  currentVersion,
+  setShowVersionSelector,
+  jwt,
+}) => {
+  const [versions, setVersions] = useState([]);
+  const [showCreateVersion, setShowCreateVersion] =
+    useCloseModal("create-version");
+  const [reload, setReload] = useState(false);
+
+  const loadProductVersions = async (articleId) => {
+    try {
+      const response = await axios.get(
+        `${process.env.REACT_APP_VERSIONS_ENDPOINT}?articleId=${articleId}&provider=true`,
+        {
+          headers: {
+            Authorization: jwt,
+          },
+        }
+      );
+
+      const versionList = JSON.parse(response.data.body).data;
+      setVersions(versionList);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  useEffect(() => {
+    const ac = new AbortController();
+    loadProductVersions(articleId);
+
+    return () => {
+      setVersions([]);
+      setShowCreateVersion(false);
+      return () => ac.abort(); // Abort both fetches on unmount
+    };
+  }, [reload]);
+
+  return (
+    <Container id={modalId}>
+      <div className="versions-header">
+        <ScreenHeader
+          text={"Versiones"}
+          headerType={"input-name-header"}
+          color={GlobalColors.gray}
+          fontFamily={FontFamily.Lato}
+        />
+        <div className="buttons-container">
+          <Button
+            image={addVersion}
+            buttonType={"circular-button"}
+            onClick={() => setShowCreateVersion(true)}
+            id="add-version"
+          />
+          <Button
+            buttonType="general-white-button close-button"
+            onClick={() => setShowVersionSelector(false)}
+            id="close-button"
+          />
+        </div>
+      </div>
+      <div className="versions-container">
+        {versions?.map((item) => (
+          <VersionItemv2
+            key={item.version}
+            version={item.version}
+            articleStatus={item.article_status}
+            currentVersion={item.version === currentVersion}
+            productOwner={companyName}
+            setVersion={setVersion}
+            timestamp={item.timestamp}
+          />
+        ))}
+      </div>
+      {showCreateVersion && (
+        <CreateVersion
+          articleId={articleId}
+          version={currentVersion}
+          versionsList={versions}
+          setShowCreateVersion={setShowCreateVersion}
+          realoadVersion={() => setReload(!reload)}
+          jwt={jwt}
+        />
+      )}
+    </Container>
+  );
+};

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

@@ -0,0 +1,45 @@
+import styled from "styled-components";
+import { GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  width: 300px;
+  height: 100%;
+  background-color: ${GlobalColors.white};
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
+  overflow: auto;
+  position: absolute;
+  right: 20px;
+  top: 0;
+  z-index: 500;
+
+  .versions-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 44px;
+    border-radius: 10px 10px 0 0;
+    background: #F9F9F9;
+    padding:5px 10px;
+
+    .buttons-container {
+      display: flex;
+      align-items: center;
+
+      button + * {
+        margin-left: 10px;
+        width: 24px;
+        height: 24px;
+        border: 1px solid ${GlobalColors.magenta_s2};
+        background-size: 12px;
+        padding: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    }
+  }
+  .versions-container{
+    padding:5px 10px;
+  }
+    
+`;

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

@@ -9,59 +9,54 @@ const Template = (args) => <Dashboard {...args} />;
 export const DashboardDeafult = Template.bind({});
 DashboardDeafult.args = {
   user: {
-    id_user: 37,
-    name: "José",
-    last_name: "Castañeda",
-    email: "ismael97lopez@gmail.com",
-    position: "Auditor",
-    telephone: "",
+    id_user: 343,
+    name: "Jair",
+    last_name: "León",
+    email: "hleon@contentoh.com",
+    position: "Test States",
+    telephone: "+525555555555",
     country: "México",
-    id_company: 2,
-    id_cognito: "9a213128-6482-4c16-a4b6-6e64f225b1bd",
+    id_company: 234,
+    id_cognito: "4512b5a5-366a-4bb5-916e-aafe05402992",
     birth_Date: null,
     about_me: "",
     zip_code: "",
     address: "",
     job: "",
-    id_stripe: "",
-    id_role: 6,
+    id_stripe: "cus_KuEt6R6vwmN09f",
+    id_role: 0,
     active: 1,
     is_retailer: 0,
-    email_notify: 1,
-    is_user_tech: null,
+    email_notify: 0,
+    is_user_tech: "ADMIN-AS",
     membership: {
-      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",
+      id: 139,
+      start_date: "2023-10-04T15:46:14.000Z",
+      end_date: "2024-10-04T08:46:09.000Z",
+      planID: 9,
+      plan: "prod_KtlkzZVGq6bRTO",
+      name: "Plan Enterprise Full",
+      user_limit: "30",
+      products_limit: "10000",
+      type: "Enterprise",
     },
-    src: "https://content-management-profile.s3.amazonaws.com/id-37/37.png?1684953973972",
+    src: "https://content-management-profile.s3.amazonaws.com/id-343/343.png?1699640943284",
   },
   company: {
-    id_company: 1,
-    trade_name: "GRUPO BRAHMA",
-    company_name: "GRUPO BRAHMA",
+    id_company: 234,
+    trade_name: "L'ORÉAL",
+    company_name: "L'ORÉAL",
     rfc: "XAXX010101000",
     adress: "AA",
-    about_company: "",
-    telephone: "",
-    web_site: "",
-    zip_code: "",
+    about_company: " ",
+    telephone: " ",
+    web_site: " ",
+    zip_code: " ",
     email: null,
-    social_link: "",
+    social_link: " ",
     is_retailer: 0,
-    retailers: [
-      {
-        id: null,
-        name: null,
-        country: null,
-      },
-    ],
+    financedRetailers: [],
+    retailers: [],
   },
-  jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI3ZjNkZTM4Mi03NWE2LTRlNDAtYTI3NC00YmM5ODg2Nzk0YjYiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4NDk1NTYzOCwibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2ODQ5NTkyMzcsImlhdCI6MTY4NDk1NTYzOCwiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.ALvhpSGVv34JV8vLSg0CznmsIzRMJ_BFcmDI4qYXzr0qwgLLihon0M0xmODMhIHKcZK4jODC01guliB6fTPoCb8kfPHrBgLnHMBU8PxU1Fcc2EqF5U8lh4fJK6Mc7kiJ4lCreKJL3kT_1ytC-7FdRAlhNXzuJW6aMQQ785ODQ8-1RtHKW6U_b9x88-WFxjltEKuw734LGBSkz9iKZSumNBJBP8HTMgwOgmRTJ6lR-hPsujvl7aF3maXhftpk2fI8S_FzjVRMsxY3T8hQHIXEYwQUv-fC5SPOgc8XDuAp18MKfi0qkU1EYHQahC0qZmvgVGWEDcu5D36Xj0as4iAiFQ",
+  jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI0NTEyYjVhNS0zNjZhLTRiYjUtOTE2ZS1hYWZlMDU0MDI5OTIiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjQ1MTJiNWE1LTM2NmEtNGJiNS05MTZlLWFhZmUwNTQwMjk5MiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI4YTJhOTE3ZS0xZWU2LTQ5ODAtODZiZS0yZTEzMGI4ZTcyMmIiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY5OTY0MDk0MSwibmFtZSI6IkphaXIgTGXDs24iLCJwaG9uZV9udW1iZXIiOiIrNTI1NTU1NTU1NTU1IiwiZXhwIjoxNjk5NjQ0NTQxLCJpYXQiOjE2OTk2NDA5NDEsImVtYWlsIjoiaGxlb25AY29udGVudG9oLmNvbSJ9.YrLhtF5cee0S_iWX1gXBTJPxF8zls25SMK9GfCWoCpAabGRy9HtGSZ9KUuZlXICz13TTvgOfxFIv5duwS2vxYIlE1ZuLPHXSm2L4FuwJHcppedxssPNgfmxmVu-4B0SaMNWynjIWwbt_wumb2spwe3ONTcuRI-UgmJo_Rfa_cKUOiL-oNCQwkX6KhuWRGcfcpoUkfhi6tfOAgkA8VT5D8h-Dgawg5ibRnbjRMQejfNg1vVh_d2MpYhX9ve5SM9r1JdRCowgxMjb3ii6eXnng_UqjRdrB4008wkG8iZbz2C_NVJjJGrt1B454MZZmRvHbRogs-uu6U1JUsDW09qhcCg",
 };

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

@@ -40,6 +40,8 @@ export const Dashboard = ({ jwt, user, company }) => {
   const [applicantsFilter, setApplicantsFilter] = useState([]);
   const [totalCount, setTotalCount] = useState(0);
   const [isProviderFinanced] = useState(company?.financedRetailers?.length > 0);
+  const [trades, setTrades] = useState([]);
+  const [tradesSelected, setTradesSelected] = useState([]);
 
   const loadProductVersions = async (queryObject) => {
     const keys = Object.keys(queryObject);
@@ -84,9 +86,10 @@ export const Dashboard = ({ jwt, user, company }) => {
     const isRetailer = user.is_retailer && company.retailers;
     const isProvider = !user.is_retailer && user.id_role === 0;
     const isCollaborator = user.id_role > 0;
-    const { ordersBydate, ordersByStatus } =
+    const { ordersBydate, ordersByStatus, ordersByActive, companyTrades } =
       (await loadProductVersions(orderByStatus)) || {};
 
+    if (trades.length === 0) setTrades(companyTrades);
     const { total = 0, R = 0, PA = 0, Ex = 0, ACA = 0 } = ordersByStatus;
     let productsFinished = 0;
     if (isRetailer) productsFinished = Ex;
@@ -100,6 +103,8 @@ export const Dashboard = ({ jwt, user, company }) => {
           : prev,
       0
     );
+
+    const registeredProducts = ordersByActive.registered;
     let metricsArray = [
       metricsData[0]
         ? metricsData[0]
@@ -107,6 +112,7 @@ export const Dashboard = ({ jwt, user, company }) => {
     ];
 
     metricsArray.push(
+      { label: "Productos activos", value: registeredProducts },
       { label: "Productos filtrados", value: total },
       { label: "Productos sin asignar", value: PA + R },
       { label: "Productos en proceso", value: inProcess },
@@ -217,10 +223,13 @@ export const Dashboard = ({ jwt, user, company }) => {
   }, []);
 
   useEffect(() => {
-    orderByRequired?.startDate &&
+    if (
+      orderByRequired?.startDate &&
       orderByStatus?.endDate &&
-      metricsData.length > 0 &&
+      metricsData.length > 0
+    ) {
       setLoading(false);
+    }
   }, [orderByRequired, orderByStatus, metricsData]);
 
   useEffect(async () => {
@@ -229,14 +238,23 @@ export const Dashboard = ({ jwt, user, company }) => {
       startDate: startDate,
       endDate: endDate,
     };
-    companyId.length > 0 && (queryObject["companyId"] = companyId.join(","));
-    retailerId.length > 0 && (queryObject["retailerId"] = retailerId.join(","));
-    categoryId.length > 0 && (queryObject["categoryId"] = categoryId.join(","));
+    if (companyId.length > 0) queryObject["companyId"] = companyId.join(",");
+    if (retailerId.length > 0) queryObject["retailerId"] = retailerId.join(",");
+    if (categoryId.length > 0) queryObject["categoryId"] = categoryId.join(",");
+    if (tradesSelected.length > 0)
+      queryObject["trades"] = encodeURIComponent(tradesSelected.join(","));
     applicantsFilter.length > 0 &&
       (queryObject["requestedBy"] = applicantsFilter.join(","));
 
     await loadProductsByStatus(queryObject, true);
-  }, [companyId, retailerId, categoryId, datesRange, applicantsFilter]);
+  }, [
+    companyId,
+    retailerId,
+    categoryId,
+    datesRange,
+    applicantsFilter,
+    tradesSelected,
+  ]);
 
   return loading ? (
     <Loading />
@@ -301,6 +319,17 @@ export const Dashboard = ({ jwt, user, company }) => {
             defaultOption="Todos los solicitantes"
           />
         )}
+        {user.id_role === 0 && trades?.length > 0 && (
+          <CustomSelect
+            showSearchBar={true}
+            options={trades}
+            selectLabel="Todas las marcas"
+            placeHolder="Buscar marca"
+            customSelectId="trade-select"
+            parameterArray={tradesSelected}
+            setParameterArray={setTradesSelected}
+          />
+        )}
       </div>
       <div className="metric-cards">
         {metricsData.map((metric, index) => (