@magento/peregrine 12.2.0-alpha.1 → 12.2.0

package/lib/talons/FilterModal/helpers.js

@@ -104,6 +104,35 @@ export const getFiltersFromSearch = initialValue => {
     return filters;
 };
 
+/**
+ * Sort filters array
+ * @param {Array} initialArray an array containing filters data
+ */
+export const sortFiltersArray = initialArray => {
+    return initialArray.sort((a, b) => {
+        // Place Category filter first
+        if (a['attribute_code'] === 'category_id') {
+            return -1;
+        }
+        if (b['attribute_code'] === 'category_id') {
+            return 1;
+        }
+
+        // Sort alphabetically if same position
+        if (a['position'] === b['position']) {
+            if (a['label'] < b['label']) {
+                return -1;
+            }
+            if (a['label'] > b['label']) {
+                return 1;
+            }
+        }
+
+        // Sort by position
+        return a['position'] - b['position'];
+    });
+};
+
 export const stripHtml = html => html.replace(/(<([^>]+)>)/gi, '');
 
 /** GetFilterInput helpers below. */

package/lib/talons/FilterModal/useFilterModal.js

@@ -6,7 +6,12 @@ import { useAppContext } from '@magento/peregrine/lib/context/app';
 
 import mergeOperations from '../../util/shallowMerge';
 import { useFilterState } from './useFilterState';
-import { getSearchFromState, getStateFromSearch, stripHtml } from './helpers';
+import {
+    getSearchFromState,
+    getStateFromSearch,
+    sortFiltersArray,
+    stripHtml
+} from './helpers';
 
 import DEFAULT_OPERATIONS from './filterModal.gql';
 
@@ -83,7 +88,9 @@ export const useFilterModal = props => {
         const keys = new Set();
         const itemsByGroup = new Map();
 
-        for (const filter of filters) {
+        const sortedFilters = sortFiltersArray([...filters]);
+
+        for (const filter of sortedFilters) {
             const { options, label: name, attribute_code: group } = filter;
 
             // If this aggregation is not a possible filter, just back out.

package/lib/talons/FilterSidebar/useFilterSidebar.js

@@ -9,6 +9,7 @@ import { useFilterState } from '../FilterModal';
 import {
     getSearchFromState,
     getStateFromSearch,
+    sortFiltersArray,
     stripHtml
 } from '../FilterModal/helpers';
 
@@ -77,7 +78,9 @@ export const useFilterSidebar = props => {
         const keys = new Set();
         const itemsByGroup = new Map();
 
-        for (const filter of filters) {
+        const sortedFilters = sortFiltersArray([...filters]);
+
+        for (const filter of sortedFilters) {
             const { options, label: name, attribute_code: group } = filter;
 
             // If this aggregation is not a possible filter, just back out.

package/lib/talons/RootComponents/Category/categoryContent.gql.js

@@ -13,6 +13,7 @@ export const GET_PRODUCT_FILTERS_BY_CATEGORY = gql`
                     label
                     value
                 }
+                position
             }
         }
     }

package/lib/talons/RootComponents/Product/productDetailFragment.gql.js

@@ -60,12 +60,14 @@ export const ProductDetailsFragment = gql`
                 }
                 data_type
                 is_system
-                is_visible_on_front
                 entity_type
                 ui_input {
                     ui_input_type
                     is_html_allowed
                 }
+                ... on ProductAttributeMetadata {
+                    used_in_components
+                }
             }
         }
         ... on ConfigurableProduct {
@@ -138,12 +140,14 @@ export const ProductDetailsFragment = gql`
                             }
                             data_type
                             is_system
-                            is_visible_on_front
                             entity_type
                             ui_input {
                                 ui_input_type
                                 is_html_allowed
                             }
+                            ... on ProductAttributeMetadata {
+                                used_in_components
+                            }
                         }
                     }
                 }

package/lib/talons/SearchPage/searchPage.gql.js

@@ -21,6 +21,7 @@ export const GET_PRODUCT_FILTERS_BY_SEARCH = gql`
                     label
                     value
                 }
+                position
             }
         }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magento/peregrine",
-  "version": "12.2.0-alpha.1",
+  "version": "12.2.0",
   "publishConfig": {
     "access": "public"
   },