contentoh-components-library 21.4.61 → 21.4.62

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

@@ -1,6 +1,9 @@
 import { Container } from "./styles";
 import { ScreenHeader } from "../../atoms/ScreenHeader";
 import { TagAndInput } from "../../molecules/TagAndInput";
+import { BoxOnboarding } from "../BoxOnboarding";
+import { Box } from "../Box";
+import { useEffect, useState } from "react";
 
 export const InputGroup = ({
   inputGroup = {},
@@ -16,6 +19,9 @@ export const InputGroup = ({
   version,
   dinamicHeight,
   compare,
+  groupData = [],
+  setUpdatedBoxData,
+  activeRetailer
 }) => {
   const inputTypeValue = (type) => {
     switch (type) {
@@ -27,101 +33,241 @@ export const InputGroup = ({
         return "text";
     }
   };
+  const [showBox, setShowBox] = useState(false);
 
   const isEquals = (dataInputsVal, auditInputsVal) => {
     const result = dataInputsVal === auditInputsVal;
     return result;
   };
 
-  return (
-    <Container
-      className={
-        activeSection === "Ficha técnica"
-          ? "datasheets-layout"
-          : "descriptions-layout"
+  useEffect(() => {
+    if (inputGroup.groupId === "16" && activeRetailer && activeRetailer?.retailer?.id) {
+      if (activeRetailer?.retailer?.id === 68) {
+        setShowBox(true);
+      } else {
+        setShowBox(false);
       }
-    >
-      {inputGroup?.dataGroup && (
-        <ScreenHeader
-          headerType={"retailer-name-header"}
-          text={inputGroup?.dataGroup}
-        />
-      )}
-      <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"
-                  : ""
-              }
+    }
+  }, [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}
             />
-          ) : (
-            <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) && (
+        <Container
+          className={
+            activeSection === "Ficha técnica"
+              ? "datasheets-layout"
+              : "descriptions-layout"
+          }
+        >
+          {inputGroup?.dataGroup && (
+            <ScreenHeader
+              headerType={"retailer-name-header"}
+              text={`${inputGroup?.dataGroup}`}
+            />
+          )}
+          <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}
+                    inputGroup={inputGroup}
+                    dataInputs={dataInputs}
+                    onChange={setUpdatedBoxData}
+                    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>
+      )}
+    </>
   );
 };

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

@@ -16,196 +16,107 @@ ProviderProductEditionDefault.args = {
     Imágenes: false,
   },
   token:
-    "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIwZmUxYTZjMS05MzcyLTRiNjktOTgwMi1lN2QxOGM2MzU4YzQiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY5MzMzODMzMiwibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2OTMzNDE5MzIsImlhdCI6MTY5MzMzODMzMiwiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.lQwTS_RbJalEPmmpWcBsVYd8xx4tkw3U6uyW_laE6ucyHQpXSXYMfadAxxV2PZ5ObbgmX98nFKj32E2F4CxHxw3W7B1Wj7ZoGML409GjlylQ1RuVVHjwTw0OH5TtveV1JNNpts0belvzxbk5vX9E1vKoZLOKn8gO9yaFe0YawKjS0hW-P4NcjIonsNJ5KWMsh0fJCM2oAKAk8oAGZcszYHknMPF6ahf-fWeboVuK89UEsKlQukr7W8fnIePFI8aSlKM1nG0I7nOT_1734Pf-A9QQDXEwhfj8NMHHICb2c_ECgHPEspM9VxIR6Lbws-gCTSG6FTMjsIFKU3EqaQvlVw",
-  articleId: 39485,
-  category: 11,
-  version: 3,
+    "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIyM2Q1NTlmYi1jMzIwLTRhMjItYjJmNy1lOThhYTFhZGEyNmYiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4MzkyNjgyMSwibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2ODM5MzA0MjEsImlhdCI6MTY4MzkyNjgyMSwiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.TvCoaKoctj5mypXWMz3NyV1Vm1ToBV0vJmpVyZSQw4-ikTChkxcZ5tFYvqhk1GdvNCFttfSQIqM-14dAYYBc28YwwKP86gqOuzB1fG41rN5x1Yx3tkJq6hiVRgiBbSHWtThA9c8VnxNQbrJiaRTvvkDiM5KNTEst1oxQHL5Ct9_iKQMJMRFie7Xv0xnyS0qZ6QHK4Q2A9OHsnDkAuumALZJcE19Zh6VgSitgWrZiz3x5Text4Q-U-R48NUAzUFirAzYZzJN_fCme5pGf1AnUaZjeUjPsmrV5TBVzPEYwXO0KG8lYjL8id80D7tbGs28ZIK6B4rf3-eqI_ngmBB4CjQ",
+  articleId: 39550,
+  category: 287,
+  version: 1,
   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,
+    id_article:39550,
+    upc:43654697,
+    name:"Campana de Cocina",
+    timestamp:"2023-08-04T22:23:40.000Z",
+    categoryName:"Ferretería|Ferretería General|Tornillos, Tuercas y Arandelas",
+    id_category:287,
+    version:1,
+    retailersAvailable:[
+      {name:"The Home Depot Golden","id":58},
+      {name:"The Home Depot Onboarding","id":68}],
+      percentage:"89"
     },
-    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",
-        },
+    idCategory:287,
+    ArticleId:39550,
+    product:[{
+      id_article:39550,
+      upc:43654697,
+      name:"Campana de Cocina",
+      timestamp:"2023-08-04T22:23:40.000Z",
+      categoryName:"Ferretería|Ferretería General|Tornillos, Tuercas y Arandelas",
+      id_category:287,
+      version:1,
+      retailersAvailable:[
+        {name:"The Home Depot Golden",
+        id:58,
+        percentage:100},
+        {name:"The Home Depot Onboarding",
+        id:68,
+        percentage:78}
       ],
-      categoryName: "Abarrotes|Abarrotes Secos|Frutos Secos",
-      upc: "7543453453",
-      id_article: 39485,
-      id_order: 15275,
+      percentage:"89"}] 
     },
-  },
   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",
-  },
+    id_user:191,
+    name:"Demo",
+    last_name:"Demo",
+    email:"merchants24feb@allfreemail.net",
+    position:"Test",
+    telephone:"+52123456789",
+    country:"México",
+    id_company:923,
+    id_cognito:"c3cd160c-76c2-497c-9357-5ef949307e1e",
+    birth_Date:null,
+    about_me:null,
+    zip_code:null,
+    address:null,
+    job:null,
+    id_stripe:null,
+    id_role:0,
+    active:1,
+    is_retailer:0,
+    email_notify:1,
+    is_user_tech:null,
+    membership:
+    {id:114,
+      start_date:"2023-02-24T18:14:43.000Z",
+      end_date:"2024-02-24T18:14:43.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-191/191.png?1697171804447"},
   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: [],
-  },
+    id_company:923,
+    trade_name:"Demo",
+    company_name:"Demo",
+    rfc:"Demo",
+    adress:"Demo",
+    about_company:null,
+    telephone:null,
+    web_site:null,
+    zip_code:null,
+    email:null,
+    social_link:null,
+    is_retailer:0,
+    financedRetailers:
+    [{id:68,
+      name:"The Home Depot Onboarding",
+      country:"México",
+      id_region:1,
+      active:1,
+      flow:1}],
+      retailers:[{id:68,name:"The Home Depot Onboarding",country:"México",id_region:1,"active":1,flow:1}]},
   showSurvey: (v) => v && alert("se muestra"),
 };