contentoh-components-library 21.2.42 → 21.2.43
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.
- package/dist/components/atoms/StatusTag/StatusTag.stories.js +48 -0
- package/dist/components/atoms/StatusTag/index.js +58 -0
- package/dist/components/atoms/StatusTag/styles.js +20 -0
- package/dist/components/molecules/CustomSelect/CustomSelect.stories.js +22 -18
- package/dist/components/molecules/CustomSelect/SelectItem.js +1 -10
- package/dist/components/molecules/CustomSelect/index.js +7 -33
- package/dist/components/molecules/CustomSelect/styles.js +1 -3
- package/dist/components/pages/Dashboard/Dashboard.stories.js +19 -19
- package/dist/components/pages/Dashboard/index.js +10 -9
- package/dist/components/pages/RegistrationLoginFirstStep/RegistrationLoginFirstStep.stories.js +37 -0
- package/dist/components/pages/RegistrationLoginFirstStep/index.js +269 -0
- package/dist/components/pages/RegistrationLoginFirstStep/styles.js +20 -0
- package/package.json +1 -1
- package/src/components/molecules/CustomSelect/CustomSelect.stories.js +11 -18
- package/src/components/molecules/CustomSelect/SelectItem.js +0 -7
- package/src/components/molecules/CustomSelect/index.js +6 -27
- package/src/components/molecules/CustomSelect/styles.js +1 -3
- package/src/components/pages/Dashboard/Dashboard.stories.js +19 -19
- package/src/components/pages/Dashboard/index.js +2 -1
- package/dist/assets/images/customSelect/starIcon.svg +0 -14
- package/src/assets/images/customSelect/starIcon.svg +0 -14
|
@@ -0,0 +1,48 @@
|
|
|
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
|
+
};
|
|
@@ -0,0 +1,58 @@
|
|
|
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;
|
|
@@ -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 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;
|
|
@@ -11,8 +11,6 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/
|
|
|
11
11
|
|
|
12
12
|
var _index = require("./index");
|
|
13
13
|
|
|
14
|
-
var _starIcon = _interopRequireDefault(require("../../../assets/images/customSelect/starIcon.svg"));
|
|
15
|
-
|
|
16
14
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
17
15
|
|
|
18
16
|
var _default = {
|
|
@@ -28,23 +26,29 @@ var Template = function Template(args) {
|
|
|
28
26
|
var CustomSelectDefault = Template.bind({});
|
|
29
27
|
exports.CustomSelectDefault = CustomSelectDefault;
|
|
30
28
|
CustomSelectDefault.args = {
|
|
31
|
-
|
|
29
|
+
selectLabel: "Todos los departamentos",
|
|
32
30
|
defaultOption: "Todos los departamentos",
|
|
33
31
|
options: [{
|
|
34
|
-
id:
|
|
35
|
-
|
|
36
|
-
|
|
32
|
+
id: 1,
|
|
33
|
+
value: "Decoración",
|
|
34
|
+
subOptions: [{
|
|
35
|
+
id: 1,
|
|
36
|
+
value: "Espejos"
|
|
37
|
+
}, {
|
|
38
|
+
id: 2,
|
|
39
|
+
value: "Persianas"
|
|
40
|
+
}]
|
|
41
|
+
}, {
|
|
42
|
+
id: 2,
|
|
43
|
+
value: "Eléctrico"
|
|
44
|
+
}, {
|
|
45
|
+
id: 3,
|
|
46
|
+
value: "Ferretería"
|
|
47
|
+
}, {
|
|
48
|
+
id: 4,
|
|
49
|
+
value: "Herramientas"
|
|
37
50
|
}, {
|
|
38
|
-
id:
|
|
39
|
-
|
|
40
|
-
}]
|
|
41
|
-
onClickItem: function onClickItem(v, id) {
|
|
42
|
-
if (v) {
|
|
43
|
-
console.log("Agregar a la lista", id);
|
|
44
|
-
} else {
|
|
45
|
-
console.log("Eliminar a la lista", id);
|
|
46
|
-
}
|
|
47
|
-
},
|
|
48
|
-
icon: _starIcon.default,
|
|
49
|
-
showSearchBar: true
|
|
51
|
+
id: 5,
|
|
52
|
+
value: "Iluminación"
|
|
53
|
+
}]
|
|
50
54
|
};
|
|
@@ -26,8 +26,7 @@ var SelecItem = function SelecItem(_ref) {
|
|
|
26
26
|
customSelectId = _ref.customSelectId,
|
|
27
27
|
setParameterArray = _ref.setParameterArray,
|
|
28
28
|
activeFilters = _ref.activeFilters,
|
|
29
|
-
setActiveFilters = _ref.setActiveFilters
|
|
30
|
-
onClickItem = _ref.onClickItem;
|
|
29
|
+
setActiveFilters = _ref.setActiveFilters;
|
|
31
30
|
|
|
32
31
|
var _useState = (0, _react.useState)(false),
|
|
33
32
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
@@ -47,10 +46,6 @@ var SelecItem = function SelecItem(_ref) {
|
|
|
47
46
|
id: "main-item-" + option.id,
|
|
48
47
|
label: option.name,
|
|
49
48
|
onChange: function onChange(e) {
|
|
50
|
-
if (onClickItem) {
|
|
51
|
-
onClickItem(e.target.checked, option.id);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
49
|
var subOptions = option.subOptions;
|
|
55
50
|
var filtersCopy = (0, _objectSpread2.default)({}, activeFilters);
|
|
56
51
|
|
|
@@ -113,10 +108,6 @@ var SelecItem = function SelecItem(_ref) {
|
|
|
113
108
|
label: sub.name,
|
|
114
109
|
defaultChecked: activeFilters[option.name] && activeFilters[option.name][sub.name],
|
|
115
110
|
onChange: function onChange(e) {
|
|
116
|
-
if (onClickItem) {
|
|
117
|
-
onClickItem(e.target.checked, sub.id);
|
|
118
|
-
}
|
|
119
|
-
|
|
120
111
|
if (e.target.checked) {
|
|
121
112
|
setParameterArray(function (current) {
|
|
122
113
|
return [].concat((0, _toConsumableArray2.default)(current), [sub.id]).sort(function (a, b) {
|
|
@@ -35,11 +35,9 @@ var CustomSelect = function CustomSelect(_ref) {
|
|
|
35
35
|
_ref$customSelectId = _ref.customSelectId,
|
|
36
36
|
customSelectId = _ref$customSelectId === void 0 ? "defaultSelectId" : _ref$customSelectId,
|
|
37
37
|
defaultOption = _ref.defaultOption,
|
|
38
|
-
setParameterArray = _ref.setParameterArray
|
|
39
|
-
onClickItem = _ref.onClickItem,
|
|
40
|
-
icon = _ref.icon;
|
|
38
|
+
setParameterArray = _ref.setParameterArray;
|
|
41
39
|
|
|
42
|
-
var _useState = (0, _react.useState)([]),
|
|
40
|
+
var _useState = (0, _react.useState)(options || []),
|
|
43
41
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
44
42
|
filters = _useState2[0],
|
|
45
43
|
setFilters = _useState2[1];
|
|
@@ -85,25 +83,7 @@ var CustomSelect = function CustomSelect(_ref) {
|
|
|
85
83
|
var end = new Date();
|
|
86
84
|
setStartDate(start);
|
|
87
85
|
setEndDate(end);
|
|
88
|
-
|
|
89
|
-
options.forEach(function (o) {
|
|
90
|
-
var name = o.name,
|
|
91
|
-
isSelected = o.isSelected,
|
|
92
|
-
subOptions = o.subOptions;
|
|
93
|
-
if (isSelected) obj[name] = {};
|
|
94
|
-
subOptions === null || subOptions === void 0 ? void 0 : subOptions.forEach(function (so) {
|
|
95
|
-
var nameSO = so.name,
|
|
96
|
-
isSelectedSO = so.isSelected;
|
|
97
|
-
|
|
98
|
-
if (isSelectedSO) {
|
|
99
|
-
if (!obj[name]) obj[name] = {};
|
|
100
|
-
obj[name][nameSO] = true;
|
|
101
|
-
}
|
|
102
|
-
});
|
|
103
|
-
});
|
|
104
|
-
setActiveFilters(obj);
|
|
105
|
-
setFilters(options);
|
|
106
|
-
}, [options]);
|
|
86
|
+
}, []);
|
|
107
87
|
|
|
108
88
|
var onChangeDatePicker = function onChangeDatePicker(dates) {
|
|
109
89
|
var _dates = (0, _slicedToArray2.default)(dates, 2),
|
|
@@ -133,19 +113,14 @@ var CustomSelect = function CustomSelect(_ref) {
|
|
|
133
113
|
}, [text]);
|
|
134
114
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
|
|
135
115
|
id: customSelectId,
|
|
136
|
-
selectLabel: selectLabel,
|
|
137
116
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
138
117
|
className: "button-list",
|
|
139
118
|
onClick: function onClick() {
|
|
140
119
|
return setShowList(!showList);
|
|
141
120
|
},
|
|
142
|
-
children: [
|
|
121
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
|
|
143
122
|
children: selectLabel
|
|
144
|
-
}),
|
|
145
|
-
src: icon,
|
|
146
|
-
alt: "Favorite",
|
|
147
|
-
width: "20px"
|
|
148
|
-
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
123
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
149
124
|
className: "arrow-item",
|
|
150
125
|
children: "\u25C0"
|
|
151
126
|
})]
|
|
@@ -165,7 +140,7 @@ var CustomSelect = function CustomSelect(_ref) {
|
|
|
165
140
|
}), defaultOption && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
166
141
|
className: "default-option",
|
|
167
142
|
onClick: function onClick() {
|
|
168
|
-
setParameterArray
|
|
143
|
+
setParameterArray([]);
|
|
169
144
|
setActiveFilters({});
|
|
170
145
|
setShowList(false);
|
|
171
146
|
},
|
|
@@ -188,8 +163,7 @@ var CustomSelect = function CustomSelect(_ref) {
|
|
|
188
163
|
customSelectId: customSelectId,
|
|
189
164
|
setParameterArray: setParameterArray,
|
|
190
165
|
activeFilters: activeFilters,
|
|
191
|
-
setActiveFilters: setActiveFilters
|
|
192
|
-
onClickItem: onClickItem
|
|
166
|
+
setActiveFilters: setActiveFilters
|
|
193
167
|
}, customSelectId + option.id);
|
|
194
168
|
})
|
|
195
169
|
})]
|
|
@@ -15,8 +15,6 @@ var _variables = require("../../../global-files/variables");
|
|
|
15
15
|
|
|
16
16
|
var _templateObject;
|
|
17
17
|
|
|
18
|
-
var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: fit-content;\n position: relative;\n\n .button-list {\n font-family: ", ";\n font-size: 13px;\n display: flex;\n padding:
|
|
19
|
-
return props.selectLabel !== "" ? "10px 15px" : "5px 5px";
|
|
20
|
-
});
|
|
18
|
+
var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: fit-content;\n position: relative;\n\n .button-list {\n font-family: ", ";\n font-size: 13px;\n display: flex;\n padding: 10px 15px;\n justify-content: space-between;\n border-radius: 50px;\n background-color: #fff;\n border: 1px solid #f0f0f0;\n cursor: pointer;\n\n .arrow-item {\n transform: rotate(-90deg);\n cursor: pointer;\n font-size: 10px;\n margin-left: 10px;\n }\n & + * {\n margin-top: 10px;\n }\n }\n\n .select-container {\n box-shadow: 0px 2px 4px #00000040;\n border-radius: 5px;\n background-color: #fff;\n padding-bottom: 10px;\n position: absolute;\n z-index: 10;\n .search-bar-filter {\n display: flex;\n align-items: center;\n border: 1px solid #f0f0f0;\n padding-left: 10px;\n\n img {\n width: 15px;\n height: 15px;\n }\n\n input {\n background-color: transparent;\n padding: 10px 10px;\n outline: none;\n border: none;\n }\n }\n .default-option {\n padding-top: 5px;\n cursor: pointer;\n padding: 5px 10px;\n color: #817393;\n font-family: Avenir Next;\n font-weight: 500;\n font-size: 13px;\n line-height: 21px;\n &:hover {\n background-color: #f0f0f0;\n }\n }\n .filters-container {\n overflow: auto;\n max-height: 500px;\n .option-container,\n .default-option {\n cursor: pointer;\n padding: 5px 10px;\n .main-item {\n display: flex;\n justify-content: space-between;\n\n .arrow-item {\n transform: rotate(-90deg);\n cursor: pointer;\n font-size: 10px;\n }\n }\n .sub-menu {\n padding-left: 20px;\n .sub-filter {\n & + * {\n margin-top: 10px;\n }\n }\n }\n\n &:hover {\n background-color: #f0f0f0;\n }\n label {\n white-space: nowrap;\n }\n }\n\n .dates-select-item {\n cursor: pointer;\n padding: 5px 10px;\n color: #817393;\n font-family: Avenir Next;\n font-weight: 500;\n font-size: 13px;\n line-height: 21px;\n &:hover {\n background-color: #f0f0f0;\n }\n }\n }\n }\n"])), _variables.FontFamily.Raleway);
|
|
21
19
|
|
|
22
20
|
exports.Container = Container;
|
|
@@ -27,37 +27,37 @@ var DashboardDeafult = Template.bind({});
|
|
|
27
27
|
exports.DashboardDeafult = DashboardDeafult;
|
|
28
28
|
DashboardDeafult.args = {
|
|
29
29
|
user: {
|
|
30
|
-
id_user:
|
|
31
|
-
name: "
|
|
32
|
-
last_name: "
|
|
33
|
-
email: "
|
|
34
|
-
position: "
|
|
30
|
+
id_user: 59,
|
|
31
|
+
name: "The Home",
|
|
32
|
+
last_name: "Depot",
|
|
33
|
+
email: "cadena.ismael@allfreemail.net",
|
|
34
|
+
position: "Admin",
|
|
35
35
|
telephone: "+523111366336",
|
|
36
36
|
country: "México",
|
|
37
|
-
id_company:
|
|
38
|
-
id_cognito: "
|
|
37
|
+
id_company: 7,
|
|
38
|
+
id_cognito: "5884ae34-59d6-4454-b98e-821518bcc3a7",
|
|
39
39
|
birth_Date: null,
|
|
40
40
|
about_me: null,
|
|
41
41
|
zip_code: null,
|
|
42
42
|
address: null,
|
|
43
43
|
job: null,
|
|
44
|
-
id_stripe: "
|
|
44
|
+
id_stripe: "",
|
|
45
45
|
id_role: 0,
|
|
46
46
|
active: 1,
|
|
47
|
-
is_retailer:
|
|
47
|
+
is_retailer: 1,
|
|
48
48
|
email_notify: 1,
|
|
49
49
|
membership: {
|
|
50
|
-
id:
|
|
51
|
-
start_date: "
|
|
52
|
-
end_date: "
|
|
53
|
-
planID:
|
|
54
|
-
plan: "
|
|
55
|
-
name: "Plan
|
|
56
|
-
user_limit: "
|
|
57
|
-
products_limit: "
|
|
50
|
+
id: 24,
|
|
51
|
+
start_date: "2021-11-23T03:35:50.000Z",
|
|
52
|
+
end_date: "2022-11-23T03:35:50.000Z",
|
|
53
|
+
planID: 9,
|
|
54
|
+
plan: "prod_KtlkzZVGq6bRTO",
|
|
55
|
+
name: "Plan Enterprise Full",
|
|
56
|
+
user_limit: "30",
|
|
57
|
+
products_limit: "10000",
|
|
58
58
|
type: "Enterprise"
|
|
59
59
|
},
|
|
60
|
-
src: "https://content-management-profile.s3.amazonaws.com/id-
|
|
60
|
+
src: "https://content-management-profile.s3.amazonaws.com/id-59/59.png?1663928202230"
|
|
61
61
|
},
|
|
62
|
-
jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.
|
|
62
|
+
jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI1ODg0YWUzNC01OWQ2LTQ0NTQtYjk4ZS04MjE1MThiY2MzYTciLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjU4ODRhZTM0LTU5ZDYtNDQ1NC1iOThlLTgyMTUxOGJjYzNhNyIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJmY2IzMGVjYi1lMjc1LTQyM2UtYjQwMi05YTBjMWNjNzM2YzMiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2MzkyODIwMCwibmFtZSI6IkNhZGVuYSBJc21hZWwiLCJwaG9uZV9udW1iZXIiOiIrNTIzMTExMzY2MzM2IiwiZXhwIjoxNjYzOTMxODAwLCJpYXQiOjE2NjM5MjgyMDAsImVtYWlsIjoiY2FkZW5hLmlzbWFlbEBhbGxmcmVlbWFpbC5uZXQifQ.E5NPYa6ucsQGTij8gzihdT2zv7gmJwxCZwrbBnQSYXIBw7cMK7U0eC7z4VBEm3tFYCA9SoxIdQtfuGj_lw2-CaXqkkMu4929TtlrrK_nVHYlwsXMSGIW3bComTb2toX8bshD1kd3FnNBFujhrQ-ouuBfQjy2d4fVZA1M4sZi_eT8Lxjo1uI_LfgYxrlS8_IKgfz71NuM-Uc2vxidm2_AG0g7PboSPW24bv1R-Lv272hoR_SmjBPY-I2Pw8DTZwQxWmtoU_MOx1YnY97qx5G6zqbTsjbNYkk97xPb87tKQTo946pB80fOkipTrD2xwhc8AOZQywwKa5NT4nGayDKLdg"
|
|
63
63
|
};
|
|
@@ -136,30 +136,31 @@ var Dashboard = function Dashboard(_ref) {
|
|
|
136
136
|
return string.push("".concat(key, "=").concat(queryObject[key]));
|
|
137
137
|
});
|
|
138
138
|
query = string.join("&");
|
|
139
|
+
console.log(query);
|
|
139
140
|
endpoint = byStatus ? process.env.REACT_APP_READ_ORDERS_BY_STATUS : process.env.REACT_APP_READ_REQUIRED_ORDERS;
|
|
140
|
-
_context.prev =
|
|
141
|
-
_context.next =
|
|
141
|
+
_context.prev = 7;
|
|
142
|
+
_context.next = 10;
|
|
142
143
|
return _axios.default.get("".concat(endpoint, "?").concat(query), {
|
|
143
144
|
headers: {
|
|
144
145
|
Authorization: jwt
|
|
145
146
|
}
|
|
146
147
|
});
|
|
147
148
|
|
|
148
|
-
case
|
|
149
|
+
case 10:
|
|
149
150
|
response = _context.sent;
|
|
150
151
|
return _context.abrupt("return", JSON.parse(response.data.body));
|
|
151
152
|
|
|
152
|
-
case
|
|
153
|
-
_context.prev =
|
|
154
|
-
_context.t0 = _context["catch"](
|
|
153
|
+
case 14:
|
|
154
|
+
_context.prev = 14;
|
|
155
|
+
_context.t0 = _context["catch"](7);
|
|
155
156
|
console.log(_context.t0);
|
|
156
157
|
|
|
157
|
-
case
|
|
158
|
+
case 17:
|
|
158
159
|
case "end":
|
|
159
160
|
return _context.stop();
|
|
160
161
|
}
|
|
161
162
|
}
|
|
162
|
-
}, _callee, null, [[
|
|
163
|
+
}, _callee, null, [[7, 14]]);
|
|
163
164
|
}));
|
|
164
165
|
|
|
165
166
|
return function loadProductVersions(_x) {
|
|
@@ -174,7 +175,7 @@ var Dashboard = function Dashboard(_ref) {
|
|
|
174
175
|
while (1) {
|
|
175
176
|
switch (_context2.prev = _context2.next) {
|
|
176
177
|
case 0:
|
|
177
|
-
isTHDUser =
|
|
178
|
+
isTHDUser = user.is_retailer === 1;
|
|
178
179
|
_context2.next = 3;
|
|
179
180
|
return _axios.default.get("".concat(process.env.REACT_APP_RETAILER_ENDPOINT), {
|
|
180
181
|
headers: {
|
package/dist/components/pages/RegistrationLoginFirstStep/RegistrationLoginFirstStep.stories.js
ADDED
|
@@ -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;
|
package/package.json
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { CustomSelect } from "./index";
|
|
2
|
-
import iconStar from "../../../assets/images/customSelect/starIcon.svg";
|
|
3
2
|
|
|
4
3
|
export default {
|
|
5
4
|
title: "Components/molecules/CustomSelect",
|
|
@@ -9,26 +8,20 @@ export default {
|
|
|
9
8
|
const Template = (args) => <CustomSelect {...args} />;
|
|
10
9
|
export const CustomSelectDefault = Template.bind({});
|
|
11
10
|
CustomSelectDefault.args = {
|
|
12
|
-
|
|
11
|
+
selectLabel: "Todos los departamentos",
|
|
13
12
|
defaultOption: "Todos los departamentos",
|
|
14
13
|
options: [
|
|
15
14
|
{
|
|
16
|
-
id:
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
name: "Mis Favoritos",
|
|
15
|
+
id: 1,
|
|
16
|
+
value: "Decoración",
|
|
17
|
+
subOptions: [
|
|
18
|
+
{ id: 1, value: "Espejos" },
|
|
19
|
+
{ id: 2, value: "Persianas" },
|
|
20
|
+
],
|
|
23
21
|
},
|
|
22
|
+
{ id: 2, value: "Eléctrico" },
|
|
23
|
+
{ id: 3, value: "Ferretería" },
|
|
24
|
+
{ id: 4, value: "Herramientas" },
|
|
25
|
+
{ id: 5, value: "Iluminación" },
|
|
24
26
|
],
|
|
25
|
-
onClickItem: (v, id) => {
|
|
26
|
-
if (v) {
|
|
27
|
-
console.log("Agregar a la lista", id);
|
|
28
|
-
} else {
|
|
29
|
-
console.log("Eliminar a la lista", id);
|
|
30
|
-
}
|
|
31
|
-
},
|
|
32
|
-
icon: iconStar,
|
|
33
|
-
showSearchBar: true,
|
|
34
27
|
};
|
|
@@ -7,7 +7,6 @@ export const SelecItem = ({
|
|
|
7
7
|
setParameterArray,
|
|
8
8
|
activeFilters,
|
|
9
9
|
setActiveFilters,
|
|
10
|
-
onClickItem,
|
|
11
10
|
}) => {
|
|
12
11
|
const [showSubOptions, setShowSubOptions] = useState(false);
|
|
13
12
|
const [chkGlobal, setChkGlobal] = useState(false);
|
|
@@ -18,9 +17,6 @@ export const SelecItem = ({
|
|
|
18
17
|
id={"main-item-" + option.id}
|
|
19
18
|
label={option.name}
|
|
20
19
|
onChange={(e) => {
|
|
21
|
-
if (onClickItem) {
|
|
22
|
-
onClickItem(e.target.checked, option.id)
|
|
23
|
-
}
|
|
24
20
|
const subOptions = option.subOptions;
|
|
25
21
|
const filtersCopy = { ...activeFilters };
|
|
26
22
|
if (subOptions) {
|
|
@@ -81,9 +77,6 @@ export const SelecItem = ({
|
|
|
81
77
|
activeFilters[option.name][sub.name]
|
|
82
78
|
}
|
|
83
79
|
onChange={(e) => {
|
|
84
|
-
if (onClickItem) {
|
|
85
|
-
onClickItem(e.target.checked, sub.id)
|
|
86
|
-
}
|
|
87
80
|
if (e.target.checked) {
|
|
88
81
|
setParameterArray((current) =>
|
|
89
82
|
[...current, sub.id].sort((a, b) => a - b)
|
|
@@ -13,10 +13,8 @@ export const CustomSelect = ({
|
|
|
13
13
|
customSelectId = "defaultSelectId",
|
|
14
14
|
defaultOption,
|
|
15
15
|
setParameterArray,
|
|
16
|
-
onClickItem,
|
|
17
|
-
icon,
|
|
18
16
|
}) => {
|
|
19
|
-
const [filters, setFilters] = useState([]);
|
|
17
|
+
const [filters, setFilters] = useState(options || []);
|
|
20
18
|
const [showList, setShowList] = useCloseModal(customSelectId);
|
|
21
19
|
const [text, setText] = useState("");
|
|
22
20
|
const [showDatePicker, setShowDatePicker] = useCloseModal(customSelectId);
|
|
@@ -35,21 +33,7 @@ export const CustomSelect = ({
|
|
|
35
33
|
const end = new Date();
|
|
36
34
|
setStartDate(start);
|
|
37
35
|
setEndDate(end);
|
|
38
|
-
|
|
39
|
-
options.forEach((o) => {
|
|
40
|
-
const { name, isSelected, subOptions } = o;
|
|
41
|
-
if (isSelected) obj[name] = {};
|
|
42
|
-
subOptions?.forEach((so) => {
|
|
43
|
-
const { name: nameSO, isSelected: isSelectedSO } = so;
|
|
44
|
-
if (isSelectedSO) {
|
|
45
|
-
if (!obj[name]) obj[name] = {};
|
|
46
|
-
obj[name][nameSO] = true;
|
|
47
|
-
}
|
|
48
|
-
});
|
|
49
|
-
});
|
|
50
|
-
setActiveFilters(obj);
|
|
51
|
-
setFilters(options);
|
|
52
|
-
}, [options]);
|
|
36
|
+
}, []);
|
|
53
37
|
|
|
54
38
|
const onChangeDatePicker = (dates) => {
|
|
55
39
|
const [start, end] = dates;
|
|
@@ -80,14 +64,10 @@ export const CustomSelect = ({
|
|
|
80
64
|
}, [text]);
|
|
81
65
|
|
|
82
66
|
return (
|
|
83
|
-
<Container id={customSelectId}
|
|
67
|
+
<Container id={customSelectId}>
|
|
84
68
|
<div className="button-list" onClick={() => setShowList(!showList)}>
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
<img src={icon} alt="Favorite" width={"20px"} />
|
|
88
|
-
) : (
|
|
89
|
-
<div className="arrow-item">◀</div>
|
|
90
|
-
)}
|
|
69
|
+
<p>{selectLabel}</p>
|
|
70
|
+
<div className="arrow-item">◀</div>
|
|
91
71
|
</div>
|
|
92
72
|
{showList && (
|
|
93
73
|
<div className="select-container">
|
|
@@ -106,7 +86,7 @@ export const CustomSelect = ({
|
|
|
106
86
|
<div
|
|
107
87
|
className="default-option"
|
|
108
88
|
onClick={() => {
|
|
109
|
-
setParameterArray
|
|
89
|
+
setParameterArray([]);
|
|
110
90
|
setActiveFilters({});
|
|
111
91
|
setShowList(false);
|
|
112
92
|
}}
|
|
@@ -136,7 +116,6 @@ export const CustomSelect = ({
|
|
|
136
116
|
setParameterArray={setParameterArray}
|
|
137
117
|
activeFilters={activeFilters}
|
|
138
118
|
setActiveFilters={setActiveFilters}
|
|
139
|
-
onClickItem={onClickItem}
|
|
140
119
|
/>
|
|
141
120
|
)
|
|
142
121
|
)}
|
|
@@ -9,9 +9,7 @@ export const Container = styled.div`
|
|
|
9
9
|
font-family: ${FontFamily.Raleway};
|
|
10
10
|
font-size: 13px;
|
|
11
11
|
display: flex;
|
|
12
|
-
padding:
|
|
13
|
-
//padding: 10px 15px;
|
|
14
|
-
//padding: 5px 5px;
|
|
12
|
+
padding: 10px 15px;
|
|
15
13
|
justify-content: space-between;
|
|
16
14
|
border-radius: 50px;
|
|
17
15
|
background-color: #fff;
|
|
@@ -9,37 +9,37 @@ const Template = (args) => <Dashboard {...args} />;
|
|
|
9
9
|
export const DashboardDeafult = Template.bind({});
|
|
10
10
|
DashboardDeafult.args = {
|
|
11
11
|
user: {
|
|
12
|
-
id_user:
|
|
13
|
-
name: "
|
|
14
|
-
last_name: "
|
|
15
|
-
email: "
|
|
16
|
-
position: "
|
|
12
|
+
id_user: 59,
|
|
13
|
+
name: "The Home",
|
|
14
|
+
last_name: "Depot",
|
|
15
|
+
email: "cadena.ismael@allfreemail.net",
|
|
16
|
+
position: "Admin",
|
|
17
17
|
telephone: "+523111366336",
|
|
18
18
|
country: "México",
|
|
19
|
-
id_company:
|
|
20
|
-
id_cognito: "
|
|
19
|
+
id_company: 7,
|
|
20
|
+
id_cognito: "5884ae34-59d6-4454-b98e-821518bcc3a7",
|
|
21
21
|
birth_Date: null,
|
|
22
22
|
about_me: null,
|
|
23
23
|
zip_code: null,
|
|
24
24
|
address: null,
|
|
25
25
|
job: null,
|
|
26
|
-
id_stripe: "
|
|
26
|
+
id_stripe: "",
|
|
27
27
|
id_role: 0,
|
|
28
28
|
active: 1,
|
|
29
|
-
is_retailer:
|
|
29
|
+
is_retailer: 1,
|
|
30
30
|
email_notify: 1,
|
|
31
31
|
membership: {
|
|
32
|
-
id:
|
|
33
|
-
start_date: "
|
|
34
|
-
end_date: "
|
|
35
|
-
planID:
|
|
36
|
-
plan: "
|
|
37
|
-
name: "Plan
|
|
38
|
-
user_limit: "
|
|
39
|
-
products_limit: "
|
|
32
|
+
id: 24,
|
|
33
|
+
start_date: "2021-11-23T03:35:50.000Z",
|
|
34
|
+
end_date: "2022-11-23T03:35:50.000Z",
|
|
35
|
+
planID: 9,
|
|
36
|
+
plan: "prod_KtlkzZVGq6bRTO",
|
|
37
|
+
name: "Plan Enterprise Full",
|
|
38
|
+
user_limit: "30",
|
|
39
|
+
products_limit: "10000",
|
|
40
40
|
type: "Enterprise",
|
|
41
41
|
},
|
|
42
|
-
src: "https://content-management-profile.s3.amazonaws.com/id-
|
|
42
|
+
src: "https://content-management-profile.s3.amazonaws.com/id-59/59.png?1663928202230",
|
|
43
43
|
},
|
|
44
|
-
jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.
|
|
44
|
+
jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI1ODg0YWUzNC01OWQ2LTQ0NTQtYjk4ZS04MjE1MThiY2MzYTciLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjU4ODRhZTM0LTU5ZDYtNDQ1NC1iOThlLTgyMTUxOGJjYzNhNyIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJmY2IzMGVjYi1lMjc1LTQyM2UtYjQwMi05YTBjMWNjNzM2YzMiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2MzkyODIwMCwibmFtZSI6IkNhZGVuYSBJc21hZWwiLCJwaG9uZV9udW1iZXIiOiIrNTIzMTExMzY2MzM2IiwiZXhwIjoxNjYzOTMxODAwLCJpYXQiOjE2NjM5MjgyMDAsImVtYWlsIjoiY2FkZW5hLmlzbWFlbEBhbGxmcmVlbWFpbC5uZXQifQ.E5NPYa6ucsQGTij8gzihdT2zv7gmJwxCZwrbBnQSYXIBw7cMK7U0eC7z4VBEm3tFYCA9SoxIdQtfuGj_lw2-CaXqkkMu4929TtlrrK_nVHYlwsXMSGIW3bComTb2toX8bshD1kd3FnNBFujhrQ-ouuBfQjy2d4fVZA1M4sZi_eT8Lxjo1uI_LfgYxrlS8_IKgfz71NuM-Uc2vxidm2_AG0g7PboSPW24bv1R-Lv272hoR_SmjBPY-I2Pw8DTZwQxWmtoU_MOx1YnY97qx5G6zqbTsjbNYkk97xPb87tKQTo946pB80fOkipTrD2xwhc8AOZQywwKa5NT4nGayDKLdg",
|
|
45
45
|
};
|
|
@@ -39,6 +39,7 @@ export const Dashboard = ({ jwt, user }) => {
|
|
|
39
39
|
let string = [];
|
|
40
40
|
keys.forEach((key) => string.push(`${key}=${queryObject[key]}`));
|
|
41
41
|
const query = string.join("&");
|
|
42
|
+
console.log(query);
|
|
42
43
|
const endpoint = byStatus
|
|
43
44
|
? process.env.REACT_APP_READ_ORDERS_BY_STATUS
|
|
44
45
|
: process.env.REACT_APP_READ_REQUIRED_ORDERS;
|
|
@@ -55,7 +56,7 @@ export const Dashboard = ({ jwt, user }) => {
|
|
|
55
56
|
};
|
|
56
57
|
|
|
57
58
|
const getRetailers = async () => {
|
|
58
|
-
const isTHDUser =
|
|
59
|
+
const isTHDUser = user.is_retailer === 1;
|
|
59
60
|
const retailersResponse = await axios.get(
|
|
60
61
|
`${process.env.REACT_APP_RETAILER_ENDPOINT}`,
|
|
61
62
|
{
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
<svg id="Componente_34_12" data-name="Componente 34 – 12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
|
|
2
|
-
<defs>
|
|
3
|
-
<clipPath id="clip-path">
|
|
4
|
-
<rect id="Rectángulo_107" data-name="Rectángulo 107" width="10" height="10" transform="translate(3 3)" fill="#b3b3b3" stroke="#b3b3b3" stroke-width="1"/>
|
|
5
|
-
</clipPath>
|
|
6
|
-
</defs>
|
|
7
|
-
<g id="Rectángulo_287" data-name="Rectángulo 287" fill="#fff" stroke="#f0f0f0" stroke-width="1">
|
|
8
|
-
<rect width="16" height="16" rx="8" stroke="none"/>
|
|
9
|
-
<rect x="0.5" y="0.5" width="15" height="15" rx="7.5" fill="none"/>
|
|
10
|
-
</g>
|
|
11
|
-
<g id="Enmascarar_grupo_79" data-name="Enmascarar grupo 79" clip-path="url(#clip-path)">
|
|
12
|
-
<path id="star_FILL0_wght400_GRAD0_opsz48" d="M4.037,9.438,6,8.262,7.963,9.45,7.438,7.225l1.725-1.5-2.275-.2L6,3.425,5.113,5.512l-2.275.2,1.725,1.5ZM2.912,11l.813-3.512L1,5.125l3.6-.312L6,1.5,7.4,4.813l3.6.313L8.275,7.488,9.087,11,6,9.137ZM6,6.563Z" transform="translate(2 1.5)" fill="#b3b3b3"/>
|
|
13
|
-
</g>
|
|
14
|
-
</svg>
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
<svg id="Componente_34_12" data-name="Componente 34 – 12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
|
|
2
|
-
<defs>
|
|
3
|
-
<clipPath id="clip-path">
|
|
4
|
-
<rect id="Rectángulo_107" data-name="Rectángulo 107" width="10" height="10" transform="translate(3 3)" fill="#b3b3b3" stroke="#b3b3b3" stroke-width="1"/>
|
|
5
|
-
</clipPath>
|
|
6
|
-
</defs>
|
|
7
|
-
<g id="Rectángulo_287" data-name="Rectángulo 287" fill="#fff" stroke="#f0f0f0" stroke-width="1">
|
|
8
|
-
<rect width="16" height="16" rx="8" stroke="none"/>
|
|
9
|
-
<rect x="0.5" y="0.5" width="15" height="15" rx="7.5" fill="none"/>
|
|
10
|
-
</g>
|
|
11
|
-
<g id="Enmascarar_grupo_79" data-name="Enmascarar grupo 79" clip-path="url(#clip-path)">
|
|
12
|
-
<path id="star_FILL0_wght400_GRAD0_opsz48" d="M4.037,9.438,6,8.262,7.963,9.45,7.438,7.225l1.725-1.5-2.275-.2L6,3.425,5.113,5.512l-2.275.2,1.725,1.5ZM2.912,11l.813-3.512L1,5.125l3.6-.312L6,1.5,7.4,4.813l3.6.313L8.275,7.488,9.087,11,6,9.137ZM6,6.563Z" transform="translate(2 1.5)" fill="#b3b3b3"/>
|
|
13
|
-
</g>
|
|
14
|
-
</svg>
|