@riosst100/pwa-marketplace 2.4.7 → 2.4.8

package/src/talons/SellerMegaMenu/useSellerMegaMenu.js

@@ -0,0 +1,199 @@
+import { useMemo, useState, useCallback, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useInternalLink } from '@magento/peregrine/lib/hooks/useInternalLink';
+
+import { useQuery } from '@apollo/client';
+import { useEventListener } from '@magento/peregrine/lib/hooks/useEventListener';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from './megaMenu.gql';
+
+/**
+ * The useSellerMegaMenu talon complements the SellerMegaMenu component.
+ *
+ * @param {Object} props
+ * @param {*} props.operations GraphQL operations used by talons
+ * @param {React.RefObject} props.mainNavRef Reference to main navigation DOM node
+ *
+ * @return {SellerMegaMenuTalonProps}
+ */
+export const useSellerMegaMenu = (props = {}) => {
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { getMegaMenuQuery, getStoreConfigQuery } = operations;
+
+    const location = useLocation();
+    const [activeCategoryId, setActiveCategoryId] = useState(null);
+    const [sellerSubMenuState, setSellerSubMenuState] = 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 shouldRenderSellerMegaMenuItem = 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 => shouldRenderSellerMegaMenuItem(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)) {
+            setSellerSubMenuState(false);
+            setDisableFocus(true);
+        }
+    };
+
+    useEventListener(globalThis, 'keydown', handleClickOutside);
+
+    const handleSellerSubMenuFocus = useCallback(() => {
+        setSellerSubMenuState(true);
+    }, [setSellerSubMenuState]);
+
+    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,
+        sellerSubMenuState,
+        disableFocus,
+        handleSellerSubMenuFocus,
+        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} sellerSubMenuState maintaining sub-menu open/close state
+ * @property {Boolean} disableFocus state to disable focus
+ * @property {Function} handleSellerSubMenuFocus 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/talons/SellerMegaMenu/useSellerMegaMenuItem.js

@@ -0,0 +1,66 @@
+import { useCallback, useMemo, useState } from 'react';
+
+export const useSellerMegaMenuItem = props => {
+    const { category, activeCategoryId, sellerSubMenuState, disableFocus } = props;
+
+    const [isFocused, setIsFocused] = useState(false);
+    const isActive = category.id === activeCategoryId;
+
+    const handleMenuItemFocus = useCallback(() => {
+        setIsFocused(true);
+    }, [setIsFocused]);
+
+    const handleCloseSellerSubMenu = useCallback(() => {
+        setIsFocused(false);
+    }, [setIsFocused]);
+
+    const isMenuActive = useMemo(() => {
+        if (!isFocused) {
+            return false;
+        }
+        if (sellerSubMenuState) {
+            return true;
+        } else if (disableFocus) {
+            setIsFocused(false);
+        }
+        return false;
+    }, [isFocused, sellerSubMenuState, disableFocus]);
+
+    const handleKeyDown = useCallback(
+        event => {
+            const { key: pressedKey, shiftKey } = event;
+
+            // checking down arrow and spacebar
+            if (pressedKey === 'ArrowDown' || pressedKey === ' ') {
+                event.preventDefault();
+                if (category.children.length || category.name == "Lego") {
+                    setIsFocused(true);
+                } else {
+                    setIsFocused(false);
+                }
+
+                return;
+            }
+
+            //checking up arrow or escape
+            if (pressedKey === 'ArrowUp' || pressedKey === 'Escape') {
+                setIsFocused(false);
+            }
+
+            //checking Tab with Shift
+            if (shiftKey && pressedKey === 'Tab') {
+                setIsFocused(false);
+            }
+        },
+        [category.children.length, category.name]
+    );
+
+    return {
+        isFocused,
+        isActive,
+        handleMenuItemFocus,
+        handleCloseSellerSubMenu,
+        isMenuActive,
+        handleKeyDown
+    };
+};

package/src/talons/SellerMegaMenu/useSellerSubMenu.js

@@ -0,0 +1,21 @@
+import { useKeyboard } from 'react-aria';
+
+export const useSellerSubMenu = props => {
+    const { isFocused, sellerSubMenuState, handleCloseSellerSubMenu } = props;
+
+    const { keyboardProps } = useKeyboard({
+        onKeyDown: e => {
+            //checking for Tab without Shift
+            if (!e.shiftKey && e.key === 'Tab') {
+                e.target.addEventListener('blur', handleCloseSellerSubMenu);
+            } else {
+                e.target.removeEventListener('blur', handleCloseSellerSubMenu);
+            }
+        }
+    });
+
+    const isSellerSubMenuActive = isFocused && sellerSubMenuState;
+    // const isSellerSubMenuActive = true;
+
+    return { keyboardProps, isSellerSubMenuActive };
+};

package/src/talons/SellerProducts/sellerProducts.gql.js

@@ -56,8 +56,31 @@ export const GET_CATEGORIES_DATA = gql`
     }
 `;
 
+export const RESOLVE_URL = gql`
+    query ResolveURL($url: String!, $product_preview_token: String) {
+        route(url: $url, product_preview_token: $product_preview_token) {
+            relative_url
+            redirect_code
+            type
+            ... on CmsPage {
+                identifier
+            }
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            ... on ProductInterface {
+                uid
+                __typename
+            }
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            ... on CategoryInterface {
+                uid
+            }
+        }
+    }
+`;
+
 export default {
     getProductsQuery: GET_PRODUCTS,
     getFilterInputsQuery: GET_FILTER_INPUTS,
-    getCategoryDataQuery: GET_CATEGORIES_DATA
+    getCategoryDataQuery: GET_CATEGORIES_DATA,
+    resolveUrlQuery: RESOLVE_URL
 };

package/src/talons/SellerProducts/useProductContent.js

@@ -7,9 +7,10 @@ import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
 import DEFAULT_OPERATIONS from './productContent.gql';
 
 export const useProductContent = props => {
-    const { sellerId, data, pageSize = 6 } = props;
+    const { sellerId, categoryId, data, pageSize = 6 } = props;
 
-    const categoryUid = 'MTI=';
+    // const categoryId = 'MTI=';
+    // alert(categoryId)
 
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
 
@@ -58,9 +59,9 @@ export const useProductContent = props => {
         {
             fetchPolicy: 'cache-and-network',
             nextFetchPolicy: 'cache-first',
-            skip: !categoryUid,
+            skip: !categoryId,
             variables: {
-                id: categoryUid
+                id: categoryId
             }
         }
     );
@@ -68,36 +69,32 @@ export const useProductContent = props => {
     const [, { dispatch }] = useEventingContext();
 
     useEffect(() => {
-        if (categoryUid) {
+        if (categoryId) {
             getFilters({
                 variables: {
                     categoryIdFilter: {
-                        eq: categoryUid
+                        eq: categoryId
                     }
                 }
             });
         }
-    }, [categoryUid, getFilters]);
+    }, [categoryId, getFilters]);
 
     useEffect(() => {
-        if (categoryUid) {
+        if (categoryId) {
             getSortMethods({
                 variables: {
                     categoryIdFilter: {
-                        in: categoryUid
+                        in: categoryId
                     }
                 }
             });
         }
-    }, [categoryUid, getSortMethods]);
-
-    console.log('filterData')
-    console.log(filterData)
+    }, [categoryId, getSortMethods]);
 
     const rawFilters = filterData ? filterData.products.aggregations : null;
     const items = data ? data.items : placeholderItems;
-    // const category = null;
-    // const children = null;
+    
     const category =
         categoryData && categoryData.categories.items.length
             ? categoryData.categories.items[0]
@@ -109,9 +106,6 @@ export const useProductContent = props => {
 
     const filters = [];
 
-    console.log('rawFilters')
-    console.log(rawFilters)
-
     rawFilters && rawFilters.map((filter, index) => {
 
         const filterOptions = [];
@@ -141,7 +135,7 @@ export const useProductContent = props => {
 
     const attributesBlock = null;
     const parent = null;
-    const categoryName = null;
+    // const categoryName = null;
     const categoryDescription = null;
     
     // const attributesBlock = categoryData && categoryData.categories.items.length
@@ -156,10 +150,10 @@ export const useProductContent = props => {
         : null;
     const totalCount = data ? data.total_count : null;
     
-    // const categoryName =
-    //     categoryData && categoryData.categories.items.length
-    //         ? categoryData.categories.items[0].name
-    //         : 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

package/src/talons/SellerProducts/useSellerProducts.js

@@ -21,7 +21,7 @@ export const useSellerProducts = props => {
     } = props;
 
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
-    const { getProductsQuery, getFilterInputsQuery, getCategoryDataQuery } = operations;
+    const { resolveUrlQuery, getProductsQuery, getFilterInputsQuery, getCategoryDataQuery } = operations;
 
     const { data: pageSizeData } = useQuery(getPageSize, {
         fetchPolicy: 'cache-and-network',
@@ -59,6 +59,11 @@ export const useSellerProducts = props => {
         }
     ] = useAppContext();
 
+    const [runResolveUrlQuery, queryResolveUrlResponse] = useLazyQuery(resolveUrlQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
     const [runQuery, queryResponse] = useLazyQuery(getProductsQuery, {
         fetchPolicy: 'cache-and-network',
         nextFetchPolicy: 'cache-first'
@@ -81,13 +86,13 @@ export const useSellerProducts = props => {
     // console.log('======')
 
     const {
-        called: categoryCalled,
-        loading: categoryLoading,
-        error: categoryError,
-        data: categoryData
-    } = queryGetCategoriesResponse;
+        called: routeCalled,
+        loading: routeLoading,
+        error: routeError,
+        data: routeData
+    } = queryResolveUrlResponse;
 
-    const { search } = useLocation();
+    const { search, pathname } = useLocation();
 
     const isBackgroundLoading = !!data && productLoading;
 
@@ -109,33 +114,45 @@ export const useSellerProducts = props => {
     // const {
     //     data: categoryData
     // } = useQuery(getCategoryDataQuery);
+    // const { pathname } = useLocation();
+    const slug = pathname.split('/').pop();
+    // alert(slug)
+    // const productUrlSuffix = storeConfigData?.storeConfig?.product_url_suffix;
+    // const productUrlSuffix = '.html';
+    // const categoryUrlKey = productUrlSuffix ? slug.replace(productUrlSuffix, '') : slug;
 
     useEffect(() => {
         // const filters = getFiltersFromSearch(search);
 
+        
+
         // Construct the filter arg object.
-        const newFilters = {};
-        newFilters['url_key'] = { eq: "lego" };
+        // const newFilters = {};
+        // newFilters['url_key'] = { eq: categoryUrlKey };
 
-        runGetCategoriesQuery({
+        runResolveUrlQuery({
             variables: {
-                currentPage: Number(1),
-                filters: newFilters,
-                pageSize: Number(1)
+                // currentPage: Number(1),
+                // filters: newFilters,
+                // pageSize: Number(1)
+                url: slug
             }
         });
     }, [
-        runGetCategoriesQuery,
-        search
+        runResolveUrlQuery,
+        slug
     ]);
 
     const categoryId = useMemo(() => {
+        console.log('---===routerouterouterouteroute')
+        console.log(routeData)
         let uid = null;
-        if (categoryData) {
-            uid = categoryData?.categories?.items[0].id;
+        if (routeData) {
+            const { route } = routeData || {};
+            uid = route?.uid;
         }
         return uid;
-    }, [categoryData]);
+    }, [routeData]);
 
     
 
@@ -156,9 +173,6 @@ export const useSellerProducts = props => {
     useEffect(() => {
         // console.log('=categoryData=')
         // console.log(categoryData)
-        if (!categoryData) {
-            return;
-        }
         // Wait until we have the type map to fetch product data.
         if (!filterTypeMap.size || !pageSize) {
             return;
@@ -175,7 +189,7 @@ export const useSellerProducts = props => {
         // Use the category uid for the current category page regardless of the
         // applied filters. Follow-up in PWA-404.
         if (categoryId) {
-            newFilters['category_id'] = { eq: categoryId };
+            newFilters['category_uid'] = { eq: categoryId };
         }
 
         runQuery({
@@ -194,8 +208,7 @@ export const useSellerProducts = props => {
         categoryId,
         pageSize,
         runQuery,
-        search,
-        categoryData
+        search
     ]);
 
     const totalPagesFromData = data
@@ -245,10 +258,12 @@ export const useSellerProducts = props => {
     const categoryNotFound = false;
 
     // When only productLoading is involved, noProductsFound component flashes for a moment
-    const loading =
-        (introspectionCalled && !categoryCalled) ||
-        (productLoading && !data) ||
-        introspectionLoading;
+    // const loading =
+    //     (introspectionCalled && !categoryCalled) ||
+    //     (productLoading && !data) ||
+    //     introspectionLoading;
+
+    const loading = false;
 
     useScrollTopOnChange(currentPage);
 
@@ -256,6 +271,7 @@ export const useSellerProducts = props => {
         error,
         productData,
         loading,
+        categoryId,
         pageControl,
         sortProps,
         pageSize,