@riosst100/pwa-marketplace 2.3.4 → 2.3.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "2.3.4",
+  "version": "2.3.6",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {

package/src/components/FilterTop/FilterBlockList/filterTopItem.js

@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 
 const FilterTopItem = props => {
     const { setFilterBy, filterBy, filterApi, group, item, onApply, labels, activeFilters, search } = props;
-    const { removeGroup, toggleItem } = filterApi;
+    const { removeGroup, toggleItem, clear } = filterApi;
     const { title, value } = item;
 
     const classes = useStyle(defaultClasses, props.classes);
@@ -14,8 +14,11 @@ const FilterTopItem = props => {
 
     const handleOnchange = useCallback(
         e => {
+            filterApi.clear();
+
             if (group != "category_uid") {
                 removeGroup({ group });
+                // clear();
                 if (e === item.value) {
                     toggleItem({ group, item });
                 }

package/src/components/ProductContent/productContent.js

@@ -67,6 +67,12 @@ const ProductContent = props => {
     const shouldShowFilterButtons = filters && filters.length;
     const shouldShowFilterShimmer = filters === null;
 
+    // console.log('shouldShowFilterButtons')
+    // console.log(shouldShowFilterButtons)
+
+    // console.log('filters')
+    // console.log(filters)
+
     const sidebar = shouldShowFilterButtons ? (
         <FilterSidebar hideFilters={false} children={[]} filters={filters} allowedFilters={[]} />
     ) : shouldShowFilterShimmer ? (

package/src/components/ShopBySets/shopBySets.js

@@ -168,8 +168,8 @@ const ShopBySets = props => {
         // alpha = availableGroups;
     }
 
-    console.log('==productType')
-    console.log(productType)
+    // console.log('==productType')
+    // console.log(productType)
 
     let title = "A2ll Sets";
     if (productType == "expansion_sets") {

package/src/overwrites/peregrine/lib/talons/RootComponents/Category/categoryContent.gql.js

@@ -2,9 +2,9 @@ import { gql } from '@apollo/client';
 
 export const GET_PRODUCT_FILTERS_BY_CATEGORY = gql`
     query getProductFiltersByCategory(
-        $categoryIdFilter: FilterEqualTypeInput!
+        $filters: ProductAttributeFilterInput!
     ) {
-        products(filter: { category_uid: $categoryIdFilter }) {
+        products(filter: $filters) {
             aggregations {
                 label
                 count
@@ -89,10 +89,33 @@ export const GET_STORE_CONFIG_DATA = gql`
     }
 `;
 
+export const GET_FILTER_INPUTS = gql`
+    query GetFilterInputsForCategory {
+        __type(name: "ProductAttributeFilterInput") {
+            inputFields {
+                name
+                type {
+                    name
+                }
+            }
+        }
+    }
+`;
+
+export const GET_MASTER_ATTRIBUTES = gql`
+    query GetMasterAttributes {
+        masterAttributes {
+            attribute_code
+        }
+    }
+`;
+
 
 export default {
     getCategoryContentQuery: GET_CATEGORY_CONTENT,
     getProductFiltersByCategoryQuery: GET_PRODUCT_FILTERS_BY_CATEGORY,
     getCategoryAvailableSortMethodsQuery: GET_CATEGORY_AVAILABLE_SORT_METHODS,
-    getStoreConfigQuery: GET_STORE_CONFIG_DATA
+    getStoreConfigQuery: GET_STORE_CONFIG_DATA,
+    getFilterInputsQuery: GET_FILTER_INPUTS,
+    getMasterAttributesQuery: GET_MASTER_ATTRIBUTES
 };

package/src/overwrites/peregrine/lib/talons/RootComponents/Category/useCategory.js

@@ -107,9 +107,9 @@ export const useCategory = props => {
         loading: introspectionLoading
     } = useQuery(getFilterInputsQuery);
 
-    console.log(introspectionCalled)
-    console.log(introspectionLoading)
-    console.log(introspectionData)
+    // console.log(introspectionCalled)
+    // console.log(introspectionLoading)
+    // console.log(introspectionData)
 
     // Create a type map we can reference later to ensure we pass valid args
     // to the graphql query.

package/src/overwrites/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js

@@ -3,8 +3,12 @@ import { useLazyQuery, useQuery } from '@apollo/client';
 
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
-
+import { useLocation } from 'react-router-dom';
 import DEFAULT_OPERATIONS from './categoryContent.gql';
+import {
+    getFiltersFromSearch,
+    getFilterInput
+} from '@magento/peregrine/lib/talons/FilterModal/helpers';
 
 /**
  * Returns props necessary to render the categoryContent component.
@@ -27,7 +31,9 @@ export const useCategoryContent = props => {
         getCategoryContentQuery,
         getProductFiltersByCategoryQuery,
         getCategoryAvailableSortMethodsQuery,
-        getStoreConfigQuery
+        getStoreConfigQuery,
+        getFilterInputsQuery,
+        getMasterAttributesQuery
     } = operations;
 
     const placeholderItems = Array.from({ length: pageSize }).fill(null);
@@ -72,18 +78,75 @@ export const useCategoryContent = props => {
     );
 
     const [, { dispatch }] = useEventingContext();
+    const { search } = useLocation();
+
+    const {
+        called: introspectionCalled,
+        data: introspectionData,
+        loading: introspectionLoading
+    } = useQuery(getFilterInputsQuery);
+
+    const filterTypeMap = useMemo(() => {
+        const typeMap = new Map();
+        if (introspectionData) {
+            introspectionData.__type.inputFields.forEach(({ name, type }) => {
+                typeMap.set(name, type.name);
+            });
+        }
+        return typeMap;
+    }, [introspectionData]);
+
+    // MASTER ATTRIBUTES
+    const {
+        called: masterAttributesCalled,
+        data: masterAttributesData,
+        loading: masterAttributesLoading
+    } = useQuery(getMasterAttributesQuery,
+    {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const masterAttributes = useMemo(() => {
+        const masterAttributes = [];
+        
+        if (masterAttributesData) {
+            masterAttributesData.masterAttributes.forEach(({ attribute_code }) => {
+                masterAttributes.push(attribute_code);
+            });
+        }
+
+        return masterAttributes;
+    }, [masterAttributesData]);
+    
 
     useEffect(() => {
         if (categoryId) {
+
+            // categoryIdFilter: {
+            //     eq: categoryId
+            // }
+            if (!filterTypeMap.size) {
+                return;
+            }
+    
+            const filters = getFiltersFromSearch(search);
+    
+            // Construct the filter arg object.
+            const newFilters = {};
+            filters.forEach((values, key) => {
+                if (masterAttributes.includes(key)) {
+                    newFilters[key] = getFilterInput(values, filterTypeMap.get(key));
+                }
+            });
+
             getFilters({
                 variables: {
-                    categoryIdFilter: {
-                        eq: categoryId
-                    }
+                    filters: newFilters
                 }
             });
         }
-    }, [categoryId, getFilters]);
+    }, [categoryId, getFilters, filterTypeMap, search, masterAttributes]);
 
     useEffect(() => {
         if (categoryId) {
@@ -97,6 +160,9 @@ export const useCategoryContent = props => {
         }
     }, [categoryId, getSortMethods]);
 
+    // console.log('filterData')
+    // console.log(filterData)
+
     const rawFilters = filterData ? filterData.products.aggregations : null;
     const items = data ? data.products.items : placeholderItems;
     const category =
@@ -110,8 +176,14 @@ export const useCategoryContent = props => {
 
     const filters = [];
 
+    // console.log('rawFilters')
+    // console.log(rawFilters)
+
     rawFilters && rawFilters.map((filter, index) => {
 
+    //     console.log('filter')
+    // console.log(filter)
+
         const filterOptions = [];
         let label = filter.label;
         if (filter.attribute_code == "category_uid") {

package/src/overwrites/venia-ui/lib/RootComponents/Category/categoryContent.js

@@ -57,8 +57,6 @@ const CategoryContent = props => {
 
     const history = useHistory();
 
-    console.log("categoryId: "+categoryId)
-
     const talonProps = useCategoryContent({
         categoryId,
         data,
@@ -165,6 +163,12 @@ const CategoryContent = props => {
         <FilterModal filters={filters} />
     ) : null;
 
+    // console.log('filters')
+    // console.log(filters)
+
+    // console.log('shouldShowFilterButtons')
+    // console.log(shouldShowFilterButtons)
+
     const sidebar = shouldShowFilterButtons ? (
         <FilterSidebar hideFilters={category && category.hide_filters ? true : false} children={children} filters={filters} allowedFilters={category ? category.allowed_filters : []} />
     ) : shouldShowFilterShimmer ? (

package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterItemRadioGroup.js

@@ -15,10 +15,14 @@ import { useFieldApi } from 'informed';
 import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
 
 const FilterItemRadioGroup = props => {
-    const { filterApi, filterState, group, items, onApply, labels } = props;
+    const { filterApi, filterState, group, items, onApply, labels,isListExpanded = true, itemCountToShow = 5 } = props;
 
     const radioItems = useMemo(() => {
-        return items.map(item => {
+        return items.map((item,index) => {
+            if (!isListExpanded && index >= itemCountToShow) {
+                return null;
+            }
+
             const code = `item-${group}-${item.value}`;
             return (
                 <FilterItemRadio
@@ -32,7 +36,7 @@ const FilterItemRadioGroup = props => {
                 />
             );
         });
-    }, [filterApi, filterState, group, items, labels, onApply]);
+    }, [filterApi, filterState, group, items, labels, onApply,isListExpanded,itemCountToShow]);
 
     const fieldValue = useMemo(() => {
         if (filterState) {

package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterList.js

@@ -103,6 +103,7 @@ const FilterList = props => {
     // search value is not referenced, so this array is stable
     const itemElements = useMemo(() => {
         // if (filterFrontendInput === 'boolean') {
+            
             const key = `item-${group}`;
             return (
                 <li
@@ -118,6 +119,8 @@ const FilterList = props => {
                         items={items}
                         onApply={onApply}
                         labels={labels}
+                        isListExpanded={isListExpanded}
+                        itemCountToShow={itemCountToShow}
                     />
                 </li>
             );

package/src/overwrites/venia-ui/lib/components/FilterSidebar/filterSidebar.js

@@ -33,6 +33,12 @@ const FilterSidebar = props => {
         handleReset
     } = talonProps;
 
+    // console.log('RIO')
+    // console.log('filters')
+    // console.log(filters)
+    // console.log('filterCountToOpen'+filterCountToOpen)
+    // console.log('hideFilters'+hideFilters)
+
     const filterRef = useRef();
     const classes = useStyle(defaultClasses, props.classes);
 
@@ -80,9 +86,9 @@ const FilterSidebar = props => {
 
     const allowedFiltersArr = [];
 
-    // allowedFilters?.length && allowedFilters.map((val, index) => {
-    //     allowedFiltersArr.push(val.code);
-    // });
+    allowedFilters?.length && allowedFilters.map((val, index) => {
+        allowedFiltersArr.push(val.code);
+    });
 
     const filtersList = useMemo(
         () =>
@@ -92,24 +98,26 @@ const FilterSidebar = props => {
                 const frontendInput = filterFrontendInput.get(group);
 
                 const hideFilters = ['trains','trains_locomotives','trains_supplies_type','lof_preorder','auction','special_price','sc_baseball_inserts','sc_baseball_parallel','sale','sc_set_type','sc_brands'];
-                if (!hideFilters.includes(group) && groupName) {
+                if (!allowedFiltersArr?.length || filterState.size && allowedFiltersArr.length || !filterState.size && allowedFiltersArr.length && allowedFiltersArr.includes(group)) {
+                    if (!hideFilters.includes(group) && groupName) {
                     
-                // if (!allowedFiltersArr?.length && group != "category_uid" || allowedFiltersArr?.length && allowedFiltersArr.includes(group)) {
-
-
-                    return (
-                        <FilterBlock
-                            key={group}
-                            filterApi={filterApi}
-                            filterState={blockState}
-                            filterFrontendInput={frontendInput}
-                            group={group}
-                            items={items}
-                            name={groupName}
-                            onApply={group == "category_uid" ? handleCategoryApplyFilter : handleApplyFilter}
-                            initialOpen={true}
-                        />
-                    );
+                    // if (!allowedFiltersArr?.length && group != "category_uid" || allowedFiltersArr?.length && allowedFiltersArr.includes(group)) {
+
+
+                        return (
+                            <FilterBlock
+                                key={group}
+                                filterApi={filterApi}
+                                filterState={blockState}
+                                filterFrontendInput={frontendInput}
+                                group={group}
+                                items={items}
+                                name={groupName}
+                                onApply={group == "category_uid" ? handleCategoryApplyFilter : handleApplyFilter}
+                                initialOpen={true}
+                            />
+                        );
+                    }
                 }
             }),
         [

package/src/talons/CollectibleGameSets/useCollectibleGameSets.js

@@ -91,8 +91,8 @@ export const useCollectibleGameSets = props => {
     // const availableReleaseYears = collectibleGameSets && collectibleGameSets.length ? collectibleGameSets.map(({ data }) => data.release_year) : [];
     const availableReleaseYears = [];
 
-    console.log('collectibleGameSets')
-    console.log(collectibleGameSets)
+    // console.log('collectibleGameSets')
+    // console.log(collectibleGameSets)
 
     const filteredCollectibleGameSets = useMemo(() => {
         if (!collectibleGameSets) {

package/src/talons/SellerProducts/useProductContent.js

@@ -89,8 +89,8 @@ export const useProductContent = props => {
         }
     }, [sellerId, getSortMethods]);
 
-    console.log('data')
-    console.log(data)
+    // console.log('data')
+    // console.log(data)
 
     const rawFilters = filterData ? filterData.products.aggregations : null;
     const items = data ? data.items : placeholderItems;

package/src/talons/SellerProducts/useSellerProducts.js

@@ -76,9 +76,9 @@ export const useSellerProducts = props => {
         data
     } = queryResponse;
 
-    console.log('===data===')
-    console.log(data)
-    console.log('======')
+    // console.log('===data===')
+    // console.log(data)
+    // console.log('======')
 
     const {
         called: categoryCalled,
@@ -154,8 +154,8 @@ export const useSellerProducts = props => {
 
     // Run the category query immediately and whenever its variable values change.
     useEffect(() => {
-        console.log('=categoryData=')
-        console.log(categoryData)
+        // console.log('=categoryData=')
+        // console.log(categoryData)
         if (!categoryData) {
             return;
         }

package/src/talons/SetsData/useSetsData.js

@@ -167,8 +167,8 @@ export const useSetsData = props => {
     // availableYears = availableYears && availableYears.length ? availableYears.slice().sort((a, b) =>a.group.toLowerCase().localeCompare(b.group.toLowerCase())) : [];
     // const groupByYears = setsData && setsData.length ? setsData.map(({ group,release_year }) => release_year) : [];
 
-    console.log('availableYears')
-    console.log(availableYears)
+    // console.log('availableYears')
+    // console.log(availableYears)
 
     // const availableLeagues = setsData && setsData.length ? setsData.map(({ sets }) => setsData.map(({ sc_league }) => sc_league)) : [];
 // console.log(availableLeagues)