@bonlineza/luxity-lib 2.34.8 → 2.35.0

package/build/bundle.js

@@ -9685,7 +9685,7 @@
   });
 
   var _templateObject$E;
-  var NotifyContainer = styled__default.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteral(["\n  .page-ready {\n    display: flex;\n    align-items: center;\n  }\n\n  .loader {\n    min-width: 150px;\n  }\n\n  .notification-dropdown-select-container {\n    min-width: 150px;\n\n    .notification-dropdown-select__control {\n      min-height: auto;\n      background-color: ", ";\n      border: none;\n      border-radius: 0;\n\n      &--is-focused {\n        border: none;\n        border-radius: 0;\n        box-shadow: none;\n      }\n\n      .notification-dropdown-select__value-container {\n        & > div {\n          padding: 0;\n          margin: 0;\n          color: ", ";\n        }\n        & .notification-dropdown-select__single-value,\n        & .notification-dropdown-select__placeholder {\n          overflow: visible;\n          font-weight: lighter;\n        }\n      }\n    }\n  }\n\n  .notification-dropdown-select__indicators {\n    padding: 0 !important;\n    .notification-dropdown-select__dropdown-indicator {\n      color: ", ";\n    }\n  }\n\n  .notification-dropdown-select__menu {\n    border-radius: 0;\n\n    & > .notification-dropdown-select__menu-list {\n      border-radius: 0;\n\n      & > .notification-dropdown-select__option {\n        font-weight: bold;\n        &:last-child {\n          border-bottom: none;\n        }\n\n        &.notification-dropdown-select__option--is-focused {\n          background-color: ", ";\n          border-style: hidden;\n        }\n        &.notification-dropdown-select__option--is-selected {\n          color: ", ";\n          background-color: ", ";\n          border-style: hidden;\n        }\n        &.notification-dropdown-select__option--is-selected.notification-dropdown-select__option--is-focused {\n          border-style: hidden;\n        }\n      }\n    }\n  }\n"])), function (props) {
+  var NotifyContainer = styled__default.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteral(["\n  .page-ready {\n    display: flex;\n    align-items: center;\n  }\n\n  .notification-settings {\n    display: flex;\n    align-items: center;\n  }\n\n  .notification-dropdown-label {\n    margin-left: 20px;\n  }\n\n  .loader {\n    min-width: 150px;\n  }\n\n  .notification-dropdown-select-container {\n    min-width: 110px;\n\n    .notification-dropdown-select__control {\n      min-height: auto;\n      background-color: ", ";\n      border: none;\n      border-radius: 0;\n\n      &--is-focused {\n        border: none;\n        border-radius: 0;\n        box-shadow: none;\n      }\n\n      .notification-dropdown-select__value-container {\n        & > div {\n          padding: 0;\n          margin: 0;\n          color: ", ";\n        }\n        & .notification-dropdown-select__single-value,\n        & .notification-dropdown-select__placeholder {\n          overflow: visible;\n          font-weight: lighter;\n        }\n      }\n    }\n  }\n\n  .notification-dropdown-select__indicators {\n    padding: 0 !important;\n    .notification-dropdown-select__dropdown-indicator {\n      color: ", ";\n    }\n  }\n\n  .notification-dropdown-select__menu {\n    border-radius: 0;\n\n    & > .notification-dropdown-select__menu-list {\n      border-radius: 0;\n\n      & > .notification-dropdown-select__option {\n        font-weight: bold;\n        &:last-child {\n          border-bottom: none;\n        }\n\n        &.notification-dropdown-select__option--is-focused {\n          background-color: ", ";\n          border-style: hidden;\n        }\n        &.notification-dropdown-select__option--is-selected {\n          color: ", ";\n          background-color: ", ";\n          border-style: hidden;\n        }\n        &.notification-dropdown-select__option--is-selected.notification-dropdown-select__option--is-focused {\n          border-style: hidden;\n        }\n      }\n    }\n  }\n"])), function (props) {
     return props.theme.colors.ntrlMin;
   }, function (props) {
     return props.theme.colors.base;
@@ -9726,22 +9726,21 @@
 
       _this = _super.call(this, props);
 
-      _defineProperty(_assertThisInitialized(_this), "postUpdate", function (selectedOption) {
+      _defineProperty(_assertThisInitialized(_this), "postUpdate", function (selectedOption, type) {
         _this.setState({
           request: _objectSpread2(_objectSpread2({}, request), {}, {
             fetching: true
           })
         });
 
-        _this.props.setSchedule(selectedOption.value).then(function () {
-          _this.setState({
-            selectedOption: selectedOption,
-            request: _objectSpread2(_objectSpread2({}, request), {}, {
-              success: true
-            })
-          });
+        _this.props.setSchedule(selectedOption.value, type).then(function () {
+          var _this$setState;
+
+          _this.setState((_this$setState = {}, _defineProperty(_this$setState, type === 'EMAIL' ? 'emailSelectedOption' : 'whatsappSelectedOption', selectedOption), _defineProperty(_this$setState, "request", _objectSpread2(_objectSpread2({}, request), {}, {
+            success: true
+          })), _this$setState));
 
-          success('Notification Frequency Updated');
+          success("".concat(type === 'EMAIL' ? 'Email' : 'WhatsApp', " Notification Frequency Updated"));
         }).catch(function () {
           _this.setState({
             request: _objectSpread2(_objectSpread2({}, request), {}, {
@@ -9749,7 +9748,7 @@
             })
           });
 
-          error('Error Ocurred');
+          error('Error Occurred');
         });
       });
 
@@ -9768,24 +9767,29 @@
 
         var options = _this.getOptionsFromEnumResult(data);
 
-        var currentValue = data.data.user.email_interest_send_schedule;
+        var _data$data$user = data.data.user,
+            email_interest_send_schedule = _data$data$user.email_interest_send_schedule,
+            whatsapp_interest_send_schedule = _data$data$user.whatsapp_interest_send_schedule,
+            vip = _data$data$user.vip;
 
-        _this.setState(function (prevState) {
-          return {
-            options: options,
-            selectedOption: prevState.selectedOption || options.filter(function (item) {
-              return item.value === currentValue;
-            }).reduce(function (pv, cv) {
-              return cv;
-            }, null)
-          };
+        _this.setState({
+          options: options,
+          isVip: vip,
+          emailSelectedOption: options.find(function (item) {
+            return item.value === email_interest_send_schedule;
+          }),
+          whatsappSelectedOption: options.find(function (item) {
+            return item.value === whatsapp_interest_send_schedule;
+          })
         });
       });
 
       _defineProperty(_assertThisInitialized(_this), "render", function () {
         var _this$state = _this.state,
             options = _this$state.options,
-            selectedOption = _this$state.selectedOption,
+            emailSelectedOption = _this$state.emailSelectedOption,
+            whatsappSelectedOption = _this$state.whatsappSelectedOption,
+            isVip = _this$state.isVip,
             updating = _this$state.request.fetching;
         return /*#__PURE__*/React__default.createElement(NotifyContainer, null, /*#__PURE__*/React__default.createElement(LuxityNotifications, null), /*#__PURE__*/React__default.createElement(LuxityPageReady, {
           getRequestPromise: _this.props.getSchedule,
@@ -9793,8 +9797,10 @@
             return _this.onData(data);
           }
         }, /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+          className: "notification-settings"
+        }, isVip && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
           className: "notification-dropdown-label"
-        }, "Notification:\xA0"), updating ? /*#__PURE__*/React__default.createElement(EllipsisLoader, null) : /*#__PURE__*/React__default.createElement(index$1$1, {
+        }, "Notify me via WhatsApp:\xA0"), updating ? /*#__PURE__*/React__default.createElement(EllipsisLoader, null) : /*#__PURE__*/React__default.createElement(index$1$1, {
           isMulti: false,
           isSearchable: false,
           components: {
@@ -9805,14 +9811,35 @@
           options: options,
           className: "notification-dropdown-select-container",
           classNamePrefix: "notification-dropdown-select",
-          onChange: _this.postUpdate,
-          value: selectedOption
-        }))));
+          onChange: function onChange(option) {
+            return _this.postUpdate(option, 'WHATSAPP');
+          },
+          value: whatsappSelectedOption
+        })), /*#__PURE__*/React__default.createElement("div", {
+          className: "notification-dropdown-label"
+        }, "Notify me via Email:\xA0"), updating ? /*#__PURE__*/React__default.createElement(EllipsisLoader, null) : /*#__PURE__*/React__default.createElement(index$1$1, {
+          isMulti: false,
+          isSearchable: false,
+          components: {
+            IndicatorSeparator: function IndicatorSeparator() {
+              return null;
+            }
+          },
+          options: options,
+          className: "notification-dropdown-select-container",
+          classNamePrefix: "notification-dropdown-select",
+          onChange: function onChange(option) {
+            return _this.postUpdate(option, 'EMAIL');
+          },
+          value: emailSelectedOption
+        })))));
       });
 
       _this.state = {
         options: [],
-        selectedOption: null,
+        emailSelectedOption: null,
+        whatsappSelectedOption: null,
+        isVip: false,
         request: _objectSpread2({}, request)
       };
       return _this;
@@ -14996,27 +15023,24 @@
     };
 
     var debouncedSearch = React.useCallback(debounce(function (nextValue) {
-      var isKeyDown = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       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);
-
-        if (isKeyDown) {
-          // reset the search results on keydown
-          setSearchResults({
-            brands: [],
-            products: []
-          });
-          onSearchSubmit(nextValue);
-        }
-
         setSearchLoading(false);
       }).catch(function () {
         setSearchLoading(false);
       });
     }, 500), [endpoint]);
+    var immediateSearch = React.useCallback(function (value) {
+      setSearchValue('');
+      setSearchResults({
+        brands: [],
+        products: []
+      });
+      onSearchSubmit(value);
+    }, [onSearchSubmit]);
 
     var handleChange = function handleChange(event) {
       var value = event.target.value;
@@ -15047,7 +15071,11 @@
 
     var handleKeyDown = function handleKeyDown(event) {
       if (event.key === 'Enter') {
-        debouncedSearch(searchValue, true);
+        event.preventDefault();
+
+        if (searchValue.trim().length >= 3) {
+          immediateSearch(searchValue);
+        }
       } else if (event.key === 'Escape') {
         setSearchValue('');
       }
@@ -15082,6 +15110,13 @@
         return setHasError(true);
       });
     }, [menuData]);
+
+    var getMarginRight = function getMarginRight(userIsVip, userName) {
+      if (userIsVip) return '15px';
+      if (userName) return '5px';
+      return '18px';
+    };
+
     return /*#__PURE__*/React__default.createElement("div", {
       className: "navbar"
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -15222,7 +15257,7 @@
       className: "navbar__icon relative flex",
       onClick: onAccountClick,
       style: {
-        marginRight: isVip ? '15px' : '5px'
+        marginRight: getMarginRight(isVip, name)
       }
     }, /*#__PURE__*/React__default.createElement("img", {
       src: accountIcon,
@@ -16044,27 +16079,24 @@
     };
 
     var debouncedSearch = React.useCallback(debounce(function (nextValue) {
-      var isKeyDown = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       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);
-
-        if (isKeyDown) {
-          // reset the search results on keydown
-          setSearchResults({
-            brands: [],
-            products: []
-          });
-          onSearchSubmit(nextValue);
-        }
-
         setSearchLoading(false);
       }).catch(function () {
         setSearchLoading(false);
       });
     }, 500), [endpoint]);
+    var immediateSearch = React.useCallback(function (value) {
+      setSearchValue('');
+      setSearchResults({
+        brands: [],
+        products: []
+      });
+      onSearchSubmit(value);
+    }, [onSearchSubmit]);
 
     var handleChange = function handleChange(event) {
       var value = event.target.value;
@@ -16082,7 +16114,11 @@
 
     var handleKeyDown = function handleKeyDown(event) {
       if (event.key === 'Enter') {
-        debouncedSearch(searchValue, true);
+        event.preventDefault();
+
+        if (searchValue.trim().length >= 3) {
+          immediateSearch(searchValue);
+        }
       } else if (event.key === 'Escape') {
         setSearchValue('');
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonlineza/luxity-lib",
-  "version": "2.34.8",
+  "version": "2.35.0",
   "scripts": {
     "start": "start-storybook -p 9001 -c .storybook -s ./public",
     "clean": "rimraf ./build/*.*",