@bonlineza/luxity-lib 2.36.1-uk-platform.1 → 2.36.2

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 (94) hide show
  1. package/Accordion.js +116 -76
  2. package/AddInterest.js +777 -440
  3. package/AddProductInterest.js +644 -485
  4. package/BrandSelector.js +336 -176
  5. package/Checkbox.js +101 -68
  6. package/CheckboxButton.js +124 -79
  7. package/CommunicationPreferenceOptionsRenderer.js +169 -159
  8. package/CommunicationPreferenceSection.js +178 -166
  9. package/CommunicationPreferences.js +427 -549
  10. package/ConditionSelector.js +336 -174
  11. package/CountryCodeSelect.js +10 -7
  12. package/CurrencyInputFormatter.js +56 -29
  13. package/CurrencySelect.js +49 -23
  14. package/DropdownSelector.js +92 -68
  15. package/GALink.js +16 -6
  16. package/GenderSelector.js +142 -88
  17. package/GraphQLDropdownSelector.js +1508 -929
  18. package/GraphQLMultiSelector.js +274 -141
  19. package/IconHeader.js +25 -11
  20. package/IconWrapper.js +7 -3
  21. package/InterestCatSelector.js +74 -34
  22. package/InterestItem.js +187 -103
  23. package/Interests.js +1463 -913
  24. package/InterestsSubheading.js +10 -5
  25. package/InvertedTextButton.js +63 -27
  26. package/LuxityAppSideNav.js +21 -18
  27. package/LuxityDesktopHeader.js +451 -298
  28. package/LuxityFooter.js +321 -430
  29. package/LuxityGraphQLDropdownSelector.js +1540 -945
  30. package/LuxityGraphQLMultiselector.js +321 -167
  31. package/LuxityMobileHeader.js +544 -353
  32. package/LuxityPageReady.js +136 -74
  33. package/LuxityProductInterestItem.js +175 -97
  34. package/LuxitySideNav.js +244 -176
  35. package/MaterialSelector.js +1547 -951
  36. package/ModelSelector.js +1547 -951
  37. package/NotificationDropDown.js +218 -118
  38. package/Notify.js +1 -0
  39. package/OutlinePrimaryButton.js +58 -26
  40. package/PriceRangeSelector.js +281 -168
  41. package/PrimaryButton.js +58 -26
  42. package/RadioButtons.js +140 -114
  43. package/RangeSlider.js +242 -152
  44. package/RareStepFooter.js +41 -27
  45. package/RareStepHeader.js +190 -139
  46. package/ReactSelectWrapper.js +1 -0
  47. package/SecondaryButton.js +58 -26
  48. package/ShoeSizeRangeSelector.js +260 -162
  49. package/ShoeSizeSelector.js +263 -158
  50. package/SimpleErrorBoundary.js +106 -59
  51. package/StyleSelector.js +336 -176
  52. package/TestComponent.js +15 -0
  53. package/TextButton.js +58 -26
  54. package/Tooltip.js +39 -17
  55. package/Tracking.js +1 -0
  56. package/WrapperButton.js +43 -20
  57. package/build/CountryCodeSelect/index.js +18 -0
  58. package/build/ReactSelectWrapper/index.js +34 -0
  59. package/build/bundle.css +1 -1
  60. package/build/bundle.js +2616 -1974
  61. package/package.json +1 -1
  62. package/postcss.config.js +6 -0
  63. package/svg/Accessories.js +13 -6
  64. package/svg/Account.js +13 -6
  65. package/svg/Add.js +13 -6
  66. package/svg/ArrowRight.js +13 -6
  67. package/svg/Bags.js +13 -6
  68. package/svg/BurgerMenu.js +13 -6
  69. package/svg/Calendar.js +13 -6
  70. package/svg/CalendarCircled.js +13 -6
  71. package/svg/CheckCircled.js +13 -6
  72. package/svg/Close.js +13 -6
  73. package/svg/Clothing.js +13 -6
  74. package/svg/Dot.js +13 -6
  75. package/svg/Edit.js +13 -6
  76. package/svg/Eye.js +13 -6
  77. package/svg/FileAttach.js +13 -6
  78. package/svg/FileAttachCircled.js +13 -6
  79. package/svg/LightBulb.js +13 -6
  80. package/svg/Logo.js +13 -6
  81. package/svg/LuxityMenu.js +13 -6
  82. package/svg/Minus.js +13 -6
  83. package/svg/MobileAvatar.js +13 -6
  84. package/svg/MyOrder.js +13 -6
  85. package/svg/MyPayment.js +13 -6
  86. package/svg/MyProfile.js +14 -8
  87. package/svg/MySale.js +13 -6
  88. package/svg/Notification.js +13 -6
  89. package/svg/PointerDown.js +13 -6
  90. package/svg/Search.js +13 -6
  91. package/svg/Shoes.js +13 -6
  92. package/svg/SvgWrapper.js +7 -3
  93. package/svg/Trash.js +13 -6
  94. package/svg/Watches.js +13 -6
package/LuxitySideNav.js CHANGED
@@ -8,119 +8,140 @@
8
8
  axios = axios && Object.prototype.hasOwnProperty.call(axios, 'default') ? axios['default'] : axios;
9
9
  var styled__default = 'default' in styled ? styled['default'] : styled;
10
10
 
11
- function _arrayLikeToArray(r, a) {
12
- (null == a || a > r.length) && (a = r.length);
13
- for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
14
- return n;
15
- }
16
- function _arrayWithHoles(r) {
17
- if (Array.isArray(r)) return r;
18
- }
19
- function _defineProperty(e, r, t) {
20
- return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
21
- value: t,
22
- enumerable: !0,
23
- configurable: !0,
24
- writable: !0
25
- }) : e[r] = t, e;
26
- }
27
- function _extends() {
28
- return _extends = Object.assign ? Object.assign.bind() : function (n) {
29
- for (var e = 1; e < arguments.length; e++) {
30
- var t = arguments[e];
31
- for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
32
- }
33
- return n;
34
- }, _extends.apply(null, arguments);
35
- }
36
- function _iterableToArrayLimit(r, l) {
37
- var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
38
- if (null != t) {
39
- var e,
40
- n,
41
- i,
42
- u,
43
- a = [],
44
- f = !0,
45
- o = !1;
46
- try {
47
- if (i = (t = t.call(r)).next, 0 === l) {
48
- if (Object(t) !== t) return;
49
- f = !1;
50
- } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
51
- } catch (r) {
52
- o = !0, n = r;
53
- } finally {
54
- try {
55
- if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
56
- } finally {
57
- if (o) throw n;
58
- }
59
- }
60
- return a;
11
+ function ownKeys(object, enumerableOnly) {
12
+ var keys = Object.keys(object);
13
+
14
+ if (Object.getOwnPropertySymbols) {
15
+ var symbols = Object.getOwnPropertySymbols(object);
16
+ enumerableOnly && (symbols = symbols.filter(function (sym) {
17
+ return Object.getOwnPropertyDescriptor(object, sym).enumerable;
18
+ })), keys.push.apply(keys, symbols);
61
19
  }
20
+
21
+ return keys;
62
22
  }
63
- function _nonIterableRest() {
64
- throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
65
- }
66
- function ownKeys(e, r) {
67
- var t = Object.keys(e);
68
- if (Object.getOwnPropertySymbols) {
69
- var o = Object.getOwnPropertySymbols(e);
70
- r && (o = o.filter(function (r) {
71
- return Object.getOwnPropertyDescriptor(e, r).enumerable;
72
- })), t.push.apply(t, o);
23
+
24
+ function _objectSpread2(target) {
25
+ for (var i = 1; i < arguments.length; i++) {
26
+ var source = null != arguments[i] ? arguments[i] : {};
27
+ i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
28
+ _defineProperty(target, key, source[key]);
29
+ }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
30
+ Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
31
+ });
73
32
  }
74
- return t;
33
+
34
+ return target;
75
35
  }
76
- function _objectSpread2(e) {
77
- for (var r = 1; r < arguments.length; r++) {
78
- var t = null != arguments[r] ? arguments[r] : {};
79
- r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
80
- _defineProperty(e, r, t[r]);
81
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
82
- Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
36
+
37
+ function _defineProperty(obj, key, value) {
38
+ if (key in obj) {
39
+ Object.defineProperty(obj, key, {
40
+ value: value,
41
+ enumerable: true,
42
+ configurable: true,
43
+ writable: true
83
44
  });
45
+ } else {
46
+ obj[key] = value;
84
47
  }
85
- return e;
48
+
49
+ return obj;
86
50
  }
87
- function _slicedToArray(r, e) {
88
- return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
51
+
52
+ function _extends() {
53
+ _extends = Object.assign ? Object.assign.bind() : function (target) {
54
+ for (var i = 1; i < arguments.length; i++) {
55
+ var source = arguments[i];
56
+
57
+ for (var key in source) {
58
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
59
+ target[key] = source[key];
60
+ }
61
+ }
62
+ }
63
+
64
+ return target;
65
+ };
66
+ return _extends.apply(this, arguments);
89
67
  }
90
- function _taggedTemplateLiteral(e, t) {
91
- return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, {
68
+
69
+ function _taggedTemplateLiteral(strings, raw) {
70
+ if (!raw) {
71
+ raw = strings.slice(0);
72
+ }
73
+
74
+ return Object.freeze(Object.defineProperties(strings, {
92
75
  raw: {
93
- value: Object.freeze(t)
76
+ value: Object.freeze(raw)
94
77
  }
95
78
  }));
96
79
  }
97
- function _toPrimitive(t, r) {
98
- if ("object" != typeof t || !t) return t;
99
- var e = t[Symbol.toPrimitive];
100
- if (void 0 !== e) {
101
- var i = e.call(t, r || "default");
102
- if ("object" != typeof i) return i;
103
- throw new TypeError("@@toPrimitive must return a primitive value.");
104
- }
105
- return ("string" === r ? String : Number)(t);
80
+
81
+ function _slicedToArray(arr, i) {
82
+ return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
106
83
  }
107
- function _toPropertyKey(t) {
108
- var i = _toPrimitive(t, "string");
109
- return "symbol" == typeof i ? i : i + "";
84
+
85
+ function _arrayWithHoles(arr) {
86
+ if (Array.isArray(arr)) return arr;
110
87
  }
111
- function _unsupportedIterableToArray(r, a) {
112
- if (r) {
113
- if ("string" == typeof r) return _arrayLikeToArray(r, a);
114
- var t = {}.toString.call(r).slice(8, -1);
115
- return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
88
+
89
+ function _iterableToArrayLimit(arr, i) {
90
+ var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
91
+
92
+ if (_i == null) return;
93
+ var _arr = [];
94
+ var _n = true;
95
+ var _d = false;
96
+
97
+ var _s, _e;
98
+
99
+ try {
100
+ for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
101
+ _arr.push(_s.value);
102
+
103
+ if (i && _arr.length === i) break;
104
+ }
105
+ } catch (err) {
106
+ _d = true;
107
+ _e = err;
108
+ } finally {
109
+ try {
110
+ if (!_n && _i["return"] != null) _i["return"]();
111
+ } finally {
112
+ if (_d) throw _e;
113
+ }
116
114
  }
115
+
116
+ return _arr;
117
+ }
118
+
119
+ function _unsupportedIterableToArray(o, minLen) {
120
+ if (!o) return;
121
+ if (typeof o === "string") return _arrayLikeToArray(o, minLen);
122
+ var n = Object.prototype.toString.call(o).slice(8, -1);
123
+ if (n === "Object" && o.constructor) n = o.constructor.name;
124
+ if (n === "Map" || n === "Set") return Array.from(o);
125
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
126
+ }
127
+
128
+ function _arrayLikeToArray(arr, len) {
129
+ if (len == null || len > arr.length) len = arr.length;
130
+
131
+ for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
132
+
133
+ return arr2;
134
+ }
135
+
136
+ function _nonIterableRest() {
137
+ throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
117
138
  }
118
139
 
119
140
  var StoresDropdown = function StoresDropdown(_ref) {
120
141
  var backIcon = _ref.backIcon,
121
- onBackClick = _ref.onBackClick,
122
- stores = _ref.stores,
123
- onContactUsClick = _ref.onContactUsClick;
142
+ onBackClick = _ref.onBackClick,
143
+ stores = _ref.stores,
144
+ onContactUsClick = _ref.onContactUsClick;
124
145
  return /*#__PURE__*/React__default.createElement("div", {
125
146
  className: "side-nav__sub-menu"
126
147
  }, /*#__PURE__*/React__default.createElement("button", {
@@ -160,19 +181,20 @@
160
181
 
161
182
  var BrandsDropDown = function BrandsDropDown(_ref) {
162
183
  var subMenuOpen = _ref.subMenuOpen,
163
- onBackClick = _ref.onBackClick,
164
- onCloseSideNav = _ref.onCloseSideNav,
165
- backIcon = _ref.backIcon,
166
- subMenuCategoryTitle = _ref.subMenuCategoryTitle,
167
- productUrl = _ref.productUrl,
168
- categoryElements = _ref.categoryElements,
169
- subMenuBrandsTitle = _ref.subMenuBrandsTitle,
170
- _ref$brandsList = _ref.brandsList,
171
- brandsList = _ref$brandsList === void 0 ? [] : _ref$brandsList,
172
- categorySlug = _ref.categorySlug,
173
- isLoading = _ref.isLoading,
174
- hasError = _ref.hasError,
175
- LinkComponent = _ref.LinkComponent;
184
+ onBackClick = _ref.onBackClick,
185
+ onCloseSideNav = _ref.onCloseSideNav,
186
+ backIcon = _ref.backIcon,
187
+ subMenuCategoryTitle = _ref.subMenuCategoryTitle,
188
+ productUrl = _ref.productUrl,
189
+ categoryElements = _ref.categoryElements,
190
+ subMenuBrandsTitle = _ref.subMenuBrandsTitle,
191
+ _ref$brandsList = _ref.brandsList,
192
+ brandsList = _ref$brandsList === void 0 ? [] : _ref$brandsList,
193
+ categorySlug = _ref.categorySlug,
194
+ isLoading = _ref.isLoading,
195
+ hasError = _ref.hasError,
196
+ LinkComponent = _ref.LinkComponent;
197
+
176
198
  var handleLinkClick = function handleLinkClick(event) {
177
199
  event.preventDefault();
178
200
  var href = event.currentTarget.getAttribute('href');
@@ -180,6 +202,7 @@
180
202
  onCloseSideNav();
181
203
  window.location.href = href;
182
204
  };
205
+
183
206
  return /*#__PURE__*/React__default.createElement("div", {
184
207
  className: "side-nav__content ".concat(subMenuOpen ? '' : 'side-nav__content--hidden')
185
208
  }, hasError ? /*#__PURE__*/React__default.createElement("div", {
@@ -226,6 +249,7 @@
226
249
  className: "side-nav__element"
227
250
  }, "All Brands"), !!brandsList.length && brandsList.map(function (brand) {
228
251
  return /*#__PURE__*/React__default.createElement(LinkComponent, {
252
+ key: brand.slug,
229
253
  href: "".concat(productUrl, "/").concat(categorySlug === 'new' ? 'brands' : categorySlug, "/").concat(brand.slug),
230
254
  onClick: handleLinkClick,
231
255
  className: "side-nav__element"
@@ -235,14 +259,15 @@
235
259
 
236
260
  var removeCategoryByName = function removeCategoryByName(categories, name) {
237
261
  var _categories$filter;
262
+
238
263
  return (_categories$filter = categories === null || categories === void 0 ? void 0 : categories.filter(function (category) {
239
264
  return category.name.toLowerCase() !== name.toLowerCase();
240
265
  })) !== null && _categories$filter !== void 0 ? _categories$filter : [];
241
266
  };
242
267
 
243
268
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
244
-
245
269
  /* position relative is required for the Body element to be positioned correctly */
270
+
246
271
  var relativeInlineStyle = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n"])));
247
272
  var topMiddleBodyStyle = styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n z-index: 1;\n bottom: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n"])));
248
273
  var getTopMiddleArrowAfterStyle = function getTopMiddleArrowAfterStyle(props) {
@@ -256,31 +281,40 @@
256
281
  };
257
282
 
258
283
  var _templateObject$1;
284
+
259
285
  var getBodyStyle = function getBodyStyle() {
260
286
  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
261
287
  var _props$toolTipPositio = props.toolTipPosition,
262
- toolTipPosition = _props$toolTipPositio === void 0 ? '' : _props$toolTipPositio;
288
+ toolTipPosition = _props$toolTipPositio === void 0 ? '' : _props$toolTipPositio;
289
+
263
290
  switch (toolTipPosition) {
264
291
  case 'top':
265
292
  return topMiddleBodyStyle;
293
+
266
294
  case 'bottom':
267
295
  return getBottomMiddleBodyStyle(props);
296
+
268
297
  default:
269
298
  return null;
270
299
  }
271
300
  };
301
+
272
302
  var getAfterStyling = function getAfterStyling() {
273
303
  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
274
304
  var toolTipPosition = props.toolTipPosition;
305
+
275
306
  switch (toolTipPosition) {
276
307
  case 'top':
277
308
  return getTopMiddleArrowAfterStyle(props);
309
+
278
310
  case 'bottom':
279
311
  return getBottomMiddleArrowAfterStyle(props);
312
+
280
313
  default:
281
314
  return '';
282
315
  }
283
316
  };
317
+
284
318
  var Body = styled__default.span(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n ", ";\n visibility: hidden;\n opacity: 0;\n width: ", ";\n transition: visibility 0.3s linear, opacity 0.3s linear;\n background-color: ", ";\n color: white;\n text-align: center;\n border-radius: 5px;\n ", "\n &::after {\n content: ' ';\n position: absolute;\n ", "\n }\n"])), relativeInlineStyle, function (props) {
285
319
  return props.bodyWidth;
286
320
  }, function (props) {
@@ -360,12 +394,12 @@
360
394
 
361
395
  var Tooltip = function Tooltip(_ref) {
362
396
  var children = _ref.children,
363
- toolTipText = _ref.toolTipText,
364
- toolTipPosition = _ref.toolTipPosition,
365
- bodyWidth = _ref.bodyWidth,
366
- apexWidth = _ref.apexWidth,
367
- containerClassName = _ref.containerClassName,
368
- bodyClassName = _ref.bodyClassName;
397
+ toolTipText = _ref.toolTipText,
398
+ toolTipPosition = _ref.toolTipPosition,
399
+ bodyWidth = _ref.bodyWidth,
400
+ apexWidth = _ref.apexWidth,
401
+ containerClassName = _ref.containerClassName,
402
+ bodyClassName = _ref.bodyClassName;
369
403
  return /*#__PURE__*/React__default.createElement(Container, {
370
404
  className: containerClassName
371
405
  }, children, /*#__PURE__*/React__default.createElement(Body, {
@@ -375,6 +409,7 @@
375
409
  className: bodyClassName
376
410
  }, toolTipText));
377
411
  };
412
+
378
413
  Tooltip.defaultProps = {
379
414
  children: null,
380
415
  toolTipText: '',
@@ -388,21 +423,25 @@
388
423
 
389
424
  var CurrencySelect = function CurrencySelect(_ref) {
390
425
  var currency = _ref.currency,
391
- currencyOptions = _ref.currencyOptions,
392
- onCurrencyChange = _ref.onCurrencyChange,
393
- _ref$isCurrencySelect = _ref.isCurrencySelectionDisabled,
394
- isCurrencySelectionDisabled = _ref$isCurrencySelect === void 0 ? false : _ref$isCurrencySelect,
395
- _ref$tooltipContent = _ref.tooltipContent,
396
- tooltipContent = _ref$tooltipContent === void 0 ? '' : _ref$tooltipContent;
426
+ currencyOptions = _ref.currencyOptions,
427
+ onCurrencyChange = _ref.onCurrencyChange,
428
+ _ref$isCurrencySelect = _ref.isCurrencySelectionDisabled,
429
+ isCurrencySelectionDisabled = _ref$isCurrencySelect === void 0 ? false : _ref$isCurrencySelect,
430
+ _ref$tooltipContent = _ref.tooltipContent,
431
+ tooltipContent = _ref$tooltipContent === void 0 ? '' : _ref$tooltipContent;
432
+
397
433
  if (!currencyOptions || currencyOptions.length === 0) {
398
434
  return null;
399
435
  }
436
+
400
437
  var selectedOption = currencyOptions.find(function (opt) {
401
438
  return opt.value === currency;
402
439
  });
440
+
403
441
  if (!selectedOption) {
404
442
  return null;
405
443
  }
444
+
406
445
  return /*#__PURE__*/React__default.createElement(Tooltip$1, {
407
446
  toolTipText: isCurrencySelectionDisabled ? tooltipContent : '',
408
447
  toolTipPosition: "bottom",
@@ -431,70 +470,79 @@
431
470
 
432
471
  var LuxitySideNav = function LuxitySideNav(_ref) {
433
472
  var accordionIcon = _ref.accordionIcon,
434
- closeIcon = _ref.closeIcon,
435
- backIcon = _ref.backIcon,
436
- productUrl = _ref.productUrl,
437
- onAccountClick = _ref.onAccountClick,
438
- onCartClick = _ref.onCartClick,
439
- onContactUsClick = _ref.onContactUsClick,
440
- onOurStoryClick = _ref.onOurStoryClick,
441
- _ref$onBlogClick = _ref.onBlogClick,
442
- onBlogClick = _ref$onBlogClick === void 0 ? undefined : _ref$onBlogClick,
443
- onSellToUsClick = _ref.onSellToUsClick,
444
- stores = _ref.stores,
445
- categoryElements = _ref.categoryElements,
446
- showSideNav = _ref.showSideNav,
447
- onMenuClick = _ref.onMenuClick,
448
- menuData = _ref.menuData,
449
- currency = _ref.currency,
450
- currencyOptions = _ref.currencyOptions,
451
- onCurrencyChange = _ref.onCurrencyChange,
452
- isCurrencySelectionDisabled = _ref.isCurrencySelectionDisabled,
453
- tooltipContent = _ref.tooltipContent,
454
- LinkComponent = _ref.LinkComponent,
455
- categoryConfig = _ref.categoryConfig;
473
+ closeIcon = _ref.closeIcon,
474
+ backIcon = _ref.backIcon,
475
+ productUrl = _ref.productUrl,
476
+ onAccountClick = _ref.onAccountClick,
477
+ onCartClick = _ref.onCartClick,
478
+ onContactUsClick = _ref.onContactUsClick,
479
+ onOurStoryClick = _ref.onOurStoryClick,
480
+ onBlogClick = _ref.onBlogClick,
481
+ onSellToUsClick = _ref.onSellToUsClick,
482
+ stores = _ref.stores,
483
+ categoryElements = _ref.categoryElements,
484
+ showSideNav = _ref.showSideNav,
485
+ onMenuClick = _ref.onMenuClick,
486
+ currency = _ref.currency,
487
+ currencyOptions = _ref.currencyOptions,
488
+ onCurrencyChange = _ref.onCurrencyChange,
489
+ isCurrencySelectionDisabled = _ref.isCurrencySelectionDisabled,
490
+ tooltipContent = _ref.tooltipContent,
491
+ LinkComponent = _ref.LinkComponent,
492
+ categoryConfig = _ref.categoryConfig;
493
+
456
494
  var _useState = React.useState(false),
457
- _useState2 = _slicedToArray(_useState, 2),
458
- subMenuOpen = _useState2[0],
459
- setSubMenuOpen = _useState2[1];
495
+ _useState2 = _slicedToArray(_useState, 2),
496
+ subMenuOpen = _useState2[0],
497
+ setSubMenuOpen = _useState2[1];
498
+
460
499
  var _useState3 = React.useState(''),
461
- _useState4 = _slicedToArray(_useState3, 2),
462
- displayedSubMenu = _useState4[0],
463
- setDisplayedSubMenu = _useState4[1];
500
+ _useState4 = _slicedToArray(_useState3, 2),
501
+ displayedSubMenu = _useState4[0],
502
+ setDisplayedSubMenu = _useState4[1];
503
+
464
504
  var _useState5 = React.useState(false),
465
- _useState6 = _slicedToArray(_useState5, 2),
466
- loading = _useState6[0],
467
- setLoading = _useState6[1];
505
+ _useState6 = _slicedToArray(_useState5, 2),
506
+ loading = _useState6[0],
507
+ setLoading = _useState6[1];
508
+
468
509
  var _useState7 = React.useState({}),
469
- _useState8 = _slicedToArray(_useState7, 2),
470
- dropdownData = _useState8[0],
471
- setDropdownData = _useState8[1];
510
+ _useState8 = _slicedToArray(_useState7, 2),
511
+ dropdownData = _useState8[0],
512
+ setDropdownData = _useState8[1];
513
+
472
514
  var _useState9 = React.useState(false),
473
- _useState10 = _slicedToArray(_useState9, 2),
474
- hasError = _useState10[0],
475
- setHasError = _useState10[1];
515
+ _useState10 = _slicedToArray(_useState9, 2),
516
+ hasError = _useState10[0],
517
+ setHasError = _useState10[1];
518
+
476
519
  var onSubMenuClick = function onSubMenuClick(subMenu) {
477
520
  setSubMenuOpen(function (prev) {
478
521
  return !prev;
479
522
  });
480
523
  setDisplayedSubMenu(subMenu);
481
524
  };
525
+
482
526
  var onStoresClick = function onStoresClick() {
483
527
  setSubMenuOpen(false);
484
528
  setDisplayedSubMenu('stores');
485
529
  };
530
+
486
531
  var onBackClick = function onBackClick() {
487
532
  setSubMenuOpen(false);
488
533
  setDisplayedSubMenu('');
489
534
  };
535
+
490
536
  var onCloseSideNav = function onCloseSideNav(e) {
491
537
  onMenuClick();
492
538
  setSubMenuOpen(false);
493
539
  setDisplayedSubMenu('');
540
+
494
541
  if (e && e.key === 'Enter') {
495
542
  e.preventDefault();
496
543
  }
497
544
  };
545
+
498
546
  function addCategoryToElements(elements, categoryName) {
499
547
  return elements.map(function (element) {
500
548
  return _objectSpread2(_objectSpread2({}, element), {}, {
@@ -502,26 +550,31 @@
502
550
  });
503
551
  });
504
552
  }
553
+
505
554
  React.useMemo(function () {
506
555
  setLoading(true);
507
- axios.get("".concat(menuData)).then(function (_ref2) {
556
+ axios.get("".concat(categoryConfig.menuData)).then(function (_ref2) {
508
557
  var data = _ref2.data;
509
558
  setLoading(false);
510
559
  setDropdownData(data);
511
560
  }).catch(function () {
512
561
  return setHasError(true);
513
562
  });
514
- }, [menuData]);
563
+ }, [categoryConfig.menuData]);
564
+
515
565
  var renderMenuItems = function renderMenuItems() {
516
566
  return categoryConfig.categories.map(function (category) {
517
567
  var title = category.title,
518
- categorySlug = category.categorySlug;
568
+ categorySlug = category.categorySlug;
519
569
  var slug = categorySlug;
570
+
520
571
  if (categorySlug === 'brands') {
521
572
  slug = 'new';
522
573
  }
574
+
523
575
  return /*#__PURE__*/React__default.createElement("div", {
524
- className: "side-nav__menu-item"
576
+ className: "side-nav__menu-item",
577
+ key: slug
525
578
  }, /*#__PURE__*/React__default.createElement("button", {
526
579
  type: "button",
527
580
  className: "side-nav__menu-title-wrapper",
@@ -537,14 +590,16 @@
537
590
  })));
538
591
  });
539
592
  };
593
+
540
594
  var renderDropdownLinks = function renderDropdownLinks() {
541
595
  return categoryConfig.categories.map(function (category) {
542
596
  var categorySlug = category.categorySlug,
543
- categoryName = category.categoryName,
544
- elementsKey = category.elementsKey,
545
- subCategoryElementsKey = category.subCategoryElementsKey,
546
- styleElementsKey = category.styleElementsKey;
597
+ categoryName = category.categoryName,
598
+ elementsKey = category.elementsKey,
599
+ subCategoryElementsKey = category.subCategoryElementsKey,
600
+ styleElementsKey = category.styleElementsKey;
547
601
  var categoryElementsProcessed = categoryElements;
602
+
548
603
  if (subCategoryElementsKey && dropdownData[subCategoryElementsKey]) {
549
604
  // show subcategory elements
550
605
  categoryElementsProcessed = removeCategoryByName(dropdownData[subCategoryElementsKey], categoryName);
@@ -553,15 +608,21 @@
553
608
  } else {
554
609
  categoryElementsProcessed = addCategoryToElements(categoryElementsProcessed, categorySlug);
555
610
  }
611
+
556
612
  var subMenuTitle = 'Brands';
613
+
557
614
  if (categorySlug !== 'brands') {
558
615
  subMenuTitle = "".concat(categoryName, " Brands");
559
616
  }
617
+
560
618
  var subMenu = categorySlug;
619
+
561
620
  if (subMenu === 'brands') {
562
621
  subMenu = 'new';
563
622
  }
623
+
564
624
  return /*#__PURE__*/React__default.createElement(BrandsDropDown, {
625
+ key: categorySlug,
565
626
  subMenuOpen: subMenuOpen && displayedSubMenu === subMenu,
566
627
  onBackClick: onBackClick,
567
628
  backIcon: backIcon,
@@ -578,6 +639,7 @@
578
639
  });
579
640
  });
580
641
  };
642
+
581
643
  return /*#__PURE__*/React__default.createElement("div", {
582
644
  className: "side-nav"
583
645
  }, /*#__PURE__*/React__default.createElement("div", {
@@ -599,7 +661,8 @@
599
661
  })), /*#__PURE__*/React__default.createElement("div", {
600
662
  className: "side-nav__menu-items-wrapper"
601
663
  }, renderMenuItems(), !!stores.length && /*#__PURE__*/React__default.createElement("div", {
602
- className: "side-nav__menu-item"
664
+ className: "side-nav__menu-item",
665
+ key: "stores"
603
666
  }, /*#__PURE__*/React__default.createElement("button", {
604
667
  type: "button",
605
668
  className: "side-nav__menu-title-wrapper",
@@ -611,42 +674,49 @@
611
674
  alt: "accordion-icon",
612
675
  className: "side-nav__accordion-icon"
613
676
  }))), /*#__PURE__*/React__default.createElement("div", {
614
- className: "side-nav__menu-item"
677
+ className: "side-nav__menu-item",
678
+ key: "sell-to-us"
615
679
  }, /*#__PURE__*/React__default.createElement("button", {
616
680
  type: "button",
617
681
  className: "side-nav__block-button",
618
682
  onClick: onSellToUsClick
619
683
  }, "Sell To Us")), /*#__PURE__*/React__default.createElement("div", {
620
- className: "side-nav__menu-item"
684
+ className: "side-nav__menu-item",
685
+ key: "our-story"
621
686
  }, /*#__PURE__*/React__default.createElement("button", {
622
687
  type: "button",
623
688
  className: "side-nav__sub-link",
624
689
  onClick: onOurStoryClick
625
690
  }, "Our Story")), typeof onBlogClick === 'function' && /*#__PURE__*/React__default.createElement("div", {
626
- className: "side-nav__menu-item"
691
+ className: "side-nav__menu-item",
692
+ key: "blog"
627
693
  }, /*#__PURE__*/React__default.createElement("button", {
628
694
  type: "button",
629
695
  className: "side-nav__sub-link",
630
696
  onClick: onBlogClick
631
697
  }, "Blog")), /*#__PURE__*/React__default.createElement("div", {
632
- className: "side-nav__menu-item"
698
+ className: "side-nav__menu-item",
699
+ key: "contact-us"
633
700
  }, /*#__PURE__*/React__default.createElement("button", {
634
701
  type: "button",
635
702
  className: "side-nav__sub-link",
636
703
  onClick: onContactUsClick
637
704
  }, "Contact Us")), /*#__PURE__*/React__default.createElement("div", {
638
- className: "side-nav__menu-item"
705
+ className: "side-nav__menu-item",
706
+ key: "my-account"
639
707
  }, /*#__PURE__*/React__default.createElement("button", {
640
708
  type: "button",
641
709
  className: "side-nav__sub-link",
642
710
  onClick: onAccountClick
643
711
  }, "My Account")), /*#__PURE__*/React__default.createElement("div", {
644
- className: "side-nav__menu-item"
712
+ className: "side-nav__menu-item",
713
+ key: "my-cart"
645
714
  }, /*#__PURE__*/React__default.createElement("button", {
646
715
  type: "button",
647
716
  className: "side-nav__sub-link",
648
717
  onClick: onCartClick
649
718
  }, "My Cart")), /*#__PURE__*/React__default.createElement(CurrencySelect, {
719
+ key: "currency",
650
720
  currency: currency,
651
721
  currencyOptions: currencyOptions,
652
722
  onCurrencyChange: onCurrencyChange,
@@ -655,15 +725,13 @@
655
725
  }))), renderDropdownLinks(), displayedSubMenu === 'stores' && /*#__PURE__*/React__default.createElement("div", {
656
726
  className: "side-nav__content"
657
727
  }, /*#__PURE__*/React__default.createElement(StoresDropdown, {
728
+ key: "stores",
658
729
  backIcon: backIcon,
659
730
  onBackClick: onBackClick,
660
731
  stores: stores,
661
732
  onContactUsClick: onContactUsClick
662
733
  })));
663
734
  };
664
- LuxitySideNav.defaultProps = {
665
- onBlogClick: undefined
666
- };
667
735
 
668
736
  return LuxitySideNav;
669
737