@bonlineza/luxity-lib 2.32.0 → 2.32.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/LuxityDesktopHeader.js +132 -6
- package/LuxityMobileHeader.js +127 -6
- package/build/bundle.css +1 -1
- package/build/bundle.js +196 -12
- package/package.json +2 -1
- package/tailwind.config.js +11 -0
package/LuxityDesktopHeader.js
CHANGED
|
@@ -112,6 +112,15 @@
|
|
|
112
112
|
query: "{\n latest_arrivals: luxity_brands(has_products: true, limit: 1000, page: 1) {data {id name slug}}\n bags: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: BAGS) {data {id name slug}}\n shoes: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: SHOES) {data {id name slug}}\n apparel: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: APPAREL) {data {id name slug}}\n accessories: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: ACCESSORIES) {data {id name slug}}\n watches: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: WATCHES) {data {id name slug}}\n accessories_categories: luxity_accessories_categories_list { id name slug }\n apparel_styles: luxity_apparel_styles_list { name slug }\n } "
|
|
113
113
|
};
|
|
114
114
|
};
|
|
115
|
+
var searchProducts = function searchProducts(search, limit) {
|
|
116
|
+
return {
|
|
117
|
+
query: "\n query SearchProducts($search: String!, $limit: Int!) {\n luxity_products_serach_results(search: $search, limit: $limit) {\n brands {\n name\n link\n }\n products {\n name\n link\n }\n luxity_product_ids\n }\n }\n ",
|
|
118
|
+
variables: {
|
|
119
|
+
search: search,
|
|
120
|
+
limit: limit
|
|
121
|
+
}
|
|
122
|
+
};
|
|
123
|
+
};
|
|
115
124
|
|
|
116
125
|
var Dropdown = function Dropdown(_ref) {
|
|
117
126
|
var title = _ref.title,
|
|
@@ -244,6 +253,60 @@
|
|
|
244
253
|
})) !== null && _categories$filter !== void 0 ? _categories$filter : [];
|
|
245
254
|
};
|
|
246
255
|
|
|
256
|
+
var SearchResults = function SearchResults(_ref) {
|
|
257
|
+
var searchValue = _ref.searchValue,
|
|
258
|
+
searchLoading = _ref.searchLoading,
|
|
259
|
+
searchResults = _ref.searchResults,
|
|
260
|
+
onViewAll = _ref.onViewAll,
|
|
261
|
+
searchResultsRef = _ref.searchResultsRef,
|
|
262
|
+
onSearchSubmit = _ref.onSearchSubmit,
|
|
263
|
+
setSearchValue = _ref.setSearchValue;
|
|
264
|
+
|
|
265
|
+
if (searchValue.trim() !== '') {
|
|
266
|
+
return /*#__PURE__*/React__default.createElement("div", {
|
|
267
|
+
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",
|
|
268
|
+
ref: searchResultsRef
|
|
269
|
+
}, searchLoading ? /*#__PURE__*/React__default.createElement("div", {
|
|
270
|
+
className: "w-full py-20 flex items-center justify-center"
|
|
271
|
+
}, "Searching ...") : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, searchResults.brands.length === 0 && searchResults.products.length === 0 ? /*#__PURE__*/React__default.createElement("div", {
|
|
272
|
+
className: "w-full py-20 flex items-center justify-center"
|
|
273
|
+
}, "No products found") : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
|
|
274
|
+
className: "w-full lg:w-1/3"
|
|
275
|
+
}, /*#__PURE__*/React__default.createElement("p", {
|
|
276
|
+
className: "font-bold p-2 px-4"
|
|
277
|
+
}, "Brands"), searchResults.brands.map(function (brand) {
|
|
278
|
+
return /*#__PURE__*/React__default.createElement("a", {
|
|
279
|
+
key: brand.link,
|
|
280
|
+
href: brand.link,
|
|
281
|
+
className: ""
|
|
282
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
283
|
+
className: "p-2 px-4 hover:bg-gray-100"
|
|
284
|
+
}, brand.name));
|
|
285
|
+
})), /*#__PURE__*/React__default.createElement("div", {
|
|
286
|
+
className: "w-full lg:w-2/3"
|
|
287
|
+
}, /*#__PURE__*/React__default.createElement("p", {
|
|
288
|
+
className: "font-bold p-2 px-4"
|
|
289
|
+
}, "Products"), searchResults.products.map(function (product) {
|
|
290
|
+
return /*#__PURE__*/React__default.createElement("a", {
|
|
291
|
+
key: product.link,
|
|
292
|
+
href: product.link
|
|
293
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
294
|
+
className: "p-2 px-4 hover:bg-gray-100"
|
|
295
|
+
}, product.name));
|
|
296
|
+
}), /*#__PURE__*/React__default.createElement("button", {
|
|
297
|
+
type: "button",
|
|
298
|
+
onClick: function onClick() {
|
|
299
|
+
onViewAll();
|
|
300
|
+
onSearchSubmit(searchValue);
|
|
301
|
+
setSearchValue('');
|
|
302
|
+
},
|
|
303
|
+
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"
|
|
304
|
+
}, "View all")))));
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
return null;
|
|
308
|
+
};
|
|
309
|
+
|
|
247
310
|
var LuxityDesktopHeader = function LuxityDesktopHeader(_ref) {
|
|
248
311
|
var accountIcon = _ref.accountIcon,
|
|
249
312
|
cartIcon = _ref.cartIcon,
|
|
@@ -270,7 +333,9 @@
|
|
|
270
333
|
contactUsLink = _ref.contactUsLink,
|
|
271
334
|
ourStoryLink = _ref.ourStoryLink,
|
|
272
335
|
onLogoClick = _ref.onLogoClick,
|
|
273
|
-
endpoint = _ref.endpoint
|
|
336
|
+
endpoint = _ref.endpoint,
|
|
337
|
+
onSearchSubmit = _ref.onSearchSubmit,
|
|
338
|
+
onProductIdsReceived = _ref.onProductIdsReceived;
|
|
274
339
|
|
|
275
340
|
var _useState = React.useState(''),
|
|
276
341
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -301,13 +366,39 @@
|
|
|
301
366
|
hasError = _useState8[0],
|
|
302
367
|
setHasError = _useState8[1];
|
|
303
368
|
|
|
304
|
-
var
|
|
305
|
-
|
|
306
|
-
|
|
369
|
+
var _useState9 = React.useState(true),
|
|
370
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
|
371
|
+
searchLoading = _useState10[0],
|
|
372
|
+
setSearchLoading = _useState10[1];
|
|
373
|
+
|
|
374
|
+
var _useState11 = React.useState({
|
|
375
|
+
brands: [],
|
|
376
|
+
products: []
|
|
377
|
+
}),
|
|
378
|
+
_useState12 = _slicedToArray(_useState11, 2),
|
|
379
|
+
searchResults = _useState12[0],
|
|
380
|
+
setSearchResults = _useState12[1];
|
|
381
|
+
|
|
382
|
+
var searchResultsRef = React.useRef(null);
|
|
383
|
+
React.useEffect(function () {
|
|
384
|
+
var handleClickOutside = function handleClickOutside(event) {
|
|
385
|
+
if (searchResultsRef.current && !searchResultsRef.current.contains(event.target)) {
|
|
386
|
+
setSearchValue('');
|
|
387
|
+
}
|
|
388
|
+
};
|
|
389
|
+
|
|
390
|
+
document.addEventListener('mousedown', handleClickOutside);
|
|
391
|
+
return function () {
|
|
392
|
+
document.removeEventListener('mousedown', handleClickOutside);
|
|
393
|
+
};
|
|
394
|
+
}, []);
|
|
307
395
|
|
|
308
396
|
var handleKeyDown = function handleKeyDown(event) {
|
|
309
397
|
if (event.key === 'Enter') {
|
|
310
|
-
|
|
398
|
+
onSearchSubmit(searchValue);
|
|
399
|
+
setSearchValue('');
|
|
400
|
+
} else if (event.key === 'Escape') {
|
|
401
|
+
setSearchValue('');
|
|
311
402
|
}
|
|
312
403
|
};
|
|
313
404
|
|
|
@@ -340,6 +431,30 @@
|
|
|
340
431
|
return setHasError(true);
|
|
341
432
|
});
|
|
342
433
|
}, [endpoint]);
|
|
434
|
+
|
|
435
|
+
var handleChange = function handleChange(event) {
|
|
436
|
+
var value = event.target.value;
|
|
437
|
+
setSearchValue(value);
|
|
438
|
+
onSearch(value);
|
|
439
|
+
|
|
440
|
+
if (value.trim() !== '') {
|
|
441
|
+
setSearchLoading(true);
|
|
442
|
+
axios.post(endpoint, searchProducts(value, 6)).then(function (response) {
|
|
443
|
+
setSearchResults(response.data.data.luxity_products_serach_results);
|
|
444
|
+
var ids = response.data.data.luxity_products_serach_results.luxity_product_ids;
|
|
445
|
+
onProductIdsReceived(ids);
|
|
446
|
+
setSearchLoading(false);
|
|
447
|
+
}).catch(function () {
|
|
448
|
+
setSearchLoading(false);
|
|
449
|
+
});
|
|
450
|
+
} else {
|
|
451
|
+
setSearchResults({
|
|
452
|
+
brands: [],
|
|
453
|
+
products: []
|
|
454
|
+
});
|
|
455
|
+
}
|
|
456
|
+
};
|
|
457
|
+
|
|
343
458
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
344
459
|
className: "navbar"
|
|
345
460
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
@@ -370,7 +485,18 @@
|
|
|
370
485
|
value: searchValue,
|
|
371
486
|
onChange: handleChange,
|
|
372
487
|
onKeyDown: handleKeyDown
|
|
373
|
-
})), /*#__PURE__*/React__default.createElement(
|
|
488
|
+
})), /*#__PURE__*/React__default.createElement(SearchResults, {
|
|
489
|
+
searchValue: searchValue,
|
|
490
|
+
searchLoading: searchLoading,
|
|
491
|
+
searchResults: searchResults,
|
|
492
|
+
onViewAll: function onViewAll() {
|
|
493
|
+
onSearchSubmit(searchValue);
|
|
494
|
+
setSearchValue('');
|
|
495
|
+
},
|
|
496
|
+
searchResultsRef: searchResultsRef,
|
|
497
|
+
onSearchSubmit: onSearchSubmit,
|
|
498
|
+
setSearchValue: setSearchValue
|
|
499
|
+
}), /*#__PURE__*/React__default.createElement("nav", {
|
|
374
500
|
className: "navbar__nav-links navbar__nav-links--wrap"
|
|
375
501
|
}, /*#__PURE__*/React__default.createElement("li", {
|
|
376
502
|
className: "navbar__link"
|
package/LuxityMobileHeader.js
CHANGED
|
@@ -210,6 +210,15 @@
|
|
|
210
210
|
query: "{\n latest_arrivals: luxity_brands(has_products: true, limit: 1000, page: 1) {data {id name slug}}\n bags: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: BAGS) {data {id name slug}}\n shoes: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: SHOES) {data {id name slug}}\n apparel: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: APPAREL) {data {id name slug}}\n accessories: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: ACCESSORIES) {data {id name slug}}\n watches: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: WATCHES) {data {id name slug}}\n accessories_categories: luxity_accessories_categories_list { id name slug }\n apparel_styles: luxity_apparel_styles_list { name slug }\n } "
|
|
211
211
|
};
|
|
212
212
|
};
|
|
213
|
+
var searchProducts = function searchProducts(search, limit) {
|
|
214
|
+
return {
|
|
215
|
+
query: "\n query SearchProducts($search: String!, $limit: Int!) {\n luxity_products_serach_results(search: $search, limit: $limit) {\n brands {\n name\n link\n }\n products {\n name\n link\n }\n luxity_product_ids\n }\n }\n ",
|
|
216
|
+
variables: {
|
|
217
|
+
search: search,
|
|
218
|
+
limit: limit
|
|
219
|
+
}
|
|
220
|
+
};
|
|
221
|
+
};
|
|
213
222
|
|
|
214
223
|
var removeCategoryByName = function removeCategoryByName(categories, name) {
|
|
215
224
|
var _categories$filter;
|
|
@@ -535,6 +544,60 @@
|
|
|
535
544
|
})));
|
|
536
545
|
};
|
|
537
546
|
|
|
547
|
+
var SearchResults = function SearchResults(_ref) {
|
|
548
|
+
var searchValue = _ref.searchValue,
|
|
549
|
+
searchLoading = _ref.searchLoading,
|
|
550
|
+
searchResults = _ref.searchResults,
|
|
551
|
+
onViewAll = _ref.onViewAll,
|
|
552
|
+
searchResultsRef = _ref.searchResultsRef,
|
|
553
|
+
onSearchSubmit = _ref.onSearchSubmit,
|
|
554
|
+
setSearchValue = _ref.setSearchValue;
|
|
555
|
+
|
|
556
|
+
if (searchValue.trim() !== '') {
|
|
557
|
+
return /*#__PURE__*/React__default.createElement("div", {
|
|
558
|
+
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",
|
|
559
|
+
ref: searchResultsRef
|
|
560
|
+
}, searchLoading ? /*#__PURE__*/React__default.createElement("div", {
|
|
561
|
+
className: "w-full py-20 flex items-center justify-center"
|
|
562
|
+
}, "Searching ...") : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, searchResults.brands.length === 0 && searchResults.products.length === 0 ? /*#__PURE__*/React__default.createElement("div", {
|
|
563
|
+
className: "w-full py-20 flex items-center justify-center"
|
|
564
|
+
}, "No products found") : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
|
|
565
|
+
className: "w-full lg:w-1/3"
|
|
566
|
+
}, /*#__PURE__*/React__default.createElement("p", {
|
|
567
|
+
className: "font-bold p-2 px-4"
|
|
568
|
+
}, "Brands"), searchResults.brands.map(function (brand) {
|
|
569
|
+
return /*#__PURE__*/React__default.createElement("a", {
|
|
570
|
+
key: brand.link,
|
|
571
|
+
href: brand.link,
|
|
572
|
+
className: ""
|
|
573
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
574
|
+
className: "p-2 px-4 hover:bg-gray-100"
|
|
575
|
+
}, brand.name));
|
|
576
|
+
})), /*#__PURE__*/React__default.createElement("div", {
|
|
577
|
+
className: "w-full lg:w-2/3"
|
|
578
|
+
}, /*#__PURE__*/React__default.createElement("p", {
|
|
579
|
+
className: "font-bold p-2 px-4"
|
|
580
|
+
}, "Products"), searchResults.products.map(function (product) {
|
|
581
|
+
return /*#__PURE__*/React__default.createElement("a", {
|
|
582
|
+
key: product.link,
|
|
583
|
+
href: product.link
|
|
584
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
585
|
+
className: "p-2 px-4 hover:bg-gray-100"
|
|
586
|
+
}, product.name));
|
|
587
|
+
}), /*#__PURE__*/React__default.createElement("button", {
|
|
588
|
+
type: "button",
|
|
589
|
+
onClick: function onClick() {
|
|
590
|
+
onViewAll();
|
|
591
|
+
onSearchSubmit(searchValue);
|
|
592
|
+
setSearchValue('');
|
|
593
|
+
},
|
|
594
|
+
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"
|
|
595
|
+
}, "View all")))));
|
|
596
|
+
}
|
|
597
|
+
|
|
598
|
+
return null;
|
|
599
|
+
};
|
|
600
|
+
|
|
538
601
|
var LuxityMobileHeader = function LuxityMobileHeader(_ref) {
|
|
539
602
|
var logoSrc = _ref.logoSrc,
|
|
540
603
|
menuIcon = _ref.menuIcon,
|
|
@@ -555,7 +618,9 @@
|
|
|
555
618
|
blogLink = _ref.blogLink,
|
|
556
619
|
onSellToUsClick = _ref.onSellToUsClick,
|
|
557
620
|
onLogoClick = _ref.onLogoClick,
|
|
558
|
-
endpoint = _ref.endpoint
|
|
621
|
+
endpoint = _ref.endpoint,
|
|
622
|
+
onSearchSubmit = _ref.onSearchSubmit,
|
|
623
|
+
onProductIdsReceived = _ref.onProductIdsReceived;
|
|
559
624
|
|
|
560
625
|
var _useState = React.useState(''),
|
|
561
626
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -572,13 +637,48 @@
|
|
|
572
637
|
showSideNav = _useState6[0],
|
|
573
638
|
setShowSideNav = _useState6[1];
|
|
574
639
|
|
|
640
|
+
var _useState7 = React.useState(true),
|
|
641
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
642
|
+
searchLoading = _useState8[0],
|
|
643
|
+
setSearchLoading = _useState8[1];
|
|
644
|
+
|
|
645
|
+
var _useState9 = React.useState({
|
|
646
|
+
brands: [],
|
|
647
|
+
products: []
|
|
648
|
+
}),
|
|
649
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
|
650
|
+
searchResults = _useState10[0],
|
|
651
|
+
setSearchResults = _useState10[1];
|
|
652
|
+
|
|
575
653
|
var handleChange = function handleChange(event) {
|
|
576
|
-
|
|
654
|
+
var value = event.target.value;
|
|
655
|
+
setSearchValue(value);
|
|
656
|
+
onSearch(value);
|
|
657
|
+
|
|
658
|
+
if (value.trim() !== '') {
|
|
659
|
+
setSearchLoading(true);
|
|
660
|
+
axios.post(endpoint, searchProducts(value, 6)).then(function (response) {
|
|
661
|
+
setSearchResults(response.data.data.luxity_products_serach_results);
|
|
662
|
+
var ids = response.data.data.luxity_products_serach_results.luxity_product_ids;
|
|
663
|
+
onProductIdsReceived(ids);
|
|
664
|
+
setSearchLoading(false);
|
|
665
|
+
}).catch(function () {
|
|
666
|
+
setSearchLoading(false);
|
|
667
|
+
});
|
|
668
|
+
} else {
|
|
669
|
+
setSearchResults({
|
|
670
|
+
brands: [],
|
|
671
|
+
products: []
|
|
672
|
+
});
|
|
673
|
+
}
|
|
577
674
|
};
|
|
578
675
|
|
|
579
676
|
var handleKeyDown = function handleKeyDown(event) {
|
|
580
677
|
if (event.key === 'Enter') {
|
|
581
|
-
|
|
678
|
+
onSearchSubmit(searchValue);
|
|
679
|
+
setSearchValue('');
|
|
680
|
+
} else if (event.key === 'Escape') {
|
|
681
|
+
setSearchValue('');
|
|
582
682
|
}
|
|
583
683
|
};
|
|
584
684
|
|
|
@@ -586,6 +686,7 @@
|
|
|
586
686
|
setShowSearchbar(function (prev) {
|
|
587
687
|
return !prev;
|
|
588
688
|
});
|
|
689
|
+
setSearchValue('');
|
|
589
690
|
};
|
|
590
691
|
|
|
591
692
|
var onMenuClick = function onMenuClick() {
|
|
@@ -594,6 +695,16 @@
|
|
|
594
695
|
});
|
|
595
696
|
};
|
|
596
697
|
|
|
698
|
+
var handleSellToUsClick = function handleSellToUsClick() {
|
|
699
|
+
onSellToUsClick();
|
|
700
|
+
setShowSideNav(false);
|
|
701
|
+
};
|
|
702
|
+
|
|
703
|
+
var handleCartClick = function handleCartClick() {
|
|
704
|
+
onCartClick();
|
|
705
|
+
setShowSideNav(false);
|
|
706
|
+
};
|
|
707
|
+
|
|
597
708
|
return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
|
|
598
709
|
className: "navbar navbar__mobile-wrapper"
|
|
599
710
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
@@ -654,18 +765,28 @@
|
|
|
654
765
|
src: closeIcon,
|
|
655
766
|
alt: "close-icon",
|
|
656
767
|
className: "navbar__input-close-icon"
|
|
657
|
-
})))), /*#__PURE__*/React__default.createElement(
|
|
768
|
+
})))), /*#__PURE__*/React__default.createElement(SearchResults, {
|
|
769
|
+
searchValue: searchValue,
|
|
770
|
+
searchLoading: searchLoading,
|
|
771
|
+
searchResults: searchResults,
|
|
772
|
+
onViewAll: function onViewAll() {
|
|
773
|
+
onSearchSubmit(searchValue);
|
|
774
|
+
setSearchValue('');
|
|
775
|
+
},
|
|
776
|
+
onSearchSubmit: onSearchSubmit,
|
|
777
|
+
setSearchValue: setSearchValue
|
|
778
|
+
}), /*#__PURE__*/React__default.createElement(LuxitySideNav, {
|
|
658
779
|
accordionIcon: accordionIcon,
|
|
659
780
|
logoSrc: logoSrc,
|
|
660
781
|
closeIcon: closeIcon,
|
|
661
782
|
backIcon: backIcon,
|
|
662
783
|
productUrl: productsUrl,
|
|
663
784
|
onAccountClick: onAccountClick,
|
|
664
|
-
onCartClick:
|
|
785
|
+
onCartClick: handleCartClick,
|
|
665
786
|
contactUsLink: contactUsLink,
|
|
666
787
|
ourStoryLink: ourStoryLink,
|
|
667
788
|
blogLink: blogLink,
|
|
668
|
-
onSellToUsClick:
|
|
789
|
+
onSellToUsClick: handleSellToUsClick,
|
|
669
790
|
stores: stores,
|
|
670
791
|
categoryElements: categoryElements,
|
|
671
792
|
showSideNav: showSideNav,
|
package/build/bundle.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.navbar{box-shadow:2px 2px 10px #dfdede;display:flex;padding-bottom:10px;padding-top:20px;position:relative}.navbar__link-item--desktop{align-items:center;display:flex;height:35px;margin:auto 0;padding-top:5px}.navbar__mobile-wrapper{align-items:center;display:flex;flex-direction:column;padding-left:32px;padding-right:32px}.navbar__container{display:flex;margin:0 auto;max-width:1280px;padding-left:12px;padding-right:12px;width:100%}.navbar__body{flex-basis:60%}.navbar__wrapper{align-items:center;display:flex;justify-content:space-between;margin-bottom:20px;width:100%}.navbar__product-search-wrapper{align-items:center;display:flex;padding:0 20%;width:100%}.navbar__input-close-icon{height:auto;margin-bottom:10px;margin-left:10px;width:20px}.navbar__menu-icon{width:30px}.navbar__product-search{align-items:center;display:flex;max-width:545px;width:100%}.navbar__logo-wrapper{margin-right:18px;width:200px}.navbar__logo{width:200px}@media only screen and (max-width:879px){.navbar__logo{width:125px}}.navbar__form-input{align-items:center;background:transparent;border:none;display:flex;font-size:13px;outline:none;padding:10px;width:100%}.navbar__product-search{border:1px solid #dfdede;margin-bottom:10px}.navbar__section{align-items:center;display:flex;flex-direction:row;justify-content:space-between;width:100%}.navbar__link{display:inline-block;font-family:Martel Sans;font-size:14px;font-weight:700;margin-right:10px;overflow:hidden;text-transform:uppercase;transition:.3s ease-in-out}.navbar__link:after{background-color:#000;content:"";display:block;height:2px;transition:width .25s ease-out;width:0}.navbar__link:hover:after{width:100%}.navbar__link:hover .navbar__dropdown{animation:fadeInDropdown .3s ease-in-out;display:block}.navbar__dropdown{background-color:#fff;box-shadow:5px 5px 5px #dfdede;display:none;left:0;position:absolute;width:100%;z-index:999}@keyframes fadeInDropdown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.navbar__company-link{font-size:13px;font-weight:400;list-style:none;margin-right:18px;text-decoration:none}.navbar__company-block{align-items:center;background-color:#000;color:#fff;display:flex;font-weight:700;height:33px;justify-content:center;margin-right:0;padding:0 18px;text-transform:uppercase}.navbar__input-search-icon{height:auto;margin-left:1.125rem;margin-right:.375rem;width:15px}.navbar__nav-links{align-items:center;display:flex}.navbar__nav-links--wrap{flex-wrap:wrap}.navbar__icons{align-items:center;display:flex;height:40px;justify-content:flex-end;margin-bottom:10px}.navbar__icon{cursor:pointer;height:auto;margin-right:18px;width:20px}@media only screen and (max-width:879px){.navbar__icon{margin-right:0}}.navbar__cart-icon{position:relative}.navbar__cart-count{align-items:center;background-color:#000;border-radius:50%;bottom:50%;color:#fff;display:flex;font-size:13px;height:20px;justify-content:center;left:100%;position:absolute;width:20px}.footer__newsletter-section{align-items:center;background-color:#000;color:#fff;display:flex;justify-content:space-between;padding:2.265rem 0}@media only screen and (max-width:879px){.footer__newsletter-section{flex-direction:column}}.footer__newsletter-wrapper{align-items:center;display:flex;justify-content:space-between;margin:0 auto;max-width:1280px;padding-left:32px;padding-right:32px;width:100%}@media only screen and (max-width:879px){.footer__newsletter-wrapper{flex-direction:column}.footer__link-container{flex-basis:50%}}.footer__newsletter-icon{height:30px;position:absolute;right:0;top:0;width:32px}.footer__newsletter-form{flex-basis:50%;max-width:250px;position:relative}@media only screen and (max-width:879px){.footer__newsletter-form{display:block;margin-top:20px;max-width:100%;width:100%}}.footer__newsletter-title{font-family:Martel Sans,sans-serif;font-size:14px;font-weight:700;letter-spacing:3px;margin-bottom:1.125rem;text-transform:uppercase}.footer__newsletter-text{font-size:14px}.footer__form-input{background-color:#000;border:none;border-bottom:1px solid #fff;color:#fff;height:30px;outline:none;width:100%}.footer__form-input::-moz-placeholder{color:#fff;font-weight:400}.footer__form-input::placeholder{color:#fff;font-weight:400}.footer__form-errors{color:#fff;margin-top:5px}.footer__main-section{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:50px;margin-top:80px}.footer__link-title{font-family:El Messiri;font-size:16px;font-weight:700;margin-bottom:20px;text-transform:uppercase}@media only screen and (max-width:879px){.footer__link-title{margin-bottom:10px}}.footer__link-child{margin-top:50px}.footer__links{display:flex;flex-direction:column}.footer__link{color:#939393;cursor:pointer;font-family:Martel Sans;font-size:14px;line-height:20px;margin-bottom:15px;text-align:left;text-decoration:none}.footer__link:hover{color:#000;text-decoration:underline}@media only screen and (max-width:879px){.footer__link{margin-bottom:10px}}.footer__link-wrapper{align-items:center;display:flex;gap:5px}.footer__link-icon{height:13px;margin-bottom:18px}.footer__text{color:#939393;font-family:Martel Sans;font-size:14px;line-height:20px;margin-bottom:15px;text-align:left;text-decoration:none}.footer__store-hours{margin-top:35px}.footer__copyrights-section{border-top:1px solid;display:flex;justify-content:space-between;padding-bottom:20px;padding-top:20px}.footer__logo{height:30px;width:135px}.footer__payment-icons{align-items:center;display:flex}.footer__wrapper{margin:0 auto;max-width:1280px;padding-left:32px;padding-right:32px;width:100%}@media only screen and (max-width:879px){.footer__wrapper{padding:32px 0 0 24px}}.footer__wrapper--desktop{display:block}@media only screen and (max-width:879px){.footer__wrapper--desktop{display:none}}.footer__wrapper--mobile{display:none}@media only screen and (max-width:879px){.footer__wrapper--mobile{display:block;padding-top:30px}}.footer__copyright{font-size:10px;line-height:22px}.footer__copyright--mobile{display:none}@media only screen and (max-width:879px){.footer__copyright--mobile{display:block;padding:30px 10px 30px 0;text-align:center}}.footer__section-row{display:flex;gap:50%}@media only screen and (max-width:879px){.footer__section-row{gap:unset}}.side-nav{font-family:Martel Sans}.side-nav__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center}.side-nav__overlay{background-color:rgba(78,73,73,.51);height:100%;opacity:0;position:fixed;top:0;transition:opacity .5s ease-out 0s,visibility .5s ease-out 0s;width:100%;z-index:99999}.side-nav__overlay--visible{opacity:1;visibility:visible}.side-nav__overlay--hidden{opacity:1;visibility:hidden}.side-nav__content{background-color:#fff;bottom:0;overflow-y:scroll;padding:1.5rem;position:fixed;top:0;transition:left .5s ease-in-out;width:80%;z-index:99999}.side-nav__content--hidden{display:none}.side-nav__content--open{left:0}.side-nav__content--closed{left:-100%}.side-nav__menu-title-wrapper{align-items:center;background-color:transparent;border:none;display:flex;justify-content:space-between;outline:none;width:100%}.side-nav__icon-container{float:right;margin-bottom:10px}.side-nav__menu-title{font-size:14px;font-weight:700;line-height:20px;text-transform:uppercase}.side-nav__accordion-icon{height:auto;width:15px}.side-nav__menu-item{margin-bottom:25px}.side-nav__close-icon{height:20px;margin-left:auto;width:20px}.side-nav__back-button-wrapper{align-items:center;display:flex;margin-bottom:25px}.side-nav__back-icon{height:20px;width:20px}.side-nav__back-button,.side-nav__sub-menu-title{font-weight:700;text-transform:uppercase}.side-nav__sub-menu-title{font-size:14px;margin-bottom:10px}.side-nav__elements{display:flex;flex-direction:column}.side-nav__element{color:#555;cursor:pointer;line-height:20px;margin-bottom:10px}.side-nav__element,.side-nav__sub-link{font-size:14px;font-weight:400;text-transform:capitalize}.side-nav__block-button{background-color:#000;color:#fff;font-weight:700;padding:10px 0;width:100%}.stores-dropdown{align-items:flex-start;display:flex;font-family:Martel Sans;gap:20px;margin-left:auto;margin-right:auto;max-width:1280px;overflow-x:auto;padding:20px 15px}.stores-dropdown__image{height:200px;-o-object-fit:cover;object-fit:cover;width:100%}.stores-dropdown__store-details{flex-basis:20%}.stores-dropdown__title{font-family:El Messiri}.stores-dropdown__main-title,.stores-dropdown__title{font-size:16px;font-weight:400;letter-spacing:3px;margin-top:20px}.stores-dropdown__main-title{font-weight:700;margin-bottom:10px}.stores-dropdown__open-days{font-size:12px;font-weight:700;line-height:20px}.stores-dropdown__open-hours{font-size:12px;font-weight:400;line-height:20px}.stores-dropdown__queries-title{font-family:El Messiri;font-size:16px;font-weight:400;letter-spacing:3px}.stores-dropdown__contact-details{font-size:16px;font-weight:700}.stores-dropdown__view-more{cursor:pointer;font-size:14px;font-weight:400;margin-top:10px;text-transform:capitalize}.dropdown{display:flex;justify-content:space-between;margin-left:auto;margin-right:auto;max-width:1280px;min-height:500px;overflow-x:auto;padding:20px 15px}.dropdown__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center;min-height:300px}.dropdown__column{flex:1}.dropdown__column:nth-child(2){flex:2}.dropdown__title{font-family:El Messiri;font-size:16px;font-weight:700;letter-spacing:3px;line-height:1;margin-bottom:20px;text-transform:uppercase}.dropdown__elements{display:flex}.dropdown__elements--column{flex-direction:column}.dropdown__elements--row{flex-flow:row wrap;justify-content:flex-start}.dropdown__element{flex-basis:33.33%;font-family:Martel Sans;font-size:14px;font-weight:400;margin-bottom:10px;text-transform:capitalize}.cover-spinner{align-items:center;background-color:hsla(0,0%,100%,.7);display:flex;height:100%;justify-content:center;min-height:400px;position:relative;top:50%;width:100%;z-index:9999}.cover-spinner:after{animation:spin 1.5s linear infinite;border:4px dotted #000;border-radius:50%;border-top-color:transparent;content:"";display:block;height:40px;position:absolute;width:40px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
|
|
1
|
+
.navbar{box-shadow:2px 2px 10px #dfdede;display:flex;padding-bottom:10px;padding-top:20px;position:relative}.navbar__link-item--desktop{align-items:center;display:flex;height:35px;margin:auto 0;padding-top:5px}.navbar__mobile-wrapper{align-items:center;display:flex;flex-direction:column;padding-bottom:20px;padding-left:32px;padding-right:32px}.navbar__container{display:flex;margin:0 auto;max-width:1280px;padding-left:12px;padding-right:12px;width:100%}.navbar__body{flex-basis:60%}.navbar__wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.navbar__product-search-wrapper{align-items:center;display:flex;justify-content:center;padding:0 20%;width:100%}@media only screen and (max-width:879px){.navbar__product-search-wrapper{padding:0}}.navbar__input-close-icon{height:auto;margin-bottom:10px;margin-left:10px;width:20px}@media only screen and (max-width:879px){.navbar__input-close-icon{margin-bottom:0;margin-left:0;width:15px}}.navbar__menu-icon{width:30px}.navbar__product-search{align-items:center;display:flex;max-width:545px;width:100%}.navbar__logo-wrapper{margin-right:18px;width:200px}.navbar__logo{width:200px}@media only screen and (max-width:879px){.navbar__logo{margin-left:10px;margin-top:5px;width:125px}}.navbar__form-input{align-items:center;background:transparent;border:none;display:flex;font-size:13px;outline:none;padding:8px;width:100%}.navbar__product-search{border:1px solid #dfdede;margin-bottom:10px}@media only screen and (max-width:879px){.navbar__product-search{border:none;border-bottom:1px solid #dfdede;margin-bottom:0;margin-right:10px;margin-top:10px}}.navbar__section{align-items:flex-start;display:flex;flex-direction:row;justify-content:space-between;width:100%}.navbar__link{display:inline-block;font-family:Martel Sans;font-size:14px;font-weight:700;margin-right:10px;overflow:hidden;text-transform:uppercase;transition:.3s ease-in-out}.navbar__link:after{background-color:#000;content:"";display:block;height:2px;transition:width .25s ease-out;width:0}.navbar__link:hover:after{width:100%}.navbar__link:hover .navbar__dropdown{animation:fadeInDropdown .3s ease-in-out;display:block}.navbar__dropdown{background-color:#fff;box-shadow:5px 5px 5px #dfdede;display:none;left:0;position:absolute;width:100%;z-index:999}@keyframes fadeInDropdown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.navbar__company-link{font-size:13px;font-weight:400;list-style:none;margin-left:18px;text-decoration:none}.navbar__company-block{align-items:center;background-color:#000;color:#fff;display:flex;font-weight:700;height:33px;justify-content:center;margin-right:0;padding:0 18px;text-transform:uppercase}.navbar__input-search-icon{height:auto;margin-left:1.125rem;margin-right:.375rem;width:15px}.navbar__nav-links{align-items:center;display:flex}.navbar__nav-links--wrap{flex-wrap:wrap}.navbar__icons{align-items:center;display:flex;height:40px;justify-content:flex-end;margin-bottom:10px}@media only screen and (max-width:879px){.navbar__icons{display:block;height:20px;margin-bottom:0}}.navbar__icon{cursor:pointer;height:auto;margin-right:18px;width:20px}@media only screen and (max-width:879px){.navbar__icon{margin-right:0}}.navbar__cart-icon{position:relative}.navbar__cart-count{align-items:center;background-color:#000;border-radius:50%;bottom:50%;color:#fff;display:flex;font-size:13px;height:20px;justify-content:center;left:100%;position:absolute;width:20px}.footer__newsletter-section{align-items:center;background-color:#000;color:#fff;display:flex;justify-content:space-between;padding:2.265rem 0}@media only screen and (max-width:879px){.footer__newsletter-section{flex-direction:column}}.footer__newsletter-wrapper{align-items:center;display:flex;justify-content:space-between;margin:0 auto;max-width:1280px;padding-left:32px;padding-right:32px;width:100%}@media only screen and (max-width:879px){.footer__newsletter-wrapper{flex-direction:column}.footer__link-container{flex-basis:50%}}.footer__newsletter-icon{height:30px;position:absolute;right:0;top:0;width:32px}.footer__newsletter-form{flex-basis:50%;max-width:250px;position:relative}@media only screen and (max-width:879px){.footer__newsletter-form{display:block;margin-top:20px;max-width:100%;width:100%}}.footer__newsletter-title{font-family:Martel Sans,sans-serif;font-size:14px;font-weight:700;letter-spacing:3px;margin-bottom:1.125rem;text-transform:uppercase}.footer__newsletter-text{font-size:14px}.footer__form-input{background-color:#000;border:none;border-bottom:1px solid #fff;color:#fff;height:30px;outline:none;width:100%}.footer__form-input::-moz-placeholder{color:#fff;font-weight:400}.footer__form-input::placeholder{color:#fff;font-weight:400}.footer__form-errors{color:#fff;margin-top:5px}.footer__main-section{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:50px;margin-top:80px}.footer__link-title{font-family:El Messiri;font-size:16px;font-weight:700;margin-bottom:20px;text-transform:uppercase}@media only screen and (max-width:879px){.footer__link-title{margin-bottom:10px}}.footer__link-child{margin-top:25px}.footer__links{display:flex;flex-direction:column}.footer__link{color:#939393;cursor:pointer;font-family:Martel Sans;font-size:14px;line-height:20px;margin-bottom:15px;text-align:left;text-decoration:none}.footer__link:hover{color:#000;text-decoration:underline}@media only screen and (max-width:879px){.footer__link{margin-bottom:10px}}.footer__link-wrapper{align-items:center;display:flex;gap:5px}.footer__link-icon{height:13px;margin-bottom:18px}.footer__text{color:#939393;font-family:Martel Sans;font-size:14px;line-height:20px;margin-bottom:15px;text-align:left;text-decoration:none}.footer__store-hours{margin-top:35px}.footer__copyrights-section{border-top:1px solid;display:flex;justify-content:space-between;padding-bottom:20px;padding-top:20px}.footer__logo{height:30px;width:135px}.footer__payment-icons{align-items:center;display:flex}.footer__wrapper{margin:0 auto;max-width:1280px;padding-left:32px;padding-right:32px;width:100%}@media only screen and (max-width:879px){.footer__wrapper{padding:32px 0 0 24px}}.footer__wrapper--desktop{display:block}@media only screen and (max-width:879px){.footer__wrapper--desktop{display:none}}.footer__wrapper--mobile{display:none}@media only screen and (max-width:879px){.footer__wrapper--mobile{display:block;padding-top:30px}}.footer__copyright{font-size:10px;line-height:22px}.footer__copyright--mobile{display:none}@media only screen and (max-width:879px){.footer__copyright--mobile{display:block;padding:30px 10px 30px 0;text-align:center}}.footer__section-row{display:flex;gap:50%}@media only screen and (max-width:879px){.footer__section-row{gap:unset}}.side-nav{font-family:Martel Sans}.side-nav__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center}.side-nav__overlay{background-color:rgba(78,73,73,.51);height:100%;opacity:0;position:fixed;top:0;transition:opacity .5s ease-out 0s,visibility .5s ease-out 0s;width:100%;z-index:99999}.side-nav__overlay--visible{opacity:1;visibility:visible}.side-nav__overlay--hidden{opacity:1;visibility:hidden}.side-nav__content{background-color:#fff;bottom:0;overflow-y:scroll;padding:1.5rem;position:fixed;top:0;transition:left .5s ease-in-out;width:80%;z-index:99999}.side-nav__content--hidden{display:none}.side-nav__content--open{left:0}.side-nav__content--closed{left:-100%}.side-nav__menu-title-wrapper{align-items:center;background-color:transparent;border:none;display:flex;justify-content:space-between;outline:none;width:100%}.side-nav__icon-container{float:right;margin-bottom:10px}.side-nav__menu-title{font-size:14px;font-weight:700;line-height:20px;text-transform:uppercase}.side-nav__accordion-icon{height:auto;width:15px}.side-nav__menu-item{margin-bottom:25px}.side-nav__close-icon{height:20px;margin-left:auto;width:20px}.side-nav__back-button-wrapper{align-items:center;display:flex;margin-bottom:25px}.side-nav__back-icon{height:20px;width:20px}.side-nav__back-button,.side-nav__sub-menu-title{font-weight:700;text-transform:uppercase}.side-nav__sub-menu-title{font-size:14px;margin-bottom:10px}.side-nav__elements{display:flex;flex-direction:column}.side-nav__element{color:#555;cursor:pointer;line-height:20px;margin-bottom:10px}.side-nav__element,.side-nav__sub-link{font-size:14px;font-weight:400;text-transform:capitalize}.side-nav__block-button{background-color:#000;color:#fff;font-weight:700;padding:10px 0;width:100%}.stores-dropdown{align-items:flex-start;display:flex;font-family:Martel Sans;gap:20px;margin-left:auto;margin-right:auto;max-width:1280px;overflow-x:auto;padding:20px 15px}.stores-dropdown__image{height:200px;-o-object-fit:cover;object-fit:cover;width:100%}.stores-dropdown__store-details{flex-basis:20%}.stores-dropdown__title{font-family:El Messiri}.stores-dropdown__main-title,.stores-dropdown__title{font-size:16px;font-weight:400;letter-spacing:3px;margin-top:20px}.stores-dropdown__main-title{font-weight:700;margin-bottom:10px}.stores-dropdown__open-days{font-size:12px;font-weight:700;line-height:20px}.stores-dropdown__open-hours{font-size:12px;font-weight:400;line-height:20px}.stores-dropdown__queries-title{font-family:El Messiri;font-size:16px;font-weight:400;letter-spacing:3px}.stores-dropdown__contact-details{font-size:16px;font-weight:700}.stores-dropdown__view-more{cursor:pointer;font-size:14px;font-weight:400;margin-top:10px;text-transform:capitalize}.dropdown{display:flex;justify-content:space-between;margin-left:auto;margin-right:auto;max-width:1280px;min-height:500px;overflow-x:auto;padding:20px 0}.dropdown__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center;min-height:300px}.dropdown__column{flex:1;padding-left:12px}.dropdown__column:nth-child(2){flex:2}.dropdown__title{font-family:El Messiri;font-size:16px;font-weight:700;letter-spacing:3px;line-height:1;margin-bottom:20px;text-transform:uppercase}.dropdown__elements{display:flex}.dropdown__elements--column{flex-direction:column}.dropdown__elements--row{flex-flow:row wrap;justify-content:flex-start}.dropdown__element{flex-basis:33.33%;font-family:Martel Sans;font-size:14px;font-weight:400;margin-bottom:10px;text-transform:capitalize}.cover-spinner{align-items:center;background-color:hsla(0,0%,100%,.7);display:flex;height:100%;justify-content:center;min-height:400px;position:relative;top:50%;width:100%;z-index:9999}.cover-spinner:after{animation:spin 1.5s linear infinite;border:4px dotted #000;border-radius:50%;border-top-color:transparent;content:"";display:block;height:40px;position:absolute;width:40px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
|
package/build/bundle.js
CHANGED
|
@@ -14405,6 +14405,15 @@
|
|
|
14405
14405
|
query: "{\n latest_arrivals: luxity_brands(has_products: true, limit: 1000, page: 1) {data {id name slug}}\n bags: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: BAGS) {data {id name slug}}\n shoes: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: SHOES) {data {id name slug}}\n apparel: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: APPAREL) {data {id name slug}}\n accessories: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: ACCESSORIES) {data {id name slug}}\n watches: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: WATCHES) {data {id name slug}}\n accessories_categories: luxity_accessories_categories_list { id name slug }\n apparel_styles: luxity_apparel_styles_list { name slug }\n } "
|
|
14406
14406
|
};
|
|
14407
14407
|
};
|
|
14408
|
+
var searchProducts = function searchProducts(search, limit) {
|
|
14409
|
+
return {
|
|
14410
|
+
query: "\n query SearchProducts($search: String!, $limit: Int!) {\n luxity_products_serach_results(search: $search, limit: $limit) {\n brands {\n name\n link\n }\n products {\n name\n link\n }\n luxity_product_ids\n }\n }\n ",
|
|
14411
|
+
variables: {
|
|
14412
|
+
search: search,
|
|
14413
|
+
limit: limit
|
|
14414
|
+
}
|
|
14415
|
+
};
|
|
14416
|
+
};
|
|
14408
14417
|
|
|
14409
14418
|
var Dropdown$1 = function Dropdown(_ref) {
|
|
14410
14419
|
var title = _ref.title,
|
|
@@ -14537,6 +14546,60 @@
|
|
|
14537
14546
|
})) !== null && _categories$filter !== void 0 ? _categories$filter : [];
|
|
14538
14547
|
};
|
|
14539
14548
|
|
|
14549
|
+
var SearchResults = function SearchResults(_ref) {
|
|
14550
|
+
var searchValue = _ref.searchValue,
|
|
14551
|
+
searchLoading = _ref.searchLoading,
|
|
14552
|
+
searchResults = _ref.searchResults,
|
|
14553
|
+
onViewAll = _ref.onViewAll,
|
|
14554
|
+
searchResultsRef = _ref.searchResultsRef,
|
|
14555
|
+
onSearchSubmit = _ref.onSearchSubmit,
|
|
14556
|
+
setSearchValue = _ref.setSearchValue;
|
|
14557
|
+
|
|
14558
|
+
if (searchValue.trim() !== '') {
|
|
14559
|
+
return /*#__PURE__*/React__default.createElement("div", {
|
|
14560
|
+
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",
|
|
14561
|
+
ref: searchResultsRef
|
|
14562
|
+
}, searchLoading ? /*#__PURE__*/React__default.createElement("div", {
|
|
14563
|
+
className: "w-full py-20 flex items-center justify-center"
|
|
14564
|
+
}, "Searching ...") : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, searchResults.brands.length === 0 && searchResults.products.length === 0 ? /*#__PURE__*/React__default.createElement("div", {
|
|
14565
|
+
className: "w-full py-20 flex items-center justify-center"
|
|
14566
|
+
}, "No products found") : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
|
|
14567
|
+
className: "w-full lg:w-1/3"
|
|
14568
|
+
}, /*#__PURE__*/React__default.createElement("p", {
|
|
14569
|
+
className: "font-bold p-2 px-4"
|
|
14570
|
+
}, "Brands"), searchResults.brands.map(function (brand) {
|
|
14571
|
+
return /*#__PURE__*/React__default.createElement("a", {
|
|
14572
|
+
key: brand.link,
|
|
14573
|
+
href: brand.link,
|
|
14574
|
+
className: ""
|
|
14575
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
14576
|
+
className: "p-2 px-4 hover:bg-gray-100"
|
|
14577
|
+
}, brand.name));
|
|
14578
|
+
})), /*#__PURE__*/React__default.createElement("div", {
|
|
14579
|
+
className: "w-full lg:w-2/3"
|
|
14580
|
+
}, /*#__PURE__*/React__default.createElement("p", {
|
|
14581
|
+
className: "font-bold p-2 px-4"
|
|
14582
|
+
}, "Products"), searchResults.products.map(function (product) {
|
|
14583
|
+
return /*#__PURE__*/React__default.createElement("a", {
|
|
14584
|
+
key: product.link,
|
|
14585
|
+
href: product.link
|
|
14586
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
14587
|
+
className: "p-2 px-4 hover:bg-gray-100"
|
|
14588
|
+
}, product.name));
|
|
14589
|
+
}), /*#__PURE__*/React__default.createElement("button", {
|
|
14590
|
+
type: "button",
|
|
14591
|
+
onClick: function onClick() {
|
|
14592
|
+
onViewAll();
|
|
14593
|
+
onSearchSubmit(searchValue);
|
|
14594
|
+
setSearchValue('');
|
|
14595
|
+
},
|
|
14596
|
+
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"
|
|
14597
|
+
}, "View all")))));
|
|
14598
|
+
}
|
|
14599
|
+
|
|
14600
|
+
return null;
|
|
14601
|
+
};
|
|
14602
|
+
|
|
14540
14603
|
var LuxityDesktopHeader = function LuxityDesktopHeader(_ref) {
|
|
14541
14604
|
var accountIcon = _ref.accountIcon,
|
|
14542
14605
|
cartIcon = _ref.cartIcon,
|
|
@@ -14563,7 +14626,9 @@
|
|
|
14563
14626
|
contactUsLink = _ref.contactUsLink,
|
|
14564
14627
|
ourStoryLink = _ref.ourStoryLink,
|
|
14565
14628
|
onLogoClick = _ref.onLogoClick,
|
|
14566
|
-
endpoint = _ref.endpoint
|
|
14629
|
+
endpoint = _ref.endpoint,
|
|
14630
|
+
onSearchSubmit = _ref.onSearchSubmit,
|
|
14631
|
+
onProductIdsReceived = _ref.onProductIdsReceived;
|
|
14567
14632
|
|
|
14568
14633
|
var _useState = React.useState(''),
|
|
14569
14634
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -14594,13 +14659,39 @@
|
|
|
14594
14659
|
hasError = _useState8[0],
|
|
14595
14660
|
setHasError = _useState8[1];
|
|
14596
14661
|
|
|
14597
|
-
var
|
|
14598
|
-
|
|
14599
|
-
|
|
14662
|
+
var _useState9 = React.useState(true),
|
|
14663
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
|
14664
|
+
searchLoading = _useState10[0],
|
|
14665
|
+
setSearchLoading = _useState10[1];
|
|
14666
|
+
|
|
14667
|
+
var _useState11 = React.useState({
|
|
14668
|
+
brands: [],
|
|
14669
|
+
products: []
|
|
14670
|
+
}),
|
|
14671
|
+
_useState12 = _slicedToArray(_useState11, 2),
|
|
14672
|
+
searchResults = _useState12[0],
|
|
14673
|
+
setSearchResults = _useState12[1];
|
|
14674
|
+
|
|
14675
|
+
var searchResultsRef = React.useRef(null);
|
|
14676
|
+
React.useEffect(function () {
|
|
14677
|
+
var handleClickOutside = function handleClickOutside(event) {
|
|
14678
|
+
if (searchResultsRef.current && !searchResultsRef.current.contains(event.target)) {
|
|
14679
|
+
setSearchValue('');
|
|
14680
|
+
}
|
|
14681
|
+
};
|
|
14682
|
+
|
|
14683
|
+
document.addEventListener('mousedown', handleClickOutside);
|
|
14684
|
+
return function () {
|
|
14685
|
+
document.removeEventListener('mousedown', handleClickOutside);
|
|
14686
|
+
};
|
|
14687
|
+
}, []);
|
|
14600
14688
|
|
|
14601
14689
|
var handleKeyDown = function handleKeyDown(event) {
|
|
14602
14690
|
if (event.key === 'Enter') {
|
|
14603
|
-
|
|
14691
|
+
onSearchSubmit(searchValue);
|
|
14692
|
+
setSearchValue('');
|
|
14693
|
+
} else if (event.key === 'Escape') {
|
|
14694
|
+
setSearchValue('');
|
|
14604
14695
|
}
|
|
14605
14696
|
};
|
|
14606
14697
|
|
|
@@ -14633,6 +14724,30 @@
|
|
|
14633
14724
|
return setHasError(true);
|
|
14634
14725
|
});
|
|
14635
14726
|
}, [endpoint]);
|
|
14727
|
+
|
|
14728
|
+
var handleChange = function handleChange(event) {
|
|
14729
|
+
var value = event.target.value;
|
|
14730
|
+
setSearchValue(value);
|
|
14731
|
+
onSearch(value);
|
|
14732
|
+
|
|
14733
|
+
if (value.trim() !== '') {
|
|
14734
|
+
setSearchLoading(true);
|
|
14735
|
+
axios.post(endpoint, searchProducts(value, 6)).then(function (response) {
|
|
14736
|
+
setSearchResults(response.data.data.luxity_products_serach_results);
|
|
14737
|
+
var ids = response.data.data.luxity_products_serach_results.luxity_product_ids;
|
|
14738
|
+
onProductIdsReceived(ids);
|
|
14739
|
+
setSearchLoading(false);
|
|
14740
|
+
}).catch(function () {
|
|
14741
|
+
setSearchLoading(false);
|
|
14742
|
+
});
|
|
14743
|
+
} else {
|
|
14744
|
+
setSearchResults({
|
|
14745
|
+
brands: [],
|
|
14746
|
+
products: []
|
|
14747
|
+
});
|
|
14748
|
+
}
|
|
14749
|
+
};
|
|
14750
|
+
|
|
14636
14751
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
14637
14752
|
className: "navbar"
|
|
14638
14753
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
@@ -14663,7 +14778,18 @@
|
|
|
14663
14778
|
value: searchValue,
|
|
14664
14779
|
onChange: handleChange,
|
|
14665
14780
|
onKeyDown: handleKeyDown
|
|
14666
|
-
})), /*#__PURE__*/React__default.createElement(
|
|
14781
|
+
})), /*#__PURE__*/React__default.createElement(SearchResults, {
|
|
14782
|
+
searchValue: searchValue,
|
|
14783
|
+
searchLoading: searchLoading,
|
|
14784
|
+
searchResults: searchResults,
|
|
14785
|
+
onViewAll: function onViewAll() {
|
|
14786
|
+
onSearchSubmit(searchValue);
|
|
14787
|
+
setSearchValue('');
|
|
14788
|
+
},
|
|
14789
|
+
searchResultsRef: searchResultsRef,
|
|
14790
|
+
onSearchSubmit: onSearchSubmit,
|
|
14791
|
+
setSearchValue: setSearchValue
|
|
14792
|
+
}), /*#__PURE__*/React__default.createElement("nav", {
|
|
14667
14793
|
className: "navbar__nav-links navbar__nav-links--wrap"
|
|
14668
14794
|
}, /*#__PURE__*/React__default.createElement("li", {
|
|
14669
14795
|
className: "navbar__link"
|
|
@@ -15264,7 +15390,9 @@
|
|
|
15264
15390
|
blogLink = _ref.blogLink,
|
|
15265
15391
|
onSellToUsClick = _ref.onSellToUsClick,
|
|
15266
15392
|
onLogoClick = _ref.onLogoClick,
|
|
15267
|
-
endpoint = _ref.endpoint
|
|
15393
|
+
endpoint = _ref.endpoint,
|
|
15394
|
+
onSearchSubmit = _ref.onSearchSubmit,
|
|
15395
|
+
onProductIdsReceived = _ref.onProductIdsReceived;
|
|
15268
15396
|
|
|
15269
15397
|
var _useState = React.useState(''),
|
|
15270
15398
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -15281,13 +15409,48 @@
|
|
|
15281
15409
|
showSideNav = _useState6[0],
|
|
15282
15410
|
setShowSideNav = _useState6[1];
|
|
15283
15411
|
|
|
15412
|
+
var _useState7 = React.useState(true),
|
|
15413
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
15414
|
+
searchLoading = _useState8[0],
|
|
15415
|
+
setSearchLoading = _useState8[1];
|
|
15416
|
+
|
|
15417
|
+
var _useState9 = React.useState({
|
|
15418
|
+
brands: [],
|
|
15419
|
+
products: []
|
|
15420
|
+
}),
|
|
15421
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
|
15422
|
+
searchResults = _useState10[0],
|
|
15423
|
+
setSearchResults = _useState10[1];
|
|
15424
|
+
|
|
15284
15425
|
var handleChange = function handleChange(event) {
|
|
15285
|
-
|
|
15426
|
+
var value = event.target.value;
|
|
15427
|
+
setSearchValue(value);
|
|
15428
|
+
onSearch(value);
|
|
15429
|
+
|
|
15430
|
+
if (value.trim() !== '') {
|
|
15431
|
+
setSearchLoading(true);
|
|
15432
|
+
axios.post(endpoint, searchProducts(value, 6)).then(function (response) {
|
|
15433
|
+
setSearchResults(response.data.data.luxity_products_serach_results);
|
|
15434
|
+
var ids = response.data.data.luxity_products_serach_results.luxity_product_ids;
|
|
15435
|
+
onProductIdsReceived(ids);
|
|
15436
|
+
setSearchLoading(false);
|
|
15437
|
+
}).catch(function () {
|
|
15438
|
+
setSearchLoading(false);
|
|
15439
|
+
});
|
|
15440
|
+
} else {
|
|
15441
|
+
setSearchResults({
|
|
15442
|
+
brands: [],
|
|
15443
|
+
products: []
|
|
15444
|
+
});
|
|
15445
|
+
}
|
|
15286
15446
|
};
|
|
15287
15447
|
|
|
15288
15448
|
var handleKeyDown = function handleKeyDown(event) {
|
|
15289
15449
|
if (event.key === 'Enter') {
|
|
15290
|
-
|
|
15450
|
+
onSearchSubmit(searchValue);
|
|
15451
|
+
setSearchValue('');
|
|
15452
|
+
} else if (event.key === 'Escape') {
|
|
15453
|
+
setSearchValue('');
|
|
15291
15454
|
}
|
|
15292
15455
|
};
|
|
15293
15456
|
|
|
@@ -15295,6 +15458,7 @@
|
|
|
15295
15458
|
setShowSearchbar(function (prev) {
|
|
15296
15459
|
return !prev;
|
|
15297
15460
|
});
|
|
15461
|
+
setSearchValue('');
|
|
15298
15462
|
};
|
|
15299
15463
|
|
|
15300
15464
|
var onMenuClick = function onMenuClick() {
|
|
@@ -15303,6 +15467,16 @@
|
|
|
15303
15467
|
});
|
|
15304
15468
|
};
|
|
15305
15469
|
|
|
15470
|
+
var handleSellToUsClick = function handleSellToUsClick() {
|
|
15471
|
+
onSellToUsClick();
|
|
15472
|
+
setShowSideNav(false);
|
|
15473
|
+
};
|
|
15474
|
+
|
|
15475
|
+
var handleCartClick = function handleCartClick() {
|
|
15476
|
+
onCartClick();
|
|
15477
|
+
setShowSideNav(false);
|
|
15478
|
+
};
|
|
15479
|
+
|
|
15306
15480
|
return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
|
|
15307
15481
|
className: "navbar navbar__mobile-wrapper"
|
|
15308
15482
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
@@ -15363,18 +15537,28 @@
|
|
|
15363
15537
|
src: closeIcon,
|
|
15364
15538
|
alt: "close-icon",
|
|
15365
15539
|
className: "navbar__input-close-icon"
|
|
15366
|
-
})))), /*#__PURE__*/React__default.createElement(
|
|
15540
|
+
})))), /*#__PURE__*/React__default.createElement(SearchResults, {
|
|
15541
|
+
searchValue: searchValue,
|
|
15542
|
+
searchLoading: searchLoading,
|
|
15543
|
+
searchResults: searchResults,
|
|
15544
|
+
onViewAll: function onViewAll() {
|
|
15545
|
+
onSearchSubmit(searchValue);
|
|
15546
|
+
setSearchValue('');
|
|
15547
|
+
},
|
|
15548
|
+
onSearchSubmit: onSearchSubmit,
|
|
15549
|
+
setSearchValue: setSearchValue
|
|
15550
|
+
}), /*#__PURE__*/React__default.createElement(LuxitySideNav, {
|
|
15367
15551
|
accordionIcon: accordionIcon,
|
|
15368
15552
|
logoSrc: logoSrc,
|
|
15369
15553
|
closeIcon: closeIcon,
|
|
15370
15554
|
backIcon: backIcon,
|
|
15371
15555
|
productUrl: productsUrl,
|
|
15372
15556
|
onAccountClick: onAccountClick,
|
|
15373
|
-
onCartClick:
|
|
15557
|
+
onCartClick: handleCartClick,
|
|
15374
15558
|
contactUsLink: contactUsLink,
|
|
15375
15559
|
ourStoryLink: ourStoryLink,
|
|
15376
15560
|
blogLink: blogLink,
|
|
15377
|
-
onSellToUsClick:
|
|
15561
|
+
onSellToUsClick: handleSellToUsClick,
|
|
15378
15562
|
stores: stores,
|
|
15379
15563
|
categoryElements: categoryElements,
|
|
15380
15564
|
showSideNav: showSideNav,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bonlineza/luxity-lib",
|
|
3
|
-
"version": "2.32.
|
|
3
|
+
"version": "2.32.2",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"start": "start-storybook -p 9001 -c .storybook -s ./public",
|
|
6
6
|
"clean": "rimraf ./build/*.*",
|
|
@@ -125,6 +125,7 @@
|
|
|
125
125
|
"rollup-plugin-sass": "^1.12.21",
|
|
126
126
|
"style-loader": "^0.23.1",
|
|
127
127
|
"styled-components": "^5.1.1",
|
|
128
|
+
"tailwindcss": "^3.4.1",
|
|
128
129
|
"typescript": "^3.9.7",
|
|
129
130
|
"webpack": "^4.44.1"
|
|
130
131
|
},
|