@bonlineza/luxity-lib 2.34.9 → 2.35.0

package/GraphQLDropdownSelector.js

@@ -9251,7 +9251,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;
@@ -9292,22 +9292,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), {}, {
@@ -9315,7 +9314,7 @@
             })
           });
 
-          error('Error Ocurred');
+          error('Error Occurred');
         });
       });
 
@@ -9334,24 +9333,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,
@@ -9359,8 +9363,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, {
+        }, "Notify me via WhatsApp:\xA0"), updating ? /*#__PURE__*/React__default.createElement(EllipsisLoader, null) : /*#__PURE__*/React__default.createElement(index$1, {
           isMulti: false,
           isSearchable: false,
           components: {
@@ -9371,14 +9377,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, {
+          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;

package/Interests.js

@@ -7143,7 +7143,7 @@
   var index$1 = manageState(Select);
 
   var _templateObject$1;
-  var NotifyContainer = styled__default.div(_templateObject$1 || (_templateObject$1 = _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$1 || (_templateObject$1 = _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;
@@ -7197,22 +7197,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), {}, {
@@ -7220,7 +7219,7 @@
             })
           });
 
-          error('Error Ocurred');
+          error('Error Occurred');
         });
       });
 
@@ -7239,24 +7238,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,
@@ -7264,8 +7268,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, {
+        }, "Notify me via WhatsApp:\xA0"), updating ? /*#__PURE__*/React__default.createElement(EllipsisLoader, null) : /*#__PURE__*/React__default.createElement(index$1, {
           isMulti: false,
           isSearchable: false,
           components: {
@@ -7276,14 +7282,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, {
+          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;

package/LuxityGraphQLDropdownSelector.js

@@ -9251,7 +9251,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;
@@ -9292,22 +9292,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), {}, {
@@ -9315,7 +9314,7 @@
             })
           });
 
-          error('Error Ocurred');
+          error('Error Occurred');
         });
       });
 
@@ -9334,24 +9333,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,
@@ -9359,8 +9363,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, {
+        }, "Notify me via WhatsApp:\xA0"), updating ? /*#__PURE__*/React__default.createElement(EllipsisLoader, null) : /*#__PURE__*/React__default.createElement(index$1, {
           isMulti: false,
           isSearchable: false,
           components: {
@@ -9371,14 +9377,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, {
+          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;

package/MaterialSelector.js

@@ -9251,7 +9251,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;
@@ -9292,22 +9292,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), {}, {
@@ -9315,7 +9314,7 @@
             })
           });
 
-          error('Error Ocurred');
+          error('Error Occurred');
         });
       });
 
@@ -9334,24 +9333,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,
@@ -9359,8 +9363,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, {
+        }, "Notify me via WhatsApp:\xA0"), updating ? /*#__PURE__*/React__default.createElement(EllipsisLoader, null) : /*#__PURE__*/React__default.createElement(index$1, {
           isMulti: false,
           isSearchable: false,
           components: {
@@ -9371,14 +9377,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, {
+          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;

package/ModelSelector.js

@@ -9251,7 +9251,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;
@@ -9292,22 +9292,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), {}, {
@@ -9315,7 +9314,7 @@
             })
           });
 
-          error('Error Ocurred');
+          error('Error Occurred');
         });
       });
 
@@ -9334,24 +9333,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,
@@ -9359,8 +9363,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, {
+        }, "Notify me via WhatsApp:\xA0"), updating ? /*#__PURE__*/React__default.createElement(EllipsisLoader, null) : /*#__PURE__*/React__default.createElement(index$1, {
           isMulti: false,
           isSearchable: false,
           components: {
@@ -9371,14 +9377,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, {
+          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;

package/NotificationDropDown.js

@@ -6753,7 +6753,7 @@
   var index$1 = manageState(Select);
 
   var _templateObject;
-  var NotifyContainer = styled__default.div(_templateObject || (_templateObject = _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 || (_templateObject = _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;
@@ -6974,22 +6974,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), {}, {
@@ -6997,7 +6996,7 @@
             })
           });
 
-          error('Error Ocurred');
+          error('Error Occurred');
         });
       });
 
@@ -7016,24 +7015,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,
@@ -7041,8 +7045,27 @@
             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"
+        }, "Notify me via WhatsApp:\xA0"), updating ? /*#__PURE__*/React__default.createElement(EllipsisLoader, null) : /*#__PURE__*/React__default.createElement(index$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, 'WHATSAPP');
+          },
+          value: whatsappSelectedOption
+        })), /*#__PURE__*/React__default.createElement("div", {
           className: "notification-dropdown-label"
-        }, "Notification:\xA0"), updating ? /*#__PURE__*/React__default.createElement(EllipsisLoader, null) : /*#__PURE__*/React__default.createElement(index$1, {
+        }, "Notify me via Email:\xA0"), updating ? /*#__PURE__*/React__default.createElement(EllipsisLoader, null) : /*#__PURE__*/React__default.createElement(index$1, {
           isMulti: false,
           isSearchable: false,
           components: {
@@ -7053,14 +7076,18 @@
           options: options,
           className: "notification-dropdown-select-container",
           classNamePrefix: "notification-dropdown-select",
-          onChange: _this.postUpdate,
-          value: selectedOption
-        }))));
+          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;

package/build/bundle.css

@@ -1 +1 @@
-.navbar{box-shadow:2px 2px 10px #dfdede;display:flex;padding-bottom:10px;padding-top:20px;position:relative}.navbar__link-item--desktop{align-items:center;display:flex;height:35px;margin:auto 0;padding-top:5px}.navbar__mobile-wrapper{align-items:center;display:flex;flex-direction:column;padding-bottom:20px;padding-left:32px;padding-right:32px}.navbar__container{display:flex;margin:0 auto;max-width:1280px;padding-left:12px;padding-right:12px;width:100%}.navbar__body{flex-basis:60%}.navbar__wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.navbar__product-search-wrapper{align-items:center;display:flex;justify-content:center;padding:0 20%;width:100%}@media only screen and (max-width:879px){.navbar__product-search-wrapper{padding:0}}.navbar__input-close-icon{height:auto;margin-bottom:10px;margin-left:10px;width:20px}@media only screen and (max-width:879px){.navbar__input-close-icon{margin-bottom:0;margin-left:0;width:15px}}.navbar__menu-icon{width:30px}.navbar__product-search{align-items:center;display:flex;max-width:545px;width:100%}.navbar__logo-wrapper{margin-right:18px;width:200px}.navbar__logo{width:200px}@media only screen and (max-width:879px){.navbar__logo{margin-left:10px;margin-top:5px;width:125px}}.navbar__form-input{align-items:center;background:transparent;border:none;display:flex;font-size:13px;outline:none;padding:8px;width:100%}.navbar__product-search{border:1px solid #dfdede;margin-bottom:10px}@media only screen and (max-width:879px){.navbar__product-search{border:none;border-bottom:1px solid #dfdede;margin-bottom:0;margin-right:10px;margin-top:10px}}.navbar__section{align-items:flex-start;display:flex;flex-direction:row;justify-content:space-between;width:100%}.navbar__link{display:inline-block;font-family:Martel Sans;font-size:14px;font-weight:700;margin-right:10px;overflow:hidden;text-transform:uppercase;transition:.3s ease-in-out}.navbar__link:after{background-color:#000;content:"";display:block;height:2px;transition:width .25s ease-out;width:0}.navbar__link:hover:after{width:100%}.navbar__link:hover .navbar__dropdown{animation:fadeInDropdown .3s ease-in-out;display:block}.navbar__dropdown{background-color:#fff;box-shadow:5px 5px 5px #dfdede;display:none;left:0;position:absolute;width:100%;z-index:999}@keyframes fadeInDropdown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.navbar__company-link{font-size:13px;font-weight:400;list-style:none;margin-left:18px;text-decoration:none}.navbar__company-block{align-items:center;background-color:#000;color:#fff;display:flex;font-weight:700;height:33px;justify-content:center;margin-right:0;padding:0 18px;text-transform:uppercase}.navbar__input-search-icon{height:auto;margin-left:1.125rem;margin-right:.375rem;width:15px}.navbar__nav-links{align-items:center;display:flex}.navbar__nav-links--wrap{flex-wrap:wrap}.navbar__icons{align-items:center;display:flex;height:40px;justify-content:flex-end;margin-bottom:10px}@media only screen and (max-width:879px){.navbar__icons{display:block;height:20px;margin-bottom:0}}.navbar__icon{cursor:pointer;height:auto;margin-right:18px;width:20px}@media only screen and (max-width:879px){.navbar__icon{margin-right:0}}.navbar__icon--app{cursor:pointer;height:auto;margin-left:12px;width:20px}@media only screen and (max-width:879px){.navbar__icon--app{margin-right:0}}.navbar__vip-icon{height:16px;position:absolute;right:-12px;top:-4px;width:16px}.navbar__cart-icon{position:relative}.navbar__cart-count{align-items:center;background-color:#000;border-radius:50%;bottom:50%;color:#fff;display:flex;font-size:13px;height:20px;justify-content:center;left:100%;position:absolute;width:20px}.side-nav{font-family:Martel Sans}.side-nav__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center}.side-nav__overlay{background-color:rgba(78,73,73,.51);height:100%;opacity:0;position:fixed;top:0;transition:opacity .5s ease-out 0s,visibility .5s ease-out 0s;width:100%;z-index:99999}.side-nav__overlay--visible{opacity:1;visibility:visible}.side-nav__overlay--hidden{opacity:1;visibility:hidden}.side-nav__content{background-color:#fff;bottom:0;overflow-y:scroll;padding:1.5rem;position:fixed;top:0;transition:left .5s ease-in-out;width:80%;z-index:99999}.side-nav__content--hidden{display:none}.side-nav__content--open{left:0}.side-nav__content--closed{left:-100%}.side-nav__menu-title-wrapper{align-items:center;background-color:transparent;border:none;display:flex;justify-content:space-between;outline:none;width:100%}.side-nav__icon-container{float:right;margin-bottom:10px}.side-nav__menu-title{font-size:14px;font-weight:700;line-height:20px;text-transform:uppercase}.side-nav__accordion-icon{height:auto;width:15px}.side-nav__menu-item{margin-bottom:25px}.side-nav__close-icon{height:20px;margin-left:auto;width:20px}.side-nav__back-button-wrapper{align-items:center;display:flex;margin-bottom:25px}.side-nav__back-icon{height:20px;width:20px}.side-nav__back-button,.side-nav__sub-menu-title{font-weight:700;text-transform:uppercase}.side-nav__sub-menu-title{font-size:14px;margin-bottom:10px}.side-nav__elements{display:flex;flex-direction:column}.side-nav__element{color:#555;cursor:pointer;line-height:20px;margin-bottom:10px}.side-nav__element,.side-nav__sub-link{font-size:14px;font-weight:400;text-transform:capitalize}.side-nav__block-button{background-color:#000;color:#fff;font-weight:700;padding:10px 0;width:100%}.footer__newsletter-section{align-items:center;background-color:#000;color:#fff;display:flex;justify-content:space-between;padding:2.265rem 0}@media only screen and (max-width:879px){.footer__newsletter-section{flex-direction:column}}.footer__newsletter-wrapper{align-items:center;display:flex;justify-content:space-between;margin:0 auto;max-width:1280px;padding-left:32px;padding-right:32px;width:100%}@media only screen and (max-width:879px){.footer__newsletter-wrapper{flex-direction:column}.footer__link-container{flex-basis:50%}}.footer__newsletter-icon{height:30px;position:absolute;right:0;top:0;width:32px}.footer__newsletter-form{flex-basis:50%;max-width:250px;position:relative}@media only screen and (max-width:879px){.footer__newsletter-form{display:block;margin-top:20px;max-width:100%;width:100%}}.footer__newsletter-title{font-family:Martel Sans,sans-serif;font-size:14px;font-weight:700;letter-spacing:3px;margin-bottom:1.125rem;text-transform:uppercase}.footer__newsletter-text{font-size:14px}.footer__form-input{background-color:#000;border:none;border-bottom:1px solid #fff;color:#fff;height:30px;outline:none;width:100%}.footer__form-input::-moz-placeholder{color:#fff;font-weight:400}.footer__form-input::placeholder{color:#fff;font-weight:400}.footer__form-errors{color:#fff;margin-top:5px}.footer__main-section{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:50px;margin-top:80px}.footer__link-title{font-family:El Messiri;font-size:16px;font-weight:700;margin-bottom:20px;text-transform:uppercase}@media only screen and (max-width:879px){.footer__link-title{margin-bottom:10px}}.footer__link-child{margin-top:25px}.footer__links{display:flex;flex-direction:column}.footer__link{color:#939393;cursor:pointer;font-family:Martel Sans;font-size:14px;line-height:20px;margin-bottom:7px;text-align:left;text-decoration:none}.footer__link:hover{color:#000;text-decoration:underline}@media only screen and (max-width:879px){.footer__link{margin-bottom:10px}}.footer__link-wrapper{align-items:center;display:flex;gap:5px}.footer__link-icon{height:30px;margin-bottom:18px}.footer__text{color:#939393;font-family:Martel Sans;font-size:14px;line-height:20px;margin-bottom:15px;text-align:left;text-decoration:none}.footer__store-hours{margin-top:35px}.footer__copyrights-section{border-top:1px solid;display:flex;justify-content:space-between;padding-bottom:20px;padding-top:20px}.footer__logo{height:30px;width:135px}.footer__payment-icons{align-items:center;display:flex;gap:8px}.footer__wrapper{margin:0 auto;max-width:1280px;padding-left:32px;padding-right:32px;width:100%}@media only screen and (max-width:879px){.footer__wrapper{padding:32px 0 0 24px}}.footer__wrapper--desktop{display:block}@media only screen and (max-width:879px){.footer__wrapper--desktop{display:none}}.footer__wrapper--mobile{display:none}@media only screen and (max-width:879px){.footer__wrapper--mobile{display:block;padding-top:30px}}.footer__copyright{font-size:10px;line-height:22px}.footer__copyright--mobile{display:none}@media only screen and (max-width:879px){.footer__copyright--mobile{display:block;padding:30px 10px 30px 0;text-align:center}}.footer__section-row{display:flex;gap:50%}@media only screen and (max-width:879px){.footer__section-row{gap:unset}}.side-nav{font-family:Martel Sans}.side-nav__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center}.side-nav__overlay{background-color:rgba(78,73,73,.51);height:100%;opacity:0;position:fixed;top:0;transition:opacity .5s ease-out 0s,visibility .5s ease-out 0s;width:100%;z-index:99999}.side-nav__overlay--visible{opacity:1;visibility:visible}.side-nav__overlay--hidden{opacity:1;visibility:hidden}.side-nav__content{background-color:#fff;bottom:0;overflow-y:scroll;padding:1.5rem;position:fixed;top:0;transition:left .5s ease-in-out;width:80%;z-index:99999}.side-nav__content--hidden{display:none}.side-nav__content--open{left:0}.side-nav__content--closed{left:-100%}.side-nav__menu-title-wrapper{align-items:center;background-color:transparent;border:none;display:flex;outline:none;width:100%}.side-nav__icon-container{float:right;margin-bottom:10px}.side-nav__menu-title{align-items:center;display:flex;font-size:14px;font-weight:700;justify-content:center;line-height:20px;text-transform:uppercase}.side-nav__menu-icon{display:flex;height:25px;margin-right:10px;width:25px}.side-nav__menu-divider{margin-bottom:40px}.side-nav__accordion-icon{height:auto;width:15px}.side-nav__menu-item{margin-bottom:25px}.side-nav__close-icon{height:20px;margin-left:auto;width:20px}.side-nav__back-button-wrapper{align-items:center;display:flex;margin-bottom:25px}.side-nav__back-icon{height:20px;width:20px}.side-nav__back-button,.side-nav__sub-menu-title{font-weight:700;text-transform:uppercase}.side-nav__sub-menu-title{font-size:14px;margin-bottom:10px}.side-nav__elements{display:flex;flex-direction:column}.side-nav__element{color:#555;cursor:pointer;line-height:20px;margin-bottom:10px}.side-nav__element,.side-nav__sub-link{font-size:14px;font-weight:400;text-transform:capitalize}.side-nav__block-button{background-color:#000;color:#fff;font-weight:700;padding:10px 0;width:100%}@charset "UTF-8";.currency-select-container{align-items:center;display:flex;margin-right:18px;position:relative}.currency-select-container .currency-flag{margin-right:5px}.currency-select-container .currency-flag img{height:15px;-o-object-fit:cover;object-fit:cover;width:20px}.currency-select-container .currency-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:transparent;border:none;color:#000;cursor:pointer;font-family:inherit;font-size:14px;margin:0;outline:none;padding:5px 15px 5px 5px}.currency-select-container .currency-select::-ms-expand{display:none}.currency-select-container .currency-select:focus{box-shadow:none;outline:none}.currency-select-container .currency-select:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}.currency-select-container:after{color:#000;content:"▼";font-size:10px;pointer-events:none;position:absolute;right:0;top:50%;transform:translateY(-50%)}@media only screen and (max-width:879px){.currency-select-container .currency-select{appearance:menulist;-webkit-appearance:menulist;-moz-appearance:menulist;padding-right:0}.currency-select-container:after{display:none}}.currency-select-container.disabled{cursor:not-allowed;opacity:.7}.currency-select-container.disabled .currency-select{pointer-events:none}.stores-dropdown{align-items:flex-start;display:flex;font-family:Martel Sans;gap:20px;margin-left:auto;margin-right:auto;max-width:1280px;overflow-x:auto;padding:20px 15px}.stores-dropdown__image{height:200px;-o-object-fit:cover;object-fit:cover;width:100%}.stores-dropdown__store-details{flex-basis:20%}.stores-dropdown__title{font-family:El Messiri}.stores-dropdown__main-title,.stores-dropdown__title{font-size:16px;font-weight:400;letter-spacing:3px;margin-top:20px}.stores-dropdown__main-title{font-weight:700;margin-bottom:10px}.stores-dropdown__open-days{font-size:12px;font-weight:700;line-height:20px}.stores-dropdown__open-hours{font-size:12px;font-weight:400;line-height:20px}.stores-dropdown__queries-title{font-family:El Messiri;font-size:16px;font-weight:400;letter-spacing:3px}.stores-dropdown__contact-details{font-size:16px;font-weight:700}.stores-dropdown__view-more{cursor:pointer;font-size:14px;font-weight:400;margin-top:10px;text-transform:capitalize}.dropdown{display:flex;justify-content:space-between;margin-left:auto;margin-right:auto;max-width:1280px;min-height:500px;overflow-x:auto;padding:20px 0}.dropdown__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center;min-height:300px}.dropdown__column{flex:1;padding-left:12px}.dropdown__column:nth-child(2){flex:2}.dropdown__title{font-family:El Messiri;font-size:16px;font-weight:700;letter-spacing:3px;line-height:1;margin-bottom:20px;text-transform:uppercase}.dropdown__elements{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));max-height:800px;overflow-y:auto}.dropdown__brand-elements{-moz-column-count:3;column-count:3;max-height:800px}.dropdown__brand-element{cursor:pointer;margin-bottom:10px}.dropdown__element{flex-basis:33.33%;font-family:Martel Sans;font-size:14px;font-weight:400;margin-bottom:10px;text-transform:capitalize}.cover-spinner{align-items:center;background-color:hsla(0,0%,100%,.7);display:flex;height:100%;justify-content:center;min-height:400px;position:relative;top:50%;width:100%;z-index:9999}.cover-spinner:after{animation:spin 1.5s linear infinite;border:4px dotted #000;border-radius:50%;border-top-color:transparent;content:"";display:block;height:40px;position:absolute;width:40px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
+.navbar{box-shadow:2px 2px 10px #dfdede;display:flex;padding-bottom:10px;padding-top:20px;position:relative}.navbar__link-item--desktop{align-items:center;display:flex;height:35px;margin:auto 0;padding-top:5px}.navbar__mobile-wrapper{align-items:center;display:flex;flex-direction:column;padding-bottom:20px;padding-left:32px;padding-right:32px}.navbar__container{display:flex;margin:0 auto;max-width:1280px;padding-left:12px;padding-right:12px;width:100%}.navbar__body{flex-basis:60%}.navbar__wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.navbar__product-search-wrapper{align-items:center;display:flex;justify-content:center;padding:0 20%;width:100%}@media only screen and (max-width:879px){.navbar__product-search-wrapper{padding:0}}.navbar__input-close-icon{height:auto;margin-bottom:10px;margin-left:10px;width:20px}@media only screen and (max-width:879px){.navbar__input-close-icon{margin-bottom:0;margin-left:0;width:15px}}.navbar__menu-icon{width:30px}.navbar__product-search{align-items:center;display:flex;max-width:545px;width:100%}.navbar__logo-wrapper{margin-right:18px;width:200px}.navbar__logo{width:200px}@media only screen and (max-width:879px){.navbar__logo{margin-left:10px;margin-top:5px;width:125px}}.navbar__form-input{align-items:center;background:transparent;border:none;display:flex;font-size:13px;outline:none;padding:8px;width:100%}.navbar__product-search{border:1px solid #dfdede;margin-bottom:10px}@media only screen and (max-width:879px){.navbar__product-search{border:none;border-bottom:1px solid #dfdede;margin-bottom:0;margin-right:10px;margin-top:10px}}.navbar__section{align-items:flex-start;display:flex;flex-direction:row;justify-content:space-between;width:100%}.navbar__link{display:inline-block;font-family:Martel Sans;font-size:14px;font-weight:700;margin-right:10px;overflow:hidden;text-transform:uppercase;transition:.3s ease-in-out}.navbar__link:after{background-color:#000;content:"";display:block;height:2px;transition:width .25s ease-out;width:0}.navbar__link:hover:after{width:100%}.navbar__link:hover .navbar__dropdown{animation:fadeInDropdown .3s ease-in-out;display:block}.navbar__dropdown{background-color:#fff;box-shadow:5px 5px 5px #dfdede;display:none;left:0;position:absolute;width:100%;z-index:999}@keyframes fadeInDropdown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.navbar__company-link{font-size:13px;font-weight:400;list-style:none;margin-left:18px;text-decoration:none}.navbar__company-block{align-items:center;background-color:#000;color:#fff;display:flex;font-weight:700;height:33px;justify-content:center;margin-right:0;padding:0 18px;text-transform:uppercase}.navbar__input-search-icon{height:auto;margin-left:1.125rem;margin-right:.375rem;width:15px}.navbar__nav-links{align-items:center;display:flex}.navbar__nav-links--wrap{flex-wrap:wrap}.navbar__icons{align-items:center;display:flex;height:40px;justify-content:flex-end;margin-bottom:10px}@media only screen and (max-width:879px){.navbar__icons{display:block;height:20px;margin-bottom:0}}.navbar__icon{cursor:pointer;height:auto;margin-right:18px;width:20px}@media only screen and (max-width:879px){.navbar__icon{margin-right:0}}.navbar__icon--app{cursor:pointer;height:auto;margin-left:12px;width:20px}@media only screen and (max-width:879px){.navbar__icon--app{margin-right:0}}.navbar__vip-icon{height:16px;position:absolute;right:-12px;top:-4px;width:16px}.navbar__cart-icon{position:relative}.navbar__cart-count{align-items:center;background-color:#000;border-radius:50%;bottom:50%;color:#fff;display:flex;font-size:13px;height:20px;justify-content:center;left:100%;position:absolute;width:20px}.side-nav{font-family:Martel Sans}.side-nav__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center}.side-nav__overlay{background-color:rgba(78,73,73,.51);height:100%;opacity:0;position:fixed;top:0;transition:opacity .5s ease-out 0s,visibility .5s ease-out 0s;width:100%;z-index:99999}.side-nav__overlay--visible{opacity:1;visibility:visible}.side-nav__overlay--hidden{opacity:1;visibility:hidden}.side-nav__content{background-color:#fff;bottom:0;overflow-y:scroll;padding:1.5rem;position:fixed;top:0;transition:left .5s ease-in-out;width:80%;z-index:99999}.side-nav__content--hidden{display:none}.side-nav__content--open{left:0}.side-nav__content--closed{left:-100%}.side-nav__menu-title-wrapper{align-items:center;background-color:transparent;border:none;display:flex;justify-content:space-between;outline:none;width:100%}.side-nav__icon-container{float:right;margin-bottom:10px}.side-nav__menu-title{font-size:14px;font-weight:700;line-height:20px;text-transform:uppercase}.side-nav__accordion-icon{height:auto;width:15px}.side-nav__menu-item{margin-bottom:25px}.side-nav__close-icon{height:20px;margin-left:auto;width:20px}.side-nav__back-button-wrapper{align-items:center;display:flex;margin-bottom:25px}.side-nav__back-icon{height:20px;width:20px}.side-nav__back-button,.side-nav__sub-menu-title{font-weight:700;text-transform:uppercase}.side-nav__sub-menu-title{font-size:14px;margin-bottom:10px}.side-nav__elements{display:flex;flex-direction:column}.side-nav__element{color:#555;cursor:pointer;line-height:20px;margin-bottom:10px}.side-nav__element,.side-nav__sub-link{font-size:14px;font-weight:400;text-transform:capitalize}.side-nav__block-button{background-color:#000;color:#fff;font-weight:700;padding:10px 0;width:100%}.side-nav{font-family:Martel Sans}.side-nav__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center}.side-nav__overlay{background-color:rgba(78,73,73,.51);height:100%;opacity:0;position:fixed;top:0;transition:opacity .5s ease-out 0s,visibility .5s ease-out 0s;width:100%;z-index:99999}.side-nav__overlay--visible{opacity:1;visibility:visible}.side-nav__overlay--hidden{opacity:1;visibility:hidden}.side-nav__content{background-color:#fff;bottom:0;overflow-y:scroll;padding:1.5rem;position:fixed;top:0;transition:left .5s ease-in-out;width:80%;z-index:99999}.side-nav__content--hidden{display:none}.side-nav__content--open{left:0}.side-nav__content--closed{left:-100%}.side-nav__menu-title-wrapper{align-items:center;background-color:transparent;border:none;display:flex;outline:none;width:100%}.side-nav__icon-container{float:right;margin-bottom:10px}.side-nav__menu-title{align-items:center;display:flex;font-size:14px;font-weight:700;justify-content:center;line-height:20px;text-transform:uppercase}.side-nav__menu-icon{display:flex;height:25px;margin-right:10px;width:25px}.side-nav__menu-divider{margin-bottom:40px}.side-nav__accordion-icon{height:auto;width:15px}.side-nav__menu-item{margin-bottom:25px}.side-nav__close-icon{height:20px;margin-left:auto;width:20px}.side-nav__back-button-wrapper{align-items:center;display:flex;margin-bottom:25px}.side-nav__back-icon{height:20px;width:20px}.side-nav__back-button,.side-nav__sub-menu-title{font-weight:700;text-transform:uppercase}.side-nav__sub-menu-title{font-size:14px;margin-bottom:10px}.side-nav__elements{display:flex;flex-direction:column}.side-nav__element{color:#555;cursor:pointer;line-height:20px;margin-bottom:10px}.side-nav__element,.side-nav__sub-link{font-size:14px;font-weight:400;text-transform:capitalize}.side-nav__block-button{background-color:#000;color:#fff;font-weight:700;padding:10px 0;width:100%}.footer__newsletter-section{align-items:center;background-color:#000;color:#fff;display:flex;justify-content:space-between;padding:2.265rem 0}@media only screen and (max-width:879px){.footer__newsletter-section{flex-direction:column}}.footer__newsletter-wrapper{align-items:center;display:flex;justify-content:space-between;margin:0 auto;max-width:1280px;padding-left:32px;padding-right:32px;width:100%}@media only screen and (max-width:879px){.footer__newsletter-wrapper{flex-direction:column}.footer__link-container{flex-basis:50%}}.footer__newsletter-icon{height:30px;position:absolute;right:0;top:0;width:32px}.footer__newsletter-form{flex-basis:50%;max-width:250px;position:relative}@media only screen and (max-width:879px){.footer__newsletter-form{display:block;margin-top:20px;max-width:100%;width:100%}}.footer__newsletter-title{font-family:Martel Sans,sans-serif;font-size:14px;font-weight:700;letter-spacing:3px;margin-bottom:1.125rem;text-transform:uppercase}.footer__newsletter-text{font-size:14px}.footer__form-input{background-color:#000;border:none;border-bottom:1px solid #fff;color:#fff;height:30px;outline:none;width:100%}.footer__form-input::-moz-placeholder{color:#fff;font-weight:400}.footer__form-input::placeholder{color:#fff;font-weight:400}.footer__form-errors{color:#fff;margin-top:5px}.footer__main-section{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:50px;margin-top:80px}.footer__link-title{font-family:El Messiri;font-size:16px;font-weight:700;margin-bottom:20px;text-transform:uppercase}@media only screen and (max-width:879px){.footer__link-title{margin-bottom:10px}}.footer__link-child{margin-top:25px}.footer__links{display:flex;flex-direction:column}.footer__link{color:#939393;cursor:pointer;font-family:Martel Sans;font-size:14px;line-height:20px;margin-bottom:7px;text-align:left;text-decoration:none}.footer__link:hover{color:#000;text-decoration:underline}@media only screen and (max-width:879px){.footer__link{margin-bottom:10px}}.footer__link-wrapper{align-items:center;display:flex;gap:5px}.footer__link-icon{height:30px;margin-bottom:18px}.footer__text{color:#939393;font-family:Martel Sans;font-size:14px;line-height:20px;margin-bottom:15px;text-align:left;text-decoration:none}.footer__store-hours{margin-top:35px}.footer__copyrights-section{border-top:1px solid;display:flex;justify-content:space-between;padding-bottom:20px;padding-top:20px}.footer__logo{height:30px;width:135px}.footer__payment-icons{align-items:center;display:flex;gap:8px}.footer__wrapper{margin:0 auto;max-width:1280px;padding-left:32px;padding-right:32px;width:100%}@media only screen and (max-width:879px){.footer__wrapper{padding:32px 0 0 24px}}.footer__wrapper--desktop{display:block}@media only screen and (max-width:879px){.footer__wrapper--desktop{display:none}}.footer__wrapper--mobile{display:none}@media only screen and (max-width:879px){.footer__wrapper--mobile{display:block;padding-top:30px}}.footer__copyright{font-size:10px;line-height:22px}.footer__copyright--mobile{display:none}@media only screen and (max-width:879px){.footer__copyright--mobile{display:block;padding:30px 10px 30px 0;text-align:center}}.footer__section-row{display:flex;gap:50%}@media only screen and (max-width:879px){.footer__section-row{gap:unset}}@charset "UTF-8";.currency-select-container{align-items:center;display:flex;margin-right:18px;position:relative}.currency-select-container .currency-flag{margin-right:5px}.currency-select-container .currency-flag img{height:15px;-o-object-fit:cover;object-fit:cover;width:20px}.currency-select-container .currency-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:transparent;border:none;color:#000;cursor:pointer;font-family:inherit;font-size:14px;margin:0;outline:none;padding:5px 15px 5px 5px}.currency-select-container .currency-select::-ms-expand{display:none}.currency-select-container .currency-select:focus{box-shadow:none;outline:none}.currency-select-container .currency-select:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}.currency-select-container:after{color:#000;content:"▼";font-size:10px;pointer-events:none;position:absolute;right:0;top:50%;transform:translateY(-50%)}@media only screen and (max-width:879px){.currency-select-container .currency-select{appearance:menulist;-webkit-appearance:menulist;-moz-appearance:menulist;padding-right:0}.currency-select-container:after{display:none}}.currency-select-container.disabled{cursor:not-allowed;opacity:.7}.currency-select-container.disabled .currency-select{pointer-events:none}.stores-dropdown{align-items:flex-start;display:flex;font-family:Martel Sans;gap:20px;margin-left:auto;margin-right:auto;max-width:1280px;overflow-x:auto;padding:20px 15px}.stores-dropdown__image{height:200px;-o-object-fit:cover;object-fit:cover;width:100%}.stores-dropdown__store-details{flex-basis:20%}.stores-dropdown__title{font-family:El Messiri}.stores-dropdown__main-title,.stores-dropdown__title{font-size:16px;font-weight:400;letter-spacing:3px;margin-top:20px}.stores-dropdown__main-title{font-weight:700;margin-bottom:10px}.stores-dropdown__open-days{font-size:12px;font-weight:700;line-height:20px}.stores-dropdown__open-hours{font-size:12px;font-weight:400;line-height:20px}.stores-dropdown__queries-title{font-family:El Messiri;font-size:16px;font-weight:400;letter-spacing:3px}.stores-dropdown__contact-details{font-size:16px;font-weight:700}.stores-dropdown__view-more{cursor:pointer;font-size:14px;font-weight:400;margin-top:10px;text-transform:capitalize}.dropdown{display:flex;justify-content:space-between;margin-left:auto;margin-right:auto;max-width:1280px;min-height:500px;overflow-x:auto;padding:20px 0}.dropdown__errors{align-items:center;color:red;display:flex;font-size:16px;justify-content:center;min-height:300px}.dropdown__column{flex:1;padding-left:12px}.dropdown__column:nth-child(2){flex:2}.dropdown__title{font-family:El Messiri;font-size:16px;font-weight:700;letter-spacing:3px;line-height:1;margin-bottom:20px;text-transform:uppercase}.dropdown__elements{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));max-height:800px;overflow-y:auto}.dropdown__brand-elements{-moz-column-count:3;column-count:3;max-height:800px}.dropdown__brand-element{cursor:pointer;margin-bottom:10px}.dropdown__element{flex-basis:33.33%;font-family:Martel Sans;font-size:14px;font-weight:400;margin-bottom:10px;text-transform:capitalize}.cover-spinner{align-items:center;background-color:hsla(0,0%,100%,.7);display:flex;height:100%;justify-content:center;min-height:400px;position:relative;top:50%;width:100%;z-index:9999}.cover-spinner:after{animation:spin 1.5s linear infinite;border:4px dotted #000;border-radius:50%;border-top-color:transparent;content:"";display:block;height:40px;position:absolute;width:40px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}

package/build/bundle.js

@@ -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;

package/package.json

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