@riosst100/pwa-marketplace 1.3.1 → 1.3.2

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

@@ -0,0 +1,141 @@
+import { useEffect } from 'react';
+import { useLazyQuery, useQuery } from '@apollo/client';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
+
+import DEFAULT_OPERATIONS from './categoryContent.gql';
+
+/**
+ * Returns props necessary to render the categoryContent component.
+ *
+ * @param {object} props.data - The results of a getCategory GraphQL query.
+ *
+ * @returns {object} result
+ * @returns {string} result.categoryDescription - This category's description.
+ * @returns {string} result.categoryName - This category's name.
+ * @returns {object} result.filters - The filters object.
+ * @returns {object} result.items - The items in this category.
+ * @returns {number} result.totalPagesFromData - The total amount of pages for the query.
+ */
+export const useCategoryContent = props => {
+    const { categoryId, data, pageSize = 6 } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+
+    const {
+        getCategoryContentQuery,
+        getProductFiltersByCategoryQuery,
+        getCategoryAvailableSortMethodsQuery
+    } = operations;
+
+    const placeholderItems = Array.from({ length: pageSize }).fill(null);
+
+    const [getFilters, { data: filterData }] = useLazyQuery(
+        getProductFiltersByCategoryQuery,
+        {
+            fetchPolicy: 'cache-and-network',
+            nextFetchPolicy: 'cache-first'
+        }
+    );
+
+    const [getSortMethods, { data: sortData }] = useLazyQuery(
+        getCategoryAvailableSortMethodsQuery,
+        {
+            fetchPolicy: 'cache-and-network',
+            nextFetchPolicy: 'cache-first'
+        }
+    );
+
+    const { data: categoryData, loading: categoryLoading } = useQuery(
+        getCategoryContentQuery,
+        {
+            fetchPolicy: 'cache-and-network',
+            nextFetchPolicy: 'cache-first',
+            skip: !categoryId,
+            variables: {
+                id: categoryId
+            }
+        }
+    );
+
+    console.log(categoryData)
+
+    const [, { dispatch }] = useEventingContext();
+
+    useEffect(() => {
+        if (categoryId) {
+            getFilters({
+                variables: {
+                    categoryIdFilter: {
+                        eq: categoryId
+                    }
+                }
+            });
+        }
+    }, [categoryId, getFilters]);
+
+    useEffect(() => {
+        if (categoryId) {
+            getSortMethods({
+                variables: {
+                    categoryIdFilter: {
+                        in: categoryId
+                    }
+                }
+            });
+        }
+    }, [categoryId, getSortMethods]);
+
+    const filters = filterData ? filterData.products.aggregations : null;
+    const items = data ? data.products.items : placeholderItems;
+    const children =
+        categoryData && categoryData.categories.items.length
+            ? categoryData.categories.items[0].children
+            : null;
+    const parent =
+    categoryData && categoryData.categories.items.length
+        ? categoryData.categories.items[0].parent
+        : null;
+    const totalPagesFromData = data
+        ? data.products.page_info.total_pages
+        : null;
+    const totalCount = data ? data.products.total_count : null;
+    const categoryName =
+        categoryData && categoryData.categories.items.length
+            ? categoryData.categories.items[0].name
+            : null;
+    const categoryDescription =
+        categoryData && categoryData.categories.items.length
+            ? categoryData.categories.items[0].description
+            : null;
+    const availableSortMethods = sortData
+        ? sortData.products.sort_fields.options
+        : null;
+
+    useEffect(() => {
+        if (!categoryLoading && categoryData.categories.items.length > 0) {
+            dispatch({
+                type: 'CATEGORY_PAGE_VIEW',
+                payload: {
+                    id: categoryData.categories.items[0].uid,
+                    name: categoryData.categories.items[0].name,
+                    url_key: categoryData.categories.items[0].url_key,
+                    url_path: categoryData.categories.items[0].url_path
+                }
+            });
+        }
+    }, [categoryData, dispatch, categoryLoading]);
+
+    return {
+        availableSortMethods,
+        categoryName,
+        categoryDescription,
+        filters,
+        items,
+        totalCount,
+        totalPagesFromData,
+        children,
+        parent
+    };
+};

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

@@ -0,0 +1,222 @@
+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 { useCategoryContent } from '@magento/peregrine/lib/talons/RootComponents/Category';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Breadcrumbs from '@magento/venia-ui/lib/components/Breadcrumbs';
+import FilterModalOpenButton, {
+    FilterModalOpenButtonShimmer
+} from '@magento/venia-ui/lib/components/FilterModalOpenButton';
+import { FilterSidebarShimmer } from '@magento/venia-ui/lib/components/FilterSidebar';
+import Gallery, { GalleryShimmer } from '@magento/venia-ui/lib/components/Gallery';
+import { 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 SubCategory from '@riosst100/pwa-marketplace/src/components/SubCategory/subCategory';
+
+const FilterModal = React.lazy(() => import('@magento/venia-ui/lib/components/FilterModal'));
+const FilterSidebar = React.lazy(() =>
+    import('@magento/venia-ui/lib/components/FilterSidebar')
+);
+
+const CategoryContent = props => {
+    const {
+        categoryId,
+        data,
+        isLoading,
+        pageControl,
+        sortProps,
+        pageSize
+    } = props;
+    const [currentSort] = sortProps;
+
+    const talonProps = useCategoryContent({
+        categoryId,
+        data,
+        pageSize
+    });
+
+    const {
+        availableSortMethods,
+        categoryName,
+        categoryDescription,
+        filters,
+        items,
+        totalCount,
+        totalPagesFromData,
+        children,
+        parent
+    } = 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} categoryName={categoryName} children={children} parent={parent} />
+    ) : 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 (
+        <Fragment>
+            <Breadcrumbs categoryId={categoryId} />
+            <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
+                            className={classes.categoryTitle}
+                            data-cy="CategoryContent-categoryTitle"
+                        >
+                            {categoryTitle}
+                        </div>
+                    </h1>
+                    {categoryDescriptionElement}
+                </div>
+                <div className={classes.contentWrapper}>
+                    <div ref={sidebarRef} className={classes.sidebar}>
+                        <Suspense fallback={<FilterSidebarShimmer />}>
+                            {shouldRenderSidebarContent ? sidebar : null}
+                        </Suspense>
+                    </div>
+                    <div className={classes.categoryContent}>
+                        <div className={classes.heading}>
+                            <div
+                                data-cy="CategoryContent-categoryInfo"
+                                className={classes.categoryInfo}
+                            >
+                                {categoryResultsHeading}
+                            </div>
+                            <div className={classes.headerButtons}>
+                                {maybeFilterButtons}
+                                {maybeSortButton}
+                            </div>
+                            {maybeSortContainer}
+                        </div>
+                        {content}
+                        <Suspense fallback={null}>{filtersModal}</Suspense>
+                    </div>
+                </div>
+            </article>
+        </Fragment>
+    );
+};
+
+export default CategoryContent;
+
+CategoryContent.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/Adapter/adapter.js

@@ -40,7 +40,10 @@ const Adapter = props => {
     const match = location && location.pathname.split("/")[1];
     let websiteCodeInUrl = websiteCodes.find((str) => str === match);
 
-    const { getWebsiteByUserIp } = useWebsiteByIp(websiteCodeInUrl);
+    // const { getWebsiteByUserIp } = useWebsiteByIp(websiteCodeInUrl);
+    const getWebsiteByUserIp = {
+        countryCode: 'SG'
+    }
     
     useEffect(() => {
         if (websiteCodeInUrl) {
@@ -88,7 +91,7 @@ const Adapter = props => {
                 );
             }
         }
-    }, [websiteCodeInUrl, getWebsiteByUserIp])
+    }, [websiteCodeInUrl])
 
     // TODO: Replace with app skeleton. See PWA-547.
     if (!initialized) {

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

@@ -0,0 +1,157 @@
+import React, { useMemo, useCallback, useRef } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { array, arrayOf, shape, string, number } from 'prop-types';
+import { useFilterSidebar } from '@magento/peregrine/lib/talons/FilterSidebar';
+
+import { useStyle } from '../../classify';
+import LinkButton from '../LinkButton';
+import CurrentFilters from '../FilterModal/CurrentFilters';
+import FilterBlock from '../FilterModal/filterBlock';
+import defaultClasses from './filterSidebar.module.css';
+import ShopByCategory from '@riosst100/pwa-marketplace/src/components/ShopByCategory';
+
+const SCROLL_OFFSET = 150;
+
+/**
+ * A view that displays applicable and applied filters.
+ *
+ * @param {Object} props.filters - filters to display
+ */
+const FilterSidebar = props => {
+    const { categoryName, children, parent, filters, filterCountToOpen } = props;
+
+    const talonProps = useFilterSidebar({ filters });
+    const {
+        filterApi,
+        filterItems,
+        filterNames,
+        filterFrontendInput,
+        filterState,
+        handleApply,
+        handleReset
+    } = talonProps;
+
+    const filterRef = useRef();
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const handleApplyFilter = useCallback(
+        (...args) => {
+            const filterElement = filterRef.current;
+            if (
+                filterElement &&
+                typeof filterElement.getBoundingClientRect === 'function'
+            ) {
+                const filterTop = filterElement.getBoundingClientRect().top;
+                const windowScrollY =
+                    window.scrollY + filterTop - SCROLL_OFFSET;
+                window.scrollTo(0, windowScrollY);
+            }
+
+            handleApply(...args);
+        },
+        [handleApply, filterRef]
+    );
+
+    const filtersList = useMemo(
+        () =>
+            Array.from(filterItems, ([group, items], iteration) => {
+                const blockState = filterState.get(group);
+                const groupName = filterNames.get(group);
+                const frontendInput = filterFrontendInput.get(group);
+                return (
+                    <FilterBlock
+                        key={group}
+                        filterApi={filterApi}
+                        filterState={blockState}
+                        filterFrontendInput={frontendInput}
+                        group={group}
+                        items={items}
+                        name={groupName}
+                        onApply={handleApplyFilter}
+                        initialOpen={iteration < filterCountToOpen}
+                    />
+                );
+            }),
+        [
+            filterApi,
+            filterItems,
+            filterNames,
+            filterFrontendInput,
+            filterState,
+            filterCountToOpen,
+            handleApplyFilter
+        ]
+    );
+
+    const clearAll = filterState.size ? (
+        <div className={classes.action}>
+            <LinkButton
+                type="button"
+                onClick={handleReset}
+                data-cy="FilterSidebar-clearButton"
+            >
+                <FormattedMessage
+                    id={'filterModal.action'}
+                    defaultMessage={'Clear all'}
+                />
+            </LinkButton>
+        </div>
+    ) : null;
+
+    return (
+        <aside
+            className={classes.root}
+            ref={filterRef}
+            data-cy="FilterSidebar-root"
+            aria-busy="false"
+        >
+            <div className={classes.body}>
+                <div className={classes.header}>
+                    <h2
+                        data-cy="FilterSidebar-headerTitle"
+                        className={classes.headerTitle}
+                    >
+                        <FormattedMessage
+                            id={'filterModal.headerTitle'}
+                            defaultMessage={'Filters'}
+                        />
+                    </h2>
+                </div>
+                <CurrentFilters
+                    filterApi={filterApi}
+                    filterNames={filterNames}
+                    filterState={filterState}
+                    onRemove={handleApplyFilter}
+                />
+                {clearAll}
+                <ul className={classes.blocks}>{filtersList}</ul>
+                <ul className={classes.blocks}><ShopByCategory categoryName={categoryName} children={children} parent={parent} /></ul>
+            </div>
+        </aside>
+    );
+};
+
+FilterSidebar.defaultProps = {
+    filterCountToOpen: 3
+};
+
+FilterSidebar.propTypes = {
+    classes: shape({
+        action: string,
+        blocks: string,
+        body: string,
+        header: string,
+        headerTitle: string,
+        root: string,
+        root_open: string
+    }),
+    filters: arrayOf(
+        shape({
+            attribute_code: string,
+            items: array
+        })
+    ),
+    filterCountToOpen: number
+};
+
+export default FilterSidebar;

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

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 
 import { useIsInViewport } from '@magento/peregrine/lib/hooks/useIsInViewport';
 import { useMegaMenu } from '@magento/peregrine/lib/talons/MegaMenu/useMegaMenu';
+// import { useMegaMenu } from '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/MegaMenu/useMegaMenu';
 import { useStyle } from '@magento/venia-ui/lib/classify';
 
 import MegaMenuItem from './megaMenuItem';
@@ -51,7 +52,7 @@ const MegaMenu = (props) => {
         return () => {
             window.removeEventListener('resize', handleResize);
         };
-    });
+    }, [setMainNavWidth]);
 
     const items = megaMenuData.children
         ? megaMenuData.children.map(category => {

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

@@ -67,6 +67,7 @@ const MegaMenuItem = props => {
                 isFocused={isFocused}
                 subMenuState={subMenuState}
                 items={category.children}
+                shopByItems={category.shop_by}
                 mainNavWidth={mainNavWidth}
                 handleCloseSubMenu={handleCloseSubMenu}
                 categoryUrlSuffix={categoryUrlSuffix}

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

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './shopByColumn.module.css';
+import PropTypes from 'prop-types';
+
+const ShopByColumn = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const {
+        shopBy
+    } = props;
+
+    // const categoryUrl = resourceUrl(
+    //     `/${category.url_path}${categoryUrlSuffix || ''}`
+    // );
+    let items = null;
+
+    if (shopBy.items.length) {
+        const childrenItems = shopBy.items.map((shopByItem, index) => {
+    //         const { url_path, isActive, name } = shopByItem;
+            const { name } = shopByItem;
+    //         const categoryUrl = resourceUrl(
+    //             `/${url_path}${categoryUrlSuffix || ''}`
+    //         );
+
+            // setting keyboardProps if it is last child of that shopBy
+            const keyboardProps =
+                index === shopBy.items.length - 1
+                    ? props.keyboardProps
+                    : {};
+
+            return (
+                <li key={index} className={classes.submenuChildItem}>
+                    <Link
+                        {...keyboardProps}
+                        // className={isActive ? classes.linkActive : classes.link}
+                        className={classes.link}
+                        data-cy="MegaMenu-ShopByColumn-link"
+                        // to={categoryUrl}
+                        // onClick={onNavigate}
+                    >
+                        {name}
+                    </Link>
+                </li>
+            );
+        });
+
+        items = <ul className={classes.submenuChild}>{childrenItems}</ul>;
+    }
+
+    return (
+        <div className={classes.ShopByColumn}>
+            {/* <Link
+                {...keyboardProps}
+                className={classes.link}
+                data-cy="MegaMenu-ShopByColumn-link"
+                to={categoryUrl}
+                onClick={() => {
+                    handleCloseSubMenu();
+                    onNavigate();
+                }}
+            >
+                <span className={classes.heading}>{category.name}</span>
+            </Link> */}
+            <span className={classes.heading}>{shopBy.name}</span>
+            {items}
+        </div>
+    );
+};
+
+export default ShopByColumn;

package/src/overwrites/venia-ui/lib/components/MegaMenu/shopByColumn.module.css

@@ -0,0 +1,28 @@
+.shopByColumn {
+    composes: max-w-[235px] from global;
+    composes: p-5 from global;
+}
+
+.heading {
+    composes: font-semibold from global;
+}
+
+.link {
+    composes: whitespace-nowrap from global;
+
+    composes: focus_underline from global;
+
+    composes: hover_underline from global;
+}
+
+.linkActive {
+    composes: underline from global;
+}
+
+.submenuChild {
+    composes: mt-5 from global;
+}
+
+.submenuChildItem {
+    composes: mb-3 from global;
+}