feat(payment): PAYPAL-706 Add validate before using spb

bigcommerce · Oct 9, 2020 · c466b47 · c466b47
1 parent 3fcfda6
commit c466b47
Showing 1 changed file with 22 additions and 8 deletions.
diff --git a/src/app/payment/paymentMethod/PaypalCommercePaymentMethod.tsx b/src/app/payment/paymentMethod/PaypalCommercePaymentMethod.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, useContext, FunctionComponent } from 'react';
 
 import { connectFormik, ConnectFormikProps } from '../../common/form';
+import { FormContext } from '../../ui/form';
 import PaymentContext from '../PaymentContext';
 import { PaymentFormValues } from '../PaymentForm';
 
@@ -11,10 +12,12 @@ export type PaypalCommercePaymentMethod = Omit<HostedWidgetPaymentMethodProps, '
 const PaypalCommercePaymentMethod: FunctionComponent<PaypalCommercePaymentMethod> = ({
       initializePayment,
       onUnhandledError,
-      formik: { submitForm },
+      formik: { submitForm, validateForm, setFieldTouched },
       ...rest
   }) => {
     const paymentContext = useContext(PaymentContext);
+    const { setSubmitted } = useContext(FormContext);
+
     const initializePayPalCommercePayment = useCallback(options => initializePayment({
         ...options,
         paypalcommerce: {
@@ -25,18 +28,29 @@ const PaypalCommercePaymentMethod: FunctionComponent<PaypalCommercePaymentMethod
                 label: 'pay',
             },
             onRenderButton: () => {
-                if (paymentContext) {
-                    paymentContext.hidePaymentSubmitButton(rest.method, true);
+                paymentContext?.hidePaymentSubmitButton?.(rest.method, true);
+            },
+            submitForm: () => {
+                setSubmitted(true);
+                submitForm();
+            },
+            onValidate: async (resolve: () => void, reject: () => void): Promise<void> => {
+                const keysValidation = Object.keys(await validateForm());
+
+                if (keysValidation.length) {
+                    setSubmitted(true);
+                    keysValidation.forEach(key => setFieldTouched(key));
+
+                    return reject();
                 }
+
+                return resolve();
             },
-            submitForm,
         },
-    }), [initializePayment, submitForm, paymentContext, rest.method]);
+    }), [initializePayment, submitForm, paymentContext, rest.method, validateForm, setSubmitted, setFieldTouched]);
 
     const onError = (error: Error) => {
-        if (paymentContext) {
-            paymentContext.disableSubmit(rest.method, true);
-        }
+        paymentContext?.disableSubmit(rest.method, true);
 
         onUnhandledError?.(error);
     };