@magento/peregrine 12.4.0-alpha.1 → 12.5.0-alpha.1

package/lib/Apollo/links/authLink.js

@@ -0,0 +1,19 @@
+import { setContext } from '@apollo/client/link/context';
+import { BrowserPersistence } from '@magento/peregrine/lib/util';
+
+const storage = new BrowserPersistence();
+
+export default function createAuthLink() {
+    return setContext((_, { headers }) => {
+        // get the authentication token from local storage if it exists.
+        const token = storage.getItem('signin_token');
+
+        // return the headers to the context so httpLink can read them
+        return {
+            headers: {
+                ...headers,
+                authorization: token ? `Bearer ${token}` : ''
+            }
+        };
+    });
+}

package/lib/Apollo/links/errorLink.js

@@ -0,0 +1,64 @@
+import { onError } from '@apollo/client/link/error';
+import getWithPath from 'lodash.get';
+import setWithPath from 'lodash.set';
+
+export default function createErrorLink() {
+    return onError(handler => {
+        const { graphQLErrors, networkError, response } = handler;
+
+        if (graphQLErrors) {
+            graphQLErrors.forEach(({ message, locations, path }) =>
+                console.log(
+                    `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
+                )
+            );
+        }
+
+        if (networkError) {
+            console.log(`[Network error]: ${networkError}`);
+        }
+
+        if (response) {
+            const { data, errors } = response;
+            let pathToCartItems;
+
+            // It's within the GraphQL spec to receive data and errors, where
+            // errors are merely informational and not intended to block. Almost
+            // all existing components were not built with this in mind, so we
+            // build special handling of this error message so we can deal with
+            // it at the time we deem appropriate.
+            errors.forEach(({ message, path }, index) => {
+                if (
+                    message === 'Some of the products are out of stock.' ||
+                    message ===
+                        'There are no source items with the in stock status' ||
+                    message === 'The requested qty is not available'
+                ) {
+                    if (!pathToCartItems) {
+                        pathToCartItems = path.slice(0, -1);
+                    }
+
+                    // Set the error to null to be cleaned up later
+                    response.errors[index] = null;
+                }
+            });
+
+            // indicator that we have some cleanup to perform on the response
+            if (pathToCartItems) {
+                const cartItems = getWithPath(data, pathToCartItems);
+                const filteredCartItems = cartItems.filter(
+                    cartItem => cartItem !== null
+                );
+                setWithPath(data, pathToCartItems, filteredCartItems);
+
+                const filteredErrors = response.errors.filter(
+                    error => error !== null
+                );
+                // If all errors were stock related and set to null, reset the error response so it doesn't throw
+                response.errors = filteredErrors.length
+                    ? filteredErrors
+                    : undefined;
+            }
+        }
+    });
+}

package/lib/Apollo/links/gqlCacheLink.js

@@ -0,0 +1,63 @@
+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 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);
+    }
+}
+
+export default function createGqlCacheLink() {
+    return new MagentoGQLCacheLink();
+}

package/lib/Apollo/links/index.js

@@ -0,0 +1,66 @@
+import { createHttpLink } from '@apollo/client';
+
+import createAuthLink from '@magento/peregrine/lib/Apollo/links/authLink';
+import createErrorLink from '@magento/peregrine/lib/Apollo/links/errorLink';
+import createGqlCacheLink from '@magento/peregrine/lib/Apollo/links/gqlCacheLink';
+import createMutationQueueLink from '@magento/peregrine/lib/Apollo/links/mutationQueueLink';
+import createRetryLink from '@magento/peregrine/lib/Apollo/links/retryLink';
+import createStoreLink from '@magento/peregrine/lib/Apollo/links/storeLink';
+import shrinkQuery from '@magento/peregrine/lib/util/shrinkQuery';
+
+/**
+ * Intercept and shrink URLs from GET queries.
+ *
+ * Using GET makes it possible to use edge caching in Magento Cloud, but risks
+ * exceeding URL limits with default usage of Apollo's http link.
+ *
+ * `shrinkQuery` encodes the URL in a more efficient way.
+ *
+ * @param {*} uri
+ * @param {*} options
+ */
+export const customFetchToShrinkQuery = (uri, options) => {
+    // TODO: add `ismorphic-fetch` or equivalent to avoid this error
+    if (typeof globalThis.fetch !== 'function') {
+        console.error('This environment does not define `fetch`.');
+        return () => {};
+    }
+
+    const resource = options.method === 'GET' ? shrinkQuery(uri) : uri;
+
+    return globalThis.fetch(resource, options);
+};
+
+const getLinks = apiBase => {
+    const authLink = createAuthLink();
+    const storeLink = createStoreLink();
+    const errorLink = createErrorLink();
+    const retryLink = createRetryLink();
+    const gqlCacheLink = createGqlCacheLink();
+    const mutationQueueLink = createMutationQueueLink();
+
+    // Warning: `useGETForQueries` risks exceeding URL length limits.
+    // These limits in practice are typically set at or behind where TLS
+    // terminates. For Magento Cloud & Fastly, 8kb is the maximum by default.
+    // https://docs.fastly.com/en/guides/resource-limits#request-and-response-limits
+    const httpLink = createHttpLink({
+        fetch: customFetchToShrinkQuery,
+        useGETForQueries: true,
+        uri: apiBase
+    });
+
+    // preserve this array order, it's important
+    // as the terminating link, `httpLink` must be last
+    const links = new Map()
+        .set('MUTATION_QUEUE', mutationQueueLink)
+        .set('RETRY', retryLink)
+        .set('AUTH', authLink)
+        .set('GQL_CACHE', gqlCacheLink)
+        .set('STORE', storeLink)
+        .set('ERROR', errorLink)
+        .set('HTTP', httpLink);
+
+    return links;
+};
+
+export default getLinks;

package/lib/Apollo/links/mutationQueueLink.js

@@ -0,0 +1,5 @@
+import MutationQueueLink from '@adobe/apollo-link-mutation-queue';
+
+export default function createMutationQueueLink() {
+    return new MutationQueueLink();
+}

package/lib/Apollo/links/retryLink.js

@@ -0,0 +1,17 @@
+import { RetryLink } from '@apollo/client/link/retry';
+
+const isServer = !globalThis.document;
+
+export default function createRetryLink() {
+    return new RetryLink({
+        delay: {
+            initial: 300,
+            max: Infinity,
+            jitter: true
+        },
+        attempts: {
+            max: 5,
+            retryIf: error => error && !isServer && navigator.onLine
+        }
+    });
+}

package/lib/Apollo/links/storeLink.js

@@ -0,0 +1,22 @@
+import { setContext } from '@apollo/client/link/context';
+import { BrowserPersistence } from '@magento/peregrine/lib/util';
+
+const storage = new BrowserPersistence();
+
+export default function createStoreLink() {
+    return setContext((_, { headers }) => {
+        const storeCurrency = storage.getItem('store_view_currency') || null;
+        const storeCode = storage.getItem('store_view_code') || STORE_VIEW_CODE;
+
+        // return the headers to the context so httpLink can read them
+        return {
+            headers: {
+                ...headers,
+                store: storeCode,
+                ...(storeCurrency && {
+                    'Content-Currency': storeCurrency
+                })
+            }
+        };
+    });
+}

package/lib/Apollo/magentoGqlCacheLink.js

@@ -1,59 +1,3 @@
-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);
-    }
-}
+export {
+    MagentoGQLCacheLink as default
+} from '@magento/peregrine/lib/Apollo/links/gqlCacheLink';

package/lib/PeregrineContextProvider/peregrineContextProvider.js

@@ -5,6 +5,7 @@ import CartContextProvider from '../context/cart';
 import CatalogContextProvider from '../context/catalog';
 import CheckoutContextProvider from '../context/checkout';
 import ErrorContextProvider from '../context/unhandledErrors';
+import EventingContextProvider from '../context/eventing';
 import RootComponentsProvider from '../context/rootComponents';
 import UserContextProvider from '../context/user';
 
@@ -15,6 +16,7 @@ import UserContextProvider from '../context/user';
  */
 const contextProviders = [
     ErrorContextProvider,
+    EventingContextProvider,
     AppContextProvider,
     UserContextProvider,
     CatalogContextProvider,

package/lib/context/eventing.js

@@ -0,0 +1,57 @@
+import React, {
+    createContext,
+    useCallback,
+    useContext,
+    useMemo,
+    useRef
+} from 'react';
+import { Observable } from 'zen-observable-ts';
+
+const EVENT_NAME = 'eventing';
+const EventingContext = createContext();
+
+const EventingContextProvider = props => {
+    const { children } = props;
+    const cacheRef = useRef([]);
+
+    const state = useMemo(
+        () =>
+            new Observable(observer => {
+                for (const element of cacheRef.current) {
+                    observer.next(element);
+                }
+
+                document.addEventListener(EVENT_NAME, event => {
+                    observer.next(event.detail);
+                });
+            }),
+        []
+    );
+
+    const dispatch = useCallback(detail => {
+        const event = new CustomEvent(EVENT_NAME, { detail });
+
+        cacheRef.current.push(detail);
+        document.dispatchEvent(event);
+    }, []);
+
+    const contextValue = useMemo(
+        () => [
+            state,
+            {
+                dispatch,
+                subscribe: state.subscribe
+            }
+        ],
+        [dispatch, state]
+    );
+
+    return (
+        <EventingContext.Provider value={contextValue}>
+            {children}
+        </EventingContext.Provider>
+    );
+};
+
+export default EventingContextProvider;
+export const useEventingContext = () => useContext(EventingContext);

package/lib/hooks/useDelayedTransition.js

@@ -44,7 +44,7 @@ const useDelayedTransition = () => {
 
             if (process.env.USE_STORE_CODE_IN_URL === 'true') {
                 const storeCodes = AVAILABLE_STORE_VIEWS.map(
-                    store => `\/?${store.code}`
+                    store => `\/?${store.store_code}`
                 ).join('|');
                 const regex = new RegExp(`^${storeCodes}`);
                 currentPath = currentPath.replace(regex, '');

package/lib/talons/AccountInformationPage/useAccountInformationPage.js

@@ -2,6 +2,7 @@ import { useCallback, useMemo, useState } from 'react';
 import { useMutation, useQuery } from '@apollo/client';
 import { useUserContext } from '../../context/user';
 import { useGoogleReCaptcha } from '../../hooks/useGoogleReCaptcha';
+import { useEventingContext } from '../../context/eventing';
 
 export const useAccountInformationPage = props => {
     const {
@@ -17,6 +18,8 @@ export const useAccountInformationPage = props => {
 
     const [isUpdateMode, setIsUpdateMode] = useState(false);
 
+    const [, { dispatch }] = useEventingContext();
+
     // Use local state to determine whether to display errors or not.
     // Could be replaced by a "reset mutation" function from apollo client.
     // https://github.com/apollographql/apollo-feature-requests/issues/170
@@ -116,6 +119,16 @@ export const useAccountInformationPage = props => {
                         ...recaptchaDataForChangeCustomerPassword
                     });
                 }
+
+                dispatch({
+                    type: 'USER_ACCOUNT_UPDATE',
+                    payload: {
+                        email,
+                        firstName: firstname,
+                        lastName: lastname
+                    }
+                });
+
                 // After submission, close the form if there were no errors.
                 handleCancel(false);
             } catch {
@@ -133,7 +146,8 @@ export const useAccountInformationPage = props => {
             handleCancel,
             setCustomerInformation,
             generateReCaptchaData,
-            changeCustomerPassword
+            changeCustomerPassword,
+            dispatch
         ]
     );