@riosst100/pwa-marketplace 1.3.1 → 1.3.2

package/package.json

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

package/src/componentOverrideMapping.js

@@ -13,7 +13,12 @@ module.exports = componentOverrideMapping = {
     [`@magento/peregrine/lib/talons/SignIn/signIn.gql.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/SignIn/signIn.gql.js',
     [`@magento/peregrine/lib/talons/SignIn/useSignIn.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/SignIn/useSignIn.js',
     [`@magento/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js',
+    [`@magento/peregrine/lib/talons/MegaMenu/megaMenu.gql.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/MegaMenu/megaMenu.gql.js',
     [`@magento/peregrine/lib/util/deriveErrorMessage.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/util/deriveErrorMessage.js',
     [`@magento/venia-ui/lib/components/MegaMenu/megaMenu.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/MegaMenu/megaMenu.js',
     [`@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/Breadcrumbs/useBreadcrumbs.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/Breadcrumbs/useBreadcrumbs.js',
+    [`@magento/venia-ui/lib/components/FilterSidebar/filterSidebar.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/FilterSidebar/filterSidebar.js',
 };

package/src/components/ShopByCategory/index.js

@@ -0,0 +1,2 @@
+export { default } from './shopByCategory';
+export { default as ShopByCategoryShimmer } from './shopByCategory.shimmer';

package/src/components/ShopByCategory/shopByCategory.js

@@ -0,0 +1,69 @@
+import React from 'react';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './shopByCategory.module.css';
+import { useShopByCategory } from '@riosst100/pwa-marketplace/src/talons/ShopByCategory';
+import { Link } from 'react-router-dom';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+
+const ShopByCategory = props => {
+    const { categoryName, children, parent } = props;
+
+    const talonProps = useShopByCategory({ children, parent });
+
+    const {
+        childrenNormalizedData,
+        parentNormalizedData
+    } = talonProps;
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const childrenList = [];
+
+    childrenList.push(
+        <span><b>{categoryName}</b></span>
+    );
+
+    childrenNormalizedData ? childrenNormalizedData.map(({ text, path }) => {
+        childrenList.push(
+            <Link
+                to={resourceUrl(path)}
+            >
+                <div>{text}</div>
+            </Link>
+        )
+    }) : ''
+
+    const parentList = [];
+    parentNormalizedData ? parentNormalizedData.map(({ text, path }) => {
+        parentList.push(
+            <Link
+                to={resourceUrl(path)}
+            >
+                <div>{text}</div>
+            </Link>
+        )
+    }) : ''
+
+    return (
+        <aside
+            className={classes.root}
+            data-cy="ShopByCategory-root"
+            aria-busy="false"
+        >
+            <br />
+            <br />
+            {/* <div className={classes.body}> */}
+                {/* <ul> */}
+                    <li>
+                        <div><b>Shop By Category</b></div>
+                        {parentList}
+                        <ul className={classes.blocks}>{childrenList}</ul>
+                    </li>
+                {/* </ul> */}
+            {/* </div> */}
+        </aside>
+    );
+};
+
+export default ShopByCategory;

package/src/components/ShopByCategory/shopByCategory.module.css

@@ -0,0 +1,58 @@
+.root {
+    composes: bg-white from global;
+    composes: bottom-0 from global;
+    composes: hidden from global;
+    composes: max-w-modal from global;
+    composes: w-full from global;
+    composes: z-foreground from global;
+    grid-template-rows: 1fr 7rem;
+
+    composes: lg_grid from global;
+}
+
+.body {
+    composes: overflow-auto from global;
+}
+
+.header {
+    composes: flex from global;
+    composes: justify-between from global;
+    composes: pb-0 from global;
+    composes: pt-5 from global;
+    composes: px-5 from global;
+}
+
+.headerTitle {
+    composes: flex from global;
+    composes: items-center from global;
+    composes: leading-none from global;
+    composes: text-lg from global;
+}
+
+.action {
+    composes: pb-0 from global;
+    composes: pt-xs from global;
+    composes: px-xs from global;
+}
+
+/* TODO @TW: cannot compose */
+.action button {
+    /* composes: text-sm from global; */
+    font-size: 0.875rem;
+    /* composes: no-underline from global; */
+    text-decoration: none;
+}
+
+.blocks {
+    composes: pb-0 from global;
+    composes: pt-xs from global;
+    composes: px-xs from global;
+}
+
+/* TODO @TW: cannot compose */
+.blocks > li:last-child {
+    /* composes: border-b-2 from global; */
+    /* composes: border-solid from global; */
+    /* composes: border-subtle from global; */
+    border-bottom: 2px solid rgb(var(--venia-global-color-border));
+}

package/src/components/ShopByCategory/shopByCategory.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 './shopByCategory.module.css';
+
+const ShopByCategory = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <aside className={classes.root} aria-live="polite" aria-busy="true">
+            <Shimmer width="95%" height="70vh" style={{ marginBottom: 25 }} />
+        </aside>
+    );
+};
+
+ShopByCategory.propTypes = {
+    classes: shape({
+        root: string
+    })
+};
+
+export default ShopByCategory;

package/src/components/SubCategory/subCategory.js

@@ -0,0 +1,31 @@
+import { useSubCategory } from '@riosst100/pwa-marketplace/src/talons/SubCategory/useSubCategory';
+import React from 'react';
+import { Link } from 'react-router-dom';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+
+const SubCategory = props => {
+    const { children } = props;
+
+    const talonProps = useSubCategory({ children });
+
+    const {
+        normalizedData
+    } = talonProps;
+    
+    const subCategory = [];
+    
+    normalizedData && normalizedData.map(({ text, path }, index) => {
+        subCategory.push(
+            <Link
+                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>
+            </Link>
+        )
+    });
+
+    return subCategory;
+};
+
+export default SubCategory;

package/src/overwrites/peregrine/lib/talons/Breadcrumbs/useBreadcrumbs.js

@@ -0,0 +1,100 @@
+import { useMemo } from 'react';
+import { useQuery } from '@apollo/client';
+import { useInternalLink } from '@magento/peregrine/lib/hooks/useInternalLink';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+
+import DEFAULT_OPERATIONS from '@magento/peregrine/lib/talons/Breadcrumbs/breadcrumbs.gql';
+
+// Just incase the data is unsorted, lets sort it.
+
+/* CUSTOM: Fix sorting */
+const sortCrumbs = (a, b) => a.category_level - b.category_level;
+
+// Generates the path for the category.
+const getPath = (path, suffix) => {
+    if (path) {
+        return `/${path}${suffix || ''}`;
+    }
+
+    // If there is no path this is just a dead link.
+    return '#';
+};
+
+/**
+ * Returns props necessary to render a Breadcrumbs component.
+ *
+ * @param {object} props
+ * @param {object} props.query - the breadcrumb query
+ * @param {string} props.categoryId - the id of the category for which to generate breadcrumbs
+ * @return {{
+ *   currentCategory: string,
+ *   currentCategoryPath: string,
+ *   isLoading: boolean,
+ *   normalizedData: array,
+ *   handleClick: function
+ * }}
+ */
+export const useBreadcrumbs = props => {
+    const { categoryId } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { getBreadcrumbsQuery, getStoreConfigQuery } = operations;
+
+    const { data, loading, error } = useQuery(getBreadcrumbsQuery, {
+        variables: { category_id: categoryId },
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const { data: storeConfigData } = useQuery(getStoreConfigQuery, {
+        fetchPolicy: 'cache-and-network'
+    });
+
+    const categoryUrlSuffix = useMemo(() => {
+        if (storeConfigData) {
+            return storeConfigData.storeConfig.category_url_suffix;
+        }
+    }, [storeConfigData]);
+
+    // When we have breadcrumb data sort and normalize it for easy rendering.
+    const normalizedData = useMemo(() => {
+        if (!loading && data && data.categories.items.length) {
+            const breadcrumbData = data.categories.items[0].breadcrumbs;
+
+            return (
+                breadcrumbData &&
+                breadcrumbData
+                    .map(category => ({
+                        category_level: category.category_level,
+                        text: category.category_name,
+                        path: getPath(
+                            category.category_url_path,
+                            categoryUrlSuffix
+                        )
+                    }))
+                    .sort(sortCrumbs)
+            );
+        }
+    }, [categoryUrlSuffix, data, loading]);
+
+    const { setShimmerType } = useInternalLink('category');
+
+    return {
+        currentCategory:
+            (data &&
+                data.categories.items.length &&
+                data.categories.items[0].name) ||
+            '',
+        currentCategoryPath:
+            (data &&
+                data.categories.items.length &&
+                `${data.categories.items[0].url_path}${categoryUrlSuffix ||
+                    ''}`) ||
+            '#',
+        isLoading: loading,
+        hasError: !!error,
+        normalizedData: normalizedData || [],
+        handleClick: setShimmerType
+    };
+};

package/src/overwrites/peregrine/lib/talons/MegaMenu/megaMenu.gql.js

@@ -0,0 +1,70 @@
+import { gql } from '@apollo/client';
+export const GET_STORE_CONFIG_DATA = gql`
+    query GetStoreConfigForMegaMenu {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            category_url_suffix
+        }
+    }
+`;
+
+export const GET_MEGA_MENU = gql`
+    query getMegaMenu {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        categoryList {
+            uid
+            name
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            children {
+                uid
+                include_in_menu
+                name
+                position
+                url_path
+                shop_by {
+                    name
+                    items {
+                        name
+                        url_path
+                    }
+                }
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
+                children {
+                    uid
+                    include_in_menu
+                    name
+                    position
+                    url_path
+                    shop_by {
+                        name
+                        items {
+                            name
+                            url_path
+                        }
+                    }
+                    # eslint-disable-next-line @graphql-eslint/require-id-when-available
+                    children {
+                        uid
+                        include_in_menu
+                        name
+                        position
+                        url_path
+                        shop_by {
+                            name
+                            items {
+                                name
+                                url_path
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+`;
+
+export default {
+    getMegaMenuQuery: GET_MEGA_MENU,
+    getStoreConfigQuery: GET_STORE_CONFIG_DATA
+};

package/src/overwrites/peregrine/lib/talons/MegaMenu/useMegaMenu.js

@@ -0,0 +1,199 @@
+import { useMemo, useState, useCallback, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useInternalLink } from '../../hooks/useInternalLink';
+
+import { useQuery } from '@apollo/client';
+import { useEventListener } from '../../hooks/useEventListener';
+
+import mergeOperations from '../../util/shallowMerge';
+import DEFAULT_OPERATIONS from './megaMenu.gql';
+
+/**
+ * The useMegaMenu talon complements the MegaMenu component.
+ *
+ * @param {Object} props
+ * @param {*} props.operations GraphQL operations used by talons
+ * @param {React.RefObject} props.mainNavRef Reference to main navigation DOM node
+ *
+ * @return {MegaMenuTalonProps}
+ */
+export const useMegaMenu = (props = {}) => {
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { getMegaMenuQuery, getStoreConfigQuery } = operations;
+
+    const location = useLocation();
+    const [activeCategoryId, setActiveCategoryId] = useState(null);
+    const [subMenuState, setSubMenuState] = useState(false);
+    const [disableFocus, setDisableFocus] = useState(false);
+
+    const { data: storeConfigData } = useQuery(getStoreConfigQuery, {
+        fetchPolicy: 'cache-and-network'
+    });
+
+    const { data } = useQuery(getMegaMenuQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const categoryUrlSuffix = useMemo(() => {
+        if (storeConfigData) {
+            return storeConfigData.storeConfig.category_url_suffix;
+        }
+    }, [storeConfigData]);
+
+    /**
+     * Check if category should be visible on the storefront.
+     *
+     * @param {MegaMenuCategory} category
+     * @returns {boolean}
+     */
+    const shouldRenderMegaMenuItem = category => {
+        return !!category.include_in_menu;
+    };
+
+    /**
+     * Check if category is the active category based on the current location.
+     *
+     * @param {MegaMenuCategory} category
+     * @returns {boolean}
+     */
+
+    const isActive = useCallback(
+        ({ url_path }) => {
+            if (!url_path) return false;
+
+            const categoryUrlPath = `/${url_path}${categoryUrlSuffix || ''}`;
+
+            return location.pathname === categoryUrlPath;
+        },
+        [location.pathname, categoryUrlSuffix]
+    );
+
+    /**
+     * Recursively map data returned by GraphQL query.
+     *
+     * @param {MegaMenuCategory} category
+     * @param {array} - path from the given category to the first level category
+     * @param {boolean} isRoot - describes is category a root category
+     * @return {MegaMenuCategory}
+     */
+    const processData = useCallback(
+        (category, path = [], isRoot = true) => {
+            if (!category) {
+                return;
+            }
+
+            const megaMenuCategory = Object.assign({}, category);
+
+            if (!isRoot) {
+                megaMenuCategory.path = [...path, category.uid];
+            }
+
+            megaMenuCategory.isActive = isActive(megaMenuCategory);
+
+            if (megaMenuCategory.children) {
+                megaMenuCategory.children = [...megaMenuCategory.children]
+                    .filter(category => shouldRenderMegaMenuItem(category))
+                    .sort((a, b) => (a.position > b.position ? 1 : -1))
+                    .map(child =>
+                        processData(child, megaMenuCategory.path, false)
+                    );
+            }
+
+            return megaMenuCategory;
+        },
+        [isActive]
+    );
+
+    const megaMenuData = useMemo(() => {
+        return data ? processData(data.categoryList[0]) : {};
+    }, [data, processData]);
+
+    const findActiveCategory = useCallback(
+        (pathname, category) => {
+            if (isActive(category)) {
+                return category;
+            }
+
+            if (category.children) {
+                return category.children.find(category =>
+                    findActiveCategory(pathname, category)
+                );
+            }
+        },
+        [isActive]
+    );
+
+    const handleClickOutside = e => {
+        if (!props.mainNavRef.current.contains(e.target)) {
+            setSubMenuState(false);
+            setDisableFocus(true);
+        }
+    };
+
+    useEventListener(globalThis, 'keydown', handleClickOutside);
+
+    const handleSubMenuFocus = useCallback(() => {
+        setSubMenuState(true);
+    }, [setSubMenuState]);
+
+    useEffect(() => {
+        const activeCategory = findActiveCategory(
+            location.pathname,
+            megaMenuData
+        );
+
+        if (activeCategory) {
+            setActiveCategoryId(activeCategory.path[0]);
+        } else {
+            setActiveCategoryId(null);
+        }
+    }, [findActiveCategory, location.pathname, megaMenuData]);
+
+    /**
+     * Sets next root component to show proper loading effect
+     *
+     * @returns {void}
+     */
+    const { setShimmerType } = useInternalLink('category');
+
+    return {
+        megaMenuData,
+        activeCategoryId,
+        categoryUrlSuffix,
+        handleClickOutside,
+        subMenuState,
+        disableFocus,
+        handleSubMenuFocus,
+        handleNavigate: setShimmerType
+    };
+};
+
+/** JSDocs type definitions */
+
+/**
+ * @typedef {Object} MegaMenuTalonProps
+ *
+ * @property {MegaMenuCategory} megaMenuData - The Object with categories contains only categories
+ *                                             with the include_in_menu = 1 flag. The categories are sorted
+ *                                             based on the field position.
+ * @property {String} activeCategoryId returns the currently selected category uid.
+ * @property {String} categoryUrlSuffix  store's category url suffix to construct category URL
+ * @property {Function} handleClickOutside function to handle mouse/key events.
+ * @property {Boolean} subMenuState maintaining sub-menu open/close state
+ * @property {Boolean} disableFocus state to disable focus
+ * @property {Function} handleSubMenuFocus toggle function to handle sub-menu focus
+ * @property {function} handleNavigate - callback to fire on link click
+ */
+
+/**
+ * Object type returned by the {@link useMegaMenu} talon.
+ * @typedef {Object} MegaMenuCategory
+ *
+ * @property {String} uid - uid of the category
+ * @property {int} include_in_menu - describes if category should be included in menu
+ * @property {String} name - name of the category
+ * @property {int} position - value used for sorting
+ * @property {String} url_path - URL path for a category
+ * @property {MegaMenuCategory} children - child category
+ */

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

@@ -0,0 +1,70 @@
+import { gql } from '@apollo/client';
+
+export const GET_PRODUCT_FILTERS_BY_CATEGORY = gql`
+    query getProductFiltersByCategory(
+        $categoryIdFilter: FilterEqualTypeInput!
+    ) {
+        products(filter: { category_uid: $categoryIdFilter }) {
+            aggregations {
+                label
+                count
+                attribute_code
+                options {
+                    label
+                    value
+                }
+                position
+            }
+        }
+    }
+`;
+
+export const GET_CATEGORY_CONTENT = gql`
+    query getCategoryData($id: String!) {
+        categories(filters: { category_uid: { in: [$id] } }) {
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            items {
+                uid
+                name
+                description
+                url_key
+                url_path
+                parent {
+                    uid
+                    name
+                    position
+                    url_path
+                    # eslint-disable-next-line @graphql-eslint/require-id-when-available
+                }
+                children {
+                    uid
+                    name
+                    position
+                    url_path
+                    # eslint-disable-next-line @graphql-eslint/require-id-when-available
+                }
+            }
+        }
+    }
+`;
+
+export const GET_CATEGORY_AVAILABLE_SORT_METHODS = gql`
+    query getCategoryAvailableSortMethods(
+        $categoryIdFilter: FilterEqualTypeInput!
+    ) {
+        products(filter: { category_uid: $categoryIdFilter }) {
+            sort_fields {
+                options {
+                    label
+                    value
+                }
+            }
+        }
+    }
+`;
+
+export default {
+    getCategoryContentQuery: GET_CATEGORY_CONTENT,
+    getProductFiltersByCategoryQuery: GET_PRODUCT_FILTERS_BY_CATEGORY,
+    getCategoryAvailableSortMethodsQuery: GET_CATEGORY_AVAILABLE_SORT_METHODS
+};