contentoh-components-library 21.5.34 → 21.5.36

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

@@ -1,296 +1,296 @@
-import { Container } from "./styles";
-import { TagAndInputv2 } from "../../molecules/TagAndInputv2";
-import { ScreenHeaderv2 } from "../../atoms/ScreenHeaderv2";
-import { useState, useEffect } from "react";
-import { Box } from "../Box";
-
-export const InputGroupv2 = ({
-  inputGroup = {},
-  auditInputGroup,
-  activeSection,
-  dataInputs = {},
-  auditInputs = {},
-  updatedDescriptions,
-  setUpdatedDescriptions,
-  updatedDatasheets,
-  setUpdatedDatasheets,
-  articleId,
-  version,
-  dinamicHeight,
-  compare,
-  activeRetailer,
-  setUpdatedBoxData,
-  showMissingChars,
-}) => {
-  const inputTypeValue = (type) => {
-    switch (type) {
-      case "Booleano":
-        return "checkbox";
-      case "Numérico":
-        return "number";
-      default:
-        return "text";
-    }
-  };
-  const [showBox, setShowBox] = useState(false);
-
-  const isEquals = (dataInputsVal, auditInputsVal) => {
-    const result = dataInputsVal === auditInputsVal;
-    return result;
-  };
-
-  
-  useEffect(() => {
-    if (inputGroup.groupId === "16" && activeRetailer && activeRetailer?.retailer?.id) {
-      if (activeRetailer?.retailer?.id === 68) {
-        setShowBox(true);
-      } else {
-        setShowBox(false);
-      }
-    }
-  }, [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]);
-  // console.log("dataInputs",dataInputs);
-
-  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 && (
-          <ScreenHeaderv2
-            headerType={"retailer-name-header"}
-            text={`${inputGroup?.dataGroup}`}
-          />
-        )}
-        <div className="inputs-container">
-          {inputGroup?.inputs?.map((input, index) =>
-            activeSection === "Ficha técnica" ? (
-              <>
-                <TagAndInputv2
-                  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}
-                  required={dataInputs[input]?.required}
-                  minWords={dataInputs[input]?.min_words}
-                  maxWords={dataInputs[input]?.max_words}
-                  minChar={dataInputs[input]?.min_chars}
-                  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"
-                      : ""
-                  }
-                  showMissingChars={showMissingChars}
-                />
-              </>
-            ) : (
-              <TagAndInputv2
-                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}
-                required={input.required}
-                minWords={input?.min_words}
-                maxWords={input?.max_words}
-                minChar={input?.min_chars}
-                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"
-                    : ""
-                }
-                showMissingChars={showMissingChars}
-              />
-            )
-          )}
-        </div>
-      </Container>
-    )}
-     {(inputGroup.groupId === "16" && activeRetailer?.retailer?.id === 74) && (
-      <Container
-        className={
-          activeSection === "Ficha técnica"
-            ? "datasheets-layout"
-            : "descriptions-layout"
-        }
-      >
-        {inputGroup?.dataGroup && (
-          <ScreenHeaderv2
-            headerType={"retailer-name-header"}
-            text={`${inputGroup?.dataGroup}`}
-          />
-        )}
-        <div className="inputs-container">
-          {inputGroup?.inputs?.map((input, index) =>
-            activeSection === "Ficha técnica" ? (
-              <>
-                <TagAndInputv2
-                  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}
-                  required={input.required}
-                  minWords={input?.min_words}
-                  maxWords={input?.max_words}
-                  minChar={input?.min_chars}
-                  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"
-                      : ""
-                  }
-                  showMissingChars={showMissingChars}
-                />
-              </>
-            ) : (
-              <TagAndInputv2
-                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}
-                required={input.required}
-                minWords={input?.min_words}
-                maxWords={input?.max_words}
-                minChar={input?.min_chars}
-                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"
-                    : ""
-                }
-                showMissingChars={showMissingChars}
-              />
-            )
-          )}
-        </div>
-      </Container>
-    )}
-  </>
-);
-}  
+import { Container } from "./styles";
+import { TagAndInputv2 } from "../../molecules/TagAndInputv2";
+import { ScreenHeaderv2 } from "../../atoms/ScreenHeaderv2";
+import { useState, useEffect } from "react";
+import { Box } from "../Box";
+
+export const InputGroupv2 = ({
+  inputGroup = {},
+  auditInputGroup,
+  activeSection,
+  dataInputs = {},
+  auditInputs = {},
+  updatedDescriptions,
+  setUpdatedDescriptions,
+  updatedDatasheets,
+  setUpdatedDatasheets,
+  articleId,
+  version,
+  dinamicHeight,
+  compare,
+  activeRetailer,
+  setUpdatedBoxData,
+  showMissingChars,
+}) => {
+  const inputTypeValue = (type) => {
+    switch (type) {
+      case "Booleano":
+        return "checkbox";
+      case "Numérico":
+        return "number";
+      default:
+        return "text";
+    }
+  };
+  const [showBox, setShowBox] = useState(false);
+
+  const isEquals = (dataInputsVal, auditInputsVal) => {
+    const result = dataInputsVal === auditInputsVal;
+    return result;
+  };
+
+  
+  useEffect(() => {
+    if (inputGroup.groupId === "16" && activeRetailer && activeRetailer?.retailer?.id) {
+      if (activeRetailer?.retailer?.id === 68) {
+        setShowBox(true);
+      } else {
+        setShowBox(false);
+      }
+    }
+  }, [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]);
+  // console.log("dataInputs",dataInputs);
+
+  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 && (
+          <ScreenHeaderv2
+            headerType={"retailer-name-header"}
+            text={`${inputGroup?.dataGroup}`}
+          />
+        )}
+        <div className="inputs-container">
+          {inputGroup?.inputs?.map((input, index) =>
+            activeSection === "Ficha técnica" ? (
+              <>
+                <TagAndInputv2
+                  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}
+                  required={dataInputs[input]?.required}
+                  minWords={dataInputs[input]?.min_words}
+                  maxWords={dataInputs[input]?.max_words}
+                  minChar={dataInputs[input]?.min_chars}
+                  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"
+                      : ""
+                  }
+                  showMissingChars={showMissingChars}
+                />
+              </>
+            ) : (
+              <TagAndInputv2
+                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}
+                required={input.required}
+                minWords={input?.min_words}
+                maxWords={input?.max_words}
+                minChar={input?.min_chars}
+                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"
+                    : ""
+                }
+                showMissingChars={showMissingChars}
+              />
+            )
+          )}
+        </div>
+      </Container>
+    )}
+     {(inputGroup.groupId === "16" && activeRetailer?.retailer?.id === 74) && (
+      <Container
+        className={
+          activeSection === "Ficha técnica"
+            ? "datasheets-layout"
+            : "descriptions-layout"
+        }
+      >
+        {inputGroup?.dataGroup && (
+          <ScreenHeaderv2
+            headerType={"retailer-name-header"}
+            text={`${inputGroup?.dataGroup}`}
+          />
+        )}
+        <div className="inputs-container">
+          {inputGroup?.inputs?.map((input, index) =>
+            activeSection === "Ficha técnica" ? (
+              <>
+                <TagAndInputv2
+                  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}
+                  required={input.required}
+                  minWords={input?.min_words}
+                  maxWords={input?.max_words}
+                  minChar={input?.min_chars}
+                  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"
+                      : ""
+                  }
+                  showMissingChars={showMissingChars}
+                />
+              </>
+            ) : (
+              <TagAndInputv2
+                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}
+                required={input.required}
+                minWords={input?.min_words}
+                maxWords={input?.max_words}
+                minChar={input?.min_chars}
+                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"
+                    : ""
+                }
+                showMissingChars={showMissingChars}
+              />
+            )
+          )}
+        </div>
+      </Container>
+    )}
+  </>
+);
+}