fix(payment): CHECKOUT-4852 Only show human verification message on m…

…ount if exceeded limit

package.json

@@ -23,7 +23,7 @@
   },
   "homepage": "https://github.com/bigcommerce/checkout-js#readme",
   "dependencies": {
-    "@bigcommerce/checkout-sdk": "^1.63.0",
+    "@bigcommerce/checkout-sdk": "^1.63.1",
     "@bigcommerce/citadel": "^2.15.1",
     "@bigcommerce/form-poster": "^1.2.2",
     "@bigcommerce/memoize": "^1.0.0",

src/app/payment/Payment.spec.tsx

@@ -587,7 +587,7 @@ describe('Payment', () => {
             });
     });
 
-    it('reloads checkout object if unable to submit order due to spam protection error', () => {
+    it('reloads checkout object if unable to submit order due to spam protection error', async () => {
         jest.spyOn(checkoutService, 'loadCheckout')
             .mockResolvedValue(checkoutState);
 
@@ -599,9 +599,14 @@ describe('Payment', () => {
 
         const container = mount(<PaymentTest { ...defaultProps } />);
 
+        await new Promise(resolve => process.nextTick(resolve));
+
+        container.update();
         container.find('ErrorModal Button').simulate('click');
 
         expect(checkoutService.loadCheckout)
             .toHaveBeenCalled();
+        expect(container.find(PaymentForm).prop('didExceedSpamLimit'))
+            .toBeTruthy();
     });
 });

src/app/payment/Payment.tsx

@@ -56,6 +56,7 @@ interface WithCheckoutPaymentProps {
 }
 
 interface PaymentState {
+    didExceedSpamLimit: boolean;
     isReady: boolean;
     selectedMethod?: PaymentMethod;
     shouldDisableSubmit: { [key: string]: boolean };
@@ -65,6 +66,7 @@ interface PaymentState {
 
 class Payment extends Component<PaymentProps & WithCheckoutPaymentProps & WithLanguageProps, PaymentState> {
     state: PaymentState = {
+        didExceedSpamLimit: false,
         isReady: false,
         shouldDisableSubmit: {},
         validationSchemas: {},
@@ -134,6 +136,7 @@ class Payment extends Component<PaymentProps & WithCheckoutPaymentProps & WithLa
         } = this.props;
 
         const {
+            didExceedSpamLimit,
             isReady,
             selectedMethod = defaultMethod,
             shouldDisableSubmit,
@@ -162,6 +165,7 @@ class Payment extends Component<PaymentProps & WithCheckoutPaymentProps & WithLa
                         { ...rest }
                         defaultGatewayId={ defaultMethod.gateway }
                         defaultMethodId={ defaultMethod.id }
+                        didExceedSpamLimit={ didExceedSpamLimit }
                         isUsingMultiShipping={ isUsingMultiShipping }
                         methods={ methods }
                         onMethodSelect={ this.setSelectedMethod }
@@ -298,6 +302,8 @@ class Payment extends Component<PaymentProps & WithCheckoutPaymentProps & WithLa
             // Reload the checkout object to get the latest `shouldExecuteSpamCheck` value,
             // which will in turn make `SpamProtectionField` visible again.
             if (body.type === 'spam_protection_expired' || body.type === 'spam_protection_failed') {
+                this.setState({ didExceedSpamLimit: true });
+
                 await loadCheckout();
             }
         }

src/app/payment/PaymentForm.tsx

@@ -21,6 +21,7 @@ export interface PaymentFormProps {
     availableStoreCredit?: number;
     defaultGatewayId?: string;
     defaultMethodId: string;
+    didExceedSpamLimit?: boolean;
     isEmbedded?: boolean;
     isTermsConditionsRequired?: boolean;
     isUsingMultiShipping?: boolean;
@@ -60,6 +61,7 @@ export interface HostedWidgetPaymentMethodValues {
 
 const PaymentForm: FunctionComponent<PaymentFormProps & FormikProps<PaymentFormValues> & WithLanguageProps> = ({
     availableStoreCredit = 0,
+    didExceedSpamLimit,
     isEmbedded,
     isPaymentDataRequired,
     isTermsConditionsRequired,
@@ -79,7 +81,10 @@ const PaymentForm: FunctionComponent<PaymentFormProps & FormikProps<PaymentFormV
     values,
 }) => {
     if (shouldExecuteSpamCheck) {
-        return <SpamProtectionField />;
+        return <SpamProtectionField
+            didExceedSpamLimit={ didExceedSpamLimit }
+            onUnhandledError={ onUnhandledError }
+        />;
     }
 
     return (

src/app/payment/SpamProtectionField.spec.tsx

@@ -1,5 +1,5 @@
-import { createCheckoutService, CheckoutService } from '@bigcommerce/checkout-sdk';
-import { render } from 'enzyme';
+import { createCheckoutService, CheckoutService, StandardError } from '@bigcommerce/checkout-sdk';
+import { mount, render } from 'enzyme';
 import React, { FunctionComponent } from 'react';
 
 import { CheckoutProvider } from '../checkout';
@@ -27,4 +27,93 @@ describe('SpamProtectionField', () => {
         expect(render(<SpamProtectionTest />))
             .toMatchSnapshot();
     });
+
+    it('notifies parent component if unable to verify', async () => {
+        const handleError = jest.fn();
+        const error = new Error('Unknown error');
+
+        jest.spyOn(checkoutService, 'executeSpamCheck')
+            .mockRejectedValue(error);
+
+        const component = mount(<SpamProtectionTest onUnhandledError={ handleError } />);
+
+        await new Promise(resolve => process.nextTick(resolve));
+        component.update();
+
+        expect(handleError)
+            .toHaveBeenCalledWith(error);
+    });
+
+    it('does not notify parent component if unable to verify because of cancellation by user', async () => {
+        const handleError = jest.fn();
+        const error = new Error('Unknown error');
+
+        (error as StandardError).type = 'spam_protection_challenge_not_completed';
+
+        jest.spyOn(checkoutService, 'executeSpamCheck')
+            .mockRejectedValue(error);
+
+        const component = mount(<SpamProtectionTest onUnhandledError={ handleError } />);
+
+        await new Promise(resolve => process.nextTick(resolve));
+        component.update();
+
+        expect(handleError)
+            .not.toHaveBeenCalledWith(error);
+    });
+
+    describe('if have not exceeded limit', () => {
+        it('executes spam check on mount', () => {
+            mount(<SpamProtectionTest />);
+
+            expect(checkoutService.executeSpamCheck)
+                .toHaveBeenCalled();
+        });
+
+        it('does not render verify message', () => {
+            const component = mount(<SpamProtectionTest />);
+
+            expect(component.exists('[data-test="spam-protection-verify-button"]'))
+                .toBeFalsy();
+        });
+
+        it('renders verify message if there is error', async () => {
+            jest.spyOn(checkoutService, 'executeSpamCheck')
+                .mockRejectedValue(new Error('Unknown error'));
+
+            const component = mount(<SpamProtectionTest />);
+
+            await new Promise(resolve => process.nextTick(resolve));
+            component.update();
+
+            expect(component.exists('[data-test="spam-protection-verify-button"]'))
+                .toBeTruthy();
+        });
+    });
+
+    describe('if exceeded limit at least once', () => {
+        it('does not execute spam check on mount', () => {
+            mount(<SpamProtectionTest didExceedSpamLimit />);
+
+            expect(checkoutService.executeSpamCheck)
+                .not.toHaveBeenCalled();
+        });
+
+        it('executes spam check on click', () => {
+            const component = mount(<SpamProtectionTest didExceedSpamLimit />);
+
+            component.find('[data-test="spam-protection-verify-button"]')
+                .simulate('click');
+
+            expect(checkoutService.executeSpamCheck)
+                .toHaveBeenCalled();
+        });
+
+        it('renders verify message', () => {
+            const component = mount(<SpamProtectionTest didExceedSpamLimit />);
+
+            expect(component.exists('[data-test="spam-protection-verify-button"]'))
+                .toBeTruthy();
+        });
+    });
 });

src/app/payment/SpamProtectionField.tsx

@@ -1,52 +1,108 @@
-import React, { Component } from 'react';
+import { CheckoutSelectors } from '@bigcommerce/checkout-sdk';
+import { noop } from 'lodash';
+import React, { Component, MouseEvent, ReactNode } from 'react';
 
 import { withCheckout, CheckoutContextProps } from '../checkout';
 import { TranslatedString } from '../locale';
 import { LoadingOverlay } from '../ui/loading';
 
 export interface SpamProtectionProps {
+    didExceedSpamLimit?: boolean;
     onUnhandledError?(error: Error): void;
 }
 
+interface SpamProtectionState {
+    shouldShowRetryButton: boolean;
+}
+
 interface WithCheckoutSpamProtectionProps {
     isExecutingSpamCheck: boolean;
-    verify(): void;
+    executeSpamCheck(): Promise<CheckoutSelectors>;
 }
 
 function mapToSpamProtectionProps(
     { checkoutService, checkoutState }: CheckoutContextProps
 ): WithCheckoutSpamProtectionProps {
     return {
         isExecutingSpamCheck: checkoutState.statuses.isExecutingSpamCheck(),
-        verify: checkoutService.executeSpamCheck,
+        executeSpamCheck: checkoutService.executeSpamCheck,
     };
 }
 
-class SpamProtectionField extends Component<SpamProtectionProps & WithCheckoutSpamProtectionProps> {
+class SpamProtectionField extends Component<
+    SpamProtectionProps & WithCheckoutSpamProtectionProps,
+    SpamProtectionState
+> {
+    state = {
+        shouldShowRetryButton: false,
+    };
+
+    async componentDidMount() {
+        const { didExceedSpamLimit } = this.props;
+
+        if (didExceedSpamLimit) {
+            return;
+        }
+
+        this.verify();
+    }
+
     render() {
-        const {
-            isExecutingSpamCheck,
-            verify,
-        } = this.props;
+        const { isExecutingSpamCheck } = this.props;
 
         return (
             <div className="spamProtection-container">
                 <LoadingOverlay isLoading={ isExecutingSpamCheck }>
-                    <div className="spamProtection-panel optimizedCheckout-overlay">
-                        <a
-                            className="spamProtection-panel-message optimizedCheckout-primaryContent"
-                            data-test="customer-continue-button"
-                            onClick={ verify }
-                        >
-                            <TranslatedString
-                                id="spam_protection.verify_action"
-                            />
-                        </a>
-                    </div>
+                    { this.renderContent() }
                 </LoadingOverlay>
             </div>
         );
     }
+
+    private renderContent(): ReactNode {
+        const { didExceedSpamLimit } = this.props;
+        const { shouldShowRetryButton } = this.state;
+
+        if (!didExceedSpamLimit && !shouldShowRetryButton) {
+            return;
+        }
+
+        return <div className="spamProtection-panel optimizedCheckout-overlay">
+            <a
+                className="spamProtection-panel-message optimizedCheckout-primaryContent"
+                data-test="spam-protection-verify-button"
+                onClick={ this.handleRetry }
+            >
+                <TranslatedString
+                    id="spam_protection.verify_action"
+                />
+            </a>
+        </div>;
+    }
+
+    private async verify(): Promise<void> {
+        const {
+            executeSpamCheck,
+            onUnhandledError = noop,
+        } = this.props;
+
+        try {
+            await executeSpamCheck();
+        } catch (error) {
+            this.setState({ shouldShowRetryButton: true });
+
+            // Notify the parent component if the user experiences a problem other than cancelling the reCaptcha challenge.
+            if (error && error.type !== 'spam_protection_challenge_not_completed') {
+                onUnhandledError(error);
+            }
+        }
+    }
+
+    private handleRetry: (event: MouseEvent) => void = event => {
+        event.preventDefault();
+
+        this.verify();
+    };
 }
 
 export default withCheckout(mapToSpamProtectionProps)(SpamProtectionField);

src/app/payment/__snapshots__/SpamProtectionField.spec.tsx.snap

@@ -6,15 +6,6 @@ exports[`SpamProtectionField renders spam protection field 1`] = `
 >
   <div
     class="loadingOverlay-container"
-  >
-    <div
-      class="spamProtection-panel optimizedCheckout-overlay"
-    >
-      <a
-        class="spamProtection-panel-message optimizedCheckout-primaryContent"
-        data-test="customer-continue-button"
-      />
-    </div>
-  </div>
+  />
 </div>
 `;