contentoh-components-library 21.4.63 → 21.4.65

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

@@ -0,0 +1,50 @@
+import { Container } from "./styles";
+import { GridItem } from "../../molecules/GridItem";
+import { HeaderItem } from "../../molecules/HeaderItem";
+import { RowItem } from "../../molecules/RowItem";
+
+export const GridProducts = ({
+  products = [],
+  columnsArray = [],
+  gridView = true,
+  chkOnChange,
+  selected = [],
+  chkChecked,
+  checkAll,
+  chkCheckedAll,
+  onGridClick,
+}) => {
+  return (
+    <Container>
+      {!gridView ? (
+        products?.map(({ gridElement, product, id }, i) => (
+          <GridItem
+            key={i}
+            id={id}
+            index={i}
+            product={product}
+            gridElement={gridElement}
+            chkOnChange={chkOnChange}
+            onGridClick={onGridClick}
+            selected={selected}
+            chkChecked={chkChecked}
+          />
+        ))
+      ) : (
+        <div className="table-view">
+          <HeaderItem
+            columnsArray={columnsArray}
+            checkAll={checkAll}
+            chkCheckedAll={chkCheckedAll}
+          />
+          <RowItem
+            productsArray={products}
+            chkOnChange={chkOnChange}
+            onGridClick={onGridClick}
+            chkChecked={chkChecked}
+          />
+        </div>
+      )}
+    </Container>
+  );
+};

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

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  height: calc(100% - 100px);
+  overflow: auto;
+
+  .table-view {
+    height: 100%;
+    width: 100%;
+  }
+`;

package/src/components/organisms/GridProducts/utils.js

@@ -0,0 +1,111 @@
+import { RetailerCatalog } from "../../atoms/RetailerCatalog";
+import { UserCatalog } from "../../atoms/UserCatalog";
+
+export const getProductsToTable = (
+  products = [],
+  textSpecialists,
+  imagesSpecialists,
+  auditors,
+  images,
+  onAssign
+) => {
+  const productsTableArray = [];
+
+  products.forEach((product) => {
+    const { article, orderId, upc, status, version } = product;
+    const id = article?.id_article + "-" + orderId;
+    const imgArray = images[article?.id_article + "-" + version];
+    const element = {
+      id,
+      cols: [
+        { name: article?.country || "-", flex: 1, minWidth: 100 },
+        { name: orderId || "-", flex: 1, minWidth: 100 },
+        { name: upc || "-", flex: 1, minWidth: 100 },
+        { name: article?.name || "-", flex: 1, minWidth: 200 },
+        { name: "S/M" || "-", flex: 1, minWidth: 100 },
+        { name: status || "-", flex: 1, minWidth: 100 },
+        {
+          name: (
+            <RetailerCatalog
+              id={"retailers-" + id}
+              article={product}
+              retailers={product.retailers}
+            />
+          ),
+          flex: 1,
+          minWidth: 100,
+        },
+        { name: product.prio, flex: 1, minWidth: 100 },
+        {
+          name: (
+            <UserCatalog
+              datasheet={article.id_datasheet_especialist}
+              description={article.id_description_especialist}
+              images={article.id_images_especialist}
+              auditor={article.id_auditor}
+              textSpecialists={textSpecialists}
+              imagesSpecialists={imagesSpecialists}
+              auditors={auditors}
+              id={"users-" + id}
+              product={product}
+              onAssign={onAssign}
+            />
+          ),
+          flex: 1,
+          minWidth: 100,
+        },
+        { name: "Cont.", flex: 1, minWidth: 100 },
+      ],
+      gridElement: {
+        images: imgArray,
+        info: [
+          { title: "name", value: article?.name || "-" },
+          { title: "order", value: orderId || "-" },
+          { title: "category", value: article?.category || "-" },
+          { title: "company", value: article?.company_name || "-" },
+          { title: "price", value: article?.price || "-" },
+        ],
+        status: [
+          { title: "datasheet", value: product?.datasheet_status, percent: 80 },
+          {
+            title: "description",
+            value: product?.description_status,
+            percent: 80,
+          },
+          { title: "images", value: product?.images_status, percent: 80 },
+        ],
+        catalogs: {
+          leftSide: (
+            <RetailerCatalog
+              id={"retailers-" + id}
+              limit={2}
+              article={product}
+              retailers={product.retailers}
+            />
+          ),
+          rightSide: (
+            <UserCatalog
+              datasheet={article.id_datasheet_especialist}
+              description={article.id_description_especialist}
+              images={article.id_images_especialist}
+              auditor={article.id_auditor}
+              textSpecialists={textSpecialists}
+              imagesSpecialists={imagesSpecialists}
+              auditors={auditors}
+              id={"users-" + id}
+              product={product}
+              onAssign={onAssign}
+            />
+          ),
+        },
+      },
+      showBottom: true,
+      product,
+      article,
+    };
+
+    productsTableArray.push(element);
+  });
+
+  return productsTableArray;
+};

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

@@ -21,7 +21,7 @@ export const InputGroup = ({
   compare,
   groupData = [],
   setUpdatedBoxData,
-  activeRetailer
+  activeRetailer,
 }) => {
   const inputTypeValue = (type) => {
     switch (type) {
@@ -41,7 +41,11 @@ export const InputGroup = ({
   };
 
   useEffect(() => {
-    if (inputGroup.groupId === "16" && activeRetailer && activeRetailer?.retailer?.id) {
+    if (
+      inputGroup.groupId === "16" &&
+      activeRetailer &&
+      activeRetailer?.retailer?.id
+    ) {
       if (activeRetailer?.retailer?.id === 68) {
         setShowBox(true);
       } else {
@@ -50,127 +54,127 @@ export const InputGroup = ({
     }
   }, [activeRetailer, inputGroup.groupId]);
 
-  // useEffect(() => {
-  //   if (showBox) {
-  //     // Realiza la acción que deseas cuando showBox es true
-  //     console.log("showBox es true");
-  //   } else {
-  //     // Realiza la acción que deseas cuando showBox es false
-  //     console.log("showBox es false");
-  //   }
-  // }, [showBox]);
-
   return (
     <>
       {inputGroup.groupId === "16" && activeRetailer?.retailer?.id === 68 && (
         <Container
-            className={
-              activeSection === "Ficha técnica"
-                ? "datasheets-layout"
-                : "descriptions-layout"
-            }
-          >
-            <Box
-              inputGroup={inputGroup}
-              dataInputs={dataInputs}
-              onChange={setUpdatedBoxData}
-            />
-          </Container>
-        )}
-      {(inputGroup.groupId !== "16") && (
-      <Container
-        className={
-          activeSection === "Ficha técnica"
-            ? "datasheets-layout"
-            : "descriptions-layout"
-        }
-      >
-        {inputGroup?.dataGroup && (
-          <ScreenHeader
-            headerType={"retailer-name-header"}
-            text={`${inputGroup?.dataGroup}`}
+          className={
+            activeSection === "Ficha técnica"
+              ? "datasheets-layout"
+              : "descriptions-layout"
+          }
+        >
+          <Box
+            inputGroup={inputGroup}
+            dataInputs={dataInputs}
+            onChange={setUpdatedBoxData}
           />
-        )}
-        <div className="inputs-container">
-          {inputGroup?.inputs?.map((input, index) =>
-            activeSection === "Ficha técnica" ? (
-            <>
-              <TagAndInput
-                key={
-                  index +
-                  "-" +
-                  dataInputs[input]?.value +
-                  "-" +
-                  dataInputs[input]?.id +
-                  "-" +
-                  compare
-                }
-                //disabled={input === 40001}
-                disabled={false}
-                inputId={dataInputs[input]?.id}
-                version={version}
-                inputType={inputTypeValue(dataInputs[input]?.type)}
-                label={
-                  dataInputs[input]?.name +
-                  (dataInputs[input]?.required ? "*" : "")
-                }
-                value={
-                  compare ? auditInputs[input]?.value : dataInputs[input]?.value
-                }
-                inputPlaceHolder={input?.placeholder}
-                articleId={articleId}
-                isRequired={dataInputs[input]?.required}
-                updatedDatasheets={updatedDatasheets}
-                setUpdatedDatasheets={setUpdatedDatasheets}
-                maxChar={
-                  dataInputs[input]?.max_chars
-                    ? dataInputs[input]?.max_chars
-                    : 999
-                }
-                optionList={dataInputs[input]?.option_list}
-                description={dataInputs[input]?.description}
-                showTooltip={true}
-                auditClass={
-                  compare &&
-                  !isEquals(dataInputs[input].value, auditInputs[input].value)
-                    ? "audit-class"
-                    : ""
-                }
-              />
-            </>
-            ) : (
-              <TagAndInput
-                key={index + "-" + input?.value + "-" + compare}
-                inputId={input.id}
-                index={index}
-                inputType={"textarea"}
-                label={input?.name + (input.required ? "*" : "")}
-                value={
-                  compare ? auditInputGroup?.inputs[index]?.value : input?.value
-                }
-                isRequired={input.required}
-                maxChar={input.max_chars}
-                inputPlaceHolder={input?.placeholder}
-                updatedDescriptions={updatedDescriptions}
-                setUpdatedDescriptions={setUpdatedDescriptions}
-                articleId={articleId}
-                version={version}
-                dinamicHeight={dinamicHeight}
-                description={input?.description}
-                showTooltip={true}
-                auditClass={
-                  compare &&
-                  !isEquals(input?.value, auditInputGroup?.inputs[index]?.value)
-                    ? "audit-class"
-                    : ""
-                }
-              />            
-            )
+        </Container>
+      )}
+      {inputGroup.groupId !== "16" && (
+        <Container
+          className={
+            activeSection === "Ficha técnica"
+              ? "datasheets-layout"
+              : "descriptions-layout"
+          }
+        >
+          {inputGroup?.dataGroup && (
+            <ScreenHeader
+              headerType={"retailer-name-header"}
+              text={`${inputGroup?.dataGroup}`}
+            />
           )}
-        </div>
-      </Container>
+          <div className="inputs-container">
+            {inputGroup?.inputs?.map((input, index) =>
+              activeSection === "Ficha técnica" ? (
+                <>
+                  <TagAndInput
+                    key={
+                      index +
+                      "-" +
+                      dataInputs[input]?.value +
+                      "-" +
+                      dataInputs[input]?.id +
+                      "-" +
+                      compare
+                    }
+                    //disabled={input === 40001}
+                    disabled={false}
+                    inputId={dataInputs[input]?.id}
+                    version={version}
+                    inputType={inputTypeValue(dataInputs[input]?.type)}
+                    label={
+                      dataInputs[input]?.name +
+                      (dataInputs[input]?.required ? "*" : "")
+                    }
+                    value={
+                      compare
+                        ? auditInputs[input]?.value
+                        : dataInputs[input]?.value
+                    }
+                    inputPlaceHolder={input?.placeholder}
+                    articleId={articleId}
+                    isRequired={dataInputs[input]?.required}
+                    updatedDatasheets={updatedDatasheets}
+                    setUpdatedDatasheets={setUpdatedDatasheets}
+                    maxChar={
+                      dataInputs[input]?.max_chars
+                        ? dataInputs[input]?.max_chars
+                        : 999
+                    }
+                    optionList={dataInputs[input]?.option_list}
+                    description={dataInputs[input]?.description}
+                    showTooltip={true}
+                    auditClass={
+                      compare &&
+                      !isEquals(
+                        dataInputs[input].value,
+                        auditInputs[input].value
+                      )
+                        ? "audit-class"
+                        : ""
+                    }
+                  />
+                </>
+              ) : (
+                <TagAndInput
+                  key={index + "-" + input?.value + "-" + compare}
+                  inputId={input.id}
+                  index={index}
+                  inputType={"textarea"}
+                  label={input?.name + (input.required ? "*" : "")}
+                  value={
+                    compare
+                      ? auditInputGroup?.inputs[index]?.value
+                      : input?.value
+                  }
+                  isRequired={input.required}
+                  maxChar={input.max_chars}
+                  inputPlaceHolder={input?.placeholder}
+                  updatedDescriptions={updatedDescriptions}
+                  setUpdatedDescriptions={setUpdatedDescriptions}
+                  articleId={articleId}
+                  version={version}
+                  dinamicHeight={dinamicHeight}
+                  description={input?.description}
+                  showTooltip={true}
+                  auditClass={
+                    compare &&
+                    !isEquals(
+                      input?.value,
+                      auditInputGroup?.inputs[index]?.value
+                    )
+                      ? "audit-class"
+                      : ""
+                  }
+                />
+              )
+            )}
+          </div>
+        </Container>
       )}
-       {(inputGroup.groupId === "16" && activeRetailer?.retailer?.id === 74) && (
+      {inputGroup.groupId === "16" && activeRetailer?.retailer?.id === 74 && (
         <Container
           className={
             activeSection === "Ficha técnica"
@@ -230,7 +234,10 @@ export const InputGroup = ({
                     onChange={setUpdatedBoxData}
                     auditClass={
                       compare &&
-                      !isEquals(dataInputs[input].value, auditInputs[input].value)
+                      !isEquals(
+                        dataInputs[input].value,
+                        auditInputs[input].value
+                      )
                         ? "audit-class"
                         : ""
                     }
@@ -244,7 +251,9 @@ export const InputGroup = ({
                   inputType={"textarea"}
                   label={input?.name + (input.required ? "*" : "")}
                   value={
-                    compare ? auditInputGroup?.inputs[index]?.value : input?.value
+                    compare
+                      ? auditInputGroup?.inputs[index]?.value
+                      : input?.value
                   }
                   isRequired={input.required}
                   maxChar={input.max_chars}
@@ -258,7 +267,10 @@ export const InputGroup = ({
                   showTooltip={true}
                   auditClass={
                     compare &&
-                    !isEquals(input?.value, auditInputGroup?.inputs[index]?.value)
+                    !isEquals(
+                      input?.value,
+                      auditInputGroup?.inputs[index]?.value
+                    )
                       ? "audit-class"
                       : ""
                   }

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

@@ -31,7 +31,6 @@ export const ContainerModal = styled.div`
       align-items: center;
       justify-content: flex-start;
       gap: 6px;
-      margin-bottom: 20px;
 
       .label-title {
         width: 100%;
@@ -42,6 +41,10 @@ export const ContainerModal = styled.div`
         color: #262626;
         white-space: pre-wrap;
       }
+
+      & + * {
+        margin-top: 20px;
+      }
     }
 
     .iconModal {

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

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