Merge branch 'develop' into PWA-3233

packages/extensions/experience-platform-connector/src/__tests__/__snapshots__/utils.spec.js.snap

@@ -47,6 +47,7 @@ Array [
       },
       "productType": "ConfigurableProduct",
       "sku": "VSK02",
+      "topLevelSku": "VSK02",
     },
     "quantity": 1,
   },
@@ -82,6 +83,7 @@ Array [
       },
       "productType": "SimpleProduct",
       "sku": "VA17-SI-NA",
+      "topLevelSku": "VA17-SI-NA",
     },
     "quantity": 2,
   },
@@ -130,6 +132,7 @@ Array [
       },
       "productType": "ConfigurableProduct",
       "sku": "VA04",
+      "topLevelSku": "VA04",
     },
     "quantity": 3,
   },

packages/extensions/experience-platform-connector/src/handlers/__tests__/__snapshots__/shoppingMiniCartView.spec.js.snap

@@ -47,6 +47,7 @@ Object {
         },
         "productType": "ConfigurableProduct",
         "sku": "VSK02",
+        "topLevelSku": "VSK02",
       },
       "quantity": 1,
     },
@@ -78,6 +79,7 @@ Object {
         },
         "productType": "SimpleProduct",
         "sku": "VA17-SI-NA",
+        "topLevelSku": "VA17-SI-NA",
       },
       "quantity": 2,
     },
@@ -122,6 +124,7 @@ Object {
         },
         "productType": "ConfigurableProduct",
         "sku": "VA04",
+        "topLevelSku": "VA04",
       },
       "quantity": 3,
     },

packages/extensions/experience-platform-connector/src/handlers/__tests__/shoppingCartPageView.spec.js

@@ -81,6 +81,7 @@ describe('handle()', () => {
                     },
                     "productType": "ConfigurableProduct",
                     "sku": "VSK02",
+                    "topLevelSku": "VSK02",
                   },
                   "quantity": 1,
                 },
@@ -116,6 +117,7 @@ describe('handle()', () => {
                     },
                     "productType": "SimpleProduct",
                     "sku": "VA17-SI-NA",
+                    "topLevelSku": "VA17-SI-NA",
                   },
                   "quantity": 2,
                 },
@@ -164,6 +166,7 @@ describe('handle()', () => {
                     },
                     "productType": "ConfigurableProduct",
                     "sku": "VA04",
+                    "topLevelSku": "VA04",
                   },
                   "quantity": 3,
                 },

packages/extensions/experience-platform-connector/src/handlers/__tests__/startCheckout.spec.js

@@ -96,6 +96,7 @@ describe('handle()', () => {
                     },
                     "productType": "ConfigurableProduct",
                     "sku": "VP08",
+                    "topLevelSku": "VP08",
                   },
                   "quantity": 3,
                 },
@@ -138,6 +139,7 @@ describe('handle()', () => {
                     },
                     "productType": "ConfigurableProduct",
                     "sku": "VA09",
+                    "topLevelSku": "VA09",
                   },
                   "quantity": 1,
                 },
@@ -173,6 +175,7 @@ describe('handle()', () => {
                     },
                     "productType": "SimpleProduct",
                     "sku": "VA22-SI-NA",
+                    "topLevelSku": "VA22-SI-NA",
                   },
                   "quantity": 1,
                 },

packages/extensions/experience-platform-connector/src/utils.js

@@ -82,6 +82,7 @@ export const getFormattedProducts = products => {
                   product: {
                       name: name,
                       sku: sku,
+                      topLevelSku: product.sku,
                       productType: type,
                       pricing: {
                           regularPrice: prices.price.value,

packages/peregrine/lib/hooks/useDropdown.js

@@ -14,7 +14,7 @@ export const useDropdown = () => {
     const triggerRef = useRef(null);
     const [expanded, setExpanded] = useState(false);
 
-    // collapse on mousedown outside of the element and trigger.
+    // collapse on mousedown or tab outside of the element and trigger.
     const maybeCollapse = useCallback(({ target }) => {
         const isOutsideElement =
             !elementRef.current || !elementRef.current.contains(target);
@@ -27,7 +27,7 @@ export const useDropdown = () => {
     }, []);
 
     // add listener to document, as an effect
-    useEventListener(globalThis.document, 'mousedown', maybeCollapse);
+    useEventListener(globalThis.document, 'click', maybeCollapse);
 
     /**
      * The object returned contains the pieces needed to add the dropdown logic to your components

packages/peregrine/lib/talons/MagentoRoute/magentoRoute.gql.js

@@ -12,6 +12,7 @@ export const RESOLVE_URL = gql`
             # eslint-disable-next-line @graphql-eslint/require-id-when-available
             ... on ProductInterface {
                 uid
+                sku
                 __typename
             }
             # eslint-disable-next-line @graphql-eslint/require-id-when-available

packages/peregrine/lib/talons/RootComponents/Category/__tests__/__snapshots__/useCategoryContent.spec.js.snap

@@ -5,6 +5,7 @@ Object {
   "availableSortMethods": null,
   "categoryDescription": "Jewelry category",
   "categoryName": "Jewelry",
+  "filterOptions": undefined,
   "filters": null,
   "items": Array [
     null,
@@ -17,6 +18,7 @@ Object {
     null,
     null,
   ],
+  "setFilterOptions": [Function],
   "totalCount": null,
   "totalPagesFromData": null,
 }
@@ -32,6 +34,7 @@ Object {
   ],
   "categoryDescription": "Jewelry category",
   "categoryName": "Jewelry",
+  "filterOptions": undefined,
   "filters": Array [
     Object {
       "label": "Label",
@@ -47,6 +50,7 @@ Object {
       "name": "Necklace",
     },
   ],
+  "setFilterOptions": [Function],
   "totalCount": 2,
   "totalPagesFromData": 1,
 }

packages/peregrine/lib/talons/RootComponents/Category/__tests__/useCategoryContent.spec.js

@@ -26,6 +26,18 @@ jest.mock('@apollo/client', () => {
     };
 });
 
+const mockGetFiltersAttributeCode = {
+    data: {
+        products: {
+            aggregations: [
+                {
+                    label: 'Label'
+                }
+            ]
+        }
+    }
+};
+
 const mockProductFiltersByCategoryData = {
     data: {
         products: {
@@ -91,21 +103,22 @@ const mockCategoryData = {
 
 const mockGetSortMethods = jest.fn();
 const mockGetFilters = jest.fn();
+const mockfilterData = jest.fn();
 
 jest.mock('@magento/peregrine/lib/context/eventing', () => ({
     useEventingContext: jest.fn().mockReturnValue([{}, { dispatch: jest.fn() }])
 }));
 
 const Component = props => {
     const talonprops = useCategoryContent(props);
-
     return <i {...talonprops} />;
 };
 
 useQuery.mockReturnValue({ data: mockCategoryData });
 describe('useCategoryContent tests', () => {
     it('returns the proper shape', () => {
         useLazyQuery
+            .mockReturnValueOnce([mockfilterData, mockGetFiltersAttributeCode])
             .mockReturnValueOnce([
                 mockGetFilters,
                 mockProductFiltersByCategoryData
@@ -124,6 +137,7 @@ describe('useCategoryContent tests', () => {
 
     it('handles default category id', () => {
         useLazyQuery
+            .mockReturnValueOnce([mockfilterData, mockGetFiltersAttributeCode])
             .mockReturnValueOnce([
                 mockGetFilters,
                 mockProductFiltersByCategoryData

packages/peregrine/lib/talons/RootComponents/Category/categoryContent.gql.js

@@ -1,6 +1,6 @@
 import { gql } from '@apollo/client';
 
-export const GET_PRODUCT_FILTERS_BY_CATEGORY = gql`
+const GET_PRODUCT_FILTERS_BY_CATEGORY = gql`
     query getProductFiltersByCategory(
         $categoryIdFilter: FilterEqualTypeInput!
     ) {
@@ -11,9 +11,8 @@ export const GET_PRODUCT_FILTERS_BY_CATEGORY = gql`
                 attribute_code
                 options {
                     label
-                    value
+                    count
                 }
-                position
             }
         }
     }

packages/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js

@@ -1,5 +1,5 @@
-import { useEffect } from 'react';
-import { useLazyQuery, useQuery } from '@apollo/client';
+import { useEffect, useState } from 'react';
+import { useLazyQuery, useQuery, gql } from '@apollo/client';
 
 import mergeOperations from '../../../util/shallowMerge';
 import { useEventingContext } from '../../../context/eventing';
@@ -29,15 +29,98 @@ export const useCategoryContent = props => {
         getCategoryAvailableSortMethodsQuery
     } = operations;
 
-    const placeholderItems = Array.from({ length: pageSize }).fill(null);
+    const [
+        getFiltersAttributeCode,
+        { data: filterAttributeData }
+    ] = useLazyQuery(getProductFiltersByCategoryQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
 
-    const [getFilters, { data: filterData }] = useLazyQuery(
-        getProductFiltersByCategoryQuery,
-        {
-            fetchPolicy: 'cache-and-network',
-            nextFetchPolicy: 'cache-first'
+    useEffect(() => {
+        if (categoryId) {
+            getFiltersAttributeCode({
+                variables: {
+                    categoryIdFilter: {
+                        eq: categoryId
+                    }
+                }
+            });
         }
-    );
+    }, [categoryId, getFiltersAttributeCode]);
+
+    const availableFilterData = filterAttributeData
+        ? filterAttributeData.products?.aggregations
+        : null;
+    const availableFilters = availableFilterData
+        ?.map(eachitem => eachitem.attribute_code)
+        ?.sort();
+
+    // Function to generate the dynamic query based on filter parameters
+    const generateDynamicFiltersQuery = filterParams => {
+        const categoryUid = `category_uid:{eq:"${categoryId}"}`;
+        let filterConditions = Object.keys(filterParams)
+            .map(key => {
+                const condition = Array.isArray(filterParams[key])
+                    ? 'in'
+                    : 'eq';
+                const value = Array.isArray(filterParams[key])
+                    ? JSON.stringify(filterParams[key])
+                    : `"${filterParams[key]}"`;
+                return `${key}:{${condition}:${value}}`;
+            })
+            .join(',');
+
+        filterConditions = [categoryUid, filterConditions].join(',');
+
+        return gql`
+      query getProductFiltersByCategory{
+        products(
+          filter: {
+            ${filterConditions}
+          }
+        ) {
+          aggregations {
+            label
+            attribute_code
+            count
+            options {
+              label
+              value
+              count
+            }
+          }
+        }
+      }
+    `;
+    };
+
+    const [filterOptions, setFilterOptions] = useState();
+
+    const selectedFilters = {};
+
+    if (filterOptions) {
+        for (const [group, items] of filterOptions) {
+            availableFilters?.map(eachitem => {
+                if (eachitem === group && eachitem !== 'price') {
+                    const sampleArray = [];
+                    for (const item of items) {
+                        sampleArray.push(item.value);
+                    }
+                    selectedFilters[group] = sampleArray;
+                }
+            });
+        }
+    }
+
+    const dynamicQuery = generateDynamicFiltersQuery(selectedFilters);
+
+    const placeholderItems = Array.from({ length: pageSize }).fill(null);
+
+    const [getFilters, { data: filterData }] = useLazyQuery(dynamicQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
 
     const [getSortMethods, { data: sortData }] = useLazyQuery(
         getCategoryAvailableSortMethodsQuery,
@@ -58,20 +141,13 @@ export const useCategoryContent = props => {
             }
         }
     );
-
     const [, { dispatch }] = useEventingContext();
 
     useEffect(() => {
         if (categoryId) {
-            getFilters({
-                variables: {
-                    categoryIdFilter: {
-                        eq: categoryId
-                    }
-                }
-            });
+            getFilters();
         }
-    }, [categoryId, getFilters]);
+    }, [categoryId, filterOptions, getFilters]);
 
     useEffect(() => {
         if (categoryId) {
@@ -85,7 +161,7 @@ export const useCategoryContent = props => {
         }
     }, [categoryId, getSortMethods]);
 
-    const filters = filterData ? filterData.products.aggregations : null;
+    const filters = filterData ? filterData.products?.aggregations : null;
     const items = data ? data.products.items : placeholderItems;
     const totalPagesFromData = data
         ? data.products.page_info.total_pages
@@ -122,6 +198,8 @@ export const useCategoryContent = props => {
         categoryName,
         categoryDescription,
         filters,
+        filterOptions,
+        setFilterOptions,
         items,
         totalCount,
         totalPagesFromData