@magento/peregrine 12.0.0-alpha.2 → 12.1.0-alpha.1

package/lib/Apollo/clearCartDataFromCache.js

@@ -1,22 +1,19 @@
+import { deleteCacheEntry } from './deleteCacheEntry';
+
 /**
- * Deletes all references to Cart from the apollo cache
+ * Deletes all references to Cart from the apollo cache including entries that
+ * start with "$" which were automatically created by Apollo InMemoryCache.
  *
  * @param {ApolloClient} client
  */
 export const clearCartDataFromCache = async client => {
-    // Cached data
-    client.cache.evict({ id: 'Cart' });
-    client.cache.evict({
-        id: 'ROOT_MUTATION',
-        fieldName: 'placeOrder'
-    });
-    // Cached ROOT_QUERY
-    client.cache.evict({ fieldName: 'cart' });
-    client.cache.evict({ fieldName: 'customerCart' });
-
-    client.cache.gc();
+    await deleteCacheEntry(client, key => key.match(/^\$?Cart/));
 
-    if (client.persistor) {
-        await client.persistor.persist();
-    }
+    // 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/)
+    );
 };

package/lib/Apollo/clearCustomerDataFromCache.js

@@ -1,26 +1,14 @@
+import { deleteCacheEntry } from './deleteCacheEntry';
+
 /**
- * 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.
+ * 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.
  *
  * @param {ApolloClient} client
  */
 export const clearCustomerDataFromCache = async client => {
-    // Cached data
-    client.cache.evict({ id: 'Customer' });
-    // Remove createCustomerAddress which references newly created addresses, avoiding gc
-    client.cache.evict({
-        id: 'ROOT_MUTATION',
-        fieldName: 'createCustomerAddress'
-    });
-    // Cached ROOT_QUERY
-    client.cache.evict({ fieldName: 'customer' });
-    client.cache.evict({ fieldName: 'customerWishlistProducts' });
-
-    client.cache.gc();
-
-    if (client.persistor) {
-        await client.persistor.persist();
-    }
+    await deleteCacheEntry(client, key => key.match(/^\$?Customer/i));
 };

package/lib/Apollo/deleteCacheEntry.js

@@ -0,0 +1,87 @@
+import { CACHE_PERSIST_PREFIX } from '@magento/peregrine/lib/Apollo/constants';
+
+/**
+ * Deletes specific entry/entries from the apollo cache and then tries to
+ * persist the deletions.
+ *
+ * @param {ApolloClient} client apollo client instance
+ * @param {Function} predicate a matching function
+ */
+export const deleteCacheEntry = async (client, predicate) => {
+    await deleteActiveCacheEntry(client, predicate);
+    await deleteInactiveCachesEntry(client, predicate);
+};
+
+const deleteActiveCacheEntry = async (client, predicate) => {
+    // If there is no client or cache then just back out since it doesn't matter :D
+    if (
+        !client ||
+        !client.cache ||
+        !client.cache.data ||
+        !client.cache.data.data
+    ) {
+        if (process.env.NODE_ENV === 'development') {
+            console.warn(
+                'Apollo Cache entry deletion attempted without client or cache.'
+            );
+        }
+        return;
+    }
+
+    // Remove from the active cache.
+    Object.keys(client.cache.data.data).forEach(key => {
+        if (predicate(key)) {
+            client.cache.data.delete(key);
+        }
+    });
+
+    // Remove from ROOT_QUERY cache.
+    if (client.cache.data.data.ROOT_QUERY) {
+        Object.keys(client.cache.data.data.ROOT_QUERY).forEach(key => {
+            if (predicate(key)) {
+                client.cache.data.delete('ROOT_QUERY', key);
+            }
+        });
+    }
+
+    // Immediately persist the cache changes to the active cache storage.
+    if (client.persistor) {
+        await client.persistor.persist();
+    }
+};
+
+const deleteInactiveCachesEntry = async (client, predicate) => {
+    if (!client || !client.persistor || !globalThis.localStorage) return;
+
+    const activeApolloCacheLocalStorageKey =
+        client.persistor.persistor.storage.key;
+
+    const isAnInactiveApolloCache = ([key]) => {
+        return (
+            key.startsWith(CACHE_PERSIST_PREFIX) &&
+            key !== activeApolloCacheLocalStorageKey
+        );
+    };
+
+    const { localStorage } = globalThis;
+
+    Object.entries(localStorage)
+        .filter(isAnInactiveApolloCache)
+        .forEach(([inactiveCacheKey, inactiveCacheValue]) => {
+            const inactiveApolloCache = JSON.parse(inactiveCacheValue);
+
+            Object.keys(inactiveApolloCache).forEach(key => {
+                if (predicate(key)) {
+                    delete inactiveApolloCache[key];
+                }
+            });
+
+            // We're done deleting keys that match the predicate,
+            // but we've only mutated the object in memory.
+            // Write the updated inactive cache back out to localStorage.
+            localStorage.setItem(
+                inactiveCacheKey,
+                JSON.stringify(inactiveApolloCache)
+            );
+        });
+};

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

@@ -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/store/actions/cart/asyncActions.js

@@ -276,7 +276,7 @@ export const removeItemFromCart = payload => {
             await removeItem({
                 variables: {
                     cartId,
-                    itemId: item.id
+                    itemId: item.uid
                 }
             });
 

package/lib/talons/CartPage/PriceAdjustments/CouponCode/useCouponCode.js

@@ -23,7 +23,7 @@ import DEFAULT_OPERATIONS from './couponCode.gql';
  * @return {CouponCodeTalonProps}
  *
  * @example <caption>Importing into your project</caption>
- * import { useCouponCode } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/useCouponCode';
+ * import { useCouponCode } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/CouponCode/useCouponCode';
  */
 export const useCouponCode = props => {
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);

package/lib/talons/CartPage/PriceAdjustments/ShippingMethods/useShippingMethods.js

@@ -120,7 +120,7 @@ export const useShippingMethods = (props = {}) => {
  * Can be used as a boolean value since having no shipping methods would return 0.
  * @property {boolean} isShowingForm True if the form should be shown. False otherwise.
  * @property {SelectShippingFields} selectedShippingFields Values for the select input fields on the shipping form
- * @property {String} selectedShippingMethod A serialized string of <carrier-code>|<method-code>, eg. usps|priority.
+ * @property {String} selectedShippingMethod A serialized string of <inlineCode>${carrier-code}\|${method-code}</inlineCode>, eg. <inlineCode>usps\|priority</inlineCode>.
  * @property {Array<Object>} shippingMethods A list of available shipping methods based on the primary shipping address
  * @property {function} showForm A function that sets the `isShowingForm` value to true.
  */

package/lib/talons/CartPage/PriceAdjustments/ShippingMethods/useShippingRadios.js

@@ -17,7 +17,7 @@ import { useCartContext } from '../../../../context/cart';
  *
  * @param {Object} props
  * @param {function} props.setIsCartUpdating Function for setting the updating state of the shopping cart
- * @param {String} props.selectedShippingMethod A serialized string of <carrier-code>|<method-code>, eg. usps|priority.
+ * @param {String} props.selectedShippingMethod A serialized string of <inlineCode>${carrier-code}\|${method-code}</inlineCode>, eg. <inlineCode>usps\|priority</inlineCode>.
  * @param {Array<Object>} props.shippingMethods An array of available shipping methods
  * @param {ShippingRadiosMutations} props.mutations GraphQL mutations for a shipping radio selector component.
  *

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'
     },

package/lib/talons/CartPage/ProductListing/EditModal/productForm.gql.js

@@ -7,6 +7,7 @@ const GET_CONFIGURABLE_OPTIONS = gql`
         products(filter: { sku: { eq: $sku } }) {
             items {
                 id
+                uid
                 ...ProductFormFragment
             }
         }
@@ -17,13 +18,15 @@ const GET_CONFIGURABLE_OPTIONS = gql`
 const UPDATE_QUANTITY_MUTATION = gql`
     mutation UpdateCartItemQuantity(
         $cartId: String!
-        $cartItemId: Int!
+        $cartItemId: ID!
         $quantity: Float!
     ) {
         updateCartItems(
             input: {
                 cart_id: $cartId
-                cart_items: [{ cart_item_id: $cartItemId, quantity: $quantity }]
+                cart_items: [
+                    { cart_item_uid: $cartItemId, quantity: $quantity }
+                ]
             }
         ) @connection(key: "updateCartItems") {
             cart {
@@ -38,7 +41,7 @@ const UPDATE_QUANTITY_MUTATION = gql`
 const UPDATE_CONFIGURABLE_OPTIONS_MUTATION = gql`
     mutation UpdateConfigurableOptions(
         $cartId: String!
-        $cartItemId: Int!
+        $cartItemId: ID!
         $parentSku: String!
         $variantSku: String!
         $quantity: Float!
@@ -60,7 +63,7 @@ const UPDATE_CONFIGURABLE_OPTIONS_MUTATION = gql`
         }
 
         removeItemFromCart(
-            input: { cart_id: $cartId, cart_item_id: $cartItemId }
+            input: { cart_id: $cartId, cart_item_uid: $cartItemId }
         ) @connection(key: "removeItemFromCart") {
             cart {
                 id

package/lib/talons/CartPage/ProductListing/EditModal/productFormFragment.gql.js

@@ -3,6 +3,7 @@ import { gql } from '@apollo/client';
 export const ProductFormFragment = gql`
     fragment ProductFormFragment on ProductInterface {
         id
+        uid
         sku
         ... on ConfigurableProduct {
             configurable_options {

package/lib/talons/CartPage/ProductListing/EditModal/useProductForm.js

@@ -156,7 +156,7 @@ export const useProductForm = props => {
                     await updateConfigurableOptions({
                         variables: {
                             cartId,
-                            cartItemId: cartItem.id,
+                            cartItemId: cartItem.uid,
                             parentSku: cartItem.product.sku,
                             variantSku: selectedVariant.product.sku,
                             quantity: formValues.quantity
@@ -168,7 +168,7 @@ export const useProductForm = props => {
                     await updateItemQuantity({
                         variables: {
                             cartId,
-                            cartItemId: cartItem.id,
+                            cartItemId: cartItem.uid,
                             quantity: formValues.quantity
                         }
                     });

package/lib/talons/CartPage/ProductListing/productListingFragments.gql.js

@@ -5,6 +5,7 @@ export const ProductListingFragment = gql`
         id
         items {
             id
+            uid
             product {
                 id
                 name

package/lib/talons/CartPage/ProductListing/useProduct.js

@@ -128,14 +128,14 @@ export const useProduct = props => {
             await removeItemFromCart({
                 variables: {
                     cartId,
-                    itemId: item.id
+                    itemId: item.uid
                 }
             });
         } catch (err) {
             // Make sure any errors from the mutation are displayed.
             setDisplayError(true);
         }
-    }, [cartId, item.id, removeItemFromCart]);
+    }, [cartId, item.uid, removeItemFromCart]);
 
     const handleUpdateItemQuantity = useCallback(
         async quantity => {
@@ -143,7 +143,7 @@ export const useProduct = props => {
                 await updateItemQuantity({
                     variables: {
                         cartId,
-                        itemId: item.id,
+                        itemId: item.uid,
                         quantity
                     }
                 });
@@ -152,7 +152,7 @@ export const useProduct = props => {
                 setDisplayError(true);
             }
         },
-        [cartId, item.id, updateItemQuantity]
+        [cartId, item.uid, updateItemQuantity]
     );
 
     useEffect(() => {

package/lib/talons/Gallery/useAddToCartButton.js

@@ -56,7 +56,12 @@ export const useAddToCartButton = props => {
                         cartId,
                         cartItem: {
                             quantity: 1,
-                            selected_options: [],
+                            entered_options: [
+                                {
+                                    uid: item.uid,
+                                    value: item.name
+                                }
+                            ],
                             sku: item.sku
                         }
                     }
@@ -71,7 +76,16 @@ export const useAddToCartButton = props => {
         } catch (error) {
             console.error(error);
         }
-    }, [addToCart, cartId, history, item.sku, item.url_key, productType]);
+    }, [
+        addToCart,
+        cartId,
+        history,
+        item.sku,
+        item.url_key,
+        productType,
+        item.uid,
+        item.name
+    ]);
 
     return {
         handleAddToCart,

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

@@ -5,6 +5,7 @@ export const ProductListFragment = gql`
         id
         items {
             id
+            uid
             product {
                 id
                 name

package/lib/talons/MiniCart/useItem.js

@@ -1,14 +1,14 @@
 import { useState, useCallback } from 'react';
 
 export const useItem = props => {
-    const { id, handleRemoveItem } = props;
+    const { uid, handleRemoveItem } = props;
 
     const [isDeleting, setIsDeleting] = useState(false);
 
     const removeItem = useCallback(() => {
         setIsDeleting(true);
-        handleRemoveItem(id);
-    }, [handleRemoveItem, id]);
+        handleRemoveItem(uid);
+    }, [handleRemoveItem, uid]);
 
     return {
         isDeleting,

package/lib/talons/Newsletter/newsletter.gql.js

@@ -0,0 +1,11 @@
+import { gql } from '@apollo/client';
+export const SUBSCRIBE_TO_NEWSLETTER = gql`
+    mutation SubscribeToNewsletter($email: String!) {
+        subscribeEmailToNewsletter(email: $email) {
+            status
+        }
+    }
+`;
+export default {
+    subscribeMutation: SUBSCRIBE_TO_NEWSLETTER
+};

package/lib/talons/Newsletter/useNewsletter.js

@@ -0,0 +1,51 @@
+import { useCallback, useRef, useState, useMemo } from 'react';
+import { useMutation } from '@apollo/client';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from './newsletter.gql';
+
+export const useNewsletter = (props = {}) => {
+    const { subscribeMutation } = mergeOperations(
+        DEFAULT_OPERATIONS,
+        props.operations
+    );
+    const [subscribing, setSubscribing] = useState(false);
+    const [subscribeNewsLetter, { error: newsLetterError, data }] = useMutation(
+        subscribeMutation,
+        {
+            fetchPolicy: 'no-cache'
+        }
+    );
+    const formApiRef = useRef(null);
+    const setFormApi = useCallback(api => (formApiRef.current = api), []);
+    const handleSubmit = useCallback(
+        async ({ email }) => {
+            setSubscribing(true);
+            try {
+                await subscribeNewsLetter({
+                    variables: { email }
+                });
+                if (formApiRef.current) {
+                    formApiRef.current.reset();
+                }
+            } catch (error) {
+                if (process.env.NODE_ENV !== 'production') {
+                    console.error(error);
+                }
+            }
+            setSubscribing(false);
+        },
+        [subscribeNewsLetter]
+    );
+    const errors = useMemo(
+        () => new Map([['subscribeMutation', newsLetterError]]),
+        [newsLetterError]
+    );
+
+    return {
+        errors,
+        handleSubmit,
+        isBusy: subscribing,
+        setFormApi,
+        newsLetterResponse: data && data.subscribeEmailToNewsletter
+    };
+};

package/lib/talons/ProductFullDetail/useProductFullDetail.js

@@ -368,7 +368,13 @@ export const useProductFullDetail = props => {
                     product: {
                         sku: product.sku,
                         quantity
-                    }
+                    },
+                    entered_options: [
+                        {
+                            uid: product.uid,
+                            value: product.name
+                        }
+                    ]
                 };
 
                 if (selectedOptionsArray.length) {

package/lib/talons/RootComponents/Category/categoryFragments.gql.js

@@ -13,6 +13,7 @@ export const ProductsFragment = gql`
     fragment ProductsFragment on Products {
         items {
             id
+            uid
             name
             price_range {
                 maximum_price {

package/lib/talons/RootComponents/Product/product.gql.js

@@ -16,6 +16,7 @@ export const GET_PRODUCT_DETAIL_QUERY = gql`
         products(filter: { url_key: { eq: $urlKey } }) {
             items {
                 id
+                uid
                 ...ProductDetailsFragment
             }
         }

package/lib/talons/RootComponents/Product/productDetailFragment.gql.js

@@ -5,6 +5,7 @@ export const ProductDetailsFragment = gql`
         __typename
         categories {
             id
+            uid
             breadcrumbs {
                 category_id
             }
@@ -13,6 +14,7 @@ export const ProductDetailsFragment = gql`
             html
         }
         id
+        uid
         media_gallery_entries {
             # id is deprecated and unused in our code, but lint rules require we
             # request it if available
@@ -67,6 +69,7 @@ export const ProductDetailsFragment = gql`
                 }
                 product {
                     id
+                    uid
                     media_gallery_entries {
                         # id is deprecated and unused in our code, but lint rules require we
                         # request it if available

package/lib/targets/peregrine-declare.js

@@ -20,8 +20,6 @@ module.exports = targets => {
          *
          * @member {tapable.AsyncSeriesHook}
          *
-         * @see [list of wrappable hooks][]
-         *
          * @see [Intercept function signature]{@link hookInterceptFunction}
          *
          * @example <caption>Access the tapable object</caption>
@@ -49,8 +47,6 @@ module.exports = targets => {
          *
          * @member {tapable.AsyncSeriesHook}
          *
-         * @see [list of wrappable talons][]
-         *
          * @see [Intercept function signature]{@link hookInterceptFunction}
          *
          * @example <caption>Access the tapable object</caption>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magento/peregrine",
-  "version": "12.0.0-alpha.2",
+  "version": "12.1.0-alpha.1",
   "publishConfig": {
     "access": "public"
   },