contentoh-components-library 21.4.68 → 21.4.70

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) => (

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

@@ -0,0 +1,213 @@
+import { ProductEditionv2 } from "./index";
+
+export default {
+  title: "Components/pages/ProductEditionv2",
+  component: ProductEditionv2,
+};
+
+const Template = (args) => <ProductEditionv2 {...args} />;
+
+export const ProductEditionv2Default = Template.bind({});
+
+ProductEditionv2Default.args = {
+  tabsSections: {
+    Descripción: true,
+    "Ficha técnica": false,
+    Imágenes: false,
+  },
+  token:
+    "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIyM2Q1NTlmYi1jMzIwLTRhMjItYjJmNy1lOThhYTFhZGEyNmYiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4MzkyNjgyMSwibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2ODM5MzA0MjEsImlhdCI6MTY4MzkyNjgyMSwiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.TvCoaKoctj5mypXWMz3NyV1Vm1ToBV0vJmpVyZSQw4-ikTChkxcZ5tFYvqhk1GdvNCFttfSQIqM-14dAYYBc28YwwKP86gqOuzB1fG41rN5x1Yx3tkJq6hiVRgiBbSHWtThA9c8VnxNQbrJiaRTvvkDiM5KNTEst1oxQHL5Ct9_iKQMJMRFie7Xv0xnyS0qZ6QHK4Q2A9OHsnDkAuumALZJcE19Zh6VgSitgWrZiz3x5Text4Q-U-R48NUAzUFirAzYZzJN_fCme5pGf1AnUaZjeUjPsmrV5TBVzPEYwXO0KG8lYjL8id80D7tbGs28ZIK6B4rf3-eqI_ngmBB4CjQ",
+  articleId: 238,
+  category: 846,
+  version: 2,
+  productSelected: {
+    orderId: 15275,
+    status: "AA",
+    datasheet_status: "AA",
+    prio: "none",
+    version: 3,
+    description_status: "AA",
+    images_status: "AA",
+    brand: null,
+    retailerOrder: 0,
+    missing: {
+      datasheet: null,
+      descriptions: null,
+      images: null,
+    },
+    services: {
+      datasheets: 1,
+      descriptions: 1,
+      images: 1,
+    },
+    article: {
+      category: "Abarrotes|Abarrotes Secos|Frutos Secos",
+      company_name: "GRUPO BRAHMA",
+      country: "México",
+      id_category: "11",
+      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_order: 15275,
+      id_article: 39485,
+      id_auditor: 37,
+      name: "Mix de nueces",
+      timestamp: "2023-07-14T21:03:19.000Z",
+      upc: "7543453453",
+    },
+    retailers: [
+      {
+        id: 34,
+        name: "San Pablo",
+      },
+    ],
+    statusByRetailer: {
+      34: {
+        datasheet: "AA",
+        description: "AA",
+        images: "AA",
+      },
+    },
+    retailersAvailable: [
+      {
+        id: 34,
+        name: "San Pablo",
+      },
+    ],
+    categoryName: "Abarrotes|Abarrotes Secos|Frutos Secos",
+    upc: "7543453453",
+    id_article: 39485,
+    id_order: 15275,
+  },
+  productToEdit: {
+    ArticleId: 39485,
+    idCategory: "11",
+    product: {
+      orderId: 15275,
+      status: "AA",
+      datasheet_status: "AA",
+      prio: "none",
+      version: 3,
+      description_status: "AA",
+      images_status: "AA",
+      brand: null,
+      retailerOrder: 0,
+      missing: {
+        datasheet: null,
+        descriptions: null,
+        images: null,
+      },
+      services: {
+        datasheets: 1,
+        descriptions: 1,
+        images: 1,
+      },
+      article: {
+        category: "Abarrotes|Abarrotes Secos|Frutos Secos",
+        company_name: "GRUPO BRAHMA",
+        country: "México",
+        id_category: "11",
+        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_order: 15275,
+        id_article: 39485,
+        id_auditor: 37,
+        name: "Mix de nueces",
+        timestamp: "2023-07-14T21:03:19.000Z",
+        upc: "7543453453",
+      },
+      retailers: [
+        {
+          id: 34,
+          name: "San Pablo",
+        },
+      ],
+      statusByRetailer: {
+        34: {
+          datasheet: "AA",
+          description: "AA",
+          images: "AA",
+        },
+      },
+      retailersAvailable: [
+        {
+          id: 34,
+          name: "San Pablo",
+        },
+      ],
+      categoryName: "Abarrotes|Abarrotes Secos|Frutos Secos",
+      upc: "7543453453",
+      id_article: 39485,
+      id_order: 15275,
+    },
+  },
+  location: {
+    pathname: "/EditProducts",
+    search: "",
+    hash: "",
+    state: {
+      withChat: true,
+      chatType: "product_status",
+      origin: "RequestWithContentoh",
+    },
+    key: "24vwut",
+  },
+  user: {
+    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: 1,
+    is_user_tech: "ADMIN-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: "50",
+      products_limit: "5000",
+      type: "Enterprise",
+    },
+    src: "https://content-management-profile.s3.amazonaws.com/id-28/28.png?1693338334183",
+  },
+  company: {
+    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,
+    financedRetailers: [],
+    retailers: [],
+  },
+  showSurvey: (v) => v && alert("se muestra"),
+};