@riosst100/pwa-marketplace 1.6.2 → 1.6.3

package/src/components/ShopBy/shopBy.js

@@ -0,0 +1,237 @@
+import React, { Fragment, Suspense, useMemo, useRef, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { array, number, shape, string } from 'prop-types';
+
+import { useIsInViewport } from '@magento/peregrine/lib/hooks/useIsInViewport';
+import { useCategoryContent } from '@magento/peregrine/lib/talons/RootComponents/Category';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Breadcrumbs from '@magento/venia-ui/lib/components/Breadcrumbs';
+import FilterModalOpenButton, {
+    FilterModalOpenButtonShimmer
+} from '@magento/venia-ui/lib/components/FilterModalOpenButton';
+import { FilterSidebarShimmer } from '@magento/venia-ui/lib/components/FilterSidebar';
+import Gallery, { GalleryShimmer } from '@magento/venia-ui/lib/components/Gallery';
+import Pagination from '@magento/venia-ui/lib/components/Pagination';
+import ProductSort, { ProductSortShimmer } from '@magento/venia-ui/lib/components/ProductSort';
+import RichContent from '@magento/venia-ui/lib/components/RichContent';
+import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
+import SortedByContainer, {
+    SortedByContainerShimmer
+} from '@magento/venia-ui/lib/components/SortedByContainer';
+import NoProductsFound from '@magento/venia-ui/lib/RootComponents/Category/NoProductsFound';
+import cn from 'classnames';
+import ProductListTab, { ProductListTabShimmer } from '@riosst100/pwa-marketplace/src/components/ProductListTab';
+import SubCategory from '@riosst100/pwa-marketplace/src/components/SubCategory/subCategory';
+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';
+import CustomSubCategory from '@riosst100/pwa-marketplace/src/components/SubCategory/customSubCategory';
+import AlphaFilter from '@riosst100/pwa-marketplace/src/components/AlphaFilter';
+
+import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
+import { StoreTitle, Meta } from '@magento/venia-ui/lib/components/Head';
+import { Link } from 'react-router-dom';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import defaultClasses from './shopBy.module.css';
+import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+import { ShopByShimmer } from '@riosst100/pwa-marketplace/src/components/ShopBy';
+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 { useShopBy } from '@riosst100/pwa-marketplace/src/talons/ShopBy/useShopBy';
+
+const FilterModal = React.lazy(() => import('@magento/venia-ui/lib/components/FilterModal'));
+const FilterSidebar = React.lazy(() =>
+    import('@magento/venia-ui/lib/components/FilterSidebar')
+);
+const FilterTop = React.lazy(() =>
+    import('@riosst100/pwa-marketplace/src/components/FilterTop')
+);
+
+const ShopBy = props => {
+    const {
+        categoryId,
+        shopby
+    //     data,
+    //     isLoading,
+    //     pageControl,
+    //     sortProps,
+    //     pageSize
+    } = props;
+    // const [currentSort] = sortProps;
+
+    // const talonProps = useCategoryContent({
+    //     categoryId,
+    //     data,
+    //     pageSize
+    // });
+
+    // const {
+    //     availableSortMethods,
+    //     categoryName,
+    //     categoryDescription,
+    //     filters,
+    //     items,
+    //     children,
+    //     parent,
+    //     totalCount,
+    //     totalPagesFromData,
+    //     attributesBlock,
+    //     category,
+    //     virtualCategoryFilters
+    // } = talonProps;
+    
+    const [active, setActive] = useState('all');
+
+    const [searchQuery, setSearchQuery] = useState('');
+
+    
+    const sortProps = useCustomSort({ sortFromSearch: false, defaultSort: {
+        sortText: 'All (A-Z)',
+        value: 'all'
+    }});
+
+    const [currentSort] = sortProps;
+
+    // const [sortBy, setSortBy] = useState({
+    //     sortText: 'All (A-Z)',
+    //     value: 'all'
+    // });
+
+    // console.log(currentSort)
+
+    const classes = useStyle(defaultClasses);
+
+    const talonProps = useShopBy({ searchQuery, setActive, currentSort, categoryId, shopby });
+
+    const { error, loading, dataResult, categoryUrlSuffix, categoryUrlKey, productType, filteredAvailableGroups, availableGroups, attributeData, alpha, category } = talonProps;
+
+    if (loading && !dataResult)
+        return <ShopByShimmer />;
+    if (error && !dataResult) return <ErrorView />;
+
+    if (!dataResult && !loading && !error) {
+        return <ShopByShimmer />;
+    }
+
+    const newAvailableGroups = searchQuery ? filteredAvailableGroups : availableGroups;
+
+    const setRelases = newAvailableGroups.map((group, index) => {
+        const optionsResult = [];
+
+        if (active === 'all' || active === group) {
+            dataResult[group].map((option, index) => {
+                const { label, value } = option;
+
+                const categoryUrl = resourceUrl(
+                    `/${category.url_path}${categoryUrlSuffix || ''}?${attributeData.attribute_code}[filter]=${label},${value}`
+                );
+
+                optionsResult.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">
+                        {label}
+                    </Link>
+                </li>)
+            })
+
+            return (
+                <>
+                    {optionsResult ?
+                    <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' >
+                            {group}
+                        </div>
+                        <div className={cn('singles_item-list flex flex-col')}>{optionsResult}</div>
+                    </div> : ''}
+                </>
+            );
+        }
+        
+        return null;
+    });
+
+    const handleActive = (val) => {
+        setActive(val);
+
+        // 
+
+
+        setSearchQuery('')
+    }
+
+    let availableSortBy = [
+        {
+            'label': 'All (A-Z)',
+            'value': 'all'
+        }
+    ];
+
+    return (
+        <Fragment>
+            <StoreTitle>{attributeData ? category.name + ' | ' + attributeData.label : 'Shop By'}</StoreTitle>
+            <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'>
+                {attributeData ? category.name + ' | ' + attributeData.label : 'Shop By'}
+            </h1>
+            <div className='border border-gray-100 px-6'>
+                {dataResult ? (
+                    <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>
+                ) : ''}
+                {productType != "expansion-sets" ? (
+                    <>
+                        <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')
+                                        }}
+                                    >
+                                        {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 ',
+                                                availableGroups.includes(letter) > 0 ? 'hover_bg-gray-50' : 'bg-gray-100 text-gray-400',
+                                            )}
+                                            onClick={() => {
+                                                handleActive(letter)
+                                            }}
+                                            disabled={availableGroups.includes(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)}>
+                        {Object.keys(dataResult).length != 0 ? setRelases : (searchQuery ? <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>No data found for <b>{searchQuery}</b> search query.</div> : <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>No data found.</div>)}
+                    </div>
+                </section>
+            </div>
+        </Fragment>
+    );
+};
+
+export default ShopBy;

package/src/components/ShopBy/shopBy.module.css

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

package/src/components/ShopBy/shopBy.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 './shopBy';
+import cn from 'classnames';
+import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+
+const ShopBy = 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 py-10'>
+                        <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 ShopBy;

package/src/components/ShopByPage/index.js

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

package/src/components/ShopByPage/shopByPage.js

@@ -0,0 +1,12 @@
+import React, { Fragment } from 'react';
+import ShopBy from '@riosst100/pwa-marketplace/src/components/ShopBy/shopBy';
+
+const ShopByPage = () => {
+    return (
+        <Fragment>
+            <ShopBy />
+        </Fragment>
+    )
+}
+
+export default ShopByPage;

package/src/hooks/useCustomSort.js

@@ -0,0 +1,21 @@
+import { useState } from 'react';
+
+// TODO: Read the default/initial sort from config.
+const searchSort = {
+    sortText: 'Best Match',
+    sortId: 'sortItem.relevance',
+    sortAttribute: 'relevance',
+    sortDirection: 'DESC'
+};
+
+/**
+ *
+ * @param props
+ * @returns {[{sortDirection: string, sortAttribute: string, sortText: string}, React.Dispatch<React.SetStateAction<{sortDirection: string, sortAttribute: string, sortText: string}>>]}
+ */
+export const useCustomSort = (props = {}) => {
+    const { sortFromSearch = false, defaultSort } = props;
+    return useState(() =>
+        Object.assign({}, sortFromSearch ? searchSort : defaultSort, props)
+    );
+};

package/src/intercept.js

@@ -116,14 +116,7 @@ module.exports = targets => {
       pattern: "/brand",
       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/FilterSidebar/useFilterSidebar.js

@@ -44,8 +44,8 @@ export const useFilterSidebar = props => {
         const disabled = new Set();
         // Disable category filtering when not on a search page.
         if (pathname !== '/search.html') {
-            // disabled.add('category_id');
-            // disabled.add('category_uid');
+            disabled.add('category_id');
+            disabled.add('category_uid');
         }
 
         return disabled;

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
+                hide_filters
                 allowed_filters {
                     code
                 }

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

@@ -19,6 +19,37 @@ export const ProductsFragment = gql`
             seller {
                 name
             }
+            custom_attributes {
+                selected_attribute_options {
+                    attribute_option {
+                        uid
+                        label
+                        is_default
+                    }
+                }
+                entered_attribute_value {
+                    value
+                }
+                attribute_metadata {
+                    uid
+                    code
+                    label
+                    attribute_labels {
+                        store_code
+                        label
+                    }
+                    data_type
+                    is_system
+                    entity_type
+                    ui_input {
+                        ui_input_type
+                        is_html_allowed
+                    }
+                    ... on ProductAttributeMetadata {
+                        used_in_components
+                    }
+                }
+            }
             price_range {
                 maximum_price {
                     final_price {

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

@@ -9,6 +9,7 @@ import { Meta } from '@magento/venia-ui/lib/components/Head';
 import { GET_PAGE_SIZE } from './category.gql';
 import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
 import { useIntl } from 'react-intl';
+import ShopBy from '@riosst100/pwa-marketplace/src/components/ShopBy/shopBy';
 
 const MESSAGES = new Map().set(
     'NOT_FOUND',
@@ -19,6 +20,12 @@ const Category = props => {
     const { uid } = props;
     const { formatMessage } = useIntl();
 
+    const { location } = globalThis;
+
+    const query = new URLSearchParams(location.search);
+    const shopby = query.get('shopby') || null;
+    console.log('shopyn: '+shopby)
+
     const talonProps = useCategory({
         id: uid,
         queries: {
@@ -58,11 +65,15 @@ const Category = props => {
             />
         );
     }
+    console.log(categoryData)
 
     return (
         <Fragment>
             <Meta name="description" content={metaDescription} />
-            <CategoryContent
+            {shopby ? <ShopBy
+                categoryId={uid}
+                shopby={shopby}
+                isLoading={loading} /> : <CategoryContent
                 categoryId={uid}
                 classes={classes}
                 data={categoryData}
@@ -70,7 +81,7 @@ const Category = props => {
                 pageControl={pageControl}
                 sortProps={sortProps}
                 pageSize={pageSize}
-            />
+            />}
         </Fragment>
     );
 };

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

@@ -85,15 +85,35 @@ const CategoryContent = props => {
     useMemo(() => {
             items && items.map((item, index) => {
                 if (item) {
-                    const firstLetter = item.name.charAt(0).toUpperCase();
-                    if (activeLetter == "all" || activeLetter != "all" && firstLetter == activeLetter) {
-                        return galleryItems.push(item);
+                    const { custom_attributes } = item;
+                    if (custom_attributes) {
+                        let cardName = '';
+                        custom_attributes.some((attribute, index) => {
+                            const { attribute_metadata, entered_attribute_value, selected_attribute_options } = attribute
+                            if (attribute_metadata.code == "card_name") {
+                                cardName = selected_attribute_options.attribute_option[0].label;
+
+                                return true;
+                            }
+
+                            return false;
+                        });
+
+                        if (cardName) {
+                            const firstLetter = cardName.charAt(0).toUpperCase();
+                            console.log(firstLetter + " dan " + activeLetter)
+                            if (activeLetter == "all" || activeLetter != "all" && firstLetter == activeLetter) {
+                                return galleryItems.push(item);
+                            }
+                        }
                     }
                 }
             }),
         [items, activeLetter]
     });
 
+    console.log(galleryItems)
+
     const sidebarRef = useRef(null);
     const classes = useStyle(defaultClasses, props.classes);
     const shouldRenderSidebarContent = useIsInViewport({
@@ -203,6 +223,8 @@ const CategoryContent = props => {
 
     const activeFilters = [];
 
+    let isSingles = false;
+
     if (allActiveFilters && allActiveFilters.size > 0) {
         allActiveFilters.forEach((value, key) => {
             value.forEach((value) => {
@@ -210,6 +232,9 @@ const CategoryContent = props => {
                 
                 const label = filterArr[0];
                 const optionId = filterArr[1];
+                if (label == "Singles") {
+                    isSingles = true;
+                }
                 if (virtualCategoryFilters && virtualCategoryFilters.includes(key)) {
                     activeFilters.push(
                         {
@@ -241,7 +266,7 @@ const CategoryContent = props => {
                 </div>
                 {/* {activeFilters.size <= 0 && category && category.custom_landing_page ? ( */}
                     <>
-                        {currentFilter && <AlphaFilter items={items} handleActiveLetter={handleActiveLetter} activeLetter={activeLetter} />}
+                        {currentFilter && <AlphaFilter isSingles={isSingles} items={items} handleActiveLetter={handleActiveLetter} activeLetter={activeLetter} />}
                         <SubCategory parent={parent} children={children} />
                         {!currentFilter && <CustomSubCategory customSubCategory={category ? category.custom_subcategory : null} />}
                     </>
@@ -256,7 +281,7 @@ const CategoryContent = props => {
                         <div className={classes.contentWrapper}>
                             <div ref={sidebarRef} className={classes.sidebar}>
                                 <Suspense fallback={<FilterSidebarShimmer />}>
-                                    {shouldRenderSidebarContent ? sidebar : null}
+                                    {shouldRenderSidebarContent && category && !category.hide_filters ? sidebar : null}
                                 </Suspense>
                             </div>
                             <div className={classes.categoryContent}>

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

@@ -80,9 +80,9 @@ const FilterSidebar = props => {
 
     const allowedFiltersArr = [];
 
-    allowedFilters.length && allowedFilters.map((val, index) => {
-        allowedFiltersArr.push(val.code);
-    });
+    // allowedFilters && allowedFilters.length && allowedFilters.map((val, index) => {
+    //     allowedFiltersArr.push(val.code);
+    // });
 
     const filtersList = useMemo(
         () =>
@@ -90,7 +90,7 @@ const FilterSidebar = props => {
                 const blockState = filterState.get(group);
                 const groupName = filterNames.get(group);
                 const frontendInput = filterFrontendInput.get(group);
-                if (!allowedFiltersArr.length && group != "category_uid" || allowedFiltersArr.length && allowedFiltersArr.includes(group)) {
+                // if (!allowedFilters && !allowedFiltersArr.length && group != "category_uid" || allowedFilters && allowedFiltersArr.length && allowedFiltersArr.includes(group)) {
                     
 
                     return (
@@ -106,7 +106,7 @@ const FilterSidebar = props => {
                             initialOpen={iteration < filterCountToOpen}
                         />
                     );
-                }
+                // }
             }),
         [
             filterApi,

package/src/overwrites/venia-ui/lib/components/Gallery/gallery.js

@@ -26,9 +26,9 @@ const Gallery = props => {
                     return <GalleryItemShimmer key={index} />;
                 }
 
-                const firstLetter = item.name.charAt(0).toUpperCase();
+                // const firstLetter = item.name.charAt(0).toUpperCase();
 
-                if (activeLetter == "all" || activeLetter != "all" && firstLetter == activeLetter) {
+                // if (activeLetter == "all" || activeLetter != "all" && firstLetter == activeLetter) {
                 return (
                     <GalleryItem
                         key={item.id}
@@ -36,7 +36,7 @@ const Gallery = props => {
                         storeConfig={storeConfig}
                     />
                 );
-                }
+                // }
             }),
         [items, storeConfig, activeLetter]
     );