contentoh-components-library 21.4.49 → 21.4.50

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

@@ -28,10 +28,10 @@ var BoxAttribute = function BoxAttribute(props) {
       className = props.className,
       text = props.text,
       borderType = props.borderType,
-      titletool = props.titletool,
-      texttool = props.texttool,
       atributos = props.atributos,
-      setAtributos = props.setAtributos;
+      setAtributos = props.setAtributos,
+      required = props.required,
+      description = props.description;
 
   var handleInputChange = function handleInputChange(event) {
     var _event$target = event.target,
@@ -45,7 +45,8 @@ var BoxAttribute = function BoxAttribute(props) {
   var formattedData = Object.keys(atributos).reduce(function (result, id) {
     result["box".concat(id)] = atributos[id];
     return result;
-  }, {}); //escucha los cambios
+  }, {});
+  console.log("description", description); //escucha los cambios
   // console.log(formattedData);
   // console.log("atributos id", atributos[props.id]);
 
@@ -55,14 +56,11 @@ var BoxAttribute = function BoxAttribute(props) {
       className: className,
       borderType: borderType,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
-        componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
-              children: titletool
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-            children: texttool
-          })]
+        componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            className: "tooltip-content",
+            children: description
+          })
         }),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
           className: "",
@@ -73,8 +71,11 @@ var BoxAttribute = function BoxAttribute(props) {
           })
         }),
         classNameTooltip: "container-tooltip"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        children: text
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        children: [text, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: required ? 'required-text' : '',
+          children: required ? '*' : ''
+        })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
         hiddenLabel: true,
         name: props.id,
@@ -83,7 +84,8 @@ var BoxAttribute = function BoxAttribute(props) {
         className: "caja-borde",
         variant: "outlined",
         size: "small",
-        type: "number"
+        type: "number",
+        required: required
       }, props.id)]
     }, key)
   });

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

@@ -15,9 +15,11 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  gap:4px;\n  #atr-alto {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n  .caja-borde {\n    font-family: ", ", sans-serif;\n    font-size: 12px;\n    line-height: 1.2;\n    border-radius: ", ";\n  }\n  span {\n    font-family: ", ", sans-serif;\n    font-size: 12px;\n    line-height: 1.2;\n    font-weight: 600;\n  }\n  .icon {\n    width: 8px;\n    height: 8px;\n  }\n"])), _variables.FontFamily.RobotoMedium, function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  gap:4px;\n  #atr-alto {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n  .caja-borde {\n    font-family: ", ", sans-serif;\n    font-size: 12px;\n    line-height: 1.2;\n    border-radius: ", ";\n  }\n  span {\n    font-family: ", ", sans-serif;\n    font-size: 12px;\n    line-height: 1.2;\n    font-weight: 600;\n  }\n  .icon {\n    width: 8px;\n    height: 8px;\n  }\n  .required-text {\n    color: red;\n  }\n\n  .container-tooltip{\n    background-color: ", ";\n    width: fit-content;\n    height: 27px;\n    padding: 4px;\n    border-radius: 15px;\n    font-family: ", ";\n    font-weight: 600;\n    font-size: 14px;\n    line-height: 19px;\n    color: ", ";\n  }\n  \n"])), _variables.FontFamily.RobotoMedium, function (_ref) {
   var borderType = _ref.borderType;
   return (borderType === null || borderType === void 0 ? void 0 : borderType.toLowerCase()) === "rectangle" ? "5px" : (borderType === null || borderType === void 0 ? void 0 : borderType.toLowerCase()) === "circle" ? "50%" : "none";
-}, _variables.FontFamily.RobotoMedium);
+}, _variables.FontFamily.RobotoMedium, _variables.GlobalColors.s3, _variables.FontFamily.AvenirNext, function (backgroundColor) {
+  return backgroundColor === "s2" || backgroundColor === "s1" ? _variables.GlobalColors.s4 : _variables.GlobalColors.white;
+});
 
 exports.Container = Container;

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

@@ -16,10 +16,7 @@ var BoxButtons = function BoxButtons(_ref) {
       onAdd = _ref.onAdd,
       onDelete = _ref.onDelete,
       isTheFirstBox = _ref.isTheFirstBox,
-      onToggleEdit = _ref.onToggleEdit,
-      isEditEnabled = _ref.isEditEnabled,
       index = _ref.index;
-  console.log("index", index);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     index: index,
     children: [!isTheFirstBox && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {

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

@@ -51,8 +51,8 @@ var Box = function Box(_ref) {
       setBoxOnboardingList = _useState6[1];
 
   (0, _react.useEffect)(function () {
-    // console.log("dataInputs:", dataInputs);
-    // console.log("inputGroup:", inputGroup);
+    console.log("dataInputs:", dataInputs);
+    console.log("inputGroup:", inputGroup);
     var temp = {};
     var maxBoxId = 0;
     inputGroup.inputs.forEach(function (attrId) {

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

@@ -58,13 +58,15 @@ var BoxOnboarding = /*#__PURE__*/(0, _react.memo)(function (_ref) {
         fontFamily: _variables.FontFamily.Raleway,
         children: ["Caja ", index + 1]
       }), inputs.map(function (attrId) {
-        var _dataInputs$attrId;
+        var _dataInputs$attrId, _dataInputs$attrId2, _dataInputs$attrId3;
 
         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,
+          required: (_dataInputs$attrId2 = dataInputs[attrId]) === null || _dataInputs$attrId2 === void 0 ? void 0 : _dataInputs$attrId2.required,
+          description: (_dataInputs$attrId3 = dataInputs[attrId]) === null || _dataInputs$attrId3 === void 0 ? void 0 : _dataInputs$attrId3.description,
           atributos: atributos,
           setAtributos: setAtributos
         }, attrId);

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

@@ -73,7 +73,6 @@ var InputGroup = function InputGroup(_ref) {
 
   var isEquals = function isEquals(dataInputsVal, auditInputsVal) {
     var result = dataInputsVal === auditInputsVal;
-    console.log("Input Val", dataInputsVal);
     return result;
   };
 
@@ -82,7 +81,7 @@ var InputGroup = function InputGroup(_ref) {
       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: "".concat(inputGroup.groupId, " - ").concat(inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.dataGroup)
+        text: "".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) {

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

@@ -1090,7 +1090,6 @@ 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;
 
@@ -2228,7 +2227,6 @@ 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.49",
+  "version": "21.4.50",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

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

@@ -11,10 +11,10 @@ export const BoxAttribute = (props) => {
     className,
     text,
     borderType,
-    titletool,
-    texttool,
     atributos,
     setAtributos,
+    required,
+    description,
   } = props;
   const handleInputChange = (event) => {
     const { name, value } = event.target;
@@ -28,6 +28,7 @@ export const BoxAttribute = (props) => {
     result[`box${id}`] = atributos[id];
     return result;
   }, {});
+  console.log("description",description)
   //escucha los cambios
   // console.log(formattedData);
   // console.log("atributos id", atributos[props.id]);
@@ -42,10 +43,7 @@ export const BoxAttribute = (props) => {
         <Tooltip
           componentTooltip={
             <>
-              <p>
-                <b>{titletool}</b>
-              </p>
-              <p>{texttool}</p>
+              <p className="tooltip-content">{description}</p>
             </>
           }
           children={
@@ -55,7 +53,7 @@ export const BoxAttribute = (props) => {
           }
           classNameTooltip={"container-tooltip"}
         />
-        <span>{text}</span>
+        <span>{text}<span className={required ? 'required-text' : ''}>{required ? '*' : ''}</span></span>
           <TextField
             hiddenLabel
             key={props.id}
@@ -66,6 +64,7 @@ export const BoxAttribute = (props) => {
             variant="outlined"
             size="small"
             type="number"
+            required={required}
           />
       </Container>
     </>

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

@@ -32,4 +32,24 @@ export const Container = styled.div`
     width: 8px;
     height: 8px;
   }
+  .required-text {
+    color: red;
+  }
+
+  .container-tooltip{
+    background-color: ${GlobalColors.s3};
+    width: fit-content;
+    height: 27px;
+    padding: 4px;
+    border-radius: 15px;
+    font-family: ${FontFamily.AvenirNext};
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 19px;
+    color: ${(backgroundColor) =>
+      backgroundColor === "s2" || backgroundColor === "s1"
+        ? GlobalColors.s4
+        : GlobalColors.white};
+  }
+  
 `;

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

@@ -1,8 +1,7 @@
 import { Container, ContainerIcon } from "./styles";
 import { Button } from "@mui/material";
 
-export const BoxButtons = ({ showAdd, onAdd, onDelete, isTheFirstBox, onToggleEdit, isEditEnabled, index  }) => {
-  console.log("index",index)
+export const BoxButtons = ({ showAdd, onAdd, onDelete, isTheFirstBox, index  }) => {
   return (
       <Container index={index}>
         {/* <Button variant="outlined" className="button-circle" onClick={onToggleEdit}>

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

@@ -15,8 +15,8 @@ export const Box = ({ onChange, dataInputs, inputGroup }) => {
   ]);
 
   useEffect(() => {
-    // console.log("dataInputs:", dataInputs);
-    // console.log("inputGroup:", inputGroup);
+    console.log("dataInputs:", dataInputs);
+    console.log("inputGroup:", inputGroup);
     const temp = {};
     let maxBoxId = 0;
     inputGroup.inputs.forEach((attrId) => {

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

@@ -44,6 +44,8 @@ export const BoxOnboarding = memo(
                 borderType="rectangle"
                 className="caja"
                 text={dataInputs[attrId]?.name}
+                required={dataInputs[attrId]?.required}
+                description={dataInputs[attrId]?.description}
                 atributos={atributos}
                 setAtributos={setAtributos}
               />

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

@@ -48,7 +48,6 @@ export const InputGroup = ({
 
   const isEquals = (dataInputsVal, auditInputsVal) => {
     const result = dataInputsVal === auditInputsVal;
-    console.log("Input Val",dataInputsVal)
     return result;
   };
   return inputGroup.groupId !== "16" ? (
@@ -63,7 +62,7 @@ export const InputGroup = ({
         {inputGroup?.dataGroup && (
           <ScreenHeader
             headerType={"retailer-name-header"}
-            text={`${inputGroup.groupId} - ${inputGroup?.dataGroup}`}
+            text={`${inputGroup?.dataGroup}`}
           />
         )}
         <div className="inputs-container">

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

@@ -598,7 +598,6 @@ export const ProviderProductEdition = ({
         );
       setActivePercentage(Math.round(activeRetailer?.percentage, 0));
 
-      console.log("loadInputs: ", services[0]);
       const datagroups = services[0][activeRetailer.id];
       const inputs = services[0]?.inputs;
       const descriptions = services[1]?.filter(
@@ -1487,7 +1486,6 @@ export const ProviderProductEdition = ({
                           isShowbox={true}
                           groupData={services[0][activeRetailer.id].data}
                           setUpdatedBoxData={(e) => {
-                            console.log("UNO",e);
                             setBoxData(e);
                           }}
                           index={index}