contentoh-components-library 21.4.49 → 21.4.51

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

@@ -2,11 +2,15 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BoxAttribute = void 0;
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
 var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
@@ -15,12 +19,18 @@ var _styles = require("./styles");
 
 var _info = _interopRequireDefault(require("../../../assets/images/Icons/info.svg"));
 
-var _Tooltip = require("../../atoms/Tooltip");
-
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 
+var _Tooltip = _interopRequireWildcard(require("@mui/material/Tooltip"));
+
+var _styles2 = require("@mui/material/styles");
+
+var _variables = require("../../../global-files/variables");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _excluded = ["className"];
+
 var BoxAttribute = function BoxAttribute(props) {
   // console.log({ props });
   var id = props.id,
@@ -28,10 +38,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,
@@ -42,10 +52,29 @@ var BoxAttribute = function BoxAttribute(props) {
     });
   };
 
+  var LightTooltip = (0, _styles2.styled)(function (_ref) {
+    var className = _ref.className,
+        props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, (0, _objectSpread3.default)((0, _objectSpread3.default)({}, props), {}, {
+      classes: {
+        popper: className
+      }
+    }));
+  })(function (_ref2) {
+    var theme = _ref2.theme;
+    return (0, _defineProperty2.default)({}, "& .".concat(_Tooltip.tooltipClasses.tooltip), {
+      backgroundColor: _variables.GlobalColors.white,
+      color: 'rgba(0, 0, 0, 0.87)',
+      boxShadow: theme.shadows[1],
+      fontSize: 11,
+      fontFamily: "".concat(_variables.FontFamily.Roboto, ", sans-serif")
+    });
+  });
   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]);
 
@@ -54,15 +83,13 @@ var BoxAttribute = function BoxAttribute(props) {
       id: id,
       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
-          })]
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(LightTooltip, {
+        title: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "container-tooltip",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            className: "container-tooltip",
+            children: description
+          })
         }),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
           className: "",
@@ -71,10 +98,12 @@ var BoxAttribute = function BoxAttribute(props) {
             src: _info.default,
             alt: "iconInfo"
           })
-        }),
-        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 +112,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,7 +15,7 @@ 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\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);

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.51",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

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

@@ -1,7 +1,9 @@
 import { Container } from "./styles";
 import IconInfo from "../../../assets/images/Icons/info.svg";
-import { Tooltip } from "../../atoms/Tooltip";
 import TextField from "@mui/material/TextField";
+import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
+import { styled } from '@mui/material/styles';
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
 export const BoxAttribute = (props) => {
   // console.log({ props });
@@ -11,10 +13,10 @@ export const BoxAttribute = (props) => {
     className,
     text,
     borderType,
-    titletool,
-    texttool,
     atributos,
     setAtributos,
+    required,
+    description,
   } = props;
   const handleInputChange = (event) => {
     const { name, value } = event.target;
@@ -23,11 +25,23 @@ export const BoxAttribute = (props) => {
       [name]: value,
     }));
   };
+  const LightTooltip = styled(({ className, ...props }) => (
+    <Tooltip {...props} classes={{ popper: className }} />
+  ))(({ theme }) => ({
+    [`& .${tooltipClasses.tooltip}`]: {
+      backgroundColor: GlobalColors.white,
+      color: 'rgba(0, 0, 0, 0.87)',
+      boxShadow: theme.shadows[1],
+      fontSize: 11,
+      fontFamily: `${FontFamily.Roboto}, sans-serif`,
+    },
+  }));
 
   const formattedData = Object.keys(atributos).reduce((result, id) => {
     result[`box${id}`] = atributos[id];
     return result;
   }, {});
+  console.log("description",description)
   //escucha los cambios
   // console.log(formattedData);
   // console.log("atributos id", atributos[props.id]);
@@ -39,23 +53,17 @@ 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>
+        <LightTooltip title={
+              <div className="container-tooltip">
+                <p className="container-tooltip">{description}</p>
+              </div>
+            }>
+              <Container className="">
+                <img className="icon" src={IconInfo} alt="iconInfo" />
+              </Container>
+        </LightTooltip>
+       
+        <span>{text}<span className={required ? 'required-text' : ''}>{required ? '*' : ''}</span></span>
           <TextField
             hiddenLabel
             key={props.id}
@@ -66,6 +74,7 @@ export const BoxAttribute = (props) => {
             variant="outlined"
             size="small"
             type="number"
+            required={required}
           />
       </Container>
     </>

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

@@ -32,4 +32,10 @@ export const Container = styled.div`
     width: 8px;
     height: 8px;
   }
+  .required-text {
+    color: red;
+  }
+
+
+  
 `;

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}