@magento/peregrine 12.2.0-alpha.3 → 12.3.0-alpha.1

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();

package/package.json

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

package/lib/talons/CartPage/PriceAdjustments/GiftOptions/client-schema.graphql

@@ -1,7 +0,0 @@
-# Mocked client fields used for gift receipt and message components
-# TODO: As of 2.4.2 these fields now exist, we should remove these and update components.
-extend type Cart {
-    include_gift_receipt: Boolean!
-    include_printed_card: Boolean!
-    local_gift_message: String
-}