contentoh-components-library 21.4.60 → 21.4.62

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

@@ -0,0 +1,60 @@
+import { Container } from "./styles";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+import { BoxAttribute } from "../../molecules/BoxAttribute";
+import { useState, useEffect, memo } from "react";
+import { isEqual } from "lodash";
+
+export const BoxOnboarding = memo(
+  ({
+    panelColor,
+    index,
+    onChange,
+    data,
+    dataInputs,
+    inputs,
+  }) => {
+    const [atributos, setAtributos] = useState({});
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+      onChange && onChange(atributos);
+    }, [atributos]);
+    
+
+    useEffect(() => {
+      if (isLoading && Object.keys(data).length > 0) {
+        setAtributos(data);
+        setIsLoading(false);
+      }
+    }, [data]);
+
+    return (
+      <Container
+        panelColor={panelColor}
+        fontFamily={FontFamily.Raleway}
+        color={GlobalColors.original_magenta}
+      >
+        <div id="contenedor-caja">
+          <p fontFamily={FontFamily.Raleway}>Caja {index + 1}</p>
+          {inputs.map((attrId) => {
+            return (
+              <BoxAttribute
+                id={attrId}
+                key={attrId}
+                borderType="rectangle"
+                className="caja"
+                text={dataInputs[attrId]?.name}
+                required={dataInputs[attrId]?.required}
+                description={dataInputs[attrId]?.description}
+                atributos={atributos}
+                setAtributos={setAtributos}
+              />
+            );
+          })}
+          
+        </div>
+      </Container>
+    );
+  },
+  isEqual
+);

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

@@ -0,0 +1,44 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  font-family: ${FontFamily.Roboto}, sans-serif;
+  font-weight: 400;
+  font-size: var(--size);
+  line-height: 1.2;
+  background: white;
+  position: relative;
+  overflow: hidden;
+  width: 80%;
+  height: 100%;
+  text-align: center;
+  #contenedor-caja {
+    display: flex;
+    justify-content: space-between;
+    color: #262626;
+  }
+  #atr-alto {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  p {
+    font-family: ${FontFamily.RobotoMedium}, sans-serif;
+    font-size: 12px;
+    line-height: 1.2;
+    font-weight: 600;
+    align-self: center;
+  }
+  }
+  .icon-red {
+    color: #B64545;
+    height:18px;
+  }
+  .icon-gray {
+    color: #707070;
+  }
+  .icon-gray-l {
+    color: #707070;
+    height:18px;
+  }
+`

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>
+      )}
+    </>
   );
 };