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

package/lib/talons/Adapter/useAdapter.js

@@ -1,194 +1,41 @@
-import { ApolloLink, createHttpLink } from '@apollo/client';
+import { ApolloLink } from '@apollo/client';
 import { InMemoryCache } from '@apollo/client/cache';
 import { ApolloClient } from '@apollo/client/core';
-import { setContext } from '@apollo/client/link/context';
-import { onError } from '@apollo/client/link/error';
-import { RetryLink } from '@apollo/client/link/retry';
 import { CachePersistor } from 'apollo-cache-persist';
-import getWithPath from 'lodash.get';
-import setWithPath from 'lodash.set';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
-import MutationQueueLink from '@adobe/apollo-link-mutation-queue';
 import attachClient from '@magento/peregrine/lib/Apollo/attachClientToStore';
 import { clearCartDataFromCache } from '@magento/peregrine/lib/Apollo/clearCartDataFromCache';
 import { clearCustomerDataFromCache } from '@magento/peregrine/lib/Apollo/clearCustomerDataFromCache';
 import { CACHE_PERSIST_PREFIX } from '@magento/peregrine/lib/Apollo/constants';
+import getLinks from '@magento/peregrine/lib/Apollo/links';
 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';
+
+const isServer = !globalThis.document;
+const storage = new BrowserPersistence();
+const urlHasStoreCode = process.env.USE_STORE_CODE_IN_URL === 'true';
 
 export const useAdapter = props => {
-    const { origin, store, styles } = props;
+    const { apiUrl, configureLinks, origin, store, styles } = props;
     const storeCode = storage.getItem('store_view_code') || STORE_VIEW_CODE;
     const basename = urlHasStoreCode ? `/${storeCode}` : null;
     const [initialized, setInitialized] = useState(false);
 
-    const apiBase = useMemo(() => new URL('/graphql', origin).toString(), [
-        origin
-    ]);
-
-    const authLink = useMemo(
-        () =>
-            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}` : ''
-                    }
-                };
-            }),
-        []
-    );
-
-    const errorLink = useMemo(
-        () =>
-            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;
-                    }
-                }
-            }),
-        []
-    );
-
-    // 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 = useMemo(
-        () =>
-            createHttpLink({
-                fetch: customFetchToShrinkQuery,
-                useGETForQueries: true,
-                uri: apiBase
-            }),
-        [apiBase]
-    );
-
-    const mutationQueueLink = useMemo(() => new MutationQueueLink(), []);
-
-    const retryLink = useMemo(
-        () =>
-            new RetryLink({
-                delay: {
-                    initial: 300,
-                    max: Infinity,
-                    jitter: true
-                },
-                attempts: {
-                    max: 5,
-                    retryIf: error => error && !isServer && navigator.onLine
-                }
-            }),
-        []
+    const apiBase = useMemo(
+        () => apiUrl || new URL('/graphql', origin).toString(),
+        [apiUrl, origin]
     );
 
-    const storeLink = useMemo(
-        () =>
-            setContext((_, { headers }) => {
-                const storeCurrency =
-                    storage.getItem('store_view_currency') || null;
-                const storeCode =
-                    storage.getItem('store_view_code') || STORE_VIEW_CODE;
+    const apolloLink = useMemo(() => {
+        let links = getLinks(apiBase);
 
-                // return the headers to the context so httpLink can read them
-                return {
-                    headers: {
-                        ...headers,
-                        store: storeCode,
-                        ...(storeCurrency && {
-                            'Content-Currency': storeCurrency
-                        })
-                    }
-                };
-            }),
-        []
-    );
+        if (configureLinks) {
+            links = configureLinks(links, apiBase);
+        }
 
-    const magentoGqlCacheLink = useMemo(() => new MagentoGQLCacheLink(), []);
-
-    const apolloLink = useMemo(
-        () =>
-            ApolloLink.from([
-                // preserve this array order, it's important
-                // as the terminating link, `httpLink` must be last
-                mutationQueueLink,
-                retryLink,
-                authLink,
-                magentoGqlCacheLink,
-                storeLink,
-                errorLink,
-                httpLink
-            ]),
-        [
-            authLink,
-            errorLink,
-            httpLink,
-            magentoGqlCacheLink,
-            mutationQueueLink,
-            retryLink,
-            storeLink
-        ]
-    );
+        return ApolloLink.from(Array.from(links.values()));
+    }, [apiBase, configureLinks]);
 
     const createApolloClient = useCallback((cache, link) => {
         return new ApolloClient({
@@ -222,10 +69,10 @@ export const useAdapter = props => {
 
             // Clear other stores
             for (const store of AVAILABLE_STORE_VIEWS) {
-                if (store.code !== storeCode) {
+                if (store.store_code !== storeCode) {
                     // Get saved data directly from local storage
                     const existingStorePersistor = globalThis.localStorage.getItem(
-                        `${CACHE_PERSIST_PREFIX}-${store.code}`
+                        `${CACHE_PERSIST_PREFIX}-${store.store_code}`
                     );
 
                     // Make sure we have data available
@@ -245,7 +92,10 @@ export const useAdapter = props => {
 
                         storeClient.persistor = isServer
                             ? null
-                            : createCachePersistor(store.code, storeCache);
+                            : createCachePersistor(
+                                  store.store_code,
+                                  storeCache
+                              );
 
                         // Clear other store
                         if (cacheType === 'cart') {
@@ -320,10 +170,6 @@ export const useAdapter = props => {
     };
 };
 
-const isServer = !globalThis.document;
-const storage = new BrowserPersistence();
-const urlHasStoreCode = process.env.USE_STORE_CODE_IN_URL === 'true';
-
 /**
  * To improve initial load time, create an apollo cache object as soon as
  * this module is executed, since it doesn't depend on any component props.
@@ -334,26 +180,3 @@ const preInstantiatedCache = new InMemoryCache({
     possibleTypes: POSSIBLE_TYPES,
     typePolicies
 });
-
-/**
- * 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
- */
-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);
-};

package/lib/talons/AddToCartDialog/addToCartDialog.gql.js

@@ -20,6 +20,10 @@ const GET_PRODUCT_DETAIL = gql`
                             currency
                             value
                         }
+
+                        discount {
+                            amount_off
+                        }
                     }
                 }
                 ... on ConfigurableProduct {
@@ -50,6 +54,10 @@ const GET_PRODUCT_DETAIL = gql`
                                         currency
                                         value
                                     }
+
+                                    discount {
+                                        amount_off
+                                    }
                                 }
                             }
                         }

package/lib/talons/AddToCartDialog/useAddToCartDialog.js

@@ -4,16 +4,20 @@ import { useMutation, useQuery } from '@apollo/client';
 import mergeOperations from '../../util/shallowMerge';
 import { useCartContext } from '../../context/cart';
 import defaultOperations from './addToCartDialog.gql';
+import { useEventingContext } from '../../context/eventing';
 
 export const useAddToCartDialog = props => {
     const { item, onClose } = props;
     const sku = item && item.product.sku;
 
+    const [, { dispatch }] = useEventingContext();
+
     const operations = mergeOperations(defaultOperations, props.operations);
 
     const [userSelectedOptions, setUserSelectedOptions] = useState(new Map());
     const [currentImage, setCurrentImage] = useState();
     const [currentPrice, setCurrentPrice] = useState();
+    const [currentDiscount, setCurrentDiscount] = useState();
 
     const [{ cartId }] = useCartContext();
 
@@ -89,6 +93,11 @@ export const useAddToCartDialog = props => {
                 ? selectedVariant.price_range.maximum_price.final_price
                 : product.price_range.maximum_price.final_price;
 
+            const discount = selectedVariant
+                ? selectedVariant.price_range.maximum_price.discount
+                : product.price_range.maximum_price.discount;
+
+            setCurrentDiscount(discount);
             setCurrentPrice(finalPrice);
         }
     }, [data, selectedOptionsArray.length]);
@@ -108,22 +117,57 @@ export const useAddToCartDialog = props => {
 
     const handleAddToCart = useCallback(async () => {
         try {
+            const quantity = 1;
+
             await addProductToCart({
                 variables: {
                     cartId,
                     cartItem: {
-                        quantity: 1,
+                        quantity,
                         selected_options: selectedOptionsArray,
                         sku
                     }
                 }
             });
 
+            const selectedOptionsLabels =
+                selectedOptionsArray?.map((value, i) => ({
+                    attribute: item.product.configurable_options[i].label,
+                    value:
+                        item.product.configurable_options[i].values.find(
+                            x => x.uid === value
+                        )?.label || null
+                })) || null;
+
+            dispatch({
+                type: 'CART_ADD_ITEM',
+                payload: {
+                    cartId,
+                    sku: item.product.sku,
+                    name: item.product.name,
+                    priceTotal: currentPrice.value,
+                    currencyCode: currentPrice.currency,
+                    discountAmount: currentDiscount.amount_off,
+                    selectedOptions: selectedOptionsLabels,
+                    quantity
+                }
+            });
+
             handleOnClose();
         } catch (error) {
             console.error(error);
         }
-    }, [addProductToCart, cartId, handleOnClose, selectedOptionsArray, sku]);
+    }, [
+        addProductToCart,
+        cartId,
+        currentDiscount,
+        currentPrice,
+        dispatch,
+        handleOnClose,
+        item,
+        selectedOptionsArray,
+        sku
+    ]);
 
     const imageProps = useMemo(() => {
         if (currentImage) {

package/lib/talons/AddressBookPage/useAddressBookPage.js

@@ -6,6 +6,7 @@ import { useUserContext } from '@magento/peregrine/lib/context/user';
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 
 import defaultOperations from './addressBookPage.gql';
+import { useEventingContext } from '../../context/eventing';
 
 /**
  *  A talon to support the functionality of the Address Book page.
@@ -35,7 +36,9 @@ export const useAddressBookPage = (props = {}) => {
             actions: { setPageLoading }
         }
     ] = useAppContext();
-    const [{ isSignedIn }] = useUserContext();
+    const [{ isSignedIn, currentUser }] = useUserContext();
+
+    const [, { dispatch }] = useEventingContext();
 
     const { data: customerAddressesData, loading } = useQuery(
         getCustomerAddressesQuery,
@@ -112,6 +115,14 @@ export const useAddressBookPage = (props = {}) => {
                 awaitRefetchQueries: true
             });
 
+            dispatch({
+                type: 'USER_ADDRESS_DELETE',
+                payload: {
+                    addressId: confirmDeleteAddressId,
+                    user: currentUser
+                }
+            });
+
             setConfirmDeleteAddressId(null);
         } catch {
             return;
@@ -119,7 +130,9 @@ export const useAddressBookPage = (props = {}) => {
     }, [
         confirmDeleteAddressId,
         deleteCustomerAddress,
-        getCustomerAddressesQuery
+        getCustomerAddressesQuery,
+        dispatch,
+        currentUser
     ]);
 
     const handleEditAddress = useCallback(address => {
@@ -139,21 +152,32 @@ export const useAddressBookPage = (props = {}) => {
         async formValues => {
             if (isDialogEditMode) {
                 try {
+                    const address = {
+                        ...formValues,
+                        // Sends value as empty if none are provided
+                        middlename: formValues.middlename || '',
+                        // Cleans up the street array when values are null or undefined
+                        street: formValues.street.filter(e => e)
+                    };
+
                     await updateCustomerAddress({
                         variables: {
                             addressId: formAddress.id,
-                            updated_address: {
-                                ...formValues,
-                                // Sends value as empty if none are provided
-                                middlename: formValues.middlename || '',
-                                // Cleans up the street array when values are null or undefined
-                                street: formValues.street.filter(e => e)
-                            }
+                            updated_address: address
                         },
                         refetchQueries: [{ query: getCustomerAddressesQuery }],
                         awaitRefetchQueries: true
                     });
 
+                    dispatch({
+                        type: 'USER_ADDRESS_EDIT',
+                        payload: {
+                            id: formAddress.id,
+                            address: address,
+                            user: currentUser
+                        }
+                    });
+
                     setIsDialogOpen(false);
                 } catch {
                     // Make sure any errors from the mutations are displayed.
@@ -166,20 +190,29 @@ export const useAddressBookPage = (props = {}) => {
                 }
             } else {
                 try {
+                    const address = {
+                        ...formValues,
+                        // Sends value as empty if none are provided
+                        middlename: formValues.middlename || '',
+                        // Cleans up the street array when values are null or undefined
+                        street: formValues.street.filter(e => e)
+                    };
                     await createCustomerAddress({
                         variables: {
-                            address: {
-                                ...formValues,
-                                // Sends value as empty if none are provided
-                                middlename: formValues.middlename || '',
-                                // Cleans up the street array when values are null or undefined
-                                street: formValues.street.filter(e => e)
-                            }
+                            address
                         },
                         refetchQueries: [{ query: getCustomerAddressesQuery }],
                         awaitRefetchQueries: true
                     });
 
+                    dispatch({
+                        type: 'USER_ADDRESS_CREATE',
+                        payload: {
+                            address,
+                            user: currentUser
+                        }
+                    });
+
                     setIsDialogOpen(false);
                 } catch {
                     // Make sure any errors from the mutations are displayed.
@@ -197,7 +230,9 @@ export const useAddressBookPage = (props = {}) => {
             formAddress,
             getCustomerAddressesQuery,
             isDialogEditMode,
-            updateCustomerAddress
+            updateCustomerAddress,
+            dispatch,
+            currentUser
         ]
     );
 

package/lib/talons/AuthModal/useAuthModal.js

@@ -5,6 +5,7 @@ import { useMutation } from '@apollo/client';
 import mergeOperations from '../../util/shallowMerge';
 import { useUserContext } from '../../context/user';
 import DEFAULT_OPERATIONS from './authModal.gql';
+import { useEventingContext } from '../../context/eventing';
 
 const UNAUTHED_ONLY = ['CREATE_ACCOUNT', 'FORGOT_PASSWORD', 'SIGN_IN'];
 
@@ -52,6 +53,8 @@ export const useAuthModal = props => {
     const [revokeToken] = useMutation(signOutMutation);
     const history = useHistory();
 
+    const [, { dispatch }] = useEventingContext();
+
     // If the user is authed, the only valid view is "MY_ACCOUNT".
     // view an also be `MENU` but in that case we don't want to act.
     useEffect(() => {
@@ -84,6 +87,11 @@ export const useAuthModal = props => {
     const handleSignOut = useCallback(async () => {
         setIsSigningOut(true);
 
+        dispatch({
+            type: 'USER_SIGN_OUT',
+            payload: currentUser
+        });
+
         // Delete cart/user data from the redux store.
         await signOut({ revokeToken });
 
@@ -91,7 +99,7 @@ export const useAuthModal = props => {
         // would be to call apolloClient.resetStore() but that would require
         // a large refactor.
         history.go(0);
-    }, [history, revokeToken, signOut]);
+    }, [history, revokeToken, signOut, dispatch, currentUser]);
 
     return {
         handleCancel,
@@ -102,6 +110,8 @@ export const useAuthModal = props => {
         showCreateAccount,
         showForgotPassword,
         showMyAccount,
-        username
+        username,
+        dispatch,
+        currentUser
     };
 };

package/lib/talons/Breadcrumbs/useBreadcrumbs.js

@@ -57,7 +57,7 @@ export const useBreadcrumbs = props => {
 
     // When we have breadcrumb data sort and normalize it for easy rendering.
     const normalizedData = useMemo(() => {
-        if (!loading && data) {
+        if (!loading && data && data.categories.items.length) {
             const breadcrumbData = data.categories.items[0].breadcrumbs;
 
             return (
@@ -79,9 +79,14 @@ export const useBreadcrumbs = props => {
     const { setShimmerType } = useInternalLink('category');
 
     return {
-        currentCategory: (data && data.categories.items[0].name) || '',
+        currentCategory:
+            (data &&
+                data.categories.items.length &&
+                data.categories.items[0].name) ||
+            '',
         currentCategoryPath:
             (data &&
+                data.categories.items.length &&
                 `${data.categories.items[0].url_path}${categoryUrlSuffix ||
                     ''}`) ||
             '#',

package/lib/talons/CartPage/ProductListing/EditModal/__fixtures__/configurableProduct.js

@@ -6,11 +6,33 @@ export const configurableItemResponse = {
                     configurable_options: [
                         {
                             attribute_id: '123',
-                            attribute_code: 'color'
+                            attribute_code: 'color',
+                            label: 'Color',
+                            values: [
+                                {
+                                    label: 'Lilac',
+                                    value_index: 1
+                                },
+                                {
+                                    label: 'Red',
+                                    value_index: 2
+                                }
+                            ]
                         },
                         {
                             attribute_id: '456',
-                            attribute_code: 'size'
+                            attribute_code: 'size',
+                            label: 'Red',
+                            values: [
+                                {
+                                    label: 'XS',
+                                    value_index: 1
+                                },
+                                {
+                                    label: 'S',
+                                    value_index: 2
+                                }
+                            ]
                         }
                     ],
                     variants: [
@@ -80,11 +102,24 @@ export const configurableItemResponse = {
 };
 
 export const cartItem = {
-    configurable_options: [{ id: 123, value_id: 1 }, { id: 456, value_id: 1 }],
+    configurable_options: [
+        { id: 123, value_id: 1, option_label: 'Color', value_label: 'Pink' },
+        { id: 456, value_id: 1, option_label: 'Size', value_label: 'XS' }
+    ],
     id: 123,
     uid: 'NDA=',
     product: {
-        sku: 'SP01'
+        sku: 'SP01',
+        name: 'Product Name'
+    },
+    prices: {
+        price: {
+            value: 9.99,
+            currency: 'USD'
+        },
+        total_item_discount: {
+            value: 5
+        }
     },
     quantity: 5
 };