feat: Add ACH payment method

src/pages/PlanPage/PlanPage.jsx

@@ -8,13 +8,16 @@ import config from 'config'
 
 import { SentryRoute } from 'sentry'
 
+import { Theme, useThemeContext } from 'shared/ThemeContext'
 import LoadingLogo from 'ui/LoadingLogo'
 
 import { PlanProvider } from './context'
 import PlanBreadcrumb from './PlanBreadcrumb'
 import { PlanPageDataQueryOpts } from './queries/PlanPageDataQueryOpts'
 import Tabs from './Tabs'
 
+import { StripeAppearance } from '../../stripe'
+
 const CancelPlanPage = lazy(() => import('./subRoutes/CancelPlanPage'))
 const CurrentOrgPlan = lazy(() => import('./subRoutes/CurrentOrgPlan'))
 const InvoicesPage = lazy(() => import('./subRoutes/InvoicesPage'))
@@ -37,6 +40,8 @@ function PlanPage() {
   const { data: ownerData } = useSuspenseQueryV5(
     PlanPageDataQueryOpts({ owner, provider })
   )
+  const { theme } = useThemeContext()
+  const isDarkMode = theme !== Theme.LIGHT
 
   if (config.IS_SELF_HOSTED || !ownerData?.isCurrentUserPartOfOrg) {
     return <Redirect to={`/${provider}/${owner}`} />
@@ -45,7 +50,7 @@ function PlanPage() {
   return (
     <div className="flex flex-col gap-4">
       <Tabs />
-      <Elements stripe={stripePromise}>
+      <Elements stripe={stripePromise} options={StripeAppearance(isDarkMode)}>
         <PlanProvider>
           <PlanBreadcrumb />
           <Suspense fallback={<Loader />}>

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/BillingDetails.tsx

@@ -1,10 +1,16 @@
+import { useState } from 'react'
 import { useParams } from 'react-router-dom'
 
 import { useAccountDetails } from 'services/account'
+import A from 'ui/A'
+import Button from 'ui/Button'
 
-import AddressCard from './Address/AddressCard'
+import EditPaymentMethods from './EditPaymentMethods'
 import EmailAddress from './EmailAddress'
-import PaymentCard from './PaymentCard'
+import { ViewPaymentMethod } from './ViewPaymentMethod'
+
+// Remove this when we build Secondary Payment Method feature
+export const SECONDARY_PAYMENT_FEATURE_ENABLED = false
 
 interface URLParams {
   provider: string
@@ -18,34 +24,86 @@ function BillingDetails() {
     owner,
   })
   const subscriptionDetail = accountDetails?.subscriptionDetail
+  const [isEditMode, setEditMode] = useState(false)
+
+  const secondaryPaymentFeatureEnabled = SECONDARY_PAYMENT_FEATURE_ENABLED
 
   if (!subscriptionDetail) {
     return null
   }
 
   return (
-    <div className="flex flex-col border">
-      <h3 className="p-4 font-semibold">Billing details</h3>
-      <EmailAddress />
-      <PaymentCard
-        // @ts-expect-error - TODO fix this once we update PaymentCard to TS
-        subscriptionDetail={subscriptionDetail}
-        provider={provider}
-        owner={owner}
-      />
-      <AddressCard
-        subscriptionDetail={subscriptionDetail}
-        provider={provider}
-        owner={owner}
-      />
-      {subscriptionDetail.taxIds.length > 0 ? (
-        <div className="flex flex-col gap-2 p-4">
-          <h4 className="font-semibold">Tax ID</h4>
-          {subscriptionDetail.taxIds.map((val, index) => (
-            <p key={index}>{val?.value}</p>
-          ))}
+    <div className="flex flex-col divide-y border">
+      {/* Billing Details Section */}
+      <div className="flex items-center justify-between gap-4 p-4">
+        <div>
+          <h3 className="font-semibold">Billing details</h3>
+          <p className="pt-1 text-xs text-ds-gray-octonary">
+            You can modify your billing details. To update your tax IDs, please{' '}
+            {/* @ts-expect-error ignore until we can convert A component to ts */}
+            <A to={{ pageName: 'support' }} variant="link">
+              contact support
+            </A>
+          </p>
         </div>
-      ) : null}
+        {!isEditMode ? (
+          <Button
+            hook="button"
+            onClick={() => setEditMode(true)}
+            variant="default"
+            className="flex-none"
+          >
+            Edit payment
+          </Button>
+        ) : (
+          <Button
+            hook="button"
+            onClick={() => setEditMode(false)}
+            variant="default"
+            className="flex-none"
+          >
+            Back
+          </Button>
+        )}
+      </div>
+      {isEditMode ? (
+        <EditPaymentMethods
+          setEditMode={setEditMode}
+          provider={provider}
+          owner={owner}
+          existingSubscriptionDetail={subscriptionDetail}
+        />
+      ) : (
+        <>
+          <EmailAddress />
+          <ViewPaymentMethod
+            heading="Primary Payment Method"
+            isPrimaryPaymentMethod={true}
+            setEditMode={setEditMode}
+            subscriptionDetail={subscriptionDetail}
+            provider={provider}
+            owner={owner}
+          />
+          {secondaryPaymentFeatureEnabled && (
+            <ViewPaymentMethod
+              heading="Secondary Payment Method"
+              isPrimaryPaymentMethod={false}
+              setEditMode={setEditMode}
+              subscriptionDetail={subscriptionDetail}
+              provider={provider}
+              owner={owner}
+            />
+          )}
+          {subscriptionDetail?.taxIds?.length ? (
+            <div className="flex flex-col gap-2 p-4">
+              <h4 className="font-semibold">Tax ID</h4>
+              {subscriptionDetail?.taxIds?.map((val, index) => (
+                <p key={index}>{val?.value}</p>
+              ))}
+            </div>
+          ) : null}
+        </>
+      )}
     </div>
   )
 }

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/Address/AddressForm.tsx → src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/EditPaymentMethods/Address/AddressForm.tsx

@@ -4,12 +4,11 @@ import { z } from 'zod'
 
 import { AddressSchema } from 'services/account'
 import { useUpdateBillingAddress } from 'services/account/useUpdateBillingAddress'
-import { Theme, useThemeContext } from 'shared/ThemeContext'
 import Button from 'ui/Button'
 
 interface AddressFormProps {
   address?: z.infer<typeof AddressSchema>
-  name?: string
+  name?: string | null | undefined
   closeForm: () => void
   provider: string
   owner: string
@@ -23,28 +22,6 @@ function AddressForm({
   owner,
 }: AddressFormProps) {
   const elements = useElements()
-  const { theme } = useThemeContext()
-  const isDarkMode = theme === Theme.DARK
-
-  // Note: unfortunately seems Stripe doesn't let us reference like `var(--<var name>)` so rgbs are hardcoded in below
-  elements?.update({
-    appearance: {
-      variables: {
-        fontFamily: 'Poppins, ui-sans-serif, system-ui, sans-serif',
-      },
-      rules: {
-        '.Label': {
-          fontWeight: '600',
-          color: isDarkMode ? 'rgb(210,212,215)' : 'rgb(14,27,41)', // Same values as --color-app-text-primary.
-        },
-        '.Input': {
-          backgroundColor: isDarkMode ? 'rgb(22,24,29)' : 'rgb(255,255,255)', // Same values as --color-app-container.
-          borderColor: isDarkMode ? 'rgb(47,51,60)' : 'rgb(216,220,226)', // Same values as --color-ds-gray-tertiary.
-          color: isDarkMode ? 'rgb(210,212,215)' : 'rgb(14,27,41)', // Same values as --color-app-text-primary.
-        },
-      },
-    },
-  })
 
   const {
     mutate: updateAddress,
@@ -105,7 +82,7 @@ function AddressForm({
             disabled={isLoading}
             to={undefined}
           >
-            Update
+            Save
           </Button>
           <Button
             type="button"