@riosst100/pwa-marketplace 1.6.0 → 1.6.2

package/src/components/SubCategory/subCategory.js

@@ -16,7 +16,7 @@ const SubCategory = props => {
         normalizedData
     } = talonProps;
 
-    const maxSubCategory = 5;
+    const maxSubCategory = 7;
     
     const subCategory = [];
     
@@ -38,7 +38,7 @@ const SubCategory = props => {
             <Link
                 to={resourceUrl('/')}
             >
-                <li className={classes.item}>{"Other " + parent[0].name}</li>
+                <li className={classes.item}>{"More " + parent[0].name}</li>
             </Link>
         )
     }

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

@@ -62,16 +62,3 @@ const NoProductsFound = props => {
 };
 
 export default NoProductsFound;
-
-NoProductsFound.propTypes = {
-    categoryId: number,
-    classes: shape({
-        root: string,
-        title: string,
-        list: string,
-        categories: string,
-        listItem: string,
-        image: string,
-        imageContainer: string
-    })
-};

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

@@ -1,4 +1,4 @@
-import React, { Fragment, Suspense, useMemo, useRef } from 'react';
+import React, { Fragment, Suspense, useMemo, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { array, number, shape, string } from 'prop-types';
 
@@ -32,6 +32,7 @@ import CollectibleGameSets from '@riosst100/pwa-marketplace/src/components/Colle
 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';
 
 const FilterModal = React.lazy(() => import('@magento/venia-ui/lib/components/FilterModal'));
 const FilterSidebar = React.lazy(() =>
@@ -73,6 +74,26 @@ const CategoryContent = props => {
         virtualCategoryFilters
     } = talonProps;
 
+    const [activeLetter, setActiveLetter] = useState('all')
+
+    const handleActiveLetter = (val) => {
+        setActiveLetter(val);
+    }
+
+    const galleryItems = [];
+
+    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);
+                    }
+                }
+            }),
+        [items, activeLetter]
+    });
+
     const sidebarRef = useRef(null);
     const classes = useStyle(defaultClasses, props.classes);
     const shouldRenderSidebarContent = useIsInViewport({
@@ -127,11 +148,11 @@ const CategoryContent = props => {
     ) : null;
 
     const categoryResultsHeading =
-        totalCount > 0 ? (
+    galleryItems.length > 0 ? (
             <FormattedMessage
                 id={'categoryContent.resultCount'}
                 values={{
-                    count: totalCount
+                    count: galleryItems.length
                 }}
                 defaultMessage={'{count} Results'}
             />
@@ -149,9 +170,9 @@ const CategoryContent = props => {
         }
 
         const gallery = totalPagesFromData ? (
-            <Gallery items={items} />
+            <Gallery items={galleryItems} activeLetter={activeLetter} />
         ) : (
-            <GalleryShimmer items={items} />
+            <GalleryShimmer items={galleryItems} />
         );
 
         const pagination = totalPagesFromData ? (
@@ -171,7 +192,8 @@ const CategoryContent = props => {
         isLoading,
         items,
         pageControl,
-        totalPagesFromData
+        totalPagesFromData,
+        activeLetter
     ]);
 
     const categoryTitle = categoryName ? categoryName : <Shimmer width={5} />;
@@ -219,13 +241,14 @@ const CategoryContent = props => {
                 </div>
                 {/* {activeFilters.size <= 0 && category && category.custom_landing_page ? ( */}
                     <>
+                        {currentFilter && <AlphaFilter items={items} handleActiveLetter={handleActiveLetter} activeLetter={activeLetter} />}
                         <SubCategory parent={parent} children={children} />
                         {!currentFilter && <CustomSubCategory customSubCategory={category ? category.custom_subcategory : null} />}
                     </>
                 {/* ) : ( */}
                     <>
                         {/* <SubCategory filters={filters} children={children} /> */}
-                        <FilterTop filters={filters} category={category} />
+                        <FilterTop filters={filters} category={category} children={children} allowedFilters={category ? category.allowed_filters : []} />
                         {/* <AttributesBlock category={category} attributesBlock={attributesBlock} /> */}
                         {/* <section className='category_brand-slider my-5'>
                             <BrandSlider />

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

@@ -76,6 +76,7 @@ const Breadcrumbs = props => {
         currentProduct ? (
             filterBreadcrumbsElement.push(
                 <Link
+                    key={index}
                     className={classes.link}
                     to={resourceUrl(currentCategoryPath)}
                     onClick={handleClick}
@@ -85,10 +86,10 @@ const Breadcrumbs = props => {
             )
         ) : (
             filterBreadcrumbsElement.push(
-                <>
+                <span key={index}>
                     <span className={classes.divider}>{DELIMITER}</span>
                     <span className={cn(classes.currentCategory, 'text-blue-700 font-medium')}>{filter.label}</span>
-                </>
+                </span>
             )
         );
     });

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

@@ -14,7 +14,7 @@ import { useGallery } from '@magento/peregrine/lib/talons/Gallery/useGallery';
  * @params {Array} props.items an array of items to render
  */
 const Gallery = props => {
-    const { items } = props;
+    const { items, activeLetter } = props;
     const classes = useStyle(defaultClasses, props.classes);
     const talonProps = useGallery();
     const { storeConfig } = talonProps;
@@ -25,6 +25,10 @@ const Gallery = props => {
                 if (item === null) {
                     return <GalleryItemShimmer key={index} />;
                 }
+
+                const firstLetter = item.name.charAt(0).toUpperCase();
+
+                if (activeLetter == "all" || activeLetter != "all" && firstLetter == activeLetter) {
                 return (
                     <GalleryItem
                         key={item.id}
@@ -32,8 +36,9 @@ const Gallery = props => {
                         storeConfig={storeConfig}
                     />
                 );
+                }
             }),
-        [items, storeConfig]
+        [items, storeConfig, activeLetter]
     );
 
     return (

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

@@ -37,7 +37,8 @@ const GalleryItem = props => {
         item,
         itemRef,
         wishlistButtonProps,
-        isSupportedProductType
+        isSupportedProductType,
+        rootClassName
     } = useGalleryItem(props);
 
     const seller = item.seller ? item.seller.name : '';
@@ -92,6 +93,7 @@ const GalleryItem = props => {
             aria-label={name}
             onClick={handleLinkClick}
             to={productLink}
+            className={rootClassName}
         >
             <div data-cy="GalleryItem-root" className={cn(classes.root, 'border border-gray-100 rounded-lg hover_shadow-type-1 ')} ref={itemRef}>
                 <div className={cn('item-product')}>

package/src/overwrites/venia-ui/lib/components/Newsletter/newsletter.js

@@ -121,8 +121,8 @@ const Newsletter = props => {
                     onClick={clearErrors}
                 >
                     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M20.5 13.01L15.49 7.98999" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
-                        <path d="M3.5 13.01H20.5" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+                        <path d="M20.5 13.01L15.49 7.98999" stroke="#292D32" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
+                        <path d="M3.5 13.01H20.5" stroke="#292D32" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
                     </svg>
                 </LinkButton>
                 <div className={classes.buttonsContainer}>

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/CustomAttributes/customAttributes.js

@@ -24,7 +24,7 @@ const CustomAttributes = props => {
                     const attributeContent = (
                         <li
                             key={currentAttribute.attribute_metadata.uid}
-                            className={cn(classes.listItem, '!text-[14px]')}
+                            className={cn(classes.listItem, '!text-[14px] py-1')}
                         >
                             <AttributeType
                                 showLabels={showLabels}

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/productFullDetail.js

@@ -32,6 +32,8 @@ const Options = React.lazy(() => import('@magento/venia-ui/lib/components/Produc
 import Share from '@riosst100/pwa-marketplace/src/components/SocialMediaShare';
 import PreorderDetail from './components/preOrderDetail';
 import AuctionDetail from './components/auctionDetail';
+import CrossSeller from '@riosst100/pwa-marketplace/src/components/CrossSeller';
+import RelatedProduct from '@riosst100/pwa-marketplace/src/components/RelatedProduct';
 
 // Correlate a GQL error message to a field. GQL could return a longer error
 // string but it may contain contextual info such as product id. We can use
@@ -658,7 +660,7 @@ const ProductFullDetail = props => {
                     <Divider />
                 </section>
             </Form>
-            <section className='section_product-details-container my-8'>
+            <section className='section_product-details-container mt-8 mb-10'>
                 <Tabs
                     data={dataTabs}
                     tabContentWrapperClassName='!p-0'
@@ -666,6 +668,16 @@ const ProductFullDetail = props => {
                     tabWrapperClassName='xl_gap-x-[60px] justify-center'
                 />
             </section>
+
+            <section className='pt-8 lg_pt-10'>
+                <RelatedProduct />
+            </section>
+
+            <section className='w-[calc(100vw-9px)] relative left-1/2 right-1/2 ml-[-50vw] mr-[-50vw] bg-gray-50 py-[30px] px-0 mb-10'>
+                <div className='max-w-[1200px] px-2.5 mx-auto relative'>
+                    <CrossSeller />
+                </div>
+            </section>
         </Fragment>
     );
 };

package/src/overwrites/venia-ui/lib/components/QuantityStepper/quantityStepper.js

@@ -52,7 +52,7 @@ const QuantityStepper = props => {
                     })}
                     className={cn(
                         classes.button_decrement,
-                        '!h-full min-w-[40px] min-h-[40px]'
+                        '!h-full min-w-[40px] min-h-[40px] !rounded-l-md !rounded-r-none'
                     )}
                     disabled={isDecrementDisabled}
                     onClick={handleDecrement}
@@ -89,7 +89,7 @@ const QuantityStepper = props => {
                     })}
                     className={cn(
                         classes.button_increment,
-                        '!h-full min-w-[40px] min-h-[40px]'
+                        '!h-full min-w-[40px] min-h-[40px] !rounded-r-md !rounded-l-none'
                     )}
                     disabled={isIncrementDisabled}
                     onClick={handleIncrement}

package/src/overwrites/venia-ui/lib/components/SearchBar/searchBar.js

@@ -35,7 +35,7 @@ const SearchBar = React.forwardRef((props, ref) => {
     ];
 
     const handleSelect = (option) => {
-        console.log('Selected:', option);
+        // console.log('Selected:', option);
     };
 
     return (

package/src/talons/CustomFilters/useCustomFilters.js

@@ -4,15 +4,32 @@ import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 
 import DEFAULT_OPERATIONS from './customFilters.gql';
 
-import { useLocation } from 'react-router-dom';
-import { useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+
+
+import { useFilterState } from '@magento/peregrine/lib/talons/FilterModal';
 import {
     getFiltersFromSearch,
-    getFilterInput
+    getFilterInput,
+    getSearchFromState,
+    getStateFromSearch,
+    sortFiltersArray,
+    stripHtml
 } from '@magento/peregrine/lib/talons/FilterModal/helpers';
 
 export const useCustomFilters = props => {
-    // const { filters } = props;
+    const { filters } = props;
+
+    const [isApplying, setIsApplying] = useState(false);
+    const [filterState, filterApi] = useFilterState();
+
+    const attributeCodes = useMemo(
+        () => filters.map(({ attribute_code }) => attribute_code),
+        [filters]
+    );
+
+    const history = useHistory();
 
     const operations = mergeOperations(DEFAULT_OPERATIONS);
     const { getCustomFilters, getFilterInputsQuery, getStoreConfigQuery } = operations;
@@ -88,10 +105,151 @@ export const useCustomFilters = props => {
         }
     }, [storeConfigData]);
 
+    // Create a set of disabled filters.
+    const DISABLED_FILTERS = useMemo(() => {
+        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');
+        }
+
+        return disabled;
+    }, [pathname]);
+
+    const possibleFilters = useMemo(() => {
+        const nextFilters = new Set();
+        const inputFields = introspectionData
+            ? introspectionData.__type.inputFields
+            : [];
+
+        // perform mapping and filtering in the same cycle
+        for (const { name } of inputFields) {
+            const isValid = attributeCodes.includes(name);
+            const isEnabled = !DISABLED_FILTERS.has(name);
+
+            if (isValid && isEnabled) {
+                nextFilters.add(name);
+            }
+        }
+
+        return nextFilters;
+    }, [DISABLED_FILTERS, attributeCodes, introspectionData]);
+
+    const isBooleanFilter = options => {
+        const optionsString = JSON.stringify(options);
+        return (
+            options.length <= 2 &&
+            (optionsString.includes(
+                JSON.stringify({
+                    __typename: 'AggregationOption',
+                    label: '0',
+                    value: '0'
+                })
+            ) ||
+                optionsString.includes(
+                    JSON.stringify({
+                        __typename: 'AggregationOption',
+                        label: '1',
+                        value: '1'
+                    })
+                ))
+        );
+    };
+
+    const [
+        filterNames,
+        filterKeys,
+        filterItems,
+        filterFrontendInput
+    ] = useMemo(() => {
+        const names = new Map();
+        const keys = new Set();
+        const frontendInput = new Map();
+        const itemsByGroup = new Map();
+
+        const sortedFilters = sortFiltersArray([...filters]);
+
+        for (const filter of sortedFilters) {
+            const { options, label: name, attribute_code: group } = filter;
+
+            // If this aggregation is not a possible filter, just back out.
+            if (possibleFilters.has(group)) {
+                const items = [];
+
+                // add filter name
+                names.set(group, name);
+
+                // add filter key permutations
+                keys.add(`${group}[filter]`);
+
+                // TODO: Get all frontend input type from gql if other filter input types are needed
+                // See https://github.com/magento-commerce/magento2-pwa/pull/26
+                if (isBooleanFilter(options)) {
+                    frontendInput.set(group, 'boolean');
+                    // add items
+                    items.push({
+                        title: 'No',
+                        value: '0',
+                        label: name + ':' + 'No'
+                    });
+                    items.push({
+                        title: 'Yes',
+                        value: '1',
+                        label: name + ':' + 'Yes'
+                    });
+                } else {
+                    // Add frontend input type
+                    frontendInput.set(group, null);
+                    // add items
+                    for (const { label, value, path } of options) {
+                        items.push({ title: stripHtml(label), value, path });
+                    }
+                }
+                itemsByGroup.set(group, items);
+            }
+        }
+
+        return [names, keys, itemsByGroup, frontendInput];
+    }, [filters, possibleFilters]);
+
+    useEffect(() => {
+        if (isApplying) {
+            const nextSearch = getSearchFromState(
+                search,
+                filterKeys,
+                filterState
+            );
+
+            // write filter state to history
+            history.push({ pathname, search: nextSearch });
+
+            // mark the operation as complete
+            setIsApplying(false);
+        }
+    }, [filterKeys, filterState, history, isApplying, pathname, search]);
+
+    const handleApply = useCallback(() => {
+        setIsApplying(true);
+    }, []);
+
+    const handleReset = useCallback(() => {
+        filterApi.clear();
+        setIsApplying(true);
+    }, [filterApi, setIsApplying]);
+
     return {
         customFiltersData: customFiltersData || [],
         categoryUrlSuffix,
         search,
-        pathname
+        pathname,
+        filterApi,
+        // filterItems,
+        // filterKeys,
+        // filterNames,
+        // filterFrontendInput,
+        filterState,
+        handleApply,
+        handleReset
     };
 };

package/src/talons/FilterTop/customFilters.gql.js

@@ -0,0 +1,45 @@
+import { gql } from '@apollo/client';
+
+export const GET_CUSTOM_FILTERS = gql`
+    query GetCustomFilters($filters: ProductAttributeFilterInput!) {
+        customSubFilters(filters: $filters) {
+            label
+            count
+            attribute_code
+            options {
+                label
+                value
+            }
+            position
+        }
+    }
+`;
+
+export const GET_FILTER_INPUTS = gql`
+    query GetFilterInputsForCategory {
+        __type(name: "ProductAttributeFilterInput") {
+            inputFields {
+                name
+                type {
+                    name
+                }
+            }
+        }
+    }
+`;
+
+export const GET_STORE_CONFIG_DATA = gql`
+    query GetStoreConfigForBreadcrumbs {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            category_url_suffix
+        }
+    }
+`;
+
+export default {
+    getFilterInputsQuery: GET_FILTER_INPUTS,
+    getCustomFilters: GET_CUSTOM_FILTERS,
+    getStoreConfigQuery: GET_STORE_CONFIG_DATA
+};

package/src/talons/FilterTop/filterTop.gql.js

@@ -0,0 +1,45 @@
+import { gql } from '@apollo/client';
+
+export const GET_CUSTOM_FILTERS = gql`
+    query GetCustomFilters($filters: ProductAttributeFilterInput!) {
+        customSubFilters(filters: $filters) {
+            label
+            count
+            attribute_code
+            options {
+                label
+                value
+            }
+            position
+        }
+    }
+`;
+
+export const GET_FILTER_INPUTS = gql`
+    query GetFilterInputsForCategory {
+        __type(name: "ProductAttributeFilterInput") {
+            inputFields {
+                name
+                type {
+                    name
+                }
+            }
+        }
+    }
+`;
+
+export const GET_STORE_CONFIG_DATA = gql`
+    query GetStoreConfigForBreadcrumbs {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            category_url_suffix
+        }
+    }
+`;
+
+export default {
+    getFilterInputsQuery: GET_FILTER_INPUTS,
+    getCustomFilters: GET_CUSTOM_FILTERS,
+    getStoreConfigQuery: GET_STORE_CONFIG_DATA
+};

package/src/talons/FilterTop/index.js

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