@bonlineza/luxity-lib 2.32.6 → 2.32.8

package/LuxityAppSideNav.js

@@ -0,0 +1,186 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
+  typeof define === 'function' && define.amd ? define(['react'], factory) :
+  (global = global || self, global.LuxityAppSideNav = factory(global.React));
+}(this, (function (React) { 'use strict';
+
+  React = React && Object.prototype.hasOwnProperty.call(React, 'default') ? React['default'] : React;
+
+  var LuxityAppSideNav = function LuxityAppSideNav(_ref) {
+    var closeIcon = _ref.closeIcon,
+        accountIcon = _ref.accountIcon,
+        orderIcon = _ref.orderIcon,
+        saleIcon = _ref.saleIcon,
+        onDashboardClick = _ref.onDashboardClick,
+        onLogoutClick = _ref.onLogoutClick,
+        bugReportLink = _ref.bugReportLink,
+        onLuxityShopClick = _ref.onLuxityShopClick,
+        onInterestClick = _ref.onInterestClick,
+        onAddressClick = _ref.onAddressClick,
+        onCouponsClick = _ref.onCouponsClick,
+        onEditProfileClick = _ref.onEditProfileClick,
+        onCurrentOrdersClick = _ref.onCurrentOrdersClick,
+        onPastOrdersClick = _ref.onPastOrdersClick,
+        onPastSalesClick = _ref.onPastSalesClick,
+        onPaidOutClick = _ref.onPaidOutClick,
+        showSideNav = _ref.showSideNav,
+        onMenuClick = _ref.onMenuClick;
+
+    var onCloseSideNav = function onCloseSideNav(e) {
+      onMenuClick();
+
+      if (e.key === 'Enter') {
+        e.preventDefault();
+      }
+    };
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: "side-nav"
+    }, /*#__PURE__*/React.createElement("div", {
+      role: "button",
+      tabIndex: 0,
+      className: "side-nav__overlay ".concat(showSideNav ? 'side-nav__overlay--visible' : 'side-nav__overlay--hidden', " "),
+      onClick: onCloseSideNav,
+      onKeyDown: onCloseSideNav
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "side-nav__content ".concat(showSideNav ? 'side-nav__content--open' : 'side-nav__content--closed')
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      onClick: onMenuClick,
+      className: "side-nav__icon-container"
+    }, /*#__PURE__*/React.createElement("img", {
+      src: closeIcon,
+      alt: "close-icon",
+      className: "side-nav__close-icon"
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "side-nav__menu-items-wrapper"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "side-nav__menu-item"
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "side-nav__menu-title-wrapper"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "side-nav__menu-title"
+    }, /*#__PURE__*/React.createElement("img", {
+      src: accountIcon,
+      alt: "close-icon",
+      className: "side-nav__menu-icon"
+    }), "My Account"))), /*#__PURE__*/React.createElement("div", {
+      className: "side-nav__menu-item"
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "side-nav__menu-title-wrapper",
+      onClick: onInterestClick
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "side-nav__menu-title"
+    }, "Interests"))), /*#__PURE__*/React.createElement("div", {
+      className: "side-nav__menu-item"
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "side-nav__menu-title-wrapper",
+      onClick: onAddressClick
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "side-nav__menu-title"
+    }, "Addresses"))), /*#__PURE__*/React.createElement("div", {
+      className: "side-nav__menu-item"
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "side-nav__menu-title-wrapper",
+      onClick: onCouponsClick
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "side-nav__menu-title"
+    }, "Coupons"))), /*#__PURE__*/React.createElement("div", {
+      className: "side-nav__menu-item"
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "side-nav__menu-title-wrapper",
+      onClick: onEditProfileClick
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "side-nav__menu-title"
+    }, "Edit Profile"))), /*#__PURE__*/React.createElement("div", {
+      className: "side-nav__menu-divider"
+    }, " "), /*#__PURE__*/React.createElement("div", {
+      className: "side-nav__menu-item"
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "side-nav__menu-title-wrapper"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "side-nav__menu-title"
+    }, /*#__PURE__*/React.createElement("img", {
+      src: orderIcon,
+      alt: "close-icon",
+      className: "side-nav__menu-icon"
+    }), "My Orders"))), /*#__PURE__*/React.createElement("div", {
+      className: "side-nav__menu-item"
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "side-nav__menu-title-wrapper",
+      onClick: onCurrentOrdersClick
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "side-nav__menu-title"
+    }, "Current Orders"))), /*#__PURE__*/React.createElement("div", {
+      className: "side-nav__menu-item"
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "side-nav__menu-title-wrapper",
+      onClick: onPastOrdersClick
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "side-nav__menu-title"
+    }, "Past Orders"))), /*#__PURE__*/React.createElement("div", {
+      className: "side-nav__menu-divider"
+    }, " "), /*#__PURE__*/React.createElement("div", {
+      className: "side-nav__menu-item"
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "side-nav__menu-title-wrapper"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "side-nav__menu-title"
+    }, /*#__PURE__*/React.createElement("img", {
+      src: saleIcon,
+      alt: "close-icon",
+      className: "side-nav__menu-icon"
+    }), "My Sales"))), /*#__PURE__*/React.createElement("div", {
+      className: "side-nav__menu-item"
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "side-nav__menu-title-wrapper",
+      onClick: onPastSalesClick
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "side-nav__menu-title"
+    }, "Sales & Consignments"))), /*#__PURE__*/React.createElement("div", {
+      className: "side-nav__menu-item"
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "side-nav__menu-title-wrapper",
+      onClick: onPaidOutClick
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "side-nav__menu-title"
+    }, "Paid Out"))), /*#__PURE__*/React.createElement("div", {
+      className: "side-nav__menu-item"
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "side-nav__block-button",
+      onClick: onLuxityShopClick
+    }, "LUXITY SHOP")), /*#__PURE__*/React.createElement("div", {
+      className: "side-nav__menu-item"
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "side-nav__sub-link",
+      onClick: onDashboardClick
+    }, "Dashboard")), /*#__PURE__*/React.createElement("div", {
+      className: "side-nav__menu-item"
+    }, /*#__PURE__*/React.createElement("a", {
+      href: bugReportLink,
+      className: "side-nav__sub-link"
+    }, "Help")), /*#__PURE__*/React.createElement("div", {
+      className: "side-nav__menu-item"
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "side-nav__sub-link",
+      onClick: onLogoutClick
+    }, "Logout")))));
+  };
+
+  return LuxityAppSideNav;
+
+})));

package/LuxityDesktopHeader.js

@@ -107,6 +107,133 @@
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
 
+  var cssUnit = {
+      cm: true,
+      mm: true,
+      in: true,
+      px: true,
+      pt: true,
+      pc: true,
+      em: true,
+      ex: true,
+      ch: true,
+      rem: true,
+      vw: true,
+      vh: true,
+      vmin: true,
+      vmax: true,
+      "%": true,
+  };
+  /**
+   * If size is a number, append px to the value as default unit.
+   * If size is a string, validate against list of valid units.
+   * If unit is valid, return size as is.
+   * If unit is invalid, console warn issue, replace with px as the unit.
+   *
+   * @param {(number | string)} size
+   * @return {LengthObject} LengthObject
+   */
+  function parseLengthAndUnit(size) {
+      if (typeof size === "number") {
+          return {
+              value: size,
+              unit: "px",
+          };
+      }
+      var value;
+      var valueString = (size.match(/^[0-9.]*/) || "").toString();
+      if (valueString.includes(".")) {
+          value = parseFloat(valueString);
+      }
+      else {
+          value = parseInt(valueString, 10);
+      }
+      var unit = (size.match(/[^0-9]*$/) || "").toString();
+      if (cssUnit[unit]) {
+          return {
+              value: value,
+              unit: unit,
+          };
+      }
+      console.warn("React Spinners: ".concat(size, " is not a valid css value. Defaulting to ").concat(value, "px."));
+      return {
+          value: value,
+          unit: "px",
+      };
+  }
+  /**
+   * Take value as an input and return valid css value
+   *
+   * @param {(number | string)} value
+   * @return {string} valid css value
+   */
+  function cssValue(value) {
+      var lengthWithunit = parseLengthAndUnit(value);
+      return "".concat(lengthWithunit.value).concat(lengthWithunit.unit);
+  }
+
+  var createAnimation = function (loaderName, frames, suffix) {
+      var animationName = "react-spinners-".concat(loaderName, "-").concat(suffix);
+      if (typeof window == "undefined" || !window.document) {
+          return animationName;
+      }
+      var styleEl = document.createElement("style");
+      document.head.appendChild(styleEl);
+      var styleSheet = styleEl.sheet;
+      var keyFrames = "\n    @keyframes ".concat(animationName, " {\n      ").concat(frames, "\n    }\n  ");
+      if (styleSheet) {
+          styleSheet.insertRule(keyFrames, 0);
+      }
+      return animationName;
+  };
+
+  var __assign = (undefined && undefined.__assign) || function () {
+      __assign = Object.assign || function(t) {
+          for (var s, i = 1, n = arguments.length; i < n; i++) {
+              s = arguments[i];
+              for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                  t[p] = s[p];
+          }
+          return t;
+      };
+      return __assign.apply(this, arguments);
+  };
+  var __rest = (undefined && undefined.__rest) || function (s, e) {
+      var t = {};
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+          t[p] = s[p];
+      if (s != null && typeof Object.getOwnPropertySymbols === "function")
+          for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+              if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                  t[p[i]] = s[p[i]];
+          }
+      return t;
+  };
+  var beat = createAnimation("BeatLoader", "50% {transform: scale(0.75);opacity: 0.2} 100% {transform: scale(1);opacity: 1}", "beat");
+  function BeatLoader(_a) {
+      var _b = _a.loading, loading = _b === void 0 ? true : _b, _c = _a.color, color = _c === void 0 ? "#000000" : _c, _d = _a.speedMultiplier, speedMultiplier = _d === void 0 ? 1 : _d, _e = _a.cssOverride, cssOverride = _e === void 0 ? {} : _e, _f = _a.size, size = _f === void 0 ? 15 : _f, _g = _a.margin, margin = _g === void 0 ? 2 : _g, additionalprops = __rest(_a, ["loading", "color", "speedMultiplier", "cssOverride", "size", "margin"]);
+      var wrapper = __assign({ display: "inherit" }, cssOverride);
+      var style = function (i) {
+          return {
+              display: "inline-block",
+              backgroundColor: color,
+              width: cssValue(size),
+              height: cssValue(size),
+              margin: cssValue(margin),
+              borderRadius: "100%",
+              animation: "".concat(beat, " ").concat(0.7 / speedMultiplier, "s ").concat(i % 2 ? "0s" : "".concat(0.35 / speedMultiplier, "s"), " infinite linear"),
+              animationFillMode: "both",
+          };
+      };
+      if (!loading) {
+          return null;
+      }
+      return (React.createElement("span", __assign({ style: wrapper }, additionalprops),
+          React.createElement("span", { style: style(1) }),
+          React.createElement("span", { style: style(2) }),
+          React.createElement("span", { style: style(3) })));
+  }
+
   var getBrands = function getBrands() {
     return {
       query: "{\n        latest_arrivals: luxity_brands(has_products: true, limit: 1000, page: 1, sort_by: \"name|asc\") {data {id name slug}}\n        bags: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: BAGS, sort_by: \"name|asc\") {data {id name slug}}\n        shoes: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: SHOES, sort_by: \"name|asc\") {data {id name slug}}\n        apparel: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: APPAREL, sort_by: \"name|asc\") {data {id name slug}}\n        accessories: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: ACCESSORIES, sort_by: \"name|asc\") {data {id name slug}}\n        watches: luxity_brands(has_products: true, limit: 1000, page: 1, category_type: WATCHES, sort_by: \"name|asc\") {data {id name slug}}\n        accessories_categories: luxity_accessories_categories_list { id name slug }\n        apparel_styles: luxity_apparel_styles_list { name slug }\n      }  "
@@ -259,22 +386,21 @@
 
   var SearchResults = function SearchResults(_ref) {
     var searchValue = _ref.searchValue,
-        searchLoading = _ref.searchLoading,
         searchResults = _ref.searchResults,
         onViewAll = _ref.onViewAll,
         searchResultsRef = _ref.searchResultsRef,
         onSearchSubmit = _ref.onSearchSubmit,
         setSearchValue = _ref.setSearchValue;
 
-    if (searchValue.trim() !== '') {
+    if (searchValue.trim().length >= 3) {
+      if (searchResults.brands.length === 0 && searchResults.products.length === 0) {
+        return null;
+      }
+
       return /*#__PURE__*/React__default.createElement("div", {
         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",
         ref: searchResultsRef
-      }, searchLoading ? /*#__PURE__*/React__default.createElement("div", {
-        className: "w-full py-20 flex items-center justify-center"
-      }, "Searching ...") : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, searchResults.brands.length === 0 && searchResults.products.length === 0 ? /*#__PURE__*/React__default.createElement("div", {
-        className: "w-full py-20 flex items-center justify-center"
-      }, "No products found") : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+      }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
         className: "w-full lg:w-1/3"
       }, /*#__PURE__*/React__default.createElement("p", {
         className: "font-bold p-2 px-4"
@@ -305,7 +431,7 @@
           setSearchValue('');
         },
         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"
-      }, "View all")))));
+      }, "View all"))));
     }
 
     return null;
@@ -372,7 +498,7 @@
         hasError = _useState8[0],
         setHasError = _useState8[1];
 
-    var _useState9 = React.useState(true),
+    var _useState9 = React.useState(false),
         _useState10 = _slicedToArray(_useState9, 2),
         searchLoading = _useState10[0],
         setSearchLoading = _useState10[1];
@@ -386,6 +512,50 @@
         setSearchResults = _useState12[1];
 
     var searchResultsRef = React.useRef(null);
+
+    var debounce = function debounce(func, wait) {
+      var timeout;
+      return function executedFunction() {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+
+        var later = function later() {
+          clearTimeout(timeout);
+          func.apply(void 0, args);
+        };
+
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+      };
+    };
+
+    var debouncedSearch = React.useCallback(debounce(function (nextValue) {
+      setSearchLoading(true);
+      axios.post(endpoint, searchProducts(nextValue, 6)).then(function (response) {
+        setSearchResults(response.data.data.luxity_products_serach_results);
+        var ids = response.data.data.luxity_products_serach_results.luxity_product_ids;
+        onProductIdsReceived(ids);
+        setSearchLoading(false);
+      }).catch(function () {
+        setSearchLoading(false);
+      });
+    }, 500), [endpoint]);
+
+    var handleChange = function handleChange(event) {
+      var value = event.target.value;
+      setSearchValue(value);
+
+      if (value.trim().length >= 3) {
+        debouncedSearch(value);
+      } else {
+        setSearchResults({
+          brands: [],
+          products: []
+        });
+      }
+    };
+
     React.useEffect(function () {
       var handleClickOutside = function handleClickOutside(event) {
         if (searchResultsRef.current && !searchResultsRef.current.contains(event.target)) {
@@ -437,30 +607,6 @@
         return setHasError(true);
       });
     }, [endpoint]);
-
-    var handleChange = function handleChange(event) {
-      var value = event.target.value;
-      setSearchValue(value);
-      onSearch(value);
-
-      if (value.trim() !== '') {
-        setSearchLoading(true);
-        axios.post(endpoint, searchProducts(value, 6)).then(function (response) {
-          setSearchResults(response.data.data.luxity_products_serach_results);
-          var ids = response.data.data.luxity_products_serach_results.luxity_product_ids;
-          onProductIdsReceived(ids);
-          setSearchLoading(false);
-        }).catch(function () {
-          setSearchLoading(false);
-        });
-      } else {
-        setSearchResults({
-          brands: [],
-          products: []
-        });
-      }
-    };
-
     return /*#__PURE__*/React__default.createElement("div", {
       className: "navbar"
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -492,9 +638,14 @@
       onChange: handleChange,
       onKeyDown: handleKeyDown,
       onClick: onSearch
+    }), searchLoading && /*#__PURE__*/React__default.createElement(BeatLoader, {
+      color: "#000000",
+      loading: searchLoading,
+      size: 5,
+      "aria-label": "Loading Spinner",
+      "data-testid": "loader"
     })), /*#__PURE__*/React__default.createElement(SearchResults, {
       searchValue: searchValue,
-      searchLoading: searchLoading,
       searchResults: searchResults,
       onViewAll: function onViewAll() {
         onSearchSubmit(searchValue);