contentoh-components-library 21.0.45 → 21.0.48

package/dist/components/atoms/Loading/styles.js

@@ -13,6 +13,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  justify-content: center;\n  align-items: center;\n  height: 100vh;\n  width: 50%;\n  position: relative;\n  img {\n    width: 60%;\n    position: absolute;\n    bottom: 55%;\n    left: 10%;\n  }\n  .loader {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 10%;\n    width: 50%;\n    position: absolute;\n    bottom: 45%;\n    left:10%;\n    span {\n      display: inline-block;\n      border-radius: 100%;\n      margin-left: 5px;\n      opacity: 1;\n    }\n    .first {\n      background-color: #ff75cf;\n    }\n    .second {\n      background-color: #e33aa9;\n    }\n    .third {\n      background-color: #b12d84;\n    }\n    span:nth-child(1) {\n      width: 16px;\n      height: 16px;\n      animation: opacitychange 1s ease-in-out infinite;\n    }\n    span:nth-child(2) {\n      width: 18px;\n      height: 18px;\n\n      animation: opacitychange 1s ease-in-out 0.33s infinite;\n    }\n    span:nth-child(3) {\n      width: 20px;\n      height: 20px;\n\n      animation: opacitychange 1s ease-in-out 0.66s infinite;\n    }\n    @keyframes opacitychange {\n      0%,\n      100% {\n        opacity: 0;\n      }\n      60% {\n        opacity: 1;\n      }\n    }\n  }\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  justify-content: center;\n  align-items: center;\n  height: 100vh;\n  width: 50%;\n  position: relative;\n  img {\n    width: 75% !important;\n    position: absolute;\n    bottom: 55%;\n    left: 10%;\n  }\n  .loader {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 10%;\n    width: 50%;\n    position: absolute;\n    bottom: 45%;\n    left:25%;\n    span {\n      display: inline-block;\n      border-radius: 100%;\n      margin-left: 5px;\n      opacity: 1;\n    }\n    .first {\n      background-color: #ff75cf;\n    }\n    .second {\n      background-color: #e33aa9;\n    }\n    .third {\n      background-color: #b12d84;\n    }\n    span:nth-child(1) {\n      width: 16px;\n      height: 16px;\n      animation: opacitychange 1s ease-in-out infinite;\n    }\n    span:nth-child(2) {\n      width: 18px;\n      height: 18px;\n\n      animation: opacitychange 1s ease-in-out 0.33s infinite;\n    }\n    span:nth-child(3) {\n      width: 20px;\n      height: 20px;\n\n      animation: opacitychange 1s ease-in-out 0.66s infinite;\n    }\n    @keyframes opacitychange {\n      0%,\n      100% {\n        opacity: 0;\n      }\n      60% {\n        opacity: 1;\n      }\n    }\n  }\n"])));
 
 exports.Container = Container;

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

@@ -35,7 +35,7 @@ var RegistrationFirstStep = function RegistrationFirstStep(props) {
       emptyName = _useState2[0],
       setEmptyName = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(false),
+  var _useState3 = (0, _react.useState)(true),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
       emptyLastName = _useState4[0],
       setEmptyLastName = _useState4[1];
@@ -163,6 +163,7 @@ var RegistrationFirstStep = function RegistrationFirstStep(props) {
     }), emptyName && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
       children: "Ingrese su nombre"
     }), emptyLastName && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      className: "lastname",
       children: "Ingrese sus apellidos"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
       inputType: "text",

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

@@ -15,6 +15,6 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 50%;\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  .pre-registro {\n    cursor: pointer;\n  }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4, _variables.GlobalColors.magenta_s2);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 50%;\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    .lastname {\n      margin-left: 69%;\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  .pre-registro {\n    cursor: pointer;\n  }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4, _variables.GlobalColors.magenta_s2);
 
 exports.Container = Container;

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

@@ -124,8 +124,6 @@ var RegistrationSecondStep = function RegistrationSecondStep(props) {
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
       text: "Todos los datos estan protegidos.",
       headerType: "date-header"
-    }), !termsCheck && !!privacyCheck && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-      children: "Seleccione los terminos y condiciones y el Aviso de privacidad"
     })]
   }, "7"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "button-end",

package/dist/components/molecules/SignInLoginCreationApp/SignInLogin.stories.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SignInLoginCreationAppDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/molecules/SignInLoginCreationApp",
+  component: _index.SignInLoginCreationApp
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.SignInLoginCreationApp, (0, _objectSpread2.default)({}, args));
+};
+
+var SignInLoginCreationAppDefault = Template.bind({});
+exports.SignInLoginCreationAppDefault = SignInLoginCreationAppDefault;
+SignInLoginCreationAppDefault.args = {};

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

@@ -0,0 +1,271 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SignInLoginCreationApp = 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 _index = require("../../atoms/LogoImage/index");
+
+var _index2 = require("../../atoms/ScreenHeader/index");
+
+var _index3 = require("../../atoms/GeneralButton/index");
+
+var _index4 = require("../../atoms/CheckBox/index");
+
+var _TagAndInput = require("../TagAndInput");
+
+var _variables = require("../../../global-files/variables");
+
+var _react = require("react");
+
+var _Loading = require("../../atoms/Loading");
+
+var _reactRouterDom = require("react-router-dom");
+
+var _axios = _interopRequireDefault(require("axios"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var SignInLoginCreationApp = function SignInLoginCreationApp(props) {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      emptyEmail = _useState2[0],
+      setEmptyEmail = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      invalidEmail = _useState4[0],
+      setInvalidEmail = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      emptyPassword = _useState6[0],
+      setEmptyPassword = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(true),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      showErrors = _useState8[0],
+      setShowErrors = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(""),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      signInError = _useState10[0],
+      setSignInError = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      loading = _useState12[0],
+      setLoading = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(false),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      upgradePlanRedirect = _useState14[0],
+      setUpgradePlanRedirect = _useState14[1];
+
+  var validate = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
+      var valid, email, password, session, userGroup, response, userGroupValue, user, company;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              setSignInError("");
+              setShowErrors(true);
+              e.preventDefault();
+              valid = true;
+              email = document.querySelector("#emailInput").value;
+              password = document.querySelector("#passwordInput").value;
+              !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(email) ? setInvalidEmail(true) : setInvalidEmail(false);
+
+              if (email === "") {
+                valid = false;
+                setEmptyEmail(true);
+              } else {
+                setEmptyEmail(false);
+              }
+
+              if (password === "") {
+                valid = false;
+                setEmptyPassword(true);
+              } else {
+                setEmptyPassword(false);
+              }
+
+              if (!valid) {
+                _context.next = 34;
+                break;
+              }
+
+              _context.prev = 10;
+              setLoading(true);
+              _context.next = 14;
+              return props.Auth.signIn(email, password);
+
+            case 14:
+              session = _context.sent;
+
+              if (!(session.challengeName === "NEW_PASSWORD_REQUIRED")) {
+                _context.next = 20;
+                break;
+              }
+
+              props.setUser(session);
+              props.setPaso(8);
+              _context.next = 26;
+              break;
+
+            case 20:
+              userGroup = session.signInUserSession.accessToken.payload["cognito:groups"];
+              _context.next = 23;
+              return _axios.default.get(process.env.REACT_APP_USER_ENDPOINT, {
+                headers: {
+                  Authorization: session.signInUserSession.idToken.jwtToken
+                }
+              });
+
+            case 23:
+              response = _context.sent;
+              userGroupValue = typeof userGroup === "string" ? userGroup : userGroup[0];
+
+              if (userGroupValue === "usuario_contentoh") {
+                sessionStorage.setItem("auth", true);
+                sessionStorage.setItem("jwt", session.signInUserSession.idToken.jwtToken);
+                user = JSON.parse(response.data.body).data[0];
+                company = JSON.parse(response.data.body).data[1];
+                caches.keys().then(function (names) {
+                  names.forEach(function (name) {
+                    caches.delete(name);
+                  });
+                });
+                user.src = "https://".concat(process.env.REACT_APP_IMAGES_PROFILE_BUCKET, ".s3.amazonaws.com/id-").concat(user.id_user, "/").concat(user.id_user, ".png?").concat(new Date().getTime());
+                sessionStorage.setItem("user", JSON.stringify(user));
+                sessionStorage.setItem("company", JSON.stringify(company));
+                setUpgradePlanRedirect(true);
+              } else {
+                setSignInError("NotAuthorizedException");
+                setLoading(false);
+              }
+
+            case 26:
+              _context.next = 34;
+              break;
+
+            case 28:
+              _context.prev = 28;
+              _context.t0 = _context["catch"](10);
+              console.log(_context.t0);
+              setLoading(false);
+              console.log("error 1");
+
+              if (_context.t0.code === "NotAuthorizedException") {
+                setSignInError("NotAuthorizedException");
+              } else if (_context.t0.code === "UserNotConfirmedException") {
+                sessionStorage.setItem("email", JSON.stringify(document.querySelector("#usernameInput").value.trim()));
+                sessionStorage.setItem("email", JSON.stringify(email));
+                props.setPaso(5);
+              } else {
+                setSignInError("Error");
+                console.log("error 2");
+              }
+
+            case 34:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[10, 28]]);
+    }));
+
+    return function validate(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  (0, _react.useEffect)(function () {
+    sessionStorage.getItem("resetPasswordProcess") && sessionStorage.removeItem("resetPasswordProcess");
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (upgradePlanRedirect) setLoading(false);
+  }, [upgradePlanRedirect]);
+  return loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+      className: "home-login",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "main-container",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.LogoImage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "credenciales",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.ScreenHeader, {
+            fontFamily: _variables.FontFamily.AvenirNext,
+            color: _variables.GlobalColors.s5,
+            text: "Ingresa tus credenciales"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "user",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+            inputType: "text",
+            label: "Nombre de usuario",
+            inputPlaceHolder: "username@contentoh.com",
+            inputId: "emailInput"
+          })
+        }), showErrors && 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)("div", {
+          className: "password",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+            inputType: "password",
+            label: "Contraseña",
+            inputPlaceHolder: "Escribe tu contraseña",
+            inputId: "passwordInput"
+          })
+        }), showErrors && emptyPassword && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          children: "Ingrese su contrase\xF1a"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "select",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.CheckBox, {
+            label: "Mantener sesión activada",
+            id: "chk-default",
+            className: "active-left"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            onClick: function onClick() {
+              return props.setPaso(10);
+            },
+            className: "active-right",
+            children: "Olvide mi contrase\xF1a"
+          })]
+        }), showErrors && signInError === "NotAuthorizedException" && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          children: "Correo o contrase\xF1a incorrectos"
+        }), showErrors && signInError === "Error" && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          children: "Ha habido un problema al iniciar sesi\xF3n"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "button-right",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Button, {
+            buttonType: "general-default-button",
+            label: "Iniciar sesión",
+            onClick: function onClick(e) {
+              return validate(e);
+            }
+          })
+        })]
+      })
+    }), upgradePlanRedirect && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Redirect, {
+      to: {
+        pathname: "/dashboard"
+      }
+    })]
+  });
+};
+
+exports.SignInLoginCreationApp = SignInLoginCreationApp;

package/dist/components/molecules/SignInLoginCreationApp/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  background: \"white\";\n  display: flex;\n  height: 100vh;\n  width: 50%;\n  justify-content: center;\n  align-items: center;\n  label {\n    color: red;\n    margin-top: 3px;\n    margin-left: 15px;\n    font-family: ", ";\n    font-size: 11px;\n    & + * {\n      margin-top: 12px;\n    }\n  }\n\n  &.home-login {\n    .credenciales {\n      & + * {\n        margin-top: 30px;\n      }\n    }\n    .user {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n    .password {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n    .select {\n      display: flex;\n      justify-content: space-between;\n      .active-right {\n        font-family: ", ";\n        font-weight: 500;\n        font-size: 13px;\n        line-height: 24px;\n        letter-spacing: -0.015em;\n        color: ", ";\n        cursor: pointer;\n      }\n      & + * {\n        margin-top: 50px;\n      }\n    }\n    .button-right {\n      text-align: right;\n      & + * {\n        margin-top: 55px;\n      }\n    }\n    .new-login {\n      p {\n        font-family: ", ";\n        text-align: right;\n        font-weight: 500;\n        font-size: 13px;\n        line-height: 24px;\n        color: ", ";\n        cursor: pointer;\n        span {\n          color: ", ";\n        }\n      }\n    }\n  }\n  .main-container {\n    max-width: 80%;\n    max-height: 80%;\n  }\n"])), _variables.FontFamily.Raleway_700, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.GlobalColors.secondary_magenta);
+
+exports.Container = Container;

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

@@ -15,6 +15,6 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: 100%;\n  width: 50%;\n  .button-center {\n    text-align: center;\n    .general-default-button {\n      width: 160px;\n    }\n  }\n  .reset-password {\n    text-align: center;\n    margin: 15px !important;\n    color: ", ";\n    cursor: pointer;\n    font-weight: bold;\n    font-family: ", ";\n    font-size: 13px;\n  }\n  .resend-code {\n    margin-top: 8px !important;\n    color: ", ";\n    font-family: ", ";\n    font-size: 11px;\n    text-decoration: underline rgb(228, 81, 172);\n    cursor: pointer;\n    & + * {\n      margin-top: 30px;\n    }\n  }\n  .verification-code {\n    display: flex;\n    text-align: center;\n    margin: auto;\n    margin-top: 10px;\n    input[type=\"number\"]::-webkit-inner-spin-button,\n    input[type=\"number\"]::-webkit-outer-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n    input {\n      width: 70%;\n      text-align: center;\n    }\n  }\n"])), _variables.GlobalColors.secondary_magenta, _variables.FontFamily.Raleway, _variables.GlobalColors.magenta_s2, _variables.FontFamily.AvenirNext);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: 100vh;\n  width: 50%;\n  align-items: center;\n  justify-content: center;\n  .button-center {\n    text-align: center;\n    .general-default-button {\n      width: 160px;\n    }\n  }\n  .reset-password {\n    text-align: center;\n    margin: 15px !important;\n    color: ", ";\n    cursor: pointer;\n    font-weight: bold;\n    font-family: ", ";\n    font-size: 13px;\n  }\n  .resend-code {\n    margin-top: 8px !important;\n    color: ", ";\n    font-family: ", ";\n    font-size: 11px;\n    text-decoration: underline rgb(228, 81, 172);\n    cursor: pointer;\n    & + * {\n      margin-top: 30px;\n    }\n  }\n  .verification-code {\n    display: flex;\n    text-align: center;\n    margin: auto;\n    margin-top: 10px;\n    input[type=\"number\"]::-webkit-inner-spin-button,\n    input[type=\"number\"]::-webkit-outer-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n    input {\n      width: 70%;\n      text-align: center;\n    }\n  }\n"])), _variables.GlobalColors.secondary_magenta, _variables.FontFamily.Raleway, _variables.GlobalColors.magenta_s2, _variables.FontFamily.AvenirNext);
 
 exports.Container = Container;

package/dist/components/organisms/ChangePassword/styles.js

@@ -13,6 +13,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 50%;\n  height: 100vh;\n  .button-center {\n    position: absolute;\n    bottom: 10%;\n    left: 65%;\n    .general-default-button {\n      width: 160px;\n    }\n  }\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 50%;\n  height: 100vh;\n  .button-center {\n    position: absolute;\n    bottom: 13%;\n    left: 18%;\n    .general-default-button {\n      width: 160px;\n    }\n  }\n"])));
 
 exports.Container = Container;

package/dist/index.js

@@ -472,7 +472,7 @@ Object.keys(_index34).forEach(function (key) {
   });
 });
 
-var _index35 = require("./components/molecules/StatusAsignationInfo/index");
+var _index35 = require("./components/molecules/SignInLoginCreationApp/index");
 
 Object.keys(_index35).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -485,7 +485,7 @@ Object.keys(_index35).forEach(function (key) {
   });
 });
 
-var _index36 = require("./components/molecules/TableHeader/index");
+var _index36 = require("./components/molecules/StatusAsignationInfo/index");
 
 Object.keys(_index36).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -498,7 +498,7 @@ Object.keys(_index36).forEach(function (key) {
   });
 });
 
-var _index37 = require("./components/molecules/TableRow/index");
+var _index37 = require("./components/molecules/TableHeader/index");
 
 Object.keys(_index37).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -511,7 +511,7 @@ Object.keys(_index37).forEach(function (key) {
   });
 });
 
-var _index38 = require("./components/molecules/TabsMenu/index");
+var _index38 = require("./components/molecules/TableRow/index");
 
 Object.keys(_index38).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -524,7 +524,7 @@ Object.keys(_index38).forEach(function (key) {
   });
 });
 
-var _index39 = require("./components/molecules/TagAndInput/index");
+var _index39 = require("./components/molecules/TabsMenu/index");
 
 Object.keys(_index39).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -537,7 +537,7 @@ Object.keys(_index39).forEach(function (key) {
   });
 });
 
-var _index40 = require("./components/molecules/VerificationCodeResetPasswordLogin/index");
+var _index40 = require("./components/molecules/TagAndInput/index");
 
 Object.keys(_index40).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -550,7 +550,7 @@ Object.keys(_index40).forEach(function (key) {
   });
 });
 
-var _index41 = require("./components/organisms/ChangePassword/index");
+var _index41 = require("./components/molecules/VerificationCodeResetPasswordLogin/index");
 
 Object.keys(_index41).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -563,7 +563,7 @@ Object.keys(_index41).forEach(function (key) {
   });
 });
 
-var _index42 = require("./components/organisms/Fullplan/index");
+var _index42 = require("./components/organisms/ChangePassword/index");
 
 Object.keys(_index42).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -576,7 +576,7 @@ Object.keys(_index42).forEach(function (key) {
   });
 });
 
-var _index43 = require("./components/organisms/FullProductNameHeader/index");
+var _index43 = require("./components/organisms/Fullplan/index");
 
 Object.keys(_index43).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -589,7 +589,7 @@ Object.keys(_index43).forEach(function (key) {
   });
 });
 
-var _index44 = require("./components/organisms/FullTabsMenu/index");
+var _index44 = require("./components/organisms/FullProductNameHeader/index");
 
 Object.keys(_index44).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -602,7 +602,7 @@ Object.keys(_index44).forEach(function (key) {
   });
 });
 
-var _index45 = require("./components/organisms/ImageDataTable/index");
+var _index45 = require("./components/organisms/FullTabsMenu/index");
 
 Object.keys(_index45).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -615,7 +615,7 @@ Object.keys(_index45).forEach(function (key) {
   });
 });
 
-var _index46 = require("./components/organisms/ImagePreviewer/index");
+var _index46 = require("./components/organisms/ImageDataTable/index");
 
 Object.keys(_index46).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -628,7 +628,7 @@ Object.keys(_index46).forEach(function (key) {
   });
 });
 
-var _index47 = require("./components/organisms/ImagesGroup/index");
+var _index47 = require("./components/organisms/ImagePreviewer/index");
 
 Object.keys(_index47).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -641,7 +641,7 @@ Object.keys(_index47).forEach(function (key) {
   });
 });
 
-var _index48 = require("./components/organisms/InputGroup/index");
+var _index48 = require("./components/organisms/ImagesGroup/index");
 
 Object.keys(_index48).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -654,7 +654,7 @@ Object.keys(_index48).forEach(function (key) {
   });
 });
 
-var _index49 = require("./components/organisms/ProductImageModal/index");
+var _index49 = require("./components/organisms/InputGroup/index");
 
 Object.keys(_index49).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -667,6 +667,19 @@ Object.keys(_index49).forEach(function (key) {
   });
 });
 
+var _index50 = require("./components/organisms/ProductImageModal/index");
+
+Object.keys(_index50).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _index50[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index50[key];
+    }
+  });
+});
+
 var _ChangePasswordLogin = require("./components/pages/ChangePasswordLogin");
 
 Object.keys(_ChangePasswordLogin).forEach(function (key) {

package/package.json

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

package/src/components/atoms/Loading/styles.js

@@ -7,7 +7,7 @@ export const Container = styled.div`
   width: 50%;
   position: relative;
   img {
-    width: 60%;
+    width: 75% !important;
     position: absolute;
     bottom: 55%;
     left: 10%;
@@ -20,7 +20,7 @@ export const Container = styled.div`
     width: 50%;
     position: absolute;
     bottom: 45%;
-    left:10%;
+    left:25%;
     span {
       display: inline-block;
       border-radius: 100%;

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

@@ -10,7 +10,7 @@ import { GeneralInput } from "../../atoms/GeneralInput";
 
 export const RegistrationFirstStep = (props) => {
   const [emptyName, setEmptyName] = useState(false);
-  const [emptyLastName, setEmptyLastName] = useState(false);
+  const [emptyLastName, setEmptyLastName] = useState(true);
   const [emptyEmail, setEmptyEmail] = useState(false);
   const [emptyJob, setEmptyJob] = useState(false);
   const [emptyPhone, setEmptyPhone] = useState(false);
@@ -36,12 +36,12 @@ export const RegistrationFirstStep = (props) => {
   }, []);
   const validate = (evt) => {
     const name = document.querySelector("#nameInput").value;
-  const lastName = document.querySelector("#lastNameInput").value;
-  const email = document.querySelector("#emailInput").value;
-  const job = document.querySelector("#jobInput").value;
-  const phone = document.querySelector("#phoneInput").value;
-  const country = document.querySelector("#countrySelect").value;
-  const countryCode = document.querySelector("#countryCodeSelect").value;
+    const lastName = document.querySelector("#lastNameInput").value;
+    const email = document.querySelector("#emailInput").value;
+    const job = document.querySelector("#jobInput").value;
+    const phone = document.querySelector("#phoneInput").value;
+    const country = document.querySelector("#countrySelect").value;
+    const countryCode = document.querySelector("#countryCodeSelect").value;
     let valid = true;
     evt.preventDefault();
     name === "" ? setEmptyName(true) : setEmptyName(false);
@@ -122,7 +122,9 @@ export const RegistrationFirstStep = (props) => {
         />
       </div>
       {emptyName && <label>Ingrese su nombre</label>}
-      {emptyLastName && <label>Ingrese sus apellidos</label>}
+      {emptyLastName && (
+        <label className="lastname">Ingrese sus apellidos</label>
+      )}
       <TagAndInput
         inputType={"text"}
         inputId={"emailInput"}

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

@@ -13,6 +13,9 @@ export const Container = styled.div`
         width: 160px;
       }
     }
+    .lastname {
+      margin-left: 69%;
+    }
     .input-name-header {
       margin-bottom: 4px;
       margin-top: 12px;

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

@@ -46,7 +46,7 @@ export const RegistrationSecondStep = (props) => {
       password !== confirmPassword
     ) {
       valid = false;
-    } 
+    }
     return valid;
   };
   const loginRight = [
@@ -90,11 +90,6 @@ export const RegistrationSecondStep = (props) => {
         text={"Todos los datos estan protegidos."}
         headerType={"date-header"}
       />
-      {!termsCheck && !!privacyCheck && (
-        <label>
-          Seleccione los terminos y condiciones y el Aviso de privacidad
-        </label>
-      )}
     </div>,
     <div className="button-end" key="8">
       <Button

package/src/components/molecules/SignInLoginCreationApp/SignInLogin.stories.js

@@ -0,0 +1,11 @@
+import { SignInLoginCreationApp } from "./index";
+
+export default {
+  title: "Components/molecules/SignInLoginCreationApp",
+  component: SignInLoginCreationApp,
+};
+
+const Template = (args) => <SignInLoginCreationApp {...args} />;
+
+export const SignInLoginCreationAppDefault = Template.bind({});
+SignInLoginCreationAppDefault.args = {};

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

@@ -0,0 +1,183 @@
+import { Container } from "./styles";
+import { LogoImage } from "../../atoms/LogoImage/index";
+import { ScreenHeader } from "../../atoms/ScreenHeader/index";
+import { Button } from "../../atoms/GeneralButton/index";
+import { CheckBox } from "../../atoms/CheckBox/index";
+import { TagAndInput } from "../TagAndInput";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+import { useState, useEffect } from "react";
+import { Loading } from "../../atoms/Loading";
+import { Redirect } from "react-router-dom";
+import axios from "axios";
+
+export const SignInLoginCreationApp = (props) => {
+  const [emptyEmail, setEmptyEmail] = useState(false);
+  const [invalidEmail, setInvalidEmail] = useState(false);
+  const [emptyPassword, setEmptyPassword] = useState(false);
+  const [showErrors, setShowErrors] = useState(true);
+  const [signInError, setSignInError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [upgradePlanRedirect, setUpgradePlanRedirect] = useState(false);
+  const validate = async (e) => {
+    setSignInError("");
+    setShowErrors(true);
+    e.preventDefault();
+    let valid = true;
+    const email = document.querySelector("#emailInput").value;
+    const password = document.querySelector("#passwordInput").value;
+    !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(
+      email
+    )
+      ? setInvalidEmail(true)
+      : setInvalidEmail(false);
+    if (email === "") {
+      valid = false;
+      setEmptyEmail(true);
+    } else {
+      setEmptyEmail(false);
+    }
+    if (password === "") {
+      valid = false;
+      setEmptyPassword(true);
+    } else {
+      setEmptyPassword(false);
+    }
+    if (valid) {
+      try {
+        setLoading(true);
+        const session = await props.Auth.signIn(email, password);
+        if (session.challengeName === "NEW_PASSWORD_REQUIRED") {
+          props.setUser(session);
+          props.setPaso(8);
+        } else {
+          const userGroup =
+            session.signInUserSession.accessToken.payload["cognito:groups"];
+          const response = await axios.get(
+            process.env.REACT_APP_USER_ENDPOINT,
+            {
+              headers: {
+                Authorization: session.signInUserSession.idToken.jwtToken,
+              },
+            }
+          );
+          const userGroupValue =
+            typeof userGroup === "string" ? userGroup : userGroup[0];
+          if (userGroupValue === "usuario_contentoh") {
+            sessionStorage.setItem("auth", true);
+            sessionStorage.setItem(
+              "jwt",
+              session.signInUserSession.idToken.jwtToken
+            );
+            const user = JSON.parse(response.data.body).data[0];
+            const company = JSON.parse(response.data.body).data[1];
+            caches.keys().then((names) => {
+              names.forEach((name) => {
+                caches.delete(name);
+              });
+            });
+            user.src = `https://${
+              process.env.REACT_APP_IMAGES_PROFILE_BUCKET
+            }.s3.amazonaws.com/id-${user.id_user}/${
+              user.id_user
+            }.png?${new Date().getTime()}`;
+            sessionStorage.setItem("user", JSON.stringify(user));
+            sessionStorage.setItem("company", JSON.stringify(company));
+            setUpgradePlanRedirect(true);
+          } else {
+            setSignInError("NotAuthorizedException");
+            setLoading(false);
+          }
+        }
+      } catch (error) {
+        console.log(error);
+        setLoading(false);
+        console.log("error 1");
+        if (error.code === "NotAuthorizedException") {
+          setSignInError("NotAuthorizedException");
+        } else if (error.code === "UserNotConfirmedException") {
+          sessionStorage.setItem(
+            "email",
+            JSON.stringify(
+              document.querySelector("#usernameInput").value.trim()
+            )
+          );
+          sessionStorage.setItem("email", JSON.stringify(email));
+          props.setPaso(5);
+        } else {
+          setSignInError("Error");
+          console.log("error 2");
+        }
+      }
+    }
+  };
+  useEffect(() => {
+    sessionStorage.getItem("resetPasswordProcess") &&
+      sessionStorage.removeItem("resetPasswordProcess");
+  }, []);
+  useEffect(() => {
+    if (upgradePlanRedirect) setLoading(false);
+  }, [upgradePlanRedirect]);
+  return loading ? (
+    <Loading />
+  ) : (
+    <>
+      <Container className={"home-login"}>
+        <div className="main-container">
+          <LogoImage />
+          <div className="credenciales">
+            <ScreenHeader
+              fontFamily={FontFamily.AvenirNext}
+              color={GlobalColors.s5}
+              text={"Ingresa tus credenciales"}
+            />
+          </div>
+          <div className="user">
+            <TagAndInput
+              inputType={"text"}
+              label={"Nombre de usuario"}
+              inputPlaceHolder={"username@contentoh.com"}
+              inputId={"emailInput"}
+            />
+          </div>
+          {showErrors && emptyEmail && <label>Ingrese su correo</label>}
+          {invalidEmail && !emptyEmail && (
+            <label>Ingrese un correo válido</label>
+          )}
+          <div className="password">
+            <TagAndInput
+              inputType={"password"}
+              label={"Contraseña"}
+              inputPlaceHolder={"Escribe tu contraseña"}
+              inputId={"passwordInput"}
+            />
+          </div>
+          {showErrors && emptyPassword && <label>Ingrese su contraseña</label>}
+          <div className="select">
+            <CheckBox
+              label={"Mantener sesión activada"}
+              id={"chk-default"}
+              className="active-left"
+            />
+            <p onClick={() => props.setPaso(10)} className="active-right">
+              Olvide mi contraseña
+            </p>
+          </div>
+          {showErrors && signInError === "NotAuthorizedException" && (
+            <label>Correo o contraseña incorrectos</label>
+          )}
+          {showErrors && signInError === "Error" && (
+            <label>Ha habido un problema al iniciar sesión</label>
+          )}
+          <div className="button-right">
+            <Button
+              buttonType={"general-default-button"}
+              label={"Iniciar sesión"}
+              onClick={(e) => validate(e)}
+            />
+          </div>
+        </div>
+      </Container>
+      {upgradePlanRedirect && <Redirect to={{ pathname: "/dashboard" }} />}
+    </>
+  );
+};

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

@@ -0,0 +1,79 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  background: "white";
+  display: flex;
+  height: 100vh;
+  width: 50%;
+  justify-content: center;
+  align-items: center;
+  label {
+    color: red;
+    margin-top: 3px;
+    margin-left: 15px;
+    font-family: ${FontFamily.Raleway_700};
+    font-size: 11px;
+    & + * {
+      margin-top: 12px;
+    }
+  }
+
+  &.home-login {
+    .credenciales {
+      & + * {
+        margin-top: 30px;
+      }
+    }
+    .user {
+      & + * {
+        margin-top: 20px;
+      }
+    }
+    .password {
+      & + * {
+        margin-top: 20px;
+      }
+    }
+    .select {
+      display: flex;
+      justify-content: space-between;
+      .active-right {
+        font-family: ${FontFamily.AvenirNext};
+        font-weight: 500;
+        font-size: 13px;
+        line-height: 24px;
+        letter-spacing: -0.015em;
+        color: ${GlobalColors.s5};
+        cursor: pointer;
+      }
+      & + * {
+        margin-top: 50px;
+      }
+    }
+    .button-right {
+      text-align: right;
+      & + * {
+        margin-top: 55px;
+      }
+    }
+    .new-login {
+      p {
+        font-family: ${FontFamily.AvenirNext};
+        text-align: right;
+        font-weight: 500;
+        font-size: 13px;
+        line-height: 24px;
+        color: ${GlobalColors.s5};
+        cursor: pointer;
+        span {
+          color: ${GlobalColors.secondary_magenta};
+        }
+      }
+    }
+  }
+  .main-container {
+    max-width: 80%;
+    max-height: 80%;
+  }
+`;

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

@@ -3,8 +3,10 @@ import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.div`
   display: flex;
-  height: 100%;
+  height: 100vh;
   width: 50%;
+  align-items: center;
+  justify-content: center;
   .button-center {
     text-align: center;
     .general-default-button {

package/src/components/organisms/ChangePassword/styles.js

@@ -6,8 +6,8 @@ export const Container = styled.div`
   height: 100vh;
   .button-center {
     position: absolute;
-    bottom: 10%;
-    left: 65%;
+    bottom: 13%;
+    left: 18%;
     .general-default-button {
       width: 160px;
     }

package/src/index.js

@@ -37,6 +37,7 @@ export * from "./components/molecules/RegistrationFirstStep/index";
 export * from "./components/molecules/RegistrationSecondStep/index";
 export * from "./components/molecules/RegistrationThirdStep/index";
 export * from "./components/molecules/SignInLogin/index";
+export * from "./components/molecules/SignInLoginCreationApp/index";
 export * from "./components/molecules/StatusAsignationInfo/index";
 export * from "./components/molecules/TableHeader/index";
 export * from "./components/molecules/TableRow/index";