contentoh-components-library 21.3.12 → 21.3.14

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

@@ -0,0 +1,269 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RegistrationLoginFirstStep = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _styles = require("./styles");
+
+var _GradientPanel = require("../../atoms/GradientPanel");
+
+var _CarouselImagesLogin = require("../../molecules/CarouselImagesLogin");
+
+var _react = require("react");
+
+var _LogoImage = require("../../atoms/LogoImage");
+
+var _ScreenHeader = require("../../atoms/ScreenHeader");
+
+var _variables = require("../../../global-files/variables");
+
+var _TagAndInput = require("../../molecules/TagAndInput");
+
+var _GeneralButton = require("../../atoms/GeneralButton");
+
+var _GeneralInput = require("../../atoms/GeneralInput");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var RegistrationLoginFirstStep = function RegistrationLoginFirstStep(_ref) {
+  var _ref$imageArrayCarous = _ref.imageArrayCarousel,
+      imageArrayCarousel = _ref$imageArrayCarous === void 0 ? [] : _ref$imageArrayCarous,
+      textCarousel = _ref.textCarousel,
+      backogroundColorCarousel = _ref.backogroundColorCarousel;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      emptyName = _useState2[0],
+      setEmptyName = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      emptyLastName = _useState4[0],
+      setEmptyLastName = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      emptyEmail = _useState6[0],
+      setEmptyEmail = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      emptyJob = _useState8[0],
+      setEmptyJob = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      emptyPhone = _useState10[0],
+      setEmptyPhone = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      invalidEmail = _useState12[0],
+      setInvalidEmail = _useState12[1];
+
+  var validate = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
+      var name, lastName, email, job, phone;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              e.preventDefault();
+              name = document.querySelector("#nameInput").value;
+              lastName = document.querySelector("#lastNameInput").value;
+              email = document.querySelector("#emailInput").value;
+              job = document.querySelector("#jobInput").value;
+              phone = document.querySelector("#phoneInput").value;
+              name === "" ? setEmptyName(true) : setEmptyName(false);
+              lastName === "" ? setEmptyLastName(true) : setEmptyLastName(false);
+              email === "" ? setEmptyEmail(true) : setEmptyEmail(false);
+              job === "" ? setEmptyJob(true) : setEmptyJob(false);
+              phone === "" ? setEmptyPhone(true) : setEmptyPhone(false);
+              !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(email) ? setInvalidEmail(true) : setInvalidEmail(false);
+
+            case 12:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function validate(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var loginRight = [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LogoImage.LogoImage, {}, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "credenciales",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+      fontFamily: _variables.FontFamily.AvenirNext,
+      color: _variables.GlobalColors.s5,
+      text: "Ingresa tus credenciales"
+    })
+  }, "2"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "user",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "name-registration-user",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+        inputType: "text",
+        inputId: "nameInput",
+        label: "Nombre",
+        inputPlaceHolder: "Nombre"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+        inputType: "text",
+        inputId: "lastNameInput",
+        label: "Apellido",
+        inputPlaceHolder: "Apellido"
+      })]
+    }), emptyName && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "Ingrese su nombre"
+    }), emptyLastName && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "Ingrese sus apellidos"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+      inputType: "text",
+      inputId: "emailInput",
+      label: "Correo electrónico",
+      inputPlaceHolder: "username@contentoh.com"
+    }), emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "Ingrese su correo"
+    }), invalidEmail && !emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "Ingrese un correo v\xE1lido"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+      inputType: "text",
+      inputId: "jobInput",
+      label: "Puesto laboral",
+      inputPlaceHolder: "Puesto dentro de la empresa"
+    }), emptyJob && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "Ingrese su puesto"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+      text: "Teléfono",
+      headerType: "input-name-header"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "phone-registration-user",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
+        name: "select",
+        className: "phone-options",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+          children: "+52"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+          children: "+54"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+          children: "+57"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+          children: "+506"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+          children: "+593"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+          children: "+503"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+          children: "+504"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+          children: "+507"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+          children: "+51"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralInput.GeneralInput, {
+        inputId: "phoneInput",
+        inputType: "text",
+        inputPlaceholder: "Teléfono"
+      })]
+    }), emptyPhone && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "Ingrese su n\xFAmero de tel\xE9fono"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+      text: "País",
+      headerType: "input-name-header"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
+      name: "select",
+      className: "country-options",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        value: "value1",
+        selected: true,
+        children: "Selecciona tu pa\xEDs"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        value: "value2",
+        children: "Argentina"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        value: "value3",
+        children: "Colombia"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        value: "value2",
+        children: "Ecuador"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        value: "value3",
+        children: "El Salvador"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        value: "value2",
+        children: "Honduras"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        value: "value3",
+        children: "M\xE9xico"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        value: "value2",
+        children: "Panam\xE1"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+        value: "value3",
+        children: "Per\xFA"
+      })]
+    }), emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      children: "Seleccione su pa\xEDs"
+    })]
+  }, "3"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "button-end",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+      buttonType: "general-default-button",
+      label: "Enviar",
+      onClick: function onClick(e) {
+        return validate(e);
+      }
+    })
+  }, "4"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "progress-bar",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "progress-bar-first-step"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "progress-bar-registration"
+    })]
+  }, "5"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+    text: "Paso 1",
+    headerType: "date-header",
+    color: _variables.GlobalColors.s4
+  }, "6"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "new-login",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+      className: "pre-registro",
+      children: ["\xBFYa tienes una cuenta?", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: " Inicia Sesi\xF3n"
+      })]
+    })
+  }, "7")];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "home-retailer",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselImagesLogin.CarouselImagesLogin, {
+        panelImg: imageArrayCarousel,
+        panelText: textCarousel,
+        panelColor: backogroundColorCarousel
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "home-login-retailer",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GradientPanel.GradientPanel, {
+        componentsArray: loginRight,
+        panelType: "home-login",
+        panelColor: _variables.GlobalColors.white
+      })
+    })]
+  });
+};
+
+exports.RegistrationLoginFirstStep = RegistrationLoginFirstStep;

package/dist/components/pages/RegistrationLoginFirstStep/styles.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n  height: 100vh;\n  .user {\n    .name-registration-user {\n      display: flex;\n      justify-content: space-between;\n      input {\n        width: 160px;\n      }\n    }\n    .input-name-header {\n      margin-bottom: 4px;\n      margin-top: 12px;\n    }\n    .phone-registration-user {\n      display: flex;\n      justify-content: space-between;\n      .phone-options {\n        width: 80px;\n      }\n      input {\n        width: 100%;\n      }\n      & + * {\n        margin-top: 10px;\n      }\n    }\n    .country-options,\n    .phone-options {\n      width: 100%;\n      border: 1px solid ", ";\n      font-family: ", ";\n      color: ", ";\n      font-weight: normal;\n      font-size: 12px;\n      line-height: 15px;\n      padding: 10px;\n      outline: none;\n      border-radius: 2px;\n      resize: none;\n      &:focus {\n        border: 1px solid ", ";\n      }\n    }\n  }\n  .button-end {\n    text-align: end;\n    .general-default-button {\n      width: 160px;\n    }\n    & + * {\n      margin-top: 10px;\n    }\n  }\n  .progress-bar {\n    width: 100%;\n    height: 8px;\n    display: flex;\n    justify-content: space-between;\n    .progress-bar-first-step {\n      width: 33.33%;\n      background-color: rgb(196, 196, 196);\n    }\n    .progress-bar-registration {\n      background-color: rgb(226, 226, 226);\n      width: 66.66%;\n    }\n  }\n  .date-header {\n    .new-login {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n  }\n  .home-login-retailer,\n  .home-retailer {\n    width: 50%;\n  }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4, _variables.GlobalColors.magenta_s2);
+
+exports.Container = Container;

package/dist/global-files/utils.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isValidNaturalNumber = exports.isStringEmpty = exports.isObject = exports.isArrayEmpty = exports.getTime = exports.getResizeImgHeight = exports.getImageURL = exports.getImageSize = exports.getFullDate = exports.getFileName = exports.getFileExtension = exports.getDataBuffer = exports.getDataBase64 = exports.getCustomDate = exports.getBase64 = exports.encodeUriJson = exports.decodeJSON = void 0;
+exports.isValidNaturalNumber = exports.isStringEmpty = exports.isObject = exports.isArrayEmpty = exports.getTime = exports.getResizeImgHeight = exports.getImageURL = exports.getImageSize = exports.getFullDate = exports.getFormatedDate = exports.getFileName = exports.getFileExtension = exports.getDataBuffer = exports.getDataBase64 = exports.getCustomDate = exports.getBase64 = exports.encodeUriJson = exports.decodeJSON = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -342,6 +342,26 @@ var getFullDate = function getFullDate() {
 /*------------------------
 Obtener una fecha a partir de 
 un objeto Date() en formato: 
+'aaaa-MM-dd'
+ejemplo: '2022-12-25'
+--------------------------*/
+
+
+exports.getFullDate = getFullDate;
+
+var getFormatedDate = function getFormatedDate() {
+  var date = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : new Date();
+  var separator = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "/";
+  if (isNaN(date)) return undefined;
+  var dateString = "";
+  dateString += date.getFullYear() + separator;
+  dateString += date.getMonth() + 1 + separator;
+  dateString += date.getDate();
+  return dateString;
+};
+/*------------------------
+Obtener una fecha a partir de 
+un objeto Date() en formato: 
 'dd de MMMM del aaaa'
 ejemplo: '12 de octubre del 2022'
 => si es la fecha del dia actual:
@@ -353,7 +373,7 @@ devolvera '12 de octubre'
 --------------------------*/
 
 
-exports.getFullDate = getFullDate;
+exports.getFormatedDate = getFormatedDate;
 
 var getCustomDate = function getCustomDate() {
   var date = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : new Date();

package/package.json

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

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

@@ -4,6 +4,7 @@ import DatePicker, { registerLocale, setDefaultLocale } from "react-datepicker";
 import es from "date-fns/locale/es";
 import { useCloseModal } from "../../../global-files/customHooks";
 import { useEffect } from "react";
+import { getFormatedDate, getFullDate } from "../../../global-files/utils";
 registerLocale("es", es);
 
 export const RangeCalendar = ({
@@ -18,7 +19,6 @@ export const RangeCalendar = ({
   const [showCalendar, setShowCalendar] = useCloseModal(calendarId);
   useEffect(() => {
     if (currentDates) {
-      console.log(currentDates);
       setStartDate(new Date(currentDates.start));
       setEndDate(new Date(currentDates.end));
     }
@@ -32,8 +32,8 @@ export const RangeCalendar = ({
         setParameterArray((current) => {
           return {
             ...current,
-            estimatedStartDate: start.toISOString().substring(0, 10),
-            estimatedDate: end.toISOString().substring(0, 10),
+            estimatedStartDate: getFormatedDate(new Date(start), "-"),
+            estimatedDate: getFormatedDate(new Date(end), "-"),
           };
         });
     }

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

@@ -59,7 +59,7 @@ export const Dashboard = ({ jwt, user, company }) => {
   };
 
   const getRetailers = async () => {
-    const isTHDUser = user.is_retailer && company.retailers;
+    const isRetailer = user.is_retailer && company.retailers;
     const retailersResponse = await axios.get(
       `${process.env.REACT_APP_RETAILER_ENDPOINT}`,
       {
@@ -69,16 +69,18 @@ export const Dashboard = ({ jwt, user, company }) => {
       }
     );
     const parsed = JSON.parse(retailersResponse.data.body).data;
-    const retailers = isTHDUser
-      ? Object.values(parsed).filter((value) =>
-          [58, 59, 60, 61].includes(value.id)
-        )
-      : Object.values(parsed);
+    let retailers = Object.values(parsed);
+    if (isRetailer) {
+      const retailersValid = company.retailers.map((e) => e.id);
+      retailers = retailers.filter((value) =>
+        retailersValid.includes(value.id)
+      );
+    }
     setRetailers(retailers);
   };
 
-  const loadProductsByStatus = async (orderByStatus, filter) => {
-    const isTHDUser = user.is_retailer && company.retailers;
+  const loadProductsByStatus = async (orderByStatus) => {
+    const isRetailer = user.is_retailer && company.retailers;
     const isProvider = !user.is_retailer && user.id_role === 0;
     const isCollaborator = user.id_role > 0;
     const { ordersBydate, ordersByStatus } =
@@ -86,7 +88,7 @@ export const Dashboard = ({ jwt, user, company }) => {
 
     const { total = 0, R = 0, PA = 0, Ex = 0, ACA = 0 } = ordersByStatus;
     let productsFinished = 0;
-    if (isTHDUser) productsFinished = Ex;
+    if (isRetailer) productsFinished = Ex;
     if (isProvider) productsFinished = ACA;
     if (isCollaborator) productsFinished = Ex + ACA;
 
@@ -250,17 +252,19 @@ export const Dashboard = ({ jwt, user, company }) => {
           setParameterArray={setDatesRange}
           isSingleSelect
         />
-        <CustomSelect
-          showFilterString={true}
-          showSearchBar={true}
-          options={providers}
-          selectLabel="Todos los proveedores"
-          placeHolder="Buscar proveedor"
-          customSelectId="providers-select"
-          parameterArray={companyId}
-          setParameterArray={setCompanyId}
-          defaultOption="Todos los proveedores"
-        />
+        {providers?.length > 0 && (
+          <CustomSelect
+            showFilterString={true}
+            showSearchBar={true}
+            options={providers}
+            selectLabel="Todos los proveedores"
+            placeHolder="Buscar proveedor"
+            customSelectId="providers-select"
+            parameterArray={companyId}
+            setParameterArray={setCompanyId}
+            defaultOption="Todos los proveedores"
+          />
+        )}
         <CustomSelect
           showFilterString={true}
           showSearchBar={true}
@@ -272,17 +276,19 @@ export const Dashboard = ({ jwt, user, company }) => {
           setParameterArray={setCategoryId}
           defaultOption="Todas las categorías"
         />
-        <CustomSelect
-          showFilterString={true}
-          showSearchBar={true}
-          options={retailers}
-          selectLabel="Todas las cadenas"
-          placeHolder="Buscar cadena"
-          customSelectId="retailers-select"
-          parameterArray={retailerId}
-          setParameterArray={setRetailerId}
-          defaultOption="Todas las cadenas"
-        />
+        {retailers?.length > 1 && (
+          <CustomSelect
+            showFilterString={true}
+            showSearchBar={true}
+            options={retailers}
+            selectLabel="Todas las cadenas"
+            placeHolder="Buscar cadena"
+            customSelectId="retailers-select"
+            parameterArray={retailerId}
+            setParameterArray={setRetailerId}
+            defaultOption="Todas las cadenas"
+          />
+        )}
         {user.is_retailer === 1 && (
           <CustomSelect
             showFilterString={true}

package/src/global-files/utils.js

@@ -185,6 +185,21 @@ export const getFullDate = (date = new Date()) => {
   return dateString;
 };
 
+/*------------------------
+Obtener una fecha a partir de 
+un objeto Date() en formato: 
+'aaaa-MM-dd'
+ejemplo: '2022-12-25'
+--------------------------*/
+export const getFormatedDate = (date = new Date(), separator = "/") => {
+  if (isNaN(date)) return undefined;
+  let dateString = "";
+  dateString += date.getFullYear() + separator;
+  dateString += date.getMonth() + 1 + separator;
+  dateString += date.getDate();
+  return dateString;
+};
+
 /*------------------------
 Obtener una fecha a partir de 
 un objeto Date() en formato: