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

package/lib/talons/CheckoutPage/useCheckoutPage.js

@@ -5,6 +5,7 @@ import {
     useMutation,
     useQuery
 } from '@apollo/client';
+import { useEventingContext } from '../../context/eventing';
 
 import { useUserContext } from '../../context/user';
 import { useCartContext } from '../../context/cart';
@@ -142,7 +143,7 @@ export const useCheckoutPage = (props = {}) => {
     });
 
     const cartItems = useMemo(() => {
-        return (checkoutData && checkoutData.cart.items) || [];
+        return (checkoutData && checkoutData?.cart?.items) || [];
     }, [checkoutData]);
 
     /**
@@ -240,6 +241,8 @@ export const useCheckoutPage = (props = {}) => {
         setIsPlacingOrder(true);
     }, [cartId, getOrderDetails]);
 
+    const [, { dispatch }] = useEventingContext();
+
     // Go back to checkout if shopper logs in
     useEffect(() => {
         if (isSignedIn) {
@@ -290,10 +293,83 @@ export const useCheckoutPage = (props = {}) => {
         isPlacingOrder
     ]);
 
+    useEffect(() => {
+        if (
+            checkoutStep === CHECKOUT_STEP.SHIPPING_ADDRESS &&
+            cartItems.length
+        ) {
+            dispatch({
+                type: 'CHECKOUT_PAGE_VIEW',
+                payload: {
+                    cart_id: cartId,
+                    products: cartItems
+                }
+            });
+        } else if (reviewOrderButtonClicked) {
+            dispatch({
+                type: 'CHECKOUT_REVIEW_BUTTON_CLICKED',
+                payload: {
+                    cart_id: cartId
+                }
+            });
+        } else if (
+            placeOrderButtonClicked &&
+            orderDetailsData &&
+            orderDetailsData.cart
+        ) {
+            const shipping =
+                orderDetailsData.cart?.shipping_addresses &&
+                orderDetailsData.cart.shipping_addresses.reduce(
+                    (result, item) => {
+                        return [
+                            ...result,
+                            {
+                                ...item.selected_shipping_method
+                            }
+                        ];
+                    },
+                    []
+                );
+            const eventPayload = {
+                cart_id: cartId,
+                amount: orderDetailsData.cart.prices,
+                shipping: shipping,
+                payment: orderDetailsData.cart.selected_payment_method,
+                products: orderDetailsData.cart.items
+            };
+            if (isPlacingOrder) {
+                dispatch({
+                    type: 'CHECKOUT_PLACE_ORDER_BUTTON_CLICKED',
+                    payload: eventPayload
+                });
+            } else if (placeOrderData && orderDetailsData?.cart.id === cartId) {
+                dispatch({
+                    type: 'ORDER_CONFIRMATION_PAGE_VIEW',
+                    payload: {
+                        order_number:
+                            placeOrderData.placeOrder.order.order_number,
+                        ...eventPayload
+                    }
+                });
+            }
+        }
+    }, [
+        placeOrderButtonClicked,
+        cartId,
+        checkoutStep,
+        orderDetailsData,
+        cartItems,
+        isLoading,
+        dispatch,
+        placeOrderData,
+        isPlacingOrder,
+        reviewOrderButtonClicked
+    ]);
+
     return {
         activeContent,
         availablePaymentMethods: checkoutData
-            ? checkoutData.cart.available_payment_methods
+            ? checkoutData?.cart?.available_payment_methods
             : null,
         cartItems,
         checkoutStep,
@@ -302,7 +378,7 @@ export const useCheckoutPage = (props = {}) => {
         guestSignInUsername,
         handlePlaceOrder,
         hasError: !!checkoutError,
-        isCartEmpty: !(checkoutData && checkoutData.cart.total_quantity),
+        isCartEmpty: !(checkoutData && checkoutData?.cart?.total_quantity),
         isGuestCheckout: !isSignedIn,
         isLoading,
         isUpdating,

package/lib/talons/Cms/useCmsPage.js

@@ -3,6 +3,7 @@ import { useQuery } from '@apollo/client';
 
 import mergeOperations from '../../util/shallowMerge';
 import { useAppContext } from '../../context/app';
+import { useEventingContext } from '../../context/eventing';
 
 import DEFAULT_OPERATIONS from './cmsPage.gql';
 
@@ -19,6 +20,7 @@ export const useCmsPage = props => {
 
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
     const { getCMSPageQuery } = operations;
+    const [, { dispatch }] = useEventingContext();
 
     const { loading, data } = useQuery(getCMSPageQuery, {
         variables: {
@@ -51,6 +53,18 @@ export const useCmsPage = props => {
 
     const cmsPage = data ? data.cmsPage : null;
 
+    useEffect(() => {
+        if (!loading && cmsPage) {
+            dispatch({
+                type: 'CMS_PAGE_VIEW',
+                payload: {
+                    url_key: cmsPage.url_key,
+                    title: cmsPage.title
+                }
+            });
+        }
+    }, [loading, cmsPage, dispatch]);
+
     return {
         cmsPage,
         shouldShowLoadingIndicator

package/lib/talons/CreateAccount/useCreateAccount.js

@@ -9,6 +9,7 @@ import { retrieveCartId } from '../../store/actions/cart';
 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
@@ -49,6 +50,8 @@ export const useCreateAccount = props => {
         { getUserDetails, setToken }
     ] = useUserContext();
 
+    const [, { dispatch }] = useEventingContext();
+
     const [fetchCartId] = useMutation(createCartMutation);
 
     const [mergeCarts] = useMutation(mergeCartsMutation);
@@ -104,6 +107,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();
 
@@ -169,7 +182,8 @@ export const useCreateAccount = props => {
             fetchUserDetails,
             getCartDetails,
             fetchCartDetails,
-            onSubmit
+            onSubmit,
+            dispatch
         ]
     );
 

package/lib/talons/FilterModal/helpers.js

@@ -111,10 +111,16 @@ export const getFiltersFromSearch = initialValue => {
 export const sortFiltersArray = initialArray => {
     return initialArray.sort((a, b) => {
         // Place Category filter first
-        if (a['attribute_code'] === 'category_id') {
+        if (
+            a['attribute_code'] === 'category_id' ||
+            a['attribute_code'] === 'category_uid'
+        ) {
             return -1;
         }
-        if (b['attribute_code'] === 'category_id') {
+        if (
+            b['attribute_code'] === 'category_id' ||
+            b['attribute_code'] === 'category_uid'
+        ) {
             return 1;
         }
 

package/lib/talons/FilterModal/useFilterModal.js

@@ -55,6 +55,7 @@ export const useFilterModal = props => {
         // Disable category filtering when not on a search page.
         if (pathname !== '/search.html') {
             disabled.add('category_id');
+            disabled.add('category_uid');
         }
 
         return disabled;

package/lib/talons/FilterSidebar/useFilterSidebar.js

@@ -45,6 +45,7 @@ export const useFilterSidebar = props => {
         // Disable category filtering when not on a search page.
         if (pathname !== '/search.html') {
             disabled.add('category_id');
+            disabled.add('category_uid');
         }
 
         return disabled;

package/lib/talons/Gallery/useAddToCartButton.js

@@ -3,6 +3,7 @@ import { useMutation } from '@apollo/client';
 import { useHistory } from 'react-router-dom';
 
 import { useCartContext } from '../../context/cart';
+import { useEventingContext } from '../../context/eventing';
 import operations from './addToCart.gql';
 
 /**
@@ -30,6 +31,8 @@ const UNSUPPORTED_PRODUCT_TYPES = [
 export const useAddToCartButton = props => {
     const { item, urlSuffix } = props;
 
+    const [, { dispatch }] = useEventingContext();
+
     const [isLoading, setIsLoading] = useState(false);
 
     const isInStock = item.stock_status === 'IN_STOCK';
@@ -51,11 +54,13 @@ export const useAddToCartButton = props => {
             if (productType === 'SimpleProduct') {
                 setIsLoading(true);
 
+                const quantity = 1;
+
                 await addToCart({
                     variables: {
                         cartId,
                         cartItem: {
-                            quantity: 1,
+                            quantity,
                             entered_options: [
                                 {
                                     uid: item.uid,
@@ -67,6 +72,23 @@ export const useAddToCartButton = props => {
                     }
                 });
 
+                dispatch({
+                    type: 'CART_ADD_ITEM',
+                    payload: {
+                        cartId,
+                        sku: item.sku,
+                        name: item.name,
+                        priceTotal:
+                            item.price_range.maximum_price.final_price.value,
+                        currencyCode:
+                            item.price_range.maximum_price.final_price.currency,
+                        discountAmount:
+                            item.price_range.maximum_price.discount.amount_off,
+                        selectedOptions: null,
+                        quantity
+                    }
+                });
+
                 setIsLoading(false);
             } else if (productType === 'ConfigurableProduct') {
                 history.push(`${item.url_key}${urlSuffix || ''}`);
@@ -76,17 +98,7 @@ export const useAddToCartButton = props => {
         } catch (error) {
             console.error(error);
         }
-    }, [
-        addToCart,
-        cartId,
-        history,
-        item.sku,
-        item.url_key,
-        productType,
-        item.uid,
-        item.name,
-        urlSuffix
-    ]);
+    }, [productType, addToCart, cartId, item, dispatch, history, urlSuffix]);
 
     return {
         handleAddToCart,

package/lib/talons/Gallery/useGalleryItem.js

@@ -1,8 +1,86 @@
 import { isSupportedProductType as isSupported } from '@magento/peregrine/lib/util/isSupportedProductType';
+import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
+import { useCallback, useEffect, useRef } from 'react';
+import useIntersectionObserver from '@magento/peregrine/lib/hooks/useIntersectionObserver';
 
 export const useGalleryItem = (props = {}) => {
+    const [, { dispatch }] = useEventingContext();
+    const intersectionObserver = useIntersectionObserver();
     const { item, storeConfig } = props;
 
+    const finalPrice = item?.price_range?.maximum_price?.final_price?.value;
+    const discountAmount =
+        item?.price_range?.maximum_price?.discount?.amount_off;
+    const currencyCode =
+        item?.price_range?.maximum_price?.final_price?.currency;
+
+    const handleLinkClick = useCallback(() => {
+        dispatch({
+            type: 'PRODUCT_CLICK',
+            payload: {
+                name: item.name,
+                sku: item.sku,
+                priceTotal: finalPrice,
+                discountAmount,
+                currencyCode,
+                selectedOptions: null
+            }
+        });
+    }, [currencyCode, discountAmount, dispatch, finalPrice, item]);
+
+    const itemRef = useRef(null);
+    const contextRef = useRef({
+        dispatched: false,
+        timeOutId: null
+    });
+    useEffect(() => {
+        if (
+            typeof intersectionObserver === 'undefined' ||
+            !item ||
+            contextRef.current.dispatched
+        ) {
+            return;
+        }
+        const htmlElement = itemRef.current;
+        const onIntersection = entries => {
+            if (entries[0].isIntersecting) {
+                contextRef.current.timeOutId = setTimeout(() => {
+                    observer.unobserve(htmlElement);
+                    dispatch({
+                        type: 'PRODUCT_IMPRESSION',
+                        payload: {
+                            name: item.name,
+                            sku: item.sku,
+                            priceTotal: finalPrice,
+                            discountAmount,
+                            currencyCode,
+                            selectedOptions: null
+                        }
+                    });
+                    contextRef.current.dispatched = true;
+                }, 500);
+            } else {
+                clearTimeout(contextRef.current.timeOutId);
+            }
+        };
+        const observer = new intersectionObserver(onIntersection, {
+            threshold: 0.9
+        });
+        observer.observe(htmlElement);
+        return () => {
+            if (htmlElement) {
+                observer.unobserve(htmlElement);
+            }
+        };
+    }, [
+        currencyCode,
+        discountAmount,
+        dispatch,
+        finalPrice,
+        intersectionObserver,
+        item
+    ]);
+
     const productType = item ? item.__typename : null;
 
     const isSupportedProductType = isSupported(productType);
@@ -18,5 +96,11 @@ export const useGalleryItem = (props = {}) => {
               }
             : null;
 
-    return { ...props, wishlistButtonProps, isSupportedProductType };
+    return {
+        ...props,
+        itemRef,
+        handleLinkClick,
+        wishlistButtonProps,
+        isSupportedProductType
+    };
 };

package/lib/talons/Header/storeSwitcher.gql.js

@@ -14,20 +14,7 @@ export const GET_STORE_CONFIG_DATA = gql`
 export const GET_ROUTE_DATA = gql`
     query getRouteData($url: String!) {
         route(url: $url) {
-            type
-            # eslint-disable-next-line @graphql-eslint/require-id-when-available
-            ... on CmsPage {
-                identifier
-            }
-            # eslint-disable-next-line @graphql-eslint/require-id-when-available
-            ... on ProductInterface {
-                uid
-                __typename
-            }
-            # eslint-disable-next-line @graphql-eslint/require-id-when-available
-            ... on CategoryInterface {
-                uid
-            }
+            relative_url
         }
     }
 `;
@@ -36,10 +23,8 @@ export const GET_AVAILABLE_STORES_DATA = gql`
     query getAvailableStoresData {
         # eslint-disable-next-line @graphql-eslint/require-id-when-available
         availableStores {
-            category_url_suffix
             default_display_currency_code
             locale
-            product_url_suffix
             secure_base_media_url
             store_code
             store_group_code

package/lib/talons/Header/useAccountMenu.js

@@ -6,6 +6,7 @@ import mergeOperations from '../../util/shallowMerge';
 import { useUserContext } from '../../context/user';
 
 import DEFAULT_OPERATIONS from './accountMenu.gql';
+import { useEventingContext } from '../../context/eventing';
 
 /**
  * The useAccountMenu talon complements the AccountMenu component.
@@ -37,7 +38,12 @@ export const useAccountMenu = props => {
     const history = useHistory();
     const location = useLocation();
     const [revokeToken] = useMutation(signOutMutation);
-    const [{ isSignedIn: isUserSignedIn }, { signOut }] = useUserContext();
+    const [
+        { isSignedIn: isUserSignedIn, currentUser },
+        { signOut }
+    ] = useUserContext();
+
+    const [, { dispatch }] = useEventingContext();
 
     const handleSignOut = useCallback(async () => {
         setView('SIGNIN');
@@ -46,11 +52,24 @@ export const useAccountMenu = props => {
         // Delete cart/user data from the redux store.
         await signOut({ revokeToken });
 
+        dispatch({
+            type: 'USER_SIGN_OUT',
+            payload: {
+                ...currentUser
+            }
+        });
         // Refresh the page as a way to say "re-initialize". An alternative
         // would be to call apolloClient.resetStore() but that would require
         // a large refactor.
         history.go(0);
-    }, [history, revokeToken, setAccountMenuIsOpen, signOut]);
+    }, [
+        history,
+        revokeToken,
+        setAccountMenuIsOpen,
+        signOut,
+        currentUser,
+        dispatch
+    ]);
 
     const handleForgotPassword = useCallback(() => {
         setView('FORGOT_PASSWORD');