contentoh-components-library 18.0.0 → 20.0.17

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

@@ -0,0 +1,218 @@
+"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 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__*/React.createElement(_LogoImage.LogoImage, {
+    key: "1"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "credenciales",
+    key: "2"
+  }, /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+    fontFamily: _variables.FontFamily.AvenirNext,
+    color: _variables.GlobalColors.s5,
+    text: "Ingresa tus credenciales"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "user",
+    key: "3"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "name-registration-user"
+  }, /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
+    inputType: "text",
+    inputId: "nameInput",
+    label: "Nombre",
+    inputPlaceHolder: "Nombre"
+  }), /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
+    inputType: "text",
+    inputId: "lastNameInput",
+    label: "Apellido",
+    inputPlaceHolder: "Apellido"
+  })), emptyName && /*#__PURE__*/React.createElement("label", null, "Ingrese su nombre"), emptyLastName && /*#__PURE__*/React.createElement("label", null, "Ingrese sus apellidos"), /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
+    inputType: "text",
+    inputId: "emailInput",
+    label: "Correo electrónico",
+    inputPlaceHolder: "username@contentoh.com"
+  }), emptyEmail && /*#__PURE__*/React.createElement("label", null, "Ingrese su correo"), invalidEmail && !emptyEmail && /*#__PURE__*/React.createElement("label", null, "Ingrese un correo v\xE1lido"), /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
+    inputType: "text",
+    inputId: "jobInput",
+    label: "Puesto laboral",
+    inputPlaceHolder: "Puesto dentro de la empresa"
+  }), emptyJob && /*#__PURE__*/React.createElement("label", null, "Ingrese su puesto"), /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+    text: "Teléfono",
+    headerType: "input-name-header"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "phone-registration-user"
+  }, /*#__PURE__*/React.createElement("select", {
+    name: "select",
+    className: "phone-options"
+  }, /*#__PURE__*/React.createElement("option", null, "+52"), /*#__PURE__*/React.createElement("option", null, "+54"), /*#__PURE__*/React.createElement("option", null, "+57"), /*#__PURE__*/React.createElement("option", null, "+506"), /*#__PURE__*/React.createElement("option", null, "+593"), /*#__PURE__*/React.createElement("option", null, "+503"), /*#__PURE__*/React.createElement("option", null, "+504"), /*#__PURE__*/React.createElement("option", null, "+507"), /*#__PURE__*/React.createElement("option", null, "+51")), /*#__PURE__*/React.createElement(_GeneralInput.GeneralInput, {
+    inputId: "phoneInput",
+    inputType: "text",
+    inputPlaceholder: "Teléfono"
+  })), emptyPhone && /*#__PURE__*/React.createElement("label", null, "Ingrese su n\xFAmero de tel\xE9fono"), /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+    text: "País",
+    headerType: "input-name-header"
+  }), /*#__PURE__*/React.createElement("select", {
+    name: "select",
+    className: "country-options"
+  }, /*#__PURE__*/React.createElement("option", {
+    value: "value1",
+    selected: true
+  }, "Selecciona tu pa\xEDs"), /*#__PURE__*/React.createElement("option", {
+    value: "value2"
+  }, "Argentina"), /*#__PURE__*/React.createElement("option", {
+    value: "value3"
+  }, "Colombia"), /*#__PURE__*/React.createElement("option", {
+    value: "value2"
+  }, "Ecuador"), /*#__PURE__*/React.createElement("option", {
+    value: "value3"
+  }, "El Salvador"), /*#__PURE__*/React.createElement("option", {
+    value: "value2"
+  }, "Honduras"), /*#__PURE__*/React.createElement("option", {
+    value: "value3"
+  }, "M\xE9xico"), /*#__PURE__*/React.createElement("option", {
+    value: "value2"
+  }, "Panam\xE1"), /*#__PURE__*/React.createElement("option", {
+    value: "value3"
+  }, "Per\xFA")), emptyEmail && /*#__PURE__*/React.createElement("label", null, "Seleccione su pa\xEDs")), /*#__PURE__*/React.createElement("div", {
+    className: "button-end",
+    key: "4"
+  }, /*#__PURE__*/React.createElement(_GeneralButton.Button, {
+    buttonType: "general-default-button",
+    label: "Enviar",
+    onClick: function onClick(e) {
+      return validate(e);
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "progress-bar",
+    key: "5"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "progress-bar-first-step"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "progress-bar-registration"
+  })), /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+    text: "Paso 1",
+    headerType: "date-header",
+    color: _variables.GlobalColors.s4,
+    key: "6"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "new-login",
+    key: "7"
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "pre-registro"
+  }, "\xBFYa tienes una cuenta?", /*#__PURE__*/React.createElement("span", null, " Inicia Sesi\xF3n")))];
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("div", {
+    className: "home-retailer"
+  }, /*#__PURE__*/React.createElement(_CarouselImagesLogin.CarouselImagesLogin, {
+    panelImg: imageArrayCarousel,
+    panelText: textCarousel,
+    panelColor: backogroundColorCarousel
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "home-login-retailer"
+  }, /*#__PURE__*/React.createElement(_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/components/pages/RegistrationLoginSecondStep/RegistrationLoginSecondStep.stories.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RegistrationLoginSecondStepDefault = void 0;
+
+var _index = require("./index");
+
+var _loginImage = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/loginImage.svg"));
+
+var _login = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/login2.svg"));
+
+var _login2 = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/login3.svg"));
+
+var _default = {
+  title: "Components/pages/RegistrationLoginSecondStep",
+  component: _index.RegistrationLoginSecondStep
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.RegistrationLoginSecondStep, args);
+};
+
+var RegistrationLoginSecondStepDefault = Template.bind({});
+exports.RegistrationLoginSecondStepDefault = RegistrationLoginSecondStepDefault;
+RegistrationLoginSecondStepDefault.args = {
+  imageArrayCarousel: [_loginImage.default, _login.default, _login2.default],
+  textCarousel: "Elige la plataforma que conecta proovedores y retailers",
+  textHeaderRight: "Ingresa tus credenciales"
+};

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

@@ -0,0 +1,165 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RegistrationLoginSecondStep = 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 _ScreenHeader = require("../../atoms/ScreenHeader");
+
+var _variables = require("../../../global-files/variables");
+
+var _GeneralButton = require("../../atoms/GeneralButton");
+
+var _CheckBox = require("../../atoms/CheckBox");
+
+var _LoginPasswordStrength = require("../../molecules/LoginPasswordStrength");
+
+var _LogoImage = require("../../atoms/LogoImage");
+
+var RegistrationLoginSecondStep = function RegistrationLoginSecondStep(_ref) {
+  var _ref$imageArrayCarous = _ref.imageArrayCarousel,
+      imageArrayCarousel = _ref$imageArrayCarous === void 0 ? [] : _ref$imageArrayCarous,
+      textCarousel = _ref.textCarousel,
+      backogroundColorCarousel = _ref.backogroundColorCarousel,
+      textHeaderRight = _ref.textHeaderRight;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      emptyPassword = _useState2[0],
+      setEmptyPassword = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      emptyConfirmPassword = _useState4[0],
+      setEmptyConfirmPassword = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(true),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      matchPasswords = _useState6[0],
+      setMatchPasswords = _useState6[1];
+
+  var validate = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
+      var password, confirmPassword;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              e.preventDefault();
+              password = document.querySelector("#newPasswordInput").value;
+              password.length < 8 ? setEmptyPassword(true) : setEmptyPassword(false);
+              confirmPassword = document.querySelector("#confirmPasswordInput").value;
+              confirmPassword === "" ? setEmptyConfirmPassword(true) : setEmptyConfirmPassword(false);
+
+              if (password === confirmPassword) {
+                setMatchPasswords(true);
+              } else {
+                setMatchPasswords(false);
+              }
+
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function validate(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var loginRight = [/*#__PURE__*/React.createElement(_LogoImage.LogoImage, {
+    key: "1"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "credenciales",
+    key: "2"
+  }, /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+    fontFamily: _variables.FontFamily.AvenirNext,
+    color: _variables.GlobalColors.s5,
+    text: textHeaderRight
+  })), /*#__PURE__*/React.createElement(_LoginPasswordStrength.LoginPasswordStrength, {
+    key: "3",
+    emptyPassword: emptyPassword,
+    emptyConfirmPassword: emptyConfirmPassword,
+    matchPasswords: matchPasswords,
+    textTittle: textHeaderRight
+  }), /*#__PURE__*/React.createElement("label", {
+    className: "label-terms"
+  }, "T\xE9rminos y condiciones"), /*#__PURE__*/React.createElement("div", {
+    className: "checkbox-terms"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "checkbox"
+  }), /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+    text: "Conoce nuestros termnios y condiciones de cada uno de nuestros servicios. Si tienes algunda duda o comentario escríbenos.",
+    headerType: "date-header"
+  })), /*#__PURE__*/React.createElement("label", {
+    className: "label-terms"
+  }, "Aviso de privacidad"), /*#__PURE__*/React.createElement("div", {
+    className: "checkbox-terms"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "checkbox"
+  }), /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+    text: "Todos los datos estan protegidos.",
+    headerType: "date-header"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "button-end",
+    key: "6"
+  }, /*#__PURE__*/React.createElement(_GeneralButton.Button, {
+    buttonType: "general-default-button",
+    label: "Enviar",
+    onClick: function onClick(e) {
+      return validate(e);
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "progress-bar"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "progress-bar-first-step-check"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "progress-bar-second-step"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "progress-bar-registration"
+  })), /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+    text: "Paso 2",
+    headerType: "date-header",
+    color: _variables.GlobalColors.s4
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "new-login",
+    key: "7"
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "pre-registro"
+  }, "\xBFA\xFAn no tienes cuenta?", /*#__PURE__*/React.createElement("span", null, " Reg\xEDstrate")))];
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("div", {
+    className: "home-retailer"
+  }, /*#__PURE__*/React.createElement(_CarouselImagesLogin.CarouselImagesLogin, {
+    panelImg: imageArrayCarousel,
+    panelText: textCarousel,
+    panelColor: backogroundColorCarousel
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "home-login-retailer"
+  }, /*#__PURE__*/React.createElement(_GradientPanel.GradientPanel, {
+    panelColor: _variables.GlobalColors.white,
+    componentsArray: loginRight,
+    panelType: "home-login"
+  })));
+};
+
+exports.RegistrationLoginSecondStep = RegistrationLoginSecondStep;

package/dist/components/pages/RegistrationLoginSecondStep/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  .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-check {\n      width: 33.33%;\n      background-color: ", ";\n    }\n    .progress-bar-second-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: 33.33%;\n    }\n  }\n  .date-header {\n    margin-left: 33.33%;\n  }\n  .home-login-retailer,\n  .home-retailer {\n    width: 50%;\n  }\n  .checkbox-terms {\n    display: flex;\n    margin-bottom: 5px;\n    input {\n      cursor: pointer;\n      & + * {\n        margin-left: 15px;\n      }\n    }\n  }\n  .label-terms {\n    //color: ", ";\n    color: rgb(129, 115, 147);\n    font-size: 13px;\n    line-height: 24px;\n    font-weight: 700;\n    cursor: pointer;\n    margin-left: 25px;\n    & + * {\n      margin-top: 5px;\n    }\n  }\n"])), _variables.GlobalColors.exported, _variables.GlobalColors.original_purpura);
+
+exports.Container = Container;

package/dist/components/pages/RegistrationLoginThirdStep/RegistrationLoginThirdStep.stories.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RegistrationLoginThirdStepDefault = void 0;
+
+var _index = require("./index");
+
+var _loginImage = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/loginImage.svg"));
+
+var _login = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/login2.svg"));
+
+var _login2 = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/login3.svg"));
+
+var _default = {
+  title: "Components/pages/RegistrationLoginThirdStep",
+  component: _index.RegistrationLoginThirdStep
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(_index.RegistrationLoginThirdStep, args);
+};
+
+var RegistrationLoginThirdStepDefault = Template.bind({});
+exports.RegistrationLoginThirdStepDefault = RegistrationLoginThirdStepDefault;
+RegistrationLoginThirdStepDefault.args = {
+  imageArrayCarousel: [_loginImage.default, _login.default, _login2.default],
+  textCarousel: "Elige la plataforma que conecta proovedores y retailers"
+};

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

@@ -0,0 +1,164 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RegistrationLoginThirdStep = 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 RegistrationLoginThirdStep = function RegistrationLoginThirdStep(_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),
+      emptyCommercialName = _useState2[0],
+      setEmptyCommercialName = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      emptyBussinesName = _useState4[0],
+      setEmptyBussinesName = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      emptyRFC = _useState6[0],
+      setEmptyRFC = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      emptyFiscalAddress = _useState8[0],
+      setEmptyFiscalAddress = _useState8[1];
+
+  var validate = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
+      var commercialName, bussinesName, RFC, FiscalAddress;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              e.preventDefault();
+              commercialName = document.querySelector("#commercialNameInput").value;
+              bussinesName = document.querySelector("#bussinesNameInput").value;
+              RFC = document.querySelector("#rfcInput").value;
+              FiscalAddress = document.querySelector("#fiscalAddressInput").value;
+              commercialName === "" ? setEmptyCommercialName(true) : setEmptyCommercialName(false);
+              bussinesName === "" ? setEmptyBussinesName(true) : setEmptyBussinesName(false);
+              RFC === "" ? setEmptyRFC(true) : setEmptyRFC(false);
+              FiscalAddress === "" ? setEmptyFiscalAddress(true) : setEmptyFiscalAddress(false);
+
+            case 9:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function validate(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var loginRight = [/*#__PURE__*/React.createElement(_LogoImage.LogoImage, {
+    key: "1"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "credenciales",
+    key: "2"
+  }, /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+    fontFamily: _variables.FontFamily.AvenirNext,
+    color: _variables.GlobalColors.s5,
+    text: "Ingresa tus credenciales"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "user",
+    key: "3"
+  }, /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
+    inputType: "text",
+    inputId: "commercialNameInput",
+    label: "Nombre comercial",
+    inputPlaceHolder: "Nombre comercial"
+  }), emptyCommercialName && /*#__PURE__*/React.createElement("label", null, "Ingrese el nombre comercial de la empresa"), /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
+    inputType: "text",
+    inputId: "bussinesNameInput",
+    label: "Razón social",
+    inputPlaceHolder: "Razón social"
+  }), emptyBussinesName && /*#__PURE__*/React.createElement("label", null, "Ingrese la raz\xF3n social de la empresa"), /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
+    inputType: "text",
+    inputId: "rfcInput",
+    label: "RFC",
+    inputPlaceHolder: "RFC"
+  }), emptyRFC && /*#__PURE__*/React.createElement("label", null, "El RFC es requerido"), /*#__PURE__*/React.createElement(_TagAndInput.TagAndInput, {
+    inputType: "text",
+    inputId: "fiscalAddressInput",
+    label: "Direccion fiscal",
+    inputPlaceHolder: "Dirección fiscal"
+  }), emptyFiscalAddress && /*#__PURE__*/React.createElement("label", null, "Ingrese la direccion fiscal de la empresa")), /*#__PURE__*/React.createElement("div", {
+    className: "button-end",
+    key: "4"
+  }, /*#__PURE__*/React.createElement(_GeneralButton.Button, {
+    buttonType: "general-default-button",
+    label: "Enviar",
+    onClick: function onClick(e) {
+      return validate(e);
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "progress-bar",
+    key: "5"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "progress-bar-step-check"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "progress-bar-registration"
+  })), /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
+    text: "Paso 3",
+    headerType: "date-header",
+    color: _variables.GlobalColors.s4,
+    key: "6"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "new-login",
+    key: "7"
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "pre-registro"
+  }, "\xBFYa tienes una cuenta?", /*#__PURE__*/React.createElement("span", null, " Inicia Sesi\xF3n")))];
+  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement("div", {
+    className: "home-retailer"
+  }, /*#__PURE__*/React.createElement(_CarouselImagesLogin.CarouselImagesLogin, {
+    panelImg: imageArrayCarousel,
+    panelText: textCarousel,
+    panelColor: backogroundColorCarousel
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "home-login-retailer"
+  }, /*#__PURE__*/React.createElement(_GradientPanel.GradientPanel, {
+    componentsArray: loginRight,
+    panelType: "home-login",
+    panelColor: _variables.GlobalColors.white
+  })));
+};
+
+exports.RegistrationLoginThirdStep = RegistrationLoginThirdStep;