@magento/peregrine 11.0.0-beta.1 → 12.0.0-alpha.3

package/lib/talons/Gallery/useGallery.js

@@ -10,14 +10,11 @@ export const useGallery = (props = {}) => {
 
     useCustomerWishlistSkus();
 
-    const { data: wishlistConfigData } = useQuery(
-        operations.getWishlistConfigQuery,
-        { fetchPolicy: 'cache-and-network' }
-    );
+    const { data: storeConfigData } = useQuery(operations.getStoreConfigQuery, {
+        fetchPolicy: 'cache-and-network'
+    });
 
-    const storeConfig = wishlistConfigData
-        ? wishlistConfigData.storeConfig
-        : null;
+    const storeConfig = storeConfigData ? storeConfigData.storeConfig : null;
 
     return {
         storeConfig

package/lib/talons/Gallery/useGalleryItem.js

@@ -1,6 +1,12 @@
+import { isSupportedProductType as isSupported } from '@magento/peregrine/lib/util/isSupportedProductType';
+
 export const useGalleryItem = (props = {}) => {
     const { item, storeConfig } = props;
 
+    const productType = item ? item.__typename : null;
+
+    const isSupportedProductType = isSupported(productType);
+
     const wishlistButtonProps =
         storeConfig && storeConfig.magento_wishlist_general_is_enabled === '1'
             ? {
@@ -12,5 +18,5 @@ export const useGalleryItem = (props = {}) => {
               }
             : null;
 
-    return { ...props, wishlistButtonProps };
+    return { ...props, wishlistButtonProps, isSupportedProductType };
 };

package/lib/talons/Header/useCartTrigger.js

@@ -1,6 +1,6 @@
-import { useCallback } from 'react';
+import { useCallback, useState, useEffect } from 'react';
 import { useQuery } from '@apollo/client';
-import { useHistory } from 'react-router-dom';
+import { useHistory, useLocation } from 'react-router-dom';
 
 import { useCartContext } from '@magento/peregrine/lib/context/cart';
 import { useDropdown } from '@magento/peregrine/lib/hooks/useDropdown';
@@ -30,13 +30,18 @@ export const useCartTrigger = props => {
     } = props;
 
     const [{ cartId }] = useCartContext();
+    const history = useHistory();
+    const location = useLocation();
+    const [isHidden, setIsHidden] = useState(() =>
+        DENIED_MINI_CART_ROUTES.includes(location.pathname)
+    );
+
     const {
         elementRef: miniCartRef,
         expanded: miniCartIsOpen,
         setExpanded: setMiniCartIsOpen,
         triggerRef: miniCartTriggerRef
     } = useDropdown();
-    const history = useHistory();
 
     const { data } = useQuery(getItemCountQuery, {
         fetchPolicy: 'cache-and-network',
@@ -46,10 +51,8 @@ export const useCartTrigger = props => {
         },
         skip: !cartId
     });
+
     const itemCount = data ? data.cart.total_quantity : 0;
-    const hideCartTrigger = DENIED_MINI_CART_ROUTES.includes(
-        history.location.pathname
-    );
 
     const handleTriggerClick = useCallback(() => {
         // Open the mini cart.
@@ -61,13 +64,17 @@ export const useCartTrigger = props => {
         history.push('/cart');
     }, [history]);
 
+    useEffect(() => {
+        setIsHidden(DENIED_MINI_CART_ROUTES.includes(location.pathname));
+    }, [location]);
+
     return {
         handleLinkClick,
         handleTriggerClick,
         itemCount,
         miniCartIsOpen,
         miniCartRef,
-        hideCartTrigger,
+        hideCartTrigger: isHidden,
         setMiniCartIsOpen,
         miniCartTriggerRef
     };

package/lib/talons/Link/useLink.js

@@ -0,0 +1,68 @@
+import { useEffect, useRef } from 'react';
+import { useLazyQuery } from '@apollo/client';
+import useIntersectionObserver from '../../hooks/useIntersectionObserver';
+import resourceUrl from '../../util/makeUrl';
+import mergeOperations from '../../util/shallowMerge';
+import DEFAULT_OPERATIONS from '../MagentoRoute/magentoRoute.gql';
+
+const useLink = (props, passedOperations = {}) => {
+    const { prefetchType: shouldPrefetch, innerRef: originalRef, to } = props;
+    const operations = shouldPrefetch
+        ? mergeOperations(DEFAULT_OPERATIONS, passedOperations)
+        : {};
+
+    const intersectionObserver = useIntersectionObserver();
+    const { resolveUrlQuery } = operations;
+    const generatedRef = useRef();
+    const elementRef =
+        originalRef || !shouldPrefetch ? originalRef : generatedRef;
+    const [runQuery, { called: pageTypeCalled }] = useLazyQuery(
+        resolveUrlQuery
+    );
+    const linkPath = shouldPrefetch ? resourceUrl(to) : null;
+
+    useEffect(() => {
+        if (
+            !shouldPrefetch ||
+            pageTypeCalled ||
+            !runQuery ||
+            !elementRef.current ||
+            !intersectionObserver
+        ) {
+            return;
+        }
+
+        const htmlElement = elementRef.current;
+
+        const onIntersection = entries => {
+            if (entries.some(entry => entry.isIntersecting)) {
+                observer.unobserve(htmlElement);
+
+                runQuery({
+                    variables: { url: linkPath }
+                });
+            }
+        };
+        const observer = new intersectionObserver(onIntersection);
+        observer.observe(htmlElement);
+
+        return () => {
+            if (htmlElement) {
+                observer.unobserve(htmlElement);
+            }
+        };
+    }, [
+        shouldPrefetch,
+        elementRef,
+        pageTypeCalled,
+        linkPath,
+        intersectionObserver,
+        runQuery
+    ]);
+
+    return {
+        ref: elementRef
+    };
+};
+
+export default useLink;

package/lib/talons/MagentoRoute/magentoRoute.gql.js

@@ -2,11 +2,20 @@ import { gql } from '@apollo/client';
 
 export const RESOLVE_URL = gql`
     query ResolveURL($url: String!) {
-        urlResolver(url: $url) {
-            id
+        route(url: $url) {
             relative_url
-            redirectCode
+            redirect_code
             type
+            ... on CmsPage {
+                identifier
+            }
+            ... on ProductInterface {
+                id
+                __typename
+            }
+            ... on CategoryInterface {
+                id
+            }
         }
     }
 `;

package/lib/talons/MagentoRoute/useMagentoRoute.js

@@ -1,12 +1,24 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
-import { useQuery } from '@apollo/client';
-import { useRootComponents } from '@magento/peregrine/lib/context/rootComponents';
-import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import { useLazyQuery } from '@apollo/client';
+import { useRootComponents } from '../../context/rootComponents';
+import mergeOperations from '../../util/shallowMerge';
+import { getComponentData } from '../../util/magentoRouteData';
+import { useAppContext } from '../../context/app';
 
 import { getRootComponent, isRedirect } from './helpers';
 import DEFAULT_OPERATIONS from './magentoRoute.gql';
 
+const getInlinedPageData = () => {
+    return globalThis.INLINED_PAGE_TYPE && globalThis.INLINED_PAGE_TYPE.type
+        ? globalThis.INLINED_PAGE_TYPE
+        : null;
+};
+
+const resetInlinedPageData = () => {
+    globalThis.INLINED_PAGE_TYPE = false;
+};
+
 export const useMagentoRoute = (props = {}) => {
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
     const { resolveUrlQuery } = operations;
@@ -14,6 +26,15 @@ export const useMagentoRoute = (props = {}) => {
     const { pathname } = useLocation();
     const [componentMap, setComponentMap] = useRootComponents();
 
+    const initialized = useRef(false);
+    const fetchedPathname = useRef(null);
+    const fetching = useRef(false);
+
+    const [appState, appApi] = useAppContext();
+    const { actions: appActions } = appApi;
+    const { nextRootComponent } = appState;
+    const { setNextRootComponent, setPageLoading } = appActions;
+
     const setComponent = useCallback(
         (key, value) => {
             setComponentMap(prevMap => new Map(prevMap).set(key, value));
@@ -21,23 +42,55 @@ export const useMagentoRoute = (props = {}) => {
         [setComponentMap]
     );
 
-    const queryResult = useQuery(resolveUrlQuery, {
-        fetchPolicy: 'cache-and-network',
-        nextFetchPolicy: 'cache-first',
-        variables: { url: pathname }
+    const component = componentMap.get(pathname);
+
+    const [runQuery, queryResult] = useLazyQuery(resolveUrlQuery, {
+        onCompleted: async ({ route }) => {
+            fetching.current = false;
+            if (!component) {
+                const { type, ...routeData } = route || {};
+                try {
+                    const rootComponent = await getRootComponent(type);
+                    setComponent(pathname, {
+                        component: rootComponent,
+                        ...getComponentData(routeData),
+                        type
+                    });
+                } catch (error) {
+                    setComponent(pathname, error);
+                }
+            }
+        },
+        onError: () => {
+            fetching.current = false;
+        }
     });
 
+    useEffect(() => {
+        if (initialized.current || !getInlinedPageData()) {
+            fetching.current = true;
+            runQuery({
+                fetchPolicy: 'cache-and-network',
+                nextFetchPolicy: 'cache-first',
+                variables: { url: pathname }
+            });
+            fetchedPathname.current = pathname;
+        }
+    }, [initialized, pathname]); // eslint-disable-line react-hooks/exhaustive-deps
+
     // destructure the query result
-    const { data, error, loading } = queryResult;
-    const { urlResolver } = data || {};
-    const { id, redirectCode, relative_url, type } = urlResolver || {};
+    const { data, error } = queryResult;
+    const { route } = data || {};
+    const { id, redirect_code, relative_url, type } = route || {};
 
     // evaluate both results and determine the response type
-    const component = componentMap.get(pathname);
-    const empty = !urlResolver || !type || id < 1;
-    const redirect = isRedirect(redirectCode);
+    const empty = !route || !type || id < 1;
+    const redirect = isRedirect(redirect_code);
     const fetchError = component instanceof Error && component;
     const routeError = fetchError || error;
+    const isInitialized = initialized.current || !getInlinedPageData();
+
+    let showPageLoader = false;
     let routeData;
 
     if (component && !fetchError) {
@@ -48,32 +101,53 @@ export const useMagentoRoute = (props = {}) => {
         routeData = { hasError: true, routeError };
     } else if (redirect) {
         // REDIRECT
-        routeData = { isRedirect: true, relativeUrl: relative_url };
-    } else if (empty && !loading) {
+        routeData = {
+            isRedirect: true,
+            relativeUrl: relative_url.startsWith('/')
+                ? relative_url
+                : '/' + relative_url
+        };
+    } else if (
+        empty &&
+        fetchedPathname.current === pathname &&
+        !fetching.current
+    ) {
         // NOT FOUND
         routeData = { isNotFound: true };
+    } else if (nextRootComponent) {
+        // LOADING with full page shimmer
+        showPageLoader = true;
+        routeData = { isLoading: true, shimmer: nextRootComponent };
     } else {
         // LOADING
-        routeData = { isLoading: true };
+        const isInitialLoad = !isInitialized;
+        routeData = { isLoading: true, initial: isInitialLoad };
     }
 
-    // fetch a component if necessary
     useEffect(() => {
         (async () => {
-            // don't fetch if we don't have data yet
-            if (loading || empty) return;
-
-            // don't fetch more than once
-            if (component) return;
-
-            try {
-                const component = await getRootComponent(type);
-                setComponent(pathname, { component, id, type });
-            } catch (error) {
-                setComponent(pathname, error);
+            const inlinedData = getInlinedPageData();
+            if (inlinedData) {
+                try {
+                    const componentType = inlinedData.type;
+                    const rootComponent = await getRootComponent(componentType);
+                    setComponent(pathname, {
+                        component: rootComponent,
+                        type: componentType,
+                        ...getComponentData(inlinedData)
+                    });
+                } catch (error) {
+                    setComponent(pathname, error);
+                }
             }
+            initialized.current = true;
         })();
-    }, [component, empty, id, loading, pathname, setComponent, type]);
+
+        return () => {
+            // Unmount
+            resetInlinedPageData();
+        };
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
     // perform a redirect if necesssary
     useEffect(() => {
@@ -82,5 +156,16 @@ export const useMagentoRoute = (props = {}) => {
         }
     }, [pathname, replace, routeData]);
 
+    useEffect(() => {
+        if (component) {
+            // Reset loading shimmer whenever component resolves
+            setNextRootComponent(null);
+        }
+    }, [component, pathname, setNextRootComponent]);
+
+    useEffect(() => {
+        setPageLoading(showPageLoader);
+    }, [showPageLoader, setPageLoading]);
+
     return routeData;
 };

package/lib/talons/MegaMenu/megaMenu.gql.js

@@ -1,4 +1,12 @@
 import { gql } from '@apollo/client';
+export const GET_STORE_CONFIG_DATA = gql`
+    query GetStoreConfigForMegaMenu {
+        storeConfig {
+            id
+            category_url_suffix
+        }
+    }
+`;
 
 export const GET_MEGA_MENU = gql`
     query getMegaMenu {
@@ -11,21 +19,18 @@ export const GET_MEGA_MENU = gql`
                 name
                 position
                 url_path
-                url_suffix
                 children {
                     id
                     include_in_menu
                     name
                     position
                     url_path
-                    url_suffix
                     children {
                         id
                         include_in_menu
                         name
                         position
                         url_path
-                        url_suffix
                     }
                 }
             }
@@ -34,5 +39,6 @@ export const GET_MEGA_MENU = gql`
 `;
 
 export default {
-    getMegaMenuQuery: GET_MEGA_MENU
+    getMegaMenuQuery: GET_MEGA_MENU,
+    getStoreConfigQuery: GET_STORE_CONFIG_DATA
 };

package/lib/talons/MegaMenu/useMegaMenu.js

@@ -1,29 +1,46 @@
-import mergeOperations from '../../util/shallowMerge';
-import DEFAULT_OPERATIONS from './megaMenu.gql';
-import { useQuery } from '@apollo/client';
 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 } = 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.
      *
@@ -40,15 +57,16 @@ export const useMegaMenu = (props = {}) => {
      * @param {MegaMenuCategory} category
      * @returns {boolean}
      */
+
     const isActive = useCallback(
-        ({ url_path, url_suffix }) => {
+        ({ url_path }) => {
             if (!url_path) return false;
 
-            const categoryUrlPath = `/${url_path}${url_suffix || ''}`;
+            const categoryUrlPath = `/${url_path}${categoryUrlSuffix || ''}`;
 
             return location.pathname === categoryUrlPath;
         },
-        [location.pathname]
+        [location.pathname, categoryUrlSuffix]
     );
 
     /**
@@ -106,6 +124,21 @@ export const useMegaMenu = (props = {}) => {
         [isActive]
     );
 
+    const handleClickOutside = e => {
+        if (!props.mainNavRef.current.contains(e.target)) {
+            setSubMenuState(false);
+            setDisableFocus(true);
+        }
+    };
+
+    useEventListener(globalThis, 'mousedown', handleClickOutside);
+    useEventListener(globalThis, 'mouseout', handleClickOutside);
+    useEventListener(globalThis, 'keydown', handleClickOutside);
+
+    const handleSubMenuFocus = useCallback(() => {
+        setSubMenuState(true);
+    }, [setSubMenuState]);
+
     useEffect(() => {
         const activeCategory = findActiveCategory(
             location.pathname,
@@ -119,9 +152,22 @@ export const useMegaMenu = (props = {}) => {
         }
     }, [findActiveCategory, location.pathname, megaMenuData]);
 
+    /**
+     * Sets next root component to show proper loading effect
+     *
+     * @returns {void}
+     */
+    const { setShimmerType } = useInternalLink('category');
+
     return {
         megaMenuData,
-        activeCategoryId
+        activeCategoryId,
+        categoryUrlSuffix,
+        handleClickOutside,
+        subMenuState,
+        disableFocus,
+        handleSubMenuFocus,
+        handleNavigate: setShimmerType
     };
 };
 
@@ -133,8 +179,13 @@ export const useMegaMenu = (props = {}) => {
  * @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 {int} loading whether the regions are loading
- *
+ * @property {int} activeCategoryId returns the currently selected category id.
+ * @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
  */
 
 /**
@@ -146,6 +197,5 @@ export const useMegaMenu = (props = {}) => {
  * @property {String} name - name of the category
  * @property {int} position - value used for sorting
  * @property {String} url_path - URL path for a category
- * @property {String} url_suffix - URL Suffix for the category
  * @property {MegaMenuCategory} children - child category
  */

package/lib/talons/MegaMenu/useMegaMenuItem.js

@@ -0,0 +1,61 @@
+import { useCallback, useMemo, useState } from 'react';
+
+export const useMegaMenuItem = props => {
+    const { category, activeCategoryId, subMenuState, disableFocus } = props;
+
+    const [isFocused, setIsFocused] = useState(false);
+    const isActive = category.id === activeCategoryId;
+
+    const handleCloseSubMenu = useCallback(() => {
+        setIsFocused(false);
+    }, [setIsFocused]);
+
+    const isMenuActive = useMemo(() => {
+        if (!isFocused) {
+            return false;
+        }
+        if (subMenuState) {
+            return true;
+        } else if (disableFocus) {
+            setIsFocused(false);
+        }
+        return false;
+    }, [isFocused, subMenuState, 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) {
+                    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]
+    );
+
+    return {
+        isFocused,
+        isActive,
+        handleCloseSubMenu,
+        isMenuActive,
+        handleKeyDown
+    };
+};

package/lib/talons/MegaMenu/useSubMenu.js

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

package/lib/talons/MiniCart/ProductList/productListFragments.gql.js

@@ -9,7 +9,6 @@ export const ProductListFragment = gql`
                 id
                 name
                 url_key
-                url_suffix
                 thumbnail {
                     url
                 }

package/lib/talons/MiniCart/miniCart.gql.js

@@ -1,14 +1,15 @@
 import { gql } from '@apollo/client';
 
-export const GET_CONFIGURABLE_THUMBNAIL_SOURCE = gql`
-    query getConfigurableThumbnailSource {
+export const GET_STORE_CONFIG_DATA = gql`
+    query getStoreConfigForMiniCart {
         storeConfig {
             id
+            product_url_suffix
             configurable_thumbnail_source
         }
     }
 `;
 
 export default {
-    getConfigurableThumbnailSource: GET_CONFIGURABLE_THUMBNAIL_SOURCE
+    getStoreConfigQuery: GET_STORE_CONFIG_DATA
 };