@magento/peregrine 12.4.0 → 12.5.0

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

@@ -5,6 +5,7 @@ import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 import { useCartContext } from '../../../../context/cart';
 import { findMatchingVariant } from '../../../../util/findMatchingProductVariant';
 import DEFAULT_OPERATIONS from './productForm.gql';
+import { useEventingContext } from '../../../../context/eventing';
 
 /**
  * This talon contains logic for a product edit form.
@@ -48,6 +49,8 @@ export const useProductForm = props => {
         setActiveEditItem
     } = props;
 
+    const [, { dispatch }] = useEventingContext();
+
     const [{ cartId }] = useCartContext();
     const [optionSelections, setOptionSelections] = useState(new Map());
 
@@ -116,6 +119,7 @@ export const useProductForm = props => {
 
     const configItem =
         !loading && !error && data ? data.products.items[0] : null;
+
     const configurableOptionCodes = useMemo(() => {
         const optionCodeMap = new Map();
 
@@ -158,6 +162,8 @@ export const useProductForm = props => {
     const handleSubmit = useCallback(
         async formValues => {
             try {
+                const quantity = formValues.quantity;
+
                 if (selectedVariant && optionSelections.size) {
                     await updateConfigurableOptions({
                         variables: {
@@ -165,20 +171,56 @@ export const useProductForm = props => {
                             cartItemId: cartItem.uid,
                             parentSku: cartItem.product.sku,
                             variantSku: selectedVariant.product.sku,
-                            quantity: formValues.quantity
+                            quantity: quantity
                         }
                     });
 
                     setOptionSelections(new Map());
-                } else if (formValues.quantity !== cartItem.quantity) {
+                } else if (quantity !== cartItem.quantity) {
                     await updateItemQuantity({
                         variables: {
                             cartId,
                             cartItemId: cartItem.uid,
-                            quantity: formValues.quantity
+                            quantity: quantity
                         }
                     });
                 }
+
+                const selectedOptionsLabels =
+                    // with updated variant
+                    selectedVariant?.attributes?.map(({ value_index }, i) => {
+                        const current = configItem.configurable_options[i];
+                        const attribute = current.label;
+                        const value = current.values.find(
+                            x => x.value_index === value_index
+                        )?.label;
+
+                        return { attribute, value };
+                    }) ||
+                    // with current variant (updating only quantity)
+                    cartItem.configurable_options.map(
+                        ({ option_label, value_label }) => ({
+                            attribute: option_label,
+                            value: value_label
+                        })
+                    ) ||
+                    // not applicable
+                    null;
+
+                dispatch({
+                    type: 'CART_UPDATE_ITEM',
+                    payload: {
+                        cartId,
+                        sku: cartItem.product.sku,
+                        name: cartItem.product.name,
+                        priceTotal: cartItem.prices.price.value,
+                        currencyCode: cartItem.prices.price.currency,
+                        discountAmount:
+                            cartItem.prices.total_item_discount.value,
+                        selectedOptions: selectedOptionsLabels,
+                        quantity
+                    }
+                });
             } catch {
                 return;
             }
@@ -188,6 +230,8 @@ export const useProductForm = props => {
         [
             cartId,
             cartItem,
+            configItem,
+            dispatch,
             handleClose,
             optionSelections.size,
             selectedVariant,

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

@@ -40,6 +40,12 @@ export const ProductListingFragment = gql`
                     currency
                     value
                 }
+                row_total {
+                    value
+                }
+                total_item_discount {
+                    value
+                }
             }
             quantity
             errors {

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

@@ -3,9 +3,9 @@ import { useIntl } from 'react-intl';
 import { useMutation, useQuery } from '@apollo/client';
 import { useCartContext } from '@magento/peregrine/lib/context/cart';
 import configuredVariant from '@magento/peregrine/lib/util/configuredVariant';
-
 import { deriveErrorMessage } from '../../../util/deriveErrorMessage';
 import DEFAULT_OPERATIONS from './product.gql';
+import { useEventingContext } from '../../../context/eventing';
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 
 /**
@@ -38,6 +38,8 @@ export const useProduct = props => {
         wishlistConfig
     } = props;
 
+    const [, { dispatch }] = useEventingContext();
+
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
     const {
         removeItemMutation,
@@ -138,11 +140,33 @@ export const useProduct = props => {
                     itemId: item.uid
                 }
             });
+
+            const selectedOptionsLabels =
+                item.configurable_options?.map(
+                    ({ option_label, value_label }) => ({
+                        attribute: option_label,
+                        value: value_label
+                    })
+                ) || null;
+
+            dispatch({
+                type: 'CART_REMOVE_ITEM',
+                payload: {
+                    cartId,
+                    sku: item.product.sku,
+                    name: item.product.name,
+                    priceTotal: item.prices.price.value,
+                    currencyCode: item.prices.price.currency,
+                    discountAmount: item.prices.total_item_discount.value,
+                    selectedOptions: selectedOptionsLabels,
+                    quantity: item.quantity
+                }
+            });
         } catch (err) {
             // Make sure any errors from the mutation are displayed.
             setDisplayError(true);
         }
-    }, [cartId, item.uid, removeItemFromCart]);
+    }, [cartId, dispatch, item, removeItemFromCart]);
 
     const handleUpdateItemQuantity = useCallback(
         async quantity => {
@@ -154,12 +178,34 @@ export const useProduct = props => {
                         quantity
                     }
                 });
+
+                const selectedOptions =
+                    item.configurable_options?.map(
+                        ({ option_label, value_label }) => ({
+                            attribute: option_label,
+                            value: value_label
+                        })
+                    ) || null;
+
+                dispatch({
+                    type: quantity ? 'CART_UPDATE_ITEM' : 'CART_REMOVE_ITEM',
+                    payload: {
+                        cartId,
+                        sku: item.product.sku,
+                        name: item.product.name,
+                        priceTotal: item.prices.price.value,
+                        currencyCode: item.prices.price.currency,
+                        discountAmount: item.prices.total_item_discount.value,
+                        selectedOptions,
+                        quantity: quantity || item.quantity
+                    }
+                });
             } catch (err) {
                 // Make sure any errors from the mutation are displayed.
                 setDisplayError(true);
             }
         },
-        [cartId, item.uid, updateItemQuantity]
+        [cartId, dispatch, item, updateItemQuantity]
     );
 
     useEffect(() => {

package/lib/talons/CartPage/useCartPage.js

@@ -4,6 +4,7 @@ import { useLazyQuery } from '@apollo/client';
 import { useCartContext } from '@magento/peregrine/lib/context/cart';
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 import DEFAULT_OPERATIONS from './cartPage.gql';
+import { useEventingContext } from '../../context/eventing';
 
 /**
  * This talon contains logic for a cart page component.
@@ -52,6 +53,8 @@ export const useCartPage = (props = {}) => {
         setWishlistSuccessProps(successToastProps);
     }, []);
 
+    const [, { dispatch }] = useEventingContext();
+
     useEffect(() => {
         if (!called && cartId) {
             fetchCartDetails({ variables: { cartId } });
@@ -61,6 +64,18 @@ export const useCartPage = (props = {}) => {
         setIsCartUpdating(loading);
     }, [fetchCartDetails, called, cartId, loading]);
 
+    useEffect(() => {
+        if (called && cartId && !loading) {
+            dispatch({
+                type: 'CART_PAGE_VIEW',
+                payload: {
+                    cart_id: cartId,
+                    products: cartItems
+                }
+            });
+        }
+    }, [called, cartItems, cartId, loading, dispatch]);
+
     return {
         cartItems,
         hasItems,

package/lib/talons/CheckoutPage/ItemsReview/itemsReviewFragments.gql.js

@@ -10,24 +10,22 @@ export const ItemsReviewFragment = gql`
             # eslint-disable-next-line @graphql-eslint/require-id-when-available
             product {
                 uid
+                sku
                 name
                 thumbnail {
                     url
                 }
-                # eslint-disable-next-line @graphql-eslint/require-id-when-available
-                ... on ConfigurableProduct {
-                    variants {
-                        attributes {
-                            uid
-                        }
-                        # eslint-disable-next-line @graphql-eslint/require-id-when-available
-                        product {
-                            uid
-                            thumbnail {
-                                url
-                            }
-                        }
-                    }
+            }
+            prices {
+                price {
+                    currency
+                    value
+                }
+                row_total {
+                    value
+                }
+                total_item_discount {
+                    value
                 }
             }
             quantity

package/lib/talons/CheckoutPage/OrderConfirmationPage/orderConfirmationPageFragments.gql.js

@@ -18,12 +18,32 @@ export const OrderConfirmationPageFragment = gql`
             country {
                 label
             }
-
             selected_shipping_method {
+                amount {
+                    value
+                    currency
+                }
                 carrier_title
                 method_title
             }
         }
+        selected_payment_method {
+            purchase_order_number
+            title
+        }
+        prices {
+            grand_total {
+                value
+                currency
+            }
+            discounts {
+                amount {
+                    currency
+                    value
+                }
+                label
+            }
+        }
         ...ItemsReviewFragment
     }
     ${ItemsReviewFragment}

package/lib/talons/CheckoutPage/OrderConfirmationPage/useCreateAccount.js

@@ -8,6 +8,7 @@ import { useAwaitQuery } from '../../../hooks/useAwaitQuery';
 import { useGoogleReCaptcha } from '../../../hooks/useGoogleReCaptcha';
 
 import DEFAULT_OPERATIONS from './createAccount.gql';
+import { useEventingContext } from '../../../context/eventing';
 
 /**
  * Returns props necessary to render CreateAccount component. In particular this
@@ -46,6 +47,8 @@ export const useCreateAccount = props => {
         { getUserDetails, setToken }
     ] = useUserContext();
 
+    const [, { dispatch }] = useEventingContext();
+
     const [fetchCartId] = useMutation(createCartMutation);
 
     // For create account and sign in mutations, we don't want to cache any
@@ -92,6 +95,16 @@ export const useCreateAccount = props => {
                     ...recaptchaDataForCreateAccount
                 });
 
+                dispatch({
+                    type: 'USER_CREATE_ACCOUNT',
+                    payload: {
+                        email: formValues.customer.email,
+                        firstName: formValues.customer.firstname,
+                        lastName: formValues.customer.lastname,
+                        isSubscribed: !!formValues.subscribe
+                    }
+                });
+
                 // Get reCaptchaV3 Data for signIn mutation
                 const recaptchaDataForSignIn = await generateReCaptchaData();
 
@@ -143,7 +156,8 @@ export const useCreateAccount = props => {
             onSubmit,
             removeCart,
             setToken,
-            signIn
+            signIn,
+            dispatch
         ]
     );
 

package/lib/talons/CheckoutPage/PaymentInformation/useEditModal.js

@@ -2,6 +2,7 @@ import { useState, useCallback } from 'react';
 import { useQuery } from '@apollo/client';
 import DEFAULT_OPERATIONS from './editModal.gql';
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import { useEventingContext } from '../../../context/eventing';
 
 import { useCartContext } from '../../../context/cart';
 
@@ -35,6 +36,7 @@ export const useEditModal = props => {
     const [isLoading, setIsLoading] = useState(true);
     const [updateButtonClicked, setUpdateButtonClicked] = useState(false);
     const [{ cartId }] = useCartContext();
+    const [, { dispatch }] = useEventingContext();
 
     /**
      * Queries
@@ -67,7 +69,14 @@ export const useEditModal = props => {
 
     const handlePaymentSuccess = useCallback(() => {
         onClose();
-    }, [onClose]);
+        dispatch({
+            type: 'CHECKOUT_BILLING_INFORMATION_UPDATED',
+            payload: {
+                cart_id: cartId,
+                selected_payment_method: selectedPaymentMethod
+            }
+        });
+    }, [onClose, dispatch, cartId, selectedPaymentMethod]);
 
     const handlePaymentError = useCallback(() => {
         setUpdateButtonClicked(false);

package/lib/talons/CheckoutPage/PaymentInformation/usePaymentInformation.js

@@ -5,6 +5,7 @@ import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 
 import { useCartContext } from '../../../context/cart';
 import CheckoutError from '../CheckoutError';
+import { useEventingContext } from '../../../context/eventing';
 import { CHECKOUT_STEP } from '../useCheckoutPage';
 
 /**
@@ -44,6 +45,7 @@ export const usePaymentInformation = props => {
     const [isEditModalActive, setIsEditModalActive] = useState(false);
     const [{ cartId }] = useCartContext();
     const client = useApolloClient();
+    const [, { dispatch }] = useEventingContext();
 
     /**
      * Helper Functions
@@ -244,6 +246,18 @@ export const usePaymentInformation = props => {
         }
     }, [checkoutError, handleExpiredPaymentError]);
 
+    useEffect(() => {
+        if (doneEditing) {
+            dispatch({
+                type: 'CHECKOUT_BILLING_INFORMATION_ADDED',
+                payload: {
+                    cart_id: cartId,
+                    selected_payment_method: selectedPaymentMethod
+                }
+            });
+        }
+    }, [cartId, selectedPaymentMethod, doneEditing, dispatch]);
+
     return {
         doneEditing,
         handlePaymentError,

package/lib/talons/CheckoutPage/ShippingInformation/AddressForm/useCustomerForm.js

@@ -2,6 +2,7 @@ import { useCallback, useMemo } from 'react';
 import { useMutation, useQuery } from '@apollo/client';
 import DEFAULT_OPERATIONS from './customerForm.gql';
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import { useEventingContext } from '../../../../context/eventing';
 
 export const useCustomerForm = props => {
     const { afterSubmit, onCancel, onSuccess, shippingData } = props;
@@ -71,6 +72,39 @@ export const useCustomerForm = props => {
         };
     }
 
+    const [, { dispatch }] = useEventingContext();
+    const dispatchEvent = useCallback(
+        (action, address) => {
+            if (action === 'ADD') {
+                dispatch({
+                    type: 'USER_ADDRESS_CREATE',
+                    payload: {
+                        address: address,
+                        user: customerData
+                    }
+                });
+            }
+            if (action === 'EDIT') {
+                dispatch({
+                    type: 'USER_ADDRESS_EDIT',
+                    payload: {
+                        address: address,
+                        user: customerData
+                    }
+                });
+            }
+            if (!hasDefaultShipping) {
+                dispatch({
+                    type: 'CHECKOUT_SHIPPING_INFORMATION_ADDED',
+                    payload: {
+                        cart_id: customerData.cart_id
+                    }
+                });
+            }
+        },
+        [customerData, dispatch, hasDefaultShipping]
+    );
+
     const handleSubmit = useCallback(
         async formValues => {
             // eslint-disable-next-line no-unused-vars
@@ -92,6 +126,7 @@ export const useCustomerForm = props => {
                         },
                         refetchQueries: [{ query: getCustomerAddressesQuery }]
                     });
+                    dispatchEvent('EDIT', customerAddress);
                 } else {
                     await createCustomerAddress({
                         variables: {
@@ -102,6 +137,7 @@ export const useCustomerForm = props => {
                             { query: getDefaultShippingQuery }
                         ]
                     });
+                    dispatchEvent('ADD', customerAddress);
                 }
             } catch {
                 return;
@@ -118,7 +154,8 @@ export const useCustomerForm = props => {
             getDefaultShippingQuery,
             isUpdate,
             shippingData,
-            updateCustomerAddress
+            updateCustomerAddress,
+            dispatchEvent
         ]
     );
 

package/lib/talons/CheckoutPage/ShippingInformation/AddressForm/useGuestForm.js

@@ -4,6 +4,7 @@ import DEFAULT_OPERATIONS from './guestForm.gql';
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 
 import { useCartContext } from '../../../../context/cart';
+import { useEventingContext } from '../../../../context/eventing';
 
 export const useGuestForm = props => {
     const {
@@ -45,6 +46,18 @@ export const useGuestForm = props => {
     // Simple heuristic to indicate form was submitted prior to this render
     const isUpdate = !!shippingData.city;
 
+    const [, { dispatch }] = useEventingContext();
+    const dispatchEvent = useCallback(() => {
+        if (!isUpdate) {
+            dispatch({
+                type: 'CHECKOUT_SHIPPING_INFORMATION_ADDED',
+                payload: {
+                    cart_id: cartId
+                }
+            });
+        }
+    }, [isUpdate, cartId, dispatch]);
+
     const handleSubmit = useCallback(
         async formValues => {
             const { country, email, region, ...address } = formValues;
@@ -63,6 +76,7 @@ export const useGuestForm = props => {
                         }
                     }
                 });
+                dispatchEvent();
             } catch {
                 return;
             }
@@ -71,7 +85,7 @@ export const useGuestForm = props => {
                 afterSubmit();
             }
         },
-        [afterSubmit, cartId, setGuestShipping]
+        [afterSubmit, cartId, setGuestShipping, dispatchEvent]
     );
 
     const handleCancel = useCallback(() => {

package/lib/talons/CheckoutPage/ShippingInformation/useShippingInformation.js

@@ -7,6 +7,7 @@ import { useAppContext } from '../../../context/app';
 import { useCartContext } from '../../../context/cart';
 import { useUserContext } from '../../../context/user';
 import { MOCKED_ADDRESS } from '../../CartPage/PriceAdjustments/ShippingMethods/useShippingForm';
+import { useEventingContext } from '../../../context/eventing';
 
 export const useShippingInformation = props => {
     const { onSave, toggleActiveContent } = props;
@@ -97,6 +98,7 @@ export const useShippingInformation = props => {
     // On first submission, when we have data, we should tell the checkout page
     // so that we set the next step correctly.
     const doneEditing = !!shippingData && !!shippingData.city;
+    const [, { dispatch }] = useEventingContext();
 
     useEffect(() => {
         if (doneEditing) {
@@ -158,6 +160,17 @@ export const useShippingInformation = props => {
         }
     }, [isSignedIn, toggleActiveContent, toggleDrawer]);
 
+    useEffect(() => {
+        if (doneEditing && hasUpdate) {
+            dispatch({
+                type: 'CHECKOUT_SHIPPING_INFORMATION_UPDATED',
+                payload: {
+                    cart_id: cartId
+                }
+            });
+        }
+    }, [cartId, doneEditing, dispatch, hasUpdate]);
+
     return {
         doneEditing,
         handleEditShipping,

package/lib/talons/CheckoutPage/ShippingMethod/useShippingMethod.js

@@ -5,6 +5,7 @@ import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 
 import { useCartContext } from '@magento/peregrine/lib/context/cart';
 import { useUserContext } from '@magento/peregrine/lib/context/user';
+import { useEventingContext } from '../../../context/eventing';
 
 export const displayStates = {
     DONE: 'done',
@@ -53,6 +54,7 @@ export const useShippingMethod = props => {
 
     const [{ cartId }] = useCartContext();
     const [{ isSignedIn }] = useUserContext();
+    const [, { dispatch }] = useEventingContext();
 
     /*
      *  Apollo Hooks.
@@ -93,11 +95,13 @@ export const useShippingMethod = props => {
             ? data.cart.shipping_addresses[0]
             : null;
 
-    const derivedSelectedShippingMethod = derivedPrimaryShippingAddress
-        ? addSerializedProperty(
-              derivedPrimaryShippingAddress.selected_shipping_method
-          )
-        : DEFAULT_SELECTED_SHIPPING_METHOD;
+    const derivedSelectedShippingMethod = useMemo(() => {
+        return derivedPrimaryShippingAddress
+            ? addSerializedProperty(
+                  derivedPrimaryShippingAddress.selected_shipping_method
+              )
+            : DEFAULT_SELECTED_SHIPPING_METHOD;
+    }, [derivedPrimaryShippingAddress]);
 
     const derivedShippingMethods = useMemo(() => {
         if (!derivedPrimaryShippingAddress)
@@ -128,6 +132,23 @@ export const useShippingMethod = props => {
     /*
      *  Callbacks.
      */
+    const dispatchEvent = useCallback(
+        shippingMethod => {
+            dispatch({
+                type: !isUpdateMode
+                    ? 'CHECKOUT_SHIPPING_METHOD_ADDED'
+                    : 'CHECKOUT_SHIPPING_METHOD_UPDATED',
+                payload: {
+                    cart_id: cartId,
+                    selected_shipping_method: {
+                        serializedValue: shippingMethod
+                    }
+                }
+            });
+        },
+        [dispatch, cartId, isUpdateMode]
+    );
+
     const handleSubmit = useCallback(
         async value => {
             const [carrierCode, methodCode] = deserializeShippingMethod(
@@ -144,13 +165,14 @@ export const useShippingMethod = props => {
                         }
                     }
                 });
+                dispatchEvent(value.shipping_method);
             } catch {
                 return;
             }
 
             setIsUpdateMode(false);
         },
-        [cartId, setIsUpdateMode, setShippingMethodCall]
+        [cartId, setIsUpdateMode, setShippingMethodCall, dispatchEvent]
     );
 
     const handleCancelUpdate = useCallback(() => {

package/lib/talons/CheckoutPage/checkoutPage.gql.js

@@ -1,5 +1,6 @@
 import { gql } from '@apollo/client';
 import { CheckoutPageFragment } from './checkoutPageFragments.gql';
+import { ItemsReviewFragment } from './ItemsReview/itemsReviewFragments.gql';
 import { OrderConfirmationPageFragment } from './OrderConfirmationPage/orderConfirmationPageFragments.gql';
 
 export const CREATE_CART = gql`
@@ -37,9 +38,11 @@ export const GET_CHECKOUT_DETAILS = gql`
         cart(cart_id: $cartId) {
             id
             ...CheckoutPageFragment
+            ...ItemsReviewFragment
         }
     }
     ${CheckoutPageFragment}
+    ${ItemsReviewFragment}
 `;
 
 export const GET_CUSTOMER = gql`