@bonlineza/luxity-lib 2.34.1 → 2.34.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.
- package/Accordion.js +76 -116
- package/AddInterest.js +434 -768
- package/BrandSelector.js +176 -336
- package/Checkbox.js +68 -101
- package/CheckboxButton.js +79 -124
- package/CommunicationPreferenceOptionsRenderer.js +107 -125
- package/CommunicationPreferenceSection.js +114 -134
- package/CommunicationPreferences.js +443 -339
- package/CountryCodeSelect.js +7 -10
- package/CurrencyInputFormatter.js +29 -56
- package/CurrencySelect.js +188 -19
- package/GALink.js +6 -16
- package/GenderSelector.js +88 -142
- package/GraphQLDropdownSelector.js +505 -939
- package/GraphQLMultiSelector.js +141 -274
- package/IconHeader.js +11 -25
- package/IconWrapper.js +3 -7
- package/InterestCatSelector.js +34 -74
- package/InterestItem.js +103 -187
- package/Interests.js +485 -890
- package/InterestsSubheading.js +5 -10
- package/InvertedTextButton.js +27 -63
- package/LuxityAppSideNav.js +18 -21
- package/LuxityDesktopHeader.js +360 -211
- package/LuxityFooter.js +464 -260
- package/LuxityGraphQLDropdownSelector.js +519 -969
- package/LuxityGraphQLMultiselector.js +167 -321
- package/LuxityMobileHeader.js +221 -278
- package/LuxityPageReady.js +74 -136
- package/LuxitySideNav.js +134 -155
- package/MaterialSelector.js +525 -976
- package/ModelSelector.js +525 -976
- package/NotificationDropDown.js +111 -209
- package/Notify.js +0 -1
- package/OutlinePrimaryButton.js +26 -58
- package/PriceRangeSelector.js +168 -281
- package/PrimaryButton.js +26 -58
- package/RadioButtons.js +114 -140
- package/RangeSlider.js +152 -242
- package/RareStepFooter.js +27 -41
- package/RareStepHeader.js +139 -190
- package/ReactSelectWrapper.js +0 -1
- package/SecondaryButton.js +26 -58
- package/ShoeSizeRangeSelector.js +162 -260
- package/ShoeSizeSelector.js +158 -263
- package/SimpleErrorBoundary.js +59 -106
- package/StyleSelector.js +176 -336
- package/TextButton.js +26 -58
- package/Tooltip.js +17 -39
- package/Tracking.js +0 -1
- package/WrapperButton.js +20 -43
- package/build/bundle.css +1 -1
- package/build/bundle.js +1298 -1695
- package/package.json +1 -1
- package/svg/Accessories.js +6 -13
- package/svg/Account.js +6 -13
- package/svg/Add.js +6 -13
- package/svg/ArrowRight.js +6 -13
- package/svg/Bags.js +6 -13
- package/svg/BurgerMenu.js +6 -13
- package/svg/Calendar.js +6 -13
- package/svg/CalendarCircled.js +6 -13
- package/svg/CheckCircled.js +6 -13
- package/svg/Close.js +6 -13
- package/svg/Clothing.js +6 -13
- package/svg/Dot.js +6 -13
- package/svg/Edit.js +6 -13
- package/svg/Eye.js +6 -13
- package/svg/FileAttach.js +6 -13
- package/svg/FileAttachCircled.js +6 -13
- package/svg/LightBulb.js +6 -13
- package/svg/Logo.js +6 -13
- package/svg/LuxityMenu.js +6 -13
- package/svg/Minus.js +6 -13
- package/svg/MobileAvatar.js +6 -13
- package/svg/MyOrder.js +6 -13
- package/svg/MyPayment.js +6 -13
- package/svg/MyProfile.js +8 -14
- package/svg/MySale.js +6 -13
- package/svg/Notification.js +6 -13
- package/svg/PointerDown.js +6 -13
- package/svg/Search.js +6 -13
- package/svg/Shoes.js +6 -13
- package/svg/SvgWrapper.js +3 -7
- package/svg/Trash.js +6 -13
- package/svg/Watches.js +6 -13
package/LuxityDesktopHeader.js
CHANGED
|
@@ -1,110 +1,119 @@
|
|
|
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.LuxityDesktopHeader = 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.LuxityDesktopHeader = 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
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
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;
|
|
18
61
|
}
|
|
19
|
-
|
|
20
|
-
return keys;
|
|
21
62
|
}
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
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);
|
|
31
73
|
}
|
|
32
|
-
|
|
33
|
-
return target;
|
|
74
|
+
return t;
|
|
34
75
|
}
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
Object
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
writable: true
|
|
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));
|
|
43
83
|
});
|
|
44
|
-
} else {
|
|
45
|
-
obj[key] = value;
|
|
46
84
|
}
|
|
47
|
-
|
|
48
|
-
return obj;
|
|
85
|
+
return e;
|
|
49
86
|
}
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
function _arrayWithHoles(arr) {
|
|
56
|
-
if (Array.isArray(arr)) return arr;
|
|
87
|
+
function _slicedToArray(r, e) {
|
|
88
|
+
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
|
|
57
89
|
}
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
if (_i == null) return;
|
|
63
|
-
var _arr = [];
|
|
64
|
-
var _n = true;
|
|
65
|
-
var _d = false;
|
|
66
|
-
|
|
67
|
-
var _s, _e;
|
|
68
|
-
|
|
69
|
-
try {
|
|
70
|
-
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
|
|
71
|
-
_arr.push(_s.value);
|
|
72
|
-
|
|
73
|
-
if (i && _arr.length === i) break;
|
|
74
|
-
}
|
|
75
|
-
} catch (err) {
|
|
76
|
-
_d = true;
|
|
77
|
-
_e = err;
|
|
78
|
-
} finally {
|
|
79
|
-
try {
|
|
80
|
-
if (!_n && _i["return"] != null) _i["return"]();
|
|
81
|
-
} finally {
|
|
82
|
-
if (_d) throw _e;
|
|
90
|
+
function _taggedTemplateLiteral(e, t) {
|
|
91
|
+
return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, {
|
|
92
|
+
raw: {
|
|
93
|
+
value: Object.freeze(t)
|
|
83
94
|
}
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
return _arr;
|
|
95
|
+
}));
|
|
87
96
|
}
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
if (
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
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);
|
|
96
106
|
}
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
|
102
|
-
|
|
103
|
-
return arr2;
|
|
107
|
+
function _toPropertyKey(t) {
|
|
108
|
+
var i = _toPrimitive(t, "string");
|
|
109
|
+
return "symbol" == typeof i ? i : i + "";
|
|
104
110
|
}
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
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;
|
|
116
|
+
}
|
|
108
117
|
}
|
|
109
118
|
|
|
110
119
|
var cssUnit = {
|
|
@@ -246,16 +255,16 @@
|
|
|
246
255
|
|
|
247
256
|
var Dropdown = function Dropdown(_ref) {
|
|
248
257
|
var title = _ref.title,
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
258
|
+
imageSrc = _ref.imageSrc,
|
|
259
|
+
_ref$categoryElements = _ref.categoryElements,
|
|
260
|
+
categoryElements = _ref$categoryElements === void 0 ? [] : _ref$categoryElements,
|
|
261
|
+
_ref$brandElements = _ref.brandElements,
|
|
262
|
+
brandElements = _ref$brandElements === void 0 ? [] : _ref$brandElements,
|
|
263
|
+
productsUrl = _ref.productsUrl,
|
|
264
|
+
categorySlug = _ref.categorySlug,
|
|
265
|
+
categoryTitle = _ref.categoryTitle,
|
|
266
|
+
isLoading = _ref.isLoading,
|
|
267
|
+
hasError = _ref.hasError;
|
|
259
268
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, hasError ? /*#__PURE__*/React__default.createElement("div", {
|
|
260
269
|
className: "dropdown__errors"
|
|
261
270
|
}, "Failed to load data.") : /*#__PURE__*/React__default.createElement("div", {
|
|
@@ -307,8 +316,8 @@
|
|
|
307
316
|
|
|
308
317
|
var StoresDropdown = function StoresDropdown(_ref) {
|
|
309
318
|
var _ref$stores = _ref.stores,
|
|
310
|
-
|
|
311
|
-
|
|
319
|
+
stores = _ref$stores === void 0 ? [] : _ref$stores,
|
|
320
|
+
contactNumber = _ref.contactNumber;
|
|
312
321
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
313
322
|
className: "stores-dropdown"
|
|
314
323
|
}, !!stores.length && stores.map(function (store) {
|
|
@@ -373,7 +382,6 @@
|
|
|
373
382
|
|
|
374
383
|
var removeCategoryByName = function removeCategoryByName(categories, name) {
|
|
375
384
|
var _categories$filter;
|
|
376
|
-
|
|
377
385
|
return (_categories$filter = categories === null || categories === void 0 ? void 0 : categories.filter(function (category) {
|
|
378
386
|
return category.name !== name;
|
|
379
387
|
})) !== null && _categories$filter !== void 0 ? _categories$filter : [];
|
|
@@ -381,17 +389,15 @@
|
|
|
381
389
|
|
|
382
390
|
var SearchResults = function SearchResults(_ref) {
|
|
383
391
|
var searchValue = _ref.searchValue,
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
392
|
+
searchResults = _ref.searchResults,
|
|
393
|
+
onViewAll = _ref.onViewAll,
|
|
394
|
+
searchResultsRef = _ref.searchResultsRef,
|
|
395
|
+
onSearchSubmit = _ref.onSearchSubmit,
|
|
396
|
+
setSearchValue = _ref.setSearchValue;
|
|
390
397
|
if (searchValue.trim().length >= 3) {
|
|
391
398
|
if (searchResults.brands.length === 0 && searchResults.products.length === 0) {
|
|
392
399
|
return null;
|
|
393
400
|
}
|
|
394
|
-
|
|
395
401
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
396
402
|
className: "z-50 absolute md:top-14 font-body bg-white w-full lg:w-1/2 flex flex-col md:flex-row md:divide-x divide-black lg:mt-1 shadow-md",
|
|
397
403
|
ref: searchResultsRef
|
|
@@ -428,29 +434,178 @@
|
|
|
428
434
|
className: "bottom-0 mt-5 py-3 w-full font-body text-center text-white uppercase bg-black hover:bg-gray-950 border border-black transition-all ease-in-out duration-300 cursor-pointer"
|
|
429
435
|
}, "View all"))));
|
|
430
436
|
}
|
|
431
|
-
|
|
432
437
|
return null;
|
|
433
438
|
};
|
|
434
439
|
|
|
440
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
441
|
+
|
|
442
|
+
/* position relative is required for the Body element to be positioned correctly */
|
|
443
|
+
var relativeInlineStyle = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n"])));
|
|
444
|
+
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"])));
|
|
445
|
+
var getTopMiddleArrowAfterStyle = function getTopMiddleArrowAfterStyle(props) {
|
|
446
|
+
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);
|
|
447
|
+
};
|
|
448
|
+
var getBottomMiddleBodyStyle = function getBottomMiddleBodyStyle(props) {
|
|
449
|
+
return styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: absolute;\n top: 100%;\n left: calc(50% - ", " / 2);\n"])), props.bodyWidth);
|
|
450
|
+
};
|
|
451
|
+
var getBottomMiddleArrowAfterStyle = function getBottomMiddleArrowAfterStyle(props) {
|
|
452
|
+
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);
|
|
453
|
+
};
|
|
454
|
+
|
|
455
|
+
var _templateObject$1;
|
|
456
|
+
var getBodyStyle = function getBodyStyle() {
|
|
457
|
+
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
458
|
+
var _props$toolTipPositio = props.toolTipPosition,
|
|
459
|
+
toolTipPosition = _props$toolTipPositio === void 0 ? '' : _props$toolTipPositio;
|
|
460
|
+
switch (toolTipPosition) {
|
|
461
|
+
case 'top':
|
|
462
|
+
return topMiddleBodyStyle;
|
|
463
|
+
case 'bottom':
|
|
464
|
+
return getBottomMiddleBodyStyle(props);
|
|
465
|
+
default:
|
|
466
|
+
return null;
|
|
467
|
+
}
|
|
468
|
+
};
|
|
469
|
+
var getAfterStyling = function getAfterStyling() {
|
|
470
|
+
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
471
|
+
var toolTipPosition = props.toolTipPosition;
|
|
472
|
+
switch (toolTipPosition) {
|
|
473
|
+
case 'top':
|
|
474
|
+
return getTopMiddleArrowAfterStyle(props);
|
|
475
|
+
case 'bottom':
|
|
476
|
+
return getBottomMiddleArrowAfterStyle(props);
|
|
477
|
+
default:
|
|
478
|
+
return '';
|
|
479
|
+
}
|
|
480
|
+
};
|
|
481
|
+
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) {
|
|
482
|
+
return props.bodyWidth;
|
|
483
|
+
}, function (props) {
|
|
484
|
+
return props.theme.colors.base || 'black';
|
|
485
|
+
}, function (props) {
|
|
486
|
+
return getBodyStyle(props);
|
|
487
|
+
}, function (props) {
|
|
488
|
+
return getAfterStyling(props);
|
|
489
|
+
});
|
|
490
|
+
|
|
491
|
+
var _templateObject$2;
|
|
492
|
+
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);
|
|
493
|
+
|
|
494
|
+
var theme = {
|
|
495
|
+
breakpoints: ['40em', '52em', '64em'],
|
|
496
|
+
space: ['0px', '4px', '8px', '16px', '32px', '64px', '128px', '256px', '512px'],
|
|
497
|
+
fontSizes: ['12px', '14px', '16px', '20px', '24px', '32px', '48px', '64px', '72px'],
|
|
498
|
+
marginPaddings: ['0.5rem', '1rem', '1.5rem', '2rem', '2.5rem', '3rem', '3.5rem', '4rem', '4.5rem', '5rem', '5.5rem', '6rem'],
|
|
499
|
+
letterSpacings: ['-0.5px', '0px', '+0.5px'],
|
|
500
|
+
radii: ['0px', '2px', '4px', '8px'],
|
|
501
|
+
borderRadius: '6px',
|
|
502
|
+
colors: {
|
|
503
|
+
primary: '#000',
|
|
504
|
+
base: '#4e4949',
|
|
505
|
+
baseLt: '#817c7c',
|
|
506
|
+
borderColor: '#d8d8d8',
|
|
507
|
+
ntrlMin: '#fff',
|
|
508
|
+
ntrlMinTen: '#e6e6e6',
|
|
509
|
+
gray: '#efefef',
|
|
510
|
+
darkerGray: '#454141'
|
|
511
|
+
},
|
|
512
|
+
rareStepColors: {
|
|
513
|
+
primary: '#202b58',
|
|
514
|
+
secondary: '#ef5c2d',
|
|
515
|
+
ntrlMin: '#ffffff',
|
|
516
|
+
ntrl40: '#f4f4f4',
|
|
517
|
+
ntrl50: '#808080',
|
|
518
|
+
ntrl60: '#e8e8e8',
|
|
519
|
+
ntrl70: '#252525',
|
|
520
|
+
ntrlMax: '#000000'
|
|
521
|
+
},
|
|
522
|
+
rareStepFontWeights: {
|
|
523
|
+
normal: 400,
|
|
524
|
+
medium: 500,
|
|
525
|
+
semiBold: 600,
|
|
526
|
+
bold: 700
|
|
527
|
+
},
|
|
528
|
+
rareStepFontSize: {
|
|
529
|
+
h1: '36px',
|
|
530
|
+
h2: '30px',
|
|
531
|
+
h3: '24px',
|
|
532
|
+
h4: '20px',
|
|
533
|
+
h5: '16px',
|
|
534
|
+
h6: '14px',
|
|
535
|
+
footerTitle: '16px'
|
|
536
|
+
},
|
|
537
|
+
rareStepPageSizes: {
|
|
538
|
+
mobile: '500px',
|
|
539
|
+
tablet: '768px',
|
|
540
|
+
desktop: '992px',
|
|
541
|
+
screenl: '1280px',
|
|
542
|
+
screenxl: '1680px',
|
|
543
|
+
screenxxl: '1920px',
|
|
544
|
+
container: '1600px'
|
|
545
|
+
}
|
|
546
|
+
};
|
|
547
|
+
|
|
548
|
+
var themed = (function (Component) {
|
|
549
|
+
return /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
550
|
+
return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
|
|
551
|
+
theme: theme
|
|
552
|
+
}, /*#__PURE__*/React__default.createElement(Component, _extends({}, props, {
|
|
553
|
+
ref: ref
|
|
554
|
+
})));
|
|
555
|
+
});
|
|
556
|
+
});
|
|
557
|
+
|
|
558
|
+
var Tooltip = function Tooltip(_ref) {
|
|
559
|
+
var children = _ref.children,
|
|
560
|
+
toolTipText = _ref.toolTipText,
|
|
561
|
+
toolTipPosition = _ref.toolTipPosition,
|
|
562
|
+
bodyWidth = _ref.bodyWidth,
|
|
563
|
+
apexWidth = _ref.apexWidth,
|
|
564
|
+
containerClassName = _ref.containerClassName,
|
|
565
|
+
bodyClassName = _ref.bodyClassName;
|
|
566
|
+
return /*#__PURE__*/React__default.createElement(Container, {
|
|
567
|
+
className: containerClassName
|
|
568
|
+
}, children, /*#__PURE__*/React__default.createElement(Body, {
|
|
569
|
+
toolTipPosition: toolTipPosition,
|
|
570
|
+
bodyWidth: bodyWidth,
|
|
571
|
+
apexWidth: apexWidth,
|
|
572
|
+
className: bodyClassName
|
|
573
|
+
}, toolTipText));
|
|
574
|
+
};
|
|
575
|
+
Tooltip.defaultProps = {
|
|
576
|
+
children: null,
|
|
577
|
+
toolTipText: '',
|
|
578
|
+
toolTipPosition: 'top',
|
|
579
|
+
bodyWidth: '8em',
|
|
580
|
+
apexWidth: '5px',
|
|
581
|
+
containerClassName: '',
|
|
582
|
+
bodyClassName: ''
|
|
583
|
+
};
|
|
584
|
+
var Tooltip$1 = themed(Tooltip);
|
|
585
|
+
|
|
435
586
|
var CurrencySelect = function CurrencySelect(_ref) {
|
|
436
587
|
var currency = _ref.currency,
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
588
|
+
currencyOptions = _ref.currencyOptions,
|
|
589
|
+
onCurrencyChange = _ref.onCurrencyChange,
|
|
590
|
+
_ref$isCurrencySelect = _ref.isCurrencySelectionDisabled,
|
|
591
|
+
isCurrencySelectionDisabled = _ref$isCurrencySelect === void 0 ? false : _ref$isCurrencySelect,
|
|
592
|
+
_ref$tooltipContent = _ref.tooltipContent,
|
|
593
|
+
tooltipContent = _ref$tooltipContent === void 0 ? '' : _ref$tooltipContent;
|
|
440
594
|
if (!currencyOptions || currencyOptions.length === 0) {
|
|
441
595
|
return null;
|
|
442
596
|
}
|
|
443
|
-
|
|
444
597
|
var selectedOption = currencyOptions.find(function (opt) {
|
|
445
598
|
return opt.value === currency;
|
|
446
599
|
});
|
|
447
|
-
|
|
448
600
|
if (!selectedOption) {
|
|
449
601
|
return null;
|
|
450
602
|
}
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
603
|
+
return /*#__PURE__*/React__default.createElement(Tooltip$1, {
|
|
604
|
+
toolTipText: isCurrencySelectionDisabled ? tooltipContent : '',
|
|
605
|
+
toolTipPosition: "bottom",
|
|
606
|
+
bodyWidth: "160px"
|
|
607
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
608
|
+
className: "currency-select-container ".concat(isCurrencySelectionDisabled ? 'disabled' : '')
|
|
454
609
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
455
610
|
className: "currency-flag"
|
|
456
611
|
}, /*#__PURE__*/React__default.createElement("img", {
|
|
@@ -461,115 +616,106 @@
|
|
|
461
616
|
onChange: function onChange(e) {
|
|
462
617
|
return onCurrencyChange(e.target.value);
|
|
463
618
|
},
|
|
464
|
-
className: "currency-select"
|
|
619
|
+
className: "currency-select",
|
|
620
|
+
disabled: isCurrencySelectionDisabled
|
|
465
621
|
}, currencyOptions.map(function (option) {
|
|
466
622
|
return /*#__PURE__*/React__default.createElement("option", {
|
|
467
623
|
key: option.value,
|
|
468
624
|
value: option.value
|
|
469
625
|
}, option.value, " (", option.symbol, ")");
|
|
470
|
-
})));
|
|
626
|
+
}))));
|
|
471
627
|
};
|
|
472
628
|
|
|
473
629
|
var LuxityDesktopHeader = function LuxityDesktopHeader(_ref) {
|
|
474
630
|
var accountIcon = _ref.accountIcon,
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
631
|
+
cartIcon = _ref.cartIcon,
|
|
632
|
+
interestIcon = _ref.interestIcon,
|
|
633
|
+
cartCount = _ref.cartCount,
|
|
634
|
+
logoSrc = _ref.logoSrc,
|
|
635
|
+
categoryElements = _ref.categoryElements,
|
|
636
|
+
newBrandsImage = _ref.newBrandsImage,
|
|
637
|
+
bagsImage = _ref.bagsImage,
|
|
638
|
+
shoesImage = _ref.shoesImage,
|
|
639
|
+
clothingImage = _ref.clothingImage,
|
|
640
|
+
accessoriesImage = _ref.accessoriesImage,
|
|
641
|
+
watchesImage = _ref.watchesImage,
|
|
642
|
+
stores = _ref.stores,
|
|
643
|
+
contactNumber = _ref.contactNumber,
|
|
644
|
+
productsUrl = _ref.productsUrl,
|
|
645
|
+
onInterestClick = _ref.onInterestClick,
|
|
646
|
+
onCartClick = _ref.onCartClick,
|
|
647
|
+
onAccountClick = _ref.onAccountClick,
|
|
648
|
+
inputSearchIcon = _ref.inputSearchIcon,
|
|
649
|
+
onSearch = _ref.onSearch,
|
|
650
|
+
onSellToUsClick = _ref.onSellToUsClick,
|
|
651
|
+
contactUsLink = _ref.contactUsLink,
|
|
652
|
+
ourStoryLink = _ref.ourStoryLink,
|
|
653
|
+
onLogoClick = _ref.onLogoClick,
|
|
654
|
+
endpoint = _ref.endpoint,
|
|
655
|
+
menuData = _ref.menuData,
|
|
656
|
+
onSearchSubmit = _ref.onSearchSubmit,
|
|
657
|
+
onProductIdsReceived = _ref.onProductIdsReceived,
|
|
658
|
+
currency = _ref.currency,
|
|
659
|
+
currencyOptions = _ref.currencyOptions,
|
|
660
|
+
onCurrencyChange = _ref.onCurrencyChange,
|
|
661
|
+
isCurrencySelectionDisabled = _ref.isCurrencySelectionDisabled,
|
|
662
|
+
tooltipContent = _ref.tooltipContent,
|
|
663
|
+
vipIcon = _ref.vipIcon,
|
|
664
|
+
name = _ref.name,
|
|
665
|
+
isVip = _ref.isVip,
|
|
666
|
+
shop = _ref.shop,
|
|
667
|
+
app = _ref.app;
|
|
512
668
|
var _useState = React.useState(''),
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
669
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
670
|
+
searchValue = _useState2[0],
|
|
671
|
+
setSearchValue = _useState2[1];
|
|
517
672
|
var _useState3 = React.useState(false),
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
673
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
674
|
+
loading = _useState4[0],
|
|
675
|
+
setLoading = _useState4[1];
|
|
522
676
|
var _useState5 = React.useState({
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
677
|
+
latestArrivals: [],
|
|
678
|
+
bags: [],
|
|
679
|
+
shoes: [],
|
|
680
|
+
clothing: [],
|
|
681
|
+
accessories: [],
|
|
682
|
+
watches: [],
|
|
683
|
+
accessoriesCategories: [],
|
|
684
|
+
apparelStyles: []
|
|
685
|
+
}),
|
|
686
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
687
|
+
dropdownData = _useState6[0],
|
|
688
|
+
setDropdownData = _useState6[1];
|
|
536
689
|
var _useState7 = React.useState(false),
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
690
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
691
|
+
hasError = _useState8[0],
|
|
692
|
+
setHasError = _useState8[1];
|
|
541
693
|
var _useState9 = React.useState(false),
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
694
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
|
695
|
+
searchLoading = _useState10[0],
|
|
696
|
+
setSearchLoading = _useState10[1];
|
|
546
697
|
var _useState11 = React.useState({
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
698
|
+
brands: [],
|
|
699
|
+
products: []
|
|
700
|
+
}),
|
|
701
|
+
_useState12 = _slicedToArray(_useState11, 2),
|
|
702
|
+
searchResults = _useState12[0],
|
|
703
|
+
setSearchResults = _useState12[1];
|
|
554
704
|
var searchResultsRef = React.useRef(null);
|
|
555
|
-
|
|
556
705
|
var debounce = function debounce(func, wait) {
|
|
557
706
|
var timeout;
|
|
558
707
|
return function executedFunction() {
|
|
559
708
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
560
709
|
args[_key] = arguments[_key];
|
|
561
710
|
}
|
|
562
|
-
|
|
563
711
|
var later = function later() {
|
|
564
712
|
clearTimeout(timeout);
|
|
565
713
|
func.apply(void 0, args);
|
|
566
714
|
};
|
|
567
|
-
|
|
568
715
|
clearTimeout(timeout);
|
|
569
716
|
timeout = setTimeout(later, wait);
|
|
570
717
|
};
|
|
571
718
|
};
|
|
572
|
-
|
|
573
719
|
var debouncedSearch = React.useCallback(debounce(function (nextValue) {
|
|
574
720
|
setSearchLoading(true);
|
|
575
721
|
axios.post(endpoint, searchProducts(nextValue, 6)).then(function (response) {
|
|
@@ -581,11 +727,9 @@
|
|
|
581
727
|
setSearchLoading(false);
|
|
582
728
|
});
|
|
583
729
|
}, 500), [endpoint]);
|
|
584
|
-
|
|
585
730
|
var handleChange = function handleChange(event) {
|
|
586
731
|
var value = event.target.value;
|
|
587
732
|
setSearchValue(value);
|
|
588
|
-
|
|
589
733
|
if (value.trim().length >= 3) {
|
|
590
734
|
debouncedSearch(value);
|
|
591
735
|
} else {
|
|
@@ -595,20 +739,17 @@
|
|
|
595
739
|
});
|
|
596
740
|
}
|
|
597
741
|
};
|
|
598
|
-
|
|
599
742
|
React.useEffect(function () {
|
|
600
743
|
var handleClickOutside = function handleClickOutside(event) {
|
|
601
744
|
if (searchResultsRef.current && !searchResultsRef.current.contains(event.target)) {
|
|
602
745
|
setSearchValue('');
|
|
603
746
|
}
|
|
604
747
|
};
|
|
605
|
-
|
|
606
748
|
document.addEventListener('mousedown', handleClickOutside);
|
|
607
749
|
return function () {
|
|
608
750
|
document.removeEventListener('mousedown', handleClickOutside);
|
|
609
751
|
};
|
|
610
752
|
}, []);
|
|
611
|
-
|
|
612
753
|
var handleKeyDown = function handleKeyDown(event) {
|
|
613
754
|
if (event.key === 'Enter') {
|
|
614
755
|
onSearchSubmit(searchValue);
|
|
@@ -617,7 +758,6 @@
|
|
|
617
758
|
setSearchValue('');
|
|
618
759
|
}
|
|
619
760
|
};
|
|
620
|
-
|
|
621
761
|
function addCategoryToElements(elements, categoryName) {
|
|
622
762
|
return elements.map(function (element) {
|
|
623
763
|
return _objectSpread2(_objectSpread2({}, element), {}, {
|
|
@@ -625,7 +765,6 @@
|
|
|
625
765
|
});
|
|
626
766
|
});
|
|
627
767
|
}
|
|
628
|
-
|
|
629
768
|
React.useMemo(function () {
|
|
630
769
|
setLoading(true);
|
|
631
770
|
axios.get("".concat(menuData)).then(function (_ref2) {
|
|
@@ -812,21 +951,27 @@
|
|
|
812
951
|
className: "navbar__icons-wrapper"
|
|
813
952
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
814
953
|
className: "navbar__icons"
|
|
815
|
-
},
|
|
954
|
+
}, /*#__PURE__*/React__default.createElement(CurrencySelect, {
|
|
816
955
|
currency: currency,
|
|
817
956
|
currencyOptions: currencyOptions,
|
|
818
|
-
onCurrencyChange: onCurrencyChange
|
|
957
|
+
onCurrencyChange: onCurrencyChange,
|
|
958
|
+
isCurrencySelectionDisabled: isCurrencySelectionDisabled,
|
|
959
|
+
tooltipContent: tooltipContent
|
|
819
960
|
}), shop && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("button", {
|
|
820
961
|
type: "button",
|
|
821
962
|
className: "navbar__icon relative flex",
|
|
822
963
|
onClick: onAccountClick
|
|
823
964
|
}, /*#__PURE__*/React__default.createElement("img", {
|
|
824
965
|
src: accountIcon,
|
|
825
|
-
alt: "account-icon"
|
|
966
|
+
alt: "account-icon",
|
|
967
|
+
width: 20,
|
|
968
|
+
height: 20
|
|
826
969
|
}), isVip && /*#__PURE__*/React__default.createElement("img", {
|
|
827
970
|
src: vipIcon,
|
|
828
971
|
alt: "vip-icon",
|
|
829
|
-
className: "navbar__vip-icon"
|
|
972
|
+
className: "navbar__vip-icon",
|
|
973
|
+
width: 16,
|
|
974
|
+
height: 16
|
|
830
975
|
})), isVip && /*#__PURE__*/React__default.createElement("button", {
|
|
831
976
|
type: "button",
|
|
832
977
|
className: "mr-3",
|
|
@@ -839,14 +984,18 @@
|
|
|
839
984
|
onClick: onInterestClick
|
|
840
985
|
}, /*#__PURE__*/React__default.createElement("img", {
|
|
841
986
|
src: interestIcon,
|
|
842
|
-
alt: "interest-icon"
|
|
987
|
+
alt: "interest-icon",
|
|
988
|
+
width: 20,
|
|
989
|
+
height: 20
|
|
843
990
|
})), /*#__PURE__*/React__default.createElement("button", {
|
|
844
991
|
type: "button",
|
|
845
992
|
className: "navbar__cart-icon ".concat(app ? 'navbar__icon--app' : 'navbar__icon'),
|
|
846
993
|
onClick: onCartClick
|
|
847
994
|
}, /*#__PURE__*/React__default.createElement("img", {
|
|
848
995
|
src: cartIcon,
|
|
849
|
-
alt: "cart-icon"
|
|
996
|
+
alt: "cart-icon",
|
|
997
|
+
width: 20,
|
|
998
|
+
height: 20
|
|
850
999
|
}), shop && /*#__PURE__*/React__default.createElement("div", {
|
|
851
1000
|
className: "navbar__cart-count"
|
|
852
1001
|
}, cartCount))), /*#__PURE__*/React__default.createElement("nav", {
|