contentoh-components-library 21.4.44 → 21.4.46

package/dist/components/molecules/BoxAttribute/index.js

@@ -22,6 +22,7 @@ var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _jsxRuntime = require("react/jsx-runtime");
 
 var BoxAttribute = function BoxAttribute(props) {
+  // console.log({ props });
   var id = props.id,
       key = props.key,
       className = props.className,
@@ -42,7 +43,13 @@ var BoxAttribute = function BoxAttribute(props) {
     });
   };
 
-  console.log(atributos);
+  var formattedData = Object.keys(atributos).reduce(function (result, id) {
+    result["box".concat(id)] = atributos[id];
+    return result;
+  }, {}); //escucha los cambios
+  // console.log(formattedData);
+  // console.log("atributos id", atributos[props.id]);
+
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
       id: id,
@@ -76,8 +83,9 @@ var BoxAttribute = function BoxAttribute(props) {
         onChange: handleInputChange,
         className: "caja-borde",
         variant: "outlined",
-        size: "small"
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
+        size: "small",
+        type: "number"
+      }, props.id) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
         hiddenLabel: true,
         name: props.id,
         value: atributos[props.id],
@@ -85,8 +93,9 @@ var BoxAttribute = function BoxAttribute(props) {
         className: "caja-borde",
         variant: "outlined",
         size: "small",
+        type: "number",
         disabled: true
-      })]
+      }, props.id)]
     }, key)
   });
 };

package/dist/components/molecules/BoxButtons/index.js

@@ -17,8 +17,11 @@ var BoxButtons = function BoxButtons(_ref) {
       onDelete = _ref.onDelete,
       isTheFirstBox = _ref.isTheFirstBox,
       onToggleEdit = _ref.onToggleEdit,
-      isEditEnabled = _ref.isEditEnabled;
+      isEditEnabled = _ref.isEditEnabled,
+      index = _ref.index;
+  console.log("index", index);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    index: index,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
       variant: "outlined",
       className: "button-circle",

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

@@ -28,7 +28,9 @@ var _BoxButtons = require("../../molecules/BoxButtons");
 var _jsxRuntime = require("react/jsx-runtime");
 
 var Box = function Box(_ref) {
-  var onChange = _ref.onChange;
+  var onChange = _ref.onChange,
+      dataInputs = _ref.dataInputs,
+      inputGroup = _ref.inputGroup;
 
   var _useState = (0, _react.useState)(true),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -48,9 +50,41 @@ var Box = function Box(_ref) {
       boxOnboardingList = _useState6[0],
       setBoxOnboardingList = _useState6[1];
 
+  (0, _react.useEffect)(function () {
+    console.log("dataInputs:", dataInputs);
+    console.log("inputGroup:", inputGroup);
+    var temp = {};
+    var maxBoxId = 0;
+    inputGroup.inputs.forEach(function (attrId) {
+      if (!dataInputs[attrId].box) return;
+      Object.entries(dataInputs[attrId].box).forEach(function (_ref2) {
+        var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
+            boxId = _ref3[0],
+            value = _ref3[1];
+
+        if (boxId > maxBoxId) maxBoxId = boxId;
+        if (!temp[boxId]) temp[boxId] = {};
+        temp[boxId][attrId] = value;
+      });
+    });
+    var tempList = Object.values(temp);
+
+    if (tempList.length > 0) {
+      setBoxOnboardingList(tempList.map(function (value, index) {
+        return index === tempList.length - 1 ? {
+          showAdd: true,
+          value: value
+        } : {
+          value: value
+        };
+      }));
+    }
+  }, []);
+
   var handleAddBoxOnboarding = function handleAddBoxOnboarding() {
     var newBoxOnboarding = {
-      showAdd: false
+      showAdd: false,
+      value: {}
     };
     setBoxOnboardingList([].concat((0, _toConsumableArray2.default)(boxOnboardingList), [newBoxOnboarding]));
   };
@@ -71,15 +105,13 @@ var Box = function Box(_ref) {
 
   (0, _react.useEffect)(function () {
     onChange && onChange(boxOnboardingList);
-  }, [boxOnboardingList]); // console.log(atributos)
-
-  console.log("onboardinglist", boxOnboardingList);
+  }, [boxOnboardingList]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     fontFamily: _variables.FontFamily.Raleway,
     color: _variables.GlobalColors.original_magenta,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
       fontFamily: _variables.FontFamily.Raleway,
-      children: "Cajas"
+      children: inputGroup.dataGroup
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "container-box",
       children: boxOnboardingList.map(function (boxOnboarding, index) {
@@ -89,8 +121,12 @@ var Box = function Box(_ref) {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BoxOnboarding.BoxOnboarding, {
               index: index,
               showAdd: boxOnboarding.showAdd,
+              data: boxOnboarding.value,
+              dataInputs: dataInputs,
+              inputs: inputGroup.inputs,
               isEditEnabled: isEditEnabled,
               onChange: function onChange(e) {
+                console.log("e in Box", e);
                 setBoxOnboardingList(function (prev) {
                   return prev.map(function (box, i) {
                     if (i != index) {
@@ -104,6 +140,7 @@ var Box = function Box(_ref) {
                 });
               }
             }, index), /*#__PURE__*/(0, _jsxRuntime.jsx)(_BoxButtons.BoxButtons, {
+              index: index,
               showAdd: boxOnboarding.showAdd,
               onAdd: handleAddBoxOnboarding,
               onDelete: function onDelete() {
@@ -112,7 +149,7 @@ var Box = function Box(_ref) {
               isDeleteDisabled: isDeleteDisabled,
               onToggleEdit: handleToggleEdit,
               isEditEnabled: isEditEnabled
-            })]
+            }, index)]
           })
         });
       })

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

@@ -17,32 +17,41 @@ var _BoxAttribute = require("../../molecules/BoxAttribute");
 
 var _react = require("react");
 
+var _lodash = require("lodash");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
-var BoxOnboarding = function BoxOnboarding(_ref) {
+var BoxOnboarding = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var panelColor = _ref.panelColor,
       isEditEnabled = _ref.isEditEnabled,
       index = _ref.index,
-      onChange = _ref.onChange;
+      onChange = _ref.onChange,
+      data = _ref.data,
+      dataInputs = _ref.dataInputs,
+      inputs = _ref.inputs;
 
-  var _useState = (0, _react.useState)(true),
+  var _useState = (0, _react.useState)({}),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      boxAttributesActive = _useState2[0],
-      setBoxAttributesActive = _useState2[1];
+      atributos = _useState2[0],
+      setAtributos = _useState2[1]; // console.log("input",inputs);
+  //console.log("atributossss BO",atributos)
+
 
-  var _useState3 = (0, _react.useState)({
-    largo: '',
-    alto: '',
-    ancho: '',
-    peso: ''
-  }),
+  var _useState3 = (0, _react.useState)(true),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      atributos = _useState4[0],
-      setAtributos = _useState4[1];
+      isLoading = _useState4[0],
+      setIsLoading = _useState4[1];
 
   (0, _react.useEffect)(function () {
+    console.log("atributos use", atributos);
     onChange && onChange(atributos);
   }, [atributos]);
+  (0, _react.useEffect)(function () {
+    if (isLoading && Object.keys(data).length > 0) {
+      setAtributos(data);
+      setIsLoading(false);
+    }
+  }, [data]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
     panelColor: panelColor,
     fontFamily: _variables.FontFamily.Raleway,
@@ -51,42 +60,22 @@ var BoxOnboarding = function BoxOnboarding(_ref) {
       id: "contenedor-caja",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
         fontFamily: _variables.FontFamily.Raleway,
-        children: ["Caja ", index + 1, ", chica"]
-      }), boxAttributesActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_BoxAttribute.BoxAttribute, {
-        id: "largo",
-        borderType: "rectangle",
-        className: "caja",
-        text: "Largo",
-        isEditEnabled: isEditEnabled,
-        atributos: atributos.largo,
-        setAtributos: setAtributos
-      }), boxAttributesActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_BoxAttribute.BoxAttribute, {
-        id: "alto",
-        borderType: "rectangle",
-        className: "caja",
-        text: "Alto",
-        isEditEnabled: isEditEnabled,
-        atributos: atributos.alto,
-        setAtributos: setAtributos
-      }), boxAttributesActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_BoxAttribute.BoxAttribute, {
-        id: "ancho",
-        borderType: "rectangle",
-        className: "caja",
-        text: "Ancho",
-        isEditEnabled: isEditEnabled,
-        atributos: atributos.ancho,
-        setAtributos: setAtributos
-      }), boxAttributesActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_BoxAttribute.BoxAttribute, {
-        id: "peso",
-        borderType: "rectangle",
-        className: "caja",
-        text: "Peso",
-        isEditEnabled: isEditEnabled,
-        atributos: atributos.peso,
-        setAtributos: setAtributos
+        children: ["Caja ", index + 1]
+      }), inputs.map(function (attrId) {
+        var _dataInputs$attrId;
+
+        console.log("data inputsss name:", atributos);
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BoxAttribute.BoxAttribute, {
+          id: attrId,
+          borderType: "rectangle",
+          className: "caja",
+          text: (_dataInputs$attrId = dataInputs[attrId]) === null || _dataInputs$attrId === void 0 ? void 0 : _dataInputs$attrId.name,
+          isEditEnabled: isEditEnabled,
+          atributos: atributos,
+          setAtributos: setAtributos
+        }, attrId);
       })]
     })
   });
-};
-
+}, _lodash.isEqual);
 exports.BoxOnboarding = BoxOnboarding;

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

@@ -1,14 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.InputGroup = void 0;
 
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/typeof"));
-
 var _styles = require("./styles");
 
 var _ScreenHeader = require("../../atoms/ScreenHeader");
@@ -45,11 +41,10 @@ var InputGroup = function InputGroup(_ref) {
       _ref$groupData = _ref.groupData,
       groupData = _ref$groupData === void 0 ? [] : _ref$groupData,
       isShowbox = _ref.isShowbox,
-      index = _ref.index,
       setUpdatedBoxData = _ref.setUpdatedBoxData;
-  console.log('groupData: ', (0, _typeof2.default)(groupData));
-  console.log('groupData: ', groupData);
 
+  // console.log("groupData: ", typeof groupData);
+  // console.log("groupData: ", groupData);
   var inputTypeValue = function inputTypeValue(type) {
     switch (type) {
       case "Booleano":
@@ -66,13 +61,13 @@ var InputGroup = function InputGroup(_ref) {
   var isOnboarding = function isOnboarding() {
     var contentBoxAttribute = groupData.find(function (_ref2) {
       var dataGroup = _ref2.dataGroup;
-      return dataGroup === 'Caja';
+      return dataGroup === "Caja";
     });
 
     if (contentBoxAttribute) {
-      console.log('content box attribute');
+      console.log("content box attribute");
     } else {
-      console.log('dont content box attribute');
+      console.log("dont content box attribute");
     }
 
     return contentBoxAttribute;
@@ -80,15 +75,16 @@ var InputGroup = function InputGroup(_ref) {
 
   var isEquals = function isEquals(dataInputsVal, auditInputsVal) {
     var result = dataInputsVal === auditInputsVal;
+    console.log("Input Val", dataInputsVal);
     return result;
   };
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+  return inputGroup.groupId !== "16" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
       className: activeSection === "Ficha técnica" ? "datasheets-layout" : "descriptions-layout",
       children: [(inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.dataGroup) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
         headerType: "retailer-name-header",
-        text: inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.dataGroup
+        text: "".concat(inputGroup.groupId, " - ").concat(inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.dataGroup)
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "inputs-container",
         children: inputGroup === null || inputGroup === void 0 ? void 0 : (_inputGroup$inputs = inputGroup.inputs) === null || _inputGroup$inputs === void 0 ? void 0 : _inputGroup$inputs.map(function (input, index) {
@@ -134,12 +130,14 @@ var InputGroup = function InputGroup(_ref) {
           }, index + "-" + (input === null || input === void 0 ? void 0 : input.value) + "-" + compare);
         })
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-      className: activeSection === "Ficha técnica" ? "datasheets-layout" : "descriptions-layout",
-      children: isShowbox && isOnboarding && index == 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.Box, {
-        onChange: setUpdatedBoxData
-      })
-    })]
+    })
+  }) : isShowbox && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    className: activeSection === "Ficha técnica" ? "datasheets-layout" : "descriptions-layout",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.Box, {
+      inputGroup: inputGroup,
+      dataInputs: dataInputs,
+      onChange: setUpdatedBoxData
+    })
   });
 };
 

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

@@ -1219,58 +1219,75 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
 
   var saveDatasheets = /*#__PURE__*/function () {
     var _ref10 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee12() {
-      var dataObject, res;
+      var inputs, dataObject, res;
       return _regenerator.default.wrap(function _callee12$(_context12) {
         while (1) {
           switch (_context12.prev = _context12.next) {
             case 0:
+              inputs = function () {
+                var fields = {};
+                boxData.map(function (e) {
+                  return (0, _objectSpread3.default)({}, e.value);
+                }).forEach(function (item, k) {
+                  for (var key in item) {
+                    if (!fields[key]) {
+                      fields[key] = {};
+                    }
+
+                    fields[key].box = fields[key].box || {};
+                    fields[key].box[k] = item[key];
+                  }
+                });
+                return fields;
+              }();
+
               setLoading(true);
               dataObject = {
                 articleId: product === null || product === void 0 ? void 0 : product.id_article,
                 articleData: updatedDatasheets,
-                boxData: boxData
+                inputs: inputs
               };
-              console.log("boxData guardado", boxData);
+              console.log("boxData guardado", dataObject);
               if (product !== null && product !== void 0 && product.orderId) dataObject["orderId"] = product === null || product === void 0 ? void 0 : product.orderId;
-              _context12.prev = 4;
-              _context12.next = 7;
+              _context12.prev = 5;
+              _context12.next = 8;
               return _axios.default.put("".concat(process.env.REACT_APP_ARTICLE_DATA_ENDPOINT, "?datasheet=true&version=").concat(version), dataObject, {
                 headers: {
                   Authorization: token
                 }
               });
 
-            case 7:
+            case 8:
               res = _context12.sent;
 
               if (!(res.data.statusCode === 200)) {
-                _context12.next = 13;
+                _context12.next = 14;
                 break;
               }
 
               setUpdatedDatasheets([]);
               setMessage("Fichas técnicas guardadas");
-              _context12.next = 13;
+              _context12.next = 14;
               return loadData();
 
-            case 13:
-              _context12.next = 18;
+            case 14:
+              _context12.next = 19;
               break;
 
-            case 15:
-              _context12.prev = 15;
-              _context12.t0 = _context12["catch"](4);
+            case 16:
+              _context12.prev = 16;
+              _context12.t0 = _context12["catch"](5);
               console.log(_context12.t0);
 
-            case 18:
+            case 19:
               console.log(dataObject);
 
-            case 19:
+            case 20:
             case "end":
               return _context12.stop();
           }
         }
-      }, _callee12, null, [[4, 15]]);
+      }, _callee12, null, [[5, 16]]);
     }));
 
     return function saveDatasheets() {
@@ -2213,6 +2230,7 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
                   isShowbox: true,
                   groupData: services[0][activeRetailer.id].data,
                   setUpdatedBoxData: function setUpdatedBoxData(e) {
+                    console.log("UNO", e);
                     setBoxData(e);
                   },
                   index: index //enableActions={enableActions(product.version_status)} ADD THIS VALIDATION

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.4.44",
+  "version": "21.4.46",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

package/src/components/molecules/BoxAttribute/index.js

@@ -1,30 +1,37 @@
 import { Container } from "./styles";
 import IconInfo from "../../../assets/images/Icons/info.svg";
 import { Tooltip } from "../../atoms/Tooltip";
-import TextField from '@mui/material/TextField';
+import TextField from "@mui/material/TextField";
 
 export const BoxAttribute = (props) => {
+  // console.log({ props });
   const {
     id,
     key,
     className,
     text,
-    borderType, 
+    borderType,
     isEditEnabled,
     titletool,
     texttool,
     atributos,
-    setAtributos
+    setAtributos,
   } = props;
   const handleInputChange = (event) => {
-    const { name, value } = event.target; 
+    const { name, value } = event.target;
     setAtributos((prevAtributos) => ({
       ...prevAtributos,
-      [name]: value, 
+      [name]: value,
     }));
   };
-  console.log(atributos)
 
+  const formattedData = Object.keys(atributos).reduce((result, id) => {
+    result[`box${id}`] = atributos[id];
+    return result;
+  }, {});
+  //escucha los cambios
+  // console.log(formattedData);
+  // console.log("atributos id", atributos[props.id]);
   return (
     <>
       <Container
@@ -33,45 +40,49 @@ export const BoxAttribute = (props) => {
         className={className}
         borderType={borderType}
       >
-         <Tooltip
-            componentTooltip={
-              <>
-                <p>
-                  <b>{titletool}</b>
-                </p>
-                <p>{texttool}</p>
-              </>
-            }
-            children={
-              <Container className="">
-                <img className="icon" src={IconInfo} alt="iconInfo" />
-              </Container>
-            }
-            classNameTooltip={"container-tooltip"}
-          />
-          <span>{text}</span>
-          {isEditEnabled ? (
-            <TextField
+        <Tooltip
+          componentTooltip={
+            <>
+              <p>
+                <b>{titletool}</b>
+              </p>
+              <p>{texttool}</p>
+            </>
+          }
+          children={
+            <Container className="">
+              <img className="icon" src={IconInfo} alt="iconInfo" />
+            </Container>
+          }
+          classNameTooltip={"container-tooltip"}
+        />
+        <span>{text}</span>
+        {isEditEnabled ? (
+          <TextField
             hiddenLabel
-            name={props.id} 
+            key={props.id}
+            name={props.id}
             value={atributos[props.id]}
             onChange={handleInputChange}
             className="caja-borde"
             variant="outlined"
             size="small"
+            type="number"
           />
-          ) : (
-            <TextField
-              hiddenLabel
-              name={props.id}
-              value={atributos[props.id]}
-              onChange={handleInputChange}
-              className="caja-borde"
-              variant="outlined"
-              size="small"
-              disabled
+        ) : (
+          <TextField
+            hiddenLabel
+            key={props.id}
+            name={props.id}
+            value={atributos[props.id]}
+            onChange={handleInputChange}
+            className="caja-borde"
+            variant="outlined"
+            size="small"
+            type="number"
+            disabled
           />
-          )}
+        )}
       </Container>
     </>
   );

package/src/components/molecules/BoxButtons/index.js

@@ -1,9 +1,10 @@
 import { Container, ContainerIcon } from "./styles";
 import { Button } from "@mui/material";
 
-export const BoxButtons = ({ showAdd, onAdd, onDelete, isTheFirstBox, onToggleEdit, isEditEnabled  }) => {
+export const BoxButtons = ({ showAdd, onAdd, onDelete, isTheFirstBox, onToggleEdit, isEditEnabled, index  }) => {
+  console.log("index",index)
   return (
-      <Container>
+      <Container index={index}>
         <Button variant="outlined" className="button-circle" onClick={onToggleEdit}>
           <ContainerIcon>
             <span className={`iconos-out ${isEditEnabled ? "iconos-grises" : ""}`}>edit</span>