Merge branch 'develop' into jcharron/PWA-2227-use-sample-data-with-pe…

…rsonalized-content
magento · Feb 17, 2022 · 135bec2 · 135bec2
2 parents 77f24e3 + 803019f
commit 135bec2
Show file tree

Hide file tree

Showing 33 changed files with 874 additions and 85 deletions.
diff --git a/packages/peregrine/lib/hooks/useGoogleReCaptcha/__tests__/useGoogleReCaptcha.spec.js b/packages/peregrine/lib/hooks/useGoogleReCaptcha/__tests__/useGoogleReCaptcha.spec.js
@@ -94,9 +94,7 @@ describe('#useGoogleReCaptcha', () => {
               "generateReCaptchaData": [Function],
               "recaptchaLoading": true,
               "recaptchaWidgetProps": Object {
-                "containerElement": Object {
-                  "current": null,
-                },
+                "containerElement": [Function],
                 "shouldRender": false,
               },
             }
@@ -117,9 +115,7 @@ describe('#useGoogleReCaptcha', () => {
               "generateReCaptchaData": [Function],
               "recaptchaLoading": false,
               "recaptchaWidgetProps": Object {
-                "containerElement": Object {
-                  "current": null,
-                },
+                "containerElement": [Function],
                 "shouldRender": false,
               },
             }
@@ -162,7 +158,7 @@ describe('#useGoogleReCaptcha', () => {
             const containerElement = await result.current.recaptchaWidgetProps
                 .containerElement;
 
-            containerElement.current = inlineContainer;
+            containerElement(inlineContainer);
         });
 
         // Call script onload method
@@ -261,7 +257,7 @@ describe('#useGoogleReCaptcha', () => {
             const containerElement = await result.current.recaptchaWidgetProps
                 .containerElement;
 
-            containerElement.current = inlineContainer;
+            containerElement(inlineContainer);
         });
 
         // Call script onload method

diff --git a/packages/peregrine/lib/hooks/useGoogleReCaptcha/useGoogleReCaptcha.js b/packages/peregrine/lib/hooks/useGoogleReCaptcha/useGoogleReCaptcha.js
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useQuery } from '@apollo/client';
 
 import useScript from '@magento/peregrine/lib/hooks/useScript';
@@ -42,7 +42,14 @@ export const useGoogleReCaptcha = props => {
     const [widgetId, setWidgetId] = useState(null);
 
     // Container Reference to be used for the GoogleReCaptcha component
-    const inlineContainerElement = useRef(null);
+    const [inlineContainer, setInlineContainer] = useState(null);
+
+    // callback to update container element ref in case of mount/unmount
+    const updateInlineContainerRef = useCallback(node => {
+        if (node !== null) {
+            setInlineContainer(node);
+        }
+    }, []);
 
     const recaptchaBadge =
         configData?.recaptchaV3Config?.badge_position &&
@@ -87,8 +94,6 @@ export const useGoogleReCaptcha = props => {
 
     // Render inline widget manually
     useEffect(() => {
-        const inlineContainer = inlineContainerElement.current;
-
         // Only render if container is set and API is available
         if (
             inlineContainer !== null &&
@@ -109,7 +114,7 @@ export const useGoogleReCaptcha = props => {
                 inlineContainer.dataset.widgetId = id;
             }
         }
-    }, [apiIsReady, isInline, recaptchaKey, widgetId]);
+    }, [apiIsReady, isInline, recaptchaKey, widgetId, inlineContainer]);
 
     // Callback sets API as ready
     globalThis['onloadRecaptchaCallback'] = useCallback(() => {
@@ -164,7 +169,7 @@ export const useGoogleReCaptcha = props => {
     }, [apiIsReady, formAction, isInline, recaptchaKey, widgetId]);
 
     const recaptchaWidgetProps = {
-        containerElement: inlineContainerElement,
+        containerElement: updateInlineContainerRef,
         shouldRender: isInline && apiIsReady
     };
 
@@ -186,6 +191,6 @@ export const useGoogleReCaptcha = props => {
  * @property {Boolean} recaptchaLoading - Indicates if hook is loading data or loading the script.
  * @property {Function} generateReCaptchaData - The function to generate ReCaptcha Mutation data.
  * @property {Object} recaptchaWidgetProps - Props for the GoogleReCaptcha component.
- * @property {Object} recaptchaWidgetProps.containerElement - Container reference.
+ * @property {Function} recaptchaWidgetProps.containerElement - Container reference callback.
  * @property {Boolean} recaptchaWidgetProps.shouldRender - Checks if component should be rendered.
  */
diff --git a/...ons/AccountInformationPage/__tests__/__snapshots__/useAccountInformationPage.spec.js.snap b/...ons/AccountInformationPage/__tests__/__snapshots__/useAccountInformationPage.spec.js.snap
@@ -17,6 +17,7 @@ Object {
   "isDisabled": false,
   "isUpdateMode": false,
   "loadDataError": null,
+  "recaptchaWidgetProps": Object {},
   "shouldShowNewPassword": false,
   "showUpdateMode": [Function],
 }
@@ -61,6 +62,7 @@ Object {
   "isDisabled": false,
   "isUpdateMode": false,
   "loadDataError": null,
+  "recaptchaWidgetProps": Object {},
   "shouldShowNewPassword": false,
   "showUpdateMode": [Function],
 }
@@ -76,6 +78,7 @@ Object {
   "isDisabled": false,
   "isUpdateMode": false,
   "loadDataError": undefined,
+  "recaptchaWidgetProps": Object {},
   "shouldShowNewPassword": false,
   "showUpdateMode": [Function],
 }
@@ -109,6 +112,7 @@ Object {
   "isDisabled": false,
   "isUpdateMode": false,
   "loadDataError": null,
+  "recaptchaWidgetProps": Object {},
   "shouldShowNewPassword": false,
   "showUpdateMode": [Function],
 }

diff --git a/...s/peregrine/lib/talons/AccountInformationPage/__tests__/useAccountInformationPage.spec.js b/...s/peregrine/lib/talons/AccountInformationPage/__tests__/useAccountInformationPage.spec.js
@@ -41,6 +41,14 @@ jest.mock('@apollo/client', () => ({
     })
 }));
 
+jest.mock('../../../hooks/useGoogleReCaptcha', () => ({
+    useGoogleReCaptcha: jest.fn().mockReturnValue({
+        recaptchaLoading: false,
+        generateReCaptchaData: jest.fn(() => {}),
+        recaptchaWidgetProps: {}
+    })
+}));
+
 const Component = props => {
     const talonProps = useAccountInformationPage(props);
     return <i talonProps={talonProps} />;

diff --git a/packages/peregrine/lib/talons/AccountInformationPage/useAccountInformationPage.js b/packages/peregrine/lib/talons/AccountInformationPage/useAccountInformationPage.js
@@ -1,6 +1,7 @@
 import { useCallback, useMemo, useState } from 'react';
 import { useMutation, useQuery } from '@apollo/client';
 import { useUserContext } from '../../context/user';
+import { useGoogleReCaptcha } from '../../hooks/useGoogleReCaptcha';
 
 export const useAccountInformationPage = props => {
     const {
@@ -46,6 +47,15 @@ export const useAccountInformationPage = props => {
         }
     ] = useMutation(changeCustomerPasswordMutation);
 
+    const {
+        generateReCaptchaData,
+        recaptchaLoading,
+        recaptchaWidgetProps
+    } = useGoogleReCaptcha({
+        currentForm: 'CUSTOMER_EDIT',
+        formAction: 'editCustomer'
+    });
+
     const initialValues = useMemo(() => {
         if (accountInformationData) {
             return { customer: accountInformationData.customer };
@@ -97,11 +107,13 @@ export const useAccountInformationPage = props => {
                     });
                 }
                 if (password && newPassword) {
+                    const recaptchaDataForChangeCustomerPassword = await generateReCaptchaData();
                     await changeCustomerPassword({
                         variables: {
                             currentPassword: password,
                             newPassword: newPassword
-                        }
+                        },
+                        ...recaptchaDataForChangeCustomerPassword
                     });
                 }
                 // After submission, close the form if there were no errors.
@@ -117,10 +129,11 @@ export const useAccountInformationPage = props => {
             }
         },
         [
-            setCustomerInformation,
+            initialValues,
             handleCancel,
-            changeCustomerPassword,
-            initialValues
+            setCustomerInformation,
+            generateReCaptchaData,
+            changeCustomerPassword
         ]
     );
 
@@ -134,10 +147,14 @@ export const useAccountInformationPage = props => {
         handleSubmit,
         handleChangePassword,
         initialValues,
-        isDisabled: isUpdatingCustomerInformation || isChangingCustomerPassword,
+        isDisabled:
+            isUpdatingCustomerInformation ||
+            isChangingCustomerPassword ||
+            recaptchaLoading,
         isUpdateMode,
         loadDataError,
         shouldShowNewPassword,
-        showUpdateMode
+        showUpdateMode,
+        recaptchaWidgetProps
     };
 };
diff --git a/.../CheckoutPage/OrderConfirmationPage/__tests__/__snapshots__/useCreateAccount.spec.js.snap b/.../CheckoutPage/OrderConfirmationPage/__tests__/__snapshots__/useCreateAccount.spec.js.snap
@@ -15,6 +15,7 @@ Object {
     },
   },
   "isDisabled": false,
+  "recaptchaWidgetProps": Object {},
 }
 `;
 
@@ -33,5 +34,6 @@ Object {
     },
   },
   "isDisabled": false,
+  "recaptchaWidgetProps": Object {},
 }
 `;
diff --git a/...eregrine/lib/talons/CheckoutPage/OrderConfirmationPage/__tests__/useCreateAccount.spec.js b/...eregrine/lib/talons/CheckoutPage/OrderConfirmationPage/__tests__/useCreateAccount.spec.js
@@ -121,6 +121,14 @@ useCartContext.mockImplementation(() => {
 jest.mock('../../../../hooks/useAwaitQuery');
 useAwaitQuery.mockImplementation(jest.fn());
 
+jest.mock('../../../../hooks/useGoogleReCaptcha', () => ({
+    useGoogleReCaptcha: jest.fn().mockReturnValue({
+        recaptchaLoading: false,
+        generateReCaptchaData: jest.fn(() => {}),
+        recaptchaWidgetProps: {}
+    })
+}));
+
 const handleSubmit = jest.fn();
 
 const initialProps = {

diff --git a/packages/peregrine/lib/talons/CheckoutPage/OrderConfirmationPage/useCreateAccount.js b/packages/peregrine/lib/talons/CheckoutPage/OrderConfirmationPage/useCreateAccount.js
@@ -5,6 +5,7 @@ import mergeOperations from '../../../util/shallowMerge';
 import { useUserContext } from '../../../context/user';
 import { useCartContext } from '../../../context/cart';
 import { useAwaitQuery } from '../../../hooks/useAwaitQuery';
+import { useGoogleReCaptcha } from '../../../hooks/useGoogleReCaptcha';
 
 import DEFAULT_OPERATIONS from './createAccount.gql';
 
@@ -23,7 +24,8 @@ import DEFAULT_OPERATIONS from './createAccount.gql';
  *   errors: Map,
  *   handleSubmit: function,
  *   isDisabled: boolean,
- *   initialValues: object
+ *   initialValues: object,
+ *   recaptchaWidgetProps: { containerElement: function, shouldRender: boolean }
  * }}
  */
 export const useCreateAccount = props => {
@@ -62,10 +64,22 @@ export const useCreateAccount = props => {
     const fetchUserDetails = useAwaitQuery(getCustomerQuery);
     const fetchCartDetails = useAwaitQuery(getCartDetailsQuery);
 
+    const {
+        generateReCaptchaData,
+        recaptchaLoading,
+        recaptchaWidgetProps
+    } = useGoogleReCaptcha({
+        currentForm: 'CUSTOMER_CREATE',
+        formAction: 'createAccount'
+    });
+
     const handleSubmit = useCallback(
         async formValues => {
             setIsSubmitting(true);
             try {
+                // Get reCaptchaV3 Data for createAccount mutation
+                const recaptchaDataForCreateAccount = await generateReCaptchaData();
+
                 // Create the account and then sign in.
                 await createAccount({
                     variables: {
@@ -74,13 +88,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);
@@ -117,6 +137,7 @@ export const useCreateAccount = props => {
             fetchCartDetails,
             fetchCartId,
             fetchUserDetails,
+            generateReCaptchaData,
             getCartDetails,
             getUserDetails,
             onSubmit,
@@ -147,7 +168,8 @@ export const useCreateAccount = props => {
     return {
         errors,
         handleSubmit,
-        isDisabled: isSubmitting || isGettingDetails,
-        initialValues: sanitizedInitialValues
+        isDisabled: isSubmitting || isGettingDetails || recaptchaLoading,
+        initialValues: sanitizedInitialValues,
+        recaptchaWidgetProps
     };
 };
diff --git a/.../peregrine/lib/talons/CreateAccount/__tests__/__snapshots__/useCreateAccount.spec.js.snap b/.../peregrine/lib/talons/CreateAccount/__tests__/__snapshots__/useCreateAccount.spec.js.snap
@@ -24,5 +24,6 @@ Object {
     "userName": "gooseton",
   },
   "isDisabled": false,
+  "recaptchaWidgetProps": Object {},
 }
 `;
diff --git a/packages/peregrine/lib/talons/CreateAccount/__tests__/useCreateAccount.spec.js b/packages/peregrine/lib/talons/CreateAccount/__tests__/useCreateAccount.spec.js
@@ -50,6 +50,14 @@ jest.mock('../../../store/actions/cart', () => {
     });
 });
 
+jest.mock('../../../hooks/useGoogleReCaptcha', () => ({
+    useGoogleReCaptcha: jest.fn().mockReturnValue({
+        recaptchaLoading: false,
+        generateReCaptchaData: jest.fn(() => {}),
+        recaptchaWidgetProps: {}
+    })
+}));
+
 const Component = props => {
     const talonProps = useCreateAccount(props);