@magento/peregrine 12.2.0 → 12.3.0

package/lib/talons/CmsDynamicBlock/useCmsDynamicBlock.js

@@ -0,0 +1,211 @@
+import { useEffect, useCallback } from 'react';
+import { useQuery } from '@apollo/client';
+import { useLocation } from 'react-router-dom';
+
+import { useCartContext } from '@magento/peregrine/lib/context/cart';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+
+import DEFAULT_OPERATIONS from './cmsDynamicBlock.gql';
+
+export const flatten = cartData => {
+    const cartItems = cartData?.cart?.items || [];
+    const totalWeight = cartItems.reduce((prevItem, currentItem) => {
+        const { product, quantity, configured_variant } = currentItem;
+
+        const currentWeight = configured_variant
+            ? configured_variant.weight
+            : product.weight || 0;
+
+        return prevItem + currentWeight * quantity;
+    }, 0);
+    const shippingAddresses = cartData?.cart?.shipping_addresses || [];
+    const subtotalExcludingTax =
+        cartData?.cart?.prices?.subtotal_excluding_tax?.value || 0;
+    const subtotalIncludingTax =
+        cartData?.cart?.prices?.subtotal_including_tax?.value || 0;
+    const selectedPaymentMethod =
+        cartData?.cart?.selected_payment_method?.code || null;
+    const shippingCountryCode = shippingAddresses[0]?.country?.code || null;
+    const shippingPostCode = shippingAddresses[0]?.postcode || null;
+    const shippingRegionCode = shippingAddresses[0]?.region?.code || null;
+    const shippingRegionId = shippingAddresses[0]?.region?.region_id || null;
+    const selectedShippingMethod =
+        shippingAddresses[0]?.selected_shipping_method?.method_code || null;
+    const totalQuantity = cartData?.cart?.total_quantity || 0;
+
+    return JSON.stringify([
+        totalWeight,
+        subtotalExcludingTax,
+        subtotalIncludingTax,
+        selectedPaymentMethod,
+        shippingCountryCode,
+        shippingPostCode,
+        shippingRegionCode,
+        shippingRegionId,
+        selectedShippingMethod,
+        totalQuantity
+    ]);
+};
+
+/**
+ * This talon contains the logic for a cms dynamic block component.
+ * It performs effects and returns a data object containing values for rendering the component.
+ *
+ * This talon performs the following effects:
+ *
+ * - Get cms dynamic block based on type, locations and given uids
+ * - Get sales rules data from cart to refetch dynamic block query when conditions change
+ * - Update the {@link CmsDynamicBlockTalonProps} values with the data returned by the query
+ *
+ * @function
+ *
+ * @param {Array} props.locations - array of locations of cms dynamic blocks
+ * @param {(String|String[])} props.uids - single or multiple uids of cms dynamic blocks
+ * @param {String} props.type - type of cms dynamic blocks
+ * @param {CmsDynamicBlockOperations} [props.operations]
+ *
+ * @returns {CmsDynamicBlockTalonProps}
+ *
+ * @example <caption>Importing into your project</caption>
+ * import { useCmsDynamicBlock } from '@magento/peregrine/lib/talons/CmsDynamicBlock/useCmsDynamicBlock';
+ */
+export const useCmsDynamicBlock = props => {
+    const { locations, uids, type } = props;
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const {
+        getCmsDynamicBlocksQuery,
+        getSalesRulesDataQuery,
+        getStoreConfigData,
+        getProductDetailQuery
+    } = operations;
+
+    const [{ cartId }] = useCartContext();
+    const { pathname } = useLocation();
+
+    // Get Product Data from cache
+    const { data: storeConfigData, loading: storeConfigLoading } = useQuery(
+        getStoreConfigData
+    );
+    const slug = pathname.split('/').pop();
+    const productUrlSuffix = storeConfigData?.storeConfig?.product_url_suffix;
+    const urlKey = productUrlSuffix ? slug.replace(productUrlSuffix, '') : slug;
+    const { data: productData, loading: productDataLoading } = useQuery(
+        getProductDetailQuery,
+        {
+            skip: !storeConfigData,
+            variables: {
+                urlKey
+            }
+        }
+    );
+
+    // @TODO: Update with uid when done in Product Root Component
+    const products =
+        productData?.products?.items && productData.products.items.length > 0
+            ? productData.products.items
+            : [];
+    const productUid = products.find(item => item.url_key === urlKey)?.uid;
+
+    const { client, loading, error, data, refetch } = useQuery(
+        getCmsDynamicBlocksQuery,
+        {
+            variables: {
+                cartId,
+                type,
+                locations,
+                uids,
+                ...(productUid ? { productId: productUid } : {})
+            },
+            skip: !cartId
+        }
+    );
+
+    const { loading: cartLoading, data: cartData } = useQuery(
+        getSalesRulesDataQuery,
+        {
+            variables: { cartId },
+            skip: !cartId
+        }
+    );
+
+    const currentSalesRulesData = flatten(cartData);
+    const isLoading =
+        loading || cartLoading || storeConfigLoading || productDataLoading;
+    const cachedSalesRulesData = data?.dynamicBlocks?.salesRulesData;
+
+    const updateSalesRulesData = useCallback(
+        (currentData, currentSalesRulesData) => {
+            client.writeQuery({
+                query: getCmsDynamicBlocksQuery,
+                data: {
+                    dynamicBlocks: {
+                        ...currentData,
+                        salesRulesData: currentSalesRulesData
+                    }
+                },
+                variables: {
+                    cartId,
+                    type,
+                    locations,
+                    uids,
+                    ...(productUid ? { productId: productUid } : {})
+                },
+                skip: !cartId
+            });
+        },
+        [
+            cartId,
+            client,
+            getCmsDynamicBlocksQuery,
+            locations,
+            productUid,
+            type,
+            uids
+        ]
+    );
+
+    useEffect(() => {
+        if (data && cachedSalesRulesData !== currentSalesRulesData) {
+            if (!cachedSalesRulesData) {
+                // Save cart conditions data in cache
+                updateSalesRulesData(data.dynamicBlocks, currentSalesRulesData);
+            } else {
+                // Refetch cms data if there's a mismatch
+                refetch();
+            }
+        }
+    }, [
+        cachedSalesRulesData,
+        currentSalesRulesData,
+        data,
+        refetch,
+        updateSalesRulesData
+    ]);
+
+    return {
+        loading: isLoading,
+        error,
+        data
+    };
+};
+
+/** JSDocs type definitions */
+
+/**
+ * Props data to use when rendering a gift options component.
+ *
+ * @typedef {Object} CmsDynamicBlockTalonProps
+ *
+ * @property {Boolean} loading Query loading indicator.
+ * @property {Object} error Error of the GraphQl query.
+ * @property {Object} data Data returned by the query.
+ */
+
+/**
+ * This is a type used by the {@link useCmsDynamicBlock} talon.
+ *
+ * @typedef {Object} CmsDynamicBlockOperations
+ *
+ * @property {GraphQLAST} getSalesRulesDataQuery get sales rules data from cart.
+ * @property {GraphQLAST} getCmsDynamicBlocksQuery get cms dynamics blocks.
+ */

package/lib/talons/CreateAccount/useCreateAccount.js

@@ -6,6 +6,7 @@ import { useUserContext } from '../../context/user';
 import { useCartContext } from '../../context/cart';
 import { useAwaitQuery } from '../../hooks/useAwaitQuery';
 import { retrieveCartId } from '../../store/actions/cart';
+import { useGoogleReCaptcha } from '../../hooks/useGoogleReCaptcha';
 
 import DEFAULT_OPERATIONS from './createAccount.gql';
 
@@ -68,6 +69,15 @@ export const useCreateAccount = props => {
     const fetchUserDetails = useAwaitQuery(getCustomerQuery);
     const fetchCartDetails = useAwaitQuery(getCartDetailsQuery);
 
+    const {
+        generateReCaptchaData,
+        recaptchaLoading,
+        recaptchaWidgetProps
+    } = useGoogleReCaptcha({
+        currentForm: 'CUSTOMER_CREATE',
+        formAction: 'createAccount'
+    });
+
     const handleCancel = useCallback(() => {
         onCancel();
     }, [onCancel]);
@@ -79,6 +89,9 @@ export const useCreateAccount = props => {
                 // Get source cart id (guest cart id).
                 const sourceCartId = cartId;
 
+                // Get reCaptchaV3 Data for createAccount mutation
+                const recaptchaDataForCreateAccount = await generateReCaptchaData();
+
                 // Create the account and then sign in.
                 await createAccount({
                     variables: {
@@ -87,13 +100,19 @@ export const useCreateAccount = props => {
                         lastname: formValues.customer.lastname,
                         password: formValues.password,
                         is_subscribed: !!formValues.subscribe
-                    }
+                    },
+                    ...recaptchaDataForCreateAccount
                 });
+
+                // Get reCaptchaV3 Data for signIn mutation
+                const recaptchaDataForSignIn = await generateReCaptchaData();
+
                 const signInResponse = await signIn({
                     variables: {
                         email: formValues.customer.email,
                         password: formValues.password
-                    }
+                    },
+                    ...recaptchaDataForSignIn
                 });
                 const token = signInResponse.data.generateCustomerToken.token;
                 await setToken(token);
@@ -137,11 +156,12 @@ export const useCreateAccount = props => {
         },
         [
             cartId,
-            apolloClient,
-            removeCart,
+            generateReCaptchaData,
             createAccount,
             signIn,
             setToken,
+            apolloClient,
+            removeCart,
             createCart,
             fetchCartId,
             mergeCarts,
@@ -176,7 +196,8 @@ export const useCreateAccount = props => {
         handleCancel,
         handleSubmit,
         initialValues: sanitizedInitialValues,
-        isDisabled: isSubmitting || isGettingDetails
+        isDisabled: isSubmitting || isGettingDetails || recaptchaLoading,
+        recaptchaWidgetProps
     };
 };
 
@@ -237,4 +258,7 @@ export const useCreateAccount = props => {
  * @property {Function} handleSubmit callback function to handle form submission
  * @property {SanitizedInitialValues} initialValues initial values for the create account form
  * @property {Boolean} isDisabled true if either details are being fetched or form is being submitted. False otherwise.
+ * @property {Object} recaptchaWidgetProps - Props for the GoogleReCaptcha component.
+ * @property {Function} recaptchaWidgetProps.containerElement - Container reference callback.
+ * @property {Boolean} recaptchaWidgetProps.shouldRender - Checks if component should be rendered.
  */

package/lib/talons/ForgotPassword/useForgotPassword.js

@@ -1,6 +1,8 @@
 import { useCallback, useState } from 'react';
 import { useMutation } from '@apollo/client';
 
+import { useGoogleReCaptcha } from '@magento/peregrine/lib/hooks/useGoogleReCaptcha';
+
 /**
  * Returns props necessary to render a ForgotPassword form.
  *
@@ -25,17 +27,34 @@ export const useForgotPassword = props => {
         { error: requestResetEmailError, loading: isResettingPassword }
     ] = useMutation(mutations.requestPasswordResetEmailMutation);
 
+    const {
+        recaptchaLoading,
+        generateReCaptchaData,
+        recaptchaWidgetProps
+    } = useGoogleReCaptcha({
+        currentForm: 'CUSTOMER_FORGOT_PASSWORD',
+        formAction: 'forgotPassword'
+    });
+
     const handleFormSubmit = useCallback(
         async ({ email }) => {
             try {
-                await requestResetEmail({ variables: { email } });
+                const reCaptchaData = await generateReCaptchaData();
+
+                await requestResetEmail({
+                    variables: { email },
+                    ...reCaptchaData
+                });
+
                 setForgotPasswordEmail(email);
                 setCompleted(true);
-            } catch (err) {
+            } catch (error) {
+                // Error is logged by apollo link - no need to double log.
+
                 setCompleted(false);
             }
         },
-        [requestResetEmail]
+        [generateReCaptchaData, requestResetEmail]
     );
 
     const handleCancel = useCallback(() => {
@@ -48,7 +67,8 @@ export const useForgotPassword = props => {
         handleCancel,
         handleFormSubmit,
         hasCompleted,
-        isResettingPassword
+        isResettingPassword: isResettingPassword || recaptchaLoading,
+        recaptchaWidgetProps
     };
 };
 
@@ -77,5 +97,6 @@ export const useForgotPassword = props => {
  * @property {Function} handleCancel Callback function to handle form cancellations
  * @property {Function} handleFormSubmit Callback function to handle form submission
  * @property {Boolean} hasCompleted True if password reset mutation has completed. False otherwise
- * @property {Boolean} isResettingPassword True if password reset mutation is in progress. False otherwise
+ * @property {Boolean} isResettingPassword True if form awaits events. False otherwise
+ * @property {Object} recaptchaWidgetProps Props for the GoogleReCaptcha component
  */

package/lib/talons/Link/useLink.js

@@ -6,7 +6,8 @@ import mergeOperations from '../../util/shallowMerge';
 import DEFAULT_OPERATIONS from '../MagentoRoute/magentoRoute.gql';
 
 const useLink = (props, passedOperations = {}) => {
-    const { prefetchType: shouldPrefetch, innerRef: originalRef, to } = props;
+    const { innerRef: originalRef, to } = props;
+    const shouldPrefetch = props.prefetchType || props.shouldPrefetch;
     const operations = shouldPrefetch
         ? mergeOperations(DEFAULT_OPERATIONS, passedOperations)
         : {};

package/lib/talons/MiniCart/miniCartFragments.gql.js

@@ -10,6 +10,10 @@ export const MiniCartFragment = gql`
                 currency
                 value
             }
+            subtotal_including_tax {
+                currency
+                value
+            }
         }
         ...ProductListFragment
     }

package/lib/talons/MyAccount/useResetPassword.js

@@ -2,6 +2,8 @@ import { useState, useMemo, useCallback } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useMutation } from '@apollo/client';
 
+import { useGoogleReCaptcha } from '@magento/peregrine/lib/hooks/useGoogleReCaptcha';
+
 /**
  * Returns props necessary to render a ResetPassword form.
  *
@@ -22,6 +24,15 @@ export const useResetPassword = props => {
         { error: resetPasswordErrors, loading }
     ] = useMutation(mutations.resetPasswordMutation);
 
+    const {
+        recaptchaLoading,
+        generateReCaptchaData,
+        recaptchaWidgetProps
+    } = useGoogleReCaptcha({
+        currentForm: 'CUSTOMER_FORGOT_PASSWORD',
+        formAction: 'resetPassword'
+    });
+
     const searchParams = useMemo(() => new URLSearchParams(location.search), [
         location
     ]);
@@ -31,25 +42,31 @@ export const useResetPassword = props => {
         async ({ email, newPassword }) => {
             try {
                 if (email && token && newPassword) {
+                    const reCaptchaData = await generateReCaptchaData();
+
                     await resetPassword({
-                        variables: { email, token, newPassword }
+                        variables: { email, token, newPassword },
+                        ...reCaptchaData
                     });
 
                     setHasCompleted(true);
                 }
             } catch (err) {
+                // Error is logged by apollo link - no need to double log.
+
                 setHasCompleted(false);
             }
         },
-        [resetPassword, token]
+        [generateReCaptchaData, resetPassword, token]
     );
 
     return {
         formErrors: [resetPasswordErrors],
         handleSubmit,
         hasCompleted,
-        loading,
-        token
+        loading: loading || recaptchaLoading,
+        token,
+        recaptchaWidgetProps
     };
 };
 
@@ -76,6 +93,7 @@ export const useResetPassword = props => {
  * @property {Array} formErrors A list of form errors
  * @property {Function} handleSubmit Callback function to handle form submission
  * @property {Boolean} hasCompleted True if password reset mutation has completed. False otherwise
- * @property {Boolean} loading True if password reset mutation is in progress. False otherwise
+ * @property {Boolean} loading True if form awaits events. False otherwise
  * @property {String} token token needed for password reset, will be sent in the mutation
+ * @property {Object} recaptchaWidgetProps Props for the GoogleReCaptcha component
  */

package/lib/talons/RootComponents/Category/useCategory.js

@@ -54,7 +54,7 @@ export const useCategory = props => {
     const { currentPage, totalPages } = paginationValues;
     const { setCurrentPage, setTotalPages } = paginationApi;
 
-    const sortProps = useSort();
+    const sortProps = useSort({ sortFromSearch: false });
     const [currentSort] = sortProps;
 
     // Keep track of the sort criteria so we can tell when they change.

package/lib/talons/RootComponents/Product/useProduct.js

@@ -40,13 +40,8 @@ export const useProduct = props => {
         nextFetchPolicy: 'cache-first'
     });
 
-    const productUrlSuffix = useMemo(() => {
-        if (storeConfigData) {
-            return storeConfigData.storeConfig.product_url_suffix;
-        }
-    }, [storeConfigData]);
-
     const slug = pathname.split('/').pop();
+    const productUrlSuffix = storeConfigData?.storeConfig?.product_url_suffix;
     const urlKey = productUrlSuffix ? slug.replace(productUrlSuffix, '') : slug;
 
     const { error, loading, data } = useQuery(getProductDetailQuery, {

package/lib/talons/SearchPage/useSearchPage.js

@@ -44,7 +44,7 @@ export const useSearchPage = (props = {}) => {
 
     const pageSize = pageSizeData && pageSizeData.storeConfig.grid_per_page;
 
-    const sortProps = useSort();
+    const sortProps = useSort({ sortFromSearch: true });
     const [currentSort] = sortProps;
     const { sortAttribute, sortDirection } = currentSort;
     // Keep track of the sort criteria so we can tell when they change.

package/lib/talons/SignIn/useSignIn.js

@@ -1,6 +1,7 @@
 import { useCallback, useRef, useState, useMemo } from 'react';
 import { useApolloClient, useMutation } from '@apollo/client';
 
+import { useGoogleReCaptcha } from '../../hooks/useGoogleReCaptcha/useGoogleReCaptcha';
 import mergeOperations from '../../util/shallowMerge';
 import { useCartContext } from '../../context/cart';
 import { useUserContext } from '../../context/user';
@@ -42,6 +43,15 @@ export const useSignIn = props => {
         fetchPolicy: 'no-cache'
     });
 
+    const {
+        generateReCaptchaData,
+        recaptchaLoading,
+        recaptchaWidgetProps
+    } = useGoogleReCaptcha({
+        currentForm: 'CUSTOMER_LOGIN',
+        formAction: 'signIn'
+    });
+
     const [fetchCartId] = useMutation(createCartMutation);
     const [mergeCarts] = useMutation(mergeCartsMutation);
     const fetchUserDetails = useAwaitQuery(getCustomerQuery);
@@ -57,16 +67,23 @@ export const useSignIn = props => {
                 // Get source cart id (guest cart id).
                 const sourceCartId = cartId;
 
+                // Get recaptchaV3 data for login
+                const recaptchaData = await generateReCaptchaData();
+
                 // Sign in and set the token.
                 const signInResponse = await signIn({
-                    variables: { email, password }
+                    variables: {
+                        email,
+                        password
+                    },
+                    ...recaptchaData
                 });
                 const token = signInResponse.data.generateCustomerToken.token;
                 await setToken(token);
 
                 // Clear all cart/customer data from cache and redux.
                 await apolloClient.clearCacheData(apolloClient, 'cart');
-                await apolloClient.clearCacheData(apolloClient, 'checkout');
+                await apolloClient.clearCacheData(apolloClient, 'customer');
                 await removeCart();
 
                 // Create and get the customer's cart id.
@@ -96,10 +113,11 @@ export const useSignIn = props => {
         },
         [
             cartId,
-            apolloClient,
-            removeCart,
+            generateReCaptchaData,
             signIn,
             setToken,
+            apolloClient,
+            removeCart,
             createCart,
             fetchCartId,
             mergeCarts,
@@ -144,7 +162,8 @@ export const useSignIn = props => {
         handleCreateAccount,
         handleForgotPassword,
         handleSubmit,
-        isBusy: isGettingDetails || isSigningIn,
-        setFormApi
+        isBusy: isGettingDetails || isSigningIn || recaptchaLoading,
+        setFormApi,
+        recaptchaWidgetProps
     };
 };

package/lib/talons/WishlistPage/createWishlist.gql.js

@@ -16,6 +16,7 @@ export const GET_MULTIPLE_WISHLISTS_ENABLED = gql`
         storeConfig {
             store_code
             enable_multiple_wishlists
+            maximum_number_of_wishlists
         }
     }
 `;

package/lib/talons/WishlistPage/useActionMenu.js

@@ -99,10 +99,10 @@ export const useActionMenu = (props = {}) => {
         [getCustomerWishlistQuery, id, updateWishlist]
     );
 
-    const errors = useMemo(
-        () => (displayError ? [updateWishlistErrors] : [false]),
-        [updateWishlistErrors, displayError]
-    );
+    const errors = useMemo(() => (displayError ? [updateWishlistErrors] : []), [
+        updateWishlistErrors,
+        displayError
+    ]);
 
     return {
         editFavoritesListIsOpen,

package/lib/talons/WishlistPage/useCreateWishlist.js

@@ -7,10 +7,12 @@ import WISHLIST_PAGE_OPERATIONS from './wishlistPage.gql';
 
 /**
  * @function
+ * @param {number} props.numberOfWishlists - The current number of wishlists created
  *
  * @returns {CreateWishListProps}
  */
-export const useCreateWishlist = (props = {}) => {
+export const useCreateWishlist = (props = { numberOfWishlists: 1 }) => {
+    const { numberOfWishlists } = props;
     const operations = mergeOperations(
         DEFAULT_OPERATIONS,
         WISHLIST_PAGE_OPERATIONS,
@@ -39,11 +41,12 @@ export const useCreateWishlist = (props = {}) => {
     const shouldRender = useMemo(() => {
         return (
             (storeConfigData &&
-                storeConfigData.storeConfig.enable_multiple_wishlists ===
-                    '1') ||
+                storeConfigData.storeConfig.enable_multiple_wishlists === '1' &&
+                numberOfWishlists <
+                    storeConfigData.storeConfig.maximum_number_of_wishlists) ||
             false
         );
-    }, [storeConfigData]);
+    }, [storeConfigData, numberOfWishlists]);
 
     const handleShowModal = useCallback(() => {
         setIsModalOpen(true);

package/lib/talons/WishlistPage/useWishlistItem.js

@@ -80,9 +80,10 @@ export const useWishlistItem = props => {
         ) {
             const selectedOptionsArray = selectedConfigurableOptions.map(
                 selectedOption => {
+                    // TODO: Use configurable_product_option_uid for ConfigurableWishlistItem when available in 2.4.5
                     const {
-                        configurable_product_option_uid: attributeId,
-                        configurable_product_option_value_uid: selectedValueId
+                        id: attributeId,
+                        value_id: selectedValueId
                     } = selectedOption;
                     const configurableOption = configurableOptions.find(
                         option => option.attribute_id_v2 === attributeId

package/lib/talons/WishlistPage/wishlistConfig.gql.ee.js

@@ -7,6 +7,7 @@ export const GET_WISHLIST_CONFIG = gql`
             store_code
             magento_wishlist_general_is_enabled
             enable_multiple_wishlists
+            maximum_number_of_wishlists
         }
     }
 `;

package/lib/talons/WishlistPage/wishlistItemFragments.gql.js

@@ -47,6 +47,7 @@ export const WishlistItemFragment = gql`
                 }
             }
         }
+        # TODO: Use configurable_product_option_uid for ConfigurableWishlistItem when available in 2.4.5
         ... on ConfigurableWishlistItem {
             configurable_options {
                 id

package/lib/util/configuredVariant.js

@@ -1,12 +1,16 @@
-// Resolves configured variant for configurable cart item.
-// This field is proposed in the https://github.com/magento/magento2/pull/30817
+/**
+ * This function resolves configured variant for configurable cart item.
+ * This field is proposed in the https://github.com/magento/magento2/pull/30817
+ * @param {Object} configured_options An array of product variant options
+ * @param {Object} product A configurable product object with a variants property.
+ *
+ * @returns {Object | undefined}
+ */
 export default function configuredVariant(configured_options, product) {
-    if (!configured_options || !product.variants) return;
+    if (!configured_options || !product?.variants) return;
     const optionUids = configured_options
         .map(option => {
-            return Buffer.from(
-                `configurable/${option.id}/${option.value_id}`
-            ).toString('base64');
+            return option.configurable_product_option_value_uid;
         })
         .sort()
         .toString();