@riosst100/pwa-marketplace 1.3.2 → 1.3.4

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

@@ -0,0 +1,77 @@
+import React, { useMemo } from 'react';
+import { number, string, shape } from 'prop-types';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
+import { useNoProductsFound } from '@magento/peregrine/lib/talons/RootComponents/Category';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+
+import Image from '@magento/venia-ui/lib/components/Image';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import noProductsFound from './noProductsFound.png';
+import defaultClasses from './noProductsFound.module.css';
+
+const NoProductsFound = props => {
+    const { categoryId } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const { formatMessage } = useIntl();
+    const talonProps = useNoProductsFound({
+        categoryId
+    });
+
+    const { recommendedCategories } = talonProps;
+
+    const categoryItems = useMemo(() => {
+        return recommendedCategories.map(category => {
+            const uri = resourceUrl(
+                `/${category.url_path}${category.url_suffix}`
+            );
+
+            return (
+                <li key={category.uid} className={classes.listItem}>
+                    <Link to={uri}>{category.name}</Link>
+                </li>
+            );
+        });
+    }, [classes, recommendedCategories]);
+
+    const headerText = formatMessage({
+        id: 'noProductsFound.noProductsFound',
+        defaultMessage: "Sorry! We couldn't find any products."
+    });
+
+    return (
+        <div className={classes.root} data-cy="NoProductsFound-root">
+            <Image
+                alt={headerText}
+                classes={{ image: classes.image, root: classes.imageContainer }}
+                src={noProductsFound}
+            />
+            <h2 className={classes.title}>{headerText}</h2>
+            <div className={classes.categories}>
+                <p>
+                    <FormattedMessage
+                        id={'noProductsFound.tryOneOfTheseCategories'}
+                        defaultMessage={'Try one of these categories'}
+                    />
+                </p>
+                <ul className={classes.list}>{categoryItems}</ul>
+            </div>
+        </div>
+    );
+};
+
+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/NoProductsFound/noProductsFound.module.css

@@ -0,0 +1,39 @@
+.root {
+    composes: flex from global;
+    composes: flex-col from global;
+    composes: h-screen from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+}
+
+.title {
+    composes: font-semibold from global;
+    composes: text-colorDefault from global;
+    composes: text-center from global;
+}
+
+.categories {
+    composes: mt-md from global;
+}
+
+.list {
+    composes: mt-xs from global;
+}
+
+.listItem {
+    composes: mb-2xs from global;
+    composes: text-center from global;
+    composes: underline from global;
+
+    composes: last_mb-0 from global;
+}
+
+.imageContainer {
+    composes: mb-md from global;
+}
+
+.image {
+    composes: h-[200px] from global;
+    composes: max-w-[200px] from global;
+    composes: w-[200px] from global;
+}

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

@@ -0,0 +1,17 @@
+import { gql } from '@apollo/client';
+
+export const GET_PAGE_SIZE = gql`
+    query getPageSize {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            grid_per_page
+        }
+    }
+`;
+
+export default {
+    queries: {
+        getPageSize: GET_PAGE_SIZE
+    }
+};

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

@@ -0,0 +1,91 @@
+import React, { Fragment } from 'react';
+import { shape, string } from 'prop-types';
+import { useCategory } from '@magento/peregrine/lib/talons/RootComponents/Category';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import CategoryContent from './categoryContent';
+import defaultClasses from './category.module.css';
+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';
+
+const MESSAGES = new Map().set(
+    'NOT_FOUND',
+    "Looks like the category you were hoping to find doesn't exist. Sorry about that."
+);
+
+const Category = props => {
+    const { uid } = props;
+    const { formatMessage } = useIntl();
+
+    const talonProps = useCategory({
+        id: uid,
+        queries: {
+            getPageSize: GET_PAGE_SIZE
+        }
+    });
+
+    const {
+        error,
+        metaDescription,
+        loading,
+        categoryData,
+        pageControl,
+        sortProps,
+        pageSize,
+        categoryNotFound
+    } = talonProps;
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    if (!categoryData) {
+        if (error && pageControl.currentPage === 1) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.error(error);
+            }
+
+            return <ErrorView />;
+        }
+    }
+    if (categoryNotFound) {
+        return (
+            <ErrorView
+                message={formatMessage({
+                    id: 'category.notFound',
+                    defaultMessage: MESSAGES.get('NOT_FOUND')
+                })}
+            />
+        );
+    }
+
+    return (
+        <Fragment>
+            <Meta name="description" content={metaDescription} />
+            <CategoryContent
+                categoryId={uid}
+                classes={classes}
+                data={categoryData}
+                isLoading={loading}
+                pageControl={pageControl}
+                sortProps={sortProps}
+                pageSize={pageSize}
+            />
+        </Fragment>
+    );
+};
+
+Category.propTypes = {
+    classes: shape({
+        gallery: string,
+        root: string,
+        title: string
+    }),
+    uid: string
+};
+
+Category.defaultProps = {
+    uid: 'Mg=='
+};
+
+export default Category;

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

@@ -0,0 +1,77 @@
+.root {
+    composes: p-0 from global;
+}
+
+.title {
+    composes: font-semibold from global;
+    composes: text-[24px] from global;
+    composes: leading-[24px] from global;
+    padding: 20px 0px 20px;
+}
+
+.pagination {
+    composes: relative from global;
+    composes: bottom-0 from global;
+}
+
+.placeholder {
+    composes: h-screen from global;
+}
+
+.categoryTitle {
+    composes: font-semibold from global;
+}
+
+.heading {
+    composes: flex from global;
+    composes: flex-wrap from global;
+    composes: justify-center from global;
+    composes: pb-2xs from global;
+
+    composes: lg_flex-nowrap from global;
+    composes: lg_items-center from global;
+    composes: lg_justify-between from global;
+    composes: lg_pb-[30px] from global;
+    composes: lg_w-full from global;
+}
+
+.categoryContent {
+    composes: lg_flex-grow from global;
+}
+
+.categoryInfo {
+    flex-basis: 100%;
+    composes: leading-tight from global;
+    composes: max-w-[75vw] from global;
+    composes: mx-0 from global;
+    composes: my-xs from global;
+    composes: text-center from global;
+    composes: text-[14px] from global;
+    composes: lg_m-0 from global;
+    composes: lg_text-left from global;
+}
+
+.headerButtons {
+    composes: flex from global;
+    composes: justify-center from global;
+    composes: pb-sm from global;
+    flex-basis: 100%;
+
+    composes: lg_justify-end from global;
+    composes: lg_pb-0 from global;
+}
+
+.contentWrapper {
+    composes: w-full from global;
+    composes: lg_mt-[50px] from global;
+    composes: lg_flex from global;
+    composes: gap-[30px] from global;
+}
+
+.sidebar {
+    composes: hidden from global;
+
+    composes: lg_flex from global;
+    composes: lg_self-start from global;
+    width: 500px;
+}

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

@@ -6,23 +6,23 @@ 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 Breadcrumbs from '../../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 Pagination from '../../components/Pagination';
+import ProductSort, { ProductSortShimmer } from '../../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 SubCategory from '@riosst100/pwa-marketplace/src/components/SubCategory/subCategory';
+import defaultClasses from './category.module.css';
+import NoProductsFound from './NoProductsFound';
+import cn from 'classnames';
 
 const FilterModal = React.lazy(() => import('@magento/venia-ui/lib/components/FilterModal'));
 const FilterSidebar = React.lazy(() =>
@@ -53,9 +53,7 @@ const CategoryContent = props => {
         filters,
         items,
         totalCount,
-        totalPagesFromData,
-        children,
-        parent
+        totalPagesFromData
     } = talonProps;
 
     const sidebarRef = useRef(null);
@@ -82,7 +80,7 @@ const CategoryContent = props => {
     ) : null;
 
     const sidebar = shouldShowFilterButtons ? (
-        <FilterSidebar filters={filters} categoryName={categoryName} children={children} parent={parent} />
+        <FilterSidebar filters={filters} />
     ) : shouldShowFilterShimmer ? (
         <FilterSidebarShimmer />
     ) : null;
@@ -155,17 +153,17 @@ const CategoryContent = props => {
     return (
         <Fragment>
             <Breadcrumbs categoryId={categoryId} />
-            <SubCategory children={children} />
+            {/* <SubCategory children={children} /> */}
             <StoreTitle>{categoryName}</StoreTitle>
             <article className={classes.root} data-cy="CategoryContent-root">
                 <div className={classes.categoryHeader}>
                     <h1 aria-live="polite" className={classes.title}>
-                        <div
+                        <span
                             className={classes.categoryTitle}
                             data-cy="CategoryContent-categoryTitle"
                         >
                             {categoryTitle}
-                        </div>
+                        </span>
                     </h1>
                     {categoryDescriptionElement}
                 </div>
@@ -176,7 +174,7 @@ const CategoryContent = props => {
                         </Suspense>
                     </div>
                     <div className={classes.categoryContent}>
-                        <div className={classes.heading}>
+                        <div className={cn(classes.heading)}>
                             <div
                                 data-cy="CategoryContent-categoryInfo"
                                 className={classes.categoryInfo}

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

@@ -0,0 +1,74 @@
+import React, { Fragment } from 'react';
+import { shape, string } from 'prop-types';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import BreadcrumbsShimmer from '../../components/Breadcrumbs/breadcrumbs.shimmer';
+import { FilterModalOpenButtonShimmer } from '@magento/venia-ui/lib/components/FilterModalOpenButton';
+import { FilterSidebarShimmer } from '@magento/venia-ui/lib/components/FilterSidebar';
+import { GalleryShimmer } from '@magento/venia-ui/lib/components/Gallery';
+import { ProductSortShimmer } from '../../components/ProductSort';
+import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
+import { SortedByContainerShimmer } from '@magento/venia-ui/lib/components/SortedByContainer';
+import defaultClasses from './category.module.css';
+
+const CategoryContentShimmer = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const placeholderItems = Array.from({ length: 6 }).fill(null);
+
+    return (
+        <Fragment>
+            <BreadcrumbsShimmer />
+            <article className={classes.root}>
+                <div className={classes.categoryHeader}>
+                    <h1 className={classes.title}>
+                        <div className={classes.categoryTitle}>
+                            <Shimmer width={5} />
+                        </div>
+                    </h1>
+                </div>
+                <div className={classes.contentWrapper}>
+                    <div className={classes.sidebar}>
+                        <FilterSidebarShimmer />
+                    </div>
+                    <div className={classes.categoryContent}>
+                        <div className={classes.heading}>
+                            <div className={classes.categoryInfo}>
+                                <Shimmer width={5} />
+                            </div>
+                            <div className={classes.headerButtons}>
+                                <FilterModalOpenButtonShimmer />
+                                <ProductSortShimmer />
+                            </div>
+                            <SortedByContainerShimmer />
+                        </div>
+                        <section className={classes.gallery}>
+                            <GalleryShimmer items={placeholderItems} />
+                        </section>
+                    </div>
+                </div>
+            </article>
+        </Fragment>
+    );
+};
+
+CategoryContentShimmer.defaultProps = {
+    classes: {}
+};
+
+CategoryContentShimmer.propTypes = {
+    classes: shape({
+        root: string,
+        categoryHeader: string,
+        title: string,
+        categoryTitle: string,
+        sidebar: string,
+        categoryContent: string,
+        heading: string,
+        categoryInfo: string,
+        headerButtons: string,
+        gallery: string
+    })
+};
+
+export default CategoryContentShimmer;

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

@@ -0,0 +1,12 @@
+export { default as image001 } from './001.jpg';
+export { default as image002 } from './002.jpg';
+export { default as image003 } from './003.jpg';
+export { default as image004 } from './004.jpg';
+export { default as image005 } from './005.jpg';
+export { default as image006 } from './006.jpg';
+export { default as image007 } from './007.jpg';
+export { default as image008 } from './008.jpg';
+export { default as image009 } from './009.jpg';
+export { default as image010 } from './010.jpg';
+export { default as image011 } from './011.jpg';
+export { default as image012 } from './012.jpg';

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

@@ -0,0 +1,6 @@
+/**
+ * @RootComponent
+ * description = 'Basic Category Page'
+ * pageTypes = CATEGORY
+ */
+export { default } from './category';

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

@@ -0,0 +1,112 @@
+import React, { Fragment, useMemo } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { string } from 'prop-types';
+import { Link } from 'react-router-dom';
+
+import { useBreadcrumbs } from '@magento/peregrine/lib/talons/Breadcrumbs/useBreadcrumbs';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Shimmer from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Breadcrumbs/breadcrumbs.shimmer';
+import defaultClasses from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Breadcrumbs/breadcrumbs.module.css';
+import { ArrowRight2 } from 'iconsax-react';
+import cn from 'classnames';
+
+
+/**
+ * Breadcrumbs! Generates a sorted display of category links.
+ *
+ * @param {String} props.categoryId the uid of the category for which to generate breadcrumbs
+ * @param {String} props.currentProduct the name of the product we're currently on, if any.
+ */
+const Breadcrumbs = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const { categoryId, currentProduct } = props;
+
+    const talonProps = useBreadcrumbs({ categoryId });
+
+    const DELIMITER = <ArrowRight2 size={13} className='inline-flex text-gray-200' />
+
+    const {
+        currentCategory,
+        currentCategoryPath,
+        hasError,
+        isLoading,
+        normalizedData,
+        handleClick
+    } = talonProps;
+
+    // For all links generate a fragment like "/ Text"
+    const links = useMemo(() => {
+        return normalizedData.map(({ text, path }) => {
+            return (
+                <Fragment key={text}>
+                    <span className={classes.divider}>{DELIMITER}</span>
+                    <Link
+                        className={classes.link}
+                        to={resourceUrl(path)}
+                        onClick={handleClick}
+                    >
+                        {text}
+                    </Link>
+                </Fragment>
+            );
+        });
+    }, [classes.divider, classes.link, handleClick, normalizedData]);
+
+    if (isLoading) {
+        return <Shimmer />;
+    }
+
+    // Don't display anything but the empty, static height div when there's an error.
+    if (hasError) {
+        return (
+            <div
+                className={classes.root}
+                aria-live="polite"
+                aria-busy="false"
+            />
+        );
+    }
+
+    // If we have a "currentProduct" it means we're on a PDP so we want the last
+    // category text to be a link. If we don't have a "currentProduct" we're on
+    // a category page so it should be regular text.
+    const currentCategoryLink = currentProduct ? (
+        <Link
+            className={classes.link}
+            to={resourceUrl(currentCategoryPath)}
+            onClick={handleClick}
+        >
+            {currentCategory}
+        </Link>
+    ) : (
+        <span className={cn(classes.currentCategory, 'text-blue-700 font-medium')}>{currentCategory}</span>
+    );
+
+    const currentProductNode = currentProduct ? (
+        <Fragment>
+            <span className={classes.divider}>{DELIMITER}</span>
+            <span className={classes.text}>{currentProduct}</span>
+        </Fragment>
+    ) : null;
+
+    return (
+        <div className={classes.root} aria-live="polite" aria-busy="false">
+            <Link className={classes.link} to="/">
+                <FormattedMessage id={'global.home'} defaultMessage={'Home'} />
+            </Link>
+            {links}
+            <span className={classes.divider}>{DELIMITER}</span>
+            {currentCategoryLink}
+            {currentProductNode}
+        </div>
+    );
+};
+
+export default Breadcrumbs;
+
+Breadcrumbs.propTypes = {
+    categoryId: string.isRequired,
+    currentProduct: string
+};

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

@@ -0,0 +1,32 @@
+.root {
+    /* Permanent height to prevent pop-in. */
+    /* Show ellipses when overflowing. */
+    composes: flex from global;
+    composes: items-center from global;
+    composes: gap-[6px] from global;
+    composes: my-[30px] from global;
+    padding-top: 20px;
+}
+
+.text {
+    composes: text-[13px] from global;
+    composes: leading-[13px] from global;
+    composes: text-blue-700 from global;
+    composes: font-medium from global;
+}
+
+.divider {
+    composes: text-[13px] from global;
+    composes: leading-[13px] from global;
+}
+
+.link {
+    composes: text-[13px] from global;
+    composes: leading-[13px] from global;
+    composes: text-gray-200 from global;
+}
+
+.currentCategory {
+    composes: text-[13px] from global;
+    composes: leading-[13px] from global;
+}