contentoh-components-library 21.3.2 → 21.3.3

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 (58) hide show
  1. package/dist/assets/fonts/{Roboto → roboto}/LICENSE.txt +0 -0
  2. package/dist/assets/fonts/{Roboto → roboto}/Roboto-Black.ttf +0 -0
  3. package/dist/assets/fonts/{Roboto → roboto}/Roboto-BlackItalic.ttf +0 -0
  4. package/dist/assets/fonts/{Roboto → roboto}/Roboto-Bold.ttf +0 -0
  5. package/dist/assets/fonts/{Roboto → roboto}/Roboto-BoldItalic.ttf +0 -0
  6. package/dist/assets/fonts/{Roboto → roboto}/Roboto-Italic.ttf +0 -0
  7. package/dist/assets/fonts/{Roboto → roboto}/Roboto-Light.ttf +0 -0
  8. package/dist/assets/fonts/{Roboto → roboto}/Roboto-LightItalic.ttf +0 -0
  9. package/dist/assets/fonts/{Roboto → roboto}/Roboto-Medium.ttf +0 -0
  10. package/dist/assets/fonts/{Roboto → roboto}/Roboto-MediumItalic.ttf +0 -0
  11. package/dist/assets/fonts/{Roboto → roboto}/Roboto-Regular.ttf +0 -0
  12. package/dist/assets/fonts/{Roboto → roboto}/Roboto-Thin.ttf +0 -0
  13. package/dist/assets/fonts/{Roboto → roboto}/Roboto-ThinItalic.ttf +0 -0
  14. package/dist/components/molecules/SelectV2/index.js +24 -16
  15. package/dist/components/molecules/SelectV2/test.js +95 -0
  16. package/dist/components/{atoms/ChatPopUp/ChatPopUp.stories.js → molecules/SelectV2/test.stories.js} +7 -8
  17. package/dist/global-files/utils.js +14 -2
  18. package/package.json +1 -1
  19. package/src/assets/fonts/{Roboto → roboto}/LICENSE.txt +0 -0
  20. package/src/assets/fonts/{Roboto → roboto}/Roboto-Black.ttf +0 -0
  21. package/src/assets/fonts/{Roboto → roboto}/Roboto-BlackItalic.ttf +0 -0
  22. package/src/assets/fonts/{Roboto → roboto}/Roboto-Bold.ttf +0 -0
  23. package/src/assets/fonts/{Roboto → roboto}/Roboto-BoldItalic.ttf +0 -0
  24. package/src/assets/fonts/{Roboto → roboto}/Roboto-Italic.ttf +0 -0
  25. package/src/assets/fonts/{Roboto → roboto}/Roboto-Light.ttf +0 -0
  26. package/src/assets/fonts/{Roboto → roboto}/Roboto-LightItalic.ttf +0 -0
  27. package/src/assets/fonts/{Roboto → roboto}/Roboto-Medium.ttf +0 -0
  28. package/src/assets/fonts/{Roboto → roboto}/Roboto-MediumItalic.ttf +0 -0
  29. package/src/assets/fonts/{Roboto → roboto}/Roboto-Regular.ttf +0 -0
  30. package/src/assets/fonts/{Roboto → roboto}/Roboto-Thin.ttf +0 -0
  31. package/src/assets/fonts/{Roboto → roboto}/Roboto-ThinItalic.ttf +0 -0
  32. package/src/components/molecules/SelectV2/index.js +37 -22
  33. package/src/components/molecules/SelectV2/test.js +61 -0
  34. package/src/components/molecules/SelectV2/test.stories.js +10 -0
  35. package/src/global-files/utils.js +9 -0
  36. package/dist/assets/images/chatPopup/Spinner.gif +0 -0
  37. package/dist/assets/images/chatPopup/close.svg +0 -3
  38. package/dist/assets/images/chatPopup/defaultImage.png +0 -0
  39. package/dist/assets/images/chatPopup/defaultProfile.png +0 -0
  40. package/dist/assets/images/chatPopup/doc.svg +0 -1
  41. package/dist/assets/images/chatPopup/document.svg +0 -1
  42. package/dist/assets/images/chatPopup/iconChat.svg +0 -19
  43. package/dist/assets/images/chatPopup/iconPlus.svg +0 -3
  44. package/dist/assets/images/chatPopup/pdf.svg +0 -75
  45. package/dist/assets/images/chatPopup/remove.svg +0 -4
  46. package/dist/assets/images/chatPopup/send.svg +0 -3
  47. package/dist/assets/images/chatPopup/svgIcon.svg +0 -109
  48. package/dist/assets/images/chatPopup/upload_file.svg +0 -3
  49. package/dist/assets/images/chatPopup/xls.svg +0 -53
  50. package/dist/components/atoms/ChatPopUp/index.js +0 -841
  51. package/dist/components/atoms/ChatPopUp/styles.js +0 -27
  52. package/dist/components/atoms/ChatPopUp/utils/handlersChat.js +0 -182
  53. package/dist/components/atoms/StatusTag/StatusTag.stories.js +0 -48
  54. package/dist/components/atoms/StatusTag/index.js +0 -58
  55. package/dist/components/atoms/StatusTag/styles.js +0 -20
  56. package/dist/components/pages/RegistrationLoginFirstStep/RegistrationLoginFirstStep.stories.js +0 -37
  57. package/dist/components/pages/RegistrationLoginFirstStep/index.js +0 -269
  58. package/dist/components/pages/RegistrationLoginFirstStep/styles.js +0 -20
@@ -1,27 +0,0 @@
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.Slider = 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, _templateObject2;
17
-
18
- var Container = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n height: 34px;\n width: 34px;\n background-color: transparent;\n border: 1px solid #f0f0f0;\n border-radius: 50px;\n padding: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n cursor: pointer;\n &:hover {\n background-color: #f0f0f0;\n }\n .icon-chat {\n margin: 0;\n width: 15px;\n height: 15px;\n }\n"])));
19
-
20
- exports.Container = Container;
21
-
22
- var Slider = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n -webkit-box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.8);\n box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.8);\n z-index: 200;\n width: 425px;\n height: 600px;\n border-radius: 10px;\n background: white;\n padding: 37px 16px 17px 20px;\n position: absolute;\n right: ", "%;\n top: 3%;\n transition: right 2s ease 0;\n .image {\n display: flex;\n justify-content: center;\n align-content: center;\n background-color: #f7f7f7;\n border-radius: 10px;\n #myList {\n list-style: none;\n img {\n width: 365px;\n border-radius: 10px;\n }\n }\n }\n .close {\n background-color: #e33aa9;\n border: 3px solid white;\n height: 35px;\n width: 35px;\n border-radius: 50%;\n position: absolute;\n top: -18px;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n }\n .content-chat {\n height: 495px;\n max-height: 495px;\n overflow-y: auto;\n overflow-x: hidden;\n background-color: transparent;\n font-family: sans-serif;\n font-size: 12px;\n & + * {\n margin-top: 12px;\n }\n ::-webkit-scrollbar {\n width: 0;\n }\n .cargar-mas {\n border: none;\n border-radius: 10px;\n font: normal normal normal 11px/11px sans-serif;\n letter-spacing: 0.1px;\n color: #8a6caa;\n background-color: #f7f7fc;\n padding: 5px 17px;\n margin: 0 35%;\n display: flex;\n cursor: pointer;\n white-space: nowrap;\n &:hover {\n background-color: #f0f0f0;\n }\n img {\n margin-right: 7px;\n height: 13px;\n }\n }\n #myListChat {\n list-style: none;\n margin: 0;\n padding: 0;\n height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n display: flex;\n flex-direction: column-reverse;\n gap: 3px;\n .group-date {\n display: flex;\n justify-content: center;\n align-items: center;\n hr {\n width: 120px;\n border: 0.3px solid #f0f0f0;\n }\n p {\n margin: 0 10px;\n color: #b3b3b3;\n }\n }\n li {\n width: 100%;\n padding: 5px 0;\n margin: 0;\n display: flex;\n flex-direction: row-reverse;\n justify-content: flex-start;\n flex-wrap: nowrap;\n gap: 5px;\n align-items: center;\n .tooltip-userName {\n background-color: #f0f0f0;\n padding: 6px 10px;\n color: #000000;\n font-size: 11px;\n margin-bottom: 6px;\n .MuiTooltip-arrow {\n color: #f0f0f0;\n }\n }\n\n .profile {\n display: grid;\n place-items: center;\n align-self: start;\n width: 34px;\n height: 34px;\n border-radius: 50%;\n overflow: hidden;\n img {\n width: 100%;\n height: 100%;\n border-radius: inherit;\n }\n }\n .img-file {\n margin: 0 10px;\n width: 165px;\n img {\n width: 100%;\n object-fit: contain;\n border-radius: 10px;\n }\n }\n .body-message {\n margin: 0 10px;\n border-radius: 10px;\n box-sizing: border-box;\n background-color: #f0f0f0;\n padding: 10px 10px 10px 12px;\n max-width: 280px;\n p {\n color: #262626;\n margin: 0;\n padding: 0;\n }\n a {\n text-decoration: none;\n }\n div {\n cursor: pointer;\n background-color: white;\n border-radius: 10px;\n padding: 7px 10px;\n display: flex;\n align-items: center;\n img {\n height: 20px;\n width: 20px;\n margin-right: 5px;\n }\n p {\n color: #262626 !important;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n }\n }\n .date {\n display: flex;\n align-items: center;\n white-space: nowrap;\n p {\n color: #d9d9d9;\n font-size: 9px;\n }\n }\n &.own-message {\n flex-direction: row;\n justify-content: flex-start;\n .body-message {\n background-color: #8386ee;\n p {\n margin: 0;\n padding: 0;\n color: #ffffff;\n }\n }\n }\n }\n }\n }\n .input-chat {\n display: flex;\n align-items: center;\n border-radius: 17px;\n background-color: #f7f7f7;\n padding: 10px 7px 10px 15px;\n .send-message {\n background-color: transparent;\n width: 157%;\n border: none;\n font-family: sans-serif;\n font-size: 13px;\n line-height: initial;\n color: #242424;\n ::placeholder {\n font: normal normal medium 12px/14px sans-serif;\n letter-spacing: 0.6px;\n color: #b3b3b3;\n }\n :focus {\n outline: none;\n }\n & + * {\n margin-left: 10px;\n }\n }\n .upload {\n border: none;\n background: transparent;\n cursor: pointer;\n & + * {\n margin-left: 7px;\n }\n }\n .add-picture-input {\n display: none;\n }\n .send {\n width: 35.4px;\n height: 20px;\n border: none;\n background-color: #e33aa9;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n cursor: pointer;\n align-items: center;\n img {\n width: 11px;\n height: 11px;\n }\n }\n }\n"])), function (_ref) {
23
- var showMenu = _ref.showMenu;
24
- return showMenu ? 2 : -50;
25
- });
26
-
27
- exports.Slider = Slider;
@@ -1,182 +0,0 @@
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.getBD = exports.createItemBD = 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 _axios = _interopRequireDefault(require("axios"));
15
-
16
- var getBD = function getBD(id_article, version_article, get_type, item_date, tokenUser) {
17
- return new Promise( /*#__PURE__*/function () {
18
- var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(response, error) {
19
- var URL, respHTTPjson, body;
20
- return _regenerator.default.wrap(function _callee$(_context) {
21
- while (1) {
22
- switch (_context.prev = _context.next) {
23
- case 0:
24
- _context.prev = 0;
25
- URL = "https://fc069ovhuk.execute-api.us-east-1.amazonaws.com/dev/products-chat"; // endpoint
26
-
27
- URL += "?id_article=".concat(id_article);
28
- URL += "&version_article=".concat(version_article);
29
- URL += "&get_type=".concat(get_type);
30
- URL += "&item_date=".concat(item_date);
31
- _context.next = 8;
32
- return _axios.default.get(URL, {
33
- headers: {
34
- // AQUI COLOCAR EL TOKEN DEL USUARIO CONECTADO
35
- Authorization: tokenUser
36
- }
37
- });
38
-
39
- case 8:
40
- respHTTPjson = _context.sent;
41
-
42
- if (!(respHTTPjson.status != 200)) {
43
- _context.next = 12;
44
- break;
45
- }
46
-
47
- response({
48
- message: "No fue posible llevar a cabo la operacion",
49
- errorDetails: respHTTPjson.statusText
50
- });
51
- return _context.abrupt("return");
52
-
53
- case 12:
54
- // obtener body backend
55
- body = JSON.parse(respHTTPjson.data.body); //console.log( "resHTTP body:" , body );
56
- // verificar si existe error desde el backend
57
-
58
- if (!(respHTTPjson.data.statusCode != 200)) {
59
- _context.next = 16;
60
- break;
61
- }
62
-
63
- response({
64
- message: body.message,
65
- errorDetails: body.errorDetail
66
- });
67
- return _context.abrupt("return");
68
-
69
- case 16:
70
- // cuando se ejecuto bien el create ... tomar un posible message
71
- response({
72
- body: body
73
- });
74
- _context.next = 22;
75
- break;
76
-
77
- case 19:
78
- _context.prev = 19;
79
- _context.t0 = _context["catch"](0);
80
- //console.log("error catch get items chat" , err);
81
- response({
82
- message: "Algo salio mal al obtener los items del chat",
83
- errorDetails: _context.t0.message
84
- });
85
-
86
- case 22:
87
- case "end":
88
- return _context.stop();
89
- }
90
- }
91
- }, _callee, null, [[0, 19]]);
92
- }));
93
-
94
- return function (_x, _x2) {
95
- return _ref.apply(this, arguments);
96
- };
97
- }());
98
- };
99
-
100
- exports.getBD = getBD;
101
-
102
- var createItemBD = function createItemBD(id_article, version_article, value_type, value, tokenUser) {
103
- return new Promise( /*#__PURE__*/function () {
104
- var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(response, error) {
105
- var URL, bodyData, respHTTPjson, body;
106
- return _regenerator.default.wrap(function _callee2$(_context2) {
107
- while (1) {
108
- switch (_context2.prev = _context2.next) {
109
- case 0:
110
- _context2.prev = 0;
111
- URL = "https://fc069ovhuk.execute-api.us-east-1.amazonaws.com/dev/products-chat";
112
- bodyData = {
113
- id_article: id_article,
114
- version_article: version_article,
115
- value_type: value_type,
116
- value: value
117
- };
118
- _context2.next = 5;
119
- return _axios.default.post(URL, bodyData, {
120
- headers: {
121
- Authorization: tokenUser
122
- }
123
- });
124
-
125
- case 5:
126
- respHTTPjson = _context2.sent;
127
-
128
- if (!(respHTTPjson.status != 200)) {
129
- _context2.next = 9;
130
- break;
131
- }
132
-
133
- response({
134
- message: "No fue posible llevar a cabo la operacion",
135
- errorDetails: respHTTPjson.statusText
136
- });
137
- return _context2.abrupt("return");
138
-
139
- case 9:
140
- body = JSON.parse(respHTTPjson.data.body);
141
-
142
- if (!(respHTTPjson.data.statusCode != 200)) {
143
- _context2.next = 13;
144
- break;
145
- }
146
-
147
- response({
148
- message: body.message,
149
- errorDetails: body.errorDetail
150
- });
151
- return _context2.abrupt("return");
152
-
153
- case 13:
154
- response({
155
- body: true
156
- });
157
- _context2.next = 19;
158
- break;
159
-
160
- case 16:
161
- _context2.prev = 16;
162
- _context2.t0 = _context2["catch"](0);
163
- response({
164
- message: "Algo salio mal al agregar el item en el chat",
165
- errorDetails: _context2.t0.message
166
- });
167
-
168
- case 19:
169
- case "end":
170
- return _context2.stop();
171
- }
172
- }
173
- }, _callee2, null, [[0, 16]]);
174
- }));
175
-
176
- return function (_x3, _x4) {
177
- return _ref2.apply(this, arguments);
178
- };
179
- }());
180
- };
181
-
182
- exports.createItemBD = createItemBD;
@@ -1,48 +0,0 @@
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.StatusTagDefault = void 0;
9
-
10
- var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
11
-
12
- var _index = require("./index");
13
-
14
- var _variables = require("../../../global-files/variables");
15
-
16
- var _jsxRuntime = require("react/jsx-runtime");
17
-
18
- var status = _variables.GlobalStatus;
19
- var _default = {
20
- title: "Components/atoms/StatusTag",
21
- component: _index.StatusTag,
22
- argTypes: {
23
- statusType: {
24
- options: status,
25
- control: {
26
- type: "select"
27
- }
28
- },
29
- ovalForm: {
30
- options: [true, false],
31
- control: {
32
- type: "boolean"
33
- }
34
- }
35
- }
36
- };
37
- exports.default = _default;
38
-
39
- var Template = function Template(args) {
40
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.StatusTag, (0, _objectSpread2.default)({}, args));
41
- };
42
-
43
- var StatusTagDefault = Template.bind({});
44
- exports.StatusTagDefault = StatusTagDefault;
45
- StatusTagDefault.args = {
46
- statusType: "-",
47
- ovalForm: false
48
- };
@@ -1,58 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.StatusTag = void 0;
7
-
8
- var _styles = require("./styles");
9
-
10
- var _jsxRuntime = require("react/jsx-runtime");
11
-
12
- var StatusTag = function StatusTag(_ref) {
13
- var statusType = _ref.statusType,
14
- ovalForm = _ref.ovalForm;
15
-
16
- var getShortStatus = function getShortStatus(status) {
17
- switch (status) {
18
- case "COMPLETED":
19
- return "C";
20
-
21
- case "RECEPTION":
22
- return "Pr";
23
-
24
- case "NULL":
25
- return "-";
26
-
27
- case "RECEIVED":
28
- return "Rc";
29
-
30
- case "IN_PROGRESS":
31
- return "P";
32
-
33
- case "ASSIGNED":
34
- return "As";
35
-
36
- case "APPROVED":
37
- return "Ap";
38
-
39
- case "VALIDATING":
40
- return "V";
41
-
42
- case "PAID_OUT":
43
- return "Po";
44
-
45
- default:
46
- return status;
47
- }
48
- };
49
-
50
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
51
- className: "status-".concat(getShortStatus(statusType), " ").concat(ovalForm && "oval-form"),
52
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
53
- children: getShortStatus(statusType)
54
- })
55
- });
56
- };
57
-
58
- exports.StatusTag = StatusTag;
@@ -1,20 +0,0 @@
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 width: fit-content;\n padding: 0 10px;\n height: 20px;\n background-color: ", ";\n border-radius: 3px;\n\n p {\n text-align: center;\n color: ", ";\n font-family: ", ";\n font-size: 12px;\n line-height: 20px;\n }\n\n &.status-As,\n &.status-P,\n &.status-IN_PROGRESS,\n &.status-QF {\n background-color: ", ";\n }\n\n &.status-Pr,\n &.status-Rr,\n &.status-Rc {\n background-color: ", ";\n }\n\n &.status-AA,\n &.status-AP,\n &.status-AC,\n &.status-AF {\n background-color: ", ";\n }\n\n &.status-RA,\n &.status-RF,\n &.status-RP,\n &.status-RC {\n background-color: ", ";\n }\n\n &.status-Dat,\n &.status-Dsc,\n &.status-Imgs {\n background-color: ", ";\n }\n\n &.status-Ex {\n background-color: ", ";\n }\n\n &.status-DDI {\n background-color: ", ";\n }\n\n &.status-GLD {\n background-color: ", ";\n }\n\n &.status-TAB {\n background-color: ", ";\n }\n\n &.status-Pt {\n background-color: ", ";\n color: ", ";\n }\n\n &.oval-form {\n border-radius: 10px;\n }\n"])), _variables.GlobalColors.s3, _variables.GlobalColors.white, _variables.FontFamily.Lato, _variables.GlobalColors.in_progress, _variables.GlobalColors.reception, _variables.GlobalColors.finished, _variables.GlobalColors.rejected_status, _variables.GlobalColors.s4, _variables.GlobalColors.exported, _variables.GlobalColors.original_purpura, _variables.GlobalColors.in_progress, _variables.GlobalColors.deep_gray, _variables.GlobalColors.s2, _variables.GlobalColors.s4);
19
-
20
- exports.Container = Container;
@@ -1,37 +0,0 @@
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
- };
@@ -1,269 +0,0 @@
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;
@@ -1,20 +0,0 @@
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;