contentoh-components-library 21.2.57 → 21.2.58

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 +20 -51
  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 +83 -58
  13. package/src/components/molecules/CustomSelect/styles.js +3 -1
  14. package/src/components/pages/Dashboard/Dashboard.stories.js +20 -56
  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
@@ -36,9 +36,12 @@ var CustomSelect = function CustomSelect(_ref) {
36
36
  customSelectId = _ref$customSelectId === void 0 ? "defaultSelectId" : _ref$customSelectId,
37
37
  defaultOption = _ref.defaultOption,
38
38
  setParameterArray = _ref.setParameterArray,
39
+ onClickItem = _ref.onClickItem,
40
+ icon = _ref.icon,
41
+ customOptions = _ref.customOptions,
39
42
  showFilterString = _ref.showFilterString;
40
43
 
41
- var _useState = (0, _react.useState)(options || []),
44
+ var _useState = (0, _react.useState)([]),
42
45
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
43
46
  filters = _useState2[0],
44
47
  setFilters = _useState2[1];
@@ -94,7 +97,25 @@ var CustomSelect = function CustomSelect(_ref) {
94
97
  var end = new Date();
95
98
  setStartDate(start);
96
99
  setEndDate(end);
97
- }, []);
100
+ var obj = {};
101
+ options.forEach(function (o) {
102
+ var name = o.name,
103
+ isSelected = o.isSelected,
104
+ subOptions = o.subOptions;
105
+ if (isSelected) obj[name] = {};
106
+ subOptions === null || subOptions === void 0 ? void 0 : subOptions.forEach(function (so) {
107
+ var nameSO = so.name,
108
+ isSelectedSO = so.isSelected;
109
+
110
+ if (isSelectedSO) {
111
+ if (!obj[name]) obj[name] = {};
112
+ obj[name][nameSO] = true;
113
+ }
114
+ });
115
+ });
116
+ setActiveFilters(obj);
117
+ setFilters(options);
118
+ }, [options]);
98
119
 
99
120
  var onChangeDatePicker = function onChangeDatePicker(dates) {
100
121
  var _dates = (0, _slicedToArray2.default)(dates, 2),
@@ -136,20 +157,25 @@ var CustomSelect = function CustomSelect(_ref) {
136
157
  }, [activeFilters]);
137
158
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
138
159
  id: customSelectId,
160
+ selectLabel: selectLabel,
139
161
  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
140
162
  className: "button-list",
141
163
  onClick: function onClick() {
142
164
  return setShowList(!showList);
143
165
  },
144
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
145
- children: filtersString
166
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
167
+ children: [filtersString, " "]
146
168
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
147
169
  children: filtersCounter > 0 && "+".concat(filtersCounter)
148
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
170
+ }), icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
171
+ src: icon,
172
+ alt: "Favorite",
173
+ width: "20px"
174
+ }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
149
175
  className: "arrow-item",
150
176
  children: "\u25C0"
151
177
  })]
152
- }), showList && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
178
+ }), showList && (customOptions ? customOptions : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
153
179
  className: "select-container",
154
180
  children: [showSearchBar && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
155
181
  className: "search-bar-filter",
@@ -165,7 +191,7 @@ var CustomSelect = function CustomSelect(_ref) {
165
191
  }), defaultOption && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
166
192
  className: "default-option",
167
193
  onClick: function onClick() {
168
- setParameterArray([]);
194
+ setParameterArray && setParameterArray([]);
169
195
  setActiveFilters({});
170
196
  setShowList(false);
171
197
  setFiltersString(selectLabel);
@@ -191,11 +217,12 @@ var CustomSelect = function CustomSelect(_ref) {
191
217
  customSelectId: customSelectId,
192
218
  setParameterArray: setParameterArray,
193
219
  activeFilters: activeFilters,
194
- setActiveFilters: setActiveFilters
220
+ setActiveFilters: setActiveFilters,
221
+ onClickItem: onClickItem
195
222
  }, customSelectId + option.id);
196
223
  })
197
224
  })]
198
- }), showDatePicker && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Calendar.Calendar, {
225
+ })), showDatePicker && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Calendar.Calendar, {
199
226
  onChange: onChangeDatePicker,
200
227
  startDate: startDate,
201
228
  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 min-width: 150px;\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 & > p {\n max-width: 140px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\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 min-width: 150px;\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 & > p {\n max-width: 140px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\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,68 +27,37 @@ var DashboardDeafult = Template.bind({});
27
27
  exports.DashboardDeafult = DashboardDeafult;
28
28
  DashboardDeafult.args = {
29
29
  user: {
30
- id_user: 1237,
31
- name: "The Home",
32
- last_name: "Depot",
33
- email: "retailerThd@AllFreeMail.net",
34
- position: "Retailer",
35
- telephone: "+523111111111",
30
+ id_user: 28,
31
+ name: "Proveedor",
32
+ last_name: "Colgate",
33
+ email: "ilopez@contentoh.com",
34
+ position: "Prueba Admin",
35
+ telephone: "+523111366336",
36
36
  country: "México",
37
- id_company: 817,
38
- id_cognito: "abe188e2-25b1-4a19-8672-0d4bc11a9bf2",
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: null,
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: 798,
51
- start_date: "2022-06-19T04:25:07.000Z",
52
- end_date: "2023-06-19T04:25:07.000Z",
53
- planID: 6,
54
- plan: "prod_KvGd6YSTJyR3AP",
55
- name: "Plan Small",
56
- user_limit: "10",
57
- products_limit: "1000",
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-prod.s3.amazonaws.com/id-1237/1237.png?1664817089596"
60
+ src: "https://content-management-profile.s3.amazonaws.com/id-28/28.png?1662994279777"
61
61
  },
62
- company: {
63
- id_company: 817,
64
- trade_name: "Retailer acc",
65
- company_name: "Retailer acc",
66
- rfc: "ASER12345",
67
- adress: "Av. Insurgentes",
68
- about_company: null,
69
- telephone: null,
70
- web_site: null,
71
- zip_code: null,
72
- email: null,
73
- social_link: null,
74
- is_retailer: 1,
75
- retailers: [{
76
- id: 58,
77
- name: "The Home Depot Golden",
78
- country: "México"
79
- }, {
80
- id: 59,
81
- name: "The Home Depot Platinum",
82
- country: "México"
83
- }, {
84
- id: 60,
85
- name: "The Home Depot Resizing",
86
- country: "México"
87
- }, {
88
- id: 61,
89
- name: "Home Depot TAB",
90
- country: "México"
91
- }]
92
- },
93
- jwt: "eyJraWQiOiJEV3owZnNieXg2MXNFcVduN3RCXC81bVhod3ZNbFZIOTgwUnZcL3RjT0lKdEk9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJhYmUxODhlMi0yNWIxLTRhMTktODY3Mi0wZDRiYzExYTliZjIiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfbFN6UVo0WjdSIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImFiZTE4OGUyLTI1YjEtNGExOS04NjcyLTBkNGJjMTFhOWJmMiIsImF1ZCI6IjUyZDlza2tkY2c4cWpwODhvb2sxdXNlNm1rIiwiZXZlbnRfaWQiOiJjNDcxOTY2NC0wODU0LTQ3YjktOWZiNS1mYzJhMjg5YTg1MjEiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2NDgxNzA4OSwibmFtZSI6IlJldGFpbGVyIEFjYyIsInBob25lX251bWJlciI6Iis1MjMxMTExMTExMTEiLCJleHAiOjE2NjQ4MjA2ODksImlhdCI6MTY2NDgxNzA4OSwiZW1haWwiOiJyZXRhaWxlclRoZEBBbGxGcmVlTWFpbC5uZXQifQ.PB_rXUwbbQlTHv2NXOkz_6OygfJmjXWJMzGsztiM0DgZkuX75qk_ZKEb_-UutWAzpp73tBu3vUodjzPC8eWDriGXGrZ02rRtWDE3l3MyvyC-3R83nAKh6Ps8W6nUgbRRy7Z9TKrN9m3petQKZ-ZnvmJg8Dg8p72f7NzJdia_We4AK7qox5f_22T6CbISGNfxwFrM6p7aFRjzwrFKuIBASDIcHs1KXvDYBTNtsRs6tBMtj-px8zl0HlE3wKje-49-apYdl5hzgQz0de_AKkYwqJklOuoqpY_8OVjL2ehoNzPlNJNv3wIHVQLN3VlKUNlwUDlfTHJhbWmWE820Jv77fQ"
62
+ jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI5ZjdmNzA0My1jZWFjLTRjYjktYjYxNy0zNjA1ODJlZDYxODAiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2Mjk5NDI3OCwibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2NjI5OTc4NzgsImlhdCI6MTY2Mjk5NDI3OCwiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.Qsmp4f9zCqXueUTk-ACPM5VY2wQ1nM9A8z-UVArukCpJNruA2ypaIuVpISDiCuBXBlRyILM7mzbuTADLvim-KbWT16Tsr9Q3dzCwM4KU3tFkxSblyM0hTdBVy6MKa7KVffGMLqScMVyMpavqbqLXC2GsANJMrBnnOwiTmrNSkFsO4bYovFGwsP6qiN85pMpAdHJjrNpCvilMBXWkNoNdah5_YRckTQOxGpGua_599eqgq4pg7wM1rxh4ze5ZynaQjRLwtXCR70hdXjOZCTyawzH4yiWYZNA4Sv9KkwLjT7vrFmBMjmm3yr72edT492qG6Iskkj_EYhKvOSl_4mDZhg"
94
63
  };
package/dist/components/pages/Dashboard/index.js CHANGED
@@ -193,7 +193,7 @@ var Dashboard = function Dashboard(_ref) {
193
193
  while (1) {
194
194
  switch (_context2.prev = _context2.next) {
195
195
  case 0:
196
- isTHDUser = user.is_retailer === 1;
196
+ isTHDUser = [657, 818, 819].includes(user.id_company);
197
197
  _context2.next = 3;
198
198
  return _axios.default.get("".concat(process.env.REACT_APP_RETAILER_ENDPOINT), {
199
199
  headers: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "contentoh-components-library",
3
- "version": "21.2.57",
3
+ "version": "21.2.58",
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,9 +13,12 @@ export const CustomSelect = ({
13
13
  customSelectId = "defaultSelectId",
14
14
  defaultOption,
15
15
  setParameterArray,
16
+ onClickItem,
17
+ icon,
18
+ customOptions,
16
19
  showFilterString,
17
20
  }) => {
18
- const [filters, setFilters] = useState(options || []);
21
+ const [filters, setFilters] = useState([]);
19
22
  const [showList, setShowList] = useCloseModal(customSelectId);
20
23
  const [text, setText] = useState("");
21
24
  const [showDatePicker, setShowDatePicker] = useCloseModal(customSelectId);
@@ -36,7 +39,21 @@ export const CustomSelect = ({
36
39
  const end = new Date();
37
40
  setStartDate(start);
38
41
  setEndDate(end);
39
- }, []);
42
+ const obj = {};
43
+ options.forEach((o) => {
44
+ const { name, isSelected, subOptions } = o;
45
+ if (isSelected) obj[name] = {};
46
+ subOptions?.forEach((so) => {
47
+ const { name: nameSO, isSelected: isSelectedSO } = so;
48
+ if (isSelectedSO) {
49
+ if (!obj[name]) obj[name] = {};
50
+ obj[name][nameSO] = true;
51
+ }
52
+ });
53
+ });
54
+ setActiveFilters(obj);
55
+ setFilters(options);
56
+ }, [options]);
40
57
 
41
58
  const onChangeDatePicker = (dates) => {
42
59
  const [start, end] = dates;
@@ -82,68 +99,76 @@ export const CustomSelect = ({
82
99
  }, [activeFilters]);
83
100
 
84
101
  return (
85
- <Container id={customSelectId}>
102
+ <Container id={customSelectId} selectLabel={selectLabel}>
86
103
  <div className="button-list" onClick={() => setShowList(!showList)}>
87
- <p>{filtersString}</p>
104
+ <p>{filtersString} </p>
88
105
  <p>{filtersCounter > 0 && `+${filtersCounter}`}</p>
89
- <div className="arrow-item">&#9664;</div>
106
+ {icon ? (
107
+ <img src={icon} alt="Favorite" width={"20px"} />
108
+ ) : (
109
+ <div className="arrow-item">&#9664;</div>
110
+ )}
90
111
  </div>
91
- {showList && (
92
- <div className="select-container">
93
- {showSearchBar && (
94
- <div className="search-bar-filter">
95
- <img src={searchIcon} alt="search icon" />
96
- <input
97
- type="text"
98
- placeholder={placeHolder}
99
- value={text}
100
- onChange={onChange}
101
- />
102
- </div>
103
- )}
104
- {defaultOption && (
105
- <div
106
- className="default-option"
107
- onClick={() => {
108
- setParameterArray([]);
109
- setActiveFilters({});
110
- setShowList(false);
111
- setFiltersString(selectLabel);
112
- setFiltersCounter(0);
113
- }}
114
- >
115
- <p>{defaultOption}</p>
116
- </div>
117
- )}
118
- <div className="filters-container">
119
- {filters?.map((option) =>
120
- customSelectId === "dates-select" ? (
121
- <div
122
- className="dates-select-item"
123
- key={customSelectId + option.id}
124
- onClick={() => {
125
- option.function
126
- ? option.function(setShowDatePicker)
127
- : setShowDatePicker(true);
128
- setFiltersString(option.name);
129
- }}
130
- >
131
- <p>{option.name}</p>
132
- </div>
133
- ) : (
134
- <SelecItem
135
- key={customSelectId + option.id}
136
- option={option}
137
- customSelectId={customSelectId}
138
- setParameterArray={setParameterArray}
139
- activeFilters={activeFilters}
140
- setActiveFilters={setActiveFilters}
112
+ {showList &&
113
+ (customOptions ? (
114
+ customOptions
115
+ ) : (
116
+ <div className="select-container">
117
+ {showSearchBar && (
118
+ <div className="search-bar-filter">
119
+ <img src={searchIcon} alt="search icon" />
120
+ <input
121
+ type="text"
122
+ placeholder={placeHolder}
123
+ value={text}
124
+ onChange={onChange}
141
125
  />
142
- )
126
+ </div>
143
127
  )}
128
+ {defaultOption && (
129
+ <div
130
+ className="default-option"
131
+ onClick={() => {
132
+ setParameterArray && setParameterArray([]);
133
+ setActiveFilters({});
134
+ setShowList(false);
135
+ setFiltersString(selectLabel);
136
+ setFiltersCounter(0);
137
+ }}
138
+ >
139
+ <p>{defaultOption}</p>
140
+ </div>
141
+ )}
142
+ <div className="filters-container">
143
+ {filters?.map((option) =>
144
+ customSelectId === "dates-select" ? (
145
+ <div
146
+ className="dates-select-item"
147
+ key={customSelectId + option.id}
148
+ onClick={() => {
149
+ option.function
150
+ ? option.function(setShowDatePicker)
151
+ : setShowDatePicker(true);
152
+ setFiltersString(option.name);
153
+ }}
154
+ >
155
+ <p>{option.name}</p>
156
+ </div>
157
+ ) : (
158
+ <SelecItem
159
+ key={customSelectId + option.id}
160
+ option={option}
161
+ customSelectId={customSelectId}
162
+ setParameterArray={setParameterArray}
163
+ activeFilters={activeFilters}
164
+ setActiveFilters={setActiveFilters}
165
+ onClickItem={onClickItem}
166
+ />
167
+ )
168
+ )}
169
+ </div>
144
170
  </div>
145
- </div>
146
- )}
171
+ ))}
147
172
  {showDatePicker && (
148
173
  <Calendar
149
174
  onChange={onChangeDatePicker}
package/src/components/molecules/CustomSelect/styles.js CHANGED
@@ -10,7 +10,9 @@ export const Container = styled.div`
10
10
  font-family: ${FontFamily.Raleway};
11
11
  font-size: 13px;
12
12
  display: flex;
13
- padding: 10px 15px;
13
+ padding: ${(props) => (props.selectLabel !== "" ? "10px 15px" : "5px 5px")};
14
+ //padding: 10px 15px;
15
+ //padding: 5px 5px;
14
16
  justify-content: space-between;
15
17
  border-radius: 50px;
16
18
  background-color: #fff;
package/src/components/pages/Dashboard/Dashboard.stories.js CHANGED
@@ -9,73 +9,37 @@ const Template = (args) => <Dashboard {...args} />;
9
9
  export const DashboardDeafult = Template.bind({});
10
10
  DashboardDeafult.args = {
11
11
  user: {
12
- id_user: 1237,
13
- name: "The Home",
14
- last_name: "Depot",
15
- email: "retailerThd@AllFreeMail.net",
16
- position: "Retailer",
17
- telephone: "+523111111111",
12
+ id_user: 28,
13
+ name: "Proveedor",
14
+ last_name: "Colgate",
15
+ email: "ilopez@contentoh.com",
16
+ position: "Prueba Admin",
17
+ telephone: "+523111366336",
18
18
  country: "México",
19
- id_company: 817,
20
- id_cognito: "abe188e2-25b1-4a19-8672-0d4bc11a9bf2",
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: null,
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: 798,
33
- start_date: "2022-06-19T04:25:07.000Z",
34
- end_date: "2023-06-19T04:25:07.000Z",
35
- planID: 6,
36
- plan: "prod_KvGd6YSTJyR3AP",
37
- name: "Plan Small",
38
- user_limit: "10",
39
- products_limit: "1000",
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-prod.s3.amazonaws.com/id-1237/1237.png?1664817089596",
42
+ src: "https://content-management-profile.s3.amazonaws.com/id-28/28.png?1662994279777",
43
43
  },
44
- company: {
45
- id_company: 817,
46
- trade_name: "Retailer acc",
47
- company_name: "Retailer acc",
48
- rfc: "ASER12345",
49
- adress: "Av. Insurgentes",
50
- about_company: null,
51
- telephone: null,
52
- web_site: null,
53
- zip_code: null,
54
- email: null,
55
- social_link: null,
56
- is_retailer: 1,
57
- retailers: [
58
- {
59
- id: 58,
60
- name: "The Home Depot Golden",
61
- country: "México",
62
- },
63
- {
64
- id: 59,
65
- name: "The Home Depot Platinum",
66
- country: "México",
67
- },
68
- {
69
- id: 60,
70
- name: "The Home Depot Resizing",
71
- country: "México",
72
- },
73
- {
74
- id: 61,
75
- name: "Home Depot TAB",
76
- country: "México",
77
- },
78
- ],
79
- },
80
- jwt: "eyJraWQiOiJEV3owZnNieXg2MXNFcVduN3RCXC81bVhod3ZNbFZIOTgwUnZcL3RjT0lKdEk9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJhYmUxODhlMi0yNWIxLTRhMTktODY3Mi0wZDRiYzExYTliZjIiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfbFN6UVo0WjdSIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImFiZTE4OGUyLTI1YjEtNGExOS04NjcyLTBkNGJjMTFhOWJmMiIsImF1ZCI6IjUyZDlza2tkY2c4cWpwODhvb2sxdXNlNm1rIiwiZXZlbnRfaWQiOiJjNDcxOTY2NC0wODU0LTQ3YjktOWZiNS1mYzJhMjg5YTg1MjEiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2NDgxNzA4OSwibmFtZSI6IlJldGFpbGVyIEFjYyIsInBob25lX251bWJlciI6Iis1MjMxMTExMTExMTEiLCJleHAiOjE2NjQ4MjA2ODksImlhdCI6MTY2NDgxNzA4OSwiZW1haWwiOiJyZXRhaWxlclRoZEBBbGxGcmVlTWFpbC5uZXQifQ.PB_rXUwbbQlTHv2NXOkz_6OygfJmjXWJMzGsztiM0DgZkuX75qk_ZKEb_-UutWAzpp73tBu3vUodjzPC8eWDriGXGrZ02rRtWDE3l3MyvyC-3R83nAKh6Ps8W6nUgbRRy7Z9TKrN9m3petQKZ-ZnvmJg8Dg8p72f7NzJdia_We4AK7qox5f_22T6CbISGNfxwFrM6p7aFRjzwrFKuIBASDIcHs1KXvDYBTNtsRs6tBMtj-px8zl0HlE3wKje-49-apYdl5hzgQz0de_AKkYwqJklOuoqpY_8OVjL2ehoNzPlNJNv3wIHVQLN3VlKUNlwUDlfTHJhbWmWE820Jv77fQ",
44
+ jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI5ZjdmNzA0My1jZWFjLTRjYjktYjYxNy0zNjA1ODJlZDYxODAiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2Mjk5NDI3OCwibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2NjI5OTc4NzgsImlhdCI6MTY2Mjk5NDI3OCwiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.Qsmp4f9zCqXueUTk-ACPM5VY2wQ1nM9A8z-UVArukCpJNruA2ypaIuVpISDiCuBXBlRyILM7mzbuTADLvim-KbWT16Tsr9Q3dzCwM4KU3tFkxSblyM0hTdBVy6MKa7KVffGMLqScMVyMpavqbqLXC2GsANJMrBnnOwiTmrNSkFsO4bYovFGwsP6qiN85pMpAdHJjrNpCvilMBXWkNoNdah5_YRckTQOxGpGua_599eqgq4pg7wM1rxh4ze5ZynaQjRLwtXCR70hdXjOZCTyawzH4yiWYZNA4Sv9KkwLjT7vrFmBMjmm3yr72edT492qG6Iskkj_EYhKvOSl_4mDZhg",
81
45
  };
package/src/components/pages/Dashboard/index.js CHANGED
@@ -61,7 +61,7 @@ export const Dashboard = ({ jwt, user, company }) => {
61
61
  };
62
62
 
63
63
  const getRetailers = async () => {
64
- const isTHDUser = user.is_retailer === 1;
64
+ const isTHDUser = [657, 818, 819].includes(user.id_company);
65
65
  const retailersResponse = await axios.get(
66
66
  `${process.env.REACT_APP_RETAILER_ENDPOINT}`,
67
67
  {