@bonlineza/luxity-lib 2.34.2 → 2.34.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Accordion.js +116 -76
- package/AddInterest.js +768 -434
- package/BrandSelector.js +336 -176
- package/Checkbox.js +101 -68
- package/CheckboxButton.js +124 -79
- package/CommunicationPreferenceOptionsRenderer.js +125 -107
- package/CommunicationPreferenceSection.js +134 -114
- package/CommunicationPreferences.js +339 -443
- package/CountryCodeSelect.js +10 -7
- package/CurrencyInputFormatter.js +56 -29
- package/CurrencySelect.js +49 -23
- package/GALink.js +16 -6
- package/GenderSelector.js +142 -88
- package/GraphQLDropdownSelector.js +937 -503
- package/GraphQLMultiSelector.js +274 -141
- package/IconHeader.js +25 -11
- package/IconWrapper.js +7 -3
- package/InterestCatSelector.js +74 -34
- package/InterestItem.js +187 -103
- package/Interests.js +890 -485
- package/InterestsSubheading.js +10 -5
- package/InvertedTextButton.js +63 -27
- package/LuxityAppSideNav.js +21 -18
- package/LuxityDesktopHeader.js +246 -189
- package/LuxityFooter.js +276 -374
- package/LuxityGraphQLDropdownSelector.js +969 -519
- package/LuxityGraphQLMultiselector.js +321 -167
- package/LuxityMobileHeader.js +534 -219
- package/LuxityPageReady.js +136 -74
- package/LuxitySideNav.js +402 -137
- package/MaterialSelector.js +976 -525
- package/ModelSelector.js +976 -525
- package/NotificationDropDown.js +209 -111
- package/Notify.js +1 -0
- package/OutlinePrimaryButton.js +58 -26
- package/PriceRangeSelector.js +281 -168
- package/PrimaryButton.js +58 -26
- package/RadioButtons.js +140 -114
- package/RangeSlider.js +242 -152
- package/RareStepFooter.js +41 -27
- package/RareStepHeader.js +190 -139
- package/ReactSelectWrapper.js +1 -0
- package/SecondaryButton.js +58 -26
- package/ShoeSizeRangeSelector.js +260 -162
- package/ShoeSizeSelector.js +263 -158
- package/SimpleErrorBoundary.js +106 -59
- package/StyleSelector.js +336 -176
- package/TextButton.js +58 -26
- package/Tooltip.js +39 -17
- package/Tracking.js +1 -0
- package/WrapperButton.js +43 -20
- package/build/bundle.css +1 -1
- package/build/bundle.js +1701 -1254
- package/package.json +1 -1
- package/svg/Accessories.js +13 -6
- package/svg/Account.js +13 -6
- package/svg/Add.js +13 -6
- package/svg/ArrowRight.js +13 -6
- package/svg/Bags.js +13 -6
- package/svg/BurgerMenu.js +13 -6
- package/svg/Calendar.js +13 -6
- package/svg/CalendarCircled.js +13 -6
- package/svg/CheckCircled.js +13 -6
- package/svg/Close.js +13 -6
- package/svg/Clothing.js +13 -6
- package/svg/Dot.js +13 -6
- package/svg/Edit.js +13 -6
- package/svg/Eye.js +13 -6
- package/svg/FileAttach.js +13 -6
- package/svg/FileAttachCircled.js +13 -6
- package/svg/LightBulb.js +13 -6
- package/svg/Logo.js +13 -6
- package/svg/LuxityMenu.js +13 -6
- package/svg/Minus.js +13 -6
- package/svg/MobileAvatar.js +13 -6
- package/svg/MyOrder.js +13 -6
- package/svg/MyPayment.js +13 -6
- package/svg/MyProfile.js +14 -8
- package/svg/MySale.js +13 -6
- package/svg/Notification.js +13 -6
- package/svg/PointerDown.js +13 -6
- package/svg/Search.js +13 -6
- package/svg/Shoes.js +13 -6
- package/svg/SvgWrapper.js +7 -3
- package/svg/Trash.js +13 -6
- package/svg/Watches.js +13 -6
package/LuxitySideNav.js
CHANGED
|
@@ -1,109 +1,147 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('axios')) :
|
|
3
|
-
typeof define === 'function' && define.amd ? define(['react', 'axios'], factory) :
|
|
4
|
-
(global = global || self, global.LuxitySideNav = factory(global.React, global.axios));
|
|
5
|
-
}(this, (function (React, axios) { 'use strict';
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('axios'), require('styled-components')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define(['react', 'axios', 'styled-components'], factory) :
|
|
4
|
+
(global = global || self, global.LuxitySideNav = factory(global.React, global.axios, global.styled));
|
|
5
|
+
}(this, (function (React, axios, styled) { 'use strict';
|
|
6
6
|
|
|
7
7
|
var React__default = 'default' in React ? React['default'] : React;
|
|
8
8
|
axios = axios && Object.prototype.hasOwnProperty.call(axios, 'default') ? axios['default'] : axios;
|
|
9
|
+
var styled__default = 'default' in styled ? styled['default'] : styled;
|
|
9
10
|
|
|
10
|
-
function
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
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);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
return keys;
|
|
14
22
|
}
|
|
15
|
-
|
|
16
|
-
|
|
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
|
+
});
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
return target;
|
|
17
35
|
}
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
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
|
|
44
|
+
});
|
|
45
|
+
} else {
|
|
46
|
+
obj[key] = value;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
return obj;
|
|
25
50
|
}
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
var
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
try {
|
|
37
|
-
if (i = (t = t.call(r)).next, 0 === l) {
|
|
38
|
-
if (Object(t) !== t) return;
|
|
39
|
-
f = !1;
|
|
40
|
-
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
|
|
41
|
-
} catch (r) {
|
|
42
|
-
o = !0, n = r;
|
|
43
|
-
} finally {
|
|
44
|
-
try {
|
|
45
|
-
if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
|
|
46
|
-
} finally {
|
|
47
|
-
if (o) throw n;
|
|
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
|
+
}
|
|
48
61
|
}
|
|
49
62
|
}
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
63
|
+
|
|
64
|
+
return target;
|
|
65
|
+
};
|
|
66
|
+
return _extends.apply(this, arguments);
|
|
55
67
|
}
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
if (
|
|
59
|
-
|
|
60
|
-
r && (o = o.filter(function (r) {
|
|
61
|
-
return Object.getOwnPropertyDescriptor(e, r).enumerable;
|
|
62
|
-
})), t.push.apply(t, o);
|
|
68
|
+
|
|
69
|
+
function _taggedTemplateLiteral(strings, raw) {
|
|
70
|
+
if (!raw) {
|
|
71
|
+
raw = strings.slice(0);
|
|
63
72
|
}
|
|
64
|
-
|
|
73
|
+
|
|
74
|
+
return Object.freeze(Object.defineProperties(strings, {
|
|
75
|
+
raw: {
|
|
76
|
+
value: Object.freeze(raw)
|
|
77
|
+
}
|
|
78
|
+
}));
|
|
65
79
|
}
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
|
|
70
|
-
_defineProperty(e, r, t[r]);
|
|
71
|
-
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
|
|
72
|
-
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
|
|
73
|
-
});
|
|
74
|
-
}
|
|
75
|
-
return e;
|
|
80
|
+
|
|
81
|
+
function _slicedToArray(arr, i) {
|
|
82
|
+
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
|
|
76
83
|
}
|
|
77
|
-
|
|
78
|
-
|
|
84
|
+
|
|
85
|
+
function _arrayWithHoles(arr) {
|
|
86
|
+
if (Array.isArray(arr)) return arr;
|
|
79
87
|
}
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
var
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
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
|
+
}
|
|
87
114
|
}
|
|
88
|
-
|
|
115
|
+
|
|
116
|
+
return _arr;
|
|
89
117
|
}
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
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);
|
|
93
126
|
}
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
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.");
|
|
100
138
|
}
|
|
101
139
|
|
|
102
140
|
var StoresDropdown = function StoresDropdown(_ref) {
|
|
103
141
|
var backIcon = _ref.backIcon,
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
142
|
+
onBackClick = _ref.onBackClick,
|
|
143
|
+
stores = _ref.stores,
|
|
144
|
+
onContactUsClick = _ref.onContactUsClick;
|
|
107
145
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
108
146
|
className: "side-nav__sub-menu"
|
|
109
147
|
}, /*#__PURE__*/React__default.createElement("button", {
|
|
@@ -143,19 +181,19 @@
|
|
|
143
181
|
|
|
144
182
|
var BrandsDropDown = function BrandsDropDown(_ref) {
|
|
145
183
|
var subMenuOpen = _ref.subMenuOpen,
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
184
|
+
onBackClick = _ref.onBackClick,
|
|
185
|
+
backIcon = _ref.backIcon,
|
|
186
|
+
subMenuCategoryTitle = _ref.subMenuCategoryTitle,
|
|
187
|
+
productUrl = _ref.productUrl,
|
|
188
|
+
categoryElements = _ref.categoryElements,
|
|
189
|
+
subMenuBrandsTitle = _ref.subMenuBrandsTitle,
|
|
190
|
+
_ref$brandsList = _ref.brandsList,
|
|
191
|
+
brandsList = _ref$brandsList === void 0 ? [] : _ref$brandsList,
|
|
192
|
+
categorySlug = _ref.categorySlug,
|
|
193
|
+
isLoading = _ref.isLoading,
|
|
194
|
+
hasError = _ref.hasError,
|
|
195
|
+
LinkComponent = _ref.LinkComponent,
|
|
196
|
+
setSubMenuOpen = _ref.setSubMenuOpen;
|
|
159
197
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
160
198
|
className: "side-nav__content ".concat(subMenuOpen ? '' : 'side-nav__content--hidden')
|
|
161
199
|
}, hasError ? /*#__PURE__*/React__default.createElement("div", {
|
|
@@ -219,6 +257,7 @@
|
|
|
219
257
|
|
|
220
258
|
var removeCategoryByName = function removeCategoryByName(categories, name) {
|
|
221
259
|
var _categories$filter;
|
|
260
|
+
|
|
222
261
|
return (_categories$filter = categories === null || categories === void 0 ? void 0 : categories.filter(function (category) {
|
|
223
262
|
return category.name !== name;
|
|
224
263
|
})) !== null && _categories$filter !== void 0 ? _categories$filter : [];
|
|
@@ -247,74 +286,293 @@
|
|
|
247
286
|
}
|
|
248
287
|
};
|
|
249
288
|
|
|
289
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
290
|
+
/* position relative is required for the Body element to be positioned correctly */
|
|
291
|
+
|
|
292
|
+
var relativeInlineStyle = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n"])));
|
|
293
|
+
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"])));
|
|
294
|
+
var getTopMiddleArrowAfterStyle = function getTopMiddleArrowAfterStyle(props) {
|
|
295
|
+
return styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n /*Bottom Arrow*/\n top: 100%; /* At the bottom of the tooltip */\n left: calc(50% - ", ");\n border-width: ", ";\n border-style: solid;\n border-color: ", " transparent transparent transparent;\n"])), props.apexWidth, props.apexWidth, props.theme.colors.base);
|
|
296
|
+
};
|
|
297
|
+
var getBottomMiddleBodyStyle = function getBottomMiddleBodyStyle(props) {
|
|
298
|
+
return styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: absolute;\n top: 100%;\n left: calc(50% - ", " / 2);\n"])), props.bodyWidth);
|
|
299
|
+
};
|
|
300
|
+
var getBottomMiddleArrowAfterStyle = function getBottomMiddleArrowAfterStyle(props) {
|
|
301
|
+
return styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n /*Top Arrow*/\n bottom: 100%; /* At the top of the tooltip */\n top: initial;\n left: 50%;\n border-style: solid;\n border-color: transparent transparent ", " transparent;\n"])), props.theme.colors.base);
|
|
302
|
+
};
|
|
303
|
+
|
|
304
|
+
var _templateObject$1;
|
|
305
|
+
|
|
306
|
+
var getBodyStyle = function getBodyStyle() {
|
|
307
|
+
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
308
|
+
var _props$toolTipPositio = props.toolTipPosition,
|
|
309
|
+
toolTipPosition = _props$toolTipPositio === void 0 ? '' : _props$toolTipPositio;
|
|
310
|
+
|
|
311
|
+
switch (toolTipPosition) {
|
|
312
|
+
case 'top':
|
|
313
|
+
return topMiddleBodyStyle;
|
|
314
|
+
|
|
315
|
+
case 'bottom':
|
|
316
|
+
return getBottomMiddleBodyStyle(props);
|
|
317
|
+
|
|
318
|
+
default:
|
|
319
|
+
return null;
|
|
320
|
+
}
|
|
321
|
+
};
|
|
322
|
+
|
|
323
|
+
var getAfterStyling = function getAfterStyling() {
|
|
324
|
+
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
325
|
+
var toolTipPosition = props.toolTipPosition;
|
|
326
|
+
|
|
327
|
+
switch (toolTipPosition) {
|
|
328
|
+
case 'top':
|
|
329
|
+
return getTopMiddleArrowAfterStyle(props);
|
|
330
|
+
|
|
331
|
+
case 'bottom':
|
|
332
|
+
return getBottomMiddleArrowAfterStyle(props);
|
|
333
|
+
|
|
334
|
+
default:
|
|
335
|
+
return '';
|
|
336
|
+
}
|
|
337
|
+
};
|
|
338
|
+
|
|
339
|
+
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) {
|
|
340
|
+
return props.bodyWidth;
|
|
341
|
+
}, function (props) {
|
|
342
|
+
return props.theme.colors.base || 'black';
|
|
343
|
+
}, function (props) {
|
|
344
|
+
return getBodyStyle(props);
|
|
345
|
+
}, function (props) {
|
|
346
|
+
return getAfterStyling(props);
|
|
347
|
+
});
|
|
348
|
+
|
|
349
|
+
var _templateObject$2;
|
|
350
|
+
var Container = styled__default.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n ", ";\n cursor: pointer;\n &:hover ", " {\n opacity: 1;\n visibility: visible;\n }\n"])), relativeInlineStyle, Body);
|
|
351
|
+
|
|
352
|
+
var theme = {
|
|
353
|
+
breakpoints: ['40em', '52em', '64em'],
|
|
354
|
+
space: ['0px', '4px', '8px', '16px', '32px', '64px', '128px', '256px', '512px'],
|
|
355
|
+
fontSizes: ['12px', '14px', '16px', '20px', '24px', '32px', '48px', '64px', '72px'],
|
|
356
|
+
marginPaddings: ['0.5rem', '1rem', '1.5rem', '2rem', '2.5rem', '3rem', '3.5rem', '4rem', '4.5rem', '5rem', '5.5rem', '6rem'],
|
|
357
|
+
letterSpacings: ['-0.5px', '0px', '+0.5px'],
|
|
358
|
+
radii: ['0px', '2px', '4px', '8px'],
|
|
359
|
+
borderRadius: '6px',
|
|
360
|
+
colors: {
|
|
361
|
+
primary: '#000',
|
|
362
|
+
base: '#4e4949',
|
|
363
|
+
baseLt: '#817c7c',
|
|
364
|
+
borderColor: '#d8d8d8',
|
|
365
|
+
ntrlMin: '#fff',
|
|
366
|
+
ntrlMinTen: '#e6e6e6',
|
|
367
|
+
gray: '#efefef',
|
|
368
|
+
darkerGray: '#454141'
|
|
369
|
+
},
|
|
370
|
+
rareStepColors: {
|
|
371
|
+
primary: '#202b58',
|
|
372
|
+
secondary: '#ef5c2d',
|
|
373
|
+
ntrlMin: '#ffffff',
|
|
374
|
+
ntrl40: '#f4f4f4',
|
|
375
|
+
ntrl50: '#808080',
|
|
376
|
+
ntrl60: '#e8e8e8',
|
|
377
|
+
ntrl70: '#252525',
|
|
378
|
+
ntrlMax: '#000000'
|
|
379
|
+
},
|
|
380
|
+
rareStepFontWeights: {
|
|
381
|
+
normal: 400,
|
|
382
|
+
medium: 500,
|
|
383
|
+
semiBold: 600,
|
|
384
|
+
bold: 700
|
|
385
|
+
},
|
|
386
|
+
rareStepFontSize: {
|
|
387
|
+
h1: '36px',
|
|
388
|
+
h2: '30px',
|
|
389
|
+
h3: '24px',
|
|
390
|
+
h4: '20px',
|
|
391
|
+
h5: '16px',
|
|
392
|
+
h6: '14px',
|
|
393
|
+
footerTitle: '16px'
|
|
394
|
+
},
|
|
395
|
+
rareStepPageSizes: {
|
|
396
|
+
mobile: '500px',
|
|
397
|
+
tablet: '768px',
|
|
398
|
+
desktop: '992px',
|
|
399
|
+
screenl: '1280px',
|
|
400
|
+
screenxl: '1680px',
|
|
401
|
+
screenxxl: '1920px',
|
|
402
|
+
container: '1600px'
|
|
403
|
+
}
|
|
404
|
+
};
|
|
405
|
+
|
|
406
|
+
var themed = (function (Component) {
|
|
407
|
+
return /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
408
|
+
return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
|
|
409
|
+
theme: theme
|
|
410
|
+
}, /*#__PURE__*/React__default.createElement(Component, _extends({}, props, {
|
|
411
|
+
ref: ref
|
|
412
|
+
})));
|
|
413
|
+
});
|
|
414
|
+
});
|
|
415
|
+
|
|
416
|
+
var Tooltip = function Tooltip(_ref) {
|
|
417
|
+
var children = _ref.children,
|
|
418
|
+
toolTipText = _ref.toolTipText,
|
|
419
|
+
toolTipPosition = _ref.toolTipPosition,
|
|
420
|
+
bodyWidth = _ref.bodyWidth,
|
|
421
|
+
apexWidth = _ref.apexWidth,
|
|
422
|
+
containerClassName = _ref.containerClassName,
|
|
423
|
+
bodyClassName = _ref.bodyClassName;
|
|
424
|
+
return /*#__PURE__*/React__default.createElement(Container, {
|
|
425
|
+
className: containerClassName
|
|
426
|
+
}, children, /*#__PURE__*/React__default.createElement(Body, {
|
|
427
|
+
toolTipPosition: toolTipPosition,
|
|
428
|
+
bodyWidth: bodyWidth,
|
|
429
|
+
apexWidth: apexWidth,
|
|
430
|
+
className: bodyClassName
|
|
431
|
+
}, toolTipText));
|
|
432
|
+
};
|
|
433
|
+
|
|
434
|
+
Tooltip.defaultProps = {
|
|
435
|
+
children: null,
|
|
436
|
+
toolTipText: '',
|
|
437
|
+
toolTipPosition: 'top',
|
|
438
|
+
bodyWidth: '8em',
|
|
439
|
+
apexWidth: '5px',
|
|
440
|
+
containerClassName: '',
|
|
441
|
+
bodyClassName: ''
|
|
442
|
+
};
|
|
443
|
+
var Tooltip$1 = themed(Tooltip);
|
|
444
|
+
|
|
445
|
+
var CurrencySelect = function CurrencySelect(_ref) {
|
|
446
|
+
var currency = _ref.currency,
|
|
447
|
+
currencyOptions = _ref.currencyOptions,
|
|
448
|
+
onCurrencyChange = _ref.onCurrencyChange,
|
|
449
|
+
_ref$isCurrencySelect = _ref.isCurrencySelectionDisabled,
|
|
450
|
+
isCurrencySelectionDisabled = _ref$isCurrencySelect === void 0 ? false : _ref$isCurrencySelect,
|
|
451
|
+
_ref$tooltipContent = _ref.tooltipContent,
|
|
452
|
+
tooltipContent = _ref$tooltipContent === void 0 ? '' : _ref$tooltipContent;
|
|
453
|
+
|
|
454
|
+
if (!currencyOptions || currencyOptions.length === 0) {
|
|
455
|
+
return null;
|
|
456
|
+
}
|
|
457
|
+
|
|
458
|
+
var selectedOption = currencyOptions.find(function (opt) {
|
|
459
|
+
return opt.value === currency;
|
|
460
|
+
});
|
|
461
|
+
|
|
462
|
+
if (!selectedOption) {
|
|
463
|
+
return null;
|
|
464
|
+
}
|
|
465
|
+
|
|
466
|
+
return /*#__PURE__*/React__default.createElement(Tooltip$1, {
|
|
467
|
+
toolTipText: isCurrencySelectionDisabled ? tooltipContent : '',
|
|
468
|
+
toolTipPosition: "bottom",
|
|
469
|
+
bodyWidth: "160px"
|
|
470
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
471
|
+
className: "currency-select-container ".concat(isCurrencySelectionDisabled ? 'disabled' : '')
|
|
472
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
473
|
+
className: "currency-flag"
|
|
474
|
+
}, /*#__PURE__*/React__default.createElement("img", {
|
|
475
|
+
src: selectedOption.flagSrc,
|
|
476
|
+
alt: "".concat(currency, " flag")
|
|
477
|
+
})), /*#__PURE__*/React__default.createElement("select", {
|
|
478
|
+
value: currency,
|
|
479
|
+
onChange: function onChange(e) {
|
|
480
|
+
return onCurrencyChange(e.target.value);
|
|
481
|
+
},
|
|
482
|
+
className: "currency-select",
|
|
483
|
+
disabled: isCurrencySelectionDisabled
|
|
484
|
+
}, currencyOptions.map(function (option) {
|
|
485
|
+
return /*#__PURE__*/React__default.createElement("option", {
|
|
486
|
+
key: option.value,
|
|
487
|
+
value: option.value
|
|
488
|
+
}, option.value, " (", option.symbol, ")");
|
|
489
|
+
}))));
|
|
490
|
+
};
|
|
491
|
+
|
|
250
492
|
var LuxitySideNav = function LuxitySideNav(_ref) {
|
|
251
493
|
var accordionIcon = _ref.accordionIcon,
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
494
|
+
closeIcon = _ref.closeIcon,
|
|
495
|
+
backIcon = _ref.backIcon,
|
|
496
|
+
productUrl = _ref.productUrl,
|
|
497
|
+
onAccountClick = _ref.onAccountClick,
|
|
498
|
+
onCartClick = _ref.onCartClick,
|
|
499
|
+
onContactUsClick = _ref.onContactUsClick,
|
|
500
|
+
onOurStoryClick = _ref.onOurStoryClick,
|
|
501
|
+
onBlogClick = _ref.onBlogClick,
|
|
502
|
+
onSellToUsClick = _ref.onSellToUsClick,
|
|
503
|
+
stores = _ref.stores,
|
|
504
|
+
categoryElements = _ref.categoryElements,
|
|
505
|
+
showSideNav = _ref.showSideNav,
|
|
506
|
+
onMenuClick = _ref.onMenuClick,
|
|
507
|
+
menuData = _ref.menuData,
|
|
508
|
+
LinkComponent = _ref.LinkComponent,
|
|
509
|
+
currency = _ref.currency,
|
|
510
|
+
currencyOptions = _ref.currencyOptions,
|
|
511
|
+
onCurrencyChange = _ref.onCurrencyChange,
|
|
512
|
+
isCurrencySelectionDisabled = _ref.isCurrencySelectionDisabled,
|
|
513
|
+
tooltipContent = _ref.tooltipContent;
|
|
514
|
+
|
|
267
515
|
var _useState = React.useState(false),
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
516
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
517
|
+
subMenuOpen = _useState2[0],
|
|
518
|
+
setSubMenuOpen = _useState2[1];
|
|
519
|
+
|
|
271
520
|
var _useState3 = React.useState(''),
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
521
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
522
|
+
displayedSubMenu = _useState4[0],
|
|
523
|
+
setDisplayedSubMenu = _useState4[1];
|
|
524
|
+
|
|
275
525
|
var _useState5 = React.useState(false),
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
526
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
527
|
+
loading = _useState6[0],
|
|
528
|
+
setLoading = _useState6[1];
|
|
529
|
+
|
|
279
530
|
var _useState7 = React.useState({
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
531
|
+
latestArrivals: [],
|
|
532
|
+
bags: [],
|
|
533
|
+
shoes: [],
|
|
534
|
+
apparel: [],
|
|
535
|
+
accessories: [],
|
|
536
|
+
watches: [],
|
|
537
|
+
accessoriesCategories: [],
|
|
538
|
+
apparelStyles: []
|
|
539
|
+
}),
|
|
540
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
541
|
+
dropdownData = _useState8[0],
|
|
542
|
+
setDropdownData = _useState8[1];
|
|
543
|
+
|
|
292
544
|
var _useState9 = React.useState(false),
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
545
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
|
546
|
+
hasError = _useState10[0],
|
|
547
|
+
setHasError = _useState10[1];
|
|
548
|
+
|
|
296
549
|
var onSubMenuClick = function onSubMenuClick(subMenu) {
|
|
297
550
|
setSubMenuOpen(function (prev) {
|
|
298
551
|
return !prev;
|
|
299
552
|
});
|
|
300
553
|
setDisplayedSubMenu(subMenu);
|
|
301
554
|
};
|
|
555
|
+
|
|
302
556
|
var onStoresClick = function onStoresClick() {
|
|
303
557
|
setSubMenuOpen(false);
|
|
304
558
|
setDisplayedSubMenu('stores');
|
|
305
559
|
};
|
|
560
|
+
|
|
306
561
|
var onBackClick = function onBackClick() {
|
|
307
562
|
setSubMenuOpen(false);
|
|
308
563
|
setDisplayedSubMenu('');
|
|
309
564
|
};
|
|
565
|
+
|
|
310
566
|
var onCloseSideNav = function onCloseSideNav(e) {
|
|
311
567
|
onMenuClick();
|
|
312
568
|
setSubMenuOpen(false);
|
|
313
569
|
setDisplayedSubMenu('');
|
|
570
|
+
|
|
314
571
|
if (e.key === 'Enter') {
|
|
315
572
|
e.preventDefault();
|
|
316
573
|
}
|
|
317
574
|
};
|
|
575
|
+
|
|
318
576
|
function addCategoryToElements(elements, categoryName) {
|
|
319
577
|
return elements.map(function (element) {
|
|
320
578
|
return _objectSpread2(_objectSpread2({}, element), {}, {
|
|
@@ -322,6 +580,7 @@
|
|
|
322
580
|
});
|
|
323
581
|
});
|
|
324
582
|
}
|
|
583
|
+
|
|
325
584
|
React.useMemo(function () {
|
|
326
585
|
setLoading(true);
|
|
327
586
|
axios.get("".concat(menuData)).then(function (_ref2) {
|
|
@@ -495,7 +754,13 @@
|
|
|
495
754
|
type: "button",
|
|
496
755
|
className: "side-nav__sub-link",
|
|
497
756
|
onClick: onCartClick
|
|
498
|
-
}, "My Cart"))
|
|
757
|
+
}, "My Cart")), /*#__PURE__*/React__default.createElement(CurrencySelect, {
|
|
758
|
+
currency: currency,
|
|
759
|
+
currencyOptions: currencyOptions,
|
|
760
|
+
onCurrencyChange: onCurrencyChange,
|
|
761
|
+
isCurrencySelectionDisabled: isCurrencySelectionDisabled,
|
|
762
|
+
tooltipContent: tooltipContent
|
|
763
|
+
}))), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
|
|
499
764
|
subMenuOpen: subMenuOpen && displayedSubMenu === 'new',
|
|
500
765
|
onBackClick: onBackClick,
|
|
501
766
|
backIcon: backIcon,
|