contentoh-components-library 21.4.41 → 21.4.44

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

@@ -99,6 +99,8 @@ var _Modal = require("../../organisms/Modal");
 
 var _ButtonV = require("../../atoms/ButtonV2");
 
+var _Box = require("../../organisms/Box");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var reducerImages = function reducerImages(state, action) {
@@ -270,6 +272,11 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
       showModal = _useState14[0],
       setShowModal = _useState14[1];
 
+  var _useState15 = (0, _react.useState)(),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      boxData = _useState16[0],
+      setBoxData = _useState16[1];
+
   var _useDropzone = (0, _reactDropzone.useDropzone)({
     accept: "image/*",
     noKeyboard: true,
@@ -332,146 +339,146 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
       getRootProps = _useDropzone.getRootProps,
       getInputProps = _useDropzone.getInputProps;
 
-  var _useState15 = (0, _react.useState)([]),
-      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-      updatedDatasheets = _useState16[0],
-      setUpdatedDatasheets = _useState16[1];
-
   var _useState17 = (0, _react.useState)([]),
       _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
-      updatedDescriptions = _useState18[0],
-      setUpdatedDescriptions = _useState18[1];
+      updatedDatasheets = _useState18[0],
+      setUpdatedDatasheets = _useState18[1];
 
-  var _useState19 = (0, _react.useState)(false),
+  var _useState19 = (0, _react.useState)([]),
       _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
-      imagesUploaded = _useState20[0],
-      setImagesUploaded = _useState20[1];
+      updatedDescriptions = _useState20[0],
+      setUpdatedDescriptions = _useState20[1];
 
-  var _useState21 = (0, _react.useState)(),
+  var _useState21 = (0, _react.useState)(false),
       _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
-      dataImages = _useState22[0],
-      setDataImages = _useState22[1];
+      imagesUploaded = _useState22[0],
+      setImagesUploaded = _useState22[1];
 
-  var _useState23 = (0, _react.useState)(product !== null && product !== void 0 && product.retailers ? new Array(product === null || product === void 0 ? void 0 : (_product$retailers = product.retailers) === null || _product$retailers === void 0 ? void 0 : _product$retailers.length).fill({
+  var _useState23 = (0, _react.useState)(),
+      _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
+      dataImages = _useState24[0],
+      setDataImages = _useState24[1];
+
+  var _useState25 = (0, _react.useState)(product !== null && product !== void 0 && product.retailers ? new Array(product === null || product === void 0 ? void 0 : (_product$retailers = product.retailers) === null || _product$retailers === void 0 ? void 0 : _product$retailers.length).fill({
     percentage: 0
   }) : new Array(product === null || product === void 0 ? void 0 : (_product$retailersAva = product.retailersAvailable) === null || _product$retailersAva === void 0 ? void 0 : _product$retailersAva.length).fill({
     percentage: 0
   })),
-      _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
-      percentages = _useState24[0],
-      setPercentages = _useState24[1];
-
-  var _useState25 = (0, _react.useState)(0),
       _useState26 = (0, _slicedToArray2.default)(_useState25, 2),
-      activePercentage = _useState26[0],
-      setActivePercentage = _useState26[1];
+      percentages = _useState26[0],
+      setPercentages = _useState26[1];
 
-  var _useState27 = (0, _react.useState)({}),
+  var _useState27 = (0, _react.useState)(0),
       _useState28 = (0, _slicedToArray2.default)(_useState27, 2),
-      activeRetailer = _useState28[0],
-      setActiveRetailer = _useState28[1];
+      activePercentage = _useState28[0],
+      setActivePercentage = _useState28[1];
 
-  var _useState29 = (0, _react.useState)([]),
+  var _useState29 = (0, _react.useState)({}),
       _useState30 = (0, _slicedToArray2.default)(_useState29, 2),
-      services = _useState30[0],
-      setServices = _useState30[1];
+      activeRetailer = _useState30[0],
+      setActiveRetailer = _useState30[1];
 
   var _useState31 = (0, _react.useState)([]),
       _useState32 = (0, _slicedToArray2.default)(_useState31, 2),
-      servicesData = _useState32[0],
-      setServicesData = _useState32[1];
+      services = _useState32[0],
+      setServices = _useState32[1];
 
-  var _useState33 = (0, _react.useState)(""),
+  var _useState33 = (0, _react.useState)([]),
       _useState34 = (0, _slicedToArray2.default)(_useState33, 2),
-      message = _useState34[0],
-      setMessage = _useState34[1];
+      servicesData = _useState34[0],
+      setServicesData = _useState34[1];
 
-  var _useState35 = (0, _react.useState)(JSON.parse(sessionStorage.getItem("productSelected")) ? JSON.parse(sessionStorage.getItem("productSelected")) : productSelected),
+  var _useState35 = (0, _react.useState)(""),
       _useState36 = (0, _slicedToArray2.default)(_useState35, 2),
-      product = _useState36[0],
-      setProduct = _useState36[1];
+      message = _useState36[0],
+      setMessage = _useState36[1];
 
-  var _useState37 = (0, _react.useState)(JSON.parse(sessionStorage.getItem("productEdit")) ? JSON.parse(sessionStorage.getItem("productEdit")) : productToEdit),
+  var _useState37 = (0, _react.useState)(JSON.parse(sessionStorage.getItem("productSelected")) ? JSON.parse(sessionStorage.getItem("productSelected")) : productSelected),
       _useState38 = (0, _slicedToArray2.default)(_useState37, 2),
-      productEdit = _useState38[0],
-      setProductEdit = _useState38[1];
+      product = _useState38[0],
+      setProduct = _useState38[1];
 
-  var _useState39 = (0, _react.useState)(product === null || product === void 0 ? void 0 : product.version),
+  var _useState39 = (0, _react.useState)(JSON.parse(sessionStorage.getItem("productEdit")) ? JSON.parse(sessionStorage.getItem("productEdit")) : productToEdit),
       _useState40 = (0, _slicedToArray2.default)(_useState39, 2),
-      version = _useState40[0],
-      setVersion = _useState40[1];
+      productEdit = _useState40[0],
+      setProductEdit = _useState40[1];
 
-  var _useState41 = (0, _react.useState)({}),
-      _useState42 = (0, _slicedToArray2.default)(_useState41, 1),
-      comments = _useState42[0];
+  var _useState41 = (0, _react.useState)(product === null || product === void 0 ? void 0 : product.version),
+      _useState42 = (0, _slicedToArray2.default)(_useState41, 2),
+      version = _useState42[0],
+      setVersion = _useState42[1];
 
-  var _useState43 = (0, _react.useState)(""),
-      _useState44 = (0, _slicedToArray2.default)(_useState43, 2),
-      comment = _useState44[0],
-      setComment = _useState44[1];
+  var _useState43 = (0, _react.useState)({}),
+      _useState44 = (0, _slicedToArray2.default)(_useState43, 1),
+      comments = _useState44[0];
 
-  var _useState45 = (0, _react.useState)(false),
+  var _useState45 = (0, _react.useState)(""),
       _useState46 = (0, _slicedToArray2.default)(_useState45, 2),
-      crossComment = _useState46[0],
-      setCrossComment = _useState46[1];
+      comment = _useState46[0],
+      setComment = _useState46[1];
 
-  var _useState47 = (0, _react.useState)([]),
+  var _useState47 = (0, _react.useState)(false),
       _useState48 = (0, _slicedToArray2.default)(_useState47, 2),
-      userGroups = _useState48[0],
-      setUserGroups = _useState48[1];
+      crossComment = _useState48[0],
+      setCrossComment = _useState48[1];
 
-  var _useState49 = (0, _react.useState)({}),
+  var _useState49 = (0, _react.useState)([]),
       _useState50 = (0, _slicedToArray2.default)(_useState49, 2),
-      assig = _useState50[0],
-      setAssig = _useState50[1];
+      userGroups = _useState50[0],
+      setUserGroups = _useState50[1];
 
-  var _useState51 = (0, _react.useState)([]),
+  var _useState51 = (0, _react.useState)({}),
       _useState52 = (0, _slicedToArray2.default)(_useState51, 2),
-      selectedImages = _useState52[0],
-      setSelectedImages = _useState52[1];
+      assig = _useState52[0],
+      setAssig = _useState52[1];
 
   var _useState53 = (0, _react.useState)([]),
       _useState54 = (0, _slicedToArray2.default)(_useState53, 2),
-      componentsArray = _useState54[0],
-      setComponentsArray = _useState54[1];
+      selectedImages = _useState54[0],
+      setSelectedImages = _useState54[1];
 
-  var _useState55 = (0, _react.useState)(false),
+  var _useState55 = (0, _react.useState)([]),
       _useState56 = (0, _slicedToArray2.default)(_useState55, 2),
-      checkAll = _useState56[0],
-      setCheckAll = _useState56[1];
+      componentsArray = _useState56[0],
+      setComponentsArray = _useState56[1];
 
-  var isRetailer = user === null || user === void 0 ? void 0 : user.is_retailer;
-
-  var _useState57 = (0, _react.useState)(true),
+  var _useState57 = (0, _react.useState)(false),
       _useState58 = (0, _slicedToArray2.default)(_useState57, 2),
-      loading = _useState58[0],
-      setLoading = _useState58[1];
+      checkAll = _useState58[0],
+      setCheckAll = _useState58[1];
+
+  var isRetailer = user === null || user === void 0 ? void 0 : user.is_retailer;
 
-  var _useState59 = (0, _react.useState)(false),
+  var _useState59 = (0, _react.useState)(true),
       _useState60 = (0, _slicedToArray2.default)(_useState59, 2),
-      validatedAll = _useState60[0],
-      setValidatedAll = _useState60[1];
+      loading = _useState60[0],
+      setLoading = _useState60[1];
 
   var _useState61 = (0, _react.useState)(false),
       _useState62 = (0, _slicedToArray2.default)(_useState61, 2),
-      showRejectModal = _useState62[0],
-      setShowRejectModal = _useState62[1];
+      validatedAll = _useState62[0],
+      setValidatedAll = _useState62[1];
+
+  var _useState63 = (0, _react.useState)(false),
+      _useState64 = (0, _slicedToArray2.default)(_useState63, 2),
+      showRejectModal = _useState64[0],
+      setShowRejectModal = _useState64[1];
 
-  var _useState63 = (0, _react.useState)({
+  var _useState65 = (0, _react.useState)({
     "Ficha técnica": null,
     Descripción: null,
     Imágenes: null
   }),
-      _useState64 = (0, _slicedToArray2.default)(_useState63, 2),
-      origin = _useState64[0],
-      setOrigin = _useState64[1];
-
-  var _useState65 = (0, _react.useState)(false),
       _useState66 = (0, _slicedToArray2.default)(_useState65, 2),
-      inCart = _useState66[0],
-      setInCart = _useState66[1];
+      origin = _useState66[0],
+      setOrigin = _useState66[1];
+
+  var _useState67 = (0, _react.useState)(false),
+      _useState68 = (0, _slicedToArray2.default)(_useState67, 2),
+      inCart = _useState68[0],
+      setInCart = _useState68[1];
 
-  var _useState67 = (0, _react.useState)({
+  var _useState69 = (0, _react.useState)({
     message: "¿Estás seguro de continuar?",
     detail: " ".concat(user.is_retailer ? "Asegurate de haber revisado las tres secciones" : "Envíar el producto a la cadena"),
     button1: {
@@ -486,34 +493,34 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
     },
     img: _defaultProfileImage.default
   }),
-      _useState68 = (0, _slicedToArray2.default)(_useState67, 2),
-      dataGenericModal = _useState68[0],
-      setDataGenericModal = _useState68[1];
-
-  var _useState69 = (0, _react.useState)(null),
       _useState70 = (0, _slicedToArray2.default)(_useState69, 2),
-      socketType = _useState70[0],
-      setSocketType = _useState70[1];
+      dataGenericModal = _useState70[0],
+      setDataGenericModal = _useState70[1];
 
-  var _useState71 = (0, _react.useState)(loading),
+  var _useState71 = (0, _react.useState)(null),
       _useState72 = (0, _slicedToArray2.default)(_useState71, 2),
-      saving = _useState72[0],
-      setSaving = _useState72[1];
+      socketType = _useState72[0],
+      setSocketType = _useState72[1];
 
-  var _useState73 = (0, _react.useState)(product.statusByRetailer),
+  var _useState73 = (0, _react.useState)(loading),
       _useState74 = (0, _slicedToArray2.default)(_useState73, 2),
-      retailerStatus = _useState74[0],
-      setRetailerStatus = _useState74[1];
+      saving = _useState74[0],
+      setSaving = _useState74[1];
+
+  var _useState75 = (0, _react.useState)(product.statusByRetailer),
+      _useState76 = (0, _slicedToArray2.default)(_useState75, 2),
+      retailerStatus = _useState76[0],
+      setRetailerStatus = _useState76[1];
 
   var _useCloseModal = (0, _customHooks.useCloseModal)("version-selector"),
       _useCloseModal2 = (0, _slicedToArray2.default)(_useCloseModal, 2),
       showVersionSelector = _useCloseModal2[0],
       setShowVersionSelector = _useCloseModal2[1];
 
-  var _useState75 = (0, _react.useState)(),
-      _useState76 = (0, _slicedToArray2.default)(_useState75, 2),
-      globalModal = _useState76[0],
-      setGlobalModal = _useState76[1];
+  var _useState77 = (0, _react.useState)(),
+      _useState78 = (0, _slicedToArray2.default)(_useState77, 2),
+      globalModal = _useState78[0],
+      setGlobalModal = _useState78[1];
 
   var updateAuditStatus = /*#__PURE__*/function () {
     var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(status) {
@@ -1083,6 +1090,7 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
 
       if ((_services$0$activeRet = services[0][activeRetailer.id]) !== null && _services$0$activeRet !== void 0 && _services$0$activeRet.data) services[0][activeRetailer.id].data = Object.values(services[0][activeRetailer.id].data);
       setActivePercentage(Math.round(activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.percentage, 0));
+      console.log("loadInputs: ", services[0]);
       var datagroups = services[0][activeRetailer.id];
       var inputs = (_services$2 = services[0]) === null || _services$2 === void 0 ? void 0 : _services$2.inputs;
 
@@ -1219,45 +1227,50 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
               setLoading(true);
               dataObject = {
                 articleId: product === null || product === void 0 ? void 0 : product.id_article,
-                articleData: updatedDatasheets
+                articleData: updatedDatasheets,
+                boxData: boxData
               };
+              console.log("boxData guardado", boxData);
               if (product !== null && product !== void 0 && product.orderId) dataObject["orderId"] = product === null || product === void 0 ? void 0 : product.orderId;
-              _context12.prev = 3;
-              _context12.next = 6;
+              _context12.prev = 4;
+              _context12.next = 7;
               return _axios.default.put("".concat(process.env.REACT_APP_ARTICLE_DATA_ENDPOINT, "?datasheet=true&version=").concat(version), dataObject, {
                 headers: {
                   Authorization: token
                 }
               });
 
-            case 6:
+            case 7:
               res = _context12.sent;
 
               if (!(res.data.statusCode === 200)) {
-                _context12.next = 12;
+                _context12.next = 13;
                 break;
               }
 
               setUpdatedDatasheets([]);
               setMessage("Fichas técnicas guardadas");
-              _context12.next = 12;
+              _context12.next = 13;
               return loadData();
 
-            case 12:
-              _context12.next = 17;
+            case 13:
+              _context12.next = 18;
               break;
 
-            case 14:
-              _context12.prev = 14;
-              _context12.t0 = _context12["catch"](3);
+            case 15:
+              _context12.prev = 15;
+              _context12.t0 = _context12["catch"](4);
               console.log(_context12.t0);
 
-            case 17:
+            case 18:
+              console.log(dataObject);
+
+            case 19:
             case "end":
               return _context12.stop();
           }
         }
-      }, _callee12, null, [[3, 14]]);
+      }, _callee12, null, [[4, 15]]);
     }));
 
     return function saveDatasheets() {
@@ -2187,17 +2200,25 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
               setSelectedImages: setSelectedImages,
               checkAll: checkAll,
               setCheckAll: setCheckAll
-            }), activeTab === "Ficha técnica" && ((product === null || product === void 0 ? void 0 : product.datasheet_status) !== "NS" ? (_datasheets$ = datasheets[0]) === null || _datasheets$ === void 0 ? void 0 : (_datasheets$$data = _datasheets$.data) === null || _datasheets$$data === void 0 ? void 0 : _datasheets$$data.map(function (dataGroup, index) {
-              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputGroup.InputGroup, {
-                articleId: product.id_article,
-                version: version,
-                activeSection: activeTab,
-                inputGroup: dataGroup,
-                dataInputs: datasheets[1],
-                updatedDatasheets: updatedDatasheets,
-                setUpdatedDatasheets: setUpdatedDatasheets //enableActions={enableActions(product.version_status)} ADD THIS VALIDATION
-
-              }, index + "-" + activeRetailer.name);
+            }), activeTab === "Ficha técnica" && ((product === null || product === void 0 ? void 0 : product.datasheet_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: (_datasheets$ = datasheets[0]) === null || _datasheets$ === void 0 ? void 0 : (_datasheets$$data = _datasheets$.data) === null || _datasheets$$data === void 0 ? void 0 : _datasheets$$data.map(function (dataGroup, index) {
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputGroup.InputGroup, {
+                  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: function setUpdatedBoxData(e) {
+                    setBoxData(e);
+                  },
+                  index: index //enableActions={enableActions(product.version_status)} ADD THIS VALIDATION
+
+                }, index + "-" + activeRetailer.name);
+              })
             }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
               text: "No cuentas con este servicio",
               headerType: "input-name-header"
@@ -2208,6 +2229,7 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
               setUpdatedDescriptions: setUpdatedDescriptions,
               articleId: product === null || product === void 0 ? void 0 : product.id_article,
               version: version,
+              isShowbox: false,
               dinamicHeight: true
             }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
               text: "No cuentas con este servicio",

package/package.json

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

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

@@ -13,7 +13,17 @@ export const BoxAttribute = (props) => {
     isEditEnabled,
     titletool,
     texttool,
+    atributos,
+    setAtributos
   } = props;
+  const handleInputChange = (event) => {
+    const { name, value } = event.target; 
+    setAtributos((prevAtributos) => ({
+      ...prevAtributos,
+      [name]: value, 
+    }));
+  };
+  console.log(atributos)
 
   return (
     <>
@@ -42,29 +52,26 @@ export const BoxAttribute = (props) => {
           <span>{text}</span>
           {isEditEnabled ? (
             <TextField
-              hiddenLabel
-              id="caja-borde"
-              defaultValue={text}
-              variant="outlined"
-              size="small"
-            />
+            hiddenLabel
+            name={props.id} 
+            value={atributos[props.id]}
+            onChange={handleInputChange}
+            className="caja-borde"
+            variant="outlined"
+            size="small"
+          />
           ) : (
             <TextField
               hiddenLabel
-              id="caja-borde"
-              defaultValue={text}
+              name={props.id}
+              value={atributos[props.id]}
+              onChange={handleInputChange}
+              className="caja-borde"
               variant="outlined"
               size="small"
               disabled
-            />
+          />
           )}
-          {/* <TextField
-            hiddenLabel
-            id="caja-borde"
-            defaultValue={text}
-            variant="outlined"
-            size="small"
-            /> */}
       </Container>
     </>
   );

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

@@ -10,7 +10,7 @@ export const Container = styled.div`
     align-items: center;
     justify-content: space-between;
   }
-  #caja-borde {
+  .caja-borde {
     font-family: ${FontFamily.RobotoMedium}, sans-serif;
     font-size: 12px;
     line-height: 1.2;

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

@@ -3,13 +3,15 @@ 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 = () => {
+export const Box = ({onChange}) => {
   const [isDeleteDisabled, setIsDeleteDisabled] = useState(true);
   const [isEditEnabled, setIsEditEnabled] = useState(false);
   const [boxOnboardingList, setBoxOnboardingList] = useState([
     {
       showAdd: true,
+      value:{}
     },
   ]);
   
@@ -34,6 +36,14 @@ export const Box = () => {
     setIsEditEnabled(!isEditEnabled);
   };
 
+  useEffect(( ) => {
+    onChange && onChange(boxOnboardingList)
+  }, [
+    boxOnboardingList
+  ])
+  // console.log(atributos)
+  console.log("onboardinglist",boxOnboardingList)
+
   return (
     <Container fontFamily={FontFamily.Raleway} color={GlobalColors.original_magenta}>
       <h1 fontFamily={FontFamily.Raleway}>Cajas</h1>
@@ -41,7 +51,18 @@ export const Box = () => {
         {boxOnboardingList.map((boxOnboarding, index) => (
           <>
           <div className="container-buttons">
-            <BoxOnboarding key={index} showAdd={boxOnboarding.showAdd} isEditEnabled={isEditEnabled}/>
+            <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}

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

@@ -2,10 +2,21 @@ 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";
 
-export const BoxOnboarding = ({ panelColor, isEditEnabled }) => {
+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}
@@ -13,51 +24,52 @@ export const BoxOnboarding = ({ panelColor, isEditEnabled }) => {
       color={GlobalColors.original_magenta}
     >
       <div id="contenedor-caja">
-        <p fontFamily={FontFamily.Raleway}>Caja 1, chica</p>
+        <p fontFamily={FontFamily.Raleway}>Caja {index+1}, chica</p>
         {boxAttributesActive && (
           <BoxAttribute
-            id="atr-alto"
+            id="largo"
             borderType="rectangle"
             className="caja"
             text="Largo"
             isEditEnabled={isEditEnabled}
+            atributos={atributos.largo}
+            setAtributos={setAtributos}
           ></BoxAttribute>
         )}
-        {boxAttributesActive &&
+        {boxAttributesActive && (
           <BoxAttribute
-            id="atr-alto"
+            id="alto"
             borderType="rectangle"
             className="caja"
             text="Alto"
             isEditEnabled={isEditEnabled}
+            atributos={atributos.alto}
+            setAtributos={setAtributos}
           ></BoxAttribute>
-        }
-        {boxAttributesActive &&
-        <BoxAttribute
-          id="atr-alto"
-          borderType="rectangle"
-          className="caja"
-          text="Ancho"
-          isEditEnabled={isEditEnabled}
-        ></BoxAttribute>}
-        {boxAttributesActive &&
-        <BoxAttribute
-          id="atr-alto"
-          borderType="rectangle"
-          className="caja"
-          text="Peso"
-          isEditEnabled={isEditEnabled}
-        ></BoxAttribute>}
-          {/* {boxAttributes.map((attr, index) => (
+        )}
+        {boxAttributesActive && (
           <BoxAttribute
-            key={attr.id}
-            id={`atr-alto-${index}`}
+            id="ancho"
             borderType="rectangle"
             className="caja"
-            text="Largo"
+            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>
   );
-};
+};