feat: Hook up edit Stripe settings form

packages/server/src/api/controllers/PaymentServices/PaymentServicesController.ts

@@ -26,15 +26,10 @@ export class PaymentServicesController extends BaseController {
       '/:paymentMethodId',
       [
         param('paymentMethodId').exists(),
+
         body('name').optional().isString(),
-        body('options.bankAccountId').optional().isNumeric(),
-        body('options.clearingAccountId').optional().isNumeric(),
-        body('options.showVisa').optional().isBoolean(),
-        body('options.showMasterCard').optional().isBoolean(),
-        body('options.showDiscover').optional().isBoolean(),
-        body('options.showAmer').optional().isBoolean(),
-        body('options.showJcb').optional().isBoolean(),
-        body('options.showDiners').optional().isBoolean(),
+        body('options.bank_account_id').optional().isNumeric(),
+        body('options.clearing_account_id').optional().isNumeric(),
       ],
       this.validationResult,
       asyncMiddleware(this.updatePaymentMethod.bind(this))

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

packages/webapp/src/hooks/query/payment-services.ts

@@ -2,6 +2,7 @@
 import {
   useMutation,
   useQuery,
+  useQueryClient,
   UseQueryOptions,
   UseQueryResult,
 } from 'react-query';
@@ -9,6 +10,7 @@ import useApiRequest from '../useRequest';
 import { transformToCamelCase, transfromToSnakeCase } from '@/utils';
 
 const PaymentServicesQueryKey = 'PaymentServices';
+const PaymentServicesStateQueryKey = 'PaymentServicesState';
 
 export interface GetPaymentServicesResponse {}
 /**
@@ -60,7 +62,7 @@ export const useGetPaymentServicesState = (
   const apiRequest = useApiRequest();
 
   return useQuery<GetPaymentServicesStateResponse, Error>(
-    ['PaymentServicesState'],
+    [PaymentServicesStateQueryKey],
     () =>
       apiRequest
         .get('/payment-services/state')
@@ -99,19 +101,27 @@ export const useUpdatePaymentMethod = (): UseMutationResult<
   unknown
 > => {
   const apiRequest = useApiRequest();
+  const queryClient = useQueryClient();
 
   return useMutation<
     UpdatePaymentMethodResponse,
     Error,
     UpdatePaymentMethodValues,
     unknown
-  >((data: UpdatePaymentMethodValues) =>
-    apiRequest
-      .post(
-        `/payment-services/${data.paymentMethodId}`,
-        transfromToSnakeCase(data.values),
-      )
-      .then((response) => response.data),
+  >(
+    (data: UpdatePaymentMethodValues) =>
+      apiRequest
+        .post(
+          `/payment-services/${data.paymentMethodId}`,
+          transfromToSnakeCase(data.values),
+        )
+        .then((response) => response.data),
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(PaymentServicesStateQueryKey);
+        queryClient.invalidateQueries(PaymentServicesQueryKey);
+      },
+    },
   );
 };
 
@@ -127,11 +137,13 @@ export const useGetPaymentMethod = (
   const apiRequest = useApiRequest();
 
   return useQuery<GetPaymentMethodResponse, Error>(
-    ['paymentMethod', paymentMethodId],
-    () => apiRequest.get(`/payment-services/${paymentMethodId}`),
-    {
-      select: (data) =>
-        transformToCamelCase(data.data) as GetPaymentMethodResponse,
-    },
+    [PaymentServicesQueryKey, paymentMethodId],
+    () =>
+      apiRequest
+        .get(`/payment-services/${paymentMethodId}`)
+        .then(
+          (res) =>
+            transformToCamelCase(res.data?.data) as GetPaymentMethodResponse,
+        ),
   );
 };

packages/webapp/src/hooks/state/dashboard.tsx

@@ -14,6 +14,7 @@ import {
   closeDrawer,
   openAlert,
   closeAlert,
+  changePreferencesPageTitle,
 } from '@/store/dashboard/dashboard.actions';
 
 export const useDispatchAction = (action) => {
@@ -95,3 +96,7 @@ export const useAlertActions = () => {
     closeAlert: useDispatchAction(closeAlert),
   };
 };
+
+export const useChangePreferencesPageTitle = () => {
+  return useDispatchAction(changePreferencesPageTitle);
+};

packages/webapp/src/store/dashboard/dashboard.actions.tsx

@@ -129,19 +129,26 @@ export function closeSidebarSubmenu() {
 export function addAutofill(autofillRef: number, payload: any) {
   return {
     type: t.ADD_AUTOFILL_REF,
-    payload: { ref: autofillRef, payload }
-  }
+    payload: { ref: autofillRef, payload },
+  };
 }
 
 export function removeAutofill(autofillRef: number) {
   return {
     type: t.REMOVE_AUTOFILL_REF,
-    payload: { ref: autofillRef}
-  }
+    payload: { ref: autofillRef },
+  };
 }
 
 export function resetAutofill() {
   return {
     type: t.RESET_AUTOFILL_REF,
-  }
-}
+  };
+}
+
+export function changePreferencesPageTitle(pageTitle: string) {
+  return {
+    type: 'CHANGE_PREFERENCES_PAGE_TITLE',
+    pageTitle,
+  };
+}