@bonlineza/luxity-lib 2.35.1 → 2.35.2

package/MaterialSelector.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('styled-components'), require('@bonlineza/b-lib/EllipsisLoader'), require('@bonlineza/b-lib/PageReady'), require('react-animate-height'), require('numeral'), require('stylis-rule-sheet'), require('react-dom'), require('prop-types'), require('raf'), require('react-input-autosize'), require('react-transition-group'), require('@bonlineza/b-lib/functions'), require('rc-slider'), require('react-notify-toast'), require('axios')) :
-  typeof define === 'function' && define.amd ? define(['react', 'styled-components', '@bonlineza/b-lib/EllipsisLoader', '@bonlineza/b-lib/PageReady', 'react-animate-height', 'numeral', 'stylis-rule-sheet', 'react-dom', 'prop-types', 'raf', 'react-input-autosize', 'react-transition-group', '@bonlineza/b-lib/functions', 'rc-slider', 'react-notify-toast', 'axios'], factory) :
-  (global = global || self, global.MaterialSelector = factory(global.React, global.styled, global.EllipsisLoader, global.PageReady, global.AnimateHeight, global.numeral, global['stylis-rule-sheet'], global.reactDom, global.PropTypes, global.raf, global['react-input-autosize'], global['react-transition-group'], global.function, global.rcSlider, global['react-notify-toast'], global.axios));
-}(this, (function (React, styled, EllipsisLoader, PageReady, AnimateHeight, numeral, stylisRuleSheet, reactDom, PropTypes, raf, AutosizeInput, reactTransitionGroup, functions, rcSlider, Notifications, axios) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('styled-components'), require('@bonlineza/b-lib/EllipsisLoader'), require('@bonlineza/b-lib/PageReady'), require('react-animate-height'), require('numeral'), require('stylis-rule-sheet'), require('react-dom'), require('prop-types'), require('raf'), require('react-input-autosize'), require('react-transition-group'), require('@bonlineza/b-lib/functions'), require('rc-slider'), require('react-notify-toast'), require('helpers/axios'), require('axios')) :
+  typeof define === 'function' && define.amd ? define(['react', 'styled-components', '@bonlineza/b-lib/EllipsisLoader', '@bonlineza/b-lib/PageReady', 'react-animate-height', 'numeral', 'stylis-rule-sheet', 'react-dom', 'prop-types', 'raf', 'react-input-autosize', 'react-transition-group', '@bonlineza/b-lib/functions', 'rc-slider', 'react-notify-toast', 'helpers/axios', 'axios'], factory) :
+  (global = global || self, global.MaterialSelector = factory(global.React, global.styled, global.EllipsisLoader, global.PageReady, global.AnimateHeight, global.numeral, global['stylis-rule-sheet'], global.reactDom, global.PropTypes, global.raf, global['react-input-autosize'], global['react-transition-group'], global.function, global.rcSlider, global['react-notify-toast'], global.axiosInstance, global.axios));
+}(this, (function (React, styled, EllipsisLoader, PageReady, AnimateHeight, numeral, stylisRuleSheet, reactDom, PropTypes, raf, AutosizeInput, reactTransitionGroup, functions, rcSlider, Notifications, axiosInstance, axios) { 'use strict';
 
   var React__default = 'default' in React ? React['default'] : React;
   var styled__default = 'default' in styled ? styled['default'] : styled;
@@ -15,6 +15,7 @@
   raf = raf && Object.prototype.hasOwnProperty.call(raf, 'default') ? raf['default'] : raf;
   AutosizeInput = AutosizeInput && Object.prototype.hasOwnProperty.call(AutosizeInput, 'default') ? AutosizeInput['default'] : AutosizeInput;
   var Notifications__default = 'default' in Notifications ? Notifications['default'] : Notifications;
+  axiosInstance = axiosInstance && Object.prototype.hasOwnProperty.call(axiosInstance, 'default') ? axiosInstance['default'] : axiosInstance;
   axios = axios && Object.prototype.hasOwnProperty.call(axios, 'default') ? axios['default'] : axios;
 
   function ownKeys(object, enumerableOnly) {
@@ -43,6 +44,387 @@
     return target;
   }
 
+  function _regeneratorRuntime() {
+    /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
+
+    _regeneratorRuntime = function () {
+      return exports;
+    };
+
+    var exports = {},
+        Op = Object.prototype,
+        hasOwn = Op.hasOwnProperty,
+        $Symbol = "function" == typeof Symbol ? Symbol : {},
+        iteratorSymbol = $Symbol.iterator || "@@iterator",
+        asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator",
+        toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
+
+    function define(obj, key, value) {
+      return Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: !0,
+        configurable: !0,
+        writable: !0
+      }), obj[key];
+    }
+
+    try {
+      define({}, "");
+    } catch (err) {
+      define = function (obj, key, value) {
+        return obj[key] = value;
+      };
+    }
+
+    function wrap(innerFn, outerFn, self, tryLocsList) {
+      var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator,
+          generator = Object.create(protoGenerator.prototype),
+          context = new Context(tryLocsList || []);
+      return generator._invoke = function (innerFn, self, context) {
+        var state = "suspendedStart";
+        return function (method, arg) {
+          if ("executing" === state) throw new Error("Generator is already running");
+
+          if ("completed" === state) {
+            if ("throw" === method) throw arg;
+            return doneResult();
+          }
+
+          for (context.method = method, context.arg = arg;;) {
+            var delegate = context.delegate;
+
+            if (delegate) {
+              var delegateResult = maybeInvokeDelegate(delegate, context);
+
+              if (delegateResult) {
+                if (delegateResult === ContinueSentinel) continue;
+                return delegateResult;
+              }
+            }
+
+            if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) {
+              if ("suspendedStart" === state) throw state = "completed", context.arg;
+              context.dispatchException(context.arg);
+            } else "return" === context.method && context.abrupt("return", context.arg);
+            state = "executing";
+            var record = tryCatch(innerFn, self, context);
+
+            if ("normal" === record.type) {
+              if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue;
+              return {
+                value: record.arg,
+                done: context.done
+              };
+            }
+
+            "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg);
+          }
+        };
+      }(innerFn, self, context), generator;
+    }
+
+    function tryCatch(fn, obj, arg) {
+      try {
+        return {
+          type: "normal",
+          arg: fn.call(obj, arg)
+        };
+      } catch (err) {
+        return {
+          type: "throw",
+          arg: err
+        };
+      }
+    }
+
+    exports.wrap = wrap;
+    var ContinueSentinel = {};
+
+    function Generator() {}
+
+    function GeneratorFunction() {}
+
+    function GeneratorFunctionPrototype() {}
+
+    var IteratorPrototype = {};
+    define(IteratorPrototype, iteratorSymbol, function () {
+      return this;
+    });
+    var getProto = Object.getPrototypeOf,
+        NativeIteratorPrototype = getProto && getProto(getProto(values([])));
+    NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype);
+    var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype);
+
+    function defineIteratorMethods(prototype) {
+      ["next", "throw", "return"].forEach(function (method) {
+        define(prototype, method, function (arg) {
+          return this._invoke(method, arg);
+        });
+      });
+    }
+
+    function AsyncIterator(generator, PromiseImpl) {
+      function invoke(method, arg, resolve, reject) {
+        var record = tryCatch(generator[method], generator, arg);
+
+        if ("throw" !== record.type) {
+          var result = record.arg,
+              value = result.value;
+          return value && "object" == typeof value && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) {
+            invoke("next", value, resolve, reject);
+          }, function (err) {
+            invoke("throw", err, resolve, reject);
+          }) : PromiseImpl.resolve(value).then(function (unwrapped) {
+            result.value = unwrapped, resolve(result);
+          }, function (error) {
+            return invoke("throw", error, resolve, reject);
+          });
+        }
+
+        reject(record.arg);
+      }
+
+      var previousPromise;
+
+      this._invoke = function (method, arg) {
+        function callInvokeWithMethodAndArg() {
+          return new PromiseImpl(function (resolve, reject) {
+            invoke(method, arg, resolve, reject);
+          });
+        }
+
+        return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
+      };
+    }
+
+    function maybeInvokeDelegate(delegate, context) {
+      var method = delegate.iterator[context.method];
+
+      if (undefined === method) {
+        if (context.delegate = null, "throw" === context.method) {
+          if (delegate.iterator.return && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method)) return ContinueSentinel;
+          context.method = "throw", context.arg = new TypeError("The iterator does not provide a 'throw' method");
+        }
+
+        return ContinueSentinel;
+      }
+
+      var record = tryCatch(method, delegate.iterator, context.arg);
+      if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel;
+      var info = record.arg;
+      return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel);
+    }
+
+    function pushTryEntry(locs) {
+      var entry = {
+        tryLoc: locs[0]
+      };
+      1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry);
+    }
+
+    function resetTryEntry(entry) {
+      var record = entry.completion || {};
+      record.type = "normal", delete record.arg, entry.completion = record;
+    }
+
+    function Context(tryLocsList) {
+      this.tryEntries = [{
+        tryLoc: "root"
+      }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0);
+    }
+
+    function values(iterable) {
+      if (iterable) {
+        var iteratorMethod = iterable[iteratorSymbol];
+        if (iteratorMethod) return iteratorMethod.call(iterable);
+        if ("function" == typeof iterable.next) return iterable;
+
+        if (!isNaN(iterable.length)) {
+          var i = -1,
+              next = function next() {
+            for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next;
+
+            return next.value = undefined, next.done = !0, next;
+          };
+
+          return next.next = next;
+        }
+      }
+
+      return {
+        next: doneResult
+      };
+    }
+
+    function doneResult() {
+      return {
+        value: undefined,
+        done: !0
+      };
+    }
+
+    return GeneratorFunction.prototype = GeneratorFunctionPrototype, define(Gp, "constructor", GeneratorFunctionPrototype), define(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) {
+      var ctor = "function" == typeof genFun && genFun.constructor;
+      return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name));
+    }, exports.mark = function (genFun) {
+      return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun;
+    }, exports.awrap = function (arg) {
+      return {
+        __await: arg
+      };
+    }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () {
+      return this;
+    }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) {
+      void 0 === PromiseImpl && (PromiseImpl = Promise);
+      var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl);
+      return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) {
+        return result.done ? result.value : iter.next();
+      });
+    }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () {
+      return this;
+    }), define(Gp, "toString", function () {
+      return "[object Generator]";
+    }), exports.keys = function (object) {
+      var keys = [];
+
+      for (var key in object) keys.push(key);
+
+      return keys.reverse(), function next() {
+        for (; keys.length;) {
+          var key = keys.pop();
+          if (key in object) return next.value = key, next.done = !1, next;
+        }
+
+        return next.done = !0, next;
+      };
+    }, exports.values = values, Context.prototype = {
+      constructor: Context,
+      reset: function (skipTempReset) {
+        if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined);
+      },
+      stop: function () {
+        this.done = !0;
+        var rootRecord = this.tryEntries[0].completion;
+        if ("throw" === rootRecord.type) throw rootRecord.arg;
+        return this.rval;
+      },
+      dispatchException: function (exception) {
+        if (this.done) throw exception;
+        var context = this;
+
+        function handle(loc, caught) {
+          return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught;
+        }
+
+        for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+          var entry = this.tryEntries[i],
+              record = entry.completion;
+          if ("root" === entry.tryLoc) return handle("end");
+
+          if (entry.tryLoc <= this.prev) {
+            var hasCatch = hasOwn.call(entry, "catchLoc"),
+                hasFinally = hasOwn.call(entry, "finallyLoc");
+
+            if (hasCatch && hasFinally) {
+              if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0);
+              if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc);
+            } else if (hasCatch) {
+              if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0);
+            } else {
+              if (!hasFinally) throw new Error("try statement without catch or finally");
+              if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc);
+            }
+          }
+        }
+      },
+      abrupt: function (type, arg) {
+        for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+          var entry = this.tryEntries[i];
+
+          if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) {
+            var finallyEntry = entry;
+            break;
+          }
+        }
+
+        finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null);
+        var record = finallyEntry ? finallyEntry.completion : {};
+        return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record);
+      },
+      complete: function (record, afterLoc) {
+        if ("throw" === record.type) throw record.arg;
+        return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel;
+      },
+      finish: function (finallyLoc) {
+        for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+          var entry = this.tryEntries[i];
+          if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel;
+        }
+      },
+      catch: function (tryLoc) {
+        for (var i = this.tryEntries.length - 1; i >= 0; --i) {
+          var entry = this.tryEntries[i];
+
+          if (entry.tryLoc === tryLoc) {
+            var record = entry.completion;
+
+            if ("throw" === record.type) {
+              var thrown = record.arg;
+              resetTryEntry(entry);
+            }
+
+            return thrown;
+          }
+        }
+
+        throw new Error("illegal catch attempt");
+      },
+      delegateYield: function (iterable, resultName, nextLoc) {
+        return this.delegate = {
+          iterator: values(iterable),
+          resultName: resultName,
+          nextLoc: nextLoc
+        }, "next" === this.method && (this.arg = undefined), ContinueSentinel;
+      }
+    }, exports;
+  }
+
+  function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+      var info = gen[key](arg);
+      var value = info.value;
+    } catch (error) {
+      reject(error);
+      return;
+    }
+
+    if (info.done) {
+      resolve(value);
+    } else {
+      Promise.resolve(value).then(_next, _throw);
+    }
+  }
+
+  function _asyncToGenerator(fn) {
+    return function () {
+      var self = this,
+          args = arguments;
+      return new Promise(function (resolve, reject) {
+        var gen = fn.apply(self, args);
+
+        function _next(value) {
+          asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+        }
+
+        function _throw(err) {
+          asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+        }
+
+        _next(undefined);
+      });
+    };
+  }
+
   function _classCallCheck(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
       throw new TypeError("Cannot call a class as a function");
@@ -10232,25 +10614,39 @@
   };
   var GenderSelector$1 = themed(GenderSelector);
 
-  var Add = (function (props) {
-    return /*#__PURE__*/React__default.createElement("svg", _extends({
-      width: "23",
-      height: "23",
-      viewBox: "0 0 23 23",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, props), /*#__PURE__*/React__default.createElement("path", {
-      d: "M0 11.5H23",
-      stroke: "#000000",
-      strokeWidth: "1.8"
-    }), /*#__PURE__*/React__default.createElement("path", {
-      d: "M11.5 0L11.5 23",
-      stroke: "#000000",
-      strokeWidth: "1.8"
-    }));
-  });
+  var ConditionSelector = function ConditionSelector(_ref) {
+    var onChange = _ref.onChange,
+        graphApi = _ref.graphApi,
+        itemRenderer = _ref.itemRenderer,
+        getGraphQuery = _ref.getGraphQuery,
+        requestInstance = _ref.requestInstance;
+
+    var resultProcessor = function resultProcessor(result) {
+      return result.data.data.conditions_list;
+    };
+
+    return /*#__PURE__*/React__default.createElement(LuxityGraphQLMultiselector, {
+      title: "Condition",
+      queryId: "getCondition",
+      baseQueryLimit: 10,
+      baseClass: "style-selector",
+      identifier: "style-selector",
+      searchPlaceHolder: "Search Condition",
+      category: "",
+      onChange: onChange,
+      graphApi: graphApi,
+      itemRenderer: itemRenderer,
+      getGraphQuery: getGraphQuery,
+      resultProcessor: resultProcessor,
+      requestInstance: requestInstance
+    });
+  };
+
+  ConditionSelector.defaultProps = {
+    itemRenderer: ItemRenderer
+  };
 
-  var _templateObject$L, _templateObject2$9, _templateObject3$4, _templateObject4$3, _templateObject5$1;
+  var _templateObject$L, _templateObject2$9, _templateObject3$4;
   var UNISEX$1 = genders.UNISEX;
   var AddInterestContainer = styled__default.div(_templateObject$L || (_templateObject$L = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  border: 1px solid ", ";\n  padding: ", ";\n"])), function (props) {
     return props.theme.marginPaddings[6];
@@ -10271,26 +10667,6 @@
   }, function (props) {
     return props.theme.marginPaddings[2];
   });
-  var AddInterestButton = styled__default.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  color: ", ";\n  border: 1px solid ", ";\n  padding-top: ", ";\n  margin-bottom: ", ";\n  padding-left: 1.5rem;\n  width: 95%;\n  font-size: 17px;\n"])), function (props) {
-    return props.theme.colors.darkerGray;
-  }, function (props) {
-    return props.theme.colors.borderColor;
-  }, function (props) {
-    return props.theme.marginPaddings[0];
-  }, function (props) {
-    return props.theme.marginPaddings[2];
-  });
-  var AddInterestButtonContainer = styled__default.div(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral(["\n  display: flex;\n\n  #add-icon {\n    margin-bottom: 1.5rem;\n\n    svg {\n      width: 15px;\n    }\n  }\n"])));
-
-  var AddIcon = function AddIcon(_ref) {
-    var onClick = _ref.onClick,
-        id = _ref.id;
-    return /*#__PURE__*/React__default.createElement(IconWrapper, {
-      id: id,
-      onClick: onClick
-    }, /*#__PURE__*/React__default.createElement(SvgWrapper, null, /*#__PURE__*/React__default.createElement(Add, null)));
-  };
-
   var defaultState = {
     category_type: null,
     brands: [],
@@ -10300,6 +10676,7 @@
     max_price: null,
     styles: [],
     gender: [],
+    condition: [],
     request: _objectSpread2({}, request),
     isCategoriesShown: false
   };
@@ -10376,6 +10753,14 @@
         });
       });
 
+      _defineProperty(_assertThisInitialized(_this), "onConditionChanged", function (conditions) {
+        _this.setState({
+          condition: conditions.map(function (condition) {
+            return condition.id;
+          })
+        });
+      });
+
       _defineProperty(_assertThisInitialized(_this), "payloadIsValid", function () {
         // price/shoe-size always have initial values as soon as category is set
         var category_type = _this.state.category_type;
@@ -10399,7 +10784,8 @@
             styles = _this$state.styles,
             category_type = _this$state.category_type,
             requestState = _this$state.request,
-            gender = _this$state.gender;
+            gender = _this$state.gender,
+            condition = _this$state.condition;
         var payloadGender = gender[0];
 
         if (gender.length > 1 || !gender.length) {
@@ -10412,6 +10798,7 @@
           min_price: min_price,
           max_price: max_price,
           styles: styles,
+          condition: condition,
           gender: payloadGender,
           request: requestState
         };
@@ -10434,8 +10821,8 @@
         }, _this.handleRequestError);
       });
 
-      _defineProperty(_assertThisInitialized(_this), "handleRequestError", function (_ref2) {
-        var data = _ref2.data;
+      _defineProperty(_assertThisInitialized(_this), "handleRequestError", function (_ref) {
+        var data = _ref.data;
 
         _this.setState({
           request: _objectSpread2({}, request)
@@ -10453,6 +10840,8 @@
 
       _defineProperty(_assertThisInitialized(_this), "resetState", function () {
         _this.setState(_objectSpread2({}, defaultState));
+
+        _this.props.onCancel();
       });
 
       _defineProperty(_assertThisInitialized(_this), "handleGenderChange", function (isChecked, gender) {
@@ -10477,12 +10866,11 @@
             getBrandsGraphQuery = _this$props.getBrandsGraphQuery,
             getStylesGraphQuery = _this$props.getStylesGraphQuery,
             getShoesGraphQuery = _this$props.getShoesGraphQuery,
-            defaultShoeSizeType = _this$props.defaultShoeSizeType;
-        return /*#__PURE__*/React__default.createElement(React.Fragment, null, !_this.state.isCategoriesShown && /*#__PURE__*/React__default.createElement(AddInterestButtonContainer, {
-          onClick: _this.onAddInterestClick
-        }, /*#__PURE__*/React__default.createElement(AddInterestButton, null, "Add Interest"), /*#__PURE__*/React__default.createElement(AddIcon, {
-          id: "add-icon"
-        })), _this.state.isCategoriesShown && /*#__PURE__*/React__default.createElement(AddInterestContainer, null, /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(CatSelectorParagraph, null, "Select the catergory that interests you"), /*#__PURE__*/React__default.createElement(CategoryInterestSelector, {
+            defaultShoeSizeType = _this$props.defaultShoeSizeType,
+            getConditionsGraphQuery = _this$props.getConditionsGraphQuery;
+        return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+          className: "interests__section-wrapper"
+        }, /*#__PURE__*/React__default.createElement(AddInterestContainer, null, /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(CatSelectorParagraph, null, "Select the category that interests you"), /*#__PURE__*/React__default.createElement(CategoryInterestSelector, {
           category: category_type,
           onCategoryChange: _this.onCategoryChanged
         }), category_type ? /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(GenderSelector$1, {
@@ -10508,6 +10896,11 @@
           requestInstance: requestInstance,
           graphApi: "".concat(baseGraphApi, "?id=getStyles"),
           getGraphQuery: getStylesGraphQuery
+        }), /*#__PURE__*/React__default.createElement(ConditionSelector, {
+          onChange: _this.onConditionChanged,
+          requestInstance: requestInstance,
+          graphApi: "".concat(baseGraphApi, "?id=getCondition"),
+          getGraphQuery: getConditionsGraphQuery
         })) : null, /*#__PURE__*/React__default.createElement(SaveAndCancelButtonContainer, null, /*#__PURE__*/React__default.createElement("div", {
           className: "fl-right"
         }, /*#__PURE__*/React__default.createElement("div", {
@@ -10528,7 +10921,7 @@
 
             _this.resetState();
           }
-        }, fetching ? 'SAVING' : 'SAVE')))))));
+        }, fetching ? 'SAVING' : 'SAVE'))))))));
       });
 
       _this.state = _objectSpread2({}, defaultState);
@@ -10550,7 +10943,9 @@
   }, media.xs);
 
   var MyInterestTitleHeading = function MyInterestTitleHeading() {
-    return /*#__PURE__*/React__default.createElement(MyInterestTitleHeadingContainer, null, /*#__PURE__*/React__default.createElement("div", {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+      className: "interests__title"
+    }, "Category Interests"), /*#__PURE__*/React__default.createElement(MyInterestTitleHeadingContainer, null, /*#__PURE__*/React__default.createElement("div", {
       className: "heading-title-section"
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "heading-title"
@@ -10566,18 +10961,650 @@
       className: "heading-title"
     }, "Shoe Size")), /*#__PURE__*/React__default.createElement("div", {
       className: "heading-title-empty"
-    }));
+    })));
   };
 
   var MyInterestTitleHeading$1 = themed(MyInterestTitleHeading);
 
   var _templateObject$N;
-  var SvgWrapper$2 = styled__default.span(_templateObject$N || (_templateObject$N = _taggedTemplateLiteral(["\n  svg {\n    path {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
+  var MyInterestTitleHeadingContainer$1 = styled__default.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n\n  .heading-title-section {\n    display: flex;\n    justify-content: space-between;\n    width: 95%;\n  }\n\n  .heading-title {\n    color: ", ";\n    font-weight: bold;\n    flex-basis: calc(100% / 6);\n    margin-left: ", ";\n    padding-bottom: 0;\n  }\n\n  .heading-title-empty {\n    flex-basis: 5%;\n    margin-left: 1rem;\n  }\n\n  @media (max-width: ", ") {\n    display: none;\n  }\n"])), function (props) {
     return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.marginPaddings[1];
+  }, media.xs);
+
+  var MyProductInterestTitleHeading = function MyProductInterestTitleHeading() {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+      className: "interests__title"
+    }, "Product Interests"), /*#__PURE__*/React__default.createElement(MyInterestTitleHeadingContainer$1, null, /*#__PURE__*/React__default.createElement("div", {
+      className: "heading-title-section"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "heading-title"
+    }, "Brand"), /*#__PURE__*/React__default.createElement("div", {
+      className: "heading-title"
+    }, "Model"), /*#__PURE__*/React__default.createElement("div", {
+      className: "heading-title"
+    }, "Material")), /*#__PURE__*/React__default.createElement("div", {
+      className: "heading-title-empty"
+    })));
+  };
+
+  var MyProductInterestTitleHeading$1 = themed(MyProductInterestTitleHeading);
+
+  var Add = (function (props) {
+    return /*#__PURE__*/React__default.createElement("svg", _extends({
+      width: "23",
+      height: "23",
+      viewBox: "0 0 23 23",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), /*#__PURE__*/React__default.createElement("path", {
+      d: "M0 11.5H23",
+      stroke: "#000000",
+      strokeWidth: "1.8"
+    }), /*#__PURE__*/React__default.createElement("path", {
+      d: "M11.5 0L11.5 23",
+      stroke: "#000000",
+      strokeWidth: "1.8"
+    }));
+  });
+
+  var _excluded$8 = ["children"];
+
+  var DropdownSelector = function DropdownSelector(_ref) {
+    var selectedOption = _ref.selectedOption,
+        onOptionChange = _ref.onOptionChange,
+        options = _ref.options,
+        isSearchable = _ref.isSearchable,
+        placeholder = _ref.placeholder,
+        name = _ref.name,
+        showSearchIcon = _ref.showSearchIcon,
+        isDisabled = _ref.isDisabled;
+    var customComponents = {
+      DropdownIndicator: function DropdownIndicator() {
+        return null;
+      },
+      ValueContainer: function ValueContainer(_ref2) {
+        var children = _ref2.children,
+            props = _objectWithoutProperties(_ref2, _excluded$8);
+
+        return /*#__PURE__*/React__default.createElement("div", _extends({
+          style: {
+            position: 'relative'
+          }
+        }, props), showSearchIcon && /*#__PURE__*/React__default.createElement("div", {
+          style: {
+            position: 'absolute',
+            left: '12px',
+            top: '50%',
+            transform: 'translateY(-50%)',
+            pointerEvents: 'none'
+          }
+        }, /*#__PURE__*/React__default.createElement(Search, null)), /*#__PURE__*/React__default.createElement("div", {
+          style: {
+            marginLeft: showSearchIcon ? '32px' : '12px'
+          }
+        }, children));
+      }
+    };
+    var customStyles = {
+      control: function control(provided) {
+        return _objectSpread2(_objectSpread2({}, provided), {}, {
+          minWidth: '200px',
+          width: '100%',
+          boxShadow: 'none',
+          border: '1px solid #ccc'
+        });
+      },
+      valueContainer: function valueContainer(provided) {
+        return _objectSpread2(_objectSpread2({}, provided), {}, {
+          padding: '8px 12px'
+        });
+      },
+      dropdownIndicator: function dropdownIndicator() {
+        return {
+          display: 'none'
+        };
+      },
+      placeholder: function placeholder(provided) {
+        return _objectSpread2(_objectSpread2({}, provided), {}, {
+          fontWeight: 'bold',
+          fontSize: '14px',
+          paddingTop: '4px',
+          color: '#999',
+          minWidth: '200px'
+        });
+      },
+      input: function input(provided) {
+        return _objectSpread2(_objectSpread2({}, provided), {}, {
+          margin: '0',
+          padding: '0',
+          fontWeight: 'bold',
+          fontSize: '14px',
+          minWidth: '200px',
+          maxWidth: '100%'
+        });
+      },
+      singleValue: function singleValue(provided) {
+        return _objectSpread2(_objectSpread2({}, provided), {}, {
+          fontWeight: 'bold',
+          fontSize: '14px',
+          whiteSpace: 'normal',
+          overflow: 'visible',
+          textOverflow: 'unset',
+          maxWidth: 'none'
+        });
+      },
+      indicatorSeparator: function indicatorSeparator() {
+        return {
+          display: 'none'
+        };
+      },
+      menu: function menu(provided) {
+        return _objectSpread2(_objectSpread2({}, provided), {}, {
+          zIndex: 9999,
+          backgroundColor: 'white'
+        });
+      },
+      menuList: function menuList(provided) {
+        return _objectSpread2(_objectSpread2({}, provided), {}, {
+          padding: '0',
+          '::-webkit-scrollbar': {
+            width: '8px'
+          },
+          '::-webkit-scrollbar-track': {
+            background: '#f1f1f1'
+          },
+          '::-webkit-scrollbar-thumb': {
+            background: '#888',
+            borderRadius: '4px'
+          },
+          '::-webkit-scrollbar-thumb:hover': {
+            background: '#555'
+          }
+        });
+      },
+      option: function option(provided, state) {
+        return _objectSpread2(_objectSpread2({}, provided), {}, {
+          color: state.isFocused ? 'white' : 'black',
+          backgroundColor: state.isFocused || state.isSelected ? 'black' : 'white',
+          cursor: 'pointer',
+          padding: '8px 12px',
+          '&:active': {
+            backgroundColor: 'black'
+          }
+        }, state.isSelected && {
+          backgroundColor: 'black',
+          color: 'white'
+        });
+      }
+    };
+    return /*#__PURE__*/React__default.createElement("div", {
+      style: {
+        width: '100%'
+      }
+    }, /*#__PURE__*/React__default.createElement(index$1, {
+      value: selectedOption,
+      onChange: onOptionChange,
+      options: options,
+      isSearchable: isSearchable,
+      name: name,
+      placeholder: placeholder,
+      components: customComponents,
+      styles: customStyles,
+      isDisabled: isDisabled
+    }));
+  };
+
+  DropdownSelector.defaultProps = {
+    isSearchable: false,
+    selectedOption: null,
+    name: '',
+    placeholder: '',
+    showSearchIcon: true,
+    isDisabled: false
+  };
+
+  var _templateObject$O, _templateObject2$a;
+  var AddInterestContainer$1 = styled__default.div(_templateObject$O || (_templateObject$O = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  border: 1px solid ", ";\n  padding: ", ";\n"])), function (props) {
+    return props.theme.marginPaddings[6];
+  }, function (props) {
+    return props.theme.colors.borderColor;
+  }, function (props) {
+    return props.theme.marginPaddings[6];
+  });
+  var SaveAndCancelButtonContainer$1 = styled__default.div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral(["\n  margin-top: ", ";\n\n  @media (max-width: ", ") {\n    .fl-right__item {\n      flex-direction: column;\n      margin-right: 0;\n      margin-left: ", ";\n    }\n\n    button {\n      margin-bottom: ", ";\n    }\n  }\n"])), function (props) {
+    return props.theme.marginPaddings[6];
+  }, media.xs, function (props) {
+    return props.theme.marginPaddings[0];
+  }, function (props) {
+    return props.theme.marginPaddings[1];
+  });
+
+  var AddProductInterest = function AddProductInterest(_ref) {
+    var baseGraphApi = _ref.baseGraphApi,
+        getBrandsGraphQuery = _ref.getBrandsGraphQuery,
+        getModelsGraphQuery = _ref.getModelsGraphQuery,
+        getMaterialsGraphQuery = _ref.getMaterialsGraphQuery,
+        onCancel = _ref.onCancel,
+        requestInstance = _ref.requestInstance,
+        addLuxityProductInterestApi = _ref.addLuxityProductInterestApi,
+        onSubmitSuccess = _ref.onSubmitSuccess;
+
+    var _useState = React.useState([]),
+        _useState2 = _slicedToArray(_useState, 2),
+        brands = _useState2[0],
+        setBrands = _useState2[1];
+
+    var _useState3 = React.useState([]),
+        _useState4 = _slicedToArray(_useState3, 2),
+        models = _useState4[0],
+        setModels = _useState4[1];
+
+    var _useState5 = React.useState([]),
+        _useState6 = _slicedToArray(_useState5, 2),
+        materials = _useState6[0],
+        setMaterials = _useState6[1];
+
+    var _useState7 = React.useState(null),
+        _useState8 = _slicedToArray(_useState7, 2),
+        selectedBrand = _useState8[0],
+        setSelectedBrand = _useState8[1];
+
+    var _useState9 = React.useState(null),
+        _useState10 = _slicedToArray(_useState9, 2),
+        selectedModel = _useState10[0],
+        setSelectedModel = _useState10[1];
+
+    var _useState11 = React.useState(null),
+        _useState12 = _slicedToArray(_useState11, 2),
+        selectedMaterial = _useState12[0],
+        setSelectedMaterial = _useState12[1];
+
+    var fetchBrands = React.useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      var _response$data, _response$data$data, _response$data$data$l, response, formattedBrands;
+
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 3;
+              return axiosInstance.post("".concat(baseGraphApi, "?id=getBrands"), {
+                query: getBrandsGraphQuery(1000, 1, 'id|desc')
+              });
+
+            case 3:
+              response = _context.sent;
+
+              if (response !== null && response !== void 0 && (_response$data = response.data) !== null && _response$data !== void 0 && (_response$data$data = _response$data.data) !== null && _response$data$data !== void 0 && (_response$data$data$l = _response$data$data.luxity_brands) !== null && _response$data$data$l !== void 0 && _response$data$data$l.data) {
+                formattedBrands = response.data.data.luxity_brands.data.map(function (brand) {
+                  return {
+                    value: brand.id,
+                    label: brand.name
+                  };
+                });
+                setBrands(formattedBrands);
+              }
+
+              _context.next = 10;
+              break;
+
+            case 7:
+              _context.prev = 7;
+              _context.t0 = _context["catch"](0);
+              error(_context.t0.message);
+
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 7]]);
+    })), [baseGraphApi, getBrandsGraphQuery]);
+    var fetchModels = React.useCallback( /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(brandId) {
+        var _response$data2, _response$data2$data, _response$data2$data$, response, formattedModels;
+
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.prev = 0;
+                _context2.next = 3;
+                return axiosInstance.post("".concat(baseGraphApi, "?id=getModels"), {
+                  query: getModelsGraphQuery(brandId)
+                });
+
+              case 3:
+                response = _context2.sent;
+
+                if (response !== null && response !== void 0 && (_response$data2 = response.data) !== null && _response$data2 !== void 0 && (_response$data2$data = _response$data2.data) !== null && _response$data2$data !== void 0 && (_response$data2$data$ = _response$data2$data.luxity_models) !== null && _response$data2$data$ !== void 0 && _response$data2$data$.data) {
+                  formattedModels = response.data.data.luxity_models.data.map(function (model) {
+                    return {
+                      value: model.id,
+                      label: model.name
+                    };
+                  });
+                  setModels(formattedModels);
+                }
+
+                _context2.next = 10;
+                break;
+
+              case 7:
+                _context2.prev = 7;
+                _context2.t0 = _context2["catch"](0);
+                error(_context2.t0.message);
+
+              case 10:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, null, [[0, 7]]);
+      }));
+
+      return function (_x) {
+        return _ref3.apply(this, arguments);
+      };
+    }(), [baseGraphApi, getModelsGraphQuery]);
+    var fetchMaterials = React.useCallback( /*#__PURE__*/function () {
+      var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(brandId) {
+        var _response$data3, _response$data3$data, _response$data3$data$, response, formattedMaterials;
+
+        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                _context3.prev = 0;
+                _context3.next = 3;
+                return axiosInstance.post("".concat(baseGraphApi, "?id=getMaterials"), {
+                  query: getMaterialsGraphQuery(brandId)
+                });
+
+              case 3:
+                response = _context3.sent;
+
+                if (response !== null && response !== void 0 && (_response$data3 = response.data) !== null && _response$data3 !== void 0 && (_response$data3$data = _response$data3.data) !== null && _response$data3$data !== void 0 && (_response$data3$data$ = _response$data3$data.luxity_materials) !== null && _response$data3$data$ !== void 0 && _response$data3$data$.data) {
+                  formattedMaterials = response.data.data.luxity_materials.data.map(function (material) {
+                    return {
+                      value: material.id,
+                      label: material.name
+                    };
+                  });
+                  setMaterials(formattedMaterials);
+                }
+
+                _context3.next = 10;
+                break;
+
+              case 7:
+                _context3.prev = 7;
+                _context3.t0 = _context3["catch"](0);
+                error(_context3.t0.message);
+
+              case 10:
+              case "end":
+                return _context3.stop();
+            }
+          }
+        }, _callee3, null, [[0, 7]]);
+      }));
+
+      return function (_x2) {
+        return _ref4.apply(this, arguments);
+      };
+    }(), [baseGraphApi, getMaterialsGraphQuery]);
+    React.useEffect(function () {
+      fetchBrands();
+    }, [fetchBrands]);
+    React.useEffect(function () {
+      if (selectedBrand) {
+        setSelectedModel(null);
+        setSelectedMaterial(null);
+        fetchModels(selectedBrand.value);
+        fetchMaterials(selectedBrand.value);
+      } else {
+        setModels([]);
+        setMaterials([]);
+        setSelectedModel(null);
+        setSelectedMaterial(null);
+      }
+    }, [selectedBrand, fetchModels, fetchMaterials]);
+
+    var onBrandChange = function onBrandChange(selectedOption) {
+      setSelectedBrand(selectedOption);
+    };
+
+    var onModelChange = function onModelChange(selectedOption) {
+      setSelectedModel(selectedOption);
+    };
+
+    var onMaterialChange = function onMaterialChange(selectedOption) {
+      setSelectedMaterial(selectedOption);
+    };
+
+    var submitInterest = function submitInterest() {
+      var payload = {
+        luxity_brand_id: selectedBrand === null || selectedBrand === void 0 ? void 0 : selectedBrand.value,
+        luxity_model_id: selectedModel === null || selectedModel === void 0 ? void 0 : selectedModel.value,
+        luxity_material_id: selectedMaterial === null || selectedMaterial === void 0 ? void 0 : selectedMaterial.value
+      };
+      simpleRequest(requestInstance, addLuxityProductInterestApi, method.POST, payload, function () {
+        onSubmitSuccess(_objectSpread2({}, payload));
+        onCancel();
+      }, handleRequestError);
+    };
+
+    var handleRequestError = function handleRequestError(_ref5) {
+      var data = _ref5.data;
+      var errorMessages = Object.keys(data).map(function (key) {
+        return data[key];
+      }).flat();
+      error(errorMessages.map(function (message, key) {
+        return /*#__PURE__*/React__default.createElement("div", {
+          key: "error-".concat(key)
+        }, message);
+      }));
+    };
+
+    var onReset = function onReset() {
+      onCancel();
+      setSelectedModel(null);
+      setSelectedMaterial(null);
+      setSelectedBrand(null);
+      setBrands([]);
+      setMaterials([]);
+      setModels([]);
+    };
+
+    return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+      className: "interests__section-wrapper"
+    }, /*#__PURE__*/React__default.createElement(AddInterestContainer$1, null, /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+      className: "interests__select-option"
+    }, /*#__PURE__*/React__default.createElement(DropdownSelector, {
+      name: "brand",
+      selectedOption: selectedBrand,
+      options: brands,
+      isSearchable: true,
+      onOptionChange: onBrandChange,
+      placeholder: "Select Brand"
+    })), /*#__PURE__*/React__default.createElement("div", {
+      className: "interests__select-option"
+    }, /*#__PURE__*/React__default.createElement(DropdownSelector, {
+      name: "model",
+      selectedOption: selectedModel,
+      options: models,
+      isSearchable: true,
+      onOptionChange: onModelChange,
+      placeholder: "Select Model",
+      isDisabled: !selectedBrand && !models.length
+    })), /*#__PURE__*/React__default.createElement("div", {
+      className: "interests__select-option"
+    }, /*#__PURE__*/React__default.createElement(DropdownSelector, {
+      name: "material",
+      selectedOption: selectedMaterial,
+      options: materials,
+      isSearchable: true,
+      onOptionChange: onMaterialChange,
+      placeholder: "Select Material",
+      isDisabled: !selectedBrand && !materials.length
+    }))), /*#__PURE__*/React__default.createElement(SaveAndCancelButtonContainer$1, null, /*#__PURE__*/React__default.createElement("div", {
+      className: "fl-right"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "fl-right__item"
+    }, /*#__PURE__*/React__default.createElement(SecondaryButton$1, {
+      type: "button",
+      onClick: onReset
+    }, "CANCEL")), /*#__PURE__*/React__default.createElement("div", {
+      className: "fl-right__item"
+    }, /*#__PURE__*/React__default.createElement(PrimaryButton$1, {
+      "data-qe-id": "add-interest-btn",
+      disabled: !selectedBrand,
+      type: "button",
+      onClick: submitInterest
+    }, "SAVE"))))))));
+  };
+
+  var AddProductInterest$1 = themed(AddProductInterest);
+
+  var _templateObject$P, _templateObject2$b, _templateObject3$5;
+
+  var TrashIcon$1 = function TrashIcon(_ref) {
+    var onClick = _ref.onClick,
+        id = _ref.id;
+    return /*#__PURE__*/React__default.createElement(IconWrapper, {
+      onClick: onClick,
+      id: id
+    }, /*#__PURE__*/React__default.createElement(SvgWrapper, null, /*#__PURE__*/React__default.createElement(Trash, null)));
+  };
+
+  var LuxityProductInterestItem = /*#__PURE__*/function (_React$Component) {
+    _inherits(LuxityProductInterestItem, _React$Component);
+
+    var _super = _createSuper(LuxityProductInterestItem);
+
+    function LuxityProductInterestItem(props) {
+      var _this;
+
+      _classCallCheck(this, LuxityProductInterestItem);
+
+      _this = _super.call(this, props);
+
+      _defineProperty(_assertThisInitialized(_this), "deleteInterestItem", function () {
+        var id = _this.props.data.id;
+
+        _this.setState({
+          delete: _objectSpread2(_objectSpread2({}, request), {}, {
+            fetching: true
+          })
+        });
+
+        var url = _this.props.deleteInterestApi(id);
+
+        simpleRequest(_this.props.requestInstance, url, method.DELETE, null, function () {
+          _this.setState({
+            delete: _objectSpread2(_objectSpread2({}, request), {}, {
+              success: true
+            })
+          });
+
+          _this.props.onDeleted(_this.props.data);
+        }, function () {
+          return _this.setState({
+            delete: _objectSpread2({}, request)
+          });
+        });
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "render", function () {
+        var _data$luxity_model, _data$luxity_material;
+
+        var data = _this.props.data;
+        var success = _this.state.delete.success;
+        return /*#__PURE__*/React__default.createElement(InterestItemContainer$1, {
+          id: "interests__item--".concat(data.id),
+          className: "".concat(success && 'interests__item--hiding')
+        }, /*#__PURE__*/React__default.createElement(InterestItemContent$1, {
+          className: "interest-item__container ".concat(_this.props.className || '')
+        }, /*#__PURE__*/React__default.createElement("div", {
+          className: "interest-item__container_heading"
+        }, /*#__PURE__*/React__default.createElement(InterestItemTitle$1, null, "Brand:"), /*#__PURE__*/React__default.createElement("div", {
+          id: "interest-item-".concat(data.id, "__category"),
+          className: "list-items"
+        }, data.luxity_brand.name)), /*#__PURE__*/React__default.createElement("div", {
+          className: "interest-item__container_heading"
+        }, /*#__PURE__*/React__default.createElement(InterestItemTitle$1, null, "Model:"), /*#__PURE__*/React__default.createElement("div", {
+          className: "list-items"
+        }, data === null || data === void 0 ? void 0 : (_data$luxity_model = data.luxity_model) === null || _data$luxity_model === void 0 ? void 0 : _data$luxity_model.name)), /*#__PURE__*/React__default.createElement("div", {
+          className: "interest-item__container_heading"
+        }, /*#__PURE__*/React__default.createElement(InterestItemTitle$1, null, "Material:"), /*#__PURE__*/React__default.createElement("div", {
+          className: "list-items"
+        }, data === null || data === void 0 ? void 0 : (_data$luxity_material = data.luxity_material) === null || _data$luxity_material === void 0 ? void 0 : _data$luxity_material.name))), /*#__PURE__*/React__default.createElement(TrashIcon$1, {
+          id: "interest-".concat(data.id, "-delete-button"),
+          onClick: function onClick() {
+            if (!_this.state.delete.fetching) {
+              _this.deleteInterestItem();
+            }
+          }
+        }));
+      });
+
+      _this.state = {
+        delete: _objectSpread2({}, request)
+      };
+      return _this;
+    }
+
+    return _createClass(LuxityProductInterestItem);
+  }(React__default.Component);
+
+  var InterestItemTitle$1 = styled__default.div(_templateObject$P || (_templateObject$P = _taggedTemplateLiteral(["\n  font-weight: bold;\n  display: none;\n\n  @media (max-width: ", ") {\n    display: inline;\n  }\n"])), media.xs);
+  var InterestItemContainer$1 = styled__default.div(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral(["\n  display: flex;\n\n  .no-shoe-size-section {\n    @media (max-width: ", ") {\n      display: none;\n    }\n  }\n"])), media.xs);
+  var InterestItemContent$1 = styled__default.div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  width: 95%;\n  height: 100%;\n  border: 1px solid ", ";\n  padding: 1rem;\n  margin-bottom: ", ";\n\n  .interest-item__container_heading {\n    color: ", ";\n    flex-basis: calc(100% / 6);\n    margin-top: 0.3rem;\n\n    @media (max-width: ", ") {\n      display: inline;\n    }\n  }\n\n  .list-items {\n    display: inline-flex;\n    flex-direction: column;\n\n    @media (max-width: ", ") {\n      margin-left: ", ";\n    }\n  }\n\n  @media (max-width: ", ") {\n    flex-direction: column;\n  }\n"])), function (props) {
+    return props.theme.colors.borderColor;
+  }, function (props) {
+    return props.theme.marginPaddings[1];
+  }, function (props) {
+    return props.theme.colors.darkerGray;
+  }, media.xs, media.xs, function (props) {
+    return props.theme.marginPaddings[0];
+  }, media.xs);
+  var ThemedInterestItem$1 = themed(LuxityProductInterestItem);
+  /**
+   * The Interest Item view shows the selected interest configuration,
+   * and gives user control to delete it.
+   */
+
+  var LuxityProductInterestItem$1 = (function (props) {
+    return /*#__PURE__*/React__default.createElement(ThemedInterestItem$1, props);
   });
+
+  var _templateObject$Q, _templateObject2$c;
+  var AddInterestButtonContainer = styled__default.div(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n\n  #add-icon {\n    margin-bottom: 1.5rem;\n\n    svg {\n      width: 15px;\n    }\n  }\n"])));
+
+  var AddIcon = function AddIcon(_ref) {
+    var onClick = _ref.onClick,
+        id = _ref.id;
+    return /*#__PURE__*/React__default.createElement(IconWrapper, {
+      id: id,
+      onClick: onClick
+    }, /*#__PURE__*/React__default.createElement(SvgWrapper, null, /*#__PURE__*/React__default.createElement(Add, null)));
+  };
+
   var AccountIcon = themed(function () {
-    return /*#__PURE__*/React__default.createElement(SvgWrapper$2, null, /*#__PURE__*/React__default.createElement(Account, null));
+    return /*#__PURE__*/React__default.createElement(SvgWrapper, null, /*#__PURE__*/React__default.createElement(Account, null));
   });
+  var AddInterestButton = themed(styled__default.div(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteral(["\n  font-weight: bold;\n  color: ", ";\n  border: 1px solid ", ";\n  padding-top: ", ";\n  margin-bottom: ", ";\n  padding-left: 1.5rem;\n  width: 95%;\n  font-size: 17px;\n"])), function (props) {
+    return props.theme.colors.darkerGray;
+  }, function (props) {
+    return props.theme.colors.borderColor;
+  }, function (props) {
+    return props.theme.marginPaddings[0];
+  }, function (props) {
+    return props.theme.marginPaddings[2];
+  }));
 
   /**
    * Page/View that controls the viewing and Adding of Luxity Interests
@@ -10594,11 +11621,18 @@
 
       _this = _super.call(this, props);
 
+      _defineProperty(_assertThisInitialized(_this), "categoryInterestType", 'CATEGORY');
+
+      _defineProperty(_assertThisInitialized(_this), "productInterestType", 'PRODUCT');
+
       _defineProperty(_assertThisInitialized(_this), "setInterests", function (data) {
-        var interests = data.data.data.interests.data;
+        var _data$data$data = data.data.data,
+            interests = _data$data$data.interests.data,
+            luxity_product_interests = _data$data$data.luxity_product_interests.data;
 
         _this.setState({
-          interests: interests
+          interests: interests,
+          luxity_product_interests: luxity_product_interests
         });
       });
 
@@ -10625,6 +11659,17 @@
         });
       });
 
+      _defineProperty(_assertThisInitialized(_this), "onDeleteLuxityProductInterest", function (deleteItem) {
+        _this.setState(function (prevState) {
+          var newLuxityProductInterests = prevState.luxity_product_interests.filter(function (item) {
+            return item.id !== deleteItem.id;
+          });
+          return _objectSpread2(_objectSpread2({}, prevState), {}, {
+            luxity_product_interests: newLuxityProductInterests
+          });
+        });
+      });
+
       _defineProperty(_assertThisInitialized(_this), "triggerInterestRequest", function () {
         var _this$props = _this.props,
             requestInstance = _this$props.requestInstance,
@@ -10635,8 +11680,22 @@
         });
       });
 
+      _defineProperty(_assertThisInitialized(_this), "onAddInterestClick", function (interestType) {
+        _this.setState({
+          interestType: interestType
+        });
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "onCancel", function () {
+        _this.setState({
+          interestType: null
+        });
+      });
+
       _this.state = {
-        interests: []
+        interests: [],
+        luxity_product_interests: [],
+        interestType: null
       };
       return _this;
     }
@@ -10646,7 +11705,9 @@
       value: function render() {
         var _this2 = this;
 
-        var interests = this.state.interests;
+        var _this$state = this.state,
+            interests = _this$state.interests,
+            luxity_product_interests = _this$state.luxity_product_interests;
         var _this$props2 = this.props,
             addInterestApi = _this$props2.addInterestApi,
             requestInstance = _this$props2.requestInstance,
@@ -10658,7 +11719,12 @@
             setSchedule = _this$props2.setSchedule,
             getSchedule = _this$props2.getSchedule,
             interestsTitle = _this$props2.interestsTitle,
-            defaultShoeSizeType = _this$props2.defaultShoeSizeType;
+            defaultShoeSizeType = _this$props2.defaultShoeSizeType,
+            getMaterialsGraphQuery = _this$props2.getMaterialsGraphQuery,
+            getModelsGraphQuery = _this$props2.getModelsGraphQuery,
+            addLuxityProductInterestApi = _this$props2.addLuxityProductInterestApi,
+            deleteLuxityProductInterestApi = _this$props2.deleteLuxityProductInterestApi,
+            getConditionsGraphQuery = _this$props2.getConditionsGraphQuery;
         return /*#__PURE__*/React__default.createElement("div", {
           className: "interests"
         }, /*#__PURE__*/React__default.createElement(Notifications__default, {
@@ -10677,7 +11743,23 @@
               setSchedule: setSchedule
             });
           }
-        }), /*#__PURE__*/React__default.createElement(AddInterest$1, {
+        }), /*#__PURE__*/React__default.createElement("div", {
+          className: "interests__add-button"
+        }, /*#__PURE__*/React__default.createElement(AddInterestButtonContainer, {
+          onClick: function onClick() {
+            return _this2.onAddInterestClick(_this2.categoryInterestType);
+          }
+        }, /*#__PURE__*/React__default.createElement(AddInterestButton, null, "Category Interest"), /*#__PURE__*/React__default.createElement(AddIcon, {
+          id: "add-icon"
+        })), /*#__PURE__*/React__default.createElement(AddInterestButtonContainer, {
+          onClick: function onClick() {
+            return _this2.onAddInterestClick(_this2.productInterestType);
+          }
+        }, /*#__PURE__*/React__default.createElement(AddInterestButton, null, "Product Interest"), /*#__PURE__*/React__default.createElement(AddIcon, {
+          id: "add-icon"
+        }))), /*#__PURE__*/React__default.createElement("div", {
+          className: "interests__section"
+        }, this.state.interestType === this.categoryInterestType && /*#__PURE__*/React__default.createElement(AddInterest$1, {
           addInterestApi: addInterestApi,
           onSubmitSuccess: function onSubmitSuccess(interest) {
             return _this2.onInterestSubmitSuccess(interest);
@@ -10687,7 +11769,29 @@
           getBrandsGraphQuery: getBrandsGraphQuery,
           getStylesGraphQuery: getStylesGraphQuery,
           getShoesGraphQuery: getShoesGraphQuery,
-          defaultShoeSizeType: defaultShoeSizeType
+          defaultShoeSizeType: defaultShoeSizeType,
+          addInterestTitle: "Category Interest",
+          onCancel: this.onCancel,
+          getConditionsGraphQuery: getConditionsGraphQuery
+        }), this.state.interestType === this.productInterestType && /*#__PURE__*/React__default.createElement(AddProductInterest$1, {
+          addLuxityProductInterestApi: addLuxityProductInterestApi,
+          onSubmitSuccess: function onSubmitSuccess(interest) {
+            return _this2.onInterestSubmitSuccess(interest);
+          },
+          requestInstance: requestInstance,
+          baseGraphApi: baseGraphApi,
+          getBrandsGraphQuery: getBrandsGraphQuery,
+          addInterestTitle: "Product Interest",
+          onCancel: this.onCancel,
+          getModelsGraphQuery: getModelsGraphQuery,
+          getMaterialsGraphQuery: getMaterialsGraphQuery
+        })), (luxity_product_interests === null || luxity_product_interests === void 0 ? void 0 : luxity_product_interests.length) > 0 ? /*#__PURE__*/React__default.createElement(MyProductInterestTitleHeading$1, null) : '', !!(luxity_product_interests !== null && luxity_product_interests !== void 0 && luxity_product_interests.length) && luxity_product_interests.map(function (item) {
+          return /*#__PURE__*/React__default.createElement(LuxityProductInterestItem$1, {
+            deleteInterestApi: deleteLuxityProductInterestApi,
+            requestInstance: requestInstance,
+            onDeleted: _this2.onDeleteLuxityProductInterest,
+            data: item
+          });
         }), interests.length > 0 ? /*#__PURE__*/React__default.createElement(MyInterestTitleHeading$1, null) : '', /*#__PURE__*/React__default.createElement(LuxityPageReady, {
           getRequestPromise: function getRequestPromise() {
             return _this2.triggerInterestRequest();
@@ -10718,8 +11822,8 @@
     defaultShoeSizeType: shoeSizeTypes.eu.value
   };
 
-  var _templateObject$O, _templateObject2$a, _templateObject3$5, _templateObject4$4, _templateObject5$2, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
-  var HeaderWrapper = styled__default.div(_templateObject$O || (_templateObject$O = _taggedTemplateLiteral(["\n   {\n    display: inline-block;\n    background-color: ", ";\n    position: relative;\n    width: 100%;\n\n    .header__search-container,\n    .header__search-input {\n      background-color: ", ";\n    }\n\n    .header__search-container {\n      max-width: ", ";\n      margin: 0 auto;\n      padding: ", " 5%;\n    }\n  }\n"])), function (props) {
+  var _templateObject$R, _templateObject2$d, _templateObject3$6, _templateObject4$3, _templateObject5$1, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
+  var HeaderWrapper = styled__default.div(_templateObject$R || (_templateObject$R = _taggedTemplateLiteral(["\n   {\n    display: inline-block;\n    background-color: ", ";\n    position: relative;\n    width: 100%;\n\n    .header__search-container,\n    .header__search-input {\n      background-color: ", ";\n    }\n\n    .header__search-container {\n      max-width: ", ";\n      margin: 0 auto;\n      padding: ", " 5%;\n    }\n  }\n"])), function (props) {
     return props.theme.rareStepColors.ntrlMin;
   }, function (props) {
     return props.theme.rareStepColors.primary;
@@ -10728,16 +11832,16 @@
   }, function (props) {
     return props.theme.marginPaddings[1];
   });
-  var PageContainer = styled__default.div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral(["\n   {\n    max-width: ", ";\n    margin: 0 auto;\n    width: 100%;\n    padding: 0 5%;\n    display: flex;\n    justify-content: space-between;\n  }\n"])), function (props) {
+  var PageContainer = styled__default.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteral(["\n   {\n    max-width: ", ";\n    margin: 0 auto;\n    width: 100%;\n    padding: 0 5%;\n    display: flex;\n    justify-content: space-between;\n  }\n"])), function (props) {
     return props.theme.rareStepPageSizes.container;
   });
-  var HeaderContainer = styled__default.div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    justify-content: space-between;\n    padding: ", " 5%;\n    max-width: ", ";\n    margin: 0 auto;\n    width: 100%;\n  }\n"])), function (props) {
+  var HeaderContainer = styled__default.div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    justify-content: space-between;\n    padding: ", " 5%;\n    max-width: ", ";\n    margin: 0 auto;\n    width: 100%;\n  }\n"])), function (props) {
     return props.theme.marginPaddings[1];
   }, function (props) {
     return props.theme.rareStepPageSizes.container;
   });
-  var LogoFigure = styled__default.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n"])));
-  var LogoImage = styled__default.img(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral(["\n   {\n    width: 160px;\n    cursor: pointer;\n  }\n"])));
+  var LogoFigure = styled__default.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n"])));
+  var LogoImage = styled__default.img(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral(["\n   {\n    width: 160px;\n    cursor: pointer;\n  }\n"])));
   var CurrencyFlagIcon = styled__default.img(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n   {\n    width: 25px;\n    height: 15px;\n    margin-top: 9px;\n    margin-right: 10px;\n  }\n"])));
   var SellToUsLink = styled__default.a(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n   {\n    color: ", ";\n    font-weight: ", ";\n    font-size: ", ";\n    text-transform: uppercase;\n    letter-spacing: 1px;\n    cursor: pointer;\n    text-decoration: none;\n    font-style: italic;\n\n    &:hover,\n    &:active {\n      color: ", ";\n      text-decoration: none;\n    }\n  }\n"])), function (props) {
     return props.theme.rareStepColors.secondary;
@@ -10846,16 +11950,16 @@
     return props.theme.rareStepColors.ntrl40;
   });
 
-  var _templateObject$P, _templateObject2$b, _templateObject3$6, _templateObject4$5, _templateObject5$3, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23$1;
-  var HeaderWrapper$1 = styled__default.div(_templateObject$P || (_templateObject$P = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    background-color: ", ";\n    position: relative;\n    width: 100%;\n    justify-content: space-between;\n    align-items: center;\n    padding: ", " 5%;\n  }\n"])), function (props) {
+  var _templateObject$S, _templateObject2$e, _templateObject3$7, _templateObject4$4, _templateObject5$2, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23$1;
+  var HeaderWrapper$1 = styled__default.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    background-color: ", ";\n    position: relative;\n    width: 100%;\n    justify-content: space-between;\n    align-items: center;\n    padding: ", " 5%;\n  }\n"])), function (props) {
     return props.theme.rareStepColors.ntrlMin;
   }, function (props) {
     return props.theme.marginPaddings[3];
   });
-  var Icon = styled__default.img(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral(["\n   {\n    width: 30px;\n    height: 30px;\n    cursor: pointer;\n  }\n"])));
-  var Logo = styled__default.img(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral(["\n   {\n    width: 140px;\n    height: auto;\n    margin-left: 30px;\n    cursor: pointer;\n  }\n"])));
-  var IconWrapper$1 = styled__default.div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    width: auto;\n    height: 25px;\n\n    .search-icon,\n    .cart-icon {\n      width: 100%;\n      height: 100%;\n    }\n\n    .cart-icon {\n      margin-left: 10px;\n    }\n  }\n"])));
-  var NavigationWrapper = styled__default.div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\n  padding: ", ";\n"])), function (props) {
+  var Icon = styled__default.img(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteral(["\n   {\n    width: 30px;\n    height: 30px;\n    cursor: pointer;\n  }\n"])));
+  var Logo = styled__default.img(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral(["\n   {\n    width: 140px;\n    height: auto;\n    margin-left: 30px;\n    cursor: pointer;\n  }\n"])));
+  var IconWrapper$1 = styled__default.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    width: auto;\n    height: 25px;\n\n    .search-icon,\n    .cart-icon {\n      width: 100%;\n      height: 100%;\n    }\n\n    .cart-icon {\n      margin-left: 10px;\n    }\n  }\n"])));
+  var NavigationWrapper = styled__default.div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral(["\n  padding: ", ";\n"])), function (props) {
     return props.theme.marginPaddings[1];
   });
   var NavigationWrapperTitle = styled__default.div(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral(["\n  font-size: 16px;\n"])));
@@ -10929,8 +12033,8 @@
     return props.theme.marginPaddings[1];
   });
 
-  var _templateObject$Q, _templateObject2$c, _templateObject3$7, _templateObject4$6, _templateObject5$4, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$2, _templateObject11$2, _templateObject12$2, _templateObject13$2, _templateObject14$2, _templateObject15$2, _templateObject16$2;
-  var FooterWrapper = styled__default.div(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteral(["\n   {\n    background-color: ", ";\n    font-weight: ", ";\n    padding-top: ", ";\n    font-size: ", ";\n  }\n"])), function (props) {
+  var _templateObject$T, _templateObject2$f, _templateObject3$8, _templateObject4$5, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$2, _templateObject11$2, _templateObject12$2, _templateObject13$2, _templateObject14$2, _templateObject15$2, _templateObject16$2;
+  var FooterWrapper = styled__default.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteral(["\n   {\n    background-color: ", ";\n    font-weight: ", ";\n    padding-top: ", ";\n    font-size: ", ";\n  }\n"])), function (props) {
     return props.theme.rareStepColors.ntrlMax;
   }, function (props) {
     return props.theme.rareStepFontWeights.bold;
@@ -10939,16 +12043,16 @@
   }, function (props) {
     return props.theme.rareStepFontSize.h5;
   });
-  var PageContainer$1 = styled__default.div(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteral(["\n   {\n    max-width: ", ";\n    margin: 0 auto;\n    width: 100%;\n    padding: 0 5%;\n    display: flex;\n    justify-content: space-between;\n  }\n"])), function (props) {
+  var PageContainer$1 = styled__default.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteral(["\n   {\n    max-width: ", ";\n    margin: 0 auto;\n    width: 100%;\n    padding: 0 5%;\n    display: flex;\n    justify-content: space-between;\n  }\n"])), function (props) {
     return props.theme.rareStepPageSizes.container;
   });
-  var FooterLinksWrapper = styled__default.div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-basis: 70%;\n    padding-bottom: ", ";\n  }\n"])), function (props) {
+  var FooterLinksWrapper = styled__default.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-basis: 70%;\n    padding-bottom: ", ";\n  }\n"])), function (props) {
     return props.theme.marginPaddings[4];
   });
-  var FooterLinksContainer = styled__default.div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    padding-right: ", ";\n  }\n"])), function (props) {
+  var FooterLinksContainer = styled__default.div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    padding-right: ", ";\n  }\n"])), function (props) {
     return props.theme.marginPaddings[4];
   });
-  var FooterTitleLink = styled__default.a(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteral(["\n   {\n    text-transform: uppercase;\n    color: ", ";\n    margin-bottom: ", ";\n    cursor: pointer;\n    font-weight: ", ";\n    font-size: ", ";\n    text-decoration: none;\n\n    &:hover,\n    &:active {\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n"])), function (props) {
+  var FooterTitleLink = styled__default.a(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\n   {\n    text-transform: uppercase;\n    color: ", ";\n    margin-bottom: ", ";\n    cursor: pointer;\n    font-weight: ", ";\n    font-size: ", ";\n    text-decoration: none;\n\n    &:hover,\n    &:active {\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n"])), function (props) {
     return props.theme.rareStepColors.ntrlMin;
   }, function (props) {
     return props.theme.marginPaddings[1];
@@ -10995,32 +12099,32 @@
   var FooterPaymentImage = styled__default.img(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteral(["\n   {\n    width: 100px;\n    height: 30px;\n  }\n"])));
   var FooterConnectContainer = styled__default.div(_templateObject16$2 || (_templateObject16$2 = _taggedTemplateLiteral(["\n   {\n    display: flex;\n    flex-direction: column;\n  }\n"])));
 
-  var _templateObject$R, _templateObject2$d;
-  var OptionsRow = styled__default.div(_templateObject$R || (_templateObject$R = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: row;\n"])));
-  var Options = styled__default.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  flex-basis: 60%;\n"])));
+  var _templateObject$U, _templateObject2$g;
+  var OptionsRow = styled__default.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: row;\n"])));
+  var Options = styled__default.div(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  flex-basis: 60%;\n"])));
 
-  var _templateObject$S, _templateObject2$e;
-  var SectionContainer = styled__default.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteral(["\n  border-top: flex 1px solid ", ";\n  border-top-width: calc(100% - 50px);\n  padding: 5px 10px;\n"])), function (props) {
+  var _templateObject$V, _templateObject2$h;
+  var SectionContainer = styled__default.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteral(["\n  border-top: flex 1px solid ", ";\n  border-top-width: calc(100% - 50px);\n  padding: 5px 10px;\n"])), function (props) {
     return props.theme.colors.primary;
   });
-  var SectionHeading = styled__default.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteral(["\n  padding: 5px 10px;\n"])));
+  var SectionHeading = styled__default.div(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteral(["\n  padding: 5px 10px;\n"])));
 
-  var _templateObject$T, _templateObject2$f, _templateObject3$8;
-  var CommunicationPreferenceContainer = styled__default.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteral(["\n  border: solid 1px #d1d5dbff;\n  margin-bottom: 40px;\n"])));
-  var EditButtonRow = styled__default.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: end;\n  padding: 10px 5px;\n  margin-right: 16px;\n"])));
-  var SubmitButton = styled__default.input(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral(["\n  flex-basis: 15%;\n  margin-right: 5px;\n"])));
+  var _templateObject$W, _templateObject2$i, _templateObject3$9;
+  var CommunicationPreferenceContainer = styled__default.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteral(["\n  border: solid 1px #d1d5dbff;\n  margin-bottom: 40px;\n"])));
+  var EditButtonRow = styled__default.div(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: end;\n  padding: 10px 5px;\n  margin-right: 16px;\n"])));
+  var SubmitButton = styled__default.input(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteral(["\n  flex-basis: 15%;\n  margin-right: 5px;\n"])));
 
-  var _templateObject$U;
-  var FooterWrapper$1 = styled__default.div(_templateObject$U || (_templateObject$U = _taggedTemplateLiteral(["\n   {\n    background-color: ", ";\n  }\n"])), function (props) {
+  var _templateObject$X;
+  var FooterWrapper$1 = styled__default.div(_templateObject$X || (_templateObject$X = _taggedTemplateLiteral(["\n   {\n    background-color: ", ";\n  }\n"])), function (props) {
     return props.theme.colors.gray;
   });
 
-  var _templateObject$V;
+  var _templateObject$Y;
   var ALL_ITEM$1 = {
     label: 'ALL',
     value: 'ALL'
   };
-  var StyledMultiselector$1 = styled__default.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteral(["\n  .multiselector__selected-items,\n  .multiselector__selectable-items {\n    display: flex;\n    flex-flow: no-wrap;\n    margin-bottom: 40px;\n    .dropdown-select-container {\n      width: 100%;\n      .dropdown-select {\n        &__control {\n          border-color: ", ";\n          border-radius: 0px;\n          background-color: ", ";\n          color: ", ";\n        }\n        &__multi-value {\n          background-color: ", ";\n        }\n        &__multi-value__label {\n          color: ", ";\n          font-size: 100%;\n        }\n        &__multi-value__remove {\n          svg {\n            fill: ", ";\n          }\n        }\n      }\n    }\n  }\n"])), function (props) {
+  var StyledMultiselector$1 = styled__default.div(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteral(["\n  .multiselector__selected-items,\n  .multiselector__selectable-items {\n    display: flex;\n    flex-flow: no-wrap;\n    margin-bottom: 40px;\n    .dropdown-select-container {\n      width: 100%;\n      .dropdown-select {\n        &__control {\n          border-color: ", ";\n          border-radius: 0px;\n          background-color: ", ";\n          color: ", ";\n        }\n        &__multi-value {\n          background-color: ", ";\n        }\n        &__multi-value__label {\n          color: ", ";\n          font-size: 100%;\n        }\n        &__multi-value__remove {\n          svg {\n            fill: ", ";\n          }\n        }\n      }\n    }\n  }\n"])), function (props) {
     return props.theme.colors.primary;
   }, function (props) {
     return props.theme.colors.ntrlMin;