@bonlineza/luxity-lib 2.35.8 → 2.36.0
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/LuxityAppSideNav.js +1 -1
- package/LuxityDesktopHeader.js +131 -164
- package/LuxityFooter.js +4 -4
- package/LuxityMobileHeader.js +171 -259
- package/LuxitySideNav.js +106 -228
- package/build/bundle.css +1 -1
- package/build/bundle.js +253 -381
- package/package.json +3 -2
- package/TestComponent.js +0 -15
- package/build/CountryCodeSelect/index.js +0 -18
- package/build/ReactSelectWrapper/index.js +0 -34
- package/postcss.config.js +0 -6
package/LuxityMobileHeader.js
CHANGED
|
@@ -197,7 +197,7 @@
|
|
|
197
197
|
src: accountIcon,
|
|
198
198
|
alt: "close-icon",
|
|
199
199
|
className: "side-nav__menu-icon"
|
|
200
|
-
}), "Account"))), /*#__PURE__*/React__default.createElement("div", {
|
|
200
|
+
}), "Account"))), onInterestClick && /*#__PURE__*/React__default.createElement("div", {
|
|
201
201
|
className: "side-nav__menu-item"
|
|
202
202
|
}, /*#__PURE__*/React__default.createElement("button", {
|
|
203
203
|
type: "button",
|
|
@@ -433,6 +433,7 @@
|
|
|
433
433
|
className: "side-nav__element"
|
|
434
434
|
}, "All Brands"), !!brandsList.length && brandsList.map(function (brand) {
|
|
435
435
|
return /*#__PURE__*/React__default.createElement(LinkComponent, {
|
|
436
|
+
key: brand.slug,
|
|
436
437
|
href: "".concat(productUrl, "/").concat(categorySlug === 'new' ? 'brands' : categorySlug, "/").concat(brand.slug),
|
|
437
438
|
onClick: handleLinkClick,
|
|
438
439
|
className: "side-nav__element"
|
|
@@ -444,33 +445,10 @@
|
|
|
444
445
|
var _categories$filter;
|
|
445
446
|
|
|
446
447
|
return (_categories$filter = categories === null || categories === void 0 ? void 0 : categories.filter(function (category) {
|
|
447
|
-
return category.name !== name;
|
|
448
|
+
return category.name.toLowerCase() !== name.toLowerCase();
|
|
448
449
|
})) !== null && _categories$filter !== void 0 ? _categories$filter : [];
|
|
449
450
|
};
|
|
450
451
|
|
|
451
|
-
var categories = {
|
|
452
|
-
shoes: {
|
|
453
|
-
name: 'Shoes',
|
|
454
|
-
slug: 'shoes'
|
|
455
|
-
},
|
|
456
|
-
bags: {
|
|
457
|
-
name: 'Bags',
|
|
458
|
-
slug: 'bags'
|
|
459
|
-
},
|
|
460
|
-
clothing: {
|
|
461
|
-
name: 'Clothing',
|
|
462
|
-
slug: 'apparel'
|
|
463
|
-
},
|
|
464
|
-
watches: {
|
|
465
|
-
name: 'Watches',
|
|
466
|
-
slug: 'watches'
|
|
467
|
-
},
|
|
468
|
-
accessories: {
|
|
469
|
-
name: 'Accessories',
|
|
470
|
-
slug: 'accessories'
|
|
471
|
-
}
|
|
472
|
-
};
|
|
473
|
-
|
|
474
452
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
475
453
|
/* position relative is required for the Body element to be positioned correctly */
|
|
476
454
|
|
|
@@ -689,13 +667,13 @@
|
|
|
689
667
|
categoryElements = _ref.categoryElements,
|
|
690
668
|
showSideNav = _ref.showSideNav,
|
|
691
669
|
onMenuClick = _ref.onMenuClick,
|
|
692
|
-
menuData = _ref.menuData,
|
|
693
670
|
currency = _ref.currency,
|
|
694
671
|
currencyOptions = _ref.currencyOptions,
|
|
695
672
|
onCurrencyChange = _ref.onCurrencyChange,
|
|
696
673
|
isCurrencySelectionDisabled = _ref.isCurrencySelectionDisabled,
|
|
697
674
|
tooltipContent = _ref.tooltipContent,
|
|
698
|
-
LinkComponent = _ref.LinkComponent
|
|
675
|
+
LinkComponent = _ref.LinkComponent,
|
|
676
|
+
categoryConfig = _ref.categoryConfig;
|
|
699
677
|
|
|
700
678
|
var _useState = React.useState(false),
|
|
701
679
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -712,16 +690,7 @@
|
|
|
712
690
|
loading = _useState6[0],
|
|
713
691
|
setLoading = _useState6[1];
|
|
714
692
|
|
|
715
|
-
var _useState7 = React.useState({
|
|
716
|
-
latestArrivals: [],
|
|
717
|
-
bags: [],
|
|
718
|
-
shoes: [],
|
|
719
|
-
apparel: [],
|
|
720
|
-
accessories: [],
|
|
721
|
-
watches: [],
|
|
722
|
-
accessoriesCategories: [],
|
|
723
|
-
apparelStyles: []
|
|
724
|
-
}),
|
|
693
|
+
var _useState7 = React.useState({}),
|
|
725
694
|
_useState8 = _slicedToArray(_useState7, 2),
|
|
726
695
|
dropdownData = _useState8[0],
|
|
727
696
|
setDropdownData = _useState8[1];
|
|
@@ -768,25 +737,93 @@
|
|
|
768
737
|
|
|
769
738
|
React.useMemo(function () {
|
|
770
739
|
setLoading(true);
|
|
771
|
-
axios.get("".concat(menuData)).then(function (_ref2) {
|
|
740
|
+
axios.get("".concat(categoryConfig.menuData)).then(function (_ref2) {
|
|
772
741
|
var data = _ref2.data;
|
|
773
742
|
setLoading(false);
|
|
774
|
-
setDropdownData(
|
|
775
|
-
return _objectSpread2(_objectSpread2({}, prev), {}, {
|
|
776
|
-
latestArrivals: data.latest_arrivals,
|
|
777
|
-
bags: data.bags,
|
|
778
|
-
shoes: data.shoes,
|
|
779
|
-
apparel: data.apparel,
|
|
780
|
-
accessories: data.accessories,
|
|
781
|
-
watches: data.watches,
|
|
782
|
-
accessoriesCategories: data.accessories_categories,
|
|
783
|
-
apparelStyles: data.apparel_styles
|
|
784
|
-
});
|
|
785
|
-
});
|
|
743
|
+
setDropdownData(data);
|
|
786
744
|
}).catch(function () {
|
|
787
745
|
return setHasError(true);
|
|
788
746
|
});
|
|
789
|
-
}, [menuData]);
|
|
747
|
+
}, [categoryConfig.menuData]);
|
|
748
|
+
|
|
749
|
+
var renderMenuItems = function renderMenuItems() {
|
|
750
|
+
return categoryConfig.categories.map(function (category) {
|
|
751
|
+
var title = category.title,
|
|
752
|
+
categorySlug = category.categorySlug;
|
|
753
|
+
var slug = categorySlug;
|
|
754
|
+
|
|
755
|
+
if (categorySlug === 'brands') {
|
|
756
|
+
slug = 'new';
|
|
757
|
+
}
|
|
758
|
+
|
|
759
|
+
return /*#__PURE__*/React__default.createElement("div", {
|
|
760
|
+
className: "side-nav__menu-item",
|
|
761
|
+
key: slug
|
|
762
|
+
}, /*#__PURE__*/React__default.createElement("button", {
|
|
763
|
+
type: "button",
|
|
764
|
+
className: "side-nav__menu-title-wrapper",
|
|
765
|
+
onClick: function onClick() {
|
|
766
|
+
return onSubMenuClick(slug);
|
|
767
|
+
}
|
|
768
|
+
}, /*#__PURE__*/React__default.createElement("span", {
|
|
769
|
+
className: "side-nav__menu-title"
|
|
770
|
+
}, title), /*#__PURE__*/React__default.createElement("img", {
|
|
771
|
+
src: accordionIcon,
|
|
772
|
+
alt: "accordion-icon",
|
|
773
|
+
className: "side-nav__accordion-icon"
|
|
774
|
+
})));
|
|
775
|
+
});
|
|
776
|
+
};
|
|
777
|
+
|
|
778
|
+
var renderDropdownLinks = function renderDropdownLinks() {
|
|
779
|
+
return categoryConfig.categories.map(function (category) {
|
|
780
|
+
var categorySlug = category.categorySlug,
|
|
781
|
+
categoryName = category.categoryName,
|
|
782
|
+
elementsKey = category.elementsKey,
|
|
783
|
+
subCategoryElementsKey = category.subCategoryElementsKey,
|
|
784
|
+
styleElementsKey = category.styleElementsKey;
|
|
785
|
+
var categoryElementsProcessed = categoryElements;
|
|
786
|
+
|
|
787
|
+
if (subCategoryElementsKey && dropdownData[subCategoryElementsKey]) {
|
|
788
|
+
// show subcategory elements
|
|
789
|
+
categoryElementsProcessed = removeCategoryByName(dropdownData[subCategoryElementsKey], categoryName);
|
|
790
|
+
} else if (styleElementsKey && dropdownData[styleElementsKey]) {
|
|
791
|
+
categoryElementsProcessed = addCategoryToElements(dropdownData[styleElementsKey], categorySlug);
|
|
792
|
+
} else {
|
|
793
|
+
categoryElementsProcessed = addCategoryToElements(categoryElementsProcessed, categorySlug);
|
|
794
|
+
}
|
|
795
|
+
|
|
796
|
+
var subMenuTitle = 'Brands';
|
|
797
|
+
|
|
798
|
+
if (categorySlug !== 'brands') {
|
|
799
|
+
subMenuTitle = "".concat(categoryName, " Brands");
|
|
800
|
+
}
|
|
801
|
+
|
|
802
|
+
var subMenu = categorySlug;
|
|
803
|
+
|
|
804
|
+
if (subMenu === 'brands') {
|
|
805
|
+
subMenu = 'new';
|
|
806
|
+
}
|
|
807
|
+
|
|
808
|
+
return /*#__PURE__*/React__default.createElement(BrandsDropDown, {
|
|
809
|
+
key: categorySlug,
|
|
810
|
+
subMenuOpen: subMenuOpen && displayedSubMenu === subMenu,
|
|
811
|
+
onBackClick: onBackClick,
|
|
812
|
+
backIcon: backIcon,
|
|
813
|
+
subMenuCategoryTitle: "Department",
|
|
814
|
+
productUrl: productUrl,
|
|
815
|
+
categoryElements: categoryElementsProcessed,
|
|
816
|
+
subMenuBrandsTitle: subMenuTitle,
|
|
817
|
+
brandsList: dropdownData[elementsKey],
|
|
818
|
+
categorySlug: displayedSubMenu,
|
|
819
|
+
isLoading: loading,
|
|
820
|
+
hasError: hasError,
|
|
821
|
+
onCloseSideNav: onCloseSideNav,
|
|
822
|
+
LinkComponent: LinkComponent
|
|
823
|
+
});
|
|
824
|
+
});
|
|
825
|
+
};
|
|
826
|
+
|
|
790
827
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
791
828
|
className: "side-nav"
|
|
792
829
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
@@ -807,92 +844,9 @@
|
|
|
807
844
|
className: "side-nav__close-icon"
|
|
808
845
|
})), /*#__PURE__*/React__default.createElement("div", {
|
|
809
846
|
className: "side-nav__menu-items-wrapper"
|
|
810
|
-
}, /*#__PURE__*/React__default.createElement("div", {
|
|
811
|
-
className: "side-nav__menu-item"
|
|
812
|
-
|
|
813
|
-
type: "button",
|
|
814
|
-
className: "side-nav__menu-title-wrapper",
|
|
815
|
-
onClick: function onClick() {
|
|
816
|
-
return onSubMenuClick('new');
|
|
817
|
-
}
|
|
818
|
-
}, /*#__PURE__*/React__default.createElement("span", {
|
|
819
|
-
className: "side-nav__menu-title"
|
|
820
|
-
}, "New"), /*#__PURE__*/React__default.createElement("img", {
|
|
821
|
-
src: accordionIcon,
|
|
822
|
-
alt: "accordion-icon",
|
|
823
|
-
className: "side-nav__accordion-icon"
|
|
824
|
-
}))), /*#__PURE__*/React__default.createElement("div", {
|
|
825
|
-
className: "side-nav__menu-item"
|
|
826
|
-
}, /*#__PURE__*/React__default.createElement("button", {
|
|
827
|
-
type: "button",
|
|
828
|
-
className: "side-nav__menu-title-wrapper",
|
|
829
|
-
onClick: function onClick() {
|
|
830
|
-
return onSubMenuClick('bags');
|
|
831
|
-
}
|
|
832
|
-
}, /*#__PURE__*/React__default.createElement("span", {
|
|
833
|
-
className: "side-nav__menu-title"
|
|
834
|
-
}, "Bags"), /*#__PURE__*/React__default.createElement("img", {
|
|
835
|
-
src: accordionIcon,
|
|
836
|
-
alt: "accordion-icon",
|
|
837
|
-
className: "side-nav__accordion-icon"
|
|
838
|
-
}))), /*#__PURE__*/React__default.createElement("div", {
|
|
839
|
-
className: "side-nav__menu-item"
|
|
840
|
-
}, /*#__PURE__*/React__default.createElement("button", {
|
|
841
|
-
type: "button",
|
|
842
|
-
className: "side-nav__menu-title-wrapper",
|
|
843
|
-
onClick: function onClick() {
|
|
844
|
-
return onSubMenuClick('shoes');
|
|
845
|
-
}
|
|
846
|
-
}, /*#__PURE__*/React__default.createElement("span", {
|
|
847
|
-
className: "side-nav__menu-title"
|
|
848
|
-
}, "Shoes"), /*#__PURE__*/React__default.createElement("img", {
|
|
849
|
-
src: accordionIcon,
|
|
850
|
-
alt: "accordion-icon",
|
|
851
|
-
className: "side-nav__accordion-icon"
|
|
852
|
-
}))), /*#__PURE__*/React__default.createElement("div", {
|
|
853
|
-
className: "side-nav__menu-item"
|
|
854
|
-
}, /*#__PURE__*/React__default.createElement("button", {
|
|
855
|
-
type: "button",
|
|
856
|
-
className: "side-nav__menu-title-wrapper",
|
|
857
|
-
onClick: function onClick() {
|
|
858
|
-
return onSubMenuClick('apparel');
|
|
859
|
-
}
|
|
860
|
-
}, /*#__PURE__*/React__default.createElement("span", {
|
|
861
|
-
className: "side-nav__menu-title"
|
|
862
|
-
}, "Clothing"), /*#__PURE__*/React__default.createElement("img", {
|
|
863
|
-
src: accordionIcon,
|
|
864
|
-
alt: "accordion-icon",
|
|
865
|
-
className: "side-nav__accordion-icon"
|
|
866
|
-
}))), /*#__PURE__*/React__default.createElement("div", {
|
|
867
|
-
className: "side-nav__menu-item"
|
|
868
|
-
}, /*#__PURE__*/React__default.createElement("button", {
|
|
869
|
-
type: "button",
|
|
870
|
-
className: "side-nav__menu-title-wrapper",
|
|
871
|
-
onClick: function onClick() {
|
|
872
|
-
return onSubMenuClick('accessories');
|
|
873
|
-
}
|
|
874
|
-
}, /*#__PURE__*/React__default.createElement("span", {
|
|
875
|
-
className: "side-nav__menu-title"
|
|
876
|
-
}, "Accessories"), /*#__PURE__*/React__default.createElement("img", {
|
|
877
|
-
src: accordionIcon,
|
|
878
|
-
alt: "accordion-icon",
|
|
879
|
-
className: "side-nav__accordion-icon"
|
|
880
|
-
}))), /*#__PURE__*/React__default.createElement("div", {
|
|
881
|
-
className: "side-nav__menu-item"
|
|
882
|
-
}, /*#__PURE__*/React__default.createElement("button", {
|
|
883
|
-
type: "button",
|
|
884
|
-
className: "side-nav__menu-title-wrapper",
|
|
885
|
-
onClick: function onClick() {
|
|
886
|
-
return onSubMenuClick('watches');
|
|
887
|
-
}
|
|
888
|
-
}, /*#__PURE__*/React__default.createElement("span", {
|
|
889
|
-
className: "side-nav__menu-title"
|
|
890
|
-
}, "Watches"), /*#__PURE__*/React__default.createElement("img", {
|
|
891
|
-
src: accordionIcon,
|
|
892
|
-
alt: "accordion-icon",
|
|
893
|
-
className: "side-nav__accordion-icon"
|
|
894
|
-
}))), /*#__PURE__*/React__default.createElement("div", {
|
|
895
|
-
className: "side-nav__menu-item"
|
|
847
|
+
}, renderMenuItems(), !!stores.length && /*#__PURE__*/React__default.createElement("div", {
|
|
848
|
+
className: "side-nav__menu-item",
|
|
849
|
+
key: "stores"
|
|
896
850
|
}, /*#__PURE__*/React__default.createElement("button", {
|
|
897
851
|
type: "button",
|
|
898
852
|
className: "side-nav__menu-title-wrapper",
|
|
@@ -904,134 +858,58 @@
|
|
|
904
858
|
alt: "accordion-icon",
|
|
905
859
|
className: "side-nav__accordion-icon"
|
|
906
860
|
}))), /*#__PURE__*/React__default.createElement("div", {
|
|
907
|
-
className: "side-nav__menu-item"
|
|
861
|
+
className: "side-nav__menu-item",
|
|
862
|
+
key: "sell-to-us"
|
|
908
863
|
}, /*#__PURE__*/React__default.createElement("button", {
|
|
909
864
|
type: "button",
|
|
910
865
|
className: "side-nav__block-button",
|
|
911
866
|
onClick: onSellToUsClick
|
|
912
867
|
}, "Sell To Us")), /*#__PURE__*/React__default.createElement("div", {
|
|
913
|
-
className: "side-nav__menu-item"
|
|
868
|
+
className: "side-nav__menu-item",
|
|
869
|
+
key: "our-story"
|
|
914
870
|
}, /*#__PURE__*/React__default.createElement("button", {
|
|
915
871
|
type: "button",
|
|
916
872
|
className: "side-nav__sub-link",
|
|
917
873
|
onClick: onOurStoryClick
|
|
918
|
-
}, "Our Story")), /*#__PURE__*/React__default.createElement("div", {
|
|
919
|
-
className: "side-nav__menu-item"
|
|
874
|
+
}, "Our Story")), typeof onBlogClick === 'function' && /*#__PURE__*/React__default.createElement("div", {
|
|
875
|
+
className: "side-nav__menu-item",
|
|
876
|
+
key: "blog"
|
|
920
877
|
}, /*#__PURE__*/React__default.createElement("button", {
|
|
921
878
|
type: "button",
|
|
922
879
|
className: "side-nav__sub-link",
|
|
923
880
|
onClick: onBlogClick
|
|
924
881
|
}, "Blog")), /*#__PURE__*/React__default.createElement("div", {
|
|
925
|
-
className: "side-nav__menu-item"
|
|
882
|
+
className: "side-nav__menu-item",
|
|
883
|
+
key: "contact-us"
|
|
926
884
|
}, /*#__PURE__*/React__default.createElement("button", {
|
|
927
885
|
type: "button",
|
|
928
886
|
className: "side-nav__sub-link",
|
|
929
887
|
onClick: onContactUsClick
|
|
930
888
|
}, "Contact Us")), /*#__PURE__*/React__default.createElement("div", {
|
|
931
|
-
className: "side-nav__menu-item"
|
|
889
|
+
className: "side-nav__menu-item",
|
|
890
|
+
key: "my-account"
|
|
932
891
|
}, /*#__PURE__*/React__default.createElement("button", {
|
|
933
892
|
type: "button",
|
|
934
893
|
className: "side-nav__sub-link",
|
|
935
894
|
onClick: onAccountClick
|
|
936
895
|
}, "My Account")), /*#__PURE__*/React__default.createElement("div", {
|
|
937
|
-
className: "side-nav__menu-item"
|
|
896
|
+
className: "side-nav__menu-item",
|
|
897
|
+
key: "my-cart"
|
|
938
898
|
}, /*#__PURE__*/React__default.createElement("button", {
|
|
939
899
|
type: "button",
|
|
940
900
|
className: "side-nav__sub-link",
|
|
941
901
|
onClick: onCartClick
|
|
942
902
|
}, "My Cart")), /*#__PURE__*/React__default.createElement(CurrencySelect, {
|
|
903
|
+
key: "currency",
|
|
943
904
|
currency: currency,
|
|
944
905
|
currencyOptions: currencyOptions,
|
|
945
906
|
onCurrencyChange: onCurrencyChange,
|
|
946
907
|
isCurrencySelectionDisabled: isCurrencySelectionDisabled,
|
|
947
908
|
tooltipContent: tooltipContent
|
|
948
|
-
}))), /*#__PURE__*/React__default.createElement(
|
|
949
|
-
subMenuOpen: subMenuOpen && displayedSubMenu === 'new',
|
|
950
|
-
onBackClick: onBackClick,
|
|
951
|
-
backIcon: backIcon,
|
|
952
|
-
subMenuCategoryTitle: "Department",
|
|
953
|
-
productUrl: productUrl,
|
|
954
|
-
categoryElements: categoryElements,
|
|
955
|
-
subMenuBrandsTitle: "Brands",
|
|
956
|
-
brandsList: dropdownData.latestArrivals,
|
|
957
|
-
categorySlug: displayedSubMenu,
|
|
958
|
-
isLoading: loading,
|
|
959
|
-
hasError: hasError,
|
|
960
|
-
onCloseSideNav: onCloseSideNav,
|
|
961
|
-
LinkComponent: LinkComponent
|
|
962
|
-
}), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
|
|
963
|
-
subMenuOpen: subMenuOpen && displayedSubMenu === 'bags',
|
|
964
|
-
onBackClick: onBackClick,
|
|
965
|
-
backIcon: backIcon,
|
|
966
|
-
subMenuCategoryTitle: "Department",
|
|
967
|
-
productUrl: productUrl,
|
|
968
|
-
categoryElements: addCategoryToElements(categoryElements, categories.bags.slug),
|
|
969
|
-
subMenuBrandsTitle: "Bag Brands",
|
|
970
|
-
brandsList: dropdownData.bags,
|
|
971
|
-
categorySlug: displayedSubMenu,
|
|
972
|
-
isLoading: loading,
|
|
973
|
-
hasError: hasError,
|
|
974
|
-
onCloseSideNav: onCloseSideNav,
|
|
975
|
-
LinkComponent: LinkComponent
|
|
976
|
-
}), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
|
|
977
|
-
subMenuOpen: subMenuOpen && displayedSubMenu === 'shoes',
|
|
978
|
-
onBackClick: onBackClick,
|
|
979
|
-
backIcon: backIcon,
|
|
980
|
-
subMenuCategoryTitle: "Department",
|
|
981
|
-
productUrl: productUrl,
|
|
982
|
-
categoryElements: addCategoryToElements(categoryElements, categories.shoes.slug),
|
|
983
|
-
subMenuBrandsTitle: "Shoe Brands",
|
|
984
|
-
brandsList: dropdownData.shoes,
|
|
985
|
-
categorySlug: displayedSubMenu,
|
|
986
|
-
isLoading: loading,
|
|
987
|
-
hasError: hasError,
|
|
988
|
-
onCloseSideNav: onCloseSideNav,
|
|
989
|
-
LinkComponent: LinkComponent
|
|
990
|
-
}), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
|
|
991
|
-
subMenuOpen: subMenuOpen && displayedSubMenu === 'apparel',
|
|
992
|
-
onBackClick: onBackClick,
|
|
993
|
-
backIcon: backIcon,
|
|
994
|
-
subMenuCategoryTitle: "Department",
|
|
995
|
-
productUrl: productUrl,
|
|
996
|
-
categoryElements: addCategoryToElements(dropdownData.apparelStyles, categories.clothing.slug),
|
|
997
|
-
subMenuBrandsTitle: "Clothing Brands",
|
|
998
|
-
brandsList: dropdownData.apparel,
|
|
999
|
-
categorySlug: displayedSubMenu,
|
|
1000
|
-
isLoading: loading,
|
|
1001
|
-
hasError: hasError,
|
|
1002
|
-
onCloseSideNav: onCloseSideNav,
|
|
1003
|
-
LinkComponent: LinkComponent
|
|
1004
|
-
}), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
|
|
1005
|
-
subMenuOpen: subMenuOpen && displayedSubMenu === 'accessories',
|
|
1006
|
-
onBackClick: onBackClick,
|
|
1007
|
-
backIcon: backIcon,
|
|
1008
|
-
subMenuCategoryTitle: "Categories",
|
|
1009
|
-
productUrl: productUrl,
|
|
1010
|
-
categoryElements: removeCategoryByName(dropdownData.accessoriesCategories, 'ACCESSORIES'),
|
|
1011
|
-
subMenuBrandsTitle: "Accessory Brands",
|
|
1012
|
-
brandsList: dropdownData.accessories,
|
|
1013
|
-
categorySlug: displayedSubMenu,
|
|
1014
|
-
isLoading: loading,
|
|
1015
|
-
hasError: hasError,
|
|
1016
|
-
onCloseSideNav: onCloseSideNav,
|
|
1017
|
-
LinkComponent: LinkComponent
|
|
1018
|
-
}), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
|
|
1019
|
-
subMenuOpen: subMenuOpen && displayedSubMenu === 'watches',
|
|
1020
|
-
onBackClick: onBackClick,
|
|
1021
|
-
backIcon: backIcon,
|
|
1022
|
-
subMenuCategoryTitle: "Department",
|
|
1023
|
-
productUrl: productUrl,
|
|
1024
|
-
categoryElements: addCategoryToElements(categoryElements, categories.watches.slug),
|
|
1025
|
-
subMenuBrandsTitle: "Watches Brands",
|
|
1026
|
-
brandsList: dropdownData.watches,
|
|
1027
|
-
categorySlug: displayedSubMenu,
|
|
1028
|
-
isLoading: loading,
|
|
1029
|
-
hasError: hasError,
|
|
1030
|
-
onCloseSideNav: onCloseSideNav,
|
|
1031
|
-
LinkComponent: LinkComponent
|
|
1032
|
-
}), displayedSubMenu === 'stores' && /*#__PURE__*/React__default.createElement("div", {
|
|
909
|
+
}))), renderDropdownLinks(), displayedSubMenu === 'stores' && /*#__PURE__*/React__default.createElement("div", {
|
|
1033
910
|
className: "side-nav__content"
|
|
1034
911
|
}, /*#__PURE__*/React__default.createElement(StoresDropdown, {
|
|
912
|
+
key: "stores",
|
|
1035
913
|
backIcon: backIcon,
|
|
1036
914
|
onBackClick: onBackClick,
|
|
1037
915
|
stores: stores,
|
|
@@ -1205,6 +1083,7 @@
|
|
|
1205
1083
|
var endpoint = _ref.endpoint,
|
|
1206
1084
|
onProductIdsReceived = _ref.onProductIdsReceived,
|
|
1207
1085
|
currency = _ref.currency;
|
|
1086
|
+
var currentSearchRequestToken = React.useRef(null);
|
|
1208
1087
|
var debounce = React.useCallback(function (func, wait) {
|
|
1209
1088
|
var timeout;
|
|
1210
1089
|
return function executedFunction() {
|
|
@@ -1235,49 +1114,75 @@
|
|
|
1235
1114
|
});
|
|
1236
1115
|
});
|
|
1237
1116
|
}, []);
|
|
1238
|
-
var performSearch = React.useCallback(function (
|
|
1239
|
-
if (!
|
|
1117
|
+
var performSearch = React.useCallback(function (searchQuery, setSearchResults) {
|
|
1118
|
+
if (!searchQuery || searchQuery.trim() === '') {
|
|
1240
1119
|
setSearchResults({
|
|
1241
1120
|
brands: [],
|
|
1242
1121
|
products: [],
|
|
1243
1122
|
luxity_product_ids: []
|
|
1244
1123
|
});
|
|
1245
1124
|
return;
|
|
1246
|
-
}
|
|
1125
|
+
} // Cancel any ongoing search request to prevent race conditions
|
|
1126
|
+
|
|
1247
1127
|
|
|
1248
|
-
|
|
1249
|
-
|
|
1250
|
-
|
|
1128
|
+
if (currentSearchRequestToken.current) {
|
|
1129
|
+
currentSearchRequestToken.current.cancel();
|
|
1130
|
+
} // Create a new token for this specific search request
|
|
1131
|
+
|
|
1132
|
+
|
|
1133
|
+
var newSearchToken = axios.CancelToken.source();
|
|
1134
|
+
currentSearchRequestToken.current = newSearchToken;
|
|
1135
|
+
axios.post(endpoint, searchProducts(searchQuery, 3, currency), {
|
|
1136
|
+
cancelToken: newSearchToken.token
|
|
1137
|
+
}).then(function (response) {
|
|
1138
|
+
if (currentSearchRequestToken.current === newSearchToken) {
|
|
1139
|
+
var searchResults = response.data.data.luxity_products_serach_results;
|
|
1140
|
+
setSearchResults(searchResults);
|
|
1141
|
+
|
|
1142
|
+
if (searchResults && searchResults.luxity_product_ids) {
|
|
1143
|
+
onProductIdsReceived(searchResults.luxity_product_ids);
|
|
1144
|
+
}
|
|
1251
1145
|
|
|
1252
|
-
|
|
1253
|
-
|
|
1146
|
+
currentSearchRequestToken.current = null;
|
|
1147
|
+
}
|
|
1148
|
+
}).catch(function (error) {
|
|
1149
|
+
if (!axios.isCancel(error)) {
|
|
1150
|
+
setSearchResults({
|
|
1151
|
+
brands: [],
|
|
1152
|
+
products: [],
|
|
1153
|
+
luxity_product_ids: []
|
|
1154
|
+
});
|
|
1155
|
+
currentSearchRequestToken.current = null;
|
|
1254
1156
|
}
|
|
1255
|
-
}).catch(function () {
|
|
1256
|
-
setSearchResults({
|
|
1257
|
-
brands: [],
|
|
1258
|
-
products: [],
|
|
1259
|
-
luxity_product_ids: []
|
|
1260
|
-
});
|
|
1261
1157
|
});
|
|
1262
1158
|
}, [endpoint, currency, onProductIdsReceived]);
|
|
1263
1159
|
var debouncedSearch = React.useMemo(function () {
|
|
1264
|
-
return debounce(function (
|
|
1265
|
-
return performSearch(
|
|
1160
|
+
return debounce(function (searchQuery, setSearchResults) {
|
|
1161
|
+
return performSearch(searchQuery, setSearchResults);
|
|
1266
1162
|
}, 500);
|
|
1267
1163
|
}, [debounce, performSearch]);
|
|
1268
1164
|
var createDebouncedSearch = React.useCallback(function (setSearchResults) {
|
|
1269
|
-
return function (
|
|
1270
|
-
return debouncedSearch(
|
|
1165
|
+
return function (searchQuery) {
|
|
1166
|
+
return debouncedSearch(searchQuery, setSearchResults);
|
|
1271
1167
|
};
|
|
1272
1168
|
}, [debouncedSearch]);
|
|
1273
1169
|
var createImmediateSearch = React.useCallback(function (setSearchValue, setSearchResults, onSearchSubmit) {
|
|
1274
|
-
return function (
|
|
1170
|
+
return function (searchQuery) {
|
|
1171
|
+
/*
|
|
1172
|
+
* Cancel any pending search request when immediate search is performed
|
|
1173
|
+
* Immediate search is when the user types a search query and presses enter
|
|
1174
|
+
*/
|
|
1175
|
+
if (currentSearchRequestToken.current) {
|
|
1176
|
+
currentSearchRequestToken.current.cancel();
|
|
1177
|
+
currentSearchRequestToken.current = null;
|
|
1178
|
+
}
|
|
1179
|
+
|
|
1275
1180
|
setSearchValue('');
|
|
1276
1181
|
setSearchResults({
|
|
1277
1182
|
brands: [],
|
|
1278
1183
|
products: []
|
|
1279
1184
|
});
|
|
1280
|
-
onSearchSubmit(
|
|
1185
|
+
onSearchSubmit(searchQuery);
|
|
1281
1186
|
};
|
|
1282
1187
|
}, []);
|
|
1283
1188
|
return {
|
|
@@ -1327,13 +1232,16 @@
|
|
|
1327
1232
|
}, [setSearchValue, setIsSearchFocused, debouncedSearch, setSearchResults, setCachedResults]);
|
|
1328
1233
|
};
|
|
1329
1234
|
var useSearchInputFocus = function useSearchInputFocus(searchValue, setIsSearchFocused, cachedResults, setSearchResults) {
|
|
1235
|
+
var handleSearchClick = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : undefined;
|
|
1330
1236
|
return React.useCallback(function () {
|
|
1331
1237
|
setIsSearchFocused(true);
|
|
1332
1238
|
|
|
1333
|
-
if (
|
|
1239
|
+
if (typeof handleSearchClick === 'function') {
|
|
1240
|
+
handleSearchClick();
|
|
1241
|
+
} else if (searchValue.trim().length >= 3) {
|
|
1334
1242
|
setSearchResults(cachedResults);
|
|
1335
1243
|
}
|
|
1336
|
-
}, [searchValue, setIsSearchFocused, cachedResults, setSearchResults]);
|
|
1244
|
+
}, [searchValue, setIsSearchFocused, cachedResults, setSearchResults, handleSearchClick]);
|
|
1337
1245
|
};
|
|
1338
1246
|
var useSearchInputKeyDown = function useSearchInputKeyDown(searchValue, immediateSearch, setIsSearchFocused) {
|
|
1339
1247
|
var setSearchValue = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
|
|
@@ -1373,13 +1281,13 @@
|
|
|
1373
1281
|
onDashboardClick = _ref.onDashboardClick,
|
|
1374
1282
|
onContactUsClick = _ref.onContactUsClick,
|
|
1375
1283
|
onOurStoryClick = _ref.onOurStoryClick,
|
|
1376
|
-
onBlogClick = _ref.onBlogClick,
|
|
1284
|
+
_ref$onBlogClick = _ref.onBlogClick,
|
|
1285
|
+
onBlogClick = _ref$onBlogClick === void 0 ? undefined : _ref$onBlogClick,
|
|
1377
1286
|
bugReportLink = _ref.bugReportLink,
|
|
1378
1287
|
onSellToUsClick = _ref.onSellToUsClick,
|
|
1379
1288
|
onLogoClick = _ref.onLogoClick,
|
|
1380
1289
|
onLuxityShopClick = _ref.onLuxityShopClick,
|
|
1381
1290
|
endpoint = _ref.endpoint,
|
|
1382
|
-
menuData = _ref.menuData,
|
|
1383
1291
|
initialSearchData = _ref.initialSearchData,
|
|
1384
1292
|
onSearchSubmit = _ref.onSearchSubmit,
|
|
1385
1293
|
onProductIdsReceived = _ref.onProductIdsReceived,
|
|
@@ -1401,7 +1309,8 @@
|
|
|
1401
1309
|
tooltipContent = _ref.tooltipContent,
|
|
1402
1310
|
LinkComponent = _ref.LinkComponent,
|
|
1403
1311
|
shop = _ref.shop,
|
|
1404
|
-
app = _ref.app
|
|
1312
|
+
app = _ref.app,
|
|
1313
|
+
categoryConfig = _ref.categoryConfig;
|
|
1405
1314
|
|
|
1406
1315
|
var _useSearch = useSearch({
|
|
1407
1316
|
endpoint: endpoint,
|
|
@@ -1466,6 +1375,10 @@
|
|
|
1466
1375
|
var handleChange = useSearchInputChange(setSearchValue, setIsSearchFocused, debouncedSearch, setSearchResults, setCachedResults);
|
|
1467
1376
|
var handleKeyDown = useSearchInputKeyDown(searchValue, immediateSearch, setIsSearchFocused, setSearchValue);
|
|
1468
1377
|
React.useMemo(function () {
|
|
1378
|
+
if (!initialSearchData) {
|
|
1379
|
+
return;
|
|
1380
|
+
}
|
|
1381
|
+
|
|
1469
1382
|
fetchInitialSearchData(initialSearchData, setInitialSearchView);
|
|
1470
1383
|
}, [initialSearchData, fetchInitialSearchData]);
|
|
1471
1384
|
useSearchClickOutside(searchResultsRef, searchResults, setCachedResults, setIsSearchFocused, setSearchResults);
|
|
@@ -1570,10 +1483,9 @@
|
|
|
1570
1483
|
return handleClick(onOurStoryClick);
|
|
1571
1484
|
};
|
|
1572
1485
|
|
|
1573
|
-
var handleBlogClick = function
|
|
1486
|
+
var handleBlogClick = onBlogClick ? function () {
|
|
1574
1487
|
return handleClick(onBlogClick);
|
|
1575
|
-
};
|
|
1576
|
-
|
|
1488
|
+
} : undefined;
|
|
1577
1489
|
return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
|
|
1578
1490
|
className: "navbar navbar__mobile-wrapper"
|
|
1579
1491
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
@@ -1678,13 +1590,13 @@
|
|
|
1678
1590
|
showSideNav: showSideNav,
|
|
1679
1591
|
onMenuClick: onMenuClick,
|
|
1680
1592
|
endpoint: endpoint,
|
|
1681
|
-
menuData: menuData,
|
|
1682
1593
|
currency: currency,
|
|
1683
1594
|
currencyOptions: currencyOptions,
|
|
1684
1595
|
onCurrencyChange: onCurrencyChange,
|
|
1685
1596
|
isCurrencySelectionDisabled: isCurrencySelectionDisabled,
|
|
1686
1597
|
tooltipContent: tooltipContent,
|
|
1687
|
-
LinkComponent: LinkComponent
|
|
1598
|
+
LinkComponent: LinkComponent,
|
|
1599
|
+
categoryConfig: categoryConfig
|
|
1688
1600
|
}), app && /*#__PURE__*/React__default.createElement(LuxityAppSideNav, {
|
|
1689
1601
|
accordionIcon: accordionIcon,
|
|
1690
1602
|
closeIcon: closeIcon,
|