@riosst100/pwa-marketplace 1.3.0 → 1.3.2

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/FilterModal/FilterList/filterDefault.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { bool, shape, string } from 'prop-types';
+
+import Checkbox from '@magento/venia-ui/lib/components/Checkbox';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from '@magento/venia-ui/lib/components/FilterModal/FilterList/filterDefault.module.css';
+import { useCurrencySwitcher } from '@magento/peregrine/lib/talons/Header/useCurrencySwitcher';
+
+const FilterDefault = props => {
+    const {
+        classes: propsClasses,
+        isSelected,
+        item,
+        onMouseDown,
+        group,
+        ...restProps
+    } = props;
+
+    const { label, value_index } = item || {};
+    const classes = useStyle(defaultClasses, propsClasses);
+    const { currentCurrencyCode } = useCurrencySwitcher();
+    const currencySymbolMap = {
+        USD: '$',
+        EUR: '€'
+    };
+    const currencySymbol = currencySymbolMap[currentCurrencyCode] != undefined ? currencySymbolMap[currentCurrencyCode] : currentCurrencyCode;
+    const title =
+        group === 'price'
+            ? currencySymbol + label.replace('-', ' - ' + currencySymbol) 
+            : label;
+    const { formatMessage } = useIntl();
+
+    const ariaLabel = !isSelected
+        ? formatMessage(
+              {
+                  id: 'filterModal.item.applyFilter',
+                  defaultMessage: 'Apply filter "{optionName}".'
+              },
+              {
+                  optionName: label
+              }
+          )
+        : formatMessage(
+              {
+                  id: 'filterModal.item.clearFilter',
+                  defaultMessage: 'Remove filter "{optionName}".'
+              },
+              {
+                  optionName: label
+              }
+          );
+
+    return (
+        <Checkbox
+            classes={classes}
+            field={`${label}-${value_index}`}
+            fieldValue={!!isSelected}
+            label={title}
+            ariaLabel={ariaLabel}
+            data-cy="FilterDefault-checkbox"
+            onClick={onMouseDown}
+            {...restProps}
+        />
+    );
+};
+
+export default FilterDefault;
+
+FilterDefault.propTypes = {
+    classes: shape({
+        root: string,
+        icon: string,
+        label: string,
+        checked: string
+    }),
+    group: string,
+    isSelected: bool,
+    item: shape({
+        label: string.isRequired,
+        value_index: string.isRequired
+    }).isRequired,
+    label: string
+};

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;
+}

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

@@ -6,6 +6,7 @@ import { useSubMenu } from '@magento/peregrine/lib/talons/MegaMenu/useSubMenu';
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import defaultClasses from './submenu.module.css';
 import SubmenuColumn from './submenuColumn';
+import ShopByColumn from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/MegaMenu/shopByColumn';
 
 /**
  * The Submenu component displays submenu in mega menu
@@ -17,6 +18,7 @@ import SubmenuColumn from './submenuColumn';
 const Submenu = props => {
     const {
         items,
+        shopByItems,
         mainNavWidth,
         isFocused,
         subMenuState,
@@ -55,6 +57,34 @@ const Submenu = props => {
         );
     });
 
+    // const shopByItems = [
+    //     {
+    //         name: 'Shop By Franchise',
+    //         items: [
+    //             {
+    //                 name: 'Hasbro',
+    //                 url: '/'
+    //             }
+    //         ]
+    //     }
+    // ];
+
+    const shopBy = shopByItems.map((shopBy, index) => {
+        const keyboardProps =
+            index === shopByItems.length - 1 ? talonProps.keyboardProps : {};
+        return (
+            <ShopByColumn
+                index={index}
+                keyboardProps={keyboardProps}
+                // key={category.uid}
+                shopBy={shopBy}
+                // categoryUrlSuffix={categoryUrlSuffix}
+                onNavigate={onNavigate}
+                handleCloseSubMenu={handleCloseSubMenu}
+            />
+        );
+    });
+
     return (
         <div className={subMenuClassname}>
             <div
@@ -62,6 +92,7 @@ const Submenu = props => {
                 style={{ minWidth: mainNavWidth + PADDING_OFFSET }}
             >
                 {subMenus}
+                {shopBy}
             </div>
         </div>
     );

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

@@ -20,6 +20,7 @@ const SubmenuColumn = props => {
         onNavigate,
         handleCloseSubMenu
     } = props;
+    
     const classes = useStyle(defaultClasses, props.classes);
 
     const categoryUrl = resourceUrl(

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

@@ -27,7 +27,7 @@ const SearchField = props => {
             onFocus={onFocus}
             onValueChange={onChange}
             forwardedRef={inputRef}
-            classes={cn('search input')}
+            // classes={cn('search input')}
         />
     );
 };