@riosst100/pwa-marketplace 1.7.8 → 1.8.0

package/src/components/SportCardsSets/sportCardsSets.js

@@ -17,19 +17,24 @@ import Breadcrumbs from '@magento/venia-ui/lib/components/Breadcrumbs';
 const SportCardsSets = props => {
     const { categoryId } = props
 
+    const { location } = globalThis;
+
+    const query = new URLSearchParams(location.search);
+    const activeParam = query.get('active_tab') || null;
+
     const [active, setActive] = useState('all');
-    const [activeTab, setActiveTab] = useState('leagues');
+    const [activeTab, setActiveTab] = useState(activeParam ? activeParam : 'leagues');
     const [activeFilter, setActiveFilter] = useState('Major Baseball League');
+    const [activeBrand, setActiveBrand] = useState('all');
 
     const [searchQuery, setSearchQuery] = useState('');
 
     let availableLeagues = [];
-
-    const { location } = globalThis;
-
-    const query = new URLSearchParams(location.search);
+    let availableBrands = [];
+    
     const shopby = query.get('shopby') || null;
     const setType = query.get('set_type') || null;
+    const brandsFilter = query.get('sc_brands[filter]') || null;
 
     let defaultSort = {
         sortText: 'All (A-Z)',
@@ -54,10 +59,10 @@ const SportCardsSets = props => {
 
     const [currentSort] = sortProps;
 
-    // const [sortBy, setSortBy] = useState({
-    //     sortText: 'All (A-Z)',
-    //     value: 'all'
-    // });
+    const [sortBy, setSortBy] = useState({
+        sortText: 'All (A-Z)',
+        value: 'all'
+    });
 
 
     const classes = useStyle(defaultClasses);
@@ -111,6 +116,14 @@ const SportCardsSets = props => {
                                 availableLeagues.push(set.sc_league)
                             }
                         }
+
+                        if (set.sc_brands) {
+                            if (!availableBrands.includes(set.sc_brands)) {
+                                availableBrands.push(set.sc_brands)
+                            }
+                        }
+
+                        // availableBrands
                     })
                 }
             }
@@ -125,8 +138,6 @@ const SportCardsSets = props => {
         return result;
     }
 
-    // console.log(category)
-
     const setRelases = newSportCardsSets && newSportCardsSets.length && newSportCardsSets.map((setRelease, index) => {
         const { group, sets } = setRelease;
 
@@ -191,6 +202,33 @@ const SportCardsSets = props => {
         setSearchQuery('')
     }
 
+    const activeTabParam = query.get('active_tab') || null;
+
+    // useEffect(() => {
+        // if (query) {
+            // 
+            // if (activeTabParam) {
+                // if (activeTabParam && activeTab == "leagues") {
+                    
+                    // handleActiveTab(activeTabParam)
+                // }
+            // }
+
+            // const activeParam = query.get('active') || null;
+            // if (activeParam) {
+            //     return handleActive(activeTabParam)
+            // }
+    //         // const activeParam = query.get('active') || null;
+    //         // if (activeParam && activeParam != activeFilter) {
+    //         //     if (activeParam && active == "all") {
+    //                 // return handleActive(activeParam)
+    //         //     }
+    //         // }
+            
+        // }
+    //     return true;
+    // }, [activeTabParam]);
+
     const handleActiveFilter = (val) => {
         setActiveFilter(val);
 
@@ -210,35 +248,37 @@ const SportCardsSets = props => {
         }
     ];
 
-    if (shopby == "release_year") {
-        availableSortBy = [
-            {
-                'label': 'All (By Year)',
-                'value': 'date'
-            },
-            {
-                'label': 'Latest Sets',
-                'value': 'newest'
-            }
-        ];
+    // if (shopby == "release_year") {
+    //     availableSortBy = [
+    //         {
+    //             'label': 'All (By Year)',
+    //             'value': 'date'
+    //         },
+    //         {
+    //             'label': 'Latest Sets',
+    //             'value': 'newest'
+    //         }
+    //     ];
+
+    //     // alpha = availableGroups;
+    // }
 
-        // alpha = availableGroups;
-    }
+    // if (productType == "expansion_sets") {
+    //     // availableSortBy = [
+    //     //     {
+    //     //         'label': 'All (Expansion Sets)',
+    //     //         'value': 'all'
+    //     //     },
+    //     //     {
+    //     //         'label': 'Latest Sets',
+    //     //         'value': 'newest'
+    //     //     }
+    //     // ];
+
+    //     // alpha = availableGroups
+    // }
 
-    if (productType == "expansion_sets") {
-        // availableSortBy = [
-        //     {
-        //         'label': 'All (Expansion Sets)',
-        //         'value': 'all'
-        //     },
-        //     {
-        //         'label': 'Latest Sets',
-        //         'value': 'newest'
-        //     }
-        // ];
-
-        // alpha = availableGroups
-    }
+    let brandName = brandsFilter ? brandsFilter.split(',')[0] : '';
 
     let title = "By Release/Set";
     if (activeTab == "year") {
@@ -246,18 +286,15 @@ const SportCardsSets = props => {
     } else if (activeTab == "leagues") {
         title = "By Leagues";
     } else if (activeTab == "brand") {
-        title = "By Brand";
+        title = brandName;
     }
 
-    // console.log(availableLeagues)
-
-    availableLeagues.sort();
-
+    // availableLeagues.sort();
 
     return (
         <Fragment>
             <StoreTitle>{title}</StoreTitle>
-            <Breadcrumbs categoryId={categoryId} customPage={shopby == "expansion_sets" ? "Expansion Sets" : (shopby == "release_year" ? "By Year" : "By Release/Set")} />
+            <Breadcrumbs categoryId={categoryId} customPage={shopby == "release_year" ? "By Year" : "By Release/Set"} />
             {shopby == "release" ? <ul className={classes.nav}>
                 <li className={classes.nav_item}>
                     <button
@@ -268,7 +305,7 @@ const SportCardsSets = props => {
                         {activeTab == 'year' ? <b>By Year</b> : 'By Year'}
                     </button>
                 </li>
-                <li className={classes.nav_item}>
+                {/* <li className={classes.nav_item}>
                     <button
                         onClick={() => {
                             handleActiveTab('brand')
@@ -276,7 +313,7 @@ const SportCardsSets = props => {
                     >
                         {activeTab == 'brand' ? <b>By Brand</b> : 'By Brand'}
                     </button>
-                </li>
+                </li> */}
                 <li className={classes.nav_item}>
                     <button
                         onClick={() => {
@@ -323,8 +360,32 @@ const SportCardsSets = props => {
                         {activeFilter == group ? <b>{group}</b> : group}
                     </button>
                 </li>
-            ))}
-            </ul> : ''}
+            ))}</ul> : ''}
+            {/* {activeTab == "brand" && availableBrands && availableBrands.length ? <ul className={classes.nav}>
+                {availableBrands.map((group, index) => (
+                <li key={index} className={classes.nav_item}>
+                    <button
+                        onClick={() => {
+                            handleActiveFilter(group)
+                        }}
+                    >
+                        {activeFilter == group ? <b>{group}</b> : group}
+                    </button>
+                </li>
+            ))} */}
+            {/* <li>
+                <button
+                    className={cn(
+                        'rounded-md border border-solid border-gray-100 p-2 min-w-[28px]',
+                        'leading-4 font-medium text-base hover_bg-gray-50'
+                    )}
+                    onClick={() => {
+                        setActiveBrand('all')
+                    }}
+                >
+                    {active == 'all' ? <b>All</b> : 'All'}
+                </button>
+            </li></ul> : ''} */}
             <div className='border border-gray-100 px-6'>
                 {sportCardsSets ? (
                     <div
@@ -379,6 +440,7 @@ const SportCardsSets = props => {
             </div>
         </Fragment>
     );
+    return '';
 }
 
 export default SportCardsSets;

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

@@ -14,6 +14,7 @@ import SubCategoryPage from '@riosst100/pwa-marketplace/src/components/CustomSub
 import ShopBySets from '@riosst100/pwa-marketplace/src/components/ShopBySets/shopBySets';
 import { useLocation } from 'react-router-dom';
 import SportCardsSets from '@riosst100/pwa-marketplace/src/components/SportCardsSets/sportCardsSets';
+import LegoSets from '@riosst100/pwa-marketplace/src/components/LegoSets/legoSets';
 
 const MESSAGES = new Map().set(
     'NOT_FOUND',
@@ -84,7 +85,10 @@ const Category = props => {
                 categoryId={uid}
                 isLoading={loading} />
             ) : (
-                shopby == "release" && parentCategoryUrlKey == "sport-cards" ? <SportCardsSets
+                shopby == "lego_set_name" && parentCategoryUrlKey == "lego" ? <LegoSets
+                categoryId={uid}
+                shopby={shopby}
+                isLoading={loading} /> : shopby == "release" && parentCategoryUrlKey == "sport-cards" ? <SportCardsSets
                 categoryId={uid}
                 shopby={shopby}
                 isLoading={loading} /> : shopby == "sets" || shopby == "expansion_sets" || shopby == "release_year" ? <ShopBySets

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

@@ -226,7 +226,7 @@ const CategoryContent = props => {
 
     let isSingles = false;
 
-    console.log(allActiveFilters)
+    // console.log(allActiveFilters)
 
     if (allActiveFilters && allActiveFilters.size > 0) {
         allActiveFilters.forEach((value, key) => {
@@ -256,9 +256,9 @@ const CategoryContent = props => {
     // console.log(activeFilters.length)
     // console.log(activeFilters.map(u => u.label).join(' - '))
 
-    const title = activeFilters ? (
+    const title = activeFilters && activeFilters.length ? (
         activeFilters.length > 1 ? 
-            activeFilters.map(u => u.label).join(' - ')
+            activeFilters.map(u => u.label).join(': ')
          : currentFilter
     ) : categoryName;
 

package/src/overwrites/venia-ui/lib/components/Breadcrumbs/breadcrumbs.js

@@ -74,7 +74,7 @@ const Breadcrumbs = props => {
 
     const filterBreadcrumbsElement = [];
 
-    const lastIndex = currentFilter.length - 1;
+    const lastIndex = currentFilter ? currentFilter.length - 1 : 0;
     // const filterpath = ;
     
     currentFilter && currentFilter.length && currentFilter.map((filter, index) => {

package/src/overwrites/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilters.js

@@ -20,7 +20,7 @@ const CurrentFilters = props => {
                 const { title, value } = item || {};
                 const key = `${group}::${title}_${value}`;
 
-                const customAttributeLandingPage = ['card_set', 'sc_baseball_release','auction','special_price','lof_preorder','sc_baseball_inserts','sc_baseball_parallel'];
+                const customAttributeLandingPage = ['card_set', 'sc_baseball_release','auction','special_price','lof_preorder','sc_baseball_inserts','sc_baseball_parallel','sc_set_type'];
 
                 if (!customAttributeLandingPage.includes(group)) {
                     elements.push(

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

@@ -91,7 +91,7 @@ const FilterSidebar = props => {
                 const groupName = filterNames.get(group);
                 const frontendInput = filterFrontendInput.get(group);
 
-                const hideFilters = ['lof_preorder','auction','special_price'];
+                const hideFilters = ['lof_preorder','auction','special_price','sc_baseball_inserts','sc_baseball_parallel','sale','sc_set_type','sc_brands'];
                 if (!hideFilters.includes(group)) {
                 // if (!allowedFilters && !allowedFiltersArr.length && group != "category_uid" || allowedFilters && allowedFiltersArr.length && allowedFiltersArr.includes(group)) {
                     

package/src/talons/CollectibleGameSets/useCollectibleGameSets.js

@@ -103,7 +103,6 @@ export const useCollectibleGameSets = props => {
             collectibleGameSets.map(({ release_type, sets }, index) => {
                 const newSets = sets.filter(function(set) {
                     return set.set_name.search(new RegExp(searchQuery, "i")) != -1 || set.set_abbreviation.search(new RegExp(searchQuery, "i")) != -1 || release_type.search(new RegExp(searchQuery, "i")) != -1;
-                    // return set.set_name.includes(searchQuery);
                 });
 
                 if (newSets && newSets.length) {

package/src/talons/LegoSets/legoSets.gql.js

@@ -0,0 +1,59 @@
+import { gql } from '@apollo/client';
+
+export const GET_STORE_CONFIG_DATA = gql`
+    query getStoreConfigData {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            product_url_suffix
+            category_url_suffix
+        }
+    }
+`;
+
+export const GET_LEGO_SETS_QUERY = gql`
+    query getLegoSets($categoryUrlKey: String!, $setType: String, $filters: ProductAttributeFilterInput!) {
+        legoSets(categoryUrlKey: $categoryUrlKey, setType: $setType, filters: $filters) {
+            group
+            sets {
+                set_name
+                option_id
+                release_year
+            }
+        }
+    }
+`;
+
+export const GET_CATEGORY_CONTENT = gql`
+    query getCategoryData($id: String!) {
+        categories(filters: { category_uid: { in: [$id] } }) {
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            items {
+                uid
+                name
+                url_key
+                url_path
+            }
+        }
+    }
+`;
+
+export const GET_FILTER_INPUTS = gql`
+    query GetFilterInputsForCategory {
+        __type(name: "ProductAttributeFilterInput") {
+            inputFields {
+                name
+                type {
+                    name
+                }
+            }
+        }
+    }
+`;
+
+export default {
+    getStoreConfigData: GET_STORE_CONFIG_DATA,
+    getLegoSetsQuery: GET_LEGO_SETS_QUERY,
+    getCategoryContentQuery: GET_CATEGORY_CONTENT,
+    getFilterInputsQuery: GET_FILTER_INPUTS,
+};

package/src/talons/LegoSets/useLegoSets.js

@@ -0,0 +1,269 @@
+import { useQuery, useLazyQuery } from '@apollo/client';
+import { useEffect, useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useAppContext } from '@magento/peregrine/lib/context/app';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from './legoSets.gql';
+import { getFilterInput, getFiltersFromSearch } from '@magento/peregrine/lib/talons/FilterModal/helpers';
+
+export const useLegoSets = props => {
+
+    const { searchQuery, setActive, currentSort, shopby, setType, categoryId, activeTab, activeFilter } = props
+
+    const { value: sortby } = currentSort
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, null);
+    const { getStoreConfigData, getLegoSetsQuery, getCategoryContentQuery, getFilterInputsQuery } = operations;
+    const { pathname, search } = useLocation();
+    const [runQuery, queryResponse] = useLazyQuery(getLegoSetsQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const pathnameArr = pathname.split('/');
+
+    const categoryUrlKey = pathnameArr[pathnameArr.length - 1].replace('.html','');
+    const parentCategoryUrlKey = pathnameArr[pathnameArr.length - 2].replace('.html','');
+    const productType = shopby;
+    
+    
+
+    // const { error, loading, data } = useQuery(getLegoSetsQuery, {
+    //     fetchPolicy: 'cache-and-network',
+    //     nextFetchPolicy: 'cache-first',
+    //     skip: !storeConfigData,
+    //     variables: {
+    //         categoryUrlKey: categoryUrlKey,
+    //         setType: setType
+    //     }
+    // });
+    const { data: introspectionData } = 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]);
+    const filters = getFiltersFromSearch(search);
+
+    // console.log(search)
+
+    // Construct the filter arg object.
+    const newFilters = {};
+    filters.forEach((values, key) => {
+        newFilters[key] = getFilterInput(values, filterTypeMap.get(key));
+// console.log(key)
+// console.log(values)
+        
+        if (key == "sc_baseball_release") {
+            for(let item of values) {
+                if(item) {
+                    // console.log(item.split(',')[0])
+                    const data = search.split('&');
+                    data.pop();
+                    activeFilters.push(
+                        {
+                            'label': item.split(',')[0],
+                            'path': data
+                        }
+                    )
+                }   
+            }
+        }
+    });
+
+    useEffect(() => {
+        // console.log("MASUK")
+
+        // if (queryResponse.data) {
+
+        
+
+        // Use the category uid for the current category page regardless of the
+        // applied filters. Follow-up in PWA-404.
+        // newFilters['category_uid'] = { eq: id };
+
+        runQuery({
+            variables: {
+                filters: newFilters,
+                categoryUrlKey: categoryUrlKey,
+                activeTab: activeTab
+            }
+        });
+    // }
+    }, [
+        runQuery,
+        activeTab
+        // queryResponse
+        // filterTypeMap,
+        // search,
+        // newFilters,
+        // shopby,
+        // categoryUrlKey
+    ]);
+
+    const { data: storeConfigData } = useQuery(getStoreConfigData, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const categoryUrlSuffix = storeConfigData?.storeConfig?.category_url_suffix;
+
+    // { data: queryResponse, error, loading }
+
+    
+
+    // console.log(data)
+
+    // const isBackgroundLoading = !!data && loading;
+
+    const availableLeagues = [];
+
+    // console.log(queryResponse.data)
+
+    const legoSets = useMemo(() => {
+        if (!queryResponse) {
+            return null;
+        }
+
+        // console.log(data)
+        
+        const legoSets = queryResponse?.data?.legoSets;
+        if (!legoSets) {
+            return null;
+        }
+
+        const sortbyData = [];
+        // if (activeTab == 'year') {
+
+            // console.log(legoSets)
+            if (legoSets) {
+            legoSets.map((setRelease, index) => {
+                const { group, sets } = setRelease;
+                if (sets.length) {
+                    sets.map((set, index) => {
+                        const { release_year, sc_league } = set;
+                        if (sc_league) {
+                            if (!availableLeagues.includes(sc_league)) {
+                                availableLeagues.push(sc_league);
+                            }
+                        }
+                        // if (release_year) {
+                        //     // groupingSetsByYear.splice(release_year, 0, set);
+                            // const result = sortbyData.find(item => item.group === release_year);
+
+                        //     // groupingSetsByYear[release_year] = set;
+                        //     if (result) {
+                        //         result.sets.push(set)
+                        //     } else {
+                        //         // if (sortby == "date" || sortby == "newest" && sortbyData.length < 2) {
+                        //             sortbyData.push({
+                        //                 'group': release_year,
+                        //                 'sets': [set]
+                        //             })
+                        //         // }
+                        //     }
+                        // }
+                    })
+                }
+            })
+        }
+
+        return legoSets.slice().sort((a, b) =>a.group.toLowerCase().localeCompare(b.group.toLowerCase()));
+    }, [queryResponse, activeTab]);
+
+    const availableGroups = legoSets && legoSets.length ? legoSets.map(({ group }) => group) : [];
+
+    // const availableLeagues = legoSets && legoSets.length ? legoSets.map(({ sets }) => legoSets.map(({ sc_league }) => sc_league)) : [];
+// console.log(availableLeagues)
+    // sc_league
+
+    const filteredLegoSets = useMemo(() => {
+        if (!legoSets) {
+            return null;
+        }
+
+        const filteredSets = [];
+
+        if (searchQuery) {
+
+            setActive('all')
+
+            legoSets.map(({ group, sets }, index) => {
+                const newSets = sets.filter(function(set) {
+                    return set.set_name.search(new RegExp(searchQuery, "i")) != -1 || group.search(new RegExp(searchQuery, "i")) != -1;
+                    // return set.set_name.includes(searchQuery);
+                });
+
+                if (newSets && newSets.length) {
+                    filteredSets.push({
+                        'group': group,
+                        'sets': newSets
+                    })
+                }
+            })
+        }
+
+        if (activeFilter && activeFilter  != "all") {
+            legoSets.map(({ group, sets }, index) => {
+                const newSets = sets.filter(function(set) {
+                    return set.sc_league == activeFilter;
+                    // return set.set_name.includes(searchQuery);
+                });
+
+                if (newSets && newSets.length) {
+                    filteredSets.push({
+                        'group': group,
+                        'sets': newSets
+                    })
+                }
+            })
+        }
+
+        return searchQuery || activeFilter ? filteredSets : legoSets;
+    }, [legoSets, searchQuery, sortby, activeFilter]);
+
+    // useEffect(() => {
+    //     setPageLoading(isBackgroundLoading);
+    // }, [isBackgroundLoading, setPageLoading]);
+
+    const { data: categoryData, loading: categoryLoading } = useQuery(
+        getCategoryContentQuery,
+        {
+            fetchPolicy: 'cache-and-network',
+            nextFetchPolicy: 'cache-first',
+            skip: !categoryId,
+            variables: {
+                id: categoryId
+            }
+        }
+    );
+
+    const category =
+        categoryData && categoryData.categories.items.length
+            ? categoryData.categories.items[0]
+            : null;
+
+    const error = queryResponse?.error;
+    const loading = queryResponse?.loading;
+
+    // console.log(legoSets)
+
+    return {
+        error,
+        loading,
+        legoSets,
+        filteredLegoSets,
+        categoryUrlSuffix,
+        categoryUrlKey,
+        productType,
+        availableGroups,
+        category,
+        // availableLeagues
+    };
+};