[PWA-1512]: Check if email is associated with account in guest checko…

…ut (magento#3529) * PWA-1512 Add dismissAction option to toast * PWA-1521 Add isEmailAvailable query to operations * PWA-1512 Add email verification and toast features * PWA-1512 Add translations * Hide errors from getEmailAvailable query * Use "key" prop instead of conditional rendering * Add unit tests * Update snapshots * Remove unnecessary snapshot test * Add Cypress coverage * Rollback cypress config changes * Fix failing cypress tests * Update propTypes * Add onpaste handler * Remove console.log * Fix unit tests Co-authored-by: Eric Oeur <[email protected]>
jaydubb12 · Dec 8, 2021 · 06524f9 · 06524f9
1 parent 3c2d50d
commit 06524f9
Show file tree

Hide file tree

Showing 30 changed files with 639 additions and 31 deletions.
diff --git a/packages/peregrine/lib/Toasts/useToasts.js b/packages/peregrine/lib/Toasts/useToasts.js
@@ -100,6 +100,11 @@ export const useToasts = () => {
          *   This property is optional when creating toasts.
          * @property {String} [actionText] Text to display as a call to action.
          *   This property is optional when creating toasts.
+         * @property {Bool} [hasDismissAction] Indicates whether the toast should have a
+         *   dismiss action with the same behavior as the dismiss icon.
+         *   This property is optional when creating toasts.
+         * @property {String} [dismissActionText] Text to display as a call to dissmisAction.
+         *   This property is optional when creating toasts.
          * @property {Function} [onAction] Callback invoked when a user clicks the action
          *   text.
          *   This property is optional when creating toasts.

diff --git a/...outPage/ShippingInformation/AddressForm/__tests__/__snapshots__/useGuestForm.spec.js.snap b/...outPage/ShippingInformation/AddressForm/__tests__/__snapshots__/useGuestForm.spec.js.snap
@@ -54,6 +54,8 @@ Object {
   },
   "handleCancel": [Function],
   "handleSubmit": [Function],
+  "handleToastAction": [Function],
+  "handleValidateEmail": [Function],
   "initialValues": Object {
     "city": "Manhattan",
     "country": "US",
@@ -74,5 +76,6 @@ Object {
   },
   "isSaving": false,
   "isUpdate": true,
+  "showSignInToast": false,
 }
 `;
diff --git a/...ne/lib/talons/CheckoutPage/ShippingInformation/AddressForm/__tests__/useGuestForm.spec.js b/...ne/lib/talons/CheckoutPage/ShippingInformation/AddressForm/__tests__/useGuestForm.spec.js
@@ -1,14 +1,20 @@
 import React from 'react';
 import { act } from 'react-test-renderer';
-import { useMutation } from '@apollo/client';
+import { useLazyQuery, useMutation } from '@apollo/client';
 
 import createTestInstance from '../../../../../util/createTestInstance';
 import { useGuestForm } from '../useGuestForm';
 
 jest.mock('@apollo/client', () => ({
     useMutation: jest
         .fn()
-        .mockReturnValue([jest.fn(), { called: false, loading: false }])
+        .mockReturnValue([jest.fn(), { called: false, loading: false }]),
+    useLazyQuery: jest
+        .fn()
+        .mockReturnValue([
+            jest.fn(),
+            { data: null, called: false, loading: false, error: null }
+        ])
 }));
 
 jest.mock('../../../../../context/cart', () => {
@@ -221,3 +227,71 @@ test('should call onSuccess on mutation success', () => {
 
     expect(onSuccess).toHaveBeenCalled();
 });
+
+test('handleValidateEmail calls isEmailAvailable query if email is valid', () => {
+    const validadeEmailQuery = jest.fn();
+    useLazyQuery.mockReturnValueOnce([validadeEmailQuery, { data: null }]);
+
+    const tree = createTestInstance(
+        <Component mutations={{}} shippingData={shippingData} />
+    );
+
+    const { root } = tree;
+    const { talonProps } = root.findByType('i').props;
+    const { handleValidateEmail } = talonProps;
+
+    handleValidateEmail();
+    expect(validadeEmailQuery).not.toHaveBeenCalled();
+    handleValidateEmail('testmail.com');
+    expect(validadeEmailQuery).not.toHaveBeenCalled();
+    handleValidateEmail('[email protected]');
+    expect(validadeEmailQuery).toHaveBeenCalled();
+});
+
+test('sets signIn toast visible when email is not available', () => {
+    const validadeEmailQuery = jest.fn();
+    useLazyQuery.mockReturnValueOnce([
+        validadeEmailQuery,
+        {
+            data: {
+                isEmailAvailable: {
+                    is_email_available: false
+                }
+            }
+        }
+    ]);
+
+    const tree = createTestInstance(
+        <Component mutations={{}} shippingData={shippingData} />
+    );
+
+    const { root } = tree;
+    const { talonProps } = root.findByType('i').props;
+    const { showSignInToast } = talonProps;
+
+    expect(showSignInToast).toBe(true);
+});
+
+test('handleToastAction fires up defined toast callback action', () => {
+    const removeToast = jest.fn();
+    const setGuestSignInUsername = jest.fn();
+    const toggleSignInContent = jest.fn();
+
+    const tree = createTestInstance(
+        <Component
+            mutations={{}}
+            shippingData={shippingData}
+            toggleSignInContent={toggleSignInContent}
+            setGuestSignInUsername={setGuestSignInUsername}
+        />
+    );
+
+    const { root } = tree;
+    const { talonProps } = root.findByType('i').props;
+    const { handleToastAction } = talonProps;
+
+    handleToastAction(removeToast, '[email protected]');
+    expect(setGuestSignInUsername).toHaveBeenCalledWith('[email protected]');
+    expect(toggleSignInContent).toHaveBeenCalled();
+    expect(removeToast).toHaveBeenCalled();
+});
diff --git a/packages/peregrine/lib/talons/CheckoutPage/ShippingInformation/AddressForm/guestForm.gql.js b/packages/peregrine/lib/talons/CheckoutPage/ShippingInformation/AddressForm/guestForm.gql.js
@@ -38,6 +38,15 @@ export const SET_GUEST_SHIPPING_MUTATION = gql`
     ${AvailablePaymentMethodsFragment}
 `;
 
+export const GET_EMAIL_AVAILABLE_QUERY = gql`
+    query IsEmailAvailable($email: String!) {
+        isEmailAvailable(email: $email) {
+            is_email_available
+        }
+    }
+`;
+
 export default {
-    setGuestShippingMutation: SET_GUEST_SHIPPING_MUTATION
+    setGuestShippingMutation: SET_GUEST_SHIPPING_MUTATION,
+    getEmailAvailableQuery: GET_EMAIL_AVAILABLE_QUERY
 };
diff --git a/packages/peregrine/lib/talons/CheckoutPage/ShippingInformation/AddressForm/useGuestForm.js b/packages/peregrine/lib/talons/CheckoutPage/ShippingInformation/AddressForm/useGuestForm.js
@@ -1,15 +1,23 @@
-import { useCallback, useMemo } from 'react';
-import { useMutation } from '@apollo/client';
+import { useCallback, useMemo, useState, useEffect } from 'react';
+import { useMutation, useLazyQuery } from '@apollo/client';
 import DEFAULT_OPERATIONS from './guestForm.gql';
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 
 import { useCartContext } from '../../../../context/cart';
 
 export const useGuestForm = props => {
-    const { afterSubmit, onCancel, onSuccess, shippingData } = props;
+    const {
+        afterSubmit,
+        onCancel,
+        onSuccess,
+        shippingData,
+        toggleSignInContent,
+        setGuestSignInUsername
+    } = props;
+    const [showSignInToast, setShowSignInToast] = useState(false);
 
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
-    const { setGuestShippingMutation } = operations;
+    const { setGuestShippingMutation, getEmailAvailableQuery } = operations;
 
     const [{ cartId }] = useCartContext();
 
@@ -22,6 +30,10 @@ export const useGuestForm = props => {
         }
     );
 
+    const [runQuery, { data }] = useLazyQuery(getEmailAvailableQuery, {
+        fetchPolicy: 'cache-and-network'
+    });
+
     const { country } = shippingData;
     const { code: countryCode } = country;
 
@@ -66,17 +78,45 @@ export const useGuestForm = props => {
         onCancel();
     }, [onCancel]);
 
+    const handleValidateEmail = useCallback(
+        email => {
+            setShowSignInToast(false);
+            if (email && email.includes('@')) {
+                runQuery({ variables: { email } });
+            }
+        },
+        [runQuery]
+    );
+
+    const handleToastAction = useCallback(
+        (removeToast, email) => {
+            setGuestSignInUsername(email);
+            toggleSignInContent();
+            removeToast();
+        },
+        [setGuestSignInUsername, toggleSignInContent]
+    );
+
     const errors = useMemo(
         () => new Map([['setGuestShippingMutation', error]]),
         [error]
     );
 
+    useEffect(() => {
+        if (data) {
+            setShowSignInToast(!data.isEmailAvailable.is_email_available);
+        }
+    }, [data]);
+
     return {
         errors,
         handleCancel,
         handleSubmit,
+        handleValidateEmail,
+        handleToastAction,
         initialValues,
         isSaving: loading,
-        isUpdate
+        isUpdate,
+        showSignInToast
     };
 };
diff --git a/...es/peregrine/lib/talons/CheckoutPage/__tests__/__snapshots__/useCheckoutPage.spec.js.snap b/...es/peregrine/lib/talons/CheckoutPage/__tests__/__snapshots__/useCheckoutPage.spec.js.snap
@@ -11,6 +11,7 @@ Object {
     "name": "gooseton",
   },
   "error": undefined,
+  "guestSignInUsername": "",
   "handlePlaceOrder": [Function],
   "handleReviewOrder": [Function],
   "hasError": false,
@@ -27,6 +28,7 @@ Object {
   "scrollShippingInformationIntoView": [Function],
   "scrollShippingMethodIntoView": [Function],
   "setCheckoutStep": [Function],
+  "setGuestSignInUsername": [Function],
   "setIsUpdating": [Function],
   "setPaymentInformationDone": [Function],
   "setShippingInformationDone": [Function],

diff --git a/packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js b/packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js
@@ -87,6 +87,8 @@ export const useCheckoutPage = (props = {}) => {
     const [checkoutStep, setCheckoutStep] = useState(
         CHECKOUT_STEP.SHIPPING_ADDRESS
     );
+    const [guestSignInUsername, setGuestSignInUsername] = useState('');
+
     const [{ isSignedIn }] = useUserContext();
     const [{ cartId }, { createCart, removeCart }] = useCartContext();
 
@@ -284,6 +286,7 @@ export const useCheckoutPage = (props = {}) => {
         checkoutStep,
         customer,
         error: checkoutError,
+        guestSignInUsername,
         handlePlaceOrder,
         hasError: !!checkoutError,
         isCartEmpty: !(checkoutData && checkoutData.cart.total_quantity),
@@ -297,6 +300,7 @@ export const useCheckoutPage = (props = {}) => {
             null,
         placeOrderLoading,
         setCheckoutStep,
+        setGuestSignInUsername,
         setIsUpdating,
         setShippingInformationDone,
         setShippingMethodDone,

diff --git a/packages/venia-ui/i18n/en_US.json b/packages/venia-ui/i18n/en_US.json
@@ -104,6 +104,9 @@
     "checkoutPage.step4": "Saved Credit Card Information Successfully",
     "checkoutPage.stockStatusMessage": "An item in your cart is currently out-of-stock and must be removed in order to Checkout. Please return to your cart to remove the item.",
     "checkoutPage.subscribe": "Subscribe to news and updates",
+    "checkoutPage.suggestSignInConfirmMessage": "Yes, sign in",
+    "checkoutPage.suggestSignInDeclineMessage": "No, thanks",
+    "checkoutPage.suggestSignInMessage'": "The email you provided is associated with an existing Venia account. Would you like to sign into this account?",
     "checkoutPage.thankYou": "Thank you for your order!",
     "checkoutPage.titleCheckout": "Checkout",
     "checkoutPage.titleReceipt": "Receipt",
@@ -455,4 +458,4 @@
     "wishlist.itemCountOpen": "Showing {currentCount} of {count} items in this list",
     "wishlist.itemCountClosed": "You have {count} {count, plural, one {item} other {items}} in this list",
     "wishlist.loadMore": "Load More"
-}
+}
diff --git a/packages/venia-ui/lib/components/CheckoutPage/GuestSignIn/guestSignIn.js b/packages/venia-ui/lib/components/CheckoutPage/GuestSignIn/guestSignIn.js
@@ -11,7 +11,7 @@ import SignIn from '@magento/venia-ui/lib/components/SignIn';
 import defaultClasses from './guestSignIn.module.css';
 
 const GuestSignIn = props => {
-    const { isActive, toggleActiveContent } = props;
+    const { isActive, toggleActiveContent, initialValues } = props;
 
     const talonProps = useGuestSignIn({ toggleActiveContent });
     const {
@@ -32,6 +32,7 @@ const GuestSignIn = props => {
                 classes={{ modal_active: undefined, root: classes.signInRoot }}
                 showCreateAccount={toggleCreateAccountView}
                 showForgotPassword={toggleForgotPasswordView}
+                initialValues={initialValues}
             />
         );
     } else if (view === 'FORGOT_PASSWORD') {
@@ -85,5 +86,8 @@ GuestSignIn.propTypes = {
         createAccountRoot: string
     }),
     isActive: bool.isRequired,
-    toggleActiveContent: func.isRequired
+    toggleActiveContent: func.isRequired,
+    initialValues: shape({
+        email: string.isRequired
+    })
 };
diff --git a/...eckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/guestForm.spec.js.snap b/...eckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/guestForm.spec.js.snap
@@ -36,11 +36,13 @@ Array [
             className="input"
           >
             <input
+              autoComplete="off"
               className="input"
               id="email"
               name="email"
               onBlur={[Function]}
               onChange={[Function]}
+              onPaste={[Function]}
               value=""
             />
           </span>
@@ -475,11 +477,13 @@ Array [
             className="input"
           >
             <input
+              autoComplete="off"
               className="input"
               id="email"
               name="email"
               onBlur={[Function]}
               onChange={[Function]}
+              onPaste={[Function]}
               value=""
             />
           </span>
@@ -910,11 +914,13 @@ Array [
             className="input"
           >
             <input
+              autoComplete="off"
               className="input"
               id="email"
               name="email"
               onBlur={[Function]}
               onChange={[Function]}
+              onPaste={[Function]}
               value="[email protected]"
             />
           </span>
@@ -1363,11 +1369,13 @@ Array [
             className="input"
           >
             <input
+              autoComplete="off"
               className="input"
               id="email"
               name="email"
               onBlur={[Function]}
               onChange={[Function]}
+              onPaste={[Function]}
               value="[email protected]"
             />
           </span>