Bug#pwa 3180

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

@@ -3,14 +3,31 @@ import { gql } from '@apollo/client';
 export const GET_PRODUCT_FILTERS_BY_CATEGORY = gql`
     query getProductFiltersByCategory(
         $categoryIdFilter: FilterEqualTypeInput!
+        $fashionColorFilter: FilterEqualTypeInput!
+        $fashionMaterialFilter: FilterEqualTypeInput!
+        $fashionSizeFilter: FilterEqualTypeInput!
+        $fashionStyleFilter: FilterEqualTypeInput!
+        $hasVideoFilter: FilterEqualTypeInput!
+        $fashionPriceFilter: FilterRangeTypeInput!
     ) {
-        products(filter: { category_uid: $categoryIdFilter }) {
+        products(
+            filter: {
+                category_uid: $categoryIdFilter
+                fashion_color: $fashionColorFilter
+                fashion_material: $fashionMaterialFilter
+                fashion_size: $fashionSizeFilter
+                fashion_style: $fashionStyleFilter
+                has_video: $hasVideoFilter
+                price: $fashionPriceFilter
+            }
+        ) {
             aggregations {
                 label
                 count
                 attribute_code
                 options {
                     label
+                    count
                     value
                 }
                 position

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

@@ -1,10 +1,13 @@
-import { useEffect } from 'react';
+import { useEffect, useState, createContext } from 'react';
 import { useLazyQuery, useQuery } from '@apollo/client';
 
 import mergeOperations from '../../../util/shallowMerge';
 import { useEventingContext } from '../../../context/eventing';
-
+import { useFilterState } from '../../FilterModal/useFilterState';
+// pwa-studio/packages/peregrine/lib/talons/FilterModal/useFilterState.js
+//pwa-studio/packages/peregrine/lib/talons/RootComponents/FilterModal/useFilterState
 import DEFAULT_OPERATIONS from './categoryContent.gql';
+import { logMissingFieldErrors } from '@apollo/client/core/ObservableQuery';
 
 /**
  * Returns props necessary to render the categoryContent component.
@@ -31,6 +34,8 @@ export const useCategoryContent = props => {
 
     const placeholderItems = Array.from({ length: pageSize }).fill(null);
 
+    const [filterOptions, setFilterOptions] = useState();
+
     const [getFilters, { data: filterData }] = useLazyQuery(
         getProductFiltersByCategoryQuery,
         {
@@ -62,16 +67,81 @@ export const useCategoryContent = props => {
     const [, { dispatch }] = useEventingContext();
 
     useEffect(() => {
-        if (categoryId) {
+        let fashionColor = '';
+        let fashionMaterial = '';
+        let fashionSize = '';
+        let fashionStyle = '';
+        let hasVideo = '';
+        let priceValue = {
+            from: '',
+            to: ''
+        };
+        let filterIteration = true;
+
+        //{from: "40" to: "59"}
+
+        if (filterOptions) {
+            for (const [group, items] of filterOptions) {
+                if (group === 'fashion_color') {
+                    const [item] = items;
+                    fashionColor = item.value;
+                }
+                if (group === 'fashion_material') {
+                    const [item] = items;
+                    fashionMaterial = item.value;
+                }
+                if (group === 'fashion_size') {
+                    const [item] = items;
+                    fashionSize = item.value;
+                }
+                if (group === 'fashion_style') {
+                    const [item] = items;
+                    fashionStyle = item.value;
+                }
+
+                if (group === 'has_video') {
+                    const [item] = items;
+                    hasVideo = item.value;
+                }
+                if (group === 'price') {
+                    const [item] = items;
+                    filterIteration = item;
+                    const valueAdd = item?.value?.split('_');
+
+                    if (valueAdd) {
+                        priceValue.from = valueAdd[0];
+                        priceValue.to = valueAdd[1];
+                    }
+                }
+            }
+        }
+
+        if (categoryId && filterIteration) {
             getFilters({
                 variables: {
                     categoryIdFilter: {
                         eq: categoryId
-                    }
+                    },
+                    fashionColorFilter: {
+                        eq: fashionColor
+                    },
+                    fashionMaterialFilter: {
+                        eq: fashionMaterial
+                    },
+                    fashionSizeFilter: {
+                        eq: fashionSize
+                    },
+                    fashionStyleFilter: {
+                        eq: fashionStyle
+                    },
+                    hasVideoFilter: {
+                        eq: hasVideo
+                    },
+                    fashionPriceFilter: priceValue
                 }
             });
         }
-    }, [categoryId, getFilters]);
+    }, [categoryId, filterOptions, getFilters]);
 
     useEffect(() => {
         if (categoryId) {
@@ -85,6 +155,7 @@ export const useCategoryContent = props => {
         }
     }, [categoryId, getSortMethods]);
 
+    //console.log(filterData);
     const filters = filterData ? filterData.products.aggregations : null;
     const items = data ? data.products.items : placeholderItems;
     const totalPagesFromData = data
@@ -120,6 +191,8 @@ export const useCategoryContent = props => {
     return {
         availableSortMethods,
         categoryName,
+        filterOptions,
+        setFilterOptions,
         categoryDescription,
         filters,
         items,

packages/peregrine/lib/talons/SearchPage/searchPage.gql.js

@@ -27,6 +27,16 @@ export const GET_PRODUCT_FILTERS_BY_SEARCH = gql`
     }
 `;
 
+export const GET_SEARCH_TERM_DATA = gql`
+    query getSearchTermData($search: String) {
+        searchTerm(Search: $search) {
+            query_text
+            redirect
+            popularity
+        }
+    }
+`;
+
 export const PRODUCT_SEARCH = gql`
     query ProductSearch(
         $currentPage: Int = 1
@@ -106,6 +116,7 @@ export const GET_SEARCH_AVAILABLE_SORT_METHODS = gql`
 export default {
     getFilterInputsQuery: GET_FILTER_INPUTS,
     getPageSize: GET_PAGE_SIZE,
+    getSearchTermData: GET_SEARCH_TERM_DATA,
     getProductFiltersBySearchQuery: GET_PRODUCT_FILTERS_BY_SEARCH,
     getSearchAvailableSortMethods: GET_SEARCH_AVAILABLE_SORT_METHODS,
     productSearchQuery: PRODUCT_SEARCH

packages/peregrine/lib/talons/SearchPage/useSearchPage.js

@@ -26,6 +26,7 @@ export const useSearchPage = (props = {}) => {
     const {
         getFilterInputsQuery,
         getPageSize,
+        getSearchTermData,
         getProductFiltersBySearchQuery,
         getSearchAvailableSortMethods,
         productSearchQuery
@@ -44,6 +45,18 @@ export const useSearchPage = (props = {}) => {
         }
     );
 
+    const [getSearchTermMethod, { data: SearchTermQueryData }] = useLazyQuery(
+        getSearchTermData
+    );
+
+    if (SearchTermQueryData !== undefined) {
+        const [...redirectData] = [SearchTermQueryData];
+        const redirectUrl = redirectData[0].searchTerm?.redirect;
+        if (redirectUrl !== null) {
+            window.location.replace(redirectUrl);
+        }
+    }
+
     const pageSize = pageSizeData && pageSizeData.storeConfig.grid_per_page;
 
     const sortProps = useSort({ sortFromSearch: true });
@@ -231,6 +244,16 @@ export const useSearchPage = (props = {}) => {
         };
     }, [data, setTotalPages]);
 
+    useEffect(() => {
+        if (inputText) {
+            getSearchTermMethod({
+                variables: {
+                    search: inputText
+                }
+            });
+        }
+    }, [inputText, getSearchTermMethod]);
+
     useEffect(() => {
         if (inputText) {
             getSortMethods({
@@ -273,7 +296,7 @@ export const useSearchPage = (props = {}) => {
     useScrollTopOnChange(currentPage);
 
     const availableSortMethods = sortData
-        ? sortData.products.sort_fields.options
+        ? sortData.products.sort_fields?.options
         : null;
 
     return {

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

@@ -1,4 +1,10 @@
-import React, { Fragment, Suspense, useMemo, useRef } from 'react';
+import React, {
+    Fragment,
+    Suspense,
+    useMemo,
+    useRef,
+    createContext
+} from 'react';
 import { FormattedMessage } from 'react-intl';
 import { array, number, shape, string } from 'prop-types';
 
@@ -27,7 +33,7 @@ const FilterModal = React.lazy(() => import('../../components/FilterModal'));
 const FilterSidebar = React.lazy(() =>
     import('../../components/FilterSidebar')
 );
-
+export const FilterContext = createContext();
 const CategoryContent = props => {
     const {
         categoryId,
@@ -49,6 +55,8 @@ const CategoryContent = props => {
         availableSortMethods,
         categoryName,
         categoryDescription,
+        filterOptions,
+        setFilterOptions,
         filters,
         items,
         totalCount,
@@ -79,7 +87,11 @@ const CategoryContent = props => {
     ) : null;
 
     const sidebar = shouldShowFilterButtons ? (
-        <FilterSidebar filters={filters} />
+        <FilterSidebar
+            filters={filters}
+            setFilterOptions={setFilterOptions}
+            filterOptions
+        />
     ) : shouldShowFilterShimmer ? (
         <FilterSidebarShimmer />
     ) : null;

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

@@ -1,8 +1,9 @@
-import React, { useMemo, useCallback, useRef } from 'react';
+import React, { useMemo, useCallback, useRef, useContext } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { array, arrayOf, shape, string, number } from 'prop-types';
 import { useFilterSidebar } from '@magento/peregrine/lib/talons/FilterSidebar';
 
+import { FilterContext } from '../../RootComponents/Category/categoryContent';
 import { useStyle } from '../../classify';
 import LinkButton from '../LinkButton';
 import CurrentFilters from '../FilterModal/CurrentFilters';
@@ -17,7 +18,12 @@ const SCROLL_OFFSET = 150;
  * @param {Object} props.filters - filters to display
  */
 const FilterSidebar = props => {
-    const { filters, filterCountToOpen } = props;
+    const {
+        filters,
+        filterCountToOpen,
+        setFilterOptions,
+        filterOptions
+    } = props;
     const talonProps = useFilterSidebar({ filters });
     const {
         filterApi,
@@ -54,7 +60,12 @@ const FilterSidebar = props => {
         () =>
             Array.from(filterItems, ([group, items], iteration) => {
                 const blockState = filterState.get(group);
+
                 const groupName = filterNames.get(group);
+                if (filterState) {
+                    setFilterOptions(filterState);
+                }
+
                 const frontendInput = filterFrontendInput.get(group);
                 return (
                     <FilterBlock