contentoh-components-library 21.0.4 → 21.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (86) hide show
  1. package/dist/components/atoms/CharCounter/CharCounter.stories.js +31 -0
  2. package/dist/components/atoms/CharCounter/index.js +22 -0
  3. package/dist/components/atoms/CharCounter/styles.js +20 -0
  4. package/dist/components/atoms/GeneralInput/index.js +78 -49
  5. package/dist/components/atoms/GeneralInput/styles.js +4 -1
  6. package/dist/components/atoms/GradientPanel/styles.js +2 -2
  7. package/dist/components/atoms/InputFormatter/index.js +132 -66
  8. package/dist/components/atoms/InputFormatter/styles.js +2 -2
  9. package/dist/components/atoms/ProgressBar/styles.js +1 -1
  10. package/dist/components/atoms/Select/index.js +4 -2
  11. package/dist/components/atoms/Select/style.js +1 -1
  12. package/dist/components/atoms/StatusTag/styles.js +1 -1
  13. package/dist/components/molecules/CarouselImagesLogin/CarouselImagesLogin.stories.js +37 -0
  14. package/dist/components/molecules/CarouselImagesLogin/index.js +94 -0
  15. package/dist/components/molecules/CarouselImagesLogin/styles.js +21 -0
  16. package/dist/components/molecules/LoginPasswordStrength/LoginPasswordStrength.stories.js +28 -0
  17. package/dist/components/molecules/LoginPasswordStrength/index.js +131 -0
  18. package/dist/components/molecules/LoginPasswordStrength/styles.js +78 -0
  19. package/dist/components/molecules/TagAndInput/index.js +4 -2
  20. package/dist/components/organisms/InputGroup/index.js +13 -11
  21. package/dist/components/pages/ChangePasswordLogin/ChangePasswordLogin.stories.js +38 -0
  22. package/dist/components/pages/ChangePasswordLogin/index.js +131 -0
  23. package/dist/components/pages/ChangePasswordLogin/styles.js +18 -0
  24. package/dist/components/pages/EmailResetPassword/EmailResetPassword.stories.js +37 -0
  25. package/dist/components/pages/EmailResetPassword/index.js +130 -0
  26. package/dist/components/pages/EmailResetPassword/styles.js +20 -0
  27. package/dist/components/pages/RegistrationLoginFirstStep/RegistrationLoginFirstStep.stories.js +37 -0
  28. package/dist/components/pages/RegistrationLoginFirstStep/index.js +269 -0
  29. package/dist/components/pages/RegistrationLoginFirstStep/styles.js +20 -0
  30. package/dist/components/pages/RegistrationLoginSecondStep/RegistrationLoginSecondStep.stories.js +38 -0
  31. package/dist/components/pages/RegistrationLoginSecondStep/index.js +176 -0
  32. package/dist/components/pages/RegistrationLoginSecondStep/styles.js +20 -0
  33. package/dist/components/pages/RegistrationLoginThirdStep/RegistrationLoginThirdStep.stories.js +37 -0
  34. package/dist/components/pages/RegistrationLoginThirdStep/index.js +178 -0
  35. package/dist/components/pages/RegistrationLoginThirdStep/styles.js +20 -0
  36. package/dist/components/pages/RetailerProductEdition/RetailerProductEdition.stories.js +18 -28
  37. package/dist/components/pages/RetailerProductEdition/index.js +105 -66
  38. package/dist/components/pages/VerificationCodeResetPassword/VerificationCodeResetPassword.stories.js +37 -0
  39. package/dist/components/pages/VerificationCodeResetPassword/index.js +121 -0
  40. package/dist/components/pages/VerificationCodeResetPassword/styles.js +20 -0
  41. package/dist/components/pages/VerificationCodeResetPassword/utils.js +69 -0
  42. package/package.json +2 -2
  43. package/src/assets/images/carouselImagesLogin/login2.svg +117 -0
  44. package/src/assets/images/carouselImagesLogin/login3.svg +147 -0
  45. package/src/assets/images/carouselImagesLogin/loginImage.svg +301 -0
  46. package/src/components/atoms/CharCounter/CharCounter.stories.js +11 -0
  47. package/src/components/atoms/CharCounter/index.js +13 -0
  48. package/src/components/atoms/CharCounter/styles.js +10 -0
  49. package/src/components/atoms/GeneralInput/index.js +74 -50
  50. package/src/components/atoms/GeneralInput/styles.js +9 -0
  51. package/src/components/atoms/GradientPanel/styles.js +7 -1
  52. package/src/components/atoms/InputFormatter/index.js +109 -46
  53. package/src/components/atoms/InputFormatter/styles.js +6 -0
  54. package/src/components/atoms/ProgressBar/styles.js +2 -1
  55. package/src/components/atoms/Select/index.js +3 -1
  56. package/src/components/atoms/Select/style.js +1 -2
  57. package/src/components/atoms/StatusTag/styles.js +2 -1
  58. package/src/components/molecules/CarouselImagesLogin/CarouselImagesLogin.stories.js +17 -0
  59. package/src/components/molecules/CarouselImagesLogin/index.js +68 -0
  60. package/src/components/molecules/CarouselImagesLogin/styles.js +60 -0
  61. package/src/components/molecules/LoginPasswordStrength/LoginPasswordStrength.stories.js +8 -0
  62. package/src/components/molecules/LoginPasswordStrength/index.js +89 -0
  63. package/src/components/molecules/LoginPasswordStrength/styles.js +87 -0
  64. package/src/components/molecules/TagAndInput/index.js +2 -0
  65. package/src/components/organisms/InputGroup/index.js +25 -8
  66. package/src/components/pages/ChangePasswordLogin/ChangePasswordLogin.stories.js +18 -0
  67. package/src/components/pages/ChangePasswordLogin/index.js +78 -0
  68. package/src/components/pages/ChangePasswordLogin/styles.js +20 -0
  69. package/src/components/pages/EmailResetPassword/EmailResetPassword.stories.js +17 -0
  70. package/src/components/pages/EmailResetPassword/index.js +77 -0
  71. package/src/components/pages/EmailResetPassword/styles.js +27 -0
  72. package/src/components/pages/RegistrationLoginFirstStep/RegistrationLoginFirstStep.stories.js +17 -0
  73. package/src/components/pages/RegistrationLoginFirstStep/index.js +160 -0
  74. package/src/components/pages/RegistrationLoginFirstStep/styles.js +85 -0
  75. package/src/components/pages/RegistrationLoginSecondStep/RegistrationLoginSecondStep.stories.js +18 -0
  76. package/src/components/pages/RegistrationLoginSecondStep/index.js +111 -0
  77. package/src/components/pages/RegistrationLoginSecondStep/styles.js +64 -0
  78. package/src/components/pages/RegistrationLoginThirdStep/RegistrationLoginThirdStep.stories.js +17 -0
  79. package/src/components/pages/RegistrationLoginThirdStep/index.js +106 -0
  80. package/src/components/pages/RegistrationLoginThirdStep/styles.js +48 -0
  81. package/src/components/pages/RetailerProductEdition/RetailerProductEdition.stories.js +18 -29
  82. package/src/components/pages/RetailerProductEdition/index.js +84 -22
  83. package/src/components/pages/VerificationCodeResetPassword/VerificationCodeResetPassword.stories.js +17 -0
  84. package/src/components/pages/VerificationCodeResetPassword/index.js +92 -0
  85. package/src/components/pages/VerificationCodeResetPassword/styles.js +54 -0
  86. package/src/components/pages/VerificationCodeResetPassword/utils.js +56 -0
@@ -0,0 +1,130 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.EmailResetPassword = void 0;
9
+
10
+ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
11
+
12
+ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
13
+
14
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
15
+
16
+ var _styles = require("./styles");
17
+
18
+ var _GradientPanel = require("../../atoms/GradientPanel");
19
+
20
+ var _CarouselImagesLogin = require("../../molecules/CarouselImagesLogin");
21
+
22
+ var _react = require("react");
23
+
24
+ var _LogoImage = require("../../atoms/LogoImage");
25
+
26
+ var _ScreenHeader = require("../../atoms/ScreenHeader");
27
+
28
+ var _variables = require("../../../global-files/variables");
29
+
30
+ var _TagAndInput = require("../../molecules/TagAndInput");
31
+
32
+ var _GeneralButton = require("../../atoms/GeneralButton");
33
+
34
+ var _jsxRuntime = require("react/jsx-runtime");
35
+
36
+ var EmailResetPassword = function EmailResetPassword(_ref) {
37
+ var _ref$imageArrayCarous = _ref.imageArrayCarousel,
38
+ imageArrayCarousel = _ref$imageArrayCarous === void 0 ? [] : _ref$imageArrayCarous,
39
+ textCarousel = _ref.textCarousel,
40
+ backogroundColorCarousel = _ref.backogroundColorCarousel;
41
+
42
+ var _useState = (0, _react.useState)(false),
43
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
44
+ emptyEmail = _useState2[0],
45
+ setEmptyEmail = _useState2[1];
46
+
47
+ var _useState3 = (0, _react.useState)(false),
48
+ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
49
+ invalidEmail = _useState4[0],
50
+ setInvalidEmail = _useState4[1];
51
+
52
+ var validate = /*#__PURE__*/function () {
53
+ var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
54
+ var email;
55
+ return _regenerator.default.wrap(function _callee$(_context) {
56
+ while (1) {
57
+ switch (_context.prev = _context.next) {
58
+ case 0:
59
+ e.preventDefault();
60
+ email = document.querySelector("#emailInput").value;
61
+ email === "" ? setEmptyEmail(true) : setEmptyEmail(false);
62
+ !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(email) ? setInvalidEmail(true) : setInvalidEmail(false);
63
+
64
+ case 4:
65
+ case "end":
66
+ return _context.stop();
67
+ }
68
+ }
69
+ }, _callee);
70
+ }));
71
+
72
+ return function validate(_x) {
73
+ return _ref2.apply(this, arguments);
74
+ };
75
+ }();
76
+
77
+ var loginRight = [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LogoImage.LogoImage, {}, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
78
+ className: "credenciales",
79
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
80
+ fontFamily: _variables.FontFamily.AvenirNext,
81
+ color: _variables.GlobalColors.s5,
82
+ text: "Ingresa tus credenciales"
83
+ })
84
+ }, "2"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
85
+ className: "user",
86
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
87
+ inputType: "text",
88
+ inputId: "emailInput",
89
+ label: "Nombre de usuario",
90
+ inputPlaceHolder: "username@contentoh.com"
91
+ }), emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
92
+ children: "Ingrese su correo"
93
+ }), invalidEmail && !emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
94
+ children: "Ingrese un correo v\xE1lido"
95
+ })]
96
+ }, "3"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
97
+ className: "button-center",
98
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
99
+ buttonType: "general-default-button",
100
+ label: "Enviar",
101
+ onClick: function onClick(e) {
102
+ return validate(e);
103
+ }
104
+ })
105
+ }, "4"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
106
+ className: "back-login",
107
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
108
+ children: "Regresar..."
109
+ })
110
+ }, "5")];
111
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
112
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
113
+ className: "home-retailer",
114
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselImagesLogin.CarouselImagesLogin, {
115
+ panelImg: imageArrayCarousel,
116
+ panelText: textCarousel,
117
+ panelColor: backogroundColorCarousel
118
+ })
119
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
120
+ className: "home-login-retailer",
121
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GradientPanel.GradientPanel, {
122
+ componentsArray: loginRight,
123
+ panelType: "home-login",
124
+ panelColor: _variables.GlobalColors.white
125
+ })
126
+ })]
127
+ });
128
+ };
129
+
130
+ exports.EmailResetPassword = EmailResetPassword;
@@ -0,0 +1,20 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.Container = void 0;
9
+
10
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
11
+
12
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
13
+
14
+ var _variables = require("../../../global-files/variables");
15
+
16
+ var _templateObject;
17
+
18
+ var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n width: 100%;\n height: 100vh;\n .home-login-retailer,\n .home-retailer {\n width: 50%;\n .button-center {\n text-align: center;\n .general-default-button {\n width: 160px;\n }\n }\n .back-login {\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 }\n"])), _variables.GlobalColors.secondary_magenta, _variables.FontFamily.Raleway);
19
+
20
+ exports.Container = Container;
@@ -0,0 +1,37 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = exports.RegistrationLoginFirstStepDefault = void 0;
9
+
10
+ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
11
+
12
+ var _index = require("./index");
13
+
14
+ var _loginImage = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/loginImage.svg"));
15
+
16
+ var _login = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/login2.svg"));
17
+
18
+ var _login2 = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/login3.svg"));
19
+
20
+ var _jsxRuntime = require("react/jsx-runtime");
21
+
22
+ var _default = {
23
+ title: "Components/pages/RegistrationLoginFirstStep",
24
+ component: _index.RegistrationLoginFirstStep
25
+ };
26
+ exports.default = _default;
27
+
28
+ var Template = function Template(args) {
29
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.RegistrationLoginFirstStep, (0, _objectSpread2.default)({}, args));
30
+ };
31
+
32
+ var RegistrationLoginFirstStepDefault = Template.bind({});
33
+ exports.RegistrationLoginFirstStepDefault = RegistrationLoginFirstStepDefault;
34
+ RegistrationLoginFirstStepDefault.args = {
35
+ imageArrayCarousel: [_loginImage.default, _login.default, _login2.default],
36
+ textCarousel: "Elige la plataforma que conecta proovedores y retailers"
37
+ };
@@ -0,0 +1,269 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.RegistrationLoginFirstStep = void 0;
9
+
10
+ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
11
+
12
+ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
13
+
14
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
15
+
16
+ var _styles = require("./styles");
17
+
18
+ var _GradientPanel = require("../../atoms/GradientPanel");
19
+
20
+ var _CarouselImagesLogin = require("../../molecules/CarouselImagesLogin");
21
+
22
+ var _react = require("react");
23
+
24
+ var _LogoImage = require("../../atoms/LogoImage");
25
+
26
+ var _ScreenHeader = require("../../atoms/ScreenHeader");
27
+
28
+ var _variables = require("../../../global-files/variables");
29
+
30
+ var _TagAndInput = require("../../molecules/TagAndInput");
31
+
32
+ var _GeneralButton = require("../../atoms/GeneralButton");
33
+
34
+ var _GeneralInput = require("../../atoms/GeneralInput");
35
+
36
+ var _jsxRuntime = require("react/jsx-runtime");
37
+
38
+ var RegistrationLoginFirstStep = function RegistrationLoginFirstStep(_ref) {
39
+ var _ref$imageArrayCarous = _ref.imageArrayCarousel,
40
+ imageArrayCarousel = _ref$imageArrayCarous === void 0 ? [] : _ref$imageArrayCarous,
41
+ textCarousel = _ref.textCarousel,
42
+ backogroundColorCarousel = _ref.backogroundColorCarousel;
43
+
44
+ var _useState = (0, _react.useState)(false),
45
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
46
+ emptyName = _useState2[0],
47
+ setEmptyName = _useState2[1];
48
+
49
+ var _useState3 = (0, _react.useState)(false),
50
+ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
51
+ emptyLastName = _useState4[0],
52
+ setEmptyLastName = _useState4[1];
53
+
54
+ var _useState5 = (0, _react.useState)(false),
55
+ _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
56
+ emptyEmail = _useState6[0],
57
+ setEmptyEmail = _useState6[1];
58
+
59
+ var _useState7 = (0, _react.useState)(false),
60
+ _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
61
+ emptyJob = _useState8[0],
62
+ setEmptyJob = _useState8[1];
63
+
64
+ var _useState9 = (0, _react.useState)(false),
65
+ _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
66
+ emptyPhone = _useState10[0],
67
+ setEmptyPhone = _useState10[1];
68
+
69
+ var _useState11 = (0, _react.useState)(false),
70
+ _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
71
+ invalidEmail = _useState12[0],
72
+ setInvalidEmail = _useState12[1];
73
+
74
+ var validate = /*#__PURE__*/function () {
75
+ var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
76
+ var name, lastName, email, job, phone;
77
+ return _regenerator.default.wrap(function _callee$(_context) {
78
+ while (1) {
79
+ switch (_context.prev = _context.next) {
80
+ case 0:
81
+ e.preventDefault();
82
+ name = document.querySelector("#nameInput").value;
83
+ lastName = document.querySelector("#lastNameInput").value;
84
+ email = document.querySelector("#emailInput").value;
85
+ job = document.querySelector("#jobInput").value;
86
+ phone = document.querySelector("#phoneInput").value;
87
+ name === "" ? setEmptyName(true) : setEmptyName(false);
88
+ lastName === "" ? setEmptyLastName(true) : setEmptyLastName(false);
89
+ email === "" ? setEmptyEmail(true) : setEmptyEmail(false);
90
+ job === "" ? setEmptyJob(true) : setEmptyJob(false);
91
+ phone === "" ? setEmptyPhone(true) : setEmptyPhone(false);
92
+ !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(email) ? setInvalidEmail(true) : setInvalidEmail(false);
93
+
94
+ case 12:
95
+ case "end":
96
+ return _context.stop();
97
+ }
98
+ }
99
+ }, _callee);
100
+ }));
101
+
102
+ return function validate(_x) {
103
+ return _ref2.apply(this, arguments);
104
+ };
105
+ }();
106
+
107
+ var loginRight = [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LogoImage.LogoImage, {}, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
108
+ className: "credenciales",
109
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
110
+ fontFamily: _variables.FontFamily.AvenirNext,
111
+ color: _variables.GlobalColors.s5,
112
+ text: "Ingresa tus credenciales"
113
+ })
114
+ }, "2"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
115
+ className: "user",
116
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
117
+ className: "name-registration-user",
118
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
119
+ inputType: "text",
120
+ inputId: "nameInput",
121
+ label: "Nombre",
122
+ inputPlaceHolder: "Nombre"
123
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
124
+ inputType: "text",
125
+ inputId: "lastNameInput",
126
+ label: "Apellido",
127
+ inputPlaceHolder: "Apellido"
128
+ })]
129
+ }), emptyName && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
130
+ children: "Ingrese su nombre"
131
+ }), emptyLastName && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
132
+ children: "Ingrese sus apellidos"
133
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
134
+ inputType: "text",
135
+ inputId: "emailInput",
136
+ label: "Correo electrónico",
137
+ inputPlaceHolder: "username@contentoh.com"
138
+ }), emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
139
+ children: "Ingrese su correo"
140
+ }), invalidEmail && !emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
141
+ children: "Ingrese un correo v\xE1lido"
142
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
143
+ inputType: "text",
144
+ inputId: "jobInput",
145
+ label: "Puesto laboral",
146
+ inputPlaceHolder: "Puesto dentro de la empresa"
147
+ }), emptyJob && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
148
+ children: "Ingrese su puesto"
149
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
150
+ text: "Teléfono",
151
+ headerType: "input-name-header"
152
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
153
+ className: "phone-registration-user",
154
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
155
+ name: "select",
156
+ className: "phone-options",
157
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
158
+ children: "+52"
159
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
160
+ children: "+54"
161
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
162
+ children: "+57"
163
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
164
+ children: "+506"
165
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
166
+ children: "+593"
167
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
168
+ children: "+503"
169
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
170
+ children: "+504"
171
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
172
+ children: "+507"
173
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
174
+ children: "+51"
175
+ })]
176
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralInput.GeneralInput, {
177
+ inputId: "phoneInput",
178
+ inputType: "text",
179
+ inputPlaceholder: "Teléfono"
180
+ })]
181
+ }), emptyPhone && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
182
+ children: "Ingrese su n\xFAmero de tel\xE9fono"
183
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
184
+ text: "País",
185
+ headerType: "input-name-header"
186
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
187
+ name: "select",
188
+ className: "country-options",
189
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
190
+ value: "value1",
191
+ selected: true,
192
+ children: "Selecciona tu pa\xEDs"
193
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
194
+ value: "value2",
195
+ children: "Argentina"
196
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
197
+ value: "value3",
198
+ children: "Colombia"
199
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
200
+ value: "value2",
201
+ children: "Ecuador"
202
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
203
+ value: "value3",
204
+ children: "El Salvador"
205
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
206
+ value: "value2",
207
+ children: "Honduras"
208
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
209
+ value: "value3",
210
+ children: "M\xE9xico"
211
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
212
+ value: "value2",
213
+ children: "Panam\xE1"
214
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
215
+ value: "value3",
216
+ children: "Per\xFA"
217
+ })]
218
+ }), emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
219
+ children: "Seleccione su pa\xEDs"
220
+ })]
221
+ }, "3"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
222
+ className: "button-end",
223
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
224
+ buttonType: "general-default-button",
225
+ label: "Enviar",
226
+ onClick: function onClick(e) {
227
+ return validate(e);
228
+ }
229
+ })
230
+ }, "4"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
231
+ className: "progress-bar",
232
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
233
+ className: "progress-bar-first-step"
234
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
235
+ className: "progress-bar-registration"
236
+ })]
237
+ }, "5"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
238
+ text: "Paso 1",
239
+ headerType: "date-header",
240
+ color: _variables.GlobalColors.s4
241
+ }, "6"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
242
+ className: "new-login",
243
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
244
+ className: "pre-registro",
245
+ children: ["\xBFYa tienes una cuenta?", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
246
+ children: " Inicia Sesi\xF3n"
247
+ })]
248
+ })
249
+ }, "7")];
250
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
251
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
252
+ className: "home-retailer",
253
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselImagesLogin.CarouselImagesLogin, {
254
+ panelImg: imageArrayCarousel,
255
+ panelText: textCarousel,
256
+ panelColor: backogroundColorCarousel
257
+ })
258
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
259
+ className: "home-login-retailer",
260
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GradientPanel.GradientPanel, {
261
+ componentsArray: loginRight,
262
+ panelType: "home-login",
263
+ panelColor: _variables.GlobalColors.white
264
+ })
265
+ })]
266
+ });
267
+ };
268
+
269
+ exports.RegistrationLoginFirstStep = RegistrationLoginFirstStep;
@@ -0,0 +1,20 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.Container = void 0;
9
+
10
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
11
+
12
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
13
+
14
+ var _variables = require("../../../global-files/variables");
15
+
16
+ var _templateObject;
17
+
18
+ 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);
19
+
20
+ exports.Container = Container;
@@ -0,0 +1,38 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = exports.RegistrationLoginSecondStepDefault = void 0;
9
+
10
+ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
11
+
12
+ var _index = require("./index");
13
+
14
+ var _loginImage = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/loginImage.svg"));
15
+
16
+ var _login = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/login2.svg"));
17
+
18
+ var _login2 = _interopRequireDefault(require("../../../assets/images/carouselImagesLogin/login3.svg"));
19
+
20
+ var _jsxRuntime = require("react/jsx-runtime");
21
+
22
+ var _default = {
23
+ title: "Components/pages/RegistrationLoginSecondStep",
24
+ component: _index.RegistrationLoginSecondStep
25
+ };
26
+ exports.default = _default;
27
+
28
+ var Template = function Template(args) {
29
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.RegistrationLoginSecondStep, (0, _objectSpread2.default)({}, args));
30
+ };
31
+
32
+ var RegistrationLoginSecondStepDefault = Template.bind({});
33
+ exports.RegistrationLoginSecondStepDefault = RegistrationLoginSecondStepDefault;
34
+ RegistrationLoginSecondStepDefault.args = {
35
+ imageArrayCarousel: [_loginImage.default, _login.default, _login2.default],
36
+ textCarousel: "Elige la plataforma que conecta proovedores y retailers",
37
+ textHeaderRight: "Ingresa tus credenciales"
38
+ };