@magento/peregrine 12.0.0 → 12.2.0-alpha.1

package/lib/Apollo/clearCartDataFromCache.js

@@ -1,19 +1,18 @@
-import { deleteCacheEntry } from './deleteCacheEntry';
-
 /**
- * Deletes all references to Cart from the apollo cache including entries that
- * start with "$" which were automatically created by Apollo InMemoryCache.
+ * Deletes all references to Cart from the apollo cache
  *
  * @param {ApolloClient} client
  */
 export const clearCartDataFromCache = async client => {
-    await deleteCacheEntry(client, key => key.match(/^\$?Cart/));
+    // Cached data
+    client.cache.evict({ id: 'Cart' });
+    // Cached ROOT_QUERY
+    client.cache.evict({ fieldName: 'cart' });
+    client.cache.evict({ fieldName: 'customerCart' });
+
+    client.cache.gc();
 
-    // Any cart subtypes that have key fields must be manually cleared.
-    // TODO: we may be able to use cache.evict here instead.
-    await deleteCacheEntry(client, key => key.match(/^\$?AppliedGiftCard/));
-    await deleteCacheEntry(client, key => key.match(/^\$?ShippingCartAddress/));
-    await deleteCacheEntry(client, key =>
-        key.match(/^\$?AvailableShippingMethod/)
-    );
+    if (client.persistor) {
+        await client.persistor.persist();
+    }
 };

package/lib/Apollo/clearCustomerDataFromCache.js

@@ -1,14 +1,21 @@
-import { deleteCacheEntry } from './deleteCacheEntry';
-
 /**
- * Deletes all references to Customer from the apollo cache including entries
- * that start with "$" which were automatically created by Apollo InMemoryCache.
- * By coincidence this rule additionally clears CustomerAddress entries, but
- * we'll need to keep this in mind by adding additional patterns as MyAccount
- * features are completed.
+ * Deletes all references to Customer from the apollo cache.
+ * Related queries that have reference to the customer are also deleted
+ * through the cascade. Note, however, that all secondary references must
+ * be deleted in order for garbage collection to do its job.
  *
  * @param {ApolloClient} client
  */
 export const clearCustomerDataFromCache = async client => {
-    await deleteCacheEntry(client, key => key.match(/^\$?Customer/i));
+    // Cached data
+    client.cache.evict({ id: 'Customer' });
+    // Cached ROOT_QUERY
+    client.cache.evict({ fieldName: 'customer' });
+    client.cache.evict({ fieldName: 'customerWishlistProducts' });
+
+    client.cache.gc();
+
+    if (client.persistor) {
+        await client.persistor.persist();
+    }
 };

package/lib/Apollo/policies/index.js

@@ -37,8 +37,8 @@ const typePolicies = {
         keyFields: ['carrier_code', 'method_code']
     },
     Breadcrumb: {
-        // Uses provided fields on the object as the `id`.
-        keyFields: ['category_id']
+        // Uses provided fields on the object as the `uid`.
+        keyFields: ['category_uid']
     },
     Cart: {
         keyFields: () => 'Cart',
@@ -109,6 +109,7 @@ const typePolicies = {
     },
     Customer: {
         keyFields: () => 'Customer',
+        merge: true,
         fields: {
             addresses: {
                 merge(existing, incoming) {
@@ -164,13 +165,22 @@ const typePolicies = {
             }
         }
     },
+    Currency: {
+        merge: true
+    },
     ProductImage: {
         keyFields: ['url']
     },
+    ConfigurableProductOptions: {
+        keyFields: ['uid']
+    },
     SelectedConfigurableOption: {
         // id alone is not enough to identify a selected option as it can refer
         // to something like "size" where value_id refers to "large".
-        keyFields: ['id', 'value_id']
+        keyFields: [
+            'configurable_product_option_uid',
+            'configurable_product_option_value_uid'
+        ]
     },
     SelectedPaymentMethod: {
         keyFields: ['code']
@@ -240,6 +250,7 @@ const typePolicies = {
         }
     },
     CategoryTree: {
+        keyFields: ['uid'],
         fields: {
             children: {
                 merge(existing, incoming) {
@@ -298,6 +309,27 @@ const typePolicies = {
     },
     GiftCardWishlistItem: {
         keyFields: ({ id }) => `CustomerGiftCardWishlistItem:${id}`
+    },
+    SimpleProduct: {
+        keyFields: ['uid']
+    },
+    ConfigurableProduct: {
+        keyFields: ['uid']
+    },
+    BundleProduct: {
+        keyFields: ['uid']
+    },
+    GroupedProduct: {
+        keyFields: ['uid']
+    },
+    VirtualProduct: {
+        keyFields: ['uid']
+    },
+    CartItemInterface: {
+        keyFields: ['uid']
+    },
+    StoreConfig: {
+        keyFields: ['store_code']
     }
 };
 

package/lib/Toasts/useToasts.js

@@ -100,6 +100,11 @@ export const useToasts = () => {
          *   This property is optional when creating toasts.
          * @property {String} [actionText] Text to display as a call to action.
          *   This property is optional when creating toasts.
+         * @property {Bool} [hasDismissAction] Indicates whether the toast should have a
+         *   dismiss action with the same behavior as the dismiss icon.
+         *   This property is optional when creating toasts.
+         * @property {String} [dismissActionText] Text to display as a call to dissmisAction.
+         *   This property is optional when creating toasts.
          * @property {Function} [onAction] Callback invoked when a user clicks the action
          *   text.
          *   This property is optional when creating toasts.

package/lib/context/cart.js

@@ -1,4 +1,10 @@
-import React, { createContext, useContext, useEffect, useMemo } from 'react';
+import React, {
+    createContext,
+    useContext,
+    useEffect,
+    useMemo,
+    useCallback
+} from 'react';
 import { connect } from 'react-redux';
 import { useMutation } from '@apollo/client';
 import gql from 'graphql-tag';
@@ -7,6 +13,8 @@ import { useAwaitQuery } from '@magento/peregrine/lib/hooks/useAwaitQuery';
 import actions from '../store/actions/cart/actions';
 import * as asyncActions from '../store/actions/cart/asyncActions';
 import bindActionCreators from '../util/bindActionCreators';
+import { useEventListener } from '../hooks/useEventListener';
+import BrowserPersistence from '../util/simplePersistence';
 
 const CartContext = createContext();
 
@@ -57,6 +65,18 @@ const CartContextProvider = props => {
     const [fetchCartId] = useMutation(CREATE_CART_MUTATION);
     const fetchCartDetails = useAwaitQuery(CART_DETAILS_QUERY);
 
+    // Storage listener to force a state update if cartId changes from another browser tab.
+    const storageListener = useCallback(() => {
+        const storage = new BrowserPersistence();
+        const currentCartId = storage.getItem('cartId');
+        const { cartId } = cartState;
+        if (cartId && currentCartId && cartId !== currentCartId) {
+            globalThis.location && globalThis.location.reload();
+        }
+    }, [cartState]);
+
+    useEventListener(globalThis, 'storage', storageListener);
+
     useEffect(() => {
         // cartApi.getCartDetails initializes the cart if there isn't one.
         cartApi.getCartDetails({

package/lib/hooks/useCustomerWishlistSkus/customerWishlist.gql.ce.js

@@ -1,18 +1,18 @@
 import { gql } from '@apollo/client';
-
 import { GET_PRODUCTS_IN_WISHLISTS } from '@magento/peregrine/lib/talons/Wishlist/AddToListButton/addToListButton.gql';
 
 export const GET_WISHLIST_ITEMS = gql`
     query GetWishlistItemsForLocalField($currentPage: Int!) {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         customer {
-            id
             wishlists {
                 id
                 items_v2(currentPage: $currentPage, pageSize: 10) {
                     items {
                         id
+                        # eslint-disable-next-line @graphql-eslint/require-id-when-available
                         product {
-                            id
+                            uid
                             sku
                         }
                     }

package/lib/store/actions/cart/asyncActions.js

@@ -1,4 +1,3 @@
-import { clearCartDataFromCache } from '../../../Apollo/clearCartDataFromCache';
 import BrowserPersistence from '../../../util/simplePersistence';
 import { signOut } from '../user';
 import actions from './actions';
@@ -276,7 +275,7 @@ export const removeItemFromCart = payload => {
             await removeItem({
                 variables: {
                     cartId,
-                    itemId: item.id
+                    itemId: item.uid
                 }
             });
 
@@ -368,7 +367,7 @@ export const getCartDetails = payload => {
                 }
 
                 // Clear cart data from Apollo cache
-                await clearCartDataFromCache(apolloClient);
+                await apolloClient.clearCacheData(apolloClient, 'cart');
 
                 // Create a new cart
                 try {

package/lib/store/actions/user/asyncActions.js

@@ -1,6 +1,4 @@
 import BrowserPersistence from '../../../util/simplePersistence';
-import { clearCartDataFromCache } from '../../../Apollo/clearCartDataFromCache';
-import { clearCustomerDataFromCache } from '../../../Apollo/clearCustomerDataFromCache';
 import { removeCart } from '../cart';
 import { clearCheckoutDataFromStorage } from '../checkout';
 
@@ -25,8 +23,8 @@ export const signOut = (payload = {}) =>
         await dispatch(clearToken());
         await dispatch(actions.reset());
         await clearCheckoutDataFromStorage();
-        await clearCartDataFromCache(apolloClient);
-        await clearCustomerDataFromCache(apolloClient);
+        await apolloClient.clearCacheData(apolloClient, 'cart');
+        await apolloClient.clearCacheData(apolloClient, 'customer');
 
         // Now that we're signed out, forget the old (customer) cart.
         // We don't need to create a new cart here because we're going to refresh

package/lib/store/reducers/catalog.js

@@ -23,8 +23,8 @@ const initialState = {
 
 const reducerMap = {
     [actions.updateCategories]: (state, { payload }) => {
-        const { id } = payload;
-        const currentCategory = state.categories[id] || {};
+        const { uid } = payload;
+        const currentCategory = state.categories[uid] || {};
 
         // if category has already been fetched, do nothing
         if (currentCategory.children) {
@@ -35,7 +35,7 @@ const reducerMap = {
         const children = [...payload.children].sort((a, b) => {
             if (a.position > b.position) {
                 return 1;
-            } else if (a.position === b.position && a.id > b.id) {
+            } else if (a.position === b.position && a.uid > b.uid) {
                 return 1;
             } else {
                 return -1;
@@ -48,10 +48,10 @@ const reducerMap = {
 
         // merge children and add them to the Map, keyed by `id`
         for (const child of children) {
-            childMap.set(child.id, {
+            childMap.set(child.uid, {
                 ...child,
-                ...(state.categories[child.id] || {}),
-                parentId: id
+                ...(state.categories[child.uid] || {}),
+                parentId: uid
             });
         }
 
@@ -61,7 +61,7 @@ const reducerMap = {
             categories: {
                 ...state.categories,
                 ...fromPairs(childMap),
-                [id]: {
+                [uid]: {
                     ...currentCategory,
                     ...payload,
                     children: [...childMap.keys()],

package/lib/store/reducers/user.js

@@ -1,7 +1,5 @@
 import { handleActions } from 'redux-actions';
-
-import { Util } from '../../index';
-const { BrowserPersistence } = Util;
+import BrowserPersistence from '../../util/simplePersistence';
 
 const storage = new BrowserPersistence();
 

package/lib/talons/Adapter/useAdapter.js

@@ -7,10 +7,12 @@ 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, useCallback } from 'react';
+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 typePolicies from '@magento/peregrine/lib/Apollo/policies';
 import MagentoGQLCacheLink from '@magento/peregrine/lib/Apollo/magentoGqlCacheLink';
@@ -75,7 +77,8 @@ export const useAdapter = props => {
                             message ===
                                 'Some of the products are out of stock.' ||
                             message ===
-                                'There are no source items with the in stock status'
+                                'There are no source items with the in stock status' ||
+                            message === 'The requested qty is not available'
                         ) {
                             if (!pathToCartItems) {
                                 pathToCartItems = path.slice(0, -1);
@@ -187,29 +190,95 @@ export const useAdapter = props => {
         ]
     );
 
-    const apolloClient = useMemo(() => {
-        const storeCode = storage.getItem('store_view_code') || 'default';
-
-        const client = new ApolloClient({
-            cache: preInstantiatedCache,
-            link: apolloLink,
+    const createApolloClient = useCallback((cache, link) => {
+        return new ApolloClient({
+            cache,
+            link,
             ssrMode: isServer
         });
+    }, []);
 
-        const persistor = isServer
+    const createCachePersistor = useCallback((storeCode, cache) => {
+        return isServer
             ? null
             : new CachePersistor({
                   key: `${CACHE_PERSIST_PREFIX}-${storeCode}`,
-                  cache: preInstantiatedCache,
+                  cache,
                   storage: globalThis.localStorage,
                   debug: process.env.NODE_ENV === 'development'
               });
+    }, []);
+
+    const clearCacheData = useCallback(
+        async (client, cacheType) => {
+            const storeCode = storage.getItem('store_view_code') || 'default';
+
+            // Clear current store
+            if (cacheType === 'cart') {
+                await clearCartDataFromCache(client);
+            } else if (cacheType === 'customer') {
+                await clearCustomerDataFromCache(client);
+            }
+
+            // Clear other stores
+            for (const store of AVAILABLE_STORE_VIEWS) {
+                if (store.code !== storeCode) {
+                    // Get saved data directly from local storage
+                    const existingStorePersistor = globalThis.localStorage.getItem(
+                        `${CACHE_PERSIST_PREFIX}-${store.code}`
+                    );
+
+                    // Make sure we have data available
+                    if (
+                        existingStorePersistor &&
+                        Object.keys(existingStorePersistor).length > 0
+                    ) {
+                        const storeCache = new InMemoryCache();
+
+                        // Restore available data
+                        storeCache.restore(JSON.parse(existingStorePersistor));
+
+                        const storeClient = createApolloClient(
+                            storeCache,
+                            apolloLink
+                        );
+
+                        storeClient.persistor = isServer
+                            ? null
+                            : createCachePersistor(store.code, storeCache);
+
+                        // Clear other store
+                        if (cacheType === 'cart') {
+                            await clearCartDataFromCache(storeClient);
+                        } else if (cacheType === 'customer') {
+                            await clearCustomerDataFromCache(storeClient);
+                        }
+                    }
+                }
+            }
+        },
+        [apolloLink, createApolloClient, createCachePersistor]
+    );
+
+    const apolloClient = useMemo(() => {
+        const storeCode = storage.getItem('store_view_code') || 'default';
+        const client = createApolloClient(preInstantiatedCache, apolloLink);
+        const persistor = isServer
+            ? null
+            : createCachePersistor(storeCode, preInstantiatedCache);
 
         client.apiBase = apiBase;
         client.persistor = persistor;
+        client.clearCacheData = clearCacheData;
 
         return client;
-    }, [apiBase, apolloLink]);
+    }, [
+        apiBase,
+        apolloLink,
+        clearCacheData,
+        createApolloClient,
+        createCachePersistor
+    ]);
 
     const getUserConfirmation = useCallback(async (message, callback) => {
         if (typeof globalThis.handleRouteChangeConfirmation === 'function') {

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

@@ -1,7 +1,6 @@
 import { gql } from '@apollo/client';
 import { CartTriggerFragment } from '../Header/cartTriggerFragments.gql';
 import { MiniCartFragment } from '../MiniCart/miniCartFragments.gql';
-
 const GET_PRODUCT_DETAIL = gql`
     query GetProductDetailForATCDialog(
         $sku: String!
@@ -24,8 +23,9 @@ const GET_PRODUCT_DETAIL = gql`
                     }
                 }
                 ... on ConfigurableProduct {
+                    # eslint-disable-next-line @graphql-eslint/require-id-when-available
                     configurable_options {
-                        id
+                        uid
                         attribute_uid
                         label
                         position

package/lib/talons/AddressBookPage/addressBookPage.gql.js

@@ -4,8 +4,8 @@ import { CustomerAddressBookAddressFragment } from './addressBookFragments.gql';
 
 export const GET_CUSTOMER_ADDRESSES = gql`
     query GetCustomerAddressesForAddressBook {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         customer {
-            id
             addresses {
                 id
                 ...CustomerAddressBookAddressFragment
@@ -19,16 +19,11 @@ export const GET_CUSTOMER_ADDRESSES = gql`
     ${CustomerAddressBookAddressFragment}
 `;
 
-/**
- * We use the connection key directive here because Apollo will save
- * this customer's PII in localStorage if not.
- */
 export const ADD_NEW_CUSTOMER_ADDRESS = gql`
     mutation AddNewCustomerAddressToAddressBook(
         $address: CustomerAddressInput!
     ) {
-        createCustomerAddress(input: $address)
-            @connection(key: "createCustomerAddress") {
+        createCustomerAddress(input: $address) {
             # We don't manually write to the cache to update the collection
             # after adding a new address so there's no need to query for a bunch
             # of address fields here. We use refetchQueries to refresh the list.
@@ -42,8 +37,7 @@ export const UPDATE_CUSTOMER_ADDRESS = gql`
         $addressId: Int!
         $updated_address: CustomerAddressInput!
     ) {
-        updateCustomerAddress(id: $addressId, input: $updated_address)
-            @connection(key: "updateCustomerAddress") {
+        updateCustomerAddress(id: $addressId, input: $updated_address) {
             id
             ...CustomerAddressBookAddressFragment
         }

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

@@ -2,26 +2,30 @@ import { gql } from '@apollo/client';
 
 export const GET_STORE_CONFIG_DATA = gql`
     query GetStoreConfigForBreadcrumbs {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         storeConfig {
-            id
+            store_code
             category_url_suffix
         }
     }
 `;
 
 export const GET_BREADCRUMBS = gql`
-    query GetBreadcrumbs($category_id: Int!) {
-        category(id: $category_id) {
-            breadcrumbs {
-                category_id
-                # We may not need level if \`breadcrumbs\` is sorted.
-                category_level
-                category_name
-                category_url_path
+    query GetBreadcrumbs($category_id: String!) {
+        categories(filters: { category_uid: { in: [$category_id] } }) {
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            items {
+                breadcrumbs {
+                    category_uid
+                    # We may not need level if \`breadcrumbs\` is sorted.
+                    category_level
+                    category_name
+                    category_url_path
+                }
+                uid
+                name
+                url_path
             }
-            id
-            name
-            url_path
         }
     }
 `;

package/lib/talons/Breadcrumbs/useBreadcrumbs.js

@@ -12,7 +12,7 @@ const sortCrumbs = (a, b) => a.category_level > b.category_level;
 // Generates the path for the category.
 const getPath = (path, suffix) => {
     if (path) {
-        return `/${path}${suffix}`;
+        return `/${path}${suffix || ''}`;
     }
 
     // If there is no path this is just a dead link.
@@ -58,7 +58,7 @@ export const useBreadcrumbs = props => {
     // When we have breadcrumb data sort and normalize it for easy rendering.
     const normalizedData = useMemo(() => {
         if (!loading && data) {
-            const breadcrumbData = data.category.breadcrumbs;
+            const breadcrumbData = data.categories.items[0].breadcrumbs;
 
             return (
                 breadcrumbData &&
@@ -79,9 +79,11 @@ export const useBreadcrumbs = props => {
     const { setShimmerType } = useInternalLink('category');
 
     return {
-        currentCategory: (data && data.category.name) || '',
+        currentCategory: (data && data.categories.items[0].name) || '',
         currentCategoryPath:
-            (data && `${data.category.url_path}${categoryUrlSuffix || ''}`) ||
+            (data &&
+                `${data.categories.items[0].url_path}${categoryUrlSuffix ||
+                    ''}`) ||
             '#',
         isLoading: loading,
         hasError: !!error,

package/lib/talons/CartPage/GiftCards/giftCardQueries.gql.ee.js

@@ -31,7 +31,7 @@ const APPLY_GIFT_CARD_MUTATION = gql`
     mutation applyGiftCardToCart($cartId: String!, $giftCardCode: String!) {
         applyGiftCardToCart(
             input: { cart_id: $cartId, gift_card_code: $giftCardCode }
-        ) @connection(key: "applyGiftCardToCart") {
+        ) {
             cart {
                 id
                 ...CartPageFragment
@@ -50,7 +50,7 @@ const REMOVE_GIFT_CARD_MUTATION = gql`
     mutation removeGiftCard($cartId: String!, $giftCardCode: String!) {
         removeGiftCardFromCart(
             input: { cart_id: $cartId, gift_card_code: $giftCardCode }
-        ) @connection(key: "removeGiftCardFromCart") {
+        ) {
             cart {
                 id
                 ...CartPageFragment

package/lib/talons/CartPage/PriceAdjustments/CouponCode/couponCode.gql.js

@@ -16,7 +16,7 @@ const APPLY_COUPON_MUTATION = gql`
     mutation applyCouponToCart($cartId: String!, $couponCode: String!) {
         applyCouponToCart(
             input: { cart_id: $cartId, coupon_code: $couponCode }
-        ) @connection(key: "applyCouponToCart") {
+        ) {
             cart {
                 id
                 ...CartPageFragment
@@ -33,8 +33,7 @@ const APPLY_COUPON_MUTATION = gql`
 
 const REMOVE_COUPON_MUTATION = gql`
     mutation removeCouponFromCart($cartId: String!) {
-        removeCouponFromCart(input: { cart_id: $cartId })
-            @connection(key: "removeCouponFromCart") {
+        removeCouponFromCart(input: { cart_id: $cartId }) {
             cart {
                 id
                 ...CartPageFragment

package/lib/talons/CartPage/PriceAdjustments/ShippingMethods/shippingMethods.gql.js

@@ -23,7 +23,7 @@ const SET_SHIPPING_ADDRESS_MUTATION = gql`
                 cart_id: $cartId
                 shipping_addresses: [{ address: $address }]
             }
-        ) @connection(key: "setShippingAddressesOnCart") {
+        ) {
             cart {
                 id
                 ...CartPageFragment

package/lib/talons/CartPage/PriceSummary/priceSummaryFragments.gql.js

@@ -17,8 +17,9 @@ export const GrandTotalFragment = gql`
 export const PriceSummaryFragment = gql`
     fragment PriceSummaryFragment on Cart {
         id
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
         items {
-            id
+            uid
             quantity
         }
         ...ShippingSummaryFragment

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

@@ -82,6 +82,7 @@ export const configurableItemResponse = {
 export const cartItem = {
     configurable_options: [{ id: 123, value_id: 1 }, { id: 456, value_id: 1 }],
     id: 123,
+    uid: 'NDA=',
     product: {
         sku: 'SP01'
     },