feat: Hook up edit Stripe settings form

packages/webapp/src/containers/Preferences/PaymentMethods/PreferencesPaymentMethodsBoot.tsx

@@ -1,4 +1,5 @@
 import { createContext, ReactNode, useContext } from 'react';
+import { Spinner } from '@blueprintjs/core';
 import {
   GetPaymentServicesStateResponse,
   useGetPaymentServicesState,
@@ -23,6 +24,9 @@ const PaymentMethodsBoot = ({ children }: PaymentMethodsProviderProps) => {
 
   const value = { isPaymentMethodsStateLoading, paymentMethodsState };
 
+  if (isPaymentMethodsStateLoading) {
+    return <Spinner size={20} />;
+  }
   return (
     <PaymentMethodsContext.Provider value={value}>
       {children}

packages/webapp/src/containers/Preferences/PaymentMethods/PreferencesPaymentMethodsPage.tsx

@@ -1,4 +1,5 @@
 // @ts-nocheck
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import {
   Button,
@@ -20,6 +21,7 @@ import { StripePreSetupDialog } from './dialogs/StripePreSetupDialog/StripePreSe
 import { DialogsName } from '@/constants/dialogs';
 import {
   useAlertActions,
+  useChangePreferencesPageTitle,
   useDialogActions,
   useDrawerActions,
 } from '@/hooks/state';
@@ -29,6 +31,12 @@ import { DRAWERS } from '@/constants/drawers';
 import { MoreIcon } from '@/icons/More';
 
 export default function PreferencesPaymentMethodsPage() {
+  const changePageTitle = useChangePreferencesPageTitle();
+
+  useEffect(() => {
+    changePageTitle('Payment Methods');
+  }, [changePageTitle]);
+
   return (
     <PaymentMethodsRoot>
       <PaymentMethodsBoot>

packages/webapp/src/containers/Preferences/PaymentMethods/drawers/StripeIntegrationEditForm.tsx

@@ -11,20 +11,17 @@ import { useStripeIntegrationEditBoot } from './StripeIntegrationEditBoot';
 import { transformToForm } from '@/utils';
 
 interface StripeIntegrationFormValues {
-  paymentAccountId: string;
+  bankAccountId: string;
   clearingAccountId: string;
 }
-
 const initialValues = {
-  paymentAccountId: '',
+  bankAccountId: '',
   clearingAccountId: '',
 };
-
 const validationSchema = Yup.object().shape({
-  paymentAccountId: Yup.string().required('Payment Account is required'),
+  bankAccountId: Yup.string().required('Bank Account is required'),
   clearingAccountId: Yup.string().required('Clearing Account is required'),
 });
-
 interface StripeIntegrationEditFormProps {
   children: React.ReactNode;
 }
@@ -44,13 +41,14 @@ export function StripeIntegrationEditForm({
     ...initialValues,
     ...transformToForm(paymentMethod?.options, initialValues),
   };
-
   const onSubmit = (
     values: StripeIntegrationFormValues,
     { setSubmitting }: FormikHelpers<StripeIntegrationFormValues>,
   ) => {
+    const _values = { options: { ...values } };
+
     setSubmitting(true);
-    updatePaymentMethod({ paymentMethodId, values })
+    updatePaymentMethod({ paymentMethodId, values: _values })
       .then(() => {
         AppToaster.show({
           message: 'The Stripe settings have been updated.',

packages/webapp/src/containers/Preferences/PaymentMethods/drawers/StripeIntegrationEditFormContent.tsx

@@ -11,12 +11,13 @@ export function StripeIntegrationEditFormContent() {
   return (
     <Stack spacing={0} style={{ padding: 20 }}>
       <FFormGroup
-        name={'paymentAccountId'}
-        label={'Payment Account'}
+        name={'bankAccountId'}
+        label={'Bank Account'}
         style={{ maxWidth: 300 }}
+        helperText={'The bank account where the Stripe payout is deposited.'}
       >
         <AccountsSelect
-          name={'paymentAccountId'}
+          name={'bankAccountId'}
           items={accounts}
           fastField
           fill
@@ -27,6 +28,8 @@ export function StripeIntegrationEditFormContent() {
       <FFormGroup
         name={'clearingAccountId'}
         label={'Clearing Account'}
+        subLabel='Liability Account'
+        helperText={'Clearing account tracks all payments collected through Stripe.'}
         style={{ maxWidth: 300 }}
       >
         <AccountsSelect