contentoh-components-library 21.2.50 → 21.2.51

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/assets/images/customSelect/starIcon.svg +14 -0
  2. package/dist/components/molecules/CustomSelect/CustomSelect.stories.js +21 -22
  3. package/dist/components/molecules/CustomSelect/SelectItem.js +10 -1
  4. package/dist/components/molecules/CustomSelect/index.js +36 -9
  5. package/dist/components/molecules/CustomSelect/styles.js +3 -1
  6. package/dist/components/pages/Dashboard/Dashboard.stories.js +19 -19
  7. package/dist/components/pages/Dashboard/index.js +1 -1
  8. package/package.json +1 -1
  9. package/src/assets/images/customSelect/starIcon.svg +14 -0
  10. package/src/components/molecules/CustomSelect/CustomSelect.stories.js +19 -11
  11. package/src/components/molecules/CustomSelect/SelectItem.js +7 -0
  12. package/src/components/molecules/CustomSelect/index.js +32 -8
  13. package/src/components/molecules/CustomSelect/styles.js +3 -1
  14. package/src/components/pages/Dashboard/Dashboard.stories.js +19 -19
  15. package/src/components/pages/Dashboard/index.js +1 -1
package/dist/assets/images/customSelect/starIcon.svg ADDED
@@ -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>
package/dist/components/molecules/CustomSelect/CustomSelect.stories.js CHANGED
@@ -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: 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"
34
+ id: 47,
35
+ name: "Enero 2023",
36
+ isSelected: true
50
37
  }, {
51
- id: 5,
52
- value: "Iluminación"
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
  };
package/dist/components/molecules/CustomSelect/SelectItem.js CHANGED
@@ -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) {
package/dist/components/molecules/CustomSelect/index.js CHANGED
@@ -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)(options || []),
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)("div", {
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
package/dist/components/molecules/CustomSelect/styles.js CHANGED
@@ -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;
package/dist/components/pages/Dashboard/Dashboard.stories.js CHANGED
@@ -27,37 +27,37 @@ var DashboardDeafult = Template.bind({});
27
27
  exports.DashboardDeafult = DashboardDeafult;
28
28
  DashboardDeafult.args = {
29
29
  user: {
30
- id_user: 59,
31
- name: "The Home",
32
- last_name: "Depot",
33
- email: "cadena.ismael@allfreemail.net",
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: 7,
38
- id_cognito: "5884ae34-59d6-4454-b98e-821518bcc3a7",
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: 1,
47
+ is_retailer: 0,
48
48
  email_notify: 1,
49
49
  membership: {
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",
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-59/59.png?1663928202230"
60
+ src: "https://content-management-profile.s3.amazonaws.com/id-28/28.png?1662994279777"
61
61
  },
62
- jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI1ODg0YWUzNC01OWQ2LTQ0NTQtYjk4ZS04MjE1MThiY2MzYTciLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjU4ODRhZTM0LTU5ZDYtNDQ1NC1iOThlLTgyMTUxOGJjYzNhNyIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJmY2IzMGVjYi1lMjc1LTQyM2UtYjQwMi05YTBjMWNjNzM2YzMiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2MzkyODIwMCwibmFtZSI6IkNhZGVuYSBJc21hZWwiLCJwaG9uZV9udW1iZXIiOiIrNTIzMTExMzY2MzM2IiwiZXhwIjoxNjYzOTMxODAwLCJpYXQiOjE2NjM5MjgyMDAsImVtYWlsIjoiY2FkZW5hLmlzbWFlbEBhbGxmcmVlbWFpbC5uZXQifQ.E5NPYa6ucsQGTij8gzihdT2zv7gmJwxCZwrbBnQSYXIBw7cMK7U0eC7z4VBEm3tFYCA9SoxIdQtfuGj_lw2-CaXqkkMu4929TtlrrK_nVHYlwsXMSGIW3bComTb2toX8bshD1kd3FnNBFujhrQ-ouuBfQjy2d4fVZA1M4sZi_eT8Lxjo1uI_LfgYxrlS8_IKgfz71NuM-Uc2vxidm2_AG0g7PboSPW24bv1R-Lv272hoR_SmjBPY-I2Pw8DTZwQxWmtoU_MOx1YnY97qx5G6zqbTsjbNYkk97xPb87tKQTo946pB80fOkipTrD2xwhc8AOZQywwKa5NT4nGayDKLdg"
62
+ jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI5ZjdmNzA0My1jZWFjLTRjYjktYjYxNy0zNjA1ODJlZDYxODAiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2Mjk5NDI3OCwibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2NjI5OTc4NzgsImlhdCI6MTY2Mjk5NDI3OCwiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.Qsmp4f9zCqXueUTk-ACPM5VY2wQ1nM9A8z-UVArukCpJNruA2ypaIuVpISDiCuBXBlRyILM7mzbuTADLvim-KbWT16Tsr9Q3dzCwM4KU3tFkxSblyM0hTdBVy6MKa7KVffGMLqScMVyMpavqbqLXC2GsANJMrBnnOwiTmrNSkFsO4bYovFGwsP6qiN85pMpAdHJjrNpCvilMBXWkNoNdah5_YRckTQOxGpGua_599eqgq4pg7wM1rxh4ze5ZynaQjRLwtXCR70hdXjOZCTyawzH4yiWYZNA4Sv9KkwLjT7vrFmBMjmm3yr72edT492qG6Iskkj_EYhKvOSl_4mDZhg"
63
63
  };
package/dist/components/pages/Dashboard/index.js CHANGED
@@ -174,7 +174,7 @@ var Dashboard = function Dashboard(_ref) {
174
174
  while (1) {
175
175
  switch (_context2.prev = _context2.next) {
176
176
  case 0:
177
- isTHDUser = user.is_retailer === 1;
177
+ isTHDUser = [657, 818, 819].includes(user.id_company);
178
178
  _context2.next = 3;
179
179
  return _axios.default.get("".concat(process.env.REACT_APP_RETAILER_ENDPOINT), {
180
180
  headers: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "contentoh-components-library",
3
- "version": "21.2.50",
3
+ "version": "21.2.51",
4
4
  "dependencies": {
5
5
  "@aws-amplify/auth": "^4.5.3",
6
6
  "@aws-amplify/datastore": "^3.11.0",
package/src/assets/images/customSelect/starIcon.svg ADDED
@@ -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>
package/src/components/molecules/CustomSelect/CustomSelect.stories.js CHANGED
@@ -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: 1,
16
- value: "Decoración",
17
- subOptions: [
18
- { id: 1, value: "Espejos" },
19
- { id: 2, value: "Persianas" },
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
  };
package/src/components/molecules/CustomSelect/SelectItem.js CHANGED
@@ -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)
package/src/components/molecules/CustomSelect/index.js CHANGED
@@ -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(options || []);
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
- <div className="arrow-item">&#9664;</div>
86
+ {selectLabel && <p>{selectLabel}</p>}
87
+ {icon ? (
88
+ <img src={icon} alt="Favorite" width={"20px"} />
89
+ ) : (
90
+ <div className="arrow-item">&#9664;</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}
package/src/components/molecules/CustomSelect/styles.js CHANGED
@@ -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;
package/src/components/pages/Dashboard/Dashboard.stories.js CHANGED
@@ -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: 59,
13
- name: "The Home",
14
- last_name: "Depot",
15
- email: "cadena.ismael@allfreemail.net",
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: 7,
20
- id_cognito: "5884ae34-59d6-4454-b98e-821518bcc3a7",
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: 1,
29
+ is_retailer: 0,
30
30
  email_notify: 1,
31
31
  membership: {
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",
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-59/59.png?1663928202230",
42
+ src: "https://content-management-profile.s3.amazonaws.com/id-28/28.png?1662994279777",
43
43
  },
44
- jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI1ODg0YWUzNC01OWQ2LTQ0NTQtYjk4ZS04MjE1MThiY2MzYTciLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjU4ODRhZTM0LTU5ZDYtNDQ1NC1iOThlLTgyMTUxOGJjYzNhNyIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJmY2IzMGVjYi1lMjc1LTQyM2UtYjQwMi05YTBjMWNjNzM2YzMiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2MzkyODIwMCwibmFtZSI6IkNhZGVuYSBJc21hZWwiLCJwaG9uZV9udW1iZXIiOiIrNTIzMTExMzY2MzM2IiwiZXhwIjoxNjYzOTMxODAwLCJpYXQiOjE2NjM5MjgyMDAsImVtYWlsIjoiY2FkZW5hLmlzbWFlbEBhbGxmcmVlbWFpbC5uZXQifQ.E5NPYa6ucsQGTij8gzihdT2zv7gmJwxCZwrbBnQSYXIBw7cMK7U0eC7z4VBEm3tFYCA9SoxIdQtfuGj_lw2-CaXqkkMu4929TtlrrK_nVHYlwsXMSGIW3bComTb2toX8bshD1kd3FnNBFujhrQ-ouuBfQjy2d4fVZA1M4sZi_eT8Lxjo1uI_LfgYxrlS8_IKgfz71NuM-Uc2vxidm2_AG0g7PboSPW24bv1R-Lv272hoR_SmjBPY-I2Pw8DTZwQxWmtoU_MOx1YnY97qx5G6zqbTsjbNYkk97xPb87tKQTo946pB80fOkipTrD2xwhc8AOZQywwKa5NT4nGayDKLdg",
44
+ jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI5ZjdmNzA0My1jZWFjLTRjYjktYjYxNy0zNjA1ODJlZDYxODAiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2Mjk5NDI3OCwibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2NjI5OTc4NzgsImlhdCI6MTY2Mjk5NDI3OCwiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.Qsmp4f9zCqXueUTk-ACPM5VY2wQ1nM9A8z-UVArukCpJNruA2ypaIuVpISDiCuBXBlRyILM7mzbuTADLvim-KbWT16Tsr9Q3dzCwM4KU3tFkxSblyM0hTdBVy6MKa7KVffGMLqScMVyMpavqbqLXC2GsANJMrBnnOwiTmrNSkFsO4bYovFGwsP6qiN85pMpAdHJjrNpCvilMBXWkNoNdah5_YRckTQOxGpGua_599eqgq4pg7wM1rxh4ze5ZynaQjRLwtXCR70hdXjOZCTyawzH4yiWYZNA4Sv9KkwLjT7vrFmBMjmm3yr72edT492qG6Iskkj_EYhKvOSl_4mDZhg",
45
45
  };
package/src/components/pages/Dashboard/index.js CHANGED
@@ -55,7 +55,7 @@ export const Dashboard = ({ jwt, user }) => {
55
55
  };
56
56
 
57
57
  const getRetailers = async () => {
58
- const isTHDUser = user.is_retailer === 1;
58
+ const isTHDUser = [657, 818, 819].includes(user.id_company);
59
59
  const retailersResponse = await axios.get(
60
60
  `${process.env.REACT_APP_RETAILER_ENDPOINT}`,
61
61
  {