@bonlineza/luxity-lib 2.10.0 → 2.11.0

package/build/bundle.js

@@ -868,6 +868,22 @@
           return /*#__PURE__*/React__default.createElement("span", {
             key: "".concat(style.name, "-").concat(data.id)
           }, style.name);
+        }) : 'All')), /*#__PURE__*/React__default.createElement("div", {
+          className: "interest-item__container_heading"
+        }, /*#__PURE__*/React__default.createElement(InterestItemTitle, null, "Models:"), /*#__PURE__*/React__default.createElement("div", {
+          className: "list-items"
+        }, data.luxity_models != null && data.luxity_models.length > 0 ? data.luxity_models.map(function (model) {
+          return /*#__PURE__*/React__default.createElement("span", {
+            key: "".concat(model.name, "-").concat(data.id)
+          }, model.name);
+        }) : 'All')), /*#__PURE__*/React__default.createElement("div", {
+          className: "interest-item__container_heading"
+        }, /*#__PURE__*/React__default.createElement(InterestItemTitle, null, "Materials:"), /*#__PURE__*/React__default.createElement("div", {
+          className: "list-items"
+        }, data.luxity_materials != null && data.luxity_materials.length > 0 ? data.luxity_materials.map(function (material) {
+          return /*#__PURE__*/React__default.createElement("span", {
+            key: "".concat(material.name, "-").concat(data.id)
+          }, material.name);
         }) : 'All')), /*#__PURE__*/React__default.createElement("div", {
           className: "interest-item__container_heading ".concat(data.category_type === interestCategories.SHOES ? '' : 'no-shoe-size-section')
         }, data.category_type === interestCategories.SHOES ? /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(InterestItemTitle, null, "Shoe Size:"), /*#__PURE__*/React__default.createElement("div", {
@@ -894,7 +910,7 @@
   var SheoSizeContentDiv = styled__default.div(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral(["\n  @media (max-width: ", ") {\n    display: none;\n  }\n"])), media.xs);
   var InterestItemTitle = styled__default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  display: none;\n\n  @media (max-width: ", ") {\n    display: inline;\n  }\n"])), media.xs);
   var InterestItemContainer = styled__default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n\n  .no-shoe-size-section {\n    @media (max-width: ", ") {\n      display: none;\n    }\n  }\n"])), media.xs);
-  var InterestItemContent = styled__default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  width: 95%;\n  height: 100%;\n  border: 1px solid ", ";\n  padding: 0.5em;\n  margin-bottom: ", ";\n\n  .interest-item__container_heading {\n    color: ", ";\n    flex-basis: calc(100% / 6);\n    margin-left: ", ";\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) {
+  var InterestItemContent = styled__default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  width: 95%;\n  height: 100%;\n  border: 1px solid ", ";\n  padding: 0.5em;\n  margin-bottom: ", ";\n\n  .interest-item__container_heading {\n    color: ", ";\n    flex-basis: calc(100% / 8);\n    margin-left: ", ";\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];
@@ -10288,15 +10304,298 @@
 
   var NotificationDropDown$1 = themed(NotificationDropDown);
 
-  var _templateObject$F, _templateObject2$7;
+  var _templateObject$F;
   var ALL_ITEM = {
+    label: 'ALL',
+    value: 'ALL'
+  };
+  var StyledMultiselector = styled__default.div(_templateObject$F || (_templateObject$F = _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;
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.ntrlMin;
+  }, function (props) {
+    return props.theme.colors.ntrlMin;
+  });
+  /**
+   * Multiselector with a GraphQL flavour (TODO: to be revised to make it remote api agnostic)
+   */
+
+  var GraphQLDropdownSelector = /*#__PURE__*/function (_React$Component) {
+    _inherits(GraphQLDropdownSelector, _React$Component);
+
+    var _super = _createSuper(GraphQLDropdownSelector);
+
+    function GraphQLDropdownSelector(props) {
+      var _this;
+
+      _classCallCheck(this, GraphQLDropdownSelector);
+
+      _this = _super.call(this, props);
+
+      _defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function (prevProps) {
+        if (prevProps.graphQuery !== _this.props.graphQuery) {
+          _this.makeRequest();
+        }
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "makeRequest", function () {
+        _this.pageReady.refreshPage();
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "emptySelected", function () {
+        return _this.setState({
+          selected: [ALL_ITEM]
+        });
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "setNewResults", function (res) {
+        var selectedIds = _this.state.selected.map(function (sel) {
+          return sel.value;
+        });
+
+        var pagination = _this.props.resultProcessor(res);
+
+        var allSelected = _this.state.selected.some(function (item) {
+          return item.value === ALL_ITEM.value;
+        });
+
+        var newList = pagination.filter(function (newItem) {
+          return !selectedIds.includes(newItem.value);
+        });
+        newList = allSelected ? newList : [ALL_ITEM].concat(_toConsumableArray(newList)); // eslint-disable-next-line react/no-unused-state
+
+        _this.setState({
+          list: newList,
+          pagination: pagination
+        });
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "onAddItem", function (addSelectedItem) {
+        var newSelectedList;
+
+        if (addSelectedItem.includes(ALL_ITEM)) {
+          newSelectedList = [ALL_ITEM];
+        } else {
+          newSelectedList = addSelectedItem.filter(function (item) {
+            return item.value !== ALL_ITEM.value;
+          });
+        }
+
+        _this.setState(function (prevState) {
+          return _objectSpread2(_objectSpread2({}, prevState), {}, {
+            selected: newSelectedList
+          });
+        }, function () {
+          _this.props.onChange(_this.state.selected.filter(function (item) {
+            return item.value !== ALL_ITEM.value;
+          }));
+        });
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "onIsLoading", function (flag) {
+        _this.setState({
+          isLoading: flag
+        });
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "render", function () {
+        var _this$props = _this.props,
+            baseClass = _this$props.baseClass,
+            identifier = _this$props.identifier,
+            triggerRequest = _this$props.triggerRequest,
+            className = _this$props.className;
+        var list = _this.state.list;
+        return /*#__PURE__*/React__default.createElement(StyledMultiselector, null, /*#__PURE__*/React__default.createElement("div", {
+          "data-qe-id": identifier,
+          className: "".concat(className, " ").concat(baseClass)
+        }, /*#__PURE__*/React__default.createElement(LuxityPageReady, {
+          ref: function ref(inst) {
+            _this.pageReady = inst;
+          },
+          onData: _this.setNewResults,
+          onIsLoading: _this.onIsLoading,
+          getRequestPromise: function getRequestPromise() {
+            return triggerRequest();
+          }
+        }), /*#__PURE__*/React__default.createElement("div", {
+          className: "".concat(baseClass, "__selectable-items")
+        }, /*#__PURE__*/React__default.createElement(ReactSelectWrapper, {
+          options: list,
+          onChange: function onChange(value) {
+            _this.onAddItem(value);
+          },
+          isMulti: true,
+          isSearchable: true
+        }))));
+      });
+
+      _this.state = {
+        selected: [ALL_ITEM],
+        list: [],
+        pagination: {},
+        isLoading: false
+      };
+      return _this;
+    }
+
+    return _createClass(GraphQLDropdownSelector);
+  }(React__default.Component);
+
+  GraphQLDropdownSelector.defaultProps = {
+    baseClass: 'multiselector'
+  };
+  var GraphQLDropdownSelector$1 = themed(GraphQLDropdownSelector);
+
+  /**
+   * Luxity flavoured GraphQLMultiselector with text Search, category and limit controls
+   */
+  var LuxityGraphQLDropdownSelector = /*#__PURE__*/function (_React$Component) {
+    _inherits(LuxityGraphQLDropdownSelector, _React$Component);
+
+    var _super = _createSuper(LuxityGraphQLDropdownSelector);
+
+    function LuxityGraphQLDropdownSelector(props) {
+      var _this;
+
+      _classCallCheck(this, LuxityGraphQLDropdownSelector);
+
+      _this = _super.call(this, props);
+
+      _defineProperty(_assertThisInitialized(_this), "multiSelectorRef", /*#__PURE__*/React__default.createRef());
+
+      _defineProperty(_assertThisInitialized(_this), "increaseLimit", function () {
+        _this.setState(function (prevState) {
+          return {
+            limit: prevState.limit + _this.props.queryLimitIncrement
+          };
+        });
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "onChange", function (selection) {
+        _this.props.onChange(selection);
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "render", function () {
+        var _this$state = _this.state,
+            limit = _this$state.limit,
+            query_arguments = _this$state.query_arguments;
+        var _this$props = _this.props,
+            title = _this$props.title,
+            baseClass = _this$props.baseClass,
+            getGraphQuery = _this$props.getGraphQuery,
+            resultProcessor = _this$props.resultProcessor,
+            graphApi = _this$props.graphApi,
+            identifier = _this$props.identifier,
+            requestInstance = _this$props.requestInstance;
+        return /*#__PURE__*/React__default.createElement("div", {
+          className: baseClass
+        }, /*#__PURE__*/React__default.createElement(InterestsSubheading, {
+          className: "".concat(baseClass, "__title"),
+          title: title
+        }), /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(GraphQLDropdownSelector$1, {
+          triggerRequest: function triggerRequest() {
+            return requestInstance.post(graphApi, {
+              query: getGraphQuery(limit, 1, 'id|desc', query_arguments)
+            });
+          },
+          graphQuery: getGraphQuery(limit, 1, 'id|desc', query_arguments),
+          identifier: identifier,
+          ref: _this.multiSelectorRef,
+          onChange: _this.onChange,
+          resultProcessor: resultProcessor
+        })));
+      });
+
+      _this.state = {
+        limit: props.baseQueryLimit,
+        query_arguments: props.query_arguments
+      };
+      return _this;
+    }
+
+    _createClass(LuxityGraphQLDropdownSelector, [{
+      key: "componentDidUpdate",
+      value: function componentDidUpdate(prevProps) {
+        var _this$multiSelectorRe;
+
+        if (prevProps.query_arguments !== this.props.query_arguments && (_this$multiSelectorRe = this.multiSelectorRef) !== null && _this$multiSelectorRe !== void 0 && _this$multiSelectorRe.current) {
+          this.multiSelectorRef.current.emptySelected();
+        }
+      }
+    }], [{
+      key: "getDerivedStateFromProps",
+      value: function getDerivedStateFromProps(props, prevState) {
+        if (prevState.query_arguments !== props.query_arguments) {
+          return {
+            query_arguments: props.query_arguments
+          };
+        }
+
+        return null;
+      }
+    }]);
+
+    return LuxityGraphQLDropdownSelector;
+  }(React__default.Component);
+
+  LuxityGraphQLDropdownSelector.defaultProps = {
+    baseClass: '',
+    searchPlaceHolder: '',
+    queryLimitIncrement: 12,
+    baseQueryLimit: 12
+  };
+
+  var BrandSelector = function BrandSelector(_ref) {
+    var onChange = _ref.onChange,
+        category = _ref.category,
+        graphApi = _ref.graphApi,
+        getGraphQuery = _ref.getGraphQuery,
+        resultProcessor = _ref.resultProcessor,
+        requestInstance = _ref.requestInstance;
+    return /*#__PURE__*/React__default.createElement(LuxityGraphQLDropdownSelector, {
+      baseQueryLimit: 9999,
+      title: "Brands",
+      queryId: "getBrands",
+      baseClass: "brand-selector",
+      identifier: "brand-selector",
+      searchPlaceHolder: "Search brands",
+      query_arguments: category,
+      onChange: onChange,
+      graphApi: graphApi,
+      getGraphQuery: getGraphQuery,
+      resultProcessor: resultProcessor,
+      requestInstance: requestInstance
+    });
+  };
+
+  BrandSelector.defaultProps = {
+    resultProcessor: function resultProcessor(result) {
+      return result.data.data.luxity_brands.data.map(function (_ref2) {
+        var id = _ref2.id,
+            name = _ref2.name;
+        return {
+          label: name,
+          value: id
+        };
+      });
+    }
+  };
+
+  var _templateObject$G, _templateObject2$7;
+  var ALL_ITEM$1 = {
     id: 'ALL',
     name: 'ALL'
   };
   var multiSelectorItemMaxHeight = '3rem';
   var multiSelectorItemAnimationDuration = '300ms';
-  var multiselectorItemFadeIn = styled.keyframes(_templateObject$F || (_templateObject$F = _taggedTemplateLiteral(["\n  from {\n    margin: 0;\n    max-height: 0px;\n    opacity: 0;\n  }\n  to {\n    max-height: ", ";\n    opacity: 1;\n  }\n"])), multiSelectorItemMaxHeight);
-  var StyledMultiselector = styled__default.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral(["\n  .multiselector__selected-items,\n  .multiselector__selectable-items {\n    display: flex;\n    flex-flow: wrap;\n    margin-left: calc(-1 * ", ");\n    button {\n      &:hover {\n        color: ", ";\n        background-color: ", ";\n      }\n      border-color: ", ";\n      background-color: ", ";\n      color: ", ";\n      padding: ", ";\n      text-transform: none;\n      box-sizing: border-box;\n      animation: ", " ease-in-out\n        ", " forwards;\n      flex-basis: calc(25% - ", ");\n      margin-bottom: ", ";\n      margin-left: ", ";\n      text-overflow: ellipsis;\n      overflow-x: hidden;\n      min-height: 40px;\n\n      @media (max-width: ", ") {\n        flex-basis: calc(50% - ", ");\n      }\n    }\n  }\n\n  .multiselector__footer {\n    display: flex;\n    justify-content: center;\n    button {\n      &:hover {\n        color: ", ";\n        background-color: ", ";\n      }\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), function (props) {
+  var multiselectorItemFadeIn = styled.keyframes(_templateObject$G || (_templateObject$G = _taggedTemplateLiteral(["\n  from {\n    margin: 0;\n    max-height: 0px;\n    opacity: 0;\n  }\n  to {\n    max-height: ", ";\n    opacity: 1;\n  }\n"])), multiSelectorItemMaxHeight);
+  var StyledMultiselector$1 = styled__default.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral(["\n  .multiselector__selected-items,\n  .multiselector__selectable-items {\n    display: flex;\n    flex-flow: wrap;\n    margin-left: calc(-1 * ", ");\n    button {\n      &:hover {\n        color: ", ";\n        background-color: ", ";\n      }\n      border-color: ", ";\n      background-color: ", ";\n      color: ", ";\n      padding: ", ";\n      text-transform: none;\n      box-sizing: border-box;\n      animation: ", " ease-in-out\n        ", " forwards;\n      flex-basis: calc(25% - ", ");\n      margin-bottom: ", ";\n      margin-left: ", ";\n      text-overflow: ellipsis;\n      overflow-x: hidden;\n      min-height: 40px;\n\n      @media (max-width: ", ") {\n        flex-basis: calc(50% - ", ");\n      }\n    }\n  }\n\n  .multiselector__footer {\n    display: flex;\n    justify-content: center;\n    button {\n      &:hover {\n        color: ", ";\n        background-color: ", ";\n      }\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), function (props) {
     return props.theme.marginPaddings[2];
   }, function (props) {
     return props.theme.colors.ntrlMin;
@@ -10355,7 +10654,7 @@
 
       _defineProperty(_assertThisInitialized(_this), "emptySelected", function () {
         return _this.setState({
-          selected: [ALL_ITEM]
+          selected: [ALL_ITEM$1]
         });
       });
 
@@ -10367,13 +10666,13 @@
         var pagination = _this.props.resultProcessor(res);
 
         var allSelected = _this.state.selected.some(function (item) {
-          return item.id === ALL_ITEM.id;
+          return item.id === ALL_ITEM$1.id;
         });
 
         var newList = pagination.data.filter(function (newItem) {
           return !selectedIds.includes(newItem.id);
         });
-        newList = allSelected ? newList : [ALL_ITEM].concat(_toConsumableArray(newList));
+        newList = allSelected ? newList : [ALL_ITEM$1].concat(_toConsumableArray(newList));
 
         _this.setState({
           list: newList,
@@ -10386,21 +10685,21 @@
           var newSelectedList;
           var newList;
 
-          if (addSelectedItem.id === ALL_ITEM.id) {
+          if (addSelectedItem.id === ALL_ITEM$1.id) {
             // Clear Selected List
             // and move previous Selected items to list
-            newSelectedList = [ALL_ITEM];
+            newSelectedList = [ALL_ITEM$1];
             newList = prevState.list.filter(function (item) {
-              return item.id !== ALL_ITEM.id;
+              return item.id !== ALL_ITEM$1.id;
             }).concat(prevState.selected).sort(function (a, b) {
               return a.id - b.id;
             });
           } else {
             newSelectedList = _toConsumableArray(prevState.selected.filter(function (item) {
-              return item.id !== ALL_ITEM.id;
+              return item.id !== ALL_ITEM$1.id;
             })).concat(addSelectedItem);
-            newList = [ALL_ITEM].concat(_toConsumableArray(prevState.list.filter(function (item) {
-              return item.id !== ALL_ITEM.id;
+            newList = [ALL_ITEM$1].concat(_toConsumableArray(prevState.list.filter(function (item) {
+              return item.id !== ALL_ITEM$1.id;
             }).filter(function (item) {
               return item.id !== addSelectedItem.id;
             })));
@@ -10412,7 +10711,7 @@
           };
         }, function () {
           _this.props.onChange(_this.state.selected.filter(function (item) {
-            return item.id !== ALL_ITEM.id;
+            return item.id !== ALL_ITEM$1.id;
           }));
         });
       });
@@ -10420,7 +10719,7 @@
       _defineProperty(_assertThisInitialized(_this), "onRemoveItem", function (removeSelectedItem) {
         _this.setState(function (prevState) {
           // Cannot remove ALL from selection by unselecting it
-          if ((removeSelectedItem === null || removeSelectedItem === void 0 ? void 0 : removeSelectedItem.id) === ALL_ITEM.id) {
+          if ((removeSelectedItem === null || removeSelectedItem === void 0 ? void 0 : removeSelectedItem.id) === ALL_ITEM$1.id) {
             return {};
           }
 
@@ -10429,18 +10728,18 @@
           });
 
           var newList = _toConsumableArray(prevState.list).concat(removeSelectedItem).filter(function (item) {
-            return item.id !== ALL_ITEM.id;
+            return item.id !== ALL_ITEM$1.id;
           }).sort(function (a, b) {
             return a.id - b.id;
           });
 
           return {
             list: newList,
-            selected: newSelectedList.length ? newSelectedList : [ALL_ITEM]
+            selected: newSelectedList.length ? newSelectedList : [ALL_ITEM$1]
           };
         }, function () {
           _this.props.onChange(_this.state.selected.filter(function (item) {
-            return item.id !== ALL_ITEM.id;
+            return item.id !== ALL_ITEM$1.id;
           }));
         });
       });
@@ -10463,7 +10762,7 @@
             selected = _this$state.selected,
             pagination = _this$state.pagination,
             isLoading = _this$state.isLoading;
-        return /*#__PURE__*/React__default.createElement(StyledMultiselector, null, /*#__PURE__*/React__default.createElement("div", {
+        return /*#__PURE__*/React__default.createElement(StyledMultiselector$1, null, /*#__PURE__*/React__default.createElement("div", {
           "data-qe-id": identifier,
           className: "".concat(className, " ").concat(baseClass)
         }, /*#__PURE__*/React__default.createElement("div", {
@@ -10503,7 +10802,7 @@
       });
 
       _this.state = {
-        selected: [ALL_ITEM],
+        selected: [ALL_ITEM$1],
         list: [],
         pagination: {},
         isLoading: false
@@ -10533,7 +10832,7 @@
     }));
   });
 
-  var _templateObject$G;
+  var _templateObject$H;
 
   var Title$3 = function Title(_ref) {
     var baseClass = _ref.baseClass,
@@ -10554,7 +10853,7 @@
     })));
   };
 
-  var StyledTitle = styled__default(Title$3)(_templateObject$G || (_templateObject$G = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-weight: bold;\n  display: flex;\n  align-items: center;\n  font-size: ", ";\n\n  .title__search,\n  .title__search {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 30px;\n    margin-bottom: ", ";\n\n    svg {\n      margin-left: ", ";\n      fill: ", ";\n      stroke: ", ";\n    }\n\n    input {\n      width: 140px;\n      border: none;\n      font-size: ", ";\n      transition: 0.2s border-color ease-in-out;\n      margin-left: ", ";\n      padding: 0;\n\n      :focus {\n        border-color: ", ";\n        border-bottom: none;\n      }\n    }\n  }\n"])), function (props) {
+  var StyledTitle = styled__default(Title$3)(_templateObject$H || (_templateObject$H = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-weight: bold;\n  display: flex;\n  align-items: center;\n  font-size: ", ";\n\n  .title__search,\n  .title__search {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 30px;\n    margin-bottom: ", ";\n\n    svg {\n      margin-left: ", ";\n      fill: ", ";\n      stroke: ", ";\n    }\n\n    input {\n      width: 140px;\n      border: none;\n      font-size: ", ";\n      transition: 0.2s border-color ease-in-out;\n      margin-left: ", ";\n      padding: 0;\n\n      :focus {\n        border-color: ", ";\n        border-bottom: none;\n      }\n    }\n  }\n"])), function (props) {
     return props.theme.marginPaddings[2];
   }, function (props) {
     return props.theme.fontSizes[2];
@@ -10694,8 +10993,8 @@
     baseQueryLimit: 12
   };
 
-  var _templateObject$H;
-  var BaseButton = styled__default.button(_templateObject$H || (_templateObject$H = _taggedTemplateLiteral(["\n  color: ", ";\n  border: 1px solid ", ";\n  background-color: ", ";\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n"])), function (props) {
+  var _templateObject$I;
+  var BaseButton = styled__default.button(_templateObject$I || (_templateObject$I = _taggedTemplateLiteral(["\n  color: ", ";\n  border: 1px solid ", ";\n  background-color: ", ";\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n"])), function (props) {
     return props.theme.colors.base;
   }, function (props) {
     return props.theme.colors.borderColor;
@@ -10721,38 +11020,6 @@
     return selected ? /*#__PURE__*/React__default.createElement(PrimaryButton$1, props, item.name) : /*#__PURE__*/React__default.createElement(UnselectedButton, props, item.name);
   };
 
-  var BrandSelector = function BrandSelector(_ref) {
-    var onChange = _ref.onChange,
-        category = _ref.category,
-        graphApi = _ref.graphApi,
-        itemRenderer = _ref.itemRenderer,
-        getGraphQuery = _ref.getGraphQuery,
-        resultProcessor = _ref.resultProcessor,
-        requestInstance = _ref.requestInstance;
-    return /*#__PURE__*/React__default.createElement(LuxityGraphQLMultiselector, {
-      baseQueryLimit: 16,
-      title: "Brands",
-      queryId: "getBrands",
-      baseClass: "brand-selector",
-      identifier: "brand-selector",
-      searchPlaceHolder: "Search brands",
-      category: category,
-      onChange: onChange,
-      graphApi: graphApi,
-      itemRenderer: itemRenderer,
-      getGraphQuery: getGraphQuery,
-      resultProcessor: resultProcessor,
-      requestInstance: requestInstance
-    });
-  };
-
-  BrandSelector.defaultProps = {
-    itemRenderer: ItemRenderer,
-    resultProcessor: function resultProcessor(result) {
-      return result.data.data.luxity_brands;
-    }
-  };
-
   var StyleSelector = function StyleSelector(_ref) {
     var onChange = _ref.onChange,
         category = _ref.category,
@@ -10796,8 +11063,8 @@
     }
   };
 
-  var _templateObject$I, _templateObject2$8;
-  var TitleWrapper = styled__default.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteral(["\n  display: flex;\n  flex-flow: nowrap row;\n  justify-content: space-between;\n  margin-bottom: ", ";\n  label {\n    margin-bottom: 0;\n  }\n"])), function (props) {
+  var _templateObject$J, _templateObject2$8;
+  var TitleWrapper = styled__default.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteral(["\n  display: flex;\n  flex-flow: nowrap row;\n  justify-content: space-between;\n  margin-bottom: ", ";\n  label {\n    margin-bottom: 0;\n  }\n"])), function (props) {
     return props.theme.marginPaddings[4];
   });
   var onShoeSizeTypeChangeTimeout = 300;
@@ -10935,8 +11202,8 @@
     }
   };
 
-  var _templateObject$J;
-  var SelectionWrapper = styled__default.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: calc(-1 * ", ");\n  label {\n    margin-bottom: ", ";\n    flex-basis: calc(33.33% - ", ");\n    margin-bottom: ", ";\n    margin-left: ", ";\n  }\n  @media (max-width: ", ") {\n    label {\n      flex-basis: calc(50% - ", ");\n    }\n  }\n"])), function (props) {
+  var _templateObject$K;
+  var SelectionWrapper = styled__default.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: calc(-1 * ", ");\n  label {\n    margin-bottom: ", ";\n    flex-basis: calc(33.33% - ", ");\n    margin-bottom: ", ";\n    margin-left: ", ";\n  }\n  @media (max-width: ", ") {\n    label {\n      flex-basis: calc(50% - ", ");\n    }\n  }\n"])), function (props) {
     return props.theme.marginPaddings[2];
   }, function (props) {
     return props.theme.marginPaddings[2];
@@ -10952,8 +11219,8 @@
 
   var _excluded$7 = ["title", "checked", "renderIcon", "onChange", "checkedValue", "unCheckedValue"];
 
-  var _templateObject$K, _templateObject2$9, _templateObject3$4;
-  var Content = styled__default.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteral(["\n  background-color: transparent;\n  border: 1px solid ", ";\n  transition: 200ms ease-in-out;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", ";\n  cursor: pointer;\n"])), function (props) {
+  var _templateObject$L, _templateObject2$9, _templateObject3$4;
+  var Content = styled__default.div(_templateObject$L || (_templateObject$L = _taggedTemplateLiteral(["\n  background-color: transparent;\n  border: 1px solid ", ";\n  transition: 200ms ease-in-out;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", ";\n  cursor: pointer;\n"])), function (props) {
     return props.theme.colors.primary;
   }, function (props) {
     return props.theme.marginPaddings[0];
@@ -11118,9 +11385,79 @@
     }));
   });
 
-  var _templateObject$L, _templateObject2$a, _templateObject3$5, _templateObject4$3, _templateObject5$1;
+  var ModelSelector = function ModelSelector(_ref) {
+    var onChange = _ref.onChange,
+        brands = _ref.brands,
+        graphApi = _ref.graphApi,
+        getGraphQuery = _ref.getGraphQuery,
+        resultProcessor = _ref.resultProcessor,
+        requestInstance = _ref.requestInstance;
+    return /*#__PURE__*/React__default.createElement(LuxityGraphQLDropdownSelector, {
+      baseQueryLimit: 1000,
+      title: "Models",
+      queryId: "getModels",
+      baseClass: "model-selector",
+      identifier: "model-selector",
+      query_arguments: brands,
+      onChange: onChange,
+      graphApi: graphApi,
+      getGraphQuery: getGraphQuery,
+      resultProcessor: resultProcessor,
+      requestInstance: requestInstance
+    });
+  };
+
+  ModelSelector.defaultProps = {
+    resultProcessor: function resultProcessor(result) {
+      return result.data.data.luxity_models.data.map(function (_ref2) {
+        var id = _ref2.id,
+            name = _ref2.name;
+        return {
+          label: name,
+          value: id
+        };
+      });
+    }
+  };
+
+  var MaterialSelector = function MaterialSelector(_ref) {
+    var onChange = _ref.onChange,
+        brands = _ref.brands,
+        graphApi = _ref.graphApi,
+        getGraphQuery = _ref.getGraphQuery,
+        resultProcessor = _ref.resultProcessor,
+        requestInstance = _ref.requestInstance;
+    return /*#__PURE__*/React__default.createElement(LuxityGraphQLDropdownSelector, {
+      baseQueryLimit: 1000,
+      title: "Materials",
+      queryId: "getMaterials",
+      baseClass: "material-selector",
+      identifier: "material-selector",
+      query_arguments: brands,
+      onChange: onChange,
+      graphApi: graphApi,
+      getGraphQuery: getGraphQuery,
+      resultProcessor: resultProcessor,
+      requestInstance: requestInstance
+    });
+  };
+
+  MaterialSelector.defaultProps = {
+    resultProcessor: function resultProcessor(result) {
+      return result.data.data.luxity_materials.data.map(function (_ref2) {
+        var id = _ref2.id,
+            name = _ref2.name;
+        return {
+          label: name,
+          value: id
+        };
+      });
+    }
+  };
+
+  var _templateObject$M, _templateObject2$a, _templateObject3$5, _templateObject4$3, _templateObject5$1;
   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) {
+  var AddInterestContainer = styled__default.div(_templateObject$M || (_templateObject$M = _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;
@@ -11169,7 +11506,9 @@
     styles: [],
     gender: [],
     request: _objectSpread2({}, request),
-    isCategoriesShown: false
+    isCategoriesShown: false,
+    models: [],
+    materials: []
   };
   /**
    * Generates Interest UI and submits graph payloads as a highly specialised component
@@ -11223,7 +11562,7 @@
       _defineProperty(_assertThisInitialized(_this), "onBrandsChanged", function (brandsArray) {
         _this.setState({
           brands: brandsArray.map(function (brand) {
-            return brand.id;
+            return brand.value;
           })
         });
       });
@@ -11244,6 +11583,22 @@
         });
       });
 
+      _defineProperty(_assertThisInitialized(_this), "onModelsChanged", function (modelsArray) {
+        _this.setState({
+          models: modelsArray.map(function (model) {
+            return model.value;
+          })
+        });
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "onMaterialsChanged", function (materialsArray) {
+        _this.setState({
+          materials: materialsArray.map(function (material) {
+            return material.value;
+          })
+        });
+      });
+
       _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;
@@ -11267,7 +11622,9 @@
             styles = _this$state.styles,
             category_type = _this$state.category_type,
             requestState = _this$state.request,
-            gender = _this$state.gender;
+            gender = _this$state.gender,
+            models = _this$state.models,
+            materials = _this$state.materials;
         var payloadGender = gender[0];
 
         if (gender.length > 1 || !gender.length) {
@@ -11281,7 +11638,9 @@
           max_price: max_price,
           styles: styles,
           gender: payloadGender,
-          request: requestState
+          request: requestState,
+          models: models,
+          materials: materials
         };
         var shoeSizesPayload = category_type === interestCategories.SHOES ? {
           min_shoe_size_id: min_shoe_size_id,
@@ -11338,14 +11697,17 @@
       _defineProperty(_assertThisInitialized(_this), "render", function () {
         var _this$state2 = _this.state,
             category_type = _this$state2.category_type,
-            fetching = _this$state2.request.fetching;
+            fetching = _this$state2.request.fetching,
+            brands = _this$state2.brands;
         var _this$props = _this.props,
             requestInstance = _this$props.requestInstance,
             baseGraphApi = _this$props.baseGraphApi,
             getBrandsGraphQuery = _this$props.getBrandsGraphQuery,
             getStylesGraphQuery = _this$props.getStylesGraphQuery,
             getShoesGraphQuery = _this$props.getShoesGraphQuery,
-            defaultShoeSizeType = _this$props.defaultShoeSizeType;
+            defaultShoeSizeType = _this$props.defaultShoeSizeType,
+            getModelsGraphQuery = _this$props.getModelsGraphQuery,
+            getMaterialsGraphQuery = _this$props.getMaterialsGraphQuery;
         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, {
@@ -11361,7 +11723,19 @@
           requestInstance: requestInstance,
           graphApi: "".concat(baseGraphApi, "?id=getBrands"),
           getGraphQuery: getBrandsGraphQuery
-        }), category_type === interestCategories.SHOES && /*#__PURE__*/React__default.createElement(WrappedShoeSizeSelector, {
+        }), brands.length > 0 && /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(ModelSelector, {
+          brands: brands,
+          getGraphQuery: getModelsGraphQuery,
+          graphApi: "".concat(baseGraphApi, "?id=getModels"),
+          requestInstance: requestInstance,
+          onChange: _this.onModelsChanged
+        }), /*#__PURE__*/React__default.createElement(MaterialSelector, {
+          brands: brands,
+          getGraphQuery: getMaterialsGraphQuery,
+          graphApi: "".concat(baseGraphApi, "?id=getMaterials"),
+          requestInstance: requestInstance,
+          onChange: _this.onMaterialsChanged
+        })), category_type === interestCategories.SHOES && /*#__PURE__*/React__default.createElement(WrappedShoeSizeSelector, {
           defaultShoeSizeType: defaultShoeSizeType,
           getGraphQuery: getShoesGraphQuery,
           graphApi: "".concat(baseGraphApi, "?id=shoeSizeQuery"),
@@ -11408,8 +11782,8 @@
 
   var AddInterest$1 = themed(AddInterest);
 
-  var _templateObject$M;
-  var MyInterestTitleHeadingContainer = styled__default.div(_templateObject$M || (_templateObject$M = _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    padding: ", ";\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) {
+  var _templateObject$N;
+  var MyInterestTitleHeadingContainer = 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    padding: ", ";\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.marginPaddings[0];
   }, function (props) {
     return props.theme.colors.primary;
@@ -11432,6 +11806,10 @@
       className: "heading-title"
     }, "Style"), /*#__PURE__*/React__default.createElement("div", {
       className: "heading-title"
+    }, "Models"), /*#__PURE__*/React__default.createElement("div", {
+      className: "heading-title"
+    }, "Materials"), /*#__PURE__*/React__default.createElement("div", {
+      className: "heading-title"
     }, "Shoe Size")), /*#__PURE__*/React__default.createElement("div", {
       className: "heading-title-empty"
     }));
@@ -11439,8 +11817,8 @@
 
   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 _templateObject$O;
+  var SvgWrapper$2 = styled__default.span(_templateObject$O || (_templateObject$O = _taggedTemplateLiteral(["\n  svg {\n    path {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
     return props.theme.colors.primary;
   });
   var AccountIcon = themed(function () {
@@ -11522,6 +11900,8 @@
             getBrandsGraphQuery = _this$props2.getBrandsGraphQuery,
             getStylesGraphQuery = _this$props2.getStylesGraphQuery,
             getShoesGraphQuery = _this$props2.getShoesGraphQuery,
+            getModelsGraphQuery = _this$props2.getModelsGraphQuery,
+            getMaterialsGraphQuery = _this$props2.getMaterialsGraphQuery,
             deleteInterestApi = _this$props2.deleteInterestApi,
             setSchedule = _this$props2.setSchedule,
             getSchedule = _this$props2.getSchedule,
@@ -11555,7 +11935,9 @@
           getBrandsGraphQuery: getBrandsGraphQuery,
           getStylesGraphQuery: getStylesGraphQuery,
           getShoesGraphQuery: getShoesGraphQuery,
-          defaultShoeSizeType: defaultShoeSizeType
+          defaultShoeSizeType: defaultShoeSizeType,
+          getModelsGraphQuery: getModelsGraphQuery,
+          getMaterialsGraphQuery: getMaterialsGraphQuery
         }), interests.length > 0 ? /*#__PURE__*/React__default.createElement(MyInterestTitleHeading$1, null) : '', /*#__PURE__*/React__default.createElement(LuxityPageReady, {
           getRequestPromise: function getRequestPromise() {
             return _this2.triggerInterestRequest();