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,14 @@ function PlanPage() {
   return (
     <div className="flex flex-col gap-4">
       <Tabs />
-      <Elements stripe={stripePromise}>
+      <Elements
+        stripe={stripePromise}
+        options={{
+          ...StripeAppearance(isDarkMode),
+          mode: 'setup',
+          currency: 'usd',
+        }}
+      >
         <PlanProvider>
           <PlanBreadcrumb />
           <Suspense fallback={<Loader />}>

src/pages/PlanPage/PlanPage.test.jsx

@@ -11,6 +11,8 @@ import { MemoryRouter, Route } from 'react-router-dom'
 
 import config from 'config'
 
+import { ThemeContextProvider } from 'shared/ThemeContext'
+
 import PlanPage from './PlanPage'
 
 vi.mock('config')
@@ -44,18 +46,20 @@ const wrapper =
   ({ children }) => (
     <QueryClientProviderV5 client={queryClientV5}>
       <QueryClientProvider client={queryClient}>
-        <Suspense fallback={null}>
-          <MemoryRouter initialEntries={[initialEntries]}>
-            <Route path="/plan/:provider/:owner">{children}</Route>
-            <Route
-              path="*"
-              render={({ location }) => {
-                testLocation = location
-                return null
-              }}
-            />
-          </MemoryRouter>
-        </Suspense>
+        <ThemeContextProvider>
+          <Suspense fallback={null}>
+            <MemoryRouter initialEntries={[initialEntries]}>
+              <Route path="/plan/:provider/:owner">{children}</Route>
+              <Route
+                path="*"
+                render={({ location }) => {
+                  testLocation = location
+                  return null
+                }}
+              />
+            </MemoryRouter>
+          </Suspense>
+        </ThemeContextProvider>
       </QueryClientProvider>
     </QueryClientProviderV5>
   )