@riosst100/pwa-marketplace 1.6.9 → 1.7.1

package/src/components/SportCardsSets/sportCardsSets.js

@@ -0,0 +1,372 @@
+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 resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import defaultClasses from './sportCardsSets.module.css';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import cn from 'classnames';
+import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+import { SportCardsSetsShimmer } from '@riosst100/pwa-marketplace/src/components/SportCardsSets';
+import CustomSortBy from '@riosst100/pwa-marketplace/src/components/CustomSortBy';
+import ArraySearchInput from '@riosst100/pwa-marketplace/src/components/ArraySearchInput';
+import { useCustomSort } from '@riosst100/pwa-marketplace/src/hooks/useCustomSort';
+import Breadcrumbs from '@magento/venia-ui/lib/components/Breadcrumbs';
+
+const SportCardsSets = props => {
+    const { categoryId } = props
+
+    const [active, setActive] = useState('all');
+    const [activeTab, setActiveTab] = useState('leagues');
+    const [activeFilter, setActiveFilter] = useState('all');
+
+    const [searchQuery, setSearchQuery] = useState('');
+
+    let availableLeagues = [];
+
+    const { location } = globalThis;
+
+    const query = new URLSearchParams(location.search);
+    const shopby = query.get('shopby') || null;
+    const setType = query.get('set_type') || null;
+
+    let defaultSort = {
+        sortText: 'All (A-Z)',
+        value: 'all'
+    };
+    
+    if (shopby == "release_year") {
+        defaultSort = {
+            sortText: 'All (By Year)',
+            value: 'date'
+        };
+    }
+
+    // if (productType == "expansion_sets") {
+    //     defaultSort = {
+    //         sortText: 'All (Expansion Sets)',
+    //         value: 'all'
+    //     };
+    // }
+    
+    const sortProps = useCustomSort({ sortFromSearch: false, defaultSort: defaultSort});
+
+    const [currentSort] = sortProps;
+
+    // const [sortBy, setSortBy] = useState({
+    //     sortText: 'All (A-Z)',
+    //     value: 'all'
+    // });
+
+
+    const classes = useStyle(defaultClasses);
+
+    const talonProps = useSportCardsSets({ searchQuery, setActive, currentSort, shopby, setType, categoryId, activeTab });
+
+    const { error, loading, sportCardsSets, categoryUrlSuffix, categoryUrlKey, productType, filteredSportCardsSets, availableGroups, category } = talonProps;
+
+    if (loading && !sportCardsSets)
+        return <SportCardsSetsShimmer />;
+    if (error && !sportCardsSets) return <ErrorView />;
+
+    if (!sportCardsSets && !loading && !error) {
+        return <SportCardsSetsShimmer />;
+    }
+
+    const setsLengthArr = [];
+
+    const newSportCardsSets = searchQuery ? filteredSportCardsSets : sportCardsSets;
+
+    // useEffect(() => {
+        if (sportCardsSets && sportCardsSets.length) {
+            sportCardsSets.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
+            })
+        }
+    // }, [sportCardsSets])
+
+    const splitToNChunks = (array, n) => {
+        let result = [];
+        for (let i = n; i > 0; i--) {
+            result.push(array.splice(0, Math.ceil(array.length / i)));
+        }
+        return result;
+    }
+
+    // console.log(category)
+
+    const setRelases = newSportCardsSets.length && newSportCardsSets.map((setRelease, index) => {
+        const { group, sets } = setRelease;
+
+        const setsResult = [];
+
+        if (sets.length) {
+            sets.map((set, index) => {
+                const { set_name, option_id, release_year } = set;
+
+                const categoryUrl = resourceUrl(
+                    `/${category?.url_path}${categoryUrlSuffix || ''}?sc_${category?.url_key}_release[filter]=${set_name},${option_id}`
+                );
+
+                setsResult.push(<li className='list-none'>
+                    <Link to={categoryUrl} className="hover_bg-darkblue-900 hover_text-white w-full block text-[14px] py-[2px] px-2">
+                        {set_name}
+                    </Link>
+                </li>)
+            })
+        }
+
+        let setsResultSplitted = [];
+        if (active == group || newSportCardsSets.length == 1) {
+            setsResultSplitted = splitToNChunks(setsResult, 3);
+        }
+        
+        return (
+            <>
+                {active == "all" && newSportCardsSets.length > 1 ?
+                <div className={cn('singles_group-wrapper mb-4 px-2 inline-block', classes.singlesGroupWrapper)}>
+                    <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' >
+                        {group}
+                    </div>
+                    <div className={cn('singles_item-list flex flex-col')}>{setsResult}</div>
+                </div> : ''}
+                {active == group || newSportCardsSets.length == 1 ? setsResultSplitted && setsResultSplitted.length && setsResultSplitted.map((setsResult, index) =>
+                    <div key={index} className={cn('singles_group-wrapper mb-4 px-2 inline-block', classes.singlesGroupWrapper)}>
+                        {index == 0 ? <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2'>{group}</div> : 
+                        <div className='singles_item_group_letter text-xl font-semibold pb-1 mb-2' style={{"marginTop":"35px"}}></div>}
+                        <div className={cn('singles_item-list flex flex-col')}>{setsResult}</div>
+                    </div>
+                )
+                 : ''}
+            </>
+        );
+    });
+
+    const handleActive = (val) => {
+        setActive(val);
+
+        availableLeagues = [];
+        // 
+
+
+        setSearchQuery('')
+    }
+
+    const handleActiveTab = (val) => {
+        setActiveTab(val);
+
+        setSearchQuery('')
+    }
+
+    const handleActiveFilter = (val) => {
+        setActiveFilter(val);
+
+        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 title = "By Release/Set";
+    if (activeTab == "year") {
+        title = "By Year";
+    } else if (activeTab == "leagues") {
+        title = "By Leagues";
+    } else if (activeTab == "brand") {
+        title = "By Brand";
+    }
+
+    // console.log(availableLeagues)
+
+
+    return (
+        <Fragment>
+            <StoreTitle>{title}</StoreTitle>
+            <Breadcrumbs categoryId={categoryId} customPage={shopby == "expansion_sets" ? "Expansion Sets" : (shopby == "release_year" ? "By Year" : "By Release/Set")} />
+            {shopby == "release" ? <ul className={classes.nav}>
+                <li className={classes.nav_item}>
+                    <button
+                        onClick={() => {
+                            handleActiveTab('year')
+                        }}
+                    >
+                        {activeTab == 'year' ? <b>By Year</b> : 'By Year'}
+                    </button>
+                </li>
+                <li className={classes.nav_item}>
+                    <button
+                        onClick={() => {
+                            handleActiveTab('brand')
+                        }}
+                    >
+                        {activeTab == 'brand' ? <b>By Brand</b> : 'By Brand'}
+                    </button>
+                </li>
+                <li className={classes.nav_item}>
+                    <button
+                        onClick={() => {
+                            handleActiveTab('leagues')
+                        }}
+                    >
+                        {activeTab == 'leagues' ? <b>By Leagues</b> : 'By Leagues'}
+                    </button>
+                </li>
+            </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>}
+            {shopby == "release" ? <ul className={classes.nav}>
+                {availableGroups.map((group, index) => (
+                <li key={index} className={classes.nav_item}>
+                    <button
+                        onClick={() => {
+                            handleActive(group)
+                        }}
+                    >
+                        {active == group ? <b>{group}</b> : group}
+                    </button>
+                </li>
+            ))}
+            <li className={classes.nav_item}>
+                <button
+                    onClick={() => {
+                        handleActive('all')
+                    }}
+                >
+                    {active == 'all' ? <b>All</b> : 'All'}
+                </button>
+            </li>
+            </ul> : ''}
+            {availableLeagues ? <ul className={classes.nav}>
+                {availableLeagues.map((group, index) => (
+                <li key={index} className={classes.nav_item}>
+                    <button
+                        onClick={() => {
+                            handleActiveFilter(group)
+                        }}
+                    >
+                        {activeFilter == group ? <b>{group}</b> : group}
+                    </button>
+                </li>
+            ))}
+            <li className={classes.nav_item}>
+                <button
+                    onClick={() => {
+                        handleActiveFilter('all')
+                    }}
+                >
+                    {activeFilter == 'all' ? <b>All</b> : 'All'}
+                </button>
+            </li>
+            </ul> : ''}
+            <div className='border border-gray-100 px-6'>
+                {sportCardsSets ? (
+                    <div
+                        className={classes.toolbar}
+                    >
+                        <div style={{"width":"35%"}}><ArraySearchInput active={active} searchQuery={searchQuery} placeholder="Search sets..." isOpen={true} setSearchQuery={setSearchQuery} /></div>
+                        {/* <CustomSortBy sortProps={sortProps} availableSortMethods={availableSortBy} /> */}
+                    </div>
+                ) : ''}
+                {shopby == "sets" && <>
+                    <section className='single_list-indexing-container relative m-auto pt-5'>
+                        <ul className='flex gap-2 justify-center flex-wrap'>
+                            <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={() => {
+                                        handleActive('all')
+                                    }}
+                                >
+                                    {active == 'all' ? <b>All</b> : 'All'}
+                                </button>
+                            </li>
+                            {alpha.map((letter, index) => (
+                                <li key={index}>
+                                    <button
+                                        className={cn(
+                                            'rounded-md border border-solid border-gray-100 p-2 min-w-[28px]',
+                                            'leading-4 font-medium text-base ',
+                                            setsLengthArr[letter] > 0 ? 'hover_bg-gray-50' : 'bg-gray-100 text-gray-400',
+                                        )}
+                                        onClick={() => {
+                                            handleActive(letter)
+                                        }}
+                                        disabled={setsLengthArr[letter] > 0 ? false : true}
+                                    >
+                                        {active == letter ? <b>{letter}</b> : letter}
+                                    </button>
+                                </li>
+                            ))}
+                        </ul>
+                    </section>
+                </>}
+                <Divider className="mb-5 px-4 mt-5" />
+                <section className='singles-container'>
+                    <div className={cn('singles-wrapper block -mx-4', classes.singlesWrapper)}>
+                        {newSportCardsSets && newSportCardsSets.length ? setRelases : (searchQuery ? <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>No sets found for <b>{searchQuery}</b> search query.</div> : <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>No sets found.</div>)}
+                    </div>
+                </section>
+            </div>
+        </Fragment>
+    );
+}
+
+export default SportCardsSets;

package/src/components/SportCardsSets/sportCardsSets.module.css

@@ -0,0 +1,76 @@
+.nav {
+    composes: flex from global;
+    composes: flex-wrap from global;
+    margin: 50px 0 30px 0;
+    composes: gap-[10px] from global;
+}
+
+.nav_item {
+    composes: px-4 from global;
+    composes: py-2 from global;
+    composes: transition-colors from global;
+    composes: duration-150 from global;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: leading-normal from global;
+    composes: text-base from global;
+    composes: text-colorDefault from global;
+    composes: bg-white from global;
+    composes: border-gray-100 from global;
+    border-radius: 5px;
+}
+
+.toolbar {
+    composes: relative from global;
+    composes: ml-2xs from global;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+}
+
+.tabs {
+    composes: flex from global;
+    composes: flex-wrap from global;
+    composes: mt-3 from global;
+    composes: gap-[15px] from global;
+    margin-bottom: 30px;
+}
+
+.tabs_item {
+    composes: px-4 from global;
+    composes: py-2 from global;
+    composes: transition-colors from global;
+    composes: duration-150 from global;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: leading-normal from global;
+    composes: text-base from global;
+    composes: text-colorDefault from global;
+    composes: bg-white from global;
+    composes: border-gray-100 from global;
+    border-radius: 5px;
+}
+
+.singlesWrapper {
+    column-count: 1;
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    flex-direction: row;
+}
+
+.singlesGroupWrapper {
+    width: 100%;
+}
+
+@media screen and (min-width: 768px) {
+    .singlesGroupWrapper {
+        width: 50%;
+    }
+}
+
+@media screen and (min-width: 1023px) {
+    .singlesGroupWrapper {
+        width: 33.33%;
+    }
+}

package/src/components/SportCardsSets/sportCardsSets.shimmer.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
+import defaultClasses from './sportCardsSets.module.css';
+import cn from 'classnames';
+import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+
+const SportCardsSets = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <>
+            <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'><Shimmer width="25%" height="6vh" /></h1>
+            <div className='border border-gray-100 px-6'>
+                <center>
+                    <section className='single_list-indexing-container relative m-auto pt-5'>
+                        <Shimmer width="95%" height="6vh" />
+                    </section>
+                </center>
+                <Divider className="mb-5 px-4" />
+                <section className='singles-container'>
+                    <div className={cn('singles-wrapper block -mx-4', classes.singlesWrapper)}>
+                        <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                            <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                        <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                            <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                        <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                            <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                        <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                            <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                        <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                            <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                        <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                            <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                    </div>
+                </section>
+            </div>
+        </>
+    );
+};
+
+export default SportCardsSets;

package/src/overwrites/pagebuilder/lib/ContentTypes/Products/Carousel/__fixtures__/apolloMocks.js

@@ -0,0 +1,33 @@
+import acOperations from '../carousel.gql.ee';
+import mosOperations from '../carousel.gql.ce';
+
+export const mockGetStoreConfigAC = {
+    request: {
+        query: acOperations.getStoreConfigQuery
+    },
+    result: {
+        data: {
+            storeConfig: {
+                store_code: 'default',
+                magento_wishlist_general_is_enabled: '1',
+                enable_multiple_wishlists: '1',
+                product_url_suffix: '.html'
+            }
+        }
+    }
+};
+
+export const mockGetStoreConfigMOS = {
+    request: {
+        query: mosOperations.getStoreConfigQuery
+    },
+    result: {
+        data: {
+            storeConfig: {
+                store_code: 'default',
+                magento_wishlist_general_is_enabled: '1',
+                product_url_suffix: '.html'
+            }
+        }
+    }
+};

package/src/overwrites/pagebuilder/lib/ContentTypes/Products/Carousel/carousel.gql.ce.js

@@ -0,0 +1,16 @@
+import { gql } from '@apollo/client';
+
+export const GET_STORE_CONFIG = gql`
+    query GetStoreConfigForCarouselMOS {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            product_url_suffix
+            magento_wishlist_general_is_enabled
+        }
+    }
+`;
+
+export default {
+    getStoreConfigQuery: GET_STORE_CONFIG
+};

package/src/overwrites/pagebuilder/lib/ContentTypes/Products/Carousel/carousel.gql.ee.js

@@ -0,0 +1,17 @@
+import { gql } from '@apollo/client';
+
+export const GET_STORE_CONFIG = gql`
+    query GetStoreConfigForCarouselAC {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            product_url_suffix
+            magento_wishlist_general_is_enabled
+            enable_multiple_wishlists
+        }
+    }
+`;
+
+export default {
+    getStoreConfigQuery: GET_STORE_CONFIG
+};

package/src/overwrites/pagebuilder/lib/ContentTypes/Products/Carousel/carousel.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import Slider from "react-slick";
+import GalleryItem from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Gallery/item';
+import { useCarousel } from './useCarousel';
+
+const Carousel = props => {
+    const { settings, items } = props;
+    const { storeConfig } = useCarousel();
+
+    const galleryItems = items.map((item, index) => {
+        return (
+            <GalleryItem key={index} item={item} storeConfig={storeConfig} rootClassName="px-2 block product-item max-w-[240px]" />
+        );
+    });
+
+    return (
+        <>
+            <Slider {...settings} className='product-carousel -mx-2'>
+                {galleryItems}
+            </Slider>
+            <style global jsx>
+                {`
+                    .product-carousel .slick-slide a {
+                        text-decoration: none !important;
+                    }
+                    // article[class*="cms-root"] {
+                    //     padding: 0;
+                    // }
+                    .product-carousel .item-product img {
+                        margin: 0 !important;
+                    }
+                `}
+            </style>
+        </>
+    );
+};
+
+export default Carousel;

package/src/overwrites/pagebuilder/lib/ContentTypes/Products/Carousel/index.js

@@ -0,0 +1 @@
+export { default } from './carousel';

package/src/overwrites/pagebuilder/lib/ContentTypes/Products/Carousel/useCarousel.js

@@ -0,0 +1,25 @@
+import { useQuery } from '@apollo/client';
+
+import { useCustomerWishlistSkus } from '@magento/peregrine/lib/hooks/useCustomerWishlistSkus/useCustomerWishlistSkus';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import defaultOperations from './carousel.gql';
+
+/**
+ * This is a duplicate of @magento/peregrine/lib/talons/Gallery/useGallery.js
+ */
+export const useCarousel = (props = {}) => {
+    const operations = mergeOperations(defaultOperations, props.operations);
+
+    useCustomerWishlistSkus();
+
+    const { data: storeConfigData } = useQuery(operations.getStoreConfigQuery, {
+        fetchPolicy: 'cache-and-network'
+    });
+
+    const storeConfig = storeConfigData ? storeConfigData.storeConfig : null;
+
+    return {
+        storeConfig
+    };
+};

package/src/overwrites/pagebuilder/lib/ContentTypes/Products/configAggregator.js

@@ -0,0 +1,26 @@
+import { getAdvanced } from '../../utils';
+
+export default (node, props) => {
+    const forms = node.querySelectorAll(
+        '.product-item-details > .product-item-name > a.product-item-link'
+    );
+    let carouselConfig = {};
+
+    if (props.appearance === 'carousel') {
+        carouselConfig = {
+            autoplay: node.getAttribute('data-autoplay') === 'true',
+            autoplaySpeed: parseInt(node.getAttribute('data-autoplay-speed')),
+            infinite: node.getAttribute('data-infinite-loop') === 'true',
+            arrows: node.getAttribute('data-show-arrows') === 'true',
+            dots: node.getAttribute('data-show-dots') === 'true',
+            carouselMode: node.getAttribute('data-carousel-mode'),
+            centerPadding: node.getAttribute('data-center-padding')
+        };
+    }
+
+    return {
+        pathNames: [...forms].map(form => form.getAttribute('href')),
+        ...carouselConfig,
+        ...getAdvanced(node)
+    };
+};

package/src/overwrites/pagebuilder/lib/ContentTypes/Products/index.js

@@ -0,0 +1 @@
+export { default } from './products';