feat: Edit Stripe payment settings

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

@@ -91,10 +91,12 @@ function StripePaymentMethod() {
       });
   };
 
+  // Handle edit button click.
   const handleEditBtnClick = () => {
     openDrawer(DRAWERS.STRIPE_PAYMENT_INTEGRATION_EDIT);
   };
 
+  // Handle delete connection button click.
   const handleDeleteConnectionClick = () => {
     openAlert('delete-stripe-payment-method', {
       paymentMethodId: stripePaymentMethodId,
@@ -133,7 +135,6 @@ function StripePaymentMethod() {
               Complete Stripe Set Up
             </Button>
           )}
-
           {isAccountCreated && (
             <Popover
               content={

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

@@ -1,10 +1,14 @@
 import React, { createContext, useContext } from 'react';
 import { Spinner } from '@blueprintjs/core';
 import { useAccounts } from '@/hooks/query';
+import { useGetPaymentMethod } from '@/hooks/query/payment-services';
 
 interface StripeIntegrationEditContextType {
   accounts: any;
   isAccountsLoading: boolean;
+
+  paymentMethod: any;
+  isPaymentMethodLoading: boolean;
 }
 
 const StripeIntegrationEditContext =
@@ -27,8 +31,19 @@ export const useStripeIntegrationEditBoot = () => {
 
 export const StripeIntegrationEditBoot: React.FC = ({ children }) => {
   const { data: accounts, isLoading: isAccountsLoading } = useAccounts({}, {});
-  const value = { accounts, isAccountsLoading };
-  const isLoading = isAccountsLoading;
+  const { data: paymentMethod, isLoading: isPaymentMethodLoading } =
+    useGetPaymentMethod(9);
+
+  const value = {
+    // Accounts.
+    accounts,
+    isAccountsLoading,
+
+    // Payment methods.
+    paymentMethod,
+    isPaymentMethodLoading,
+  };
+  const isLoading = isAccountsLoading || isPaymentMethodLoading;
 
   if (isLoading) {
     return <Spinner size={20} />;

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

@@ -7,6 +7,8 @@ import { Intent } from '@blueprintjs/core';
 import { usePaymentMethodsBoot } from '../PreferencesPaymentMethodsBoot';
 import { useDrawerActions } from '@/hooks/state';
 import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
+import { useStripeIntegrationEditBoot } from './StripeIntegrationEditBoot';
+import { transformToForm } from '@/utils';
 
 interface StripeIntegrationFormValues {
   paymentAccountId: string;
@@ -34,9 +36,15 @@ export function StripeIntegrationEditForm({
   const { name } = useDrawerContext();
   const { mutateAsync: updatePaymentMethod } = useUpdatePaymentMethod();
   const { paymentMethodsState } = usePaymentMethodsBoot();
+  const { paymentMethod } = useStripeIntegrationEditBoot();
   const stripePaymentState = paymentMethodsState?.stripe;
   const paymentMethodId = stripePaymentState?.stripePaymentMethodId;
 
+  const formInitialValues = {
+    ...initialValues,
+    ...transformToForm(paymentMethod?.options, initialValues),
+  };
+
   const onSubmit = (
     values: StripeIntegrationFormValues,
     { setSubmitting }: FormikHelpers<StripeIntegrationFormValues>,
@@ -62,7 +70,7 @@ export function StripeIntegrationEditForm({
 
   return (
     <Formik
-      initialValues={initialValues}
+      initialValues={formInitialValues}
       validationSchema={validationSchema}
       onSubmit={onSubmit}
     >

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

@@ -114,3 +114,24 @@ export const useUpdatePaymentMethod = (): UseMutationResult<
       .then((response) => response.data),
   );
 };
+
+interface GetPaymentMethodResponse {}
+/**
+ * Retrieves a specific payment method.
+ * @param {number} paymentMethodId - The ID of the payment method.
+ * @returns {UseQueryResult<GetPaymentMethodResponse, Error>}
+ */
+export const useGetPaymentMethod = (
+  paymentMethodId: number,
+): UseQueryResult<GetPaymentMethodResponse, Error> => {
+  const apiRequest = useApiRequest();
+
+  return useQuery<GetPaymentMethodResponse, Error>(
+    ['paymentMethod', paymentMethodId],
+    () => apiRequest.get(`/payment-services/${paymentMethodId}`),
+    {
+      select: (data) =>
+        transformToCamelCase(data.data) as GetPaymentMethodResponse,
+    },
+  );
+};