@riosst100/pwa-marketplace 1.3.5 → 1.3.6

package/i18n/en_US.json

@@ -172,6 +172,7 @@
     "field.optional": "Optional",
     "filterFooter.results": "See Results",
     "filterList.showMore": "Show More",
+    "filterList.viewAll": "View All",
     "filterList.showLess": "Show Less",
     "filterModal.action": "Clear all",
     "filterModal.action.clearAll.ariaLabel": "Clear all applied filters",

package/i18n/id_ID.json

@@ -172,6 +172,7 @@
     "field.optional": "Optional",
     "filterFooter.results": "See Results",
     "filterList.showMore": "Show More",
+    "filterList.viewAll": "Lihat Selengkapnya",
     "filterList.showLess": "Show Less",
     "filterModal.action": "Clear all",
     "filterModal.action.clearAll.ariaLabel": "Clear all applied filters",

package/package.json

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

package/src/componentOverrideMapping.js

@@ -19,6 +19,7 @@ module.exports = componentOverrideMapping = {
     [`@magento/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js',
     [`@magento/venia-ui/lib/RootComponents/Category/categoryContent.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/RootComponents/Category/categoryContent.js',
     [`@magento/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/RootComponents/Category/useCategoryContent.js',
+    [`@magento/peregrine/lib/talons/RootComponents/Category/useCategory.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/RootComponents/Category/useCategory.js',
     [`@magento/peregrine/lib/talons/Breadcrumbs/useBreadcrumbs.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/Breadcrumbs/useBreadcrumbs.js',
     [`@magento/peregrine/lib/talons/FilterModal/useFilterList.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/FilterModal/useFilterList.js',
     [`@magento/venia-ui/lib/components/FilterSidebar/filterSidebar.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/FilterSidebar/filterSidebar.js',

package/src/components/MegaMenu/customMenuItems.js

@@ -0,0 +1,138 @@
+import React, { useMemo } from 'react';
+import { ChevronDown as ArrowDown } from 'react-feather';
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import { useCustomMenuItems } from '@magento/peregrine/lib/talons/MegaMenu/useCustomMenuItems';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './megaMenuItem.module.css';
+import Submenu from './submenu';
+import { ArrowDown2 } from 'iconsax-react';
+import { textPrimary } from '@riosst100/pwa-marketplace/src/theme/vars';
+import cn from 'classnames';
+
+/**
+ * The CustomMenuItems component displays mega menu item
+ *
+ * @param {MegaMenuCategory} props.category
+ * @param {String} props.activeCategoryId - uid of active category
+ * @param {int} props.mainNavWidth - width of the main nav. It's used for setting min-width of the submenu
+ * @param {function} props.onNavigate - function called when clicking on Link
+ */
+const CustomMenuItems = props => {
+    const {
+        activeCategoryId,
+        category,
+        mainNavWidth,
+        categoryUrlSuffix,
+        subMenuState,
+        disableFocus,
+        onNavigate,
+        handleSubMenuFocus,
+        handleClickOutside,
+        megaMenuItemClassname,
+        titleClassName,
+    } = props;
+
+    const classes = useStyle(defaultClasses, props.classes);
+    const categoryUrl = resourceUrl(
+        `/${category.url_path}${categoryUrlSuffix || ''}`
+    );
+
+    const talonProps = useCustomMenuItems({
+        category,
+        activeCategoryId,
+        subMenuState,
+        disableFocus
+    });
+
+    const {
+        isFocused,
+        isActive,
+        handleMenuItemFocus,
+        handleCloseSubMenu,
+        isMenuActive,
+        handleKeyDown
+    } = talonProps;
+
+    const itemClassName = isMenuActive
+        ? classes.megaMenuItem_active
+        : classes.megaMenuItem;
+
+    const children = useMemo(() => {
+        return category.children.length ? (
+            <Submenu
+                isFocused={isFocused}
+                subMenuState={subMenuState}
+                items={category.children}
+                shopByItems={category.shop_by}
+                mainNavWidth={mainNavWidth}
+                handleCloseSubMenu={handleCloseSubMenu}
+                categoryUrlSuffix={categoryUrlSuffix}
+                onNavigate={onNavigate}
+            />
+        ) : null;
+    }, [
+        category,
+        isFocused,
+        mainNavWidth,
+        subMenuState,
+        handleCloseSubMenu,
+        categoryUrlSuffix,
+        onNavigate
+    ]);
+
+    const maybeDownArrowIcon = category.children.length ? (
+        <ArrowDown2 className='ml-2 stroke-current' size="16" color={textPrimary} variant="Outline" />
+    ) : null;
+
+    const linkAttributes = category.children.length
+        ? {
+            'aria-label': `Category: ${category.name}. ${category.children.length
+                } sub-categories`
+        }
+        : {};
+
+    return (
+        <div
+            className={cn(itemClassName, megaMenuItemClassname)}
+            data-cy="MegaMenu-CustomMenuItems-megaMenuItem"
+            onMouseEnter={() => {
+                handleSubMenuFocus();
+                handleMenuItemFocus();
+            }}
+            onFocus={() => {
+                handleSubMenuFocus();
+                handleMenuItemFocus();
+            }}
+            onTouchStart={() => {
+                handleSubMenuFocus();
+                handleMenuItemFocus();
+            }}
+            onMouseLeave={e => {
+                handleClickOutside(e);
+                handleCloseSubMenu();
+            }}
+        >
+            <Link
+                {...linkAttributes}
+                onKeyDown={handleKeyDown}
+                className={cn(
+                    isActive ? classes.megaMenuLinkActive : classes.megaMenuLink,
+                    titleClassName
+                )}
+                data-cy="MegaMenu-CustomMenuItems-link"
+                to={categoryUrl}
+                onClick={onNavigate}
+            >
+                {category.name}
+                {maybeDownArrowIcon}
+            </Link>
+            {children}
+        </div>
+    );
+};
+
+export default CustomMenuItems;

package/src/components/MegaMenu/customMenuItems.module.css

@@ -0,0 +1,31 @@
+.megaMenuItem {
+    /* composes: px-3 from global;
+    composes: py-0 from global; */
+}
+
+.megaMenuLink {
+    composes: items-center from global;
+    composes: inline-flex from global;
+    /* min-height: 5rem; */
+}
+
+.megaMenuLinkActive {
+    composes: megaMenuLink;
+    composes: underline from global;
+}
+
+.megaMenuItem_active {
+    composes: megaMenuItem;
+    composes: flex from global;
+}
+
+.arrowDown {
+    composes: leading-[0] from global;
+    composes: pl-2xs from global;
+}
+
+/* TODO @TW: cannot compose */
+.megaMenuItem:hover .megaMenuLink,
+.megaMenuItem:focus .megaMenuLink {
+    text-decoration: underline;
+}

package/src/components/ProductListTab/index.js

@@ -0,0 +1,4 @@
+export { default } from './productListTab';
+export {
+    default as ProductListTabShimmer
+} from './productListTab.shimmer';

package/src/components/ProductListTab/productListTab.js

@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './productListTab.module.css';
+
+const ProductListTab = props => {
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const [activeTab, setActiveTab] = useState(null);
+
+    let allProductClass = classes.firstButton;
+    if (!activeTab) {
+        allProductClass = classes.activeFirstButton;
+    }
+
+    return (
+        <div className={classes.root} aria-busy="true">
+            {/* <FormattedMessage
+                id={'searchPage.sortContainer'}
+                defaultMessage={'Items sorted by '}
+            />
+            <span className={classes.sortText}>
+                <FormattedMessage
+                    id={currentSort.sortId}
+                    defaultMessage={currentSort.sortText}
+                />
+            </span> */}
+            <nav>
+                <ul className={classes.buttonContainer}>
+                    <li><button className={allProductClass}>All Products</button></li>
+                    <li><button className={classes.middleButton}>Pre Order</button></li>
+                    <li><button className={classes.lastButton}>Auctions</button></li>
+                </ul>
+            </nav>
+        </div>
+    );
+};
+
+export default ProductListTab;

package/src/components/ProductListTab/productListTab.module.css

@@ -0,0 +1,65 @@
+.root {
+    composes: bg-white from global;
+    composes: flex from global;
+    composes: items-center from global;
+    composes: flex-wrap from global;   
+    width: inherit; 
+}
+
+.buttonContainer {
+    composes: inline-flex from global;
+    align-items: center;
+}
+
+.button {
+    composes: flex from global;
+    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-[14px] from global;
+}
+
+.activeButton {
+    composes: button;
+    color: white;
+    background-color: #4E31DB;
+}
+
+.activeFirstButton {
+    composes: activeButton;
+    composes: border-r-0 from global;
+    composes: rounded-l-lg from global;
+    border-radius: 6px 0px 0px 6px;
+}
+
+.middleButton {
+    composes: button;
+    composes: text-colorDefault from global;
+    composes: bg-white from global;
+    composes: border-l-0 from global;
+    composes: border-gray-100 from global;
+}
+
+.lastButton {
+    composes: button;
+    composes: text-colorDefault from global;
+    composes: bg-white from global;
+    composes: border-l-0 from global;
+    composes: border-gray-100 from global;
+    composes: rounded-r-lg from global;
+    border-radius: 0px 6px 6px 0px;
+}
+
+.firstButton {
+    composes: button;
+    composes: text-colorDefault from global;
+    composes: bg-white from global;
+    composes: border-r-0 from global;
+    composes: border-gray-100 from global;
+    composes: rounded-l-lg from global;
+    border-radius: 6px 0px 0px 6px;
+}

package/src/components/ProductListTab/productListTab.shimmer.js

@@ -0,0 +1,24 @@
+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 './productListTab.module.css';
+
+const ProductListTabShimmer = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <div className={classes.root} aria-live="polite" aria-busy="true">
+            <Shimmer width={10} />
+        </div>
+    );
+};
+
+ProductListTabShimmer.propTypes = {
+    classes: shape({
+        root: string
+    })
+};
+
+export default ProductListTabShimmer;

package/src/components/SubCategory/subCategory.js

@@ -2,12 +2,16 @@ import { useSubCategory } from '@riosst100/pwa-marketplace/src/talons/SubCategor
 import React 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';
 
 const SubCategory = props => {
     const { children } = props;
 
     const talonProps = useSubCategory({ children });
 
+    const classes = useStyle(defaultClasses, props.classes);
+
     const {
         normalizedData
     } = talonProps;
@@ -20,12 +24,12 @@ const SubCategory = props => {
                 key={index}
                 to={resourceUrl(path)}
             >
-                <span className="filterModalOpenButton-filterButton-qRo button-root_lowPriority-Qoh button-root-MFn border-2 border-solid cursor-pointer font-bold inline-flex items-center justify-center leading-tight max-w-full min-w-[10rem] outline-none pointer-events-auto px-sm rounded-full text-center text-sm uppercase disabled_bg-gray-400 disabled_border-gray-400 disabled_opacity-50 disabled_pointer-events-none disabled_text-white focus_shadow-inputFocus bg-transparent border-gray-700 text-gray-700 active_border-gray-800 active_text-gray-800 hover_border-gray-800 hover_text-gray-800 min-w-[6.25rem]" style={{"margin":"10px"}}>{text}</span>
+                <li className={classes.item}>{text}</li>
             </Link>
         )
     });
 
-    return subCategory;
+    return <ul className={classes.root}>{subCategory}</ul>;
 };
 
 export default SubCategory;

package/src/components/SubCategory/subCategory.module.css

@@ -0,0 +1,22 @@
+.root {
+    composes: flex from global;
+    composes: flex-wrap from global;
+    composes: mt-3 from global;
+    composes: gap-[15px] from global;
+    margin-bottom: 30px;
+}
+
+.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-[14px] from global;
+    composes: text-colorDefault from global;
+    composes: bg-white from global;
+    composes: border-gray-100 from global;
+    border-radius: 5px;
+}

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

@@ -0,0 +1,49 @@
+import { gql } from '@apollo/client';
+
+import { CategoryFragment, ProductsFragment } from './categoryFragments.gql';
+
+export const GET_CATEGORY = gql`
+    query GetCategories(
+        $id: String!
+        $pageSize: Int!
+        $currentPage: Int!
+        $filters: ProductAttributeFilterInput!
+        $sort: ProductAttributeSortInput
+    ) {
+        categories(filters: { category_uid: { in: [$id] } }) {
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            items {
+                uid
+                ...CategoryFragment
+            }
+        }
+        products(
+            pageSize: $pageSize
+            currentPage: $currentPage
+            filter: $filters
+            sort: $sort
+        ) {
+            ...ProductsFragment
+        }
+    }
+    ${CategoryFragment}
+    ${ProductsFragment}
+`;
+
+export const GET_FILTER_INPUTS = gql`
+    query GetFilterInputsForCategory {
+        __type(name: "ProductAttributeFilterInput") {
+            inputFields {
+                name
+                type {
+                    name
+                }
+            }
+        }
+    }
+`;
+
+export default {
+    getCategoryQuery: GET_CATEGORY,
+    getFilterInputsQuery: GET_FILTER_INPUTS
+};

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

@@ -0,0 +1,51 @@
+import { gql } from '@apollo/client';
+
+export const CategoryFragment = gql`
+    # eslint-disable-next-line @graphql-eslint/require-id-when-available
+    fragment CategoryFragment on CategoryTree {
+        uid
+        meta_title
+        meta_keywords
+        meta_description
+    }
+`;
+
+export const ProductsFragment = gql`
+    fragment ProductsFragment on Products {
+        items {
+            id
+            uid
+            name
+            seller {
+                name
+            }
+            price_range {
+                maximum_price {
+                    final_price {
+                        currency
+                        value
+                    }
+                    regular_price {
+                        currency
+                        value
+                    }
+                    discount {
+                        amount_off
+                    }
+                }
+            }
+            sku
+            small_image {
+                url
+            }
+            stock_status
+            rating_summary
+            __typename
+            url_key
+        }
+        page_info {
+            total_pages
+        }
+        total_count
+    }
+`;

package/src/overwrites/peregrine/lib/talons/RootComponents/Category/useCategory.js

@@ -0,0 +1,227 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useLazyQuery, useQuery } from '@apollo/client';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import { useAppContext } from '@magento/peregrine/lib/context/app';
+import { usePagination } from '@magento/peregrine/lib/hooks/usePagination';
+import { useScrollTopOnChange } from '@magento/peregrine/lib/hooks/useScrollTopOnChange';
+import { useSort } from '@magento/peregrine/lib/hooks/useSort';
+import {
+    getFiltersFromSearch,
+    getFilterInput
+} from '@magento/peregrine/lib/talons/FilterModal/helpers';
+
+import DEFAULT_OPERATIONS from './category.gql';
+
+/**
+ * A [React Hook]{@link https://reactjs.org/docs/hooks-intro.html} that
+ * controls the logic for the Category Root Component.
+ *
+ * @kind function
+ *
+ * @param {object}      props
+ * @param {String}      props.id - Category uid.
+ * @param {GraphQLAST}  props.operations.getCategoryQuery - Fetches category using a server query
+ * @param {GraphQLAST}  props.operations.getFilterInputsQuery - Fetches "allowed" filters using a server query
+ * @param {GraphQLAST}  props.queries.getStoreConfig - Fetches store configuration using a server query
+ *
+ * @returns {object}    result
+ * @returns {object}    result.error - Indicates a network error occurred.
+ * @returns {object}    result.categoryData - Category data.
+ * @returns {bool}      result.isLoading - Category data loading.
+ * @returns {string}    result.metaDescription - Category meta description.
+ * @returns {object}    result.pageControl - Category pagination state.
+ * @returns {array}     result.sortProps - Category sorting parameters.
+ * @returns {number}    result.pageSize - Category total pages.
+ */
+export const useCategory = props => {
+    const {
+        id,
+        queries: { getPageSize }
+    } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { getCategoryQuery, getFilterInputsQuery } = operations;
+
+    const { data: pageSizeData } = useQuery(getPageSize, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+    const pageSize = pageSizeData && pageSizeData.storeConfig.grid_per_page;
+
+    const [paginationValues, paginationApi] = usePagination();
+    const { currentPage, totalPages } = paginationValues;
+    const { setCurrentPage, setTotalPages } = paginationApi;
+
+    const sortProps = useSort({ sortFromSearch: false });
+    const [currentSort] = sortProps;
+
+    // Keep track of the sort criteria so we can tell when they change.
+    const previousSort = useRef(currentSort);
+
+    const pageControl = {
+        currentPage,
+        setPage: setCurrentPage,
+        totalPages
+    };
+
+    const [
+        ,
+        {
+            actions: { setPageLoading }
+        }
+    ] = useAppContext();
+
+    const [runQuery, queryResponse] = useLazyQuery(getCategoryQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+    const {
+        called: categoryCalled,
+        loading: categoryLoading,
+        error,
+        data
+    } = queryResponse;
+    const { search } = useLocation();
+
+    const isBackgroundLoading = !!data && categoryLoading;
+
+    // Update the page indicator if the GraphQL query is in flight.
+    useEffect(() => {
+        setPageLoading(isBackgroundLoading);
+    }, [isBackgroundLoading, setPageLoading]);
+
+    // Keep track of the search terms so we can tell when they change.
+    const previousSearch = useRef(search);
+
+    // Get "allowed" filters by intersection of schema and aggregations
+    const {
+        called: introspectionCalled,
+        data: introspectionData,
+        loading: introspectionLoading
+    } = useQuery(getFilterInputsQuery);
+
+    // Create a type map we can reference later to ensure we pass valid args
+    // to the graphql query.
+    // For example: { category_id: 'FilterEqualTypeInput', price: 'FilterRangeTypeInput' }
+    const filterTypeMap = useMemo(() => {
+        const typeMap = new Map();
+        if (introspectionData) {
+            introspectionData.__type.inputFields.forEach(({ name, type }) => {
+                typeMap.set(name, type.name);
+            });
+        }
+        return typeMap;
+    }, [introspectionData]);
+
+    // Run the category query immediately and whenever its variable values change.
+    useEffect(() => {
+        // Wait until we have the type map to fetch product data.
+        if (!filterTypeMap.size || !pageSize) {
+            return;
+        }
+
+        const filters = getFiltersFromSearch(search);
+
+        // Construct the filter arg object.
+        const newFilters = {};
+        filters.forEach((values, key) => {
+            newFilters[key] = getFilterInput(values, filterTypeMap.get(key));
+        });
+
+        // Use the category uid for the current category page regardless of the
+        // applied filters. Follow-up in PWA-404.
+        newFilters['category_uid'] = { eq: id };
+
+        runQuery({
+            variables: {
+                currentPage: Number(currentPage),
+                id: id,
+                filters: newFilters,
+                pageSize: Number(pageSize),
+                sort: { [currentSort.sortAttribute]: currentSort.sortDirection }
+            }
+        });
+    }, [
+        currentPage,
+        currentSort,
+        filterTypeMap,
+        id,
+        pageSize,
+        runQuery,
+        search
+    ]);
+
+    const totalPagesFromData = data
+        ? data.products.page_info.total_pages
+        : null;
+
+    useEffect(() => {
+        setTotalPages(totalPagesFromData);
+        return () => {
+            setTotalPages(null);
+        };
+    }, [setTotalPages, totalPagesFromData]);
+
+    // If we get an error after loading we should try to reset to page 1.
+    // If we continue to have errors after that, render an error message.
+    useEffect(() => {
+        if (error && !categoryLoading && !data && currentPage !== 1) {
+            setCurrentPage(1);
+        }
+    }, [currentPage, error, categoryLoading, setCurrentPage, data]);
+
+    // Reset the current page back to one (1) when the search string, filters
+    // or sort criteria change.
+    useEffect(() => {
+        // We don't want to compare page value.
+        const prevSearch = new URLSearchParams(previousSearch.current);
+        const nextSearch = new URLSearchParams(search);
+        prevSearch.delete('page');
+        nextSearch.delete('page');
+
+        if (
+            prevSearch.toString() !== nextSearch.toString() ||
+            previousSort.current.sortAttribute.toString() !==
+                currentSort.sortAttribute.toString() ||
+            previousSort.current.sortDirection.toString() !==
+                currentSort.sortDirection.toString()
+        ) {
+            // The search term changed.
+            setCurrentPage(1, true);
+            // And update the ref.
+            previousSearch.current = search;
+            previousSort.current = currentSort;
+        }
+    }, [currentSort, previousSearch, search, setCurrentPage]);
+
+    const categoryData = categoryLoading && !data ? null : data;
+    const categoryNotFound =
+        !categoryLoading && data && data.categories.items.length === 0;
+    const metaDescription =
+        data &&
+        data.categories.items[0] &&
+        data.categories.items[0].meta_description
+            ? data.categories.items[0].meta_description
+            : '';
+
+    // When only categoryLoading is involved, noProductsFound component flashes for a moment
+    const loading =
+        (introspectionCalled && !categoryCalled) ||
+        (categoryLoading && !data) ||
+        introspectionLoading;
+
+    useScrollTopOnChange(currentPage);
+
+    return {
+        error,
+        categoryData,
+        loading,
+        metaDescription,
+        pageControl,
+        sortProps,
+        pageSize,
+        categoryNotFound
+    };
+};

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

@@ -49,6 +49,7 @@
     composes: text-[14px] from global;
     composes: lg_m-0 from global;
     composes: lg_text-left from global;
+    composes: py-4 from global;
 }
 
 .headerButtons {

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

@@ -23,6 +23,8 @@ import SortedByContainer, {
 import defaultClasses from './category.module.css';
 import NoProductsFound from './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';
 
 const FilterModal = React.lazy(() => import('@magento/venia-ui/lib/components/FilterModal'));
 const FilterSidebar = React.lazy(() =>
@@ -52,6 +54,7 @@ const CategoryContent = props => {
         categoryDescription,
         filters,
         items,
+        children,
         totalCount,
         totalPagesFromData
     } = talonProps;
@@ -94,12 +97,21 @@ const CategoryContent = props => {
         <ProductSortShimmer />
     ) : null;
 
+    const shouldShowProductListTab = totalPagesFromData;
+    const shouldShowProductListTabShimmer = !totalPagesFromData && isLoading;
+
     const maybeSortContainer = shouldShowSortButtons ? (
         <SortedByContainer currentSort={currentSort} />
     ) : shouldShowSortShimmer ? (
         <SortedByContainerShimmer />
     ) : null;
 
+    const maybeProductsTabContainer = shouldShowProductListTab ? (
+        <ProductListTab />
+    ) : shouldShowProductListTabShimmer ? (
+        <ProductListTabShimmer />
+    ) : null;
+
     const categoryResultsHeading =
         totalCount > 0 ? (
             <FormattedMessage
@@ -153,7 +165,6 @@ const CategoryContent = props => {
     return (
         <Fragment>
             <Breadcrumbs categoryId={categoryId} />
-            {/* <SubCategory children={children} /> */}
             <StoreTitle>{categoryName}</StoreTitle>
             <article className={classes.root} data-cy="CategoryContent-root">
                 <div className={classes.categoryHeader}>
@@ -167,6 +178,7 @@ const CategoryContent = props => {
                     </h1>
                     {categoryDescriptionElement}
                 </div>
+                <SubCategory children={children} />
                 <div className={classes.contentWrapper}>
                     <div ref={sidebarRef} className={classes.sidebar}>
                         <Suspense fallback={<FilterSidebarShimmer />}>
@@ -174,6 +186,14 @@ const CategoryContent = props => {
                         </Suspense>
                     </div>
                     <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"
@@ -181,11 +201,6 @@ const CategoryContent = props => {
                             >
                                 {categoryResultsHeading}
                             </div>
-                            <div className={classes.headerButtons}>
-                                {maybeFilterButtons}
-                                {maybeSortButton}
-                            </div>
-                            {maybeSortContainer}
                         </div>
                         {content}
                         <Suspense fallback={null}>{filtersModal}</Suspense>

package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterList.js

@@ -62,7 +62,7 @@ const FilterList = props => {
                 elements1.push(
                     <li
                         key={key}
-                        className={classes.item}
+                        className={classes.popupFilterItem}
                         data-cy="FilterList-item"
                     >
                         <FilterItem
@@ -82,7 +82,7 @@ const FilterList = props => {
                 // return element2;
             });
 
-            const element2 = <ul><div><b>{grouping}</b></div>{elements1}</ul>;
+            const element2 = <><ul><div><b>{grouping}</b></div>{elements1}</ul><br /></>;
 
             return element2;
         });
@@ -177,8 +177,8 @@ const FilterList = props => {
                 defaultMessage: 'Show Less'
             })
             : formatMessage({
-                id: 'filterList.showMore',
-                defaultMessage: 'Show More'
+                id: 'filterList.showAll',
+                defaultMessage: 'Show All'
             });
 
         return (
@@ -207,8 +207,8 @@ const FilterList = props => {
         }
 
         const label = formatMessage({
-            id: 'filterList.showMore',
-            defaultMessage: 'Show More'
+            id: 'filterList.viewAll',
+            defaultMessage: 'View All'
         });
 
         return (

package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterList.module.css

@@ -17,4 +17,12 @@
     composes: underline from global;
 
     composes: hover_no-underline from global;
+}
+
+.popupFilterItem {
+    border: 1px solid #e1e1e1;
+    padding: 10px;
+    border-radius: 5px;
+    width: 100%;
+    margin-top: 10px;
 }

package/src/overwrites/venia-ui/lib/components/FilterModal/filterModal.module.css

@@ -4,7 +4,8 @@
     composes: grid from global;
     composes: h-full from global;
     composes: left-0 from global;
-    composes: max-w-modal from global;
+    /* composes: max-w-modal from global;
+     */
     composes: opacity-0 from global;
     composes: overflow-hidden from global;
     composes: fixed from global;

package/src/overwrites/venia-ui/lib/components/Header/header.js

@@ -82,7 +82,7 @@ const Header = props => {
                                 data-cy="Header-logoContainer"
                             >
                                 <div><b>TCG Collective</b></div>
-                                <small>Toys | Card | Games</small>
+                                <small>Bringing Collectors Together</small>
                             </Link>
                         </div>
                         <div className='flex flex-auto max-w-[700px]'>