contentoh-components-library 21.2.44 → 21.2.46
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/assets/images/customSelect/starIcon.svg +14 -0
- package/dist/components/molecules/CustomSelect/CustomSelect.stories.js +21 -22
- package/dist/components/molecules/CustomSelect/SelectItem.js +10 -1
- package/dist/components/molecules/CustomSelect/index.js +36 -9
- package/dist/components/molecules/CustomSelect/styles.js +3 -1
- package/dist/components/pages/Dashboard/Dashboard.stories.js +19 -19
- package/dist/components/pages/Dashboard/index.js +9 -10
- package/package.json +1 -1
- package/src/assets/images/customSelect/starIcon.svg +14 -0
- package/src/components/molecules/CustomSelect/CustomSelect.stories.js +19 -11
- package/src/components/molecules/CustomSelect/SelectItem.js +7 -0
- package/src/components/molecules/CustomSelect/index.js +32 -8
- package/src/components/molecules/CustomSelect/styles.js +3 -1
- package/src/components/pages/Dashboard/Dashboard.stories.js +19 -19
- package/src/components/pages/Dashboard/index.js +1 -2
- package/dist/components/atoms/StatusTag/StatusTag.stories.js +0 -48
- package/dist/components/atoms/StatusTag/index.js +0 -58
- package/dist/components/atoms/StatusTag/styles.js +0 -20
- package/dist/components/pages/RegistrationLoginFirstStep/RegistrationLoginFirstStep.stories.js +0 -37
- package/dist/components/pages/RegistrationLoginFirstStep/index.js +0 -269
- package/dist/components/pages/RegistrationLoginFirstStep/styles.js +0 -20
|
@@ -0,0 +1,14 @@
|
|
|
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>
|
|
@@ -11,6 +11,8 @@ 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
|
+
|
|
14
16
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
17
|
|
|
16
18
|
var _default = {
|
|
@@ -26,29 +28,26 @@ var Template = function Template(args) {
|
|
|
26
28
|
var CustomSelectDefault = Template.bind({});
|
|
27
29
|
exports.CustomSelectDefault = CustomSelectDefault;
|
|
28
30
|
CustomSelectDefault.args = {
|
|
29
|
-
selectLabel: "Todos los departamentos",
|
|
31
|
+
// selectLabel: "Todos los departamentos",
|
|
30
32
|
defaultOption: "Todos los departamentos",
|
|
31
33
|
options: [{
|
|
32
|
-
id:
|
|
33
|
-
|
|
34
|
-
|
|
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"
|
|
34
|
+
id: 47,
|
|
35
|
+
name: "Enero 2023",
|
|
36
|
+
isSelected: true
|
|
50
37
|
}, {
|
|
51
|
-
id:
|
|
52
|
-
|
|
53
|
-
}]
|
|
38
|
+
id: 49,
|
|
39
|
+
name: "Mis Favoritos"
|
|
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,
|
|
50
|
+
customOptions: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
|
|
51
|
+
children: "Esto es un customOptions"
|
|
52
|
+
})
|
|
54
53
|
};
|
|
@@ -26,7 +26,8 @@ var SelecItem = function SelecItem(_ref) {
|
|
|
26
26
|
customSelectId = _ref.customSelectId,
|
|
27
27
|
setParameterArray = _ref.setParameterArray,
|
|
28
28
|
activeFilters = _ref.activeFilters,
|
|
29
|
-
setActiveFilters = _ref.setActiveFilters
|
|
29
|
+
setActiveFilters = _ref.setActiveFilters,
|
|
30
|
+
onClickItem = _ref.onClickItem;
|
|
30
31
|
|
|
31
32
|
var _useState = (0, _react.useState)(false),
|
|
32
33
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
@@ -46,6 +47,10 @@ var SelecItem = function SelecItem(_ref) {
|
|
|
46
47
|
id: "main-item-" + option.id,
|
|
47
48
|
label: option.name,
|
|
48
49
|
onChange: function onChange(e) {
|
|
50
|
+
if (onClickItem) {
|
|
51
|
+
onClickItem(e.target.checked, option.id);
|
|
52
|
+
}
|
|
53
|
+
|
|
49
54
|
var subOptions = option.subOptions;
|
|
50
55
|
var filtersCopy = (0, _objectSpread2.default)({}, activeFilters);
|
|
51
56
|
|
|
@@ -108,6 +113,10 @@ var SelecItem = function SelecItem(_ref) {
|
|
|
108
113
|
label: sub.name,
|
|
109
114
|
defaultChecked: activeFilters[option.name] && activeFilters[option.name][sub.name],
|
|
110
115
|
onChange: function onChange(e) {
|
|
116
|
+
if (onClickItem) {
|
|
117
|
+
onClickItem(e.target.checked, sub.id);
|
|
118
|
+
}
|
|
119
|
+
|
|
111
120
|
if (e.target.checked) {
|
|
112
121
|
setParameterArray(function (current) {
|
|
113
122
|
return [].concat((0, _toConsumableArray2.default)(current), [sub.id]).sort(function (a, b) {
|
|
@@ -35,9 +35,12 @@ 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
|
|
38
|
+
setParameterArray = _ref.setParameterArray,
|
|
39
|
+
onClickItem = _ref.onClickItem,
|
|
40
|
+
icon = _ref.icon,
|
|
41
|
+
customOptions = _ref.customOptions;
|
|
39
42
|
|
|
40
|
-
var _useState = (0, _react.useState)(
|
|
43
|
+
var _useState = (0, _react.useState)([]),
|
|
41
44
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
42
45
|
filters = _useState2[0],
|
|
43
46
|
setFilters = _useState2[1];
|
|
@@ -83,7 +86,25 @@ var CustomSelect = function CustomSelect(_ref) {
|
|
|
83
86
|
var end = new Date();
|
|
84
87
|
setStartDate(start);
|
|
85
88
|
setEndDate(end);
|
|
86
|
-
|
|
89
|
+
var obj = {};
|
|
90
|
+
options.forEach(function (o) {
|
|
91
|
+
var name = o.name,
|
|
92
|
+
isSelected = o.isSelected,
|
|
93
|
+
subOptions = o.subOptions;
|
|
94
|
+
if (isSelected) obj[name] = {};
|
|
95
|
+
subOptions === null || subOptions === void 0 ? void 0 : subOptions.forEach(function (so) {
|
|
96
|
+
var nameSO = so.name,
|
|
97
|
+
isSelectedSO = so.isSelected;
|
|
98
|
+
|
|
99
|
+
if (isSelectedSO) {
|
|
100
|
+
if (!obj[name]) obj[name] = {};
|
|
101
|
+
obj[name][nameSO] = true;
|
|
102
|
+
}
|
|
103
|
+
});
|
|
104
|
+
});
|
|
105
|
+
setActiveFilters(obj);
|
|
106
|
+
setFilters(options);
|
|
107
|
+
}, [options]);
|
|
87
108
|
|
|
88
109
|
var onChangeDatePicker = function onChangeDatePicker(dates) {
|
|
89
110
|
var _dates = (0, _slicedToArray2.default)(dates, 2),
|
|
@@ -113,18 +134,23 @@ var CustomSelect = function CustomSelect(_ref) {
|
|
|
113
134
|
}, [text]);
|
|
114
135
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
|
|
115
136
|
id: customSelectId,
|
|
137
|
+
selectLabel: selectLabel,
|
|
116
138
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
117
139
|
className: "button-list",
|
|
118
140
|
onClick: function onClick() {
|
|
119
141
|
return setShowList(!showList);
|
|
120
142
|
},
|
|
121
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
|
|
143
|
+
children: [selectLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
|
|
122
144
|
children: selectLabel
|
|
123
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("
|
|
145
|
+
}), icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
|
|
146
|
+
src: icon,
|
|
147
|
+
alt: "Favorite",
|
|
148
|
+
width: "20px"
|
|
149
|
+
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
124
150
|
className: "arrow-item",
|
|
125
151
|
children: "\u25C0"
|
|
126
152
|
})]
|
|
127
|
-
}), showList && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
153
|
+
}), showList && (customOptions ? customOptions : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
128
154
|
className: "select-container",
|
|
129
155
|
children: [showSearchBar && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
130
156
|
className: "search-bar-filter",
|
|
@@ -140,7 +166,7 @@ var CustomSelect = function CustomSelect(_ref) {
|
|
|
140
166
|
}), defaultOption && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
141
167
|
className: "default-option",
|
|
142
168
|
onClick: function onClick() {
|
|
143
|
-
setParameterArray([]);
|
|
169
|
+
setParameterArray && setParameterArray([]);
|
|
144
170
|
setActiveFilters({});
|
|
145
171
|
setShowList(false);
|
|
146
172
|
},
|
|
@@ -163,11 +189,12 @@ var CustomSelect = function CustomSelect(_ref) {
|
|
|
163
189
|
customSelectId: customSelectId,
|
|
164
190
|
setParameterArray: setParameterArray,
|
|
165
191
|
activeFilters: activeFilters,
|
|
166
|
-
setActiveFilters: setActiveFilters
|
|
192
|
+
setActiveFilters: setActiveFilters,
|
|
193
|
+
onClickItem: onClickItem
|
|
167
194
|
}, customSelectId + option.id);
|
|
168
195
|
})
|
|
169
196
|
})]
|
|
170
|
-
}), showDatePicker && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Calendar.Calendar, {
|
|
197
|
+
})), showDatePicker && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Calendar.Calendar, {
|
|
171
198
|
onChange: onChangeDatePicker,
|
|
172
199
|
startDate: startDate,
|
|
173
200
|
endDate: endDate
|
|
@@ -15,6 +15,8 @@ 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: 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)
|
|
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: ", ";\n //padding: 10px 15px;\n //padding: 5px 5px;\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, function (props) {
|
|
19
|
+
return props.selectLabel !== "" ? "10px 15px" : "5px 5px";
|
|
20
|
+
});
|
|
19
21
|
|
|
20
22
|
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: "Admin",
|
|
30
|
+
id_user: 28,
|
|
31
|
+
name: "Proveedor",
|
|
32
|
+
last_name: "Colgate",
|
|
33
|
+
email: "ilopez@contentoh.com",
|
|
34
|
+
position: "Prueba Admin",
|
|
35
35
|
telephone: "+523111366336",
|
|
36
36
|
country: "México",
|
|
37
|
-
id_company:
|
|
38
|
-
id_cognito: "
|
|
37
|
+
id_company: 1,
|
|
38
|
+
id_cognito: "f5927f8e-cbf7-4922-9e09-e69ec0b2731a",
|
|
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: "cus_KuEt6R6vwmN09f",
|
|
45
45
|
id_role: 0,
|
|
46
46
|
active: 1,
|
|
47
|
-
is_retailer:
|
|
47
|
+
is_retailer: 0,
|
|
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: 76,
|
|
51
|
+
start_date: "2022-01-18T17:25:35.000Z",
|
|
52
|
+
end_date: "2023-01-18T17:25:35.000Z",
|
|
53
|
+
planID: 8,
|
|
54
|
+
plan: "prod_KtlhECVSFG2iro",
|
|
55
|
+
name: "Plan Pro",
|
|
56
|
+
user_limit: "20",
|
|
57
|
+
products_limit: "5000",
|
|
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-28/28.png?1662994279777"
|
|
61
61
|
},
|
|
62
|
-
jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.
|
|
62
|
+
jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI5ZjdmNzA0My1jZWFjLTRjYjktYjYxNy0zNjA1ODJlZDYxODAiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2Mjk5NDI3OCwibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2NjI5OTc4NzgsImlhdCI6MTY2Mjk5NDI3OCwiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.Qsmp4f9zCqXueUTk-ACPM5VY2wQ1nM9A8z-UVArukCpJNruA2ypaIuVpISDiCuBXBlRyILM7mzbuTADLvim-KbWT16Tsr9Q3dzCwM4KU3tFkxSblyM0hTdBVy6MKa7KVffGMLqScMVyMpavqbqLXC2GsANJMrBnnOwiTmrNSkFsO4bYovFGwsP6qiN85pMpAdHJjrNpCvilMBXWkNoNdah5_YRckTQOxGpGua_599eqgq4pg7wM1rxh4ze5ZynaQjRLwtXCR70hdXjOZCTyawzH4yiWYZNA4Sv9KkwLjT7vrFmBMjmm3yr72edT492qG6Iskkj_EYhKvOSl_4mDZhg"
|
|
63
63
|
};
|
|
@@ -130,7 +130,6 @@ var Dashboard = function Dashboard(_ref) {
|
|
|
130
130
|
switch (_context.prev = _context.next) {
|
|
131
131
|
case 0:
|
|
132
132
|
byStatus = _args.length > 1 && _args[1] !== undefined ? _args[1] : false;
|
|
133
|
-
console.log(jwt, user);
|
|
134
133
|
keys = Object.keys(queryObject);
|
|
135
134
|
string = [];
|
|
136
135
|
keys.forEach(function (key) {
|
|
@@ -138,29 +137,29 @@ var Dashboard = function Dashboard(_ref) {
|
|
|
138
137
|
});
|
|
139
138
|
query = string.join("&");
|
|
140
139
|
endpoint = byStatus ? process.env.REACT_APP_READ_ORDERS_BY_STATUS : process.env.REACT_APP_READ_REQUIRED_ORDERS;
|
|
141
|
-
_context.prev =
|
|
142
|
-
_context.next =
|
|
140
|
+
_context.prev = 6;
|
|
141
|
+
_context.next = 9;
|
|
143
142
|
return _axios.default.get("".concat(endpoint, "?").concat(query), {
|
|
144
143
|
headers: {
|
|
145
144
|
Authorization: jwt
|
|
146
145
|
}
|
|
147
146
|
});
|
|
148
147
|
|
|
149
|
-
case
|
|
148
|
+
case 9:
|
|
150
149
|
response = _context.sent;
|
|
151
150
|
return _context.abrupt("return", JSON.parse(response.data.body));
|
|
152
151
|
|
|
153
|
-
case
|
|
154
|
-
_context.prev =
|
|
155
|
-
_context.t0 = _context["catch"](
|
|
152
|
+
case 13:
|
|
153
|
+
_context.prev = 13;
|
|
154
|
+
_context.t0 = _context["catch"](6);
|
|
156
155
|
console.log(_context.t0);
|
|
157
156
|
|
|
158
|
-
case
|
|
157
|
+
case 16:
|
|
159
158
|
case "end":
|
|
160
159
|
return _context.stop();
|
|
161
160
|
}
|
|
162
161
|
}
|
|
163
|
-
}, _callee, null, [[
|
|
162
|
+
}, _callee, null, [[6, 13]]);
|
|
164
163
|
}));
|
|
165
164
|
|
|
166
165
|
return function loadProductVersions(_x) {
|
|
@@ -175,7 +174,7 @@ var Dashboard = function Dashboard(_ref) {
|
|
|
175
174
|
while (1) {
|
|
176
175
|
switch (_context2.prev = _context2.next) {
|
|
177
176
|
case 0:
|
|
178
|
-
isTHDUser = user.
|
|
177
|
+
isTHDUser = [657, 818, 819].includes(user.id_company);
|
|
179
178
|
_context2.next = 3;
|
|
180
179
|
return _axios.default.get("".concat(process.env.REACT_APP_RETAILER_ENDPOINT), {
|
|
181
180
|
headers: {
|
package/package.json
CHANGED
|
@@ -0,0 +1,14 @@
|
|
|
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,4 +1,5 @@
|
|
|
1
1
|
import { CustomSelect } from "./index";
|
|
2
|
+
import iconStar from "../../../assets/images/customSelect/starIcon.svg";
|
|
2
3
|
|
|
3
4
|
export default {
|
|
4
5
|
title: "Components/molecules/CustomSelect",
|
|
@@ -8,20 +9,27 @@ export default {
|
|
|
8
9
|
const Template = (args) => <CustomSelect {...args} />;
|
|
9
10
|
export const CustomSelectDefault = Template.bind({});
|
|
10
11
|
CustomSelectDefault.args = {
|
|
11
|
-
selectLabel: "Todos los departamentos",
|
|
12
|
+
// selectLabel: "Todos los departamentos",
|
|
12
13
|
defaultOption: "Todos los departamentos",
|
|
13
14
|
options: [
|
|
14
15
|
{
|
|
15
|
-
id:
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
16
|
+
id: 47,
|
|
17
|
+
name: "Enero 2023",
|
|
18
|
+
isSelected: true,
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
id: 49,
|
|
22
|
+
name: "Mis Favoritos",
|
|
21
23
|
},
|
|
22
|
-
{ id: 2, value: "Eléctrico" },
|
|
23
|
-
{ id: 3, value: "Ferretería" },
|
|
24
|
-
{ id: 4, value: "Herramientas" },
|
|
25
|
-
{ id: 5, value: "Iluminación" },
|
|
26
24
|
],
|
|
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
|
+
customOptions: <p>Esto es un customOptions</p>
|
|
27
35
|
};
|
|
@@ -7,6 +7,7 @@ export const SelecItem = ({
|
|
|
7
7
|
setParameterArray,
|
|
8
8
|
activeFilters,
|
|
9
9
|
setActiveFilters,
|
|
10
|
+
onClickItem,
|
|
10
11
|
}) => {
|
|
11
12
|
const [showSubOptions, setShowSubOptions] = useState(false);
|
|
12
13
|
const [chkGlobal, setChkGlobal] = useState(false);
|
|
@@ -17,6 +18,9 @@ export const SelecItem = ({
|
|
|
17
18
|
id={"main-item-" + option.id}
|
|
18
19
|
label={option.name}
|
|
19
20
|
onChange={(e) => {
|
|
21
|
+
if (onClickItem) {
|
|
22
|
+
onClickItem(e.target.checked, option.id)
|
|
23
|
+
}
|
|
20
24
|
const subOptions = option.subOptions;
|
|
21
25
|
const filtersCopy = { ...activeFilters };
|
|
22
26
|
if (subOptions) {
|
|
@@ -77,6 +81,9 @@ export const SelecItem = ({
|
|
|
77
81
|
activeFilters[option.name][sub.name]
|
|
78
82
|
}
|
|
79
83
|
onChange={(e) => {
|
|
84
|
+
if (onClickItem) {
|
|
85
|
+
onClickItem(e.target.checked, sub.id)
|
|
86
|
+
}
|
|
80
87
|
if (e.target.checked) {
|
|
81
88
|
setParameterArray((current) =>
|
|
82
89
|
[...current, sub.id].sort((a, b) => a - b)
|
|
@@ -13,8 +13,11 @@ export const CustomSelect = ({
|
|
|
13
13
|
customSelectId = "defaultSelectId",
|
|
14
14
|
defaultOption,
|
|
15
15
|
setParameterArray,
|
|
16
|
+
onClickItem,
|
|
17
|
+
icon,
|
|
18
|
+
customOptions,
|
|
16
19
|
}) => {
|
|
17
|
-
const [filters, setFilters] = useState(
|
|
20
|
+
const [filters, setFilters] = useState([]);
|
|
18
21
|
const [showList, setShowList] = useCloseModal(customSelectId);
|
|
19
22
|
const [text, setText] = useState("");
|
|
20
23
|
const [showDatePicker, setShowDatePicker] = useCloseModal(customSelectId);
|
|
@@ -33,7 +36,21 @@ export const CustomSelect = ({
|
|
|
33
36
|
const end = new Date();
|
|
34
37
|
setStartDate(start);
|
|
35
38
|
setEndDate(end);
|
|
36
|
-
|
|
39
|
+
const obj = {};
|
|
40
|
+
options.forEach((o) => {
|
|
41
|
+
const { name, isSelected, subOptions } = o;
|
|
42
|
+
if (isSelected) obj[name] = {};
|
|
43
|
+
subOptions?.forEach((so) => {
|
|
44
|
+
const { name: nameSO, isSelected: isSelectedSO } = so;
|
|
45
|
+
if (isSelectedSO) {
|
|
46
|
+
if (!obj[name]) obj[name] = {};
|
|
47
|
+
obj[name][nameSO] = true;
|
|
48
|
+
}
|
|
49
|
+
});
|
|
50
|
+
});
|
|
51
|
+
setActiveFilters(obj);
|
|
52
|
+
setFilters(options);
|
|
53
|
+
}, [options]);
|
|
37
54
|
|
|
38
55
|
const onChangeDatePicker = (dates) => {
|
|
39
56
|
const [start, end] = dates;
|
|
@@ -64,12 +81,18 @@ export const CustomSelect = ({
|
|
|
64
81
|
}, [text]);
|
|
65
82
|
|
|
66
83
|
return (
|
|
67
|
-
<Container id={customSelectId}>
|
|
84
|
+
<Container id={customSelectId} selectLabel={selectLabel}>
|
|
68
85
|
<div className="button-list" onClick={() => setShowList(!showList)}>
|
|
69
|
-
<p>{selectLabel}</p>
|
|
70
|
-
|
|
86
|
+
{selectLabel && <p>{selectLabel}</p>}
|
|
87
|
+
{icon ? (
|
|
88
|
+
<img src={icon} alt="Favorite" width={"20px"} />
|
|
89
|
+
) : (
|
|
90
|
+
<div className="arrow-item">◀</div>
|
|
91
|
+
)}
|
|
71
92
|
</div>
|
|
72
|
-
{showList && (
|
|
93
|
+
{showList && (customOptions ?
|
|
94
|
+
customOptions
|
|
95
|
+
: (
|
|
73
96
|
<div className="select-container">
|
|
74
97
|
{showSearchBar && (
|
|
75
98
|
<div className="search-bar-filter">
|
|
@@ -86,7 +109,7 @@ export const CustomSelect = ({
|
|
|
86
109
|
<div
|
|
87
110
|
className="default-option"
|
|
88
111
|
onClick={() => {
|
|
89
|
-
setParameterArray([]);
|
|
112
|
+
setParameterArray && setParameterArray([]);
|
|
90
113
|
setActiveFilters({});
|
|
91
114
|
setShowList(false);
|
|
92
115
|
}}
|
|
@@ -116,12 +139,13 @@ export const CustomSelect = ({
|
|
|
116
139
|
setParameterArray={setParameterArray}
|
|
117
140
|
activeFilters={activeFilters}
|
|
118
141
|
setActiveFilters={setActiveFilters}
|
|
142
|
+
onClickItem={onClickItem}
|
|
119
143
|
/>
|
|
120
144
|
)
|
|
121
145
|
)}
|
|
122
146
|
</div>
|
|
123
147
|
</div>
|
|
124
|
-
)}
|
|
148
|
+
))}
|
|
125
149
|
{showDatePicker && (
|
|
126
150
|
<Calendar
|
|
127
151
|
onChange={onChangeDatePicker}
|
|
@@ -9,7 +9,9 @@ export const Container = styled.div`
|
|
|
9
9
|
font-family: ${FontFamily.Raleway};
|
|
10
10
|
font-size: 13px;
|
|
11
11
|
display: flex;
|
|
12
|
-
padding: 10px 15px;
|
|
12
|
+
padding: ${(props) => (props.selectLabel !== "" ? "10px 15px" : "5px 5px")};
|
|
13
|
+
//padding: 10px 15px;
|
|
14
|
+
//padding: 5px 5px;
|
|
13
15
|
justify-content: space-between;
|
|
14
16
|
border-radius: 50px;
|
|
15
17
|
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: "Admin",
|
|
12
|
+
id_user: 28,
|
|
13
|
+
name: "Proveedor",
|
|
14
|
+
last_name: "Colgate",
|
|
15
|
+
email: "ilopez@contentoh.com",
|
|
16
|
+
position: "Prueba Admin",
|
|
17
17
|
telephone: "+523111366336",
|
|
18
18
|
country: "México",
|
|
19
|
-
id_company:
|
|
20
|
-
id_cognito: "
|
|
19
|
+
id_company: 1,
|
|
20
|
+
id_cognito: "f5927f8e-cbf7-4922-9e09-e69ec0b2731a",
|
|
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: "cus_KuEt6R6vwmN09f",
|
|
27
27
|
id_role: 0,
|
|
28
28
|
active: 1,
|
|
29
|
-
is_retailer:
|
|
29
|
+
is_retailer: 0,
|
|
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: 76,
|
|
33
|
+
start_date: "2022-01-18T17:25:35.000Z",
|
|
34
|
+
end_date: "2023-01-18T17:25:35.000Z",
|
|
35
|
+
planID: 8,
|
|
36
|
+
plan: "prod_KtlhECVSFG2iro",
|
|
37
|
+
name: "Plan Pro",
|
|
38
|
+
user_limit: "20",
|
|
39
|
+
products_limit: "5000",
|
|
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-28/28.png?1662994279777",
|
|
43
43
|
},
|
|
44
|
-
jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.
|
|
44
|
+
jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI5ZjdmNzA0My1jZWFjLTRjYjktYjYxNy0zNjA1ODJlZDYxODAiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2Mjk5NDI3OCwibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2NjI5OTc4NzgsImlhdCI6MTY2Mjk5NDI3OCwiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.Qsmp4f9zCqXueUTk-ACPM5VY2wQ1nM9A8z-UVArukCpJNruA2ypaIuVpISDiCuBXBlRyILM7mzbuTADLvim-KbWT16Tsr9Q3dzCwM4KU3tFkxSblyM0hTdBVy6MKa7KVffGMLqScMVyMpavqbqLXC2GsANJMrBnnOwiTmrNSkFsO4bYovFGwsP6qiN85pMpAdHJjrNpCvilMBXWkNoNdah5_YRckTQOxGpGua_599eqgq4pg7wM1rxh4ze5ZynaQjRLwtXCR70hdXjOZCTyawzH4yiWYZNA4Sv9KkwLjT7vrFmBMjmm3yr72edT492qG6Iskkj_EYhKvOSl_4mDZhg",
|
|
45
45
|
};
|
|
@@ -35,7 +35,6 @@ export const Dashboard = ({ jwt, user }) => {
|
|
|
35
35
|
const [dateOptions, setDateOptions] = useState([]);
|
|
36
36
|
|
|
37
37
|
const loadProductVersions = async (queryObject, byStatus = false) => {
|
|
38
|
-
console.log(jwt, user);
|
|
39
38
|
const keys = Object.keys(queryObject);
|
|
40
39
|
let string = [];
|
|
41
40
|
keys.forEach((key) => string.push(`${key}=${queryObject[key]}`));
|
|
@@ -56,7 +55,7 @@ export const Dashboard = ({ jwt, user }) => {
|
|
|
56
55
|
};
|
|
57
56
|
|
|
58
57
|
const getRetailers = async () => {
|
|
59
|
-
const isTHDUser = user.
|
|
58
|
+
const isTHDUser = [657, 818, 819].includes(user.id_company);
|
|
60
59
|
const retailersResponse = await axios.get(
|
|
61
60
|
`${process.env.REACT_APP_RETAILER_ENDPOINT}`,
|
|
62
61
|
{
|
|
@@ -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;
|
package/dist/components/pages/RegistrationLoginFirstStep/RegistrationLoginFirstStep.stories.js
DELETED
|
@@ -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;
|