contentoh-components-library 21.4.44 → 21.4.46

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

@@ -1,23 +1,46 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Container } from "./styles";
 import { FontFamily, GlobalColors } from "../../../global-files/variables";
 import { BoxOnboarding } from "../BoxOnboarding";
 import { BoxButtons } from "../../molecules/BoxButtons";
-import { useEffect } from "react";
 
-export const Box = ({onChange}) => {
+export const Box = ({ onChange, dataInputs, inputGroup }) => {
   const [isDeleteDisabled, setIsDeleteDisabled] = useState(true);
   const [isEditEnabled, setIsEditEnabled] = useState(false);
   const [boxOnboardingList, setBoxOnboardingList] = useState([
     {
       showAdd: true,
-      value:{}
+      value: {},
     },
   ]);
-  
+
+  useEffect(() => {
+    console.log("dataInputs:", dataInputs);
+    console.log("inputGroup:", inputGroup);
+    const temp = {};
+    let maxBoxId = 0;
+    inputGroup.inputs.forEach((attrId) => {
+      if (!dataInputs[attrId].box) return;
+      Object.entries(dataInputs[attrId].box).forEach(([boxId, value]) => {
+        if (boxId > maxBoxId) maxBoxId = boxId;
+        if (!temp[boxId]) temp[boxId] = {};
+        temp[boxId][attrId] = value;
+      });
+    });
+    const tempList = Object.values(temp);
+    if (tempList.length > 0) {
+      setBoxOnboardingList(
+        tempList.map((value, index) =>
+          index === tempList.length - 1 ? { showAdd: true, value } : { value }
+        )
+      );
+    }
+  }, []);
+
   const handleAddBoxOnboarding = () => {
     const newBoxOnboarding = {
-      showAdd: false, 
+      showAdd: false,
+      value: {},
     };
 
     setBoxOnboardingList([...boxOnboardingList, newBoxOnboarding]);
@@ -35,47 +58,55 @@ export const Box = ({onChange}) => {
   const handleToggleEdit = () => {
     setIsEditEnabled(!isEditEnabled);
   };
-
-  useEffect(( ) => {
-    onChange && onChange(boxOnboardingList)
-  }, [
-    boxOnboardingList
-  ])
-  // console.log(atributos)
-  console.log("onboardinglist",boxOnboardingList)
+  
+  useEffect(() => {
+    onChange && onChange(boxOnboardingList);
+  }, [boxOnboardingList]);
 
   return (
-    <Container fontFamily={FontFamily.Raleway} color={GlobalColors.original_magenta}>
-      <h1 fontFamily={FontFamily.Raleway}>Cajas</h1>
+    <Container
+      fontFamily={FontFamily.Raleway}
+      color={GlobalColors.original_magenta}
+    >
+      <h1 fontFamily={FontFamily.Raleway}>{inputGroup.dataGroup}</h1>
       <div className="container-box">
         {boxOnboardingList.map((boxOnboarding, index) => (
           <>
-          <div className="container-buttons">
-            <BoxOnboarding key={index} index={index} showAdd={boxOnboarding.showAdd} isEditEnabled={isEditEnabled}
-            onChange={e=>{
-              setBoxOnboardingList(
-                prev=>{
-                  return prev.map((box,i)=>{
-                    if(i!= index){
-                      return box;
-                    }
-                    return {...box, value:e}
-                  })
-                })
-            }}/>
-            <BoxButtons
-              showAdd={boxOnboarding.showAdd}
-              onAdd={handleAddBoxOnboarding}
-              onDelete={() => handleDeleteBoxOnboarding(index)}
-              isDeleteDisabled={isDeleteDisabled}
-              onToggleEdit={handleToggleEdit}
-              isEditEnabled={isEditEnabled}
-            />
-          </div>
-           
+
+            <div className="container-buttons">
+              <BoxOnboarding
+                key={index}
+                index={index}
+                showAdd={boxOnboarding.showAdd}
+                data={boxOnboarding.value}
+                dataInputs={dataInputs}
+                inputs={inputGroup.inputs}
+                isEditEnabled={isEditEnabled}
+                onChange={(e) => {
+                  console.log("e in Box",e);
+                  setBoxOnboardingList((prev) => {
+                    return prev.map((box, i) => {
+                      if (i != index) {
+                        return box;
+                      }
+                      return { ...box, value: e };
+                    });
+                  });
+                }}
+              />
+              <BoxButtons
+                key={index}
+                index={index}
+                showAdd={boxOnboarding.showAdd}
+                onAdd={handleAddBoxOnboarding}
+                onDelete={() => handleDeleteBoxOnboarding(index)}
+                isDeleteDisabled={isDeleteDisabled}
+                onToggleEdit={handleToggleEdit}
+                isEditEnabled={isEditEnabled}
+              />
+            </div>
           </>
         ))}
-       
       </div>
     </Container>
   );

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

@@ -1,75 +1,64 @@
 import { Container, ContainerIcon } from "./styles";
 import { FontFamily, GlobalColors } from "../../../global-files/variables";
 import { BoxAttribute } from "../../molecules/BoxAttribute";
-import { useState } from "react";
-import { useEffect } from "react";
+import { useState, useEffect, memo } from "react";
+import { isEqual } from "lodash";
 
-export const BoxOnboarding = ({ panelColor, isEditEnabled, index, onChange }) => {
-  const [boxAttributesActive, setBoxAttributesActive] = useState(true);
-  const [atributos, setAtributos] = useState({
-    largo: '',
-    alto: '',
-    ancho: '',
-    peso: '',
-  });
-  useEffect(( ) => {
-    onChange && onChange(atributos)
-  }, [
-    atributos
-  ])
-  return (
-    <Container
-      panelColor={panelColor}
-      fontFamily={FontFamily.Raleway}
-      color={GlobalColors.original_magenta}
-    >
-      <div id="contenedor-caja">
-        <p fontFamily={FontFamily.Raleway}>Caja {index+1}, chica</p>
-        {boxAttributesActive && (
-          <BoxAttribute
-            id="largo"
-            borderType="rectangle"
-            className="caja"
-            text="Largo"
-            isEditEnabled={isEditEnabled}
-            atributos={atributos.largo}
-            setAtributos={setAtributos}
-          ></BoxAttribute>
-        )}
-        {boxAttributesActive && (
-          <BoxAttribute
-            id="alto"
-            borderType="rectangle"
-            className="caja"
-            text="Alto"
-            isEditEnabled={isEditEnabled}
-            atributos={atributos.alto}
-            setAtributos={setAtributos}
-          ></BoxAttribute>
-        )}
-        {boxAttributesActive && (
-          <BoxAttribute
-            id="ancho"
-            borderType="rectangle"
-            className="caja"
-            text="Ancho"
-            isEditEnabled={isEditEnabled}
-            atributos={atributos.ancho}
-            setAtributos={setAtributos}
-          ></BoxAttribute>
-        )}
-        {boxAttributesActive && (
-          <BoxAttribute
-            id="peso"
-            borderType="rectangle"
-            className="caja"
-            text="Peso"
-            isEditEnabled={isEditEnabled}
-            atributos={atributos.peso}
-            setAtributos={setAtributos}
-          ></BoxAttribute>
-        )}
-      </div>
-    </Container>
-  );
-};
+export const BoxOnboarding = memo(
+  ({
+    panelColor,
+    isEditEnabled,
+    index,
+    onChange,
+    data,
+    dataInputs,
+    inputs,
+  }) => {
+    const [atributos, setAtributos] = useState({});
+    // console.log("input",inputs);
+    //console.log("atributossss BO",atributos)
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+      console.log("atributos use", atributos)
+      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) => {
+            console.log("data inputsss name:",atributos)
+            return (
+              <BoxAttribute
+                id={attrId}
+                key={attrId}
+                borderType="rectangle"
+                className="caja"
+                text={dataInputs[attrId]?.name}
+                isEditEnabled={isEditEnabled}
+                atributos={atributos}
+                setAtributos={setAtributos}
+              />
+            );
+          })}
+          
+        </div>
+      </Container>
+    );
+  },
+  isEqual
+);

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

@@ -21,13 +21,10 @@ export const InputGroup = ({
   compare,
   groupData = [],
   isShowbox,
-  index,
-  // boxOnboardingInput,
-  setUpdatedBoxData,
+  setUpdatedBoxData
 }) => {
-
-  console.log('groupData: ', typeof groupData);
-  console.log('groupData: ', groupData);
+  // console.log("groupData: ", typeof groupData);
+  // console.log("groupData: ", groupData);
   const inputTypeValue = (type) => {
     switch (type) {
       case "Booleano":
@@ -40,124 +37,133 @@ export const InputGroup = ({
   };
 
   const isOnboarding = () => {
-    const contentBoxAttribute = groupData.find(({dataGroup}) => dataGroup === 'Caja')
-    if(contentBoxAttribute) {
-      console.log('content box attribute');
+    const contentBoxAttribute = groupData.find(
+      ({ dataGroup }) => dataGroup === "Caja"
+    );
+    if (contentBoxAttribute) {
+      console.log("content box attribute");
     } else {
-      console.log('dont content box attribute');
+      console.log("dont content box attribute");
     }
     return contentBoxAttribute;
-  }
-  
+  };
 
   const isEquals = (dataInputsVal, auditInputsVal) => {
     const result = dataInputsVal === auditInputsVal;
+    console.log("Input Val",dataInputsVal)
     return result;
   };
-
-
-  return (
+  return inputGroup.groupId !== "16" ? (
     <>
-    <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}
-              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
+        className={
+          activeSection === "Ficha técnica"
+            ? "datasheets-layout"
+            : "descriptions-layout"
+        }
+      >
+        {inputGroup?.dataGroup && (
+          <ScreenHeader
+            headerType={"retailer-name-header"}
+            text={`${inputGroup.groupId} - ${inputGroup?.dataGroup}`}
+          />
         )}
-      </div>
-    </Container>
-    <Container className={
-        activeSection === "Ficha técnica"
-          ? "datasheets-layout"
-          : "descriptions-layout"
-      }>
-      { isShowbox && isOnboarding && index==0 && <Box onChange={setUpdatedBoxData}/>}
-    </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>
     </>
+  ) : (
+    isShowbox && (
+      <Container
+        className={
+          activeSection === "Ficha técnica"
+            ? "datasheets-layout"
+            : "descriptions-layout"
+        }
+      >
+        <Box
+          inputGroup={inputGroup}
+          dataInputs={dataInputs}
+          onChange={setUpdatedBoxData}
+        />
+      </Container>
+    )
   );
 };

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

@@ -682,14 +682,34 @@ export const ProviderProductEdition = ({
   };
 
   const saveDatasheets = async () => {
-    
+    const inputs = (() => {
+
+      let fields = {}
+  
+      boxData.map(e=>({
+          ...e.value,
+      })).forEach((item, k) => {
+  
+          for (const key in item) {
+              if (!fields[key]) {
+                  fields[key] = {};
+              }
+              fields[key].box = fields[key].box || {};
+              fields[key].box[k] = item[key];
+          }
+  
+      })
+  
+      return fields
+  
+  })()
     setLoading(true);
     const dataObject = {
       articleId: product?.id_article,
       articleData: updatedDatasheets,
-      boxData
+      inputs
     };
-    console.log("boxData guardado",boxData)
+    console.log("boxData guardado", dataObject);
     if (product?.orderId) dataObject["orderId"] = product?.orderId;
     try {
       const res = await axios.put(
@@ -835,6 +855,7 @@ export const ProviderProductEdition = ({
         return "images";
     }
   };
+  
 
   const createComment = async (messages = [], retailerId) => {
     const data = {
@@ -1458,25 +1479,30 @@ export const ProviderProductEdition = ({
                   />
                 )}
                 {activeTab === "Ficha técnica" &&
-                  (product?.datasheet_status !== "NS" ? <div>
-                    {datasheets[0]?.data?.map((dataGroup, index) => (
-                      <InputGroup
-                        key={index + "-" + activeRetailer.name}
-                        articleId={product.id_article}
-                        version={version}
-                        activeSection={activeTab}
-                        inputGroup={dataGroup}
-                        dataInputs={datasheets[1]}
-                        updatedDatasheets={updatedDatasheets}
-                        setUpdatedDatasheets={setUpdatedDatasheets}
-                        isShowbox={true}
-                        groupData = { services[0][activeRetailer.id].data }
-                        setUpdatedBoxData={e=>{ setBoxData(e) }}
-                        index={index}
-                        //enableActions={enableActions(product.version_status)} ADD THIS VALIDATION
-                      ></InputGroup>
-                    ))}
-                  </div>: (
+                  (product?.datasheet_status !== "NS" ? (
+                    <div>
+                      {datasheets[0]?.data?.map((dataGroup, index) => (
+                        <InputGroup
+                          key={index + "-" + activeRetailer.name}
+                          articleId={product.id_article}
+                          version={version}
+                          activeSection={activeTab}
+                          inputGroup={dataGroup}
+                          dataInputs={datasheets[1]}
+                          updatedDatasheets={updatedDatasheets}
+                          setUpdatedDatasheets={setUpdatedDatasheets}
+                          isShowbox={true}
+                          groupData={services[0][activeRetailer.id].data}
+                          setUpdatedBoxData={(e) => {
+                            console.log("UNO",e);
+                            setBoxData(e);
+                          }}
+                          index={index}
+                          //enableActions={enableActions(product.version_status)} ADD THIS VALIDATION
+                        ></InputGroup>
+                      ))}
+                    </div>
+                  ) : (
                     <ScreenHeader
                       text={"No cuentas con este servicio"}
                       headerType={"input-name-header"}

package/dist/assets/images/Icons/delete.svg

@@ -1,8 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="mask0_37_469" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="14" height="14">
-<rect width="14" height="14" fill="#D9D9D9"/>
-</mask>
-<g mask="url(#mask0_37_469)">
-<path d="M4.76875 10.5194L7 8.16667L9.25 10.5194L10.1313 9.58611L7.9 7.23333L10.1313 4.88056L9.25 3.94722L7 6.3L4.76875 3.94722L3.86875 4.88056L6.11875 7.23333L3.86875 9.58611L4.76875 10.5194ZM2.89375 14C2.59375 14 2.33125 13.8833 2.10625 13.65C1.88125 13.4167 1.76875 13.1444 1.76875 12.8333V1.75H1V0.583333H4.525V0H9.475V0.583333H13V1.75H12.2313V12.8333C12.2313 13.1444 12.1188 13.4167 11.8938 13.65C11.6688 13.8833 11.4062 14 11.1063 14H2.89375ZM11.1063 1.75H2.89375V12.8333H11.1063V1.75Z" fill="#B64545"/>
-</g>
-</svg>

package/dist/assets/images/Icons/edit.svg

@@ -1,3 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.14598 12.854H1.98636L10.4475 4.39291L9.60709 3.55252L1.14598 12.0136V12.854ZM12.8731 3.57162L10.4284 1.12688L11.2306 0.324693C11.447 0.108231 11.7144 0 12.0327 0C12.3511 0 12.6185 0.108231 12.8349 0.324693L13.6753 1.16507C13.8918 1.38154 14 1.64893 14 1.96726C14 2.28558 13.8918 2.55298 13.6753 2.76944L12.8731 3.57162ZM12.0709 4.37381L2.44475 14H0V11.5553L9.62619 1.92906L12.0709 4.37381Z" fill="#707070"/>
-</svg>