@riosst100/pwa-marketplace 1.8.6 → 1.8.8

package/src/components/SportCardsSets/sportCardsSets.js

@@ -2,7 +2,7 @@ import React, { Fragment, useEffect, useMemo, useState } from 'react';
 import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
 import { StoreTitle, Meta } from '@magento/venia-ui/lib/components/Head';
 import { useSportCardsSets } from '@riosst100/pwa-marketplace/src/talons/SportCardsSets/useSportCardsSets';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
 import defaultClasses from './sportCardsSets.module.css';
 import { useStyle } from '@magento/venia-ui/lib/classify';
@@ -47,13 +47,6 @@ const SportCardsSets = props => {
             value: 'date'
         };
     }
-
-    // if (productType == "expansion_sets") {
-    //     defaultSort = {
-    //         sortText: 'All (Expansion Sets)',
-    //         value: 'all'
-    //     };
-    // }
     
     const sortProps = useCustomSort({ sortFromSearch: false, defaultSort: defaultSort});
 
@@ -84,21 +77,10 @@ const SportCardsSets = props => {
     const newSportCardsSets = searchQuery || activeFilter != "all" ? filteredSportCardsSets : sportCardsSets;
 
     // useEffect(() => {
-        if (sportCardsSets && sportCardsSets.length) {
-            sportCardsSets.map((setRelease, index) => {
+        if (newSportCardsSets && newSportCardsSets.length) {
+            newSportCardsSets.map((setRelease, index) => {
                 const { group, sets } = setRelease;
 
-                // if (sets.length) {
-                //     sets.map((set, index) => {
-                //         // console.log(set)
-                //         if (set.sc_league) {
-                //             if (!availableLeagues.includes(set.sc_league)) {
-                //                 availableLeagues.push(set.sc_league)
-                //             }
-                //         }
-                //     })
-                // }
-
                 setsLengthArr[group] = sets.length
             })
         }
@@ -107,26 +89,17 @@ const SportCardsSets = props => {
     if (sportCardsSets && sportCardsSets.length) {
         sportCardsSets.map((setRelease, index) => {
             const { group, sets } = setRelease;
-            if (active == 'all' || active != "all" && active == group) {
+            // if (active == 'all' || active != "all" && active == group) {
                 if (sets.length) {
                     sets.map((set, index) => {
-                        // console.log(set)
                         if (set.sc_league) {
                             if (!availableLeagues.includes(set.sc_league)) {
                                 availableLeagues.push(set.sc_league)
                             }
                         }
-
-                        if (set.sc_brands) {
-                            if (!availableBrands.includes(set.sc_brands)) {
-                                availableBrands.push(set.sc_brands)
-                            }
-                        }
-
-                        // availableBrands
                     })
                 }
-            }
+            // }
         })
     }
 
@@ -138,6 +111,29 @@ const SportCardsSets = props => {
         return result;
     }
 
+    let shopbyUrl = "release";
+    if (shopby == "sc_baseball_players") {
+        shopbyUrl = "players";
+    }
+
+    if (shopby == "sc_baseball_teams") {
+        shopbyUrl = "teams";
+    }
+
+    const { search } = useLocation();
+
+    let filterSearchArr = search ? search.split('&') : [];
+    filterSearchArr = filterSearchArr.filter(function(data) {
+        return !data.includes('shopby');
+    })
+    let filterSearch = filterSearchArr.join('&')
+
+    if (!filterSearch.includes('?')) {
+        filterSearch = '?'+filterSearch;
+    }
+
+    let additionalFilter = '';
+
     const setRelases = newSportCardsSets && newSportCardsSets.length && newSportCardsSets.map((setRelease, index) => {
         const { group, sets } = setRelease;
 
@@ -147,8 +143,14 @@ const SportCardsSets = props => {
             sets.map((set, index) => {
                 const { set_name, option_id, release_year } = set;
 
+                // const categoryUrl = resourceUrl(
+                //     `/${category?.url_path}${categoryUrlSuffix || ''}?sc_${category?.url_key}_${shopbyUrl}[filter]=${set_name},${option_id}`
+                // );
+                const filter = 'sc_' + category?.url_key + '_' + shopbyUrl + '[filter]=' + set_name + ',' + option_id;
+                const params = filterSearch ? filterSearch + '&' + filter + additionalFilter : '?' + filter + additionalFilter;
+
                 const categoryUrl = resourceUrl(
-                    `/${category?.url_path}${categoryUrlSuffix || ''}?sc_${category?.url_key}_release[filter]=${set_name},${option_id}`
+                    `/${category.url_path}${categoryUrlSuffix || ''}${params}`
                 );
 
                 setsResult.push(<li className='list-none'>
@@ -188,113 +190,45 @@ const SportCardsSets = props => {
     const handleActive = (val) => {
         setActive(val);
 
-        availableLeagues = [];
-
-        setActiveFilter('Major Baseball League')
-
-
         setSearchQuery('')
     }
 
     const handleActiveTab = (val) => {
         setActiveTab(val);
-
         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);
 
+        setActive('all');
+
         setSearchQuery('')
     }
 
     let alpha = ['#', 'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
-
-    let availableSortBy = [
-        {
-            'label': 'All (A-Z)',
-            'value': 'all'
-        },
-        {
-            'label': 'Latest Sets',
-            'value': 'newest'
-        }
-    ];
-
-    // if (shopby == "release_year") {
-    //     availableSortBy = [
-    //         {
-    //             'label': 'All (By Year)',
-    //             'value': 'date'
-    //         },
-    //         {
-    //             '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") {
-        title = "By Year";
-    } else if (activeTab == "leagues") {
-        title = "By Leagues";
-    } else if (activeTab == "brand") {
-        title = brandName;
+    if (shopby == "sc_baseball_players") {
+        title = "Player"
+    } else if (shopby == "sc_baseball_teams") {
+        title = "Team";
+    } else {
+        if (activeTab == "year") {
+            title = "By Year";
+        } else if (activeTab == "leagues") {
+            title = "By Leagues";
+        } else if (activeTab == "brand") {
+            title = brandName;
+        }
     }
 
-    // availableLeagues.sort();
-
     return (
         <Fragment>
             <StoreTitle>{title}</StoreTitle>
-            <Breadcrumbs categoryId={categoryId} customPage={shopby == "release_year" ? "By Year" : "By Release/Set"} />
+            <Breadcrumbs categoryId={categoryId} customPage={title} />
             {shopby == "release" ? <ul className={classes.nav}>
                 <li className={classes.nav_item}>
                     <button
@@ -305,25 +239,28 @@ 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')
+                            handleActiveTab('leagues')
                         }}
                     >
-                        {activeTab == 'brand' ? <b>By Brand</b> : 'By Brand'}
+                        {activeTab == 'leagues' ? <b>By Leagues</b> : 'By Leagues'}
                     </button>
-                </li> */}
-                <li className={classes.nav_item}>
+                </li>
+            </ul> : ''}
+            {shopby == "sc_baseball_players" || shopby == "sc_baseball_teams" ? availableLeagues ? <ul className={classes.nav}>
+                {availableLeagues.map((group, index) => (
+                <li key={index} className={classes.nav_item}>
                     <button
                         onClick={() => {
-                            handleActiveTab('leagues')
+                            handleActiveFilter(group)
                         }}
                     >
-                        {activeTab == 'leagues' ? <b>By Leagues</b> : 'By Leagues'}
+                        {activeFilter == group ? <b>{group}</b> : group}
                     </button>
                 </li>
-            </ul> : ''}
+            ))}</ul> : '' : ''}
             {shopby != "release_year" && productType != "expansion_sets" && <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
                 {title}
             </h1>}
@@ -349,7 +286,7 @@ const SportCardsSets = props => {
                 </button>
             </li>
             </ul> : ''}
-            {activeTab == "leagues" && availableLeagues ? <ul className={classes.nav}>
+            {shopby == "release" && activeTab == "leagues" && availableLeagues ? <ul className={classes.nav}>
                 {availableLeagues.map((group, index) => (
                 <li key={index} className={classes.nav_item}>
                     <button
@@ -361,31 +298,6 @@ const SportCardsSets = props => {
                     </button>
                 </li>
             ))}</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
@@ -395,7 +307,7 @@ const SportCardsSets = props => {
                         {/* <CustomSortBy sortProps={sortProps} availableSortMethods={availableSortBy} /> */}
                     </div>
                 ) : ''}
-                {shopby == "sets" && <>
+                {shopby == "sc_baseball_players" || shopby == "sc_baseball_teams" || shopby == "sets" ? <>
                     <section className='single_list-indexing-container relative m-auto pt-5'>
                         <ul className='flex gap-2 justify-center flex-wrap'>
                             <li>
@@ -430,7 +342,7 @@ const SportCardsSets = props => {
                             ))}
                         </ul>
                     </section>
-                </>}
+                </> : ''}
                 <Divider className="mb-5 px-4 mt-5" />
                 <section className='singles-container'>
                     <div className={cn('singles-wrapper block -mx-4', classes.singlesWrapper)}>

package/src/components/SubCategory/customSubCategory.js

@@ -6,7 +6,7 @@ import defaultClasses from './customSubCategory.module.css';
 import { useStyle } from '@magento/venia-ui/lib/classify';
 
 const CustomSubCategory = props => {
-    const { customSubCategory } = props;
+    const { customSubCategory, categoryName } = props;
 
     const talonProps = useCustomSubCategory({ customSubCategory });
 
@@ -19,14 +19,24 @@ const CustomSubCategory = props => {
     const subCategory = [];
     
     normalizedData && normalizedData.map(({ text, path }, index) => {
-        subCategory.push(
-            <Link
-                key={index}
-                to={resourceUrl(path)}
-            >
-                <li className={classes.item}>{text}</li>
-            </Link>
-        )
+        if (text == categoryName) {
+            subCategory.push(
+                <span>
+                    <b>
+                        <li className={classes.item}>{text}</li>
+                    </b>
+                </span>
+            )
+        } else {
+            subCategory.push(
+                <Link
+                    key={index}
+                    to={resourceUrl(path)}
+                >
+                    <li className={classes.item}>{text}</li>
+                </Link>
+            )
+        }
     });
 
     return subCategory.length ? <ul className={classes.root}>{subCategory}</ul> : '';

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 NonSportCardsSets from '@riosst100/pwa-marketplace/src/components/NonSportCardsSets/nonSportCardsSets';
 import LegoSets from '@riosst100/pwa-marketplace/src/components/LegoSets/legoSets';
 
 const MESSAGES = new Map().set(
@@ -88,7 +89,10 @@ const Category = props => {
                 shopby == "singles" || shopby == "lego_set_name" && parentCategoryUrlKey == "lego" ? <LegoSets
                 categoryId={uid}
                 shopby={shopby}
-                isLoading={loading} /> : shopby == "release" && parentCategoryUrlKey == "sport-cards" ? <SportCardsSets
+                isLoading={loading} /> : shopby && parentCategoryUrlKey == "non-sports-cards" ? <NonSportCardsSets
+                categoryId={uid}
+                shopby={shopby}
+                isLoading={loading} /> : shopby == "sc_baseball_players" || shopby == "sc_baseball_teams" || 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

@@ -1,4 +1,4 @@
-import React, { Fragment, Suspense, useMemo, useRef, useState } from 'react';
+import React, { useEffect, Fragment, Suspense, useMemo, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { array, number, shape, string } from 'prop-types';
 
@@ -29,7 +29,7 @@ import AttributesBlock from '@riosst100/pwa-marketplace/src/components/Attribute
 
 import BrandSlider from '@riosst100/pwa-marketplace/src/components/BrandSlider';
 import CollectibleGameSets from '@riosst100/pwa-marketplace/src/components/CollectibleGameSets/collectibleGameSets';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useHistory } from 'react-router-dom';
 import { getFiltersFromSearch } from '@magento/peregrine/lib/talons/FilterModal/helpers';
 import CustomSubCategory from '@riosst100/pwa-marketplace/src/components/SubCategory/customSubCategory';
 import AlphaFilter from '@riosst100/pwa-marketplace/src/components/AlphaFilter';
@@ -49,10 +49,13 @@ const CategoryContent = props => {
         isLoading,
         pageControl,
         sortProps,
-        pageSize
+        pageSize,
+        showSubcategory
     } = props;
     const [currentSort] = sortProps;
 
+    const history = useHistory();
+
     const talonProps = useCategoryContent({
         categoryId,
         data,
@@ -74,6 +77,23 @@ const CategoryContent = props => {
         virtualCategoryFilters
     } = talonProps;
 
+    useEffect(() => {
+        if (category) {
+            const urlKey = category.url_key;
+            if (urlKey == "collectible-game") {
+                history.replace('/games/collectible-game/magic-the-gathering.html')
+            }
+
+            if (urlKey == "sport-cards") {
+                history.replace('/cards/sport-cards/baseball.html')
+            }
+
+            if (urlKey == "non-sports-cards") {
+                history.replace('/cards/non-sports-cards/comics.html')
+            }
+        }
+    }, [category]);
+
     const [activeLetter, setActiveLetter] = useState('all')
     const [activeTab, setActiveTab] = useState('all');
 
@@ -228,6 +248,8 @@ const CategoryContent = props => {
 
     // console.log(allActiveFilters)
 
+    // console.log(virtualCategoryFilters)
+
     if (allActiveFilters && allActiveFilters.size > 0) {
         allActiveFilters.forEach((value, key) => {
             value.forEach((value) => {
@@ -256,7 +278,7 @@ const CategoryContent = props => {
     // console.log(activeFilters.length)
     // console.log(activeFilters.map(u => u.label).join(' - '))
 
-    const title = activeFilters && activeFilters.length ? (
+    let title = activeFilters && activeFilters.length ? (
         activeFilters.length > 1 ? 
             activeFilters.map(u => u.label).join(': ')
          : currentFilter
@@ -282,7 +304,7 @@ const CategoryContent = props => {
                     <>
                         {currentFilter && <AlphaFilter isSingles={isSingles} items={items} handleActiveLetter={handleActiveLetter} activeLetter={activeLetter} />}
                         <SubCategory parent={parent} children={children} />
-                        {!currentFilter && <CustomSubCategory customSubCategory={category ? category.custom_subcategory : null} />}
+                        {!currentFilter && <CustomSubCategory categoryName={category ? category.name : null} customSubCategory={category ? category.custom_subcategory : null} />}
                     </>
                 {/* ) : ( */}
                     <>

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

@@ -40,6 +40,10 @@ const Breadcrumbs = props => {
     // For all links generate a fragment like "/ Text"
     const links = useMemo(() => {
         return normalizedData.map(({ text, path }) => {
+            if (text == "dCollectible Card Games") {
+                return '';
+            }
+            
             return (
                 <Fragment key={text}>
                     <span className={classes.divider}>{DELIMITER}</span>
@@ -131,7 +135,9 @@ const Breadcrumbs = props => {
     // If we have a "currentProduct" it means we're on a PDP so we want the last
     // category text to be a link. If we don't have a "currentProduct" we're on
     // a category page so it should be regular text.
-    const currentCategoryLink = customPage || currentProduct || currentFilter && currentFilter.length ? (
+    const currentCategoryLink = currentCategory == "dCollectible Card Games" ? '' : (customPage || currentProduct || currentFilter && currentFilter.length ? (
+        <>
+        <span className={classes.divider}>{DELIMITER}</span>
         <Link
             className={classes.link}
             to={'/'+resourceUrl(currentCategoryPath)}
@@ -139,9 +145,13 @@ const Breadcrumbs = props => {
         >
             {currentCategory}
         </Link>
+        </>
     ) : (
+        <>
+        <span className={classes.divider}>{DELIMITER}</span>
         <span className={cn(classes.currentCategory, 'text-blue-700 font-medium')}>{currentCategory}</span>
-    );
+        </>
+    ));
 
     const currentProductNode = currentProduct ? (
         <Fragment>
@@ -163,7 +173,6 @@ const Breadcrumbs = props => {
                 <FormattedMessage id={'global.home'} defaultMessage={'Home'} />
             </Link>
             {links}
-            <span className={classes.divider}>{DELIMITER}</span>
             {currentCategoryLink}
             {filterBreadcrumbsElement}
             {currentProductNode}

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

@@ -22,7 +22,7 @@ const CurrentFilters = props => {
 
                 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)) {
+                // if (!customAttributeLandingPage.includes(group)) {
                     elements.push(
                         <li key={key} className={classes.item}>
                             <CurrentFilter
@@ -33,7 +33,7 @@ const CurrentFilters = props => {
                             />
                         </li>
                     );
-                }
+                // }
             }
         }
 

package/src/talons/NonSportCardsSets/nonSportCardsSets.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_NON_SPORT_CARDS_SETS_QUERY = gql`
+    query getNonSportCardsSets($categoryUrlKey: String!, $shopby: String, $setType: String, $filters: ProductAttributeFilterInput!) {
+        nonSportCardsSets(categoryUrlKey: $categoryUrlKey, shopby: $shopby, 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,
+    getNonSportCardsSetsQuery: GET_NON_SPORT_CARDS_SETS_QUERY,
+    getCategoryContentQuery: GET_CATEGORY_CONTENT,
+    getFilterInputsQuery: GET_FILTER_INPUTS,
+};