FIX#PWA-3180 Layered navigation Options are still visible even when n…

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

packages/venia-ui/lib/RootComponents/Category/categoryContent.js

@@ -50,6 +50,7 @@ const CategoryContent = props => {
         categoryName,
         categoryDescription,
         filters,
+        setFilterOptions,
         items,
         totalCount,
         totalPagesFromData
@@ -79,7 +80,7 @@ const CategoryContent = props => {
     ) : null;
 
     const sidebar = shouldShowFilterButtons ? (
-        <FilterSidebar filters={filters} />
+        <FilterSidebar filters={filters} setFilterOptions={setFilterOptions} />
     ) : shouldShowFilterShimmer ? (
         <FilterSidebarShimmer />
     ) : null;

packages/venia-ui/lib/components/FilterSidebar/__tests__/filterSidebar.spec.js

@@ -51,6 +51,8 @@ const mockHandleApply = jest.fn();
 
 const mockScrollTo = jest.fn();
 
+const mockFilterOptions = jest.fn();
+
 const mockGetBoundingClientRect = jest.fn();
 
 let mockFilterState;
@@ -125,21 +127,24 @@ const Component = () => {
 
 const givenDefaultValues = () => {
     inputProps = {
-        filters: []
+        filters: [],
+        setFilterOptions: mockFilterOptions
     };
 
     mockFilterState = new Map();
 };
 
 const givenFilters = () => {
     inputProps = {
-        filters: mockFilters
+        filters: mockFilters,
+        setFilterOptions: mockFilterOptions
     };
 };
 
 const givenSelectedFilters = () => {
     inputProps = {
-        filters: mockFilters
+        filters: mockFilters,
+        setFilterOptions: mockFilterOptions
     };
 
     mockFilterState = new Map([['group', 'item']]);
@@ -148,7 +153,8 @@ const givenSelectedFilters = () => {
 const givenFiltersAndAmountToShow = () => {
     inputProps = {
         filters: mockFilters,
-        filterCountToOpen: mockFiltersOpenCount
+        filterCountToOpen: mockFiltersOpenCount,
+        setFilterOptions: mockFilterOptions
     };
 };
 

packages/venia-ui/lib/components/FilterSidebar/filterSidebar.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback, useRef } from 'react';
+import React, { useMemo, useCallback, useRef, useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { array, arrayOf, shape, string, number } from 'prop-types';
 import { useFilterSidebar } from '@magento/peregrine/lib/talons/FilterSidebar';
@@ -17,7 +17,7 @@ const SCROLL_OFFSET = 150;
  * @param {Object} props.filters - filters to display
  */
 const FilterSidebar = props => {
-    const { filters, filterCountToOpen } = props;
+    const { filters, filterCountToOpen, setFilterOptions } = props;
     const talonProps = useFilterSidebar({ filters });
     const {
         filterApi,
@@ -50,6 +50,12 @@ const FilterSidebar = props => {
         [handleApply, filterRef]
     );
 
+    useEffect(() => {
+        if (filterState) {
+            setFilterOptions(filterState);
+        }
+    }, [filterState, setFilterOptions]);
+
     const filtersList = useMemo(
         () =>
             Array.from(filterItems, ([group, items], iteration) => {