@bonlineza/luxity-lib 2.14.0 → 2.15.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.
Files changed (11) hide show
  1. package/AddInterest.js +32 -12
  2. package/BrandSelector.js +32 -12
  3. package/GraphQLDropdownSelector.js +32 -12
  4. package/Interests.js +32 -12
  5. package/LuxityGraphQLDropdownSelector.js +32 -12
  6. package/MaterialSelector.js +32 -12
  7. package/ModelSelector.js +32 -12
  8. package/RareStepFooter.js +40 -40
  9. package/RareStepHeader.js +240 -162
  10. package/build/bundle.js +283 -205
  11. package/package.json +1 -1
package/RareStepHeader.js CHANGED
@@ -159,7 +159,7 @@
159
159
  });
160
160
  });
161
161
 
162
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28;
162
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29;
163
163
  var HeaderWrapper = styled__default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n {\n display: inline-block;\n background-color: ", ";\n position: relative;\n width: 100%;\n\n .header__search-container,\n .header__search-input {\n background-color: ", ";\n }\n\n .header__search-container {\n max-width: ", ";\n margin: 0 auto;\n padding: ", " 5%;\n }\n }\n"])), function (props) {
164
164
  return props.theme.rareStepColors.ntrlMin;
165
165
  }, function (props) {
@@ -284,16 +284,17 @@
284
284
  });
285
285
  var SearchIcon = styled__default.img(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n {\n width: 20px;\n height: 20px;\n cursor: pointer;\n margin-bottom: 7px;\n }\n"])));
286
286
  var CloseIcon = styled__default.img(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n {\n width: 20px;\n height: 20px;\n margin-left: auto;\n cursor: pointer;\n }\n"])));
287
+ var CurrencyContainer = styled__default.div(_templateObject29 || (_templateObject29 = _taggedTemplateLiteral(["\n {\n display: flex;\n }\n"])));
287
288
 
288
289
  var Search = function Search(_ref) {
289
- var close_icon_url = _ref.close_icon_url,
290
- navigation_search_icon_url = _ref.navigation_search_icon_url,
291
- wordpress_site_url = _ref.wordpress_site_url,
290
+ var closeIconUrl = _ref.closeIconUrl,
291
+ navigationSearchIconUrl = _ref.navigationSearchIconUrl,
292
+ wordpressSiteUrl = _ref.wordpressSiteUrl,
292
293
  toggleSearch = _ref.toggleSearch;
293
294
  var searchInputRef = React.useRef(null);
294
295
 
295
296
  var handleOnSearch = function handleOnSearch() {
296
- window.location.replace("".concat(wordpress_site_url, "/?post_type=product&s=").concat(searchInputRef.current.value));
297
+ window.location.replace("".concat(wordpressSiteUrl, "/?post_type=product&s=").concat(searchInputRef.current.value));
297
298
  };
298
299
 
299
300
  var handleKeyDown = function handleKeyDown(e) {
@@ -306,7 +307,7 @@
306
307
  className: "header__search-container"
307
308
  }, /*#__PURE__*/React__default.createElement(SearchIcon, {
308
309
  className: "header__icon",
309
- src: navigation_search_icon_url,
310
+ src: navigationSearchIconUrl,
310
311
  onClick: handleOnSearch
311
312
  }), /*#__PURE__*/React__default.createElement(SearchInput, {
312
313
  className: "header__search-input",
@@ -315,15 +316,15 @@
315
316
  onKeyDown: handleKeyDown
316
317
  }), /*#__PURE__*/React__default.createElement(CloseIcon, {
317
318
  className: "header__icon",
318
- src: close_icon_url,
319
+ src: closeIconUrl,
319
320
  onClick: toggleSearch
320
321
  }));
321
322
  };
322
323
 
323
324
  var HeaderDropdown = function HeaderDropdown(_ref) {
324
- var _header_dropdown_prod;
325
+ var _headerDropdownProduc;
325
326
 
326
- var header_dropdown_product_object = _ref.header_dropdown_product_object,
327
+ var headerDropdownProductObject = _ref.headerDropdownProductObject,
327
328
  handleShowDropdown = _ref.handleShowDropdown,
328
329
  handleHideDropdown = _ref.handleHideDropdown;
329
330
 
@@ -345,65 +346,76 @@
345
346
  return /*#__PURE__*/React__default.createElement(Dropdown, {
346
347
  onMouseOver: handleShowDropdown,
347
348
  onMouseOut: handleHideDropdown
348
- }, /*#__PURE__*/React__default.createElement(PageContainer, null, /*#__PURE__*/React__default.createElement(DropdownBrands, null, header_dropdown_product_object === null || header_dropdown_product_object === void 0 ? void 0 : (_header_dropdown_prod = header_dropdown_product_object.brands) === null || _header_dropdown_prod === void 0 ? void 0 : _header_dropdown_prod.map(function (brand, index) {
349
+ }, /*#__PURE__*/React__default.createElement(PageContainer, null, /*#__PURE__*/React__default.createElement(DropdownBrands, null, headerDropdownProductObject === null || headerDropdownProductObject === void 0 ? void 0 : (_headerDropdownProduc = headerDropdownProductObject.brands) === null || _headerDropdownProduc === void 0 ? void 0 : _headerDropdownProduc.map(function (brand, index) {
349
350
  return /*#__PURE__*/React__default.createElement(DropdownBrandLinkContainer, {
350
351
  key: index,
351
352
  onMouseOver: function onMouseOver() {
352
353
  return handleBrandHover(brand);
353
354
  }
354
- }, /*#__PURE__*/React__default.createElement(DropdownBrandLinkHR, null), /*#__PURE__*/React__default.createElement(DropdownBrandLink, null, brand.brand_name));
355
+ }, /*#__PURE__*/React__default.createElement(DropdownBrandLinkHR, null), /*#__PURE__*/React__default.createElement(DropdownBrandLink, null, brand.brandName));
355
356
  })), /*#__PURE__*/React__default.createElement(DropdownModels, null, currentModels === null || currentModels === void 0 ? void 0 : currentModels.map(function (model, index) {
356
357
  return /*#__PURE__*/React__default.createElement(DropdownModelsList, null, /*#__PURE__*/React__default.createElement(DropdownLink, {
357
358
  key: index
358
- }, model.model_name));
359
- })), /*#__PURE__*/React__default.createElement(DropdownFigure, null, (currentBrand === null || currentBrand === void 0 ? void 0 : currentBrand.brand_image_url) && /*#__PURE__*/React__default.createElement(DropdownImage, {
360
- src: currentBrand === null || currentBrand === void 0 ? void 0 : currentBrand.brand_image_url
359
+ }, model.modelName));
360
+ })), /*#__PURE__*/React__default.createElement(DropdownFigure, null, (currentBrand === null || currentBrand === void 0 ? void 0 : currentBrand.brandImageUrl) && /*#__PURE__*/React__default.createElement(DropdownImage, {
361
+ src: currentBrand === null || currentBrand === void 0 ? void 0 : currentBrand.brandImageUrl
361
362
  }))));
362
363
  };
363
364
 
365
+ function Currency(_ref) {
366
+ var currencyFlagIconUrl = _ref.currencyFlagIconUrl,
367
+ className = _ref.className;
368
+ return /*#__PURE__*/React__default.createElement(CurrencyContainer, {
369
+ className: className
370
+ }, /*#__PURE__*/React__default.createElement(CurrencyFlagIcon, {
371
+ src: currencyFlagIconUrl
372
+ }), /*#__PURE__*/React__default.createElement(NavigationLink, null, "South African (ZAR, R)"));
373
+ }
374
+
364
375
  function Navigation(_ref) {
365
- var dropdown_closed_icon_url = _ref.dropdown_closed_icon_url,
366
- dropdown_open_icon_url = _ref.dropdown_open_icon_url,
367
- currency_flag_icon_url = _ref.currency_flag_icon_url,
376
+ var dropdownClosedIconUrl = _ref.dropdownClosedIconUrl,
377
+ dropdownOpenIconUrl = _ref.dropdownOpenIconUrl,
378
+ currencyFlagIconUrl = _ref.currencyFlagIconUrl,
368
379
  handleShowDropdown = _ref.handleShowDropdown,
369
380
  handleHideDropdown = _ref.handleHideDropdown,
370
381
  showDropdown = _ref.showDropdown,
371
- desktop_header_links = _ref.desktop_header_links;
372
- return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(NavigationContainer, null, /*#__PURE__*/React__default.createElement(PageContainer, null, /*#__PURE__*/React__default.createElement(NavigationLinks, null, desktop_header_links.left.map(function (link, index) {
373
- return link !== null && link !== void 0 && link.is_dropdown ? /*#__PURE__*/React__default.createElement(NavigationLink, {
382
+ desktopHeaderLinks = _ref.desktopHeaderLinks;
383
+ return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(NavigationContainer, null, /*#__PURE__*/React__default.createElement(PageContainer, null, /*#__PURE__*/React__default.createElement(NavigationLinks, null, desktopHeaderLinks.left.map(function (link, index) {
384
+ return link !== null && link !== void 0 && link.isDropdown ? /*#__PURE__*/React__default.createElement(NavigationLink, {
385
+ key: index,
374
386
  onMouseOver: handleShowDropdown,
375
387
  onMouseOut: handleHideDropdown
376
388
  }, link.name, showDropdown ? /*#__PURE__*/React__default.createElement(DropdownNavigatorIcon, {
377
- src: dropdown_closed_icon_url
389
+ src: dropdownClosedIconUrl
378
390
  }) : /*#__PURE__*/React__default.createElement(DropdownNavigatorIcon, {
379
- src: dropdown_open_icon_url
391
+ src: dropdownOpenIconUrl
380
392
  })) : /*#__PURE__*/React__default.createElement(NavigationLink, {
381
393
  href: link.url,
382
394
  key: index
383
395
  }, link.name);
384
- })), /*#__PURE__*/React__default.createElement(NavigationLinks, null, desktop_header_links.right.map(function (link, index) {
396
+ })), /*#__PURE__*/React__default.createElement(NavigationLinks, null, desktopHeaderLinks.right.map(function (link, index) {
385
397
  return /*#__PURE__*/React__default.createElement(NavigationLink, {
386
398
  href: link.url,
387
399
  key: index
388
400
  }, link.name);
389
- }), /*#__PURE__*/React__default.createElement(CurrencyFlagIcon, {
390
- src: currency_flag_icon_url
391
- }), /*#__PURE__*/React__default.createElement(NavigationLink, null, "South African (ZAR, R)")))));
401
+ }), /*#__PURE__*/React__default.createElement(Currency, {
402
+ currencyFlagIconUrl: currencyFlagIconUrl
403
+ })))));
392
404
  }
393
405
 
394
406
  var RareStepDesktopHeader = function RareStepDesktopHeader(_ref) {
395
- var header_logo_img_url = _ref.header_logo_img_url,
396
- search_icon_url = _ref.search_icon_url,
397
- cart_icon_url = _ref.cart_icon_url,
398
- user_icon_url = _ref.user_icon_url,
399
- interest_icon_url = _ref.interest_icon_url,
400
- dropdown_closed_icon_url = _ref.dropdown_closed_icon_url,
401
- dropdown_open_icon_url = _ref.dropdown_open_icon_url,
402
- currency_flag_icon_url = _ref.currency_flag_icon_url,
403
- close_icon_url = _ref.close_icon_url,
404
- navigation_search_icon_url = _ref.navigation_search_icon_url,
405
- wordpress_site_url = _ref.wordpress_site_url,
406
- desktop_header_links = _ref.desktop_header_links,
407
+ var headerLogoImgUrl = _ref.headerLogoImgUrl,
408
+ searchIconUrl = _ref.searchIconUrl,
409
+ cartIconUrl = _ref.cartIconUrl,
410
+ userIconUrl = _ref.userIconUrl,
411
+ interestIconUrl = _ref.interestIconUrl,
412
+ dropdownClosedIconUrl = _ref.dropdownClosedIconUrl,
413
+ dropdownOpenIconUrl = _ref.dropdownOpenIconUrl,
414
+ currencyFlagIconUrl = _ref.currencyFlagIconUrl,
415
+ closeIconUrl = _ref.closeIconUrl,
416
+ navigationSearchIconUrl = _ref.navigationSearchIconUrl,
417
+ wordpressSiteUrl = _ref.wordpressSiteUrl,
418
+ desktopHeaderLinks = _ref.desktopHeaderLinks,
407
419
  handleOnAccountClick = _ref.handleOnAccountClick;
408
420
 
409
421
  var _useState = React.useState(false),
@@ -434,32 +446,32 @@
434
446
  };
435
447
 
436
448
  return /*#__PURE__*/React__default.createElement(HeaderWrapper, null, /*#__PURE__*/React__default.createElement(HeaderContainer, null, /*#__PURE__*/React__default.createElement(LogoFigure, null, /*#__PURE__*/React__default.createElement(LogoImage, {
437
- src: header_logo_img_url
449
+ src: headerLogoImgUrl
438
450
  })), /*#__PURE__*/React__default.createElement(HeaderIconsContainer, null, /*#__PURE__*/React__default.createElement(SellToUsHR, null), /*#__PURE__*/React__default.createElement(SellToUsLink, null, "Sell to us"), /*#__PURE__*/React__default.createElement(HeaderIcon, {
439
- src: search_icon_url,
451
+ src: searchIconUrl,
440
452
  onClick: toggleSearch
441
453
  }), /*#__PURE__*/React__default.createElement(HeaderIcon, {
442
- src: interest_icon_url
454
+ src: interestIconUrl
443
455
  }), /*#__PURE__*/React__default.createElement(HeaderIcon, {
444
- src: user_icon_url,
456
+ src: userIconUrl,
445
457
  onClick: handleOnAccountClick
446
458
  }), /*#__PURE__*/React__default.createElement(HeaderIcon, {
447
- src: cart_icon_url
459
+ src: cartIconUrl
448
460
  }))), /*#__PURE__*/React__default.createElement(Navigation, {
449
- dropdown_closed_icon_url: dropdown_closed_icon_url,
450
- dropdown_open_icon_url: dropdown_open_icon_url,
451
- currency_flag_icon_url: currency_flag_icon_url,
461
+ dropdownClosedIconUrl: dropdownClosedIconUrl,
462
+ dropdownOpenIconUrl: dropdownOpenIconUrl,
463
+ currencyFlagIconUrl: currencyFlagIconUrl,
452
464
  handleShowDropdown: handleShowDropdown,
453
465
  handleHideDropdown: handleHideDropdown,
454
466
  showDropdown: showDropdown,
455
- desktop_header_links: desktop_header_links
467
+ desktopHeaderLinks: desktopHeaderLinks
456
468
  }), showSearch && /*#__PURE__*/React__default.createElement(Search, {
457
- close_icon_url: close_icon_url,
458
- navigation_search_icon_url: navigation_search_icon_url,
459
- wordpress_site_url: wordpress_site_url,
469
+ closeIconUrl: closeIconUrl,
470
+ navigationSearchIconUrl: navigationSearchIconUrl,
471
+ wordpressSiteUrl: wordpressSiteUrl,
460
472
  toggleSearch: toggleSearch
461
473
  }), showDropdown && /*#__PURE__*/React__default.createElement(HeaderDropdown, {
462
- header_dropdown_product_object: desktop_header_links.header_dropdown_product_object,
474
+ headerDropdownProductObject: desktopHeaderLinks.headerDropdownProductObject,
463
475
  handleShowDropdown: handleShowDropdown,
464
476
  handleHideDropdown: handleHideDropdown
465
477
  }));
@@ -467,34 +479,36 @@
467
479
 
468
480
  var RareStepDesktopHeader$1 = themed(RareStepDesktopHeader);
469
481
 
470
- var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1;
482
+ var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1;
471
483
  var HeaderWrapper$1 = styled__default.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n {\n display: flex;\n background-color: ", ";\n position: relative;\n width: 100%;\n justify-content: space-between;\n align-items: center;\n padding: ", " 0;\n }\n"])), function (props) {
472
484
  return props.theme.rareStepColors.ntrlMin;
473
485
  }, function (props) {
474
486
  return props.theme.marginPaddings[3];
475
487
  });
476
- var Icon = styled__default.img(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n {\n width: 40px;\n height: 40px;\n cursor: pointer;\n }\n"])));
488
+ var Icon = styled__default.img(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n {\n width: 30px;\n height: 30px;\n cursor: pointer;\n }\n"])));
477
489
  var Logo = styled__default.img(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n {\n width: 200px;\n height: 70px;\n margin-left: 20px;\n }\n"])));
478
490
  var IconWrapper = styled__default.div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n {\n display: flex;\n\n & > img {\n margin-left: 10px;\n }\n }\n"])));
479
- var SidenavWrapper = styled__default.div(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral(["\n {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n z-index: 9;\n overflow-x: hidden;\n }\n"])));
480
- var Sidenav = styled__default.div(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral(["\n {\n width: 80%;\n height: 100%;\n background-color: ", ";\n color: ", ";\n padding: ", ";\n }\n"])), function (props) {
491
+ var SideNavWrapper = styled__default.div(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral(["\n {\n position: relative;\n overflow: hidden;\n\n .side-nav-link--bottom {\n font-size: ", ";\n }\n }\n"])), function (props) {
492
+ return props.theme.rareStepFontSize.h6;
493
+ });
494
+ var SideNav = styled__default.div(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral(["\n {\n position: fixed;\n top: 0;\n left: -100%;\n width: 80%;\n height: 100%;\n background-color: ", ";\n color: ", ";\n padding: ", ";\n z-index: 9;\n }\n"])), function (props) {
481
495
  return props.theme.rareStepColors.primary;
482
496
  }, function (props) {
483
497
  return props.theme.rareStepColors.ntrlMin;
484
498
  }, function (props) {
485
499
  return props.theme.marginPaddings[1];
486
500
  });
487
- var Overlay = styled__default.div(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n {\n width: 20%;\n height: 100%;\n background-color: ", ";\n opacity: 0.5;\n }\n"])), function (props) {
501
+ var Overlay = styled__default.div(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n {\n position: fixed;\n top: 0;\n right: 200%;\n width: 20%;\n height: 100%;\n background-color: ", ";\n opacity: 0.5;\n }\n"])), function (props) {
488
502
  return props.theme.rareStepColors.ntrl40;
489
503
  });
490
504
  var CloseIcon$1 = styled__default.img(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral(["\n {\n width: 30px;\n height: 30px;\n cursor: pointer;\n }\n"])));
491
- var SidenavLink = styled__default.a(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteral(["\n {\n padding: ", ";\n color: ", ";\n text-decoration: none;\n text-align: left;\n display: block;\n width: 100%;\n cursor: pointer;\n }\n"])), function (props) {
505
+ var SideNavLink = styled__default.a(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteral(["\n {\n padding: ", ";\n color: ", ";\n text-decoration: none;\n text-align: left;\n display: block;\n width: 100%;\n cursor: pointer;\n }\n"])), function (props) {
492
506
  return props.theme.marginPaddings[1];
493
507
  }, function (props) {
494
508
  return props.theme.rareStepColors.ntrlMin;
495
509
  });
496
510
  var CloseIconWrapper = styled__default.div(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteral(["\n {\n width: 100%;\n display: flex;\n justify-content: flex-end;\n margin: 30px 0;\n }\n"])));
497
- var SellToUsLink$1 = styled__default.a(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteral(["\n {\n color: ", ";\n border: 1px solid ", ";\n background-color: transparent;\n text-transform: uppercase;\n font-weight: ", ";\n display: block;\n width: calc(100% - ", ");\n padding: ", ";\n margin-left: ", ";\n text-align: center;\n text-decoration: none;\n border-radius: 5px;\n }\n"])), function (props) {
511
+ var SellToUsLink$1 = styled__default.a(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteral(["\n {\n color: ", ";\n border: 1px solid ", ";\n background-color: transparent;\n text-transform: uppercase;\n font-weight: ", ";\n display: block;\n width: calc(100% - ", ");\n padding: ", ";\n margin: ", ";\n text-align: center;\n text-decoration: none;\n border-radius: 5px;\n letter-spacing: 1px;\n font-style: italic;\n }\n"])), function (props) {
498
512
  return props.theme.rareStepColors.secondary;
499
513
  }, function (props) {
500
514
  return props.theme.rareStepColors.secondary;
@@ -507,8 +521,8 @@
507
521
  }, function (props) {
508
522
  return props.theme.marginPaddings[1];
509
523
  });
510
- var SubmenuLinkContainer = styled__default.div(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteral(["\n {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n"])));
511
- var SubmenuRightIcon = styled__default.img(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteral(["\n {\n width: 20px;\n height: 20px;\n }\n"])));
524
+ var SubMenuLinkContainer = styled__default.div(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteral(["\n {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n"])));
525
+ var SubMenuRightIcon = styled__default.img(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteral(["\n {\n width: 20px;\n height: 20px;\n }\n"])));
512
526
  var Hr = styled__default.hr(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteral(["\n {\n width: 100%;\n color: ", ";\n margin: 0;\n }\n"])), function (props) {
513
527
  return props.theme.rareStepColors.ntrlMax;
514
528
  });
@@ -523,56 +537,104 @@
523
537
  }, function (props) {
524
538
  return props.theme.rareStepColors.ntrlMax;
525
539
  });
540
+ var BackButton = styled__default.button(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteral(["\n {\n background-color: transparent;\n border: none;\n color: ", ";\n margin: 30px 0;\n position: relative;\n\n &:hover {\n cursor: pointer;\n background-color: transparent;\n color: ", ";\n text-decoration: underline;\n }\n }\n"])), function (props) {
541
+ return props.theme.rareStepColors.ntrlMin;
542
+ }, function (props) {
543
+ return props.theme.rareStepColors.ntrlMin;
544
+ });
545
+ var BackIcon = styled__default.img(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteral(["\n {\n width: 20px;\n height: 20px;\n margin-right: 10px;\n position: absolute;\n top: 0;\n left: 10px;\n }\n"])));
546
+ var BackButtonContent = styled__default.div(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteral(["\n {\n font-size: ", ";\n text-transform: uppercase;\n color: ", ";\n margin-left: 35px;\n display: inline-block;\n }\n"])), function (props) {
547
+ return props.theme.rareStepFontSize.h5;
548
+ }, function (props) {
549
+ return props.theme.rareStepColors.ntrlMin;
550
+ });
551
+ var SideNavLinksContainer = styled__default.div(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteral(["\n {\n overflow-y: scroll;\n overflow-x: hidden;\n height: 90%;\n padding-bottom: 50px;\n }\n"])));
552
+ var MenuSideNavWrapper = styled__default.div(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteral(["\n {\n .side-nav {\n transition: left 1s ease-in-out;\n\n &--open {\n left: 0;\n }\n\n &--close {\n left: -100%;\n }\n\n &__currency {\n margin: ", " 0 0\n ", ";\n }\n }\n\n .overlay {\n transition: right 1s ease-in-out;\n\n &--open {\n right: 0;\n }\n\n &--close {\n right: 200%;\n }\n }\n }\n"])), function (props) {
553
+ return props.theme.marginPaddings[4];
554
+ }, function (props) {
555
+ return props.theme.marginPaddings[1];
556
+ });
526
557
 
527
- function MenuSidenav(_ref) {
528
- var close_icon_url = _ref.close_icon_url,
558
+ var enableBodyScroll = function enableBodyScroll() {
559
+ var _document = document,
560
+ body = _document.body;
561
+ body.style.overflow = '';
562
+ };
563
+ var disableBodyScroll = function disableBodyScroll() {
564
+ var _document2 = document,
565
+ body = _document2.body;
566
+ body.style.overflow = 'hidden';
567
+ };
568
+
569
+ function MenuSideNav(_ref) {
570
+ var closeIconUrl = _ref.closeIconUrl,
529
571
  children = _ref.children,
530
- setshowSidenav = _ref.setshowSidenav;
531
- return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(SidenavWrapper, null, /*#__PURE__*/React__default.createElement(Sidenav, null, /*#__PURE__*/React__default.createElement(CloseIconWrapper, null, /*#__PURE__*/React__default.createElement(CloseIcon$1, {
532
- onClick: function onClick() {
533
- return setshowSidenav(false);
534
- },
535
- src: close_icon_url
536
- })), children), /*#__PURE__*/React__default.createElement(Overlay, {
572
+ setShowSideNav = _ref.setShowSideNav,
573
+ isSubMenu = _ref.isSubMenu,
574
+ backIconUrl = _ref.backIconUrl,
575
+ sideNavClassName = _ref.sideNavClassName,
576
+ overlayClassName = _ref.overlayClassName;
577
+
578
+ var handleSideNavClose = function handleSideNavClose() {
579
+ setShowSideNav(false);
580
+ enableBodyScroll();
581
+ };
582
+
583
+ return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(SideNavWrapper, null, /*#__PURE__*/React__default.createElement(SideNav, {
584
+ className: sideNavClassName
585
+ }, isSubMenu ? /*#__PURE__*/React__default.createElement(BackButton, {
537
586
  onClick: function onClick() {
538
- return setshowSidenav(false);
587
+ return setShowSideNav(false);
539
588
  }
589
+ }, /*#__PURE__*/React__default.createElement(BackIcon, {
590
+ src: backIconUrl
591
+ }), /*#__PURE__*/React__default.createElement(BackButtonContent, null, "Back to menu")) : /*#__PURE__*/React__default.createElement(CloseIconWrapper, null, /*#__PURE__*/React__default.createElement(CloseIcon$1, {
592
+ onClick: handleSideNavClose,
593
+ src: closeIconUrl
594
+ })), /*#__PURE__*/React__default.createElement(SideNavLinksContainer, null, children)), /*#__PURE__*/React__default.createElement(Overlay, {
595
+ onClick: handleSideNavClose,
596
+ className: overlayClassName
540
597
  })));
541
598
  }
542
599
 
543
- function SidenavLinks(_ref) {
544
- var right_arrow_icon_url = _ref.right_arrow_icon_url,
600
+ function SideNavLinks(_ref) {
601
+ var rightArrowIconUrl = _ref.rightArrowIconUrl,
545
602
  links = _ref.links,
546
- setshowSidenavSubmenu = _ref.setshowSidenavSubmenu;
603
+ setShowSideNavSubMenu = _ref.setShowSideNavSubMenu,
604
+ currencyFlagIconUrl = _ref.currencyFlagIconUrl;
547
605
  return /*#__PURE__*/React__default.createElement(React.Fragment, null, links.top.map(function (link, index) {
548
- return link !== null && link !== void 0 && link.is_submenu ? /*#__PURE__*/React__default.createElement(SubmenuLinkContainer, {
606
+ return link !== null && link !== void 0 && link.isSubMenu ? /*#__PURE__*/React__default.createElement(SubMenuLinkContainer, {
549
607
  key: index
550
- }, /*#__PURE__*/React__default.createElement(SidenavLink, {
551
- href: "/"
552
- }, "Sneakers"), /*#__PURE__*/React__default.createElement(SubmenuRightIcon, {
553
- src: right_arrow_icon_url,
608
+ }, /*#__PURE__*/React__default.createElement(SideNavLink, {
609
+ href: link.url
610
+ }, link.name), /*#__PURE__*/React__default.createElement(SubMenuRightIcon, {
611
+ src: rightArrowIconUrl,
554
612
  onClick: function onClick() {
555
- return setshowSidenavSubmenu(true);
613
+ return setShowSideNavSubMenu(true);
556
614
  }
557
- })) : /*#__PURE__*/React__default.createElement(SidenavLink, {
615
+ })) : /*#__PURE__*/React__default.createElement(SideNavLink, {
558
616
  key: index,
559
617
  href: link.url
560
618
  }, link.name);
561
619
  }), /*#__PURE__*/React__default.createElement(SellToUsLink$1, {
562
620
  href: links.button.url
563
621
  }, links.button.name), links.bottom.map(function (link, index) {
564
- return /*#__PURE__*/React__default.createElement(SidenavLink, {
622
+ return /*#__PURE__*/React__default.createElement(SideNavLink, {
565
623
  key: index,
566
624
  href: link.url,
567
- onClick: link !== null && link !== void 0 && link.is_button ? link.onClick : null
625
+ className: "side-nav-link--bottom",
626
+ onClick: link !== null && link !== void 0 && link.isButton ? link.onClick : null
568
627
  }, link.name);
628
+ }), /*#__PURE__*/React__default.createElement(Currency, {
629
+ className: "side-nav__currency",
630
+ currencyFlagIconUrl: currencyFlagIconUrl
569
631
  }));
570
632
  }
571
633
 
572
- function SidenavSubmenuLinks(_ref) {
634
+ function SideNavSubMenuLinks(_ref) {
573
635
  var links = _ref.links;
574
- return /*#__PURE__*/React__default.createElement(React.Fragment, null, links.submenu_links.map(function (link, index) {
575
- return /*#__PURE__*/React__default.createElement(SidenavLink, {
636
+ return /*#__PURE__*/React__default.createElement(React.Fragment, null, links.subMenuLinks.map(function (link, index) {
637
+ return /*#__PURE__*/React__default.createElement(SideNavLink, {
576
638
  key: index,
577
639
  href: link.url
578
640
  }, link.name);
@@ -580,26 +642,28 @@
580
642
  }
581
643
 
582
644
  function RareStepMobileHeader(_ref) {
583
- var header_logo_img_url = _ref.header_logo_img_url,
584
- search_icon_url = _ref.search_icon_url,
585
- menu_icon_url = _ref.menu_icon_url,
586
- cart_icon_url = _ref.cart_icon_url,
587
- close_icon_url = _ref.close_icon_url,
588
- mobile_header_links = _ref.mobile_header_links,
589
- right_arrow_icon_url = _ref.right_arrow_icon_url,
590
- navigation_search_icon_url = _ref.navigation_search_icon_url,
591
- wordpress_site_url = _ref.wordpress_site_url,
592
- mobile_close_icon_url = _ref.mobile_close_icon_url;
645
+ var headerLogoImgUrl = _ref.headerLogoImgUrl,
646
+ searchIconUrl = _ref.searchIconUrl,
647
+ menuIconUrl = _ref.menuIconUrl,
648
+ cartIconUrl = _ref.cartIconUrl,
649
+ closeIconUrl = _ref.closeIconUrl,
650
+ mobileHeaderLinks = _ref.mobileHeaderLinks,
651
+ rightArrowIconUrl = _ref.rightArrowIconUrl,
652
+ navigationSearchIconUrl = _ref.navigationSearchIconUrl,
653
+ wordpressSiteUrl = _ref.wordpressSiteUrl,
654
+ mobileCloseIconUrl = _ref.mobileCloseIconUrl,
655
+ backIconUrl = _ref.backIconUrl,
656
+ currencyFlagIconUrl = _ref.currencyFlagIconUrl;
593
657
 
594
658
  var _useState = React.useState(false),
595
659
  _useState2 = _slicedToArray(_useState, 2),
596
- showSidenav = _useState2[0],
597
- setshowSidenav = _useState2[1];
660
+ showSideNav = _useState2[0],
661
+ setShowSideNav = _useState2[1];
598
662
 
599
663
  var _useState3 = React.useState(false),
600
664
  _useState4 = _slicedToArray(_useState3, 2),
601
- showSidenavSubmenu = _useState4[0],
602
- setshowSidenavSubmenu = _useState4[1];
665
+ showSideNavSubMenu = _useState4[0],
666
+ setShowSideNavSubMenu = _useState4[1];
603
667
 
604
668
  var _useState5 = React.useState(false),
605
669
  _useState6 = _slicedToArray(_useState5, 2),
@@ -612,84 +676,98 @@
612
676
 
613
677
  return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(HeaderWrapper$1, null, /*#__PURE__*/React__default.createElement(Icon, {
614
678
  onClick: function onClick() {
615
- return setshowSidenav(true);
679
+ disableBodyScroll();
680
+ setShowSideNav(true);
616
681
  },
617
- src: menu_icon_url
682
+ src: menuIconUrl
618
683
  }), /*#__PURE__*/React__default.createElement(Logo, {
619
- src: header_logo_img_url
684
+ src: headerLogoImgUrl
620
685
  }), /*#__PURE__*/React__default.createElement(IconWrapper, null, /*#__PURE__*/React__default.createElement(Icon, {
621
- src: search_icon_url,
686
+ src: searchIconUrl,
622
687
  onClick: toggleSearch
623
688
  }), /*#__PURE__*/React__default.createElement(Icon, {
624
- src: cart_icon_url
689
+ src: cartIconUrl
625
690
  }))), showSearch && /*#__PURE__*/React__default.createElement(MobileSearchContainer, null, /*#__PURE__*/React__default.createElement(Search, {
626
- close_icon_url: mobile_close_icon_url,
627
- navigation_search_icon_url: navigation_search_icon_url,
628
- wordpress_site_url: wordpress_site_url,
691
+ closeIconUrl: mobileCloseIconUrl,
692
+ navigationSearchIconUrl: navigationSearchIconUrl,
693
+ wordpressSiteUrl: wordpressSiteUrl,
629
694
  toggleSearch: toggleSearch
630
- })), /*#__PURE__*/React__default.createElement(Hr, null), showSidenav && /*#__PURE__*/React__default.createElement(MenuSidenav, {
631
- close_icon_url: close_icon_url,
632
- setshowSidenav: setshowSidenav
633
- }, /*#__PURE__*/React__default.createElement(SidenavLinks, {
634
- right_arrow_icon_url: right_arrow_icon_url,
635
- links: mobile_header_links,
636
- setshowSidenavSubmenu: setshowSidenavSubmenu
637
- })), showSidenavSubmenu && /*#__PURE__*/React__default.createElement(MenuSidenav, {
638
- close_icon_url: close_icon_url,
639
- setshowSidenav: setshowSidenavSubmenu
640
- }, /*#__PURE__*/React__default.createElement(SidenavSubmenuLinks, {
641
- links: mobile_header_links
642
- })));
695
+ })), /*#__PURE__*/React__default.createElement(Hr, null), /*#__PURE__*/React__default.createElement(MenuSideNavWrapper, null, /*#__PURE__*/React__default.createElement(MenuSideNav, {
696
+ sideNavClassName: "side-nav side-nav--".concat(showSideNav ? 'open' : 'close'),
697
+ overlayClassName: "overlay overlay--".concat(showSideNav ? 'open' : 'close'),
698
+ closeIconUrl: closeIconUrl,
699
+ backIconUrl: backIconUrl,
700
+ isSubMenu: false,
701
+ setShowSideNav: setShowSideNav
702
+ }, /*#__PURE__*/React__default.createElement(SideNavLinks, {
703
+ rightArrowIconUrl: rightArrowIconUrl,
704
+ links: mobileHeaderLinks,
705
+ setShowSideNavSubMenu: setShowSideNavSubMenu,
706
+ currencyFlagIconUrl: currencyFlagIconUrl
707
+ }))), /*#__PURE__*/React__default.createElement(MenuSideNavWrapper, null, /*#__PURE__*/React__default.createElement(MenuSideNav, {
708
+ sideNavClassName: "side-nav side-nav--".concat(showSideNavSubMenu ? 'open' : 'close'),
709
+ overlayClassName: "overlay overlay--".concat(showSideNavSubMenu ? 'open' : 'close'),
710
+ closeIconUrl: closeIconUrl,
711
+ backIconUrl: backIconUrl,
712
+ isSubMenu: true,
713
+ setShowSideNav: setShowSideNavSubMenu
714
+ }, /*#__PURE__*/React__default.createElement(SideNavSubMenuLinks, {
715
+ links: mobileHeaderLinks
716
+ }))));
643
717
  }
644
718
 
645
719
  var RareStepHeader = function RareStepHeader(_ref) {
646
- var header_logo_img_url = _ref.header_logo_img_url,
647
- search_icon_url = _ref.search_icon_url,
648
- cart_icon_url = _ref.cart_icon_url,
649
- user_icon_url = _ref.user_icon_url,
650
- interest_icon_url = _ref.interest_icon_url,
651
- dropdown_closed_icon_url = _ref.dropdown_closed_icon_url,
652
- dropdown_open_icon_url = _ref.dropdown_open_icon_url,
653
- currency_flag_icon_url = _ref.currency_flag_icon_url,
654
- close_icon_url = _ref.close_icon_url,
655
- navigation_search_icon_url = _ref.navigation_search_icon_url,
656
- wordpress_site_url = _ref.wordpress_site_url,
657
- desktop_header_wrapper_class = _ref.desktop_header_wrapper_class,
658
- menu_icon_url = _ref.menu_icon_url,
659
- mobile_header_wrapper_class = _ref.mobile_header_wrapper_class,
660
- right_arrow_icon_url = _ref.right_arrow_icon_url,
661
- desktop_header_links = _ref.desktop_header_links,
662
- mobile_header_links = _ref.mobile_header_links,
663
- mobile_close_icon_url = _ref.mobile_close_icon_url,
664
- handleOnAccountClick = _ref.handleOnAccountClick;
720
+ var headerLogoImgUrl = _ref.headerLogoImgUrl,
721
+ searchIconUrl = _ref.searchIconUrl,
722
+ cartIconUrl = _ref.cartIconUrl,
723
+ userIconUrl = _ref.userIconUrl,
724
+ interestIconUrl = _ref.interestIconUrl,
725
+ dropdownClosedIconUrl = _ref.dropdownClosedIconUrl,
726
+ dropdownOpenIconUrl = _ref.dropdownOpenIconUrl,
727
+ currencyFlagIconUrl = _ref.currencyFlagIconUrl,
728
+ closeIconUrl = _ref.closeIconUrl,
729
+ navigationSearchIconUrl = _ref.navigationSearchIconUrl,
730
+ wordpressSiteUrl = _ref.wordpressSiteUrl,
731
+ desktopHeaderWrapperClass = _ref.desktopHeaderWrapperClass,
732
+ menuIconUrl = _ref.menuIconUrl,
733
+ mobileHeaderWrapperClass = _ref.mobileHeaderWrapperClass,
734
+ rightArrowIconUrl = _ref.rightArrowIconUrl,
735
+ desktopHeaderLinks = _ref.desktopHeaderLinks,
736
+ mobileHeaderLinks = _ref.mobileHeaderLinks,
737
+ mobileCloseIconUrl = _ref.mobileCloseIconUrl,
738
+ handleOnAccountClick = _ref.handleOnAccountClick,
739
+ backIconUrl = _ref.backIconUrl;
665
740
  return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
666
- className: desktop_header_wrapper_class
741
+ className: desktopHeaderWrapperClass
667
742
  }, /*#__PURE__*/React__default.createElement(RareStepDesktopHeader$1, {
668
- header_logo_img_url: header_logo_img_url,
669
- search_icon_url: search_icon_url,
670
- cart_icon_url: cart_icon_url,
671
- user_icon_url: user_icon_url,
672
- interest_icon_url: interest_icon_url,
673
- dropdown_closed_icon_url: dropdown_closed_icon_url,
674
- dropdown_open_icon_url: dropdown_open_icon_url,
675
- currency_flag_icon_url: currency_flag_icon_url,
676
- close_icon_url: close_icon_url,
677
- navigation_search_icon_url: navigation_search_icon_url,
678
- wordpress_site_url: wordpress_site_url,
679
- desktop_header_links: desktop_header_links,
743
+ headerLogoImgUrl: headerLogoImgUrl,
744
+ searchIconUrl: searchIconUrl,
745
+ cartIconUrl: cartIconUrl,
746
+ userIconUrl: userIconUrl,
747
+ interestIconUrl: interestIconUrl,
748
+ dropdownClosedIconUrl: dropdownClosedIconUrl,
749
+ dropdownOpenIconUrl: dropdownOpenIconUrl,
750
+ currencyFlagIconUrl: currencyFlagIconUrl,
751
+ closeIconUrl: closeIconUrl,
752
+ navigationSearchIconUrl: navigationSearchIconUrl,
753
+ wordpressSiteUrl: wordpressSiteUrl,
754
+ desktopHeaderLinks: desktopHeaderLinks,
680
755
  handleOnAccountClick: handleOnAccountClick
681
756
  })), /*#__PURE__*/React__default.createElement("div", {
682
- className: mobile_header_wrapper_class
757
+ className: mobileHeaderWrapperClass
683
758
  }, /*#__PURE__*/React__default.createElement(RareStepMobileHeader, {
684
- menu_icon_url: menu_icon_url,
685
- header_logo_img_url: header_logo_img_url,
686
- search_icon_url: search_icon_url,
687
- cart_icon_url: cart_icon_url,
688
- close_icon_url: close_icon_url,
689
- right_arrow_icon_url: right_arrow_icon_url,
690
- mobile_header_links: mobile_header_links,
691
- navigation_search_icon_url: search_icon_url,
692
- mobile_close_icon_url: mobile_close_icon_url
759
+ menuIconUrl: menuIconUrl,
760
+ headerLogoImgUrl: headerLogoImgUrl,
761
+ searchIconUrl: searchIconUrl,
762
+ cartIconUrl: cartIconUrl,
763
+ closeIconUrl: closeIconUrl,
764
+ rightArrowIconUrl: rightArrowIconUrl,
765
+ mobileHeaderLinks: mobileHeaderLinks,
766
+ navigationSearchIconUrl: searchIconUrl,
767
+ mobileCloseIconUrl: mobileCloseIconUrl,
768
+ wordpressSiteUrl: wordpressSiteUrl,
769
+ backIconUrl: backIconUrl,
770
+ currencyFlagIconUrl: currencyFlagIconUrl
693
771
  })));
694
772
  };
695
773