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

package/lib/Apollo/magentoGqlCacheLink.js

@@ -0,0 +1,59 @@
+import { ApolloLink } from '@apollo/client';
+import { BrowserPersistence } from '@magento/peregrine/lib/util';
+
+// The name of the header to exchange with the server.
+const CACHE_ID_HEADER = 'x-magento-cache-id';
+// The key in local storage where we save the cache id
+const LOCAL_STORAGE_KEY = 'magento_cache_id';
+const storage = new BrowserPersistence();
+
+/**
+ * The Magento GraphQL Cache Link class is an ApolloLink that is responsible for
+ * Venia sending the proper `x-magento-cache-id` header with each of its GraphQL requests.
+ */
+export default class MagentoGQLCacheLink extends ApolloLink {
+    // The links get reinstantiated on refresh.
+    // If we have an existing cache id value from a previous browsing session, use it.
+    #cacheId = storage.getItem(LOCAL_STORAGE_KEY) || null;
+
+    // Any time the cache id needs to be set, update both our internal variable and
+    // the value in local storage.
+    setCacheId(value) {
+        this.#cacheId = value;
+        storage.setItem(LOCAL_STORAGE_KEY, value);
+    }
+
+    request(operation, forward) {
+        // Attach the cache header to each outgoing request.
+        operation.setContext(previousContext => {
+            const { headers } = previousContext;
+            const withCacheHeader = {
+                ...headers,
+                [CACHE_ID_HEADER]: this.#cacheId
+            };
+
+            return {
+                ...previousContext,
+                headers: withCacheHeader
+            };
+        });
+
+        // Update the cache id from each response.
+        const updateCacheId = data => {
+            const context = operation.getContext();
+            const { response } = context;
+
+            const responseCacheId = response.headers.get(CACHE_ID_HEADER);
+
+            if (responseCacheId) {
+                this.setCacheId(responseCacheId);
+            }
+
+            // Purposefully don't modify the result,
+            // no other link needs to know about the cache id.
+            return data;
+        };
+
+        return forward(operation).map(updateCacheId);
+    }
+}

package/lib/List/item.js

@@ -35,15 +35,18 @@ const Item = props => {
     ]);
     const onFocus = useCallback(() => setFocus(key), [key, setFocus]);
 
-    const customProps = {
-        classes,
-        hasFocus,
-        isSelected,
-        item,
-        itemIndex,
-        onClick,
-        onFocus
-    };
+    const customProps = useMemo(
+        () => ({
+            classes,
+            hasFocus,
+            isSelected,
+            item,
+            itemIndex,
+            onClick,
+            onFocus
+        }),
+        [classes, hasFocus, isSelected, item, itemIndex, onClick, onFocus]
+    );
 
     const Root = useMemo(
         () => fromRenderProp(render, Object.keys(customProps)),

package/lib/List/list.js

@@ -37,13 +37,16 @@ const List = props => {
         ...restProps
     } = props;
 
-    const customProps = {
-        classes,
-        getItemKey,
-        items,
-        onSelectionChange,
-        selectionModel
-    };
+    const customProps = useMemo(
+        () => ({
+            classes,
+            getItemKey,
+            items,
+            onSelectionChange,
+            selectionModel
+        }),
+        [classes, getItemKey, items, onSelectionChange, selectionModel]
+    );
 
     const handleSelectionChange = useCallback(
         selection => {

package/lib/Price/price.js

@@ -15,7 +15,6 @@ import { useIntl } from 'react-intl';
  * [polyfill]: https://www.npmjs.com/package/intl
  * [Intl.NumberFormat.prototype.formatToParts]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/formatToParts
  */
-
 const Price = props => {
     const { locale } = useIntl();
     const { value, currencyCode, classes } = props;

package/lib/context/cart.js

@@ -36,12 +36,6 @@ const CartContextProvider = props => {
         }
     }, [cartState]);
 
-    const derivedCartState = {
-        ...cartState,
-        isEmpty: isCartEmpty(cartState),
-        derivedDetails
-    };
-
     const cartApi = useMemo(
         () => ({
             actions,
@@ -50,10 +44,15 @@ const CartContextProvider = props => {
         [actions, asyncActions]
     );
 
-    const contextValue = useMemo(() => [derivedCartState, cartApi], [
-        cartApi,
-        derivedCartState
-    ]);
+    const contextValue = useMemo(() => {
+        const derivedCartState = {
+            ...cartState,
+            isEmpty: isCartEmpty(cartState),
+            derivedDetails
+        };
+
+        return [derivedCartState, cartApi];
+    }, [cartApi, cartState, derivedDetails]);
 
     const [fetchCartId] = useMutation(CREATE_CART_MUTATION);
     const fetchCartDetails = useAwaitQuery(CART_DETAILS_QUERY);

package/lib/hooks/hook-wrappers/useInformedFieldStateWrapper.js

@@ -0,0 +1,27 @@
+import { useState, useEffect } from 'react';
+import { useFieldState } from 'informed';
+
+const useInformedFieldStateWrapper = field => {
+    const [isInitialRender, setIsInitialRender] = useState(true);
+    const warn = console.warn;
+    // Temporarily override console warn to remove false positive warning from useFieldState
+    const regex = /^Attempting to get field (.*) but it does not exist$/g;
+    if (isInitialRender) {
+        console.warn = err => {
+            if (!err.match(regex)) {
+                warn(err);
+            }
+        };
+    }
+    useEffect(() => {
+        setIsInitialRender(false);
+    }, []);
+    const fieldState = useFieldState(field);
+    if (isInitialRender) {
+        console.warn = warn;
+    }
+
+    return fieldState;
+};
+
+export default useInformedFieldStateWrapper;

package/lib/hooks/useDelayedTransition.js

@@ -0,0 +1,127 @@
+import { useEffect, useRef } from 'react';
+import { matchPath } from 'react-router';
+import { useHistory, useLocation } from 'react-router-dom';
+import { useApolloClient } from '@apollo/client';
+
+import { availableRoutes } from '@magento/venia-ui/lib/components/Routes/routes';
+
+import { useAppContext } from '../context/app';
+import { useRootComponents } from '../context/rootComponents';
+import mergeOperations from '../util/shallowMerge';
+import { getComponentData } from '../util/magentoRouteData';
+import DEFAULT_OPERATIONS from '../talons/MagentoRoute/magentoRoute.gql';
+import { getRootComponent } from '../talons/MagentoRoute/helpers';
+
+const DELAY_MESSAGE_PREFIX = 'DELAY:';
+
+const useDelayedTransition = () => {
+    const { pathname } = useLocation();
+    const history = useHistory();
+    const client = useApolloClient();
+    const operations = mergeOperations(DEFAULT_OPERATIONS);
+    const { resolveUrlQuery } = operations;
+    const [, setComponentMap] = useRootComponents();
+    const [, appApi] = useAppContext();
+    const { actions: appActions } = appApi;
+    const { setPageLoading } = appActions;
+    const unblock = useRef();
+
+    useEffect(() => {
+        // Override globalThis.addEventListener to prevent binding beforeunload while we add our blocker
+        const originalWindowAddEventListener = globalThis.addEventListener;
+        globalThis.addEventListener = (type, listener, options) => {
+            if (type === 'beforeunload') {
+                return;
+            }
+
+            if (typeof originalWindowAddEventListener === 'function') {
+                return originalWindowAddEventListener(type, listener, options);
+            }
+        };
+
+        unblock.current = history.block(location => {
+            let currentPath = pathname;
+
+            if (process.env.USE_STORE_CODE_IN_URL === 'true') {
+                const storeCodes = AVAILABLE_STORE_VIEWS.map(
+                    store => `\/?${store.code}`
+                ).join('|');
+                const regex = new RegExp(`^${storeCodes}`);
+                currentPath = currentPath.replace(regex, '');
+            }
+
+            // Ignore query string changes
+            if (location.pathname === currentPath) {
+                return true;
+            }
+
+            // Ignore hardcoded routes
+            const isInternalRoute = availableRoutes.some(
+                ({ pattern: path, exact }) => {
+                    return !!matchPath(location.pathname, {
+                        path,
+                        exact
+                    });
+                }
+            );
+            if (isInternalRoute) {
+                return true;
+            }
+
+            return `${DELAY_MESSAGE_PREFIX}${location.pathname}`;
+        });
+
+        globalThis.addEventListener = originalWindowAddEventListener;
+
+        return () => {
+            if (typeof unblock.current === 'function') {
+                unblock.current();
+            }
+        };
+    }, [pathname, history]);
+
+    useEffect(() => {
+        globalThis.handleRouteChangeConfirmation = async (message, proceed) => {
+            if (globalThis.avoidDelayedTransition) {
+                globalThis.avoidDelayedTransition = false;
+                if (typeof unblock.current === 'function') {
+                    unblock.current();
+                }
+                return proceed(true);
+            }
+
+            setPageLoading(true);
+            const currentPathname = message.replace(DELAY_MESSAGE_PREFIX, '');
+
+            const queryResult = await client.query({
+                query: resolveUrlQuery,
+                fetchPolicy: 'cache-first',
+                nextFetchPolicy: 'cache-first',
+                variables: { url: currentPathname }
+            });
+
+            const { data } = queryResult;
+            const { route } = data || {};
+            const { type, ...routeData } = route || {};
+
+            if (type) {
+                const rootComponent = await getRootComponent(type);
+                setComponentMap(prevMap =>
+                    new Map(prevMap).set(currentPathname, {
+                        component: rootComponent,
+                        ...getComponentData(routeData),
+                        type
+                    })
+                );
+            }
+
+            setPageLoading(false);
+            if (typeof unblock.current === 'function') {
+                unblock.current();
+            }
+            proceed(true);
+        };
+    }, [client, resolveUrlQuery, setComponentMap, setPageLoading]);
+};
+
+export default useDelayedTransition;

package/lib/hooks/useDetectScrollWidth.js

@@ -0,0 +1,77 @@
+import { useLayoutEffect } from 'react';
+import { makeVar } from '@apollo/client';
+
+/**
+ * A hook that will detect if there is a scrollbar will be added to the viewport and
+ * will add its width value as a `--global-scrollbar-width` custom property to the body element,
+ * which can be used to calculate the full width of the viewport.
+ */
+
+// Check if the browser will add a scrollbar to the viewport
+const getScrollBarWidth = () => {
+    const innerElement = document.createElement('div');
+    innerElement.style.cssText = 'width:100%;height:200px';
+
+    const outerElement = document.createElement('div');
+    outerElement.style.cssText =
+        'position:absolute;top:-50px;left:0px;visibility:hidden;width:50px;height:50px;overflow:hidden';
+    outerElement.appendChild(innerElement);
+    document.body.appendChild(outerElement);
+    const widthWithoutScroll = innerElement.offsetWidth;
+    outerElement.style.overflow = 'scroll';
+    let widthWithScroll = innerElement.offsetWidth;
+    if (widthWithoutScroll === widthWithScroll)
+        widthWithScroll = innerElement.clientWidth;
+
+    document.body.removeChild(outerElement);
+
+    return widthWithoutScroll - widthWithScroll;
+};
+
+// Watching for body height changes, and setting custom property with scrollbar width, when scrollbar is present.
+const createObserver = scrollBarWidth => {
+    return new globalThis.ResizeObserver(entries => {
+        for (const entry of entries) {
+            if (entry.target.scrollHeight > globalThis.innerHeight) {
+                entry.target.style.setProperty(
+                    '--global-scrollbar-width',
+                    `${scrollBarWidth}px`
+                );
+            } else {
+                entry.target.style.setProperty(
+                    '--global-scrollbar-width',
+                    '0px'
+                );
+            }
+        }
+    });
+};
+// Using Apollo reactive var to store observer status, in order to add observer only once.
+const isObserverActive = makeVar(false);
+
+export const useDetectScrollWidth = () => {
+    useLayoutEffect(() => {
+        if (isObserverActive()) {
+            return;
+        }
+        const scrollBarWidth = getScrollBarWidth();
+        const observer =
+            typeof globalThis.ResizeObserver !== 'undefined' &&
+            scrollBarWidth !== 0
+                ? createObserver(scrollBarWidth)
+                : null;
+
+        if (observer) {
+            observer.observe(document.body);
+            isObserverActive(true);
+        }
+
+        return () => {
+            if (observer) {
+                observer.disconnect();
+                document.body.style.removeProperty('--global-scrollbar-width');
+                isObserverActive(false);
+            }
+        };
+    }, []);
+};

package/lib/hooks/useInternalLink.js

@@ -0,0 +1,21 @@
+import { useCallback } from 'react';
+import { useAppContext } from '../context/app';
+
+export const SHIMMER_TYPE_SUFFIX = '_SHIMMER';
+
+export default rootType => {
+    const [, appApi] = useAppContext();
+    const { actions: appActions } = appApi;
+    const { setNextRootComponent } = appActions;
+
+    const type = `${rootType.toUpperCase()}${SHIMMER_TYPE_SUFFIX}`;
+
+    const setShimmerType = useCallback(() => {
+        globalThis.avoidDelayedTransition = true;
+        setNextRootComponent(type);
+    }, [setNextRootComponent, type]);
+
+    return {
+        setShimmerType
+    };
+};

package/lib/hooks/useIntersectionObserver.js

@@ -0,0 +1,7 @@
+export default () => {
+    if (typeof IntersectionObserver === 'undefined') {
+        return;
+    }
+
+    return IntersectionObserver;
+};

package/lib/hooks/useIsInViewport.js

@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react';
+
+import useIntersectionObserver from '@magento/peregrine/lib/hooks/useIntersectionObserver';
+
+export const useIsInViewport = props => {
+    const { elementRef, renderOnce = true } = props;
+    const intersectionObserver = useIntersectionObserver();
+    const [isInViewport, setIsInViewport] = useState(false);
+
+    useEffect(() => {
+        if (!elementRef || !elementRef.current || !intersectionObserver) {
+            setIsInViewport(true);
+
+            return null;
+        }
+
+        // Prevent init if already rendered once
+        if (isInViewport && renderOnce) {
+            return null;
+        }
+
+        const htmlElement = elementRef.current;
+        const elementObserver = new IntersectionObserver(
+            (entries, observer) => {
+                const isIntersecting =
+                    entries.some(entry => entry.isIntersecting) === true;
+                setIsInViewport(isIntersecting);
+
+                // Stop observing if already rendered once
+                if (isIntersecting && renderOnce) {
+                    observer.unobserve(htmlElement);
+                }
+            }
+        );
+
+        elementObserver.observe(htmlElement);
+
+        return () => {
+            elementObserver.unobserve(htmlElement);
+        };
+    }, [elementRef, intersectionObserver, isInViewport, renderOnce]);
+
+    return isInViewport;
+};

package/lib/store/actions/app/actions.js

@@ -8,7 +8,8 @@ const actionTypes = [
     'TOGGLE_SEARCH',
     'EXECUTE_SEARCH',
     'MARK_ERROR_HANDLED',
-    'SET_PAGE_LOADING'
+    'SET_PAGE_LOADING',
+    'SET_NEXT_ROOT_COMPONENT'
 ];
 
 export default createActions(...actionTypes, { prefix });

package/lib/store/reducers/app.js

@@ -16,7 +16,8 @@ const initialState = {
     isPageLoading: false,
     overlay: false,
     pending: {},
-    searchOpen: false
+    searchOpen: false,
+    nextRootComponent: null
 };
 
 const reducerMap = {
@@ -51,6 +52,12 @@ const reducerMap = {
             ...state,
             isPageLoading: !!payload
         };
+    },
+    [actions.setNextRootComponent]: (state, { payload }) => {
+        return {
+            ...state,
+            nextRootComponent: payload
+        };
     }
 };
 

package/lib/talons/AccountInformationPage/useAccountInformationPage.js

@@ -136,7 +136,6 @@ export const useAccountInformationPage = props => {
         initialValues,
         isDisabled: isUpdatingCustomerInformation || isChangingCustomerPassword,
         isUpdateMode,
-        isSignedIn,
         loadDataError,
         shouldShowNewPassword,
         showUpdateMode

package/lib/talons/Adapter/useAdapter.js

@@ -7,12 +7,13 @@ import { RetryLink } from '@apollo/client/link/retry';
 import { CachePersistor } from 'apollo-cache-persist';
 import getWithPath from 'lodash.get';
 import setWithPath from 'lodash.set';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState, useCallback } from 'react';
 
 import MutationQueueLink from '@adobe/apollo-link-mutation-queue';
 import attachClient from '@magento/peregrine/lib/Apollo/attachClientToStore';
 import { CACHE_PERSIST_PREFIX } from '@magento/peregrine/lib/Apollo/constants';
 import typePolicies from '@magento/peregrine/lib/Apollo/policies';
+import MagentoGQLCacheLink from '@magento/peregrine/lib/Apollo/magentoGqlCacheLink';
 import { BrowserPersistence } from '@magento/peregrine/lib/util';
 import shrinkQuery from '@magento/peregrine/lib/util/shrinkQuery';
 
@@ -160,6 +161,8 @@ export const useAdapter = props => {
         []
     );
 
+    const magentoGqlCacheLink = useMemo(() => new MagentoGQLCacheLink(), []);
+
     const apolloLink = useMemo(
         () =>
             ApolloLink.from([
@@ -168,11 +171,20 @@ export const useAdapter = props => {
                 mutationQueueLink,
                 retryLink,
                 authLink,
+                magentoGqlCacheLink,
                 storeLink,
                 errorLink,
                 httpLink
             ]),
-        [authLink, errorLink, httpLink, mutationQueueLink, retryLink, storeLink]
+        [
+            authLink,
+            errorLink,
+            httpLink,
+            magentoGqlCacheLink,
+            mutationQueueLink,
+            retryLink,
+            storeLink
+        ]
     );
 
     const apolloClient = useMemo(() => {
@@ -199,9 +211,17 @@ export const useAdapter = props => {
         return client;
     }, [apiBase, apolloLink]);
 
+    const getUserConfirmation = useCallback(async (message, callback) => {
+        if (typeof globalThis.handleRouteChangeConfirmation === 'function') {
+            return globalThis.handleRouteChangeConfirmation(message, callback);
+        }
+
+        return callback(globalThis.confirm(message));
+    }, []);
+
     const apolloProps = { client: apolloClient };
     const reduxProps = { store };
-    const routerProps = { basename };
+    const routerProps = { basename, getUserConfirmation };
     const styleProps = { initialState: styles };
 
     // perform blocking async work here

package/lib/talons/AddressBookPage/useAddressBookPage.js

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useHistory } from 'react-router-dom';
 import { useMutation, useQuery } from '@apollo/client';
 
 import { useAppContext } from '@magento/peregrine/lib/context/app';
@@ -38,8 +37,6 @@ export const useAddressBookPage = (props = {}) => {
     ] = useAppContext();
     const [{ isSignedIn }] = useUserContext();
 
-    const history = useHistory();
-
     const { data: customerAddressesData, loading } = useQuery(
         getCustomerAddressesQuery,
         {
@@ -85,13 +82,6 @@ export const useAddressBookPage = (props = {}) => {
     // https://github.com/apollographql/apollo-feature-requests/issues/170
     const [displayError, setDisplayError] = useState(false);
 
-    // If the user is no longer signed in, redirect to the home page.
-    useEffect(() => {
-        if (!isSignedIn) {
-            history.push('/');
-        }
-    }, [history, isSignedIn]);
-
     // Update the page indicator if the GraphQL query is in flight.
     useEffect(() => {
         setPageLoading(isRefetching);

package/lib/talons/Breadcrumbs/breadcrumbs.gql.js

@@ -1,5 +1,14 @@
 import { gql } from '@apollo/client';
 
+export const GET_STORE_CONFIG_DATA = gql`
+    query GetStoreConfigForBreadcrumbs {
+        storeConfig {
+            id
+            category_url_suffix
+        }
+    }
+`;
+
 export const GET_BREADCRUMBS = gql`
     query GetBreadcrumbs($category_id: Int!) {
         category(id: $category_id) {
@@ -13,11 +22,11 @@ export const GET_BREADCRUMBS = gql`
             id
             name
             url_path
-            url_suffix
         }
     }
 `;
 
 export default {
-    getBreadcrumbsQuery: GET_BREADCRUMBS
+    getBreadcrumbsQuery: GET_BREADCRUMBS,
+    getStoreConfigQuery: GET_STORE_CONFIG_DATA
 };