@riosst100/pwa-marketplace 1.5.2 → 1.5.4

package/package.json

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

package/src/components/CollectibleGameSets/collectibleGameSets.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useSeller } from '@riosst100/pwa-marketplace/src/talons/Seller/useSeller';
 import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
@@ -6,9 +6,20 @@ import { StoreTitle, Meta } from '@magento/venia-ui/lib/components/Head';
 import { useCollectibleGameSets } from '@riosst100/pwa-marketplace/src/talons/CollectibleGameSets/useCollectibleGameSets';
 import { Link } from 'react-router-dom';
 import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import defaultClasses from './collectibleGameSets.module.css';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import cn from 'classnames';
+import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
 
 const CollectibleGameSets = props => {
-    const talonProps = useCollectibleGameSets();
+
+    const { product_type } = props;
+
+    const [active, setActive] = useState('all');
+
+    const classes = useStyle(defaultClasses);
+
+    const talonProps = useCollectibleGameSets({ product_type });
 
     const { error, loading, collectibleGameSets, categoryUrlSuffix, categoryUrlKey, productType } = talonProps;
 
@@ -35,10 +46,10 @@ const CollectibleGameSets = props => {
     const setRelases = collectibleGameSets.map((setRelease, index) => {
         const { release_type, sets } = setRelease;
 
-        const setsResult = [];
-
         setsLengthArr[release_type] = sets.length
 
+        const setsResult = [];
+
         if (sets.length) {
             sets.map((set, index) => {
                 const { set_name, option_id, set_abbreviation } = set;
@@ -47,44 +58,85 @@ const CollectibleGameSets = props => {
                     `/games/collectible-game/${categoryUrlKey}${categoryUrlSuffix || ''}?card_set[filter]=${set_name},${option_id}`
                 );
 
-                setsResult.push(
-                    <li>
-                        <Link to={categoryUrl}>{set_name} <small style={{"color":"grey"}}>{set_abbreviation}</small></Link>
-                    </li>
-                );
-            });
+                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} <small style={{"color":"grey"}}>{set_abbreviation}</small>
+                    </Link>
+                </li>)
+            })
         }
-
+        
         return (
             <>
-                <div id={"#tab_list_"+release_type.toLowerCase()}>
-                    <div className='text-[16px] pb-2'><b>{release_type}</b></div>
-                    <hr />
-                    <ul className='pt-2'>{setsResult}</ul>
-                </div>
+                {active == "all" || active == release_type ?
+                <div id={"#tab_list_"+release_type.toLowerCase()} 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' >
+                        {release_type}
+                    </div>
+                    <div className={cn('singles_item-list flex flex-col')}>{setsResult}</div>
+                </div> : ''}
             </>
         );
     });
 
+    const handleActive = (val) => {
+        setActive(val);
+    }
+
     const 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'];
 
     return (
-        <Fragment>
-            <StoreTitle>{"Magic: The Gathering" + " | " + (productType == "sealed-products" ? "Expansion Sets" : "All Sets")}</StoreTitle>
-            <div className='text-[20px] pb-4 pt-5'><b>{productType == "sealed-products" ? "Expansion Sets" : "All Sets"}</b></div>
-            {productType != "sealed-products" ? (
-                <>
-                    <div className='flex flex-wrap mb-3'>
-                        {alpha.map((val, index) => 
-                            setsLengthArr[val] > 0 ? (
-                            <a className="py-2 px-3 font-bold mr-1 border" href={"#tab_list_"+val.toLowerCase()}>{val}</a>
-                            ) : (<span className="py-2 px-3 font-bold mr-1 border" style={{"color":"grey"}}>{val}</span>)
-                        )}
+        <>
+            <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
+                {productType == "sealed-products" ? "Expansion Sets" : "All Sets"}
+            </h1>
+            <div className='border border-gray-100 px-6'>
+                {productType != "sealed-products" ? (
+                    <>
+                        <section className='single_list-indexing-container relative m-auto py-10'>
+                            <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')
+                                        }}
+                                    >
+                                        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}
+                                        >
+                                            {letter}
+                                        </button>
+                                    </li>
+                                ))}
+                            </ul>
+                        </section>
+                    </>
+                ) : ''}
+                <Divider className="mb-5 px-4" />
+                <section className='singles-container'>
+                    <div className={cn('singles-wrapper block -mx-4', classes.singlesWrapper)}>
+                        {setRelases}
                     </div>
-                </>
-            ) : ''}
-            <div className='flex flex-wrap gap-[30px]'>{setRelases}</div>
-        </Fragment>
+                </section>
+            </div>
+        </>
     );
 };
 

package/src/components/CollectibleGameSets/collectibleGameSets.module.css

@@ -0,0 +1,38 @@
+.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;
+}
+
+@media screen and (min-width: 768px) {
+    .singlesWrapper {
+        column-count: 2;
+    }
+}
+
+@media screen and (min-width: 1023px) {
+    .singlesWrapper {
+        column-count: 3;
+    }
+}

package/src/components/Dropdown/dropdown.js

@@ -0,0 +1,77 @@
+import React, { useEffect, useState, useRef } from 'react';
+import cn from 'classnames';
+import { ArrowDown2 } from 'iconsax-react';
+
+const Dropdown = (props) => {
+    const {
+        placeholder, options, onSelect, rootClassName, className,
+        optionsClassName, optionItemClassName,
+    } = props;
+    const [isOpen, setIsOpen] = useState(false);
+    const [selected, setSelected] = useState('');
+    const dropdownRef = useRef(null);
+
+    const toggleDropdown = () => setIsOpen(!isOpen);
+
+    const handleClick = (option) => {
+        onSelect(option);
+        setSelected(option.label)
+        setIsOpen(false);
+    };
+
+    const handleClickOutside = (event) => {
+        if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+            setIsOpen(false);
+        }
+    };
+
+    useEffect(() => {
+        const listener = document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [isOpen]);
+
+    return (
+        <div className={cn('dropdown relative', rootClassName)} ref={dropdownRef}>
+            <button
+                onClick={toggleDropdown}
+                className={cn(
+                    'text-base text-gray-400 flex justify-between items-center gap-x-4 border',
+                    'border-gray-100 border-solid rounded-md min-w-max px-2.5 py-2',
+                    className
+                )}
+            >
+                {selected ? selected : placeholder}
+                <ArrowDown2
+                    size={14}
+                    className={cn(
+                        ' text-gray-400 transition-all',
+                        isOpen ? 'rotate-180' : 'rotate-0',
+                    )}
+                />
+            </button>
+            {isOpen && (
+                <ul
+                    className={cn(
+                        'absolute rounded-md bg-white w-full p-2.5 mt-2 border border-gray-100',
+                        optionsClassName,
+                    )}
+                >
+                    {options.map((option) => (
+                        <li
+                            className={cn(
+                                'cursor-pointer px-3 py-1.5 hover_bg-gray-100 rounded-md',
+                                optionItemClassName
+                            )}
+                            key={option.value}
+                            onClick={() => handleClick(option)}
+                        >
+                            {option.label}
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </div>
+    );
+};
+
+export default Dropdown;

package/src/components/Dropdown/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import Content from './dropdown';
+
+const index = (props) => {
+    return (
+        <Content {...props} />
+    )
+}
+
+export default index

package/src/components/MtgSinglesPage/index.js

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import Content from './mtgSingles';
+
+const index = (props) => {
+    const [active, setActive] = useState('all')
+    const letters = Array.from({ length: 26 }, (_, i) => String.fromCharCode(i + 65));
+
+    const singles = [
+        { id: 1, name: "Amonkhet" },
+        { id: 2, name: "ApocalypseAPC" },
+        { id: 3, name: "AmonkhetAKH" },
+        { id: 4, name: "Rivals of IxalanRIX" },
+        { id: 5, name: "Rise of the EldraziROE" },
+        { id: 5, name: "Ravnica Remastered - VariantsRVR2" },
+        { id: 5, name: "Streets of New CapennaSNC" },
+        { id: 5, name: "Streets of New Capenna CommanderNCC" },
+        { id: 5, name: "ChroniclesCHR" },
+        { id: 5, name: "Commander 2019C19" },
+        { id: 5, name: "Commander - OversizedCMD2" },
+        { id: 5, name: "Throne of Eldraine - VariantsELD2" },
+        { id: 5, name: "TormentTOR" },
+        { id: 6, name: "Dominaria UnitedDMU" },
+        { id: 7, name: "Double Masters2XM" },
+        { id: 8, name: "WorldwakeWWK" },
+        { id: 8, name: "World ChampionshipWCHP" },
+        { id: 8, name: "Welcome Deck 2017W17" },
+        { id: 8, name: "ZendikarZEN" },
+        { id: 8, name: "Zendikar Rising - VariantsZNR2" },
+        { id: 8, name: "Visions" },
+        { id: 8, name: "Zendikar Rising ExpeditionsZNE" },
+    ];
+
+    const groupSinglesFirstLetter = (items) => {
+        return items.reduce((acc, item) => {
+            const firstLetter = item.name.charAt(0).toUpperCase();
+            acc[firstLetter] = acc[firstLetter] || [];
+            acc[firstLetter].push(item);
+            return acc;
+        }, {});
+    }
+
+    const groupedSingles = groupSinglesFirstLetter(singles);
+    const availableLetter = Object.keys(groupedSingles).sort();
+
+    const handleActive = (val) => {
+        setActive(val);
+    }
+
+    const contentProps = {
+        letters,
+        groupedSingles,
+        availableLetter,
+        active,
+        handleActive,
+        ...props
+    }
+    return (
+        <Content {...contentProps} />
+    )
+}
+
+export default index

package/src/components/MtgSinglesPage/mtgSingles.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+import cn from 'classnames';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './singles.module.css';
+import { Link } from 'react-router-dom'
+
+const mtgSingles = (props) => {
+    const { letters, groupedSingles, active, handleActive, availableLetter } = props;
+
+    const classes = useStyle(defaultClasses);
+
+    return (
+        <>
+            <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
+                MTG Singles
+            </h1>
+            <div className='border border-gray-100 px-6'>
+                <section className='single_list-indexing-container relative m-auto py-10'>
+                    <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')
+                                }}
+                            >
+                                All
+                            </button>
+                        </li>
+                        {letters.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 ',
+                                        !availableLetter.includes(letter) ? 'bg-gray-100 text-gray-400' : 'hover_bg-gray-50',
+                                    )}
+                                    onClick={() => {
+                                        handleActive(letter)
+                                    }}
+                                    disabled={!availableLetter.includes(letter)}
+                                >
+                                    {letter}
+                                </button>
+                            </li>
+                        ))}
+                    </ul>
+                </section>
+                <Divider className="mb-5 px-4" />
+                <section className='singles-container'>
+                    <div className={cn('singles-wrapper block -mx-4', classes.singlesWrapper)}>
+                        {availableLetter.map((initialLetter, index) => (
+                            <>
+                                {active === 'all' || active === initialLetter ? (
+                                    <div className='singles_group-wrapper mb-4 px-4 inline-block w-full' key={index}>
+                                        <div className='singles_item_group_letter text-xl font-semibold border-b border-gray-100 pb-1 mb-2' >
+                                            {initialLetter}
+                                        </div>
+                                        <div
+                                            className={cn(
+                                                'singles_item-list flex flex-col'
+                                            )}
+                                        >
+                                            {groupedSingles[initialLetter].map((item, index) => (
+                                                <li key={index} className='list-none'>
+                                                    <Link
+                                                        to="/"
+                                                        className="hover_bg-darkblue-900 hover_text-white w-full block text-[14px] py-[2px] px-2"
+                                                    >
+                                                        {item.name}
+                                                    </Link>
+                                                </li>
+                                            ))}
+                                        </div>
+                                    </div>
+                                ) : null}
+                            </>
+                        ))}
+                    </div>
+                </section>
+            </div>
+        </>
+    )
+}
+
+export default mtgSingles

package/src/components/MtgSinglesPage/singles.module.css

@@ -0,0 +1,15 @@
+.singlesWrapper {
+    column-count: 1;
+}
+
+@media screen and (min-width: 768px) {
+    .singlesWrapper {
+        column-count: 2;
+    }
+}
+
+@media screen and (min-width: 1023px) {
+    .singlesWrapper {
+        column-count: 3;
+    }
+}

package/src/components/SubCategory/subCategory.js

@@ -1,36 +1,30 @@
 import { useSubCategory } from '@riosst100/pwa-marketplace/src/talons/SubCategory/useSubCategory';
-import React from 'react';
+import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
 import defaultClasses from './subCategory.module.css';
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import { useFilterSidebar } from '@magento/peregrine/lib/talons/FilterSidebar';
+import CollectibleGameSets from '@riosst100/pwa-marketplace/src/components/CollectibleGameSets/collectibleGameSets';
 
 const SubCategory = props => {
-    const { children } = props;
+    // const { children } = props;
 
-    const talonProps = useSubCategory({ children });
+    // const talonProps = useSubCategory({ children });
 
     const classes = useStyle(defaultClasses, props.classes);
 
-    const {
-        normalizedData
-    } = talonProps;
-    
-    const subCategory = [];
-    
-    normalizedData && normalizedData.map(({ text, path }, index) => {
-        subCategory.push(
-            <Link
-                key={index}
-                to={resourceUrl(path)}
-            >
-                <li className={classes.item}>{text}</li>
-            </Link>
-        )
-    });
+    const [activeTab, setActiveTab] = useState('singles')
 
-    return subCategory.length ? <ul className={classes.root}>{subCategory}</ul> : '';
+    return (
+        <>
+            <ul className={classes.root}>
+                <li className={classes.item} onClick={() => setActiveTab('singles')}>All Sets</li>
+                <li className={classes.item} onClick={() => setActiveTab('sealed-products')}>Expansion Sets</li>
+            </ul>
+            {activeTab == "singles" ? <CollectibleGameSets product_type={"singles"} /> : <CollectibleGameSets product_type={"sealed-products"} />}
+        </>
+    )
 };
 
 export default SubCategory;

package/src/intercept.js

@@ -117,6 +117,13 @@ module.exports = targets => {
       path: require.resolve("./components/BrandLandingPage/index.js"),
       authed: false,
     },
+    {
+      exact: true,
+      name: "MtgSinglesPage",
+      pattern: "/mtg-singles",
+      path: require.resolve("./components/MtgSinglesPage/index.js"),
+      authed: false,
+    },
   ];
 
   // Apply DefinePlugin using the results of the asynchronous operation

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

@@ -29,6 +29,7 @@ export const GET_CATEGORY_CONTENT = gql`
                 description
                 url_key
                 url_path
+                custom_landing_page
                 attributes_block {
                     label
                     code

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

@@ -28,6 +28,9 @@ import SubCategory from '@riosst100/pwa-marketplace/src/components/SubCategory/s
 import AttributesBlock from '@riosst100/pwa-marketplace/src/components/AttributesBlock/attributesBlock';
 
 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 { getFiltersFromSearch } from '@magento/peregrine/lib/talons/FilterModal/helpers';
 
 const FilterModal = React.lazy(() => import('@magento/venia-ui/lib/components/FilterModal'));
 const FilterSidebar = React.lazy(() =>
@@ -170,6 +173,9 @@ const CategoryContent = props => {
 
     const categoryTitle = categoryName ? categoryName : <Shimmer width={5} />;
 
+    const { search } = useLocation();
+    const activeFilters = getFiltersFromSearch(search);
+
     return (
         <Fragment>
             <Breadcrumbs categoryId={categoryId} />
@@ -186,39 +192,47 @@ const CategoryContent = props => {
                     </h1>
                     {categoryDescriptionElement}
                 </div>
-                {/* <SubCategory filters={filters} children={children} /> */}
-                <FilterTop filters={filters} category={category} />
-                {/* <AttributesBlock category={category} attributesBlock={attributesBlock} /> */}
-                {/* <section className='category_brand-slider my-5'>
-                    <BrandSlider />
-                </section> */}
-                <div className={classes.contentWrapper}>
-                    <div ref={sidebarRef} className={classes.sidebar}>
-                        <Suspense fallback={<FilterSidebarShimmer />}>
-                            {shouldRenderSidebarContent ? sidebar : null}
-                        </Suspense>
-                    </div>
-                    <div className={classes.categoryContent}>
-                        <div className={cn(classes.heading)}>
-                            {maybeProductsTabContainer}
-                            <div className={classes.headerButtons}>
-                                {maybeFilterButtons}
-                                {maybeSortButton}
+                {activeFilters.size <= 0 && category && category.custom_landing_page ? (
+                    <>
+                        <SubCategory customLandingPage={category.custom_landing_page} />
+                    </>
+                ) : (
+                    <>
+                        {/* <SubCategory filters={filters} children={children} /> */}
+                        <FilterTop filters={filters} category={category} />
+                        {/* <AttributesBlock category={category} attributesBlock={attributesBlock} /> */}
+                        {/* <section className='category_brand-slider my-5'>
+                            <BrandSlider />
+                        </section> */}
+                        <div className={classes.contentWrapper}>
+                            <div ref={sidebarRef} className={classes.sidebar}>
+                                <Suspense fallback={<FilterSidebarShimmer />}>
+                                    {shouldRenderSidebarContent ? sidebar : null}
+                                </Suspense>
                             </div>
-                            {maybeSortContainer}
-                        </div>
-                        <div className={cn(classes.heading)}>
-                            <div
-                                data-cy="CategoryContent-categoryInfo"
-                                className={classes.categoryInfo}
-                            >
-                                {categoryResultsHeading}
+                            <div className={classes.categoryContent}>
+                                <div className={cn(classes.heading)}>
+                                    {maybeProductsTabContainer}
+                                    <div className={classes.headerButtons}>
+                                        {maybeFilterButtons}
+                                        {maybeSortButton}
+                                    </div>
+                                    {maybeSortContainer}
+                                </div>
+                                <div className={cn(classes.heading)}>
+                                    <div
+                                        data-cy="CategoryContent-categoryInfo"
+                                        className={classes.categoryInfo}
+                                    >
+                                        {categoryResultsHeading}
+                                    </div>
+                                </div>
+                                {content}
+                                <Suspense fallback={null}>{filtersModal}</Suspense>
                             </div>
                         </div>
-                        {content}
-                        <Suspense fallback={null}>{filtersModal}</Suspense>
-                    </div>
-                </div>
+                    </>
+                )}
             </article>
         </Fragment>
     );