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

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/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

@@ -6,7 +6,7 @@ import { useCartContext } from '../../context/cart';
 import operations from './addToCart.gql';
 
 /**
- * @param {Number} props.item.id - id of item
+ * @param {String} props.item.uid - uid of item
  * @param {String} props.item.name - name of item
  * @param {String} props.item.stock_status - stock status of item
  * @param {String} props.item.type_id - product type
@@ -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/talons/SearchPage/searchPage.gql.js

@@ -42,6 +42,7 @@ export const PRODUCT_SEARCH = gql`
         ) {
             items {
                 id
+                uid
                 name
                 price_range {
                     maximum_price {

package/package.json

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