@riosst100/pwa-marketplace 2.1.3 → 2.1.5

package/src/components/SellerDetail/sellerDetail.js

@@ -76,6 +76,23 @@ const SellerDetail = props => {
         
     }
 
+    const getSellerAddressDisplay = (seller) => {
+        let city = seller?.city;
+        let country = seller?.country;
+
+        let result = '';
+        if (city && country) {
+            result = `${city}, ${country}`;
+        }
+        if (city && !country) {
+            result = `${city}`;
+        }
+        if (!city && country) {
+            result = `${country}`;
+        }        
+        return result;
+    }
+
     return (
         <div className=' py-8'>
             <Slider seller={seller} rootClassname='mb-[30px]' />
@@ -106,7 +123,7 @@ const SellerDetail = props => {
                                 </div>
                             </div>
                             <div class="relative w-fit font-normal text-[#999999] text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">
-                                {seller ? seller.city + ', ' + seller.country : ''}
+                                {seller ? getSellerAddressDisplay(seller) : ''}
                             </div>
                         </div>
                         <div className='flex flex-wrap items-start gap-4 relative'>

package/src/components/SellerInformation/sellerInformation.js

@@ -3,6 +3,7 @@ import SellerLocation from '../SellerLocation';
 import { Location, ShopAdd } from 'iconsax-react';
 import OperatingHours from '@riosst100/pwa-marketplace/src/components/OperatingHours';
 import SellerAddressCard from '@riosst100/pwa-marketplace/src/components/Seller/sellerAddressCard';
+import SellerSocialMedia from '@riosst100/pwa-marketplace/src/components/SellerSocialMedia';
 
 const SellerInformation = ({ seller }) => {
     return (
@@ -59,10 +60,11 @@ const SellerInformation = ({ seller }) => {
                                 {seller ? seller.term_and_conditions : ''}
                             </div>
                         </div>
-                    </div >
-                </div >
+                    </div>
+                </div>
+                <SellerSocialMedia seller={seller} />
                 {seller ? <SellerLocation storeLocators={seller.store_locators} /> : ''}
-            </div >
+            </div>
         </>
     )
 }

package/src/components/SellerSocialMedia/index.js

@@ -0,0 +1,96 @@
+import React from 'react';
+
+const SellerSocialMedia = (props) => {
+
+    const { seller } = props;
+
+    const { twitter_id, facebook_id, youtube_id, instagram_id, linkedin_id } = seller;
+
+    const socialMediaLinks = [
+        {
+            code: 'X',
+            link: twitter_id
+        },
+        {
+            code: 'Facebook',
+            link: facebook_id
+        },
+        {
+            code: 'Youtube',
+            link: youtube_id
+        },
+        {
+            code: 'Instagram',
+            link: instagram_id
+        },
+        {
+            code: 'LinkedIn',
+            link: linkedin_id
+        }
+    ];
+
+    const getLogo = (code) => {
+        let img = '';
+        if (code == "X") {
+            img = 'https://upload.wikimedia.org/wikipedia/commons/5/53/X_logo_2023_original.svg';
+        }
+        if (code == "Facebook") {
+            img = 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Facebook_f_logo_%282019%29.svg/1280px-Facebook_f_logo_%282019%29.svg.png';
+        }
+        if (code == "Youtube") {
+            img = 'https://cdn3.iconfinder.com/data/icons/social-network-30/512/social-06-512.png';
+        }
+        if (code == "Instagram") {
+            img = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Instagram_logo_2022.svg/768px-Instagram_logo_2022.svg.png';
+        }
+        if (code == "LinkedIn") {
+            img = 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/LinkedIn_icon.svg/1024px-LinkedIn_icon.svg.png';
+        }
+
+        return img;
+    }
+
+    let sellerSocialMediaResult = [];
+
+    if (socialMediaLinks && socialMediaLinks.length) {
+        socialMediaLinks.forEach((socialMedia) => {
+            if (socialMedia.code && socialMedia.link) {
+                const logo = getLogo(socialMedia.code);
+                sellerSocialMediaResult.push(
+                    <a href={socialMedia.link} className='platform_logo-wrapper rounded-md px-5 py-2.5 border border-gray-100 flex items-center' target="_blank">
+                        {logo ? <img
+                            alt={socialMedia.code}
+                            // width="auto"
+                            // height={30}
+                            src={logo}
+                            style={{
+                                "height":"20px"
+                            }}
+                        /> : socialMedia.code}
+                    </a>
+                )
+            }
+        })
+    }
+
+    return sellerSocialMediaResult && sellerSocialMediaResult.length ? <>
+        <div class="flex items-start relative self-stretch w-full flex-[0_0_auto]">
+            <div class="flex flex-col items-start gap-[15px] relative flex-1 grow">
+                <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Social Media</div>
+                <div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
+                    <div class="flex flex-col items-start gap-[10px]" style={
+                        {
+                            "display": "flex",
+                            "flex-direction": "row",
+                            "align-items": "center"
+                        }
+                    }>
+                        {sellerSocialMediaResult}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </> : '';
+}
+
+export default SellerSocialMedia;

package/src/components/SetsData/index.js

@@ -0,0 +1,2 @@
+export { default } from './setsData';
+export { default as SetsDataShimmer } from './setsData.shimmer';

package/src/components/SetsData/setsData.js

@@ -0,0 +1,349 @@
+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 { useSetsData } from '@riosst100/pwa-marketplace/src/talons/SetsData/useSetsData';
+import { Link } from 'react-router-dom';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import defaultClasses from './setsData.module.css';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import cn from 'classnames';
+import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+import { SetsDataShimmer } from '@riosst100/pwa-marketplace/src/components/SetsData';
+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 SetsData = props => {
+    const { categoryId } = props
+
+    const { location } = globalThis;
+
+    const query = new URLSearchParams(location.search);
+
+    const [active, setActive] = useState('all');
+    const [activeTab, setActiveTab] = useState('all');
+    const [activeFilter, setActiveFilter] = useState('');
+    const [searchQuery, setSearchQuery] = useState('');
+    
+    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'
+    //     };
+    // }
+    
+    // Sorting
+    const sortProps = useCustomSort({ sortFromSearch: false, defaultSort: defaultSort});
+    const [currentSort] = sortProps;
+    // const [sortBy, setSortBy] = useState({
+    //     sortText: 'All (A-Z)',
+    //     value: 'all'
+    // });
+
+    // let availableSortBy = [
+    //     {
+    //         'label': 'All (A-Z)',
+    //         'value': 'all'
+    //     },
+    //     {
+    //         'label': 'By Year',
+    //         'value': 'newest'
+    //     }
+    // ];
+
+    const classes = useStyle(defaultClasses);
+
+    const talonProps = useSetsData({ activeFilter, searchQuery, setActive, currentSort, shopby, setType, categoryId, activeTab });
+
+    const { error, loading, setsData, categoryUrlSuffix, categoryUrlKey, productType, filteredSetsData, availableGroups, category, attributeData, pageInfo } = talonProps;
+
+    if (loading && !setsData)
+        return <SetsDataShimmer />;
+    if (error && !setsData) return <ErrorView />;
+
+    if (!setsData && !loading && !error) {
+        return <SetsDataShimmer />;
+    }
+
+    const setsLengthArr = [];
+
+    const newSetsData = searchQuery ? filteredSetsData : setsData;
+
+    // useEffect(() => {
+        if (setsData && setsData.length) {
+            setsData.map((setRelease, index) => {
+                const { group, sets } = setRelease;
+
+                setsLengthArr[group] = sets.length
+            })
+        }
+    // }, [setsData])
+
+    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;
+    }
+
+    let allSetsTitle = "Sets";
+    let attributeCode = attributeData ? attributeData.attribute_code : '';
+    let byYearTitle = "By Year";
+    // if (shopby == "singles") {
+    //     attributeCode = "lego_set_name";
+    //     // allSetsTitle = "Singles";
+    //     byYearTitle = "By Year";
+    // }
+
+    const setRelases = newSetsData && newSetsData.length && newSetsData.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 || ''}?${attributeCode}[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 || newSetsData.length == 1) {
+            setsResultSplitted = splitToNChunks(setsResult, 3);
+        }
+        
+        return (
+            <>
+                {active == "all" && newSetsData.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-medium 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 || newSetsData.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-medium border-b border-gray-100 pb-1 mb-2'>{group}</div> : 
+                        <div className='singles_item_group_letter text-xl font-medium 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);
+
+        setSearchQuery('')
+    }
+
+    const handleActiveTab = (val) => {
+        setActiveTab(val);
+        setActive('all');
+        setActiveFilter('');
+
+        setSearchQuery('')
+    }
+    const handleSearchQuery = (val) => {
+        setSearchQuery(val)
+        setActive('all')
+    }
+
+    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 title = pageInfo ? pageInfo.title : 'All Sets';
+    if (activeTab == "year") {
+        title = "Sets | By Year";
+    }
+    
+    const availableFilters = [
+        'Theme',
+        'Sub-Theme',
+        'Interest',
+        'Age Level'
+    ];
+
+    const handleActiveFilter = (val) => {
+        setActiveFilter(val);
+
+        setActive('all');
+
+        setSearchQuery('')
+    }
+
+    return (
+        <Fragment>
+            <StoreTitle>{title}</StoreTitle>
+            <Breadcrumbs categoryId={categoryId} customPage={shopby == "singles" ? "Mini-Figures" : title} />
+            {/* <ul className={classes.nav}>
+                <li className={classes.nav_item}>
+                    <button
+                        onClick={() => {
+                            handleActiveTab('year')
+                        }}
+                    >
+                        {activeTab == 'year' ? <b>{byYearTitle}</b> : byYearTitle}
+                    </button>
+                </li>
+                <li className={classes.nav_item}>
+                    <button
+                        onClick={() => {
+                            handleActiveTab('all')
+                        }}
+                    >
+                        {activeTab == 'all' ? <b>{allSetsTitle}</b> : allSetsTitle}
+                    </button>
+                </li>
+            </ul> */}
+            {shopby == "lego_set_name" && activeTab == "all" ? <><ul className={classes.nav}>
+                {availableFilters.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('')
+                }}
+            >
+                {!activeFilter ? <b>A-Z</b> : 'A-Z'}
+            </button>
+        </li></ul>
+            
+                </> : ''}
+            {!pageInfo.hide_title && <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
+                {title}
+            </h1>}
+            {activeTab == "year" && availableGroups ? <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> : ''}
+            {pageInfo.filter_group && <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>}
+            <div className='border border-gray-100 px-6'>
+                {setsData ? (
+                    <div
+                        className={classes.toolbar}
+                    >
+                        <div style={{"width":"35%"}}><ArraySearchInput active={active} searchQuery={searchQuery} placeholder="Search sets..." isOpen={true} setSearchQuery={handleSearchQuery} /></div>
+                        {/* <CustomSortBy sortProps={sortProps} availableSortMethods={availableSortBy} /> */}
+                    </div>
+                ) : ''}
+                <section className='single_list-indexing-container relative m-auto pt-5'>
+                    {!activeFilter && activeTab != "year" && <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)}>
+                        {newSetsData && newSetsData.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 SetsData;

package/src/components/SetsData/setsData.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/SetsData/setsData.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 './setsData.module.css';
+import cn from 'classnames';
+import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+
+const SetsData = 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-medium 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-medium 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-medium 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-medium 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-medium 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-medium border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                    </div>
+                </section>
+            </div>
+        </>
+    );
+};
+
+export default SetsData;

package/src/components/ShopBy/shopBy.js

@@ -110,7 +110,7 @@ const ShopBy = props => {
 
     const talonProps = useShopBy({ activeFilter, searchQuery, active, setActive, currentSort, categoryId, shopby });
 
-    const { error, loading, dataResult, categoryUrlSuffix, categoryUrlKey, productType, filteredAvailableGroups, availableGroups, attributeData, alpha, category, activeFilters } = talonProps;
+    const { error, loading, dataResult, categoryUrlSuffix, categoryUrlKey, productType, filteredAvailableGroups, availableGroups, attributeData, alpha, category, activeFilters, pageInfo } = talonProps;
 
     if (loading && !dataResult)
         return <ShopByShimmer />;
@@ -233,7 +233,8 @@ const ShopBy = props => {
         }
     ];
     
-    const title = attributeData ? (attributeData.attribute_code == "sc_baseball_parallel" ? "Parallel Sets" : (attributeData.attribute_code == "sc_baseball_inserts" ? "Insert Sets" : attributeData.label)) : "Shop By"
+    // const title = attributeData ? (attributeData.attribute_code == "sc_baseball_parallel" ? "Parallel Sets" : (attributeData.attribute_code == "sc_baseball_inserts" ? "Insert Sets" : attributeData.label)) : "Shop By"
+    const title = pageInfo ? pageInfo.title : '';
 
     let availableFilterOption = [];
 

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

@@ -335,6 +335,19 @@ export const GET_PRODUCTS_BY_URL_KEY = gql`
                             amount_off
                         }
                     }
+                    minimum_price {
+                        final_price {
+                            currency
+                            value
+                        }
+                        regular_price {
+                            currency
+                            value
+                        }
+                        discount {
+                            amount_off
+                        }
+                    }
                 }
                 sku
                 small_image {