@bonlineza/luxity-lib 2.39.8 → 2.40.0

package/BrandSelector.js

@@ -737,11 +737,13 @@
         className = _ref.className,
         title = _ref.title,
         searchPlaceHolder = _ref.searchPlaceHolder,
-        onSearchChanged = _ref.onSearchChanged;
+        onSearchChanged = _ref.onSearchChanged,
+        _ref$searchable = _ref.searchable,
+        searchable = _ref$searchable === void 0 ? true : _ref$searchable;
     return /*#__PURE__*/React__default.createElement(InterestsSubheading, {
       className: "".concat(className, " ").concat(baseClass, "__title"),
       title: title
-    }, /*#__PURE__*/React__default.createElement("div", {
+    }, searchable && /*#__PURE__*/React__default.createElement("div", {
       className: "title__search"
     }, /*#__PURE__*/React__default.createElement(Search, null), /*#__PURE__*/React__default.createElement("input", {
       placeholder: searchPlaceHolder,
@@ -825,6 +827,7 @@
             resultProcessor = _this$props.resultProcessor,
             itemRenderer = _this$props.itemRenderer,
             searchPlaceHolder = _this$props.searchPlaceHolder,
+            searchable = _this$props.searchable,
             graphApi = _this$props.graphApi,
             identifier = _this$props.identifier,
             requestInstance = _this$props.requestInstance;
@@ -834,6 +837,7 @@
           title: title,
           baseClass: baseClass,
           searchPlaceHolder: searchPlaceHolder,
+          searchable: searchable,
           onSearchChanged: _this.onSearchChanged
         }), /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(GraphQLMultiSelector$1, {
           triggerRequest: function triggerRequest() {
@@ -887,6 +891,7 @@
   LuxityGraphQLMultiselector.defaultProps = {
     baseClass: '',
     searchPlaceHolder: '',
+    searchable: true,
     queryLimitIncrement: 12,
     baseQueryLimit: 12
   };

package/ConditionSelector.js

@@ -737,11 +737,13 @@
         className = _ref.className,
         title = _ref.title,
         searchPlaceHolder = _ref.searchPlaceHolder,
-        onSearchChanged = _ref.onSearchChanged;
+        onSearchChanged = _ref.onSearchChanged,
+        _ref$searchable = _ref.searchable,
+        searchable = _ref$searchable === void 0 ? true : _ref$searchable;
     return /*#__PURE__*/React__default.createElement(InterestsSubheading, {
       className: "".concat(className, " ").concat(baseClass, "__title"),
       title: title
-    }, /*#__PURE__*/React__default.createElement("div", {
+    }, searchable && /*#__PURE__*/React__default.createElement("div", {
       className: "title__search"
     }, /*#__PURE__*/React__default.createElement(Search, null), /*#__PURE__*/React__default.createElement("input", {
       placeholder: searchPlaceHolder,
@@ -825,6 +827,7 @@
             resultProcessor = _this$props.resultProcessor,
             itemRenderer = _this$props.itemRenderer,
             searchPlaceHolder = _this$props.searchPlaceHolder,
+            searchable = _this$props.searchable,
             graphApi = _this$props.graphApi,
             identifier = _this$props.identifier,
             requestInstance = _this$props.requestInstance;
@@ -834,6 +837,7 @@
           title: title,
           baseClass: baseClass,
           searchPlaceHolder: searchPlaceHolder,
+          searchable: searchable,
           onSearchChanged: _this.onSearchChanged
         }), /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(GraphQLMultiSelector$1, {
           triggerRequest: function triggerRequest() {
@@ -887,6 +891,7 @@
   LuxityGraphQLMultiselector.defaultProps = {
     baseClass: '',
     searchPlaceHolder: '',
+    searchable: true,
     queryLimitIncrement: 12,
     baseQueryLimit: 12
   };

package/GraphQLDropdownSelector.js

@@ -9698,19 +9698,16 @@
   };
   var IconHeader$1 = themed(IconHeader);
 
-  var Account = (function (props) {
+  var Heart = (function (props) {
     return /*#__PURE__*/React__default.createElement("svg", _extends({
-      id: "svg-account",
-      width: "25",
-      height: "29",
-      viewBox: "0 0 25 29",
+      id: "svg-interest-heart",
+      width: "26",
+      height: "25",
+      viewBox: "0 0 29.8 28.9",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props), /*#__PURE__*/React__default.createElement("path", {
-      d: "M20.9496 10.2519V7.6666C20.9496 3.43926 17.1602 0 12.5016 0C7.84173 0 4.05044 3.43926 4.05044 7.6666V10.2519C2.26758 10.6808 1 12.2658 1 14.1175V24.021C1 26.2148 2.78986 28 4.9908 28H20.0092C22.2101 28 24 26.2148 24 24.021V14.115C24 12.2652 22.7324 10.6808 20.9496 10.2519ZM5.70052 10.136V7.6666C5.70052 4.34833 8.7516 1.64836 12.501 1.64836C16.249 1.64836 19.2988 4.34833 19.2988 7.6666V10.136H5.70052ZM20.0092 26.3548H4.9908C3.70162 26.3548 2.65261 25.3076 2.65261 24.021V14.115C2.65261 12.8296 3.70099 11.7843 4.9908 11.7843H20.0092C21.2996 11.7843 22.3499 12.8296 22.3499 14.115V24.021C22.3499 25.3076 21.2996 26.3548 20.0092 26.3548Z",
-      fill: "currentColor"
-    }), /*#__PURE__*/React__default.createElement("path", {
-      d: "M12.5012 14.1892C11.2038 14.1892 10.1484 15.2421 10.1484 16.5357V19.5739C10.1484 20.8675 11.2038 21.9204 12.5012 21.9204C13.7974 21.9204 14.8515 20.8675 14.8515 19.5739V16.5357C14.8515 15.2421 13.7974 14.1892 12.5012 14.1892ZM13.1982 16.5357V19.5739C13.1982 19.9591 12.8856 20.2721 12.5006 20.2721C12.1149 20.2721 11.8011 19.9591 11.8011 19.5739V16.5357C11.8011 16.1505 12.1149 15.8376 12.5012 15.8376C12.8856 15.8376 13.1982 16.1505 13.1982 16.5357Z",
+      d: "M25.993,3.04h.024l-.427-.273c-2.277-1.47-4.767-1.613-7.02-.391-1.577.854-2.893,2.348-3.664,4.115-.771-1.767-2.099-3.261-3.676-4.115-2.253-1.221-4.743-1.079-7.02.391C1.886,4.273.475,6.763.523,9.277c.107,5.454,5.727,12.545,10.909,16.826.972.794,2.205,1.245,3.474,1.245,1.257,0,2.49-.451,3.462-1.245,5.182-4.281,10.802-11.371,10.909-16.826.047-2.372-1.209-4.707-3.285-6.237ZM27.795,9.241c-.095,4.98-5.407,11.608-10.328,15.676l-.047.036c-1.458,1.209-3.581,1.209-5.039,0C7.448,20.885,2.1,14.233,2.005,9.241c-.036-1.992,1.115-3.996,3.012-5.229.996-.64,2.028-.972,3.071-.972.842,0,1.66.213,2.431.628,2.146,1.174,3.64,3.771,3.64,6.332,0,.415.332.747.747.747.403,0,.735-.332.735-.747,0-2.561,1.494-5.158,3.64-6.332,1.755-.949,3.711-.818,5.502.344,1.897,1.233,3.047,3.237,3.012,5.229Z",
       fill: "currentColor"
     }));
   });
@@ -10137,11 +10134,13 @@
         className = _ref.className,
         title = _ref.title,
         searchPlaceHolder = _ref.searchPlaceHolder,
-        onSearchChanged = _ref.onSearchChanged;
+        onSearchChanged = _ref.onSearchChanged,
+        _ref$searchable = _ref.searchable,
+        searchable = _ref$searchable === void 0 ? true : _ref$searchable;
     return /*#__PURE__*/React__default.createElement(InterestsSubheading, {
       className: "".concat(className, " ").concat(baseClass, "__title"),
       title: title
-    }, /*#__PURE__*/React__default.createElement("div", {
+    }, searchable && /*#__PURE__*/React__default.createElement("div", {
       className: "title__search"
     }, /*#__PURE__*/React__default.createElement(Search, null), /*#__PURE__*/React__default.createElement("input", {
       placeholder: searchPlaceHolder,
@@ -10225,6 +10224,7 @@
             resultProcessor = _this$props.resultProcessor,
             itemRenderer = _this$props.itemRenderer,
             searchPlaceHolder = _this$props.searchPlaceHolder,
+            searchable = _this$props.searchable,
             graphApi = _this$props.graphApi,
             identifier = _this$props.identifier,
             requestInstance = _this$props.requestInstance;
@@ -10234,6 +10234,7 @@
           title: title,
           baseClass: baseClass,
           searchPlaceHolder: searchPlaceHolder,
+          searchable: searchable,
           onSearchChanged: _this.onSearchChanged
         }), /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(GraphQLMultiSelector$1, {
           triggerRequest: function triggerRequest() {
@@ -10287,6 +10288,7 @@
   LuxityGraphQLMultiselector.defaultProps = {
     baseClass: '',
     searchPlaceHolder: '',
+    searchable: true,
     queryLimitIncrement: 12,
     baseQueryLimit: 12
   };
@@ -10382,6 +10384,48 @@
     }
   };
 
+  var ApparelSizeSelector = function ApparelSizeSelector(_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, {
+      title: "Sizes",
+      queryId: "getApparelSizes",
+      baseQueryLimit: 16,
+      baseClass: "apparel-size-selector",
+      identifier: "apparel-size-selector",
+      searchable: false,
+      category: category,
+      onChange: onChange,
+      graphApi: graphApi,
+      itemRenderer: itemRenderer,
+      getGraphQuery: getGraphQuery,
+      resultProcessor: resultProcessor,
+      requestInstance: requestInstance
+    });
+  };
+
+  ApparelSizeSelector.defaultProps = {
+    itemRenderer: ItemRenderer,
+    resultProcessor: function resultProcessor(result) {
+      return {
+        data: (result.data.data.luxity_universal_apparel_size_list || []).map(function (_ref2) {
+          var id = _ref2.id,
+              size = _ref2.size;
+          return {
+            id: id,
+            name: size
+          };
+        }),
+        has_more_pages: false
+      };
+    }
+  };
+
   var shoeSizeTypes = {
     uk: {
       label: 'UK',
@@ -10758,6 +10802,7 @@
     min_price: null,
     max_price: null,
     styles: [],
+    apparel_sizes: [],
     gender: [],
     condition: [],
     request: _objectSpread2({}, request),
@@ -10787,7 +10832,8 @@
         _this.setState({
           category_type: categoryType,
           brands: [],
-          styles: []
+          styles: [],
+          apparel_sizes: []
         });
       });
 
@@ -10836,6 +10882,14 @@
         });
       });
 
+      _defineProperty(_assertThisInitialized(_this), "onApparelSizesChanged", function (apparelSizesArray) {
+        _this.setState({
+          apparel_sizes: apparelSizesArray.map(function (apparelSize) {
+            return apparelSize.id;
+          })
+        });
+      });
+
       _defineProperty(_assertThisInitialized(_this), "onConditionChanged", function (conditions) {
         _this.setState({
           condition: conditions.map(function (condition) {
@@ -10865,6 +10919,7 @@
             min_price = _this$state.min_price,
             max_price = _this$state.max_price,
             styles = _this$state.styles,
+            apparel_sizes = _this$state.apparel_sizes,
             category_type = _this$state.category_type,
             requestState = _this$state.request,
             gender = _this$state.gender,
@@ -10890,8 +10945,11 @@
           max_shoe_size_id: max_shoe_size_id,
           shoe_size_type: shoe_size_type
         } : {};
+        var apparelSizesPayload = category_type === interestCategories.APPAREL ? {
+          apparel_sizes: apparel_sizes
+        } : {};
 
-        var payload = _objectSpread2(_objectSpread2({}, basePayload), shoeSizesPayload);
+        var payload = _objectSpread2(_objectSpread2(_objectSpread2({}, basePayload), shoeSizesPayload), apparelSizesPayload);
 
         simpleRequest(_this.props.requestInstance, _this.props.addInterestApi, method.POST, payload, function () {
           _this.setState({
@@ -10948,6 +11006,7 @@
             baseGraphApi = _this$props.baseGraphApi,
             getBrandsGraphQuery = _this$props.getBrandsGraphQuery,
             getStylesGraphQuery = _this$props.getStylesGraphQuery,
+            getApparelSizesGraphQuery = _this$props.getApparelSizesGraphQuery,
             getShoesGraphQuery = _this$props.getShoesGraphQuery,
             defaultShoeSizeType = _this$props.defaultShoeSizeType,
             getConditionsGraphQuery = _this$props.getConditionsGraphQuery;
@@ -10979,6 +11038,12 @@
           requestInstance: requestInstance,
           graphApi: "".concat(baseGraphApi, "?id=getStyles"),
           getGraphQuery: getStylesGraphQuery
+        }), category_type === interestCategories.APPAREL && /*#__PURE__*/React__default.createElement(ApparelSizeSelector, {
+          category: category_type,
+          onChange: _this.onApparelSizesChanged,
+          requestInstance: requestInstance,
+          graphApi: "".concat(baseGraphApi, "?id=getApparelSizes"),
+          getGraphQuery: getApparelSizesGraphQuery
         }), /*#__PURE__*/React__default.createElement(ConditionSelector, {
           onChange: _this.onConditionChanged,
           requestInstance: requestInstance,
@@ -11676,8 +11741,8 @@
     }, /*#__PURE__*/React__default.createElement(SvgWrapper, null, /*#__PURE__*/React__default.createElement(Add, null)));
   };
 
-  var AccountIcon = themed(function () {
-    return /*#__PURE__*/React__default.createElement(SvgWrapper, null, /*#__PURE__*/React__default.createElement(Account, null));
+  var InterestIcon = themed(function () {
+    return /*#__PURE__*/React__default.createElement(SvgWrapper, null, /*#__PURE__*/React__default.createElement(Heart, 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;
@@ -11797,6 +11862,7 @@
             baseGraphApi = _this$props2.baseGraphApi,
             getBrandsGraphQuery = _this$props2.getBrandsGraphQuery,
             getStylesGraphQuery = _this$props2.getStylesGraphQuery,
+            getApparelSizesGraphQuery = _this$props2.getApparelSizesGraphQuery,
             getShoesGraphQuery = _this$props2.getShoesGraphQuery,
             deleteInterestApi = _this$props2.deleteInterestApi,
             setSchedule = _this$props2.setSchedule,
@@ -11816,10 +11882,10 @@
           }
         }), /*#__PURE__*/React__default.createElement(IconHeader$1, {
           svgComponent: function svgComponent() {
-            return /*#__PURE__*/React__default.createElement(AccountIcon, null);
+            return /*#__PURE__*/React__default.createElement(InterestIcon, null);
           },
           title: interestsTitle,
-          svgName: "account",
+          svgName: "interest",
           renderAppendage: function renderAppendage() {
             return /*#__PURE__*/React__default.createElement(NotificationDropDown$1, {
               getSchedule: getSchedule,
@@ -11851,6 +11917,7 @@
           baseGraphApi: baseGraphApi,
           getBrandsGraphQuery: getBrandsGraphQuery,
           getStylesGraphQuery: getStylesGraphQuery,
+          getApparelSizesGraphQuery: getApparelSizesGraphQuery,
           getShoesGraphQuery: getShoesGraphQuery,
           defaultShoeSizeType: defaultShoeSizeType,
           addInterestTitle: "Category Interest",

package/Interests.js

@@ -838,19 +838,16 @@
   };
   var IconHeader$1 = themed(IconHeader);
 
-  var Account = (function (props) {
+  var Heart = (function (props) {
     return /*#__PURE__*/React__default.createElement("svg", _extends({
-      id: "svg-account",
-      width: "25",
-      height: "29",
-      viewBox: "0 0 25 29",
+      id: "svg-interest-heart",
+      width: "26",
+      height: "25",
+      viewBox: "0 0 29.8 28.9",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props), /*#__PURE__*/React__default.createElement("path", {
-      d: "M20.9496 10.2519V7.6666C20.9496 3.43926 17.1602 0 12.5016 0C7.84173 0 4.05044 3.43926 4.05044 7.6666V10.2519C2.26758 10.6808 1 12.2658 1 14.1175V24.021C1 26.2148 2.78986 28 4.9908 28H20.0092C22.2101 28 24 26.2148 24 24.021V14.115C24 12.2652 22.7324 10.6808 20.9496 10.2519ZM5.70052 10.136V7.6666C5.70052 4.34833 8.7516 1.64836 12.501 1.64836C16.249 1.64836 19.2988 4.34833 19.2988 7.6666V10.136H5.70052ZM20.0092 26.3548H4.9908C3.70162 26.3548 2.65261 25.3076 2.65261 24.021V14.115C2.65261 12.8296 3.70099 11.7843 4.9908 11.7843H20.0092C21.2996 11.7843 22.3499 12.8296 22.3499 14.115V24.021C22.3499 25.3076 21.2996 26.3548 20.0092 26.3548Z",
-      fill: "currentColor"
-    }), /*#__PURE__*/React__default.createElement("path", {
-      d: "M12.5012 14.1892C11.2038 14.1892 10.1484 15.2421 10.1484 16.5357V19.5739C10.1484 20.8675 11.2038 21.9204 12.5012 21.9204C13.7974 21.9204 14.8515 20.8675 14.8515 19.5739V16.5357C14.8515 15.2421 13.7974 14.1892 12.5012 14.1892ZM13.1982 16.5357V19.5739C13.1982 19.9591 12.8856 20.2721 12.5006 20.2721C12.1149 20.2721 11.8011 19.9591 11.8011 19.5739V16.5357C11.8011 16.1505 12.1149 15.8376 12.5012 15.8376C12.8856 15.8376 13.1982 16.1505 13.1982 16.5357Z",
+      d: "M25.993,3.04h.024l-.427-.273c-2.277-1.47-4.767-1.613-7.02-.391-1.577.854-2.893,2.348-3.664,4.115-.771-1.767-2.099-3.261-3.676-4.115-2.253-1.221-4.743-1.079-7.02.391C1.886,4.273.475,6.763.523,9.277c.107,5.454,5.727,12.545,10.909,16.826.972.794,2.205,1.245,3.474,1.245,1.257,0,2.49-.451,3.462-1.245,5.182-4.281,10.802-11.371,10.909-16.826.047-2.372-1.209-4.707-3.285-6.237ZM27.795,9.241c-.095,4.98-5.407,11.608-10.328,15.676l-.047.036c-1.458,1.209-3.581,1.209-5.039,0C7.448,20.885,2.1,14.233,2.005,9.241c-.036-1.992,1.115-3.996,3.012-5.229.996-.64,2.028-.972,3.071-.972.842,0,1.66.213,2.431.628,2.146,1.174,3.64,3.771,3.64,6.332,0,.415.332.747.747.747.403,0,.735-.332.735-.747,0-2.561,1.494-5.158,3.64-6.332,1.755-.949,3.711-.818,5.502.344,1.897,1.233,3.047,3.237,3.012,5.229Z",
       fill: "currentColor"
     }));
   });
@@ -8376,11 +8373,13 @@
         className = _ref.className,
         title = _ref.title,
         searchPlaceHolder = _ref.searchPlaceHolder,
-        onSearchChanged = _ref.onSearchChanged;
+        onSearchChanged = _ref.onSearchChanged,
+        _ref$searchable = _ref.searchable,
+        searchable = _ref$searchable === void 0 ? true : _ref$searchable;
     return /*#__PURE__*/React__default.createElement(InterestsSubheading, {
       className: "".concat(className, " ").concat(baseClass, "__title"),
       title: title
-    }, /*#__PURE__*/React__default.createElement("div", {
+    }, searchable && /*#__PURE__*/React__default.createElement("div", {
       className: "title__search"
     }, /*#__PURE__*/React__default.createElement(Search, null), /*#__PURE__*/React__default.createElement("input", {
       placeholder: searchPlaceHolder,
@@ -8464,6 +8463,7 @@
             resultProcessor = _this$props.resultProcessor,
             itemRenderer = _this$props.itemRenderer,
             searchPlaceHolder = _this$props.searchPlaceHolder,
+            searchable = _this$props.searchable,
             graphApi = _this$props.graphApi,
             identifier = _this$props.identifier,
             requestInstance = _this$props.requestInstance;
@@ -8473,6 +8473,7 @@
           title: title,
           baseClass: baseClass,
           searchPlaceHolder: searchPlaceHolder,
+          searchable: searchable,
           onSearchChanged: _this.onSearchChanged
         }), /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(GraphQLMultiSelector$1, {
           triggerRequest: function triggerRequest() {
@@ -8526,6 +8527,7 @@
   LuxityGraphQLMultiselector.defaultProps = {
     baseClass: '',
     searchPlaceHolder: '',
+    searchable: true,
     queryLimitIncrement: 12,
     baseQueryLimit: 12
   };
@@ -8639,6 +8641,48 @@
     }
   };
 
+  var ApparelSizeSelector = function ApparelSizeSelector(_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, {
+      title: "Sizes",
+      queryId: "getApparelSizes",
+      baseQueryLimit: 16,
+      baseClass: "apparel-size-selector",
+      identifier: "apparel-size-selector",
+      searchable: false,
+      category: category,
+      onChange: onChange,
+      graphApi: graphApi,
+      itemRenderer: itemRenderer,
+      getGraphQuery: getGraphQuery,
+      resultProcessor: resultProcessor,
+      requestInstance: requestInstance
+    });
+  };
+
+  ApparelSizeSelector.defaultProps = {
+    itemRenderer: ItemRenderer,
+    resultProcessor: function resultProcessor(result) {
+      return {
+        data: (result.data.data.luxity_universal_apparel_size_list || []).map(function (_ref2) {
+          var id = _ref2.id,
+              size = _ref2.size;
+          return {
+            id: id,
+            name: size
+          };
+        }),
+        has_more_pages: false
+      };
+    }
+  };
+
   var genders = {
     FEMALE: 0,
     MALE: 1,
@@ -10398,6 +10442,7 @@
     min_price: null,
     max_price: null,
     styles: [],
+    apparel_sizes: [],
     gender: [],
     condition: [],
     request: _objectSpread2({}, request),
@@ -10427,7 +10472,8 @@
         _this.setState({
           category_type: categoryType,
           brands: [],
-          styles: []
+          styles: [],
+          apparel_sizes: []
         });
       });
 
@@ -10476,6 +10522,14 @@
         });
       });
 
+      _defineProperty(_assertThisInitialized(_this), "onApparelSizesChanged", function (apparelSizesArray) {
+        _this.setState({
+          apparel_sizes: apparelSizesArray.map(function (apparelSize) {
+            return apparelSize.id;
+          })
+        });
+      });
+
       _defineProperty(_assertThisInitialized(_this), "onConditionChanged", function (conditions) {
         _this.setState({
           condition: conditions.map(function (condition) {
@@ -10505,6 +10559,7 @@
             min_price = _this$state.min_price,
             max_price = _this$state.max_price,
             styles = _this$state.styles,
+            apparel_sizes = _this$state.apparel_sizes,
             category_type = _this$state.category_type,
             requestState = _this$state.request,
             gender = _this$state.gender,
@@ -10530,8 +10585,11 @@
           max_shoe_size_id: max_shoe_size_id,
           shoe_size_type: shoe_size_type
         } : {};
+        var apparelSizesPayload = category_type === interestCategories.APPAREL ? {
+          apparel_sizes: apparel_sizes
+        } : {};
 
-        var payload = _objectSpread2(_objectSpread2({}, basePayload), shoeSizesPayload);
+        var payload = _objectSpread2(_objectSpread2(_objectSpread2({}, basePayload), shoeSizesPayload), apparelSizesPayload);
 
         simpleRequest(_this.props.requestInstance, _this.props.addInterestApi, method.POST, payload, function () {
           _this.setState({
@@ -10588,6 +10646,7 @@
             baseGraphApi = _this$props.baseGraphApi,
             getBrandsGraphQuery = _this$props.getBrandsGraphQuery,
             getStylesGraphQuery = _this$props.getStylesGraphQuery,
+            getApparelSizesGraphQuery = _this$props.getApparelSizesGraphQuery,
             getShoesGraphQuery = _this$props.getShoesGraphQuery,
             defaultShoeSizeType = _this$props.defaultShoeSizeType,
             getConditionsGraphQuery = _this$props.getConditionsGraphQuery;
@@ -10619,6 +10678,12 @@
           requestInstance: requestInstance,
           graphApi: "".concat(baseGraphApi, "?id=getStyles"),
           getGraphQuery: getStylesGraphQuery
+        }), category_type === interestCategories.APPAREL && /*#__PURE__*/React__default.createElement(ApparelSizeSelector, {
+          category: category_type,
+          onChange: _this.onApparelSizesChanged,
+          requestInstance: requestInstance,
+          graphApi: "".concat(baseGraphApi, "?id=getApparelSizes"),
+          getGraphQuery: getApparelSizesGraphQuery
         }), /*#__PURE__*/React__default.createElement(ConditionSelector, {
           onChange: _this.onConditionChanged,
           requestInstance: requestInstance,
@@ -11539,8 +11604,8 @@
     }, /*#__PURE__*/React__default.createElement(SvgWrapper$1, null, /*#__PURE__*/React__default.createElement(Add, null)));
   };
 
-  var AccountIcon = themed(function () {
-    return /*#__PURE__*/React__default.createElement(SvgWrapper$1, null, /*#__PURE__*/React__default.createElement(Account, null));
+  var InterestIcon = themed(function () {
+    return /*#__PURE__*/React__default.createElement(SvgWrapper$1, null, /*#__PURE__*/React__default.createElement(Heart, null));
   });
   var AddInterestButton = themed(styled__default.div(_templateObject2$b || (_templateObject2$b = _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;
@@ -11660,6 +11725,7 @@
             baseGraphApi = _this$props2.baseGraphApi,
             getBrandsGraphQuery = _this$props2.getBrandsGraphQuery,
             getStylesGraphQuery = _this$props2.getStylesGraphQuery,
+            getApparelSizesGraphQuery = _this$props2.getApparelSizesGraphQuery,
             getShoesGraphQuery = _this$props2.getShoesGraphQuery,
             deleteInterestApi = _this$props2.deleteInterestApi,
             setSchedule = _this$props2.setSchedule,
@@ -11679,10 +11745,10 @@
           }
         }), /*#__PURE__*/React__default.createElement(IconHeader$1, {
           svgComponent: function svgComponent() {
-            return /*#__PURE__*/React__default.createElement(AccountIcon, null);
+            return /*#__PURE__*/React__default.createElement(InterestIcon, null);
           },
           title: interestsTitle,
-          svgName: "account",
+          svgName: "interest",
           renderAppendage: function renderAppendage() {
             return /*#__PURE__*/React__default.createElement(NotificationDropDown$1, {
               getSchedule: getSchedule,
@@ -11714,6 +11780,7 @@
           baseGraphApi: baseGraphApi,
           getBrandsGraphQuery: getBrandsGraphQuery,
           getStylesGraphQuery: getStylesGraphQuery,
+          getApparelSizesGraphQuery: getApparelSizesGraphQuery,
           getShoesGraphQuery: getShoesGraphQuery,
           defaultShoeSizeType: defaultShoeSizeType,
           addInterestTitle: "Category Interest",

package/LuxityDesktopHeader.js

@@ -1467,13 +1467,16 @@
       className: "text-sm"
     }, name))), onInterestClick && /*#__PURE__*/React__default.createElement("button", {
       type: "button",
+      "aria-label": "Interests",
       className: "".concat(app ? 'navbar__icon--app' : 'navbar__icon'),
       onClick: onInterestClick
-    }, /*#__PURE__*/React__default.createElement("img", {
-      src: interestIcon,
-      alt: "interest-icon",
-      width: 20,
-      height: 20
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: "navbar__interest-heart",
+      style: {
+        WebkitMaskImage: "url(".concat(interestIcon, ")"),
+        maskImage: "url(".concat(interestIcon, ")")
+      },
+      "aria-hidden": true
     })), /*#__PURE__*/React__default.createElement("button", {
       type: "button",
       className: "navbar__cart-icon ".concat(app ? 'navbar__icon--app' : 'navbar__icon'),