@riosst100/pwa-marketplace 1.2.4 → 1.2.6

package/src/components/SellerProducts/sellerProducts.js

@@ -1,46 +1,218 @@
-import React from 'react';
-import ProductItem from '@riosst100/pwa-marketplace/src/components/ProductItem';
-import Filter from '@riosst100/pwa-marketplace/src/components/Filter';
-import Search from '@riosst100/pwa-marketplace/src/components/Search';
-import SortBy from '@riosst100/pwa-marketplace/src/components/SortBy';
-import Pagination from '..//Pagination';
-
-const SellerProducts = () => {
+import React, { Fragment, Suspense, useMemo, useRef } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { array, number, shape, string } from 'prop-types';
+
+import { useIsInViewport } from '@magento/peregrine/lib/hooks/useIsInViewport';
+
+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 { StoreTitle } from '@magento/venia-ui/lib/components/Head';
+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 defaultClasses from '@magento/venia-ui/lib/RootComponents/Category/category.module.css';
+import NoProductsFound from '@magento/venia-ui/lib/RootComponents/Category/NoProductsFound';
+import { useSellerProducts } from '@riosst100/pwa-marketplace/src/talons/SellerProducts/useSellerProducts';
+
+const FilterModal = React.lazy(() => import('@magento/venia-ui/lib/components/FilterModal'));
+const FilterSidebar = React.lazy(() =>
+    import('@magento/venia-ui/lib/components/FilterSidebar')
+);
+
+const SellerProducts = props => {
+    const {
+        categoryId,
+        data,
+        isLoading,
+        pageControl,
+        sortProps,
+        pageSize
+    } = props;
+    const [currentSort] = sortProps;
+
+    const talonProps = useSellerProducts({
+        categoryId,
+        data,
+        pageSize
+    });
+
+    const {
+        availableSortMethods,
+        categoryName,
+        categoryDescription,
+        filters,
+        items,
+        totalCount,
+        totalPagesFromData
+    } = talonProps;
+
+    const sidebarRef = useRef(null);
+    const classes = useStyle(defaultClasses, props.classes);
+    const shouldRenderSidebarContent = useIsInViewport({
+        elementRef: sidebarRef
+    });
+
+    const shouldShowFilterButtons = filters && filters.length;
+    const shouldShowFilterShimmer = filters === null;
+
+    // If there are no products we can hide the sort button.
+    const shouldShowSortButtons = totalPagesFromData && availableSortMethods;
+    const shouldShowSortShimmer = !totalPagesFromData && isLoading;
+
+    const maybeFilterButtons = shouldShowFilterButtons ? (
+        <FilterModalOpenButton filters={filters} />
+    ) : shouldShowFilterShimmer ? (
+        <FilterModalOpenButtonShimmer />
+    ) : null;
+
+    const filtersModal = shouldShowFilterButtons ? (
+        <FilterModal filters={filters} />
+    ) : null;
+
+    const sidebar = shouldShowFilterButtons ? (
+        <FilterSidebar filters={filters} />
+    ) : shouldShowFilterShimmer ? (
+        <FilterSidebarShimmer />
+    ) : null;
+
+    const maybeSortButton = shouldShowSortButtons ? (
+        <ProductSort
+            sortProps={sortProps}
+            availableSortMethods={availableSortMethods}
+        />
+    ) : shouldShowSortShimmer ? (
+        <ProductSortShimmer />
+    ) : null;
+
+    const maybeSortContainer = shouldShowSortButtons ? (
+        <SortedByContainer currentSort={currentSort} />
+    ) : shouldShowSortShimmer ? (
+        <SortedByContainerShimmer />
+    ) : null;
+
+    const categoryResultsHeading =
+        totalCount > 0 ? (
+            <FormattedMessage
+                id={'categoryContent.resultCount'}
+                values={{
+                    count: totalCount
+                }}
+                defaultMessage={'{count} Results'}
+            />
+        ) : isLoading ? (
+            <Shimmer width={5} />
+        ) : null;
+
+    const categoryDescriptionElement = categoryDescription ? (
+        <RichContent html={categoryDescription} />
+    ) : null;
+
+    const content = useMemo(() => {
+        if (!totalPagesFromData && !isLoading) {
+            return <NoProductsFound categoryId={categoryId} />;
+        }
+
+        const gallery = totalPagesFromData ? (
+            <Gallery items={items} />
+        ) : (
+            <GalleryShimmer items={items} />
+        );
+
+        const pagination = totalPagesFromData ? (
+            <Pagination pageControl={pageControl} />
+        ) : null;
+
+        return (
+            <Fragment>
+                <section className={classes.gallery}>{gallery}</section>
+                <div className={classes.pagination}>{pagination}</div>
+            </Fragment>
+        );
+    }, [
+        categoryId,
+        classes.gallery,
+        classes.pagination,
+        isLoading,
+        items,
+        pageControl,
+        totalPagesFromData
+    ]);
+
+    const categoryTitle = categoryName ? categoryName : <Shimmer width={5} />;
+
     return (
-        <>
-            <div className='w-full mb-[30px]'>
-                <div class='flex w-[1180px] items-end gap-[40px] px-[30px] py-0 rounded-[6px] border border-solid border-[#e6e9ea]'>
-                    <div class='px-0 py-[12px] inline-flex items-center gap-[5px] relative flex-[0_0_auto]'>
-                        <div class='relative w-fit font-medium text-[16px] tracking-[0] leading-[20px] whitespace-nowrap'>Action Figures</div>
-                    </div>
-                    <div class='px-0 py-[12px] inline-flex items-center gap-[5px] relative flex-[0_0_auto]'>
-                        <div class='relative w-fit font-medium text-[16px] tracking-[0] leading-[20px] whitespace-nowrap'>Anime</div>
-                    </div>
+        <Fragment>
+            <Breadcrumbs categoryId={categoryId} />
+            <StoreTitle>{categoryName}</StoreTitle>
+            <article className={classes.root} data-cy="SellerProducts-root">
+                <div className={classes.categoryHeader}>
+                    <h1 aria-live="polite" className={classes.title}>
+                        <div
+                            className={classes.categoryTitle}
+                            data-cy="SellerProducts-categoryTitle"
+                        >
+                            {categoryTitle}
+                        </div>
+                    </h1>
+                    {categoryDescriptionElement}
                 </div>
-            </div>
-            <div className='w-full flex items-start gap-x-[30px]'>
-                <div className='filter-container w-full max-w-[240px]'>
-                    <Filter />
-                </div>
-                <div className='flex flex-col gap-y-[30px]'>
-                    <div className='flex w-full items-center justify-between'>
-                        <Search />
-                        <SortBy />
-                    </div>
-                    <div className='product-list w-full grid grid-cols-4 gap-4'>
-                        <ProductItem />
-                        <ProductItem />
-                        <ProductItem />
-                        <ProductItem />
-                        <ProductItem />
+                <div className={classes.contentWrapper}>
+                    <div ref={sidebarRef} className={classes.sidebar}>
+                        <Suspense fallback={<FilterSidebarShimmer />}>
+                            {shouldRenderSidebarContent ? sidebar : null}
+                        </Suspense>
                     </div>
-                    <div className='pagination-container w-full flex justify-center'>
-                        <Pagination />
+                    <div className={classes.categoryContent}>
+                        <div className={classes.heading}>
+                            <div
+                                data-cy="SellerProducts-categoryInfo"
+                                className={classes.categoryInfo}
+                            >
+                                {categoryResultsHeading}
+                            </div>
+                            <div className={classes.headerButtons}>
+                                {maybeFilterButtons}
+                                {maybeSortButton}
+                            </div>
+                            {maybeSortContainer}
+                        </div>
+                        {content}
+                        <Suspense fallback={null}>{filtersModal}</Suspense>
                     </div>
                 </div>
-            </div>
-        </>
-    )
-}
+            </article>
+        </Fragment>
+    );
+};
+
+export default SellerProducts;
 
-export default SellerProducts;
+SellerProducts.propTypes = {
+    classes: shape({
+        gallery: string,
+        pagination: string,
+        root: string,
+        categoryHeader: string,
+        title: string,
+        categoryTitle: string,
+        sidebar: string,
+        categoryContent: string,
+        heading: string,
+        categoryInfo: string,
+        headerButtons: string
+    }),
+    // sortProps contains the following structure:
+    // [{sortDirection: string, sortAttribute: string, sortText: string},
+    // React.Dispatch<React.SetStateAction<{sortDirection: string, sortAttribute: string, sortText: string}]
+    sortProps: array,
+    pageSize: number
+};

package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/MegaMenu.spec.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+
+import { createTestInstance } from '@magento/peregrine';
+import { useIsInViewport } from '@magento/peregrine/lib/hooks/useIsInViewport';
+
+import MegaMenu from '../megaMenu';
+
+jest.mock('@magento/venia-ui/lib/classify');
+jest.mock('@magento/peregrine/lib/hooks/useIsInViewport');
+jest.mock('@magento/peregrine/lib/talons/MegaMenu/useMegaMenu', () => ({
+    useMegaMenu: jest.fn().mockReturnValue({
+        megaMenuData: {
+            id: 1,
+            name: 'Clothing',
+            children: [
+                {
+                    id: 2,
+                    name: 'Women',
+                    url_path: 'women',
+                    children: [
+                        {
+                            id: 5,
+                            name: 'Bottoms',
+                            url_path: 'bottoms',
+                            isActive: true,
+                            children: []
+                        }
+                    ]
+                },
+                {
+                    id: 3,
+                    name: 'Men',
+                    url_path: 'men',
+                    children: []
+                },
+                {
+                    id: 4,
+                    name: 'Gear',
+                    url_path: 'gear',
+                    children: []
+                }
+            ]
+        },
+        activeCategoryId: 5,
+        categoryUrlSuffix: '.html',
+        useOutsideAlerter: () => {}
+    })
+}));
+
+describe('#MegaMenu', () => {
+    test('useEffect', () => {
+        const useEffect = jest.spyOn(React, 'useEffect');
+
+        const mockUseEffect = () => {
+            useEffect.mockImplementationOnce(mockFunction => mockFunction());
+        };
+
+        mockUseEffect();
+    });
+
+    test('not resetting the menu', () => {
+        const handleClickOutside = jest.fn();
+
+        expect(handleClickOutside).toHaveBeenCalledTimes(0);
+    });
+
+    it('renders empty div if not in viewport', () => {
+        useIsInViewport.mockReturnValue(false);
+
+        const instance = createTestInstance(
+            <MemoryRouter>
+                <MegaMenu />
+            </MemoryRouter>
+        );
+
+        expect(instance.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders menu if in viewport', () => {
+        useIsInViewport.mockReturnValue(true);
+
+        const instance = createTestInstance(
+            <MemoryRouter>
+                <MegaMenu />
+            </MemoryRouter>
+        );
+
+        expect(instance.toJSON()).toMatchSnapshot();
+    });
+});

package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/MegaMenuItem.spec.js

@@ -0,0 +1,123 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { act } from 'react-test-renderer';
+
+import { createTestInstance } from '@magento/peregrine';
+
+import MegaMenuItem from '../megaMenuItem';
+
+jest.mock('../../../classify');
+jest.mock('../../Icon', () => props => <mock-Icon {...props} />);
+jest.mock('../submenu', () => props => <mock-Submenu {...props} />);
+jest.mock('react', () => {
+    const React = jest.requireActual('react');
+    const memoSpy = jest.spyOn(React, 'useMemo');
+
+    return Object.assign(React, {
+        useMemo: memoSpy
+    });
+});
+
+const mockHandleKeyDown = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+    Link: jest.fn(() => props => <mock-Link {...props} />)
+}));
+
+jest.mock('@magento/peregrine/lib/talons/MegaMenu/useMegaMenuItem', () => ({
+    useMegaMenuItem: jest.fn(() => {
+        return {
+            isFocused: false,
+            isActive: false,
+            handleMenuItemFocus: jest.fn(),
+            handleCloseSubMenu: jest.fn(),
+            isMenuActive: false,
+            handleKeyDown: mockHandleKeyDown
+        };
+    })
+}));
+
+let inputProps = {};
+
+const Component = () => {
+    return <MegaMenuItem {...inputProps} />;
+};
+
+const givenDefaultValues = () => {
+    inputProps = {
+        activeCategoryId: 1,
+        category: {
+            id: 1,
+            name: 'Women',
+            url_path: 'women',
+            isActive: true,
+            children: [
+                {
+                    id: 2,
+                    name: 'Bottoms',
+                    url_path: 'bottoms',
+                    children: []
+                },
+                {
+                    id: 3,
+                    name: 'Tops',
+                    url_path: 'tops',
+                    isActive: false,
+                    children: []
+                }
+            ]
+        },
+        rootCategoryName: 'Clothing',
+        categoryUrlSuffix: '.html',
+        mainNavWidth: 200,
+        subMenuState: 'test',
+        disableFocus: false
+    };
+};
+
+describe('Mega menu item renders correctly', () => {
+    beforeEach(() => {
+        givenDefaultValues();
+    });
+
+    test('it renders correctly', () => {
+        const instance = createTestInstance(<Component />);
+
+        expect(instance.toJSON()).toMatchSnapshot();
+    });
+
+    test('it marks the active category', () => {
+        const { root } = createTestInstance(<Component />);
+
+        expect(root.findByType(Link).props.className).toEqual('megaMenuLink');
+        expect(root.findByType(Link).props.to).toEqual('/women.html');
+        expect(root.findByType(Link).props.children[0]).toEqual('Women');
+    });
+
+    it('should call a11yClick', () => {
+        const { root } = createTestInstance(<Component />);
+
+        act(() => {
+            root.findByType(Link).props.onKeyDown();
+        });
+
+        expect(mockHandleKeyDown).toHaveBeenCalled();
+    });
+
+    test('it does not render submenu when item does not have children', () => {
+        const categoryWithoutChildren = {
+            id: 3,
+            name: 'Tops',
+            url_path: 'tops',
+            isActive: false,
+            children: []
+        };
+
+        const instance = createTestInstance(
+            <Component category={categoryWithoutChildren} />
+        );
+
+        expect(instance.toJSON().children.length).toEqual(1);
+        expect(instance.toJSON()).toMatchSnapshot();
+    });
+});

package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/Submenu.spec.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+import { MemoryRouter } from 'react-router-dom';
+
+import Submenu from '../submenu';
+
+jest.mock('../../../classify');
+jest.mock('../submenuColumn', () => props => <mock-SubmenuColumn {...props} />);
+jest.mock('react', () => {
+    const React = jest.requireActual('react');
+    const callbackSpy = jest.spyOn(React, 'useCallback');
+
+    return Object.assign(React, {
+        callbackSpy: callbackSpy
+    });
+});
+
+const handleCloseSubMenu = jest.fn().mockName('handleCloseSubMenu');
+
+describe('Submenu renders correctly', () => {
+    const props = {
+        items: [
+            {
+                id: 1,
+                name: 'Bottoms',
+                url_path: 'bottoms',
+                children: [
+                    {
+                        id: 3,
+                        name: 'Pants',
+                        url_path: 'pants',
+                        isActive: false,
+                        children: []
+                    }
+                ]
+            },
+            {
+                id: 2,
+                name: 'Tops',
+                url_path: 'tops',
+                isActive: false,
+                children: []
+            }
+        ],
+        rootCategoryName: 'Clothing',
+        firstLevelCategoryName: 'Women',
+        categoryUrlSuffix: '.html',
+        handleCloseSubMenu,
+        isFocused: false,
+        subMenuState: false
+    };
+    test('it renders correctly', () => {
+        const instance = createTestInstance(
+            <MemoryRouter>
+                <Submenu {...props} />
+            </MemoryRouter>
+        );
+
+        expect(instance.toJSON()).toMatchSnapshot();
+    });
+});

package/src/overwrites/venia-ui/lib/components/MegaMenu/__tests__/SubmenuColumn.spec.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+import { MemoryRouter } from 'react-router-dom';
+
+import SubmenuColumn from '../submenuColumn';
+
+jest.mock('../../../classify');
+
+describe('Submenu column renders correctly', () => {
+    const props = {
+        category: {
+            id: 1,
+            name: 'Pants',
+            url_path: 'pants',
+            children: [
+                {
+                    id: 2,
+                    name: 'Jeans',
+                    url_path: 'jeans',
+                    isActive: true,
+                    children: []
+                }
+            ]
+        },
+        categoryUrlSuffix: '.html'
+    };
+
+    test('it renders correctly', () => {
+        const instance = createTestInstance(
+            <MemoryRouter>
+                <SubmenuColumn {...props} />
+            </MemoryRouter>
+        );
+
+        expect(instance.toJSON()).toMatchSnapshot();
+    });
+
+    test('it renders active state', () => {
+        const instance = createTestInstance(
+            <MemoryRouter>
+                <SubmenuColumn {...props} />
+            </MemoryRouter>
+        );
+
+        const activeLink = instance.root.findByProps({
+            className: 'linkActive'
+        });
+        expect(activeLink.props.children).toEqual('Jeans');
+    });
+});