feat(EMI-3002): reset payment params on submit (#16485)

* reset params on submit and error

* fix tests

* add setupFutureUsage to initial params

* update test

Author: rquartararo

src/Apps/Order2/Routes/Checkout/Components/PaymentStep/Order2PaymentForm.tsx

@@ -101,6 +101,7 @@ export const Order2PaymentForm: React.FC<Order2PaymentFormProps> = ({
 
   const options: StripeElementsOptions = {
     mode: "payment",
+    setupFutureUsage: "off_session",
     paymentMethodOptions: {
       us_bank_account: {
         verification_method: "instant",
@@ -372,9 +373,31 @@ const PaymentFormContent: React.FC<PaymentFormContentProps> = ({
     )
   }
 
+  const resetElementsToInitialParams = () => {
+    elements.update({
+      mode: "payment",
+      paymentMethodOptions: {
+        us_bank_account: {
+          verification_method: "instant",
+          financial_connections: {
+            permissions: ["payment_method", "balances", "ownership"],
+            prefetch: ["balances"],
+          },
+        },
+      },
+      setupFutureUsage: "off_session",
+      // @ts-ignore Stripe type issue
+      captureMethod: null,
+      // @ts-ignore Stripe type issue
+      paymentMethodTypes: null,
+      onBehalfOf: order.seller?.merchantAccount?.externalId,
+    })
+  }
+
   const handleError = (error: { message?: string | JSX.Element }) => {
     setErrorMessage(error.message || defaultErrorMessage)
     setIsSubmittingToStripe(false)
+    resetElementsToInitialParams()
   }
 
   const handleSubmit = async event => {
@@ -403,8 +426,6 @@ const PaymentFormContent: React.FC<PaymentFormContentProps> = ({
       if (selectedPaymentMethod === "stripe-card") {
         elements.update({
           captureMethod: "manual",
-          setupFutureUsage: "off_session",
-          mode: "payment",
           // @ts-ignore Stripe type issue
           paymentMethodOptions: null,
         })
@@ -413,16 +434,16 @@ const PaymentFormContent: React.FC<PaymentFormContentProps> = ({
           captureMethod: "automatic",
           setupFutureUsage: null,
           mode: "setup",
-          payment_method_types: ["us_bank_account"],
+          paymentMethodTypes: ["us_bank_account"],
           // @ts-ignore Stripe type issue
-          on_behalf_of: null,
+          onBehalfOf: null,
         })
       } else if (selectedPaymentMethod === "stripe-sepa") {
         elements.update({
           captureMethod: "automatic",
           setupFutureUsage: null,
           mode: "setup",
-          payment_method_types: ["sepa_debit"],
+          paymentMethodTypes: ["sepa_debit"],
         })
       }
 
@@ -501,9 +522,11 @@ const PaymentFormContent: React.FC<PaymentFormContentProps> = ({
       } catch (error) {
         logger.error("Error while updating order payment method", error)
         handleError({ message: defaultErrorMessage })
+        return
       } finally {
         setPaymentComplete()
         setIsSubmittingToStripe(false)
+        resetElementsToInitialParams()
       }
     }
 
@@ -532,8 +555,10 @@ const PaymentFormContent: React.FC<PaymentFormContentProps> = ({
       } catch (error) {
         logger.error("Error while updating order payment method", error)
         handleError({ message: defaultErrorMessage })
+        return
       } finally {
         setIsSubmittingToStripe(false)
+        resetElementsToInitialParams()
         // Resets for the PaymentCompletedView
         setSavedPaymentMethod({ savedPaymentMethod: null })
         setConfirmationToken({ confirmationToken: null })
@@ -577,8 +602,10 @@ const PaymentFormContent: React.FC<PaymentFormContentProps> = ({
       } catch (error) {
         logger.error("Error while updating order payment method", error)
         handleError({ message: defaultErrorMessage })
+        return
       } finally {
         setIsSubmittingToStripe(false)
+        resetElementsToInitialParams()
         setSavedPaymentMethod({
           savedPaymentMethod: selectedSavedPaymentMethod,
         })

src/Apps/Order2/Routes/Checkout/Components/PaymentStep/__tests__/Order2PaymentForm.jest.tsx

@@ -319,8 +319,6 @@ describe("Order2PaymentForm", () => {
 
       expect(mockElements.update).toHaveBeenCalledWith({
         captureMethod: "manual",
-        setupFutureUsage: "off_session",
-        mode: "payment",
         paymentMethodOptions: null,
       })
     })
@@ -347,8 +345,8 @@ describe("Order2PaymentForm", () => {
         captureMethod: "automatic",
         setupFutureUsage: null,
         mode: "setup",
-        payment_method_types: ["us_bank_account"],
-        on_behalf_of: null,
+        paymentMethodTypes: ["us_bank_account"],
+        onBehalfOf: null,
       })
     })
 
@@ -378,7 +376,7 @@ describe("Order2PaymentForm", () => {
         captureMethod: "automatic",
         setupFutureUsage: null,
         mode: "setup",
-        payment_method_types: ["sepa_debit"],
+        paymentMethodTypes: ["sepa_debit"],
       })
     })
   })