Fix: Add recovery dialogs for missing payment method and verification required (#305)

Co-authored-by: Matt Brockman <matt.brockman@e2b.dev>
Co-authored-by: ben-fornefeld <ben.fornefeld@gmail.com>

Author: 3 people

src/core/modules/billing/models.ts

@@ -55,10 +55,24 @@ export interface AddOnOrderConfirmResponse {
   client_secret: string
 }
 
+export interface VerificationPaymentResponse {
+  client_secret: string
+  amount_due_cents: number
+}
+
 export interface PaymentMethodsCustomerSession {
   client_secret: string
 }
 
+export interface PaymentMethodsSession {
+  client_secret: string
+  setup_intent_client_secret?: string
+}
+
+export interface PaymentMethodsSetupSession extends PaymentMethodsSession {
+  setup_intent_client_secret: string
+}
+
 export interface TierLimits {
   sandbox_concurrency: number
   max_cpu: number

src/core/modules/billing/repository.server.ts

@@ -1,5 +1,6 @@
 import 'server-only'
 
+import { z } from 'zod'
 import { SUPABASE_AUTH_HEADERS } from '@/configs/api'
 import type {
   AddOnOrderConfirmResponse,
@@ -8,8 +9,10 @@ import type {
   CustomerPortalResponse,
   Invoice,
   PaymentMethodsCustomerSession,
+  PaymentMethodsSetupSession,
   TeamItems,
   UsageResponse,
+  VerificationPaymentResponse,
 } from '@/core/modules/billing/models'
 import { repoErrorFromHttp } from '@/core/shared/errors'
 import type { TeamRequestScope } from '@/core/shared/repository-scope'
@@ -35,12 +38,24 @@ export interface BillingRepository {
   createOrder(itemId: string): Promise<RepoResult<AddOnOrderCreateResponse>>
   confirmOrder(orderId: string): Promise<RepoResult<AddOnOrderConfirmResponse>>
   getCustomerSession(): Promise<RepoResult<PaymentMethodsCustomerSession>>
+  createPaymentMethodsSession(): Promise<RepoResult<PaymentMethodsSetupSession>>
+  createVerificationPayment(): Promise<RepoResult<VerificationPaymentResponse>>
 }
 
 async function parseText(response: Response): Promise<string> {
   return (await response.text()) || 'Request failed'
 }
 
+const PaymentMethodsSessionResponseSchema = z.object({
+  client_secret: z.string().min(1),
+  setup_intent_client_secret: z.string().min(1),
+})
+
+const VerificationPaymentResponseSchema = z.object({
+  client_secret: z.string().min(1),
+  amount_due_cents: z.number().int().positive(),
+})
+
 export function createBillingRepository(
   scope: BillingScope,
   deps: BillingRepositoryDeps = {
@@ -249,7 +264,7 @@ export function createBillingRepository(
     },
     async getCustomerSession() {
       const res = await fetch(
-        `${deps.billingApiUrl}/teams/${scope.teamId}/payment-methods/customer-session`,
+        `${deps.billingApiUrl}/teams/${scope.teamId}/payment-methods-session`,
         {
           method: 'POST',
           headers: {
@@ -265,5 +280,61 @@ export function createBillingRepository(
 
       return ok((await res.json()) as PaymentMethodsCustomerSession)
     },
+    async createPaymentMethodsSession() {
+      const res = await fetch(
+        `${deps.billingApiUrl}/teams/${scope.teamId}/payment-methods-session?include_setup_intent=true`,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            ...SUPABASE_AUTH_HEADERS(scope.accessToken, scope.teamId),
+          },
+        }
+      )
+
+      if (!res.ok) {
+        return err(repoErrorFromHttp(res.status, await parseText(res)))
+      }
+
+      const parseResult = PaymentMethodsSessionResponseSchema.safeParse(
+        await res.json()
+      )
+
+      if (!parseResult.success) {
+        return err(
+          repoErrorFromHttp(500, 'Invalid payment methods session response')
+        )
+      }
+
+      return ok(parseResult.data)
+    },
+    async createVerificationPayment() {
+      const res = await fetch(
+        `${deps.billingApiUrl}/teams/${scope.teamId}/verification-payment`,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            ...SUPABASE_AUTH_HEADERS(scope.accessToken, scope.teamId),
+          },
+        }
+      )
+
+      if (!res.ok) {
+        return err(repoErrorFromHttp(res.status, await parseText(res)))
+      }
+
+      const parseResult = VerificationPaymentResponseSchema.safeParse(
+        await res.json()
+      )
+
+      if (!parseResult.success) {
+        return err(
+          repoErrorFromHttp(500, 'Invalid verification payment response')
+        )
+      }
+
+      return ok(parseResult.data)
+    },
   }
 }

src/core/modules/teams/constants.ts

@@ -0,0 +1,6 @@
+const TEAM_BLOCKED_REASONS = {
+  missingPayment: 'missing payment method',
+  verification: 'verification required',
+} as const
+
+export { TEAM_BLOCKED_REASONS }

src/core/modules/teams/models.ts

@@ -1,7 +1,10 @@
 import type { components as DashboardComponents } from '@/contracts/dashboard-api'
+import type { TEAM_BLOCKED_REASONS } from './constants'
 
 export type TeamModel = DashboardComponents['schemas']['UserTeam']
 export type TeamLimits = DashboardComponents['schemas']['UserTeamLimits']
+export type TeamBlockedReason =
+  (typeof TEAM_BLOCKED_REASONS)[keyof typeof TEAM_BLOCKED_REASONS]
 
 export type TeamMemberInfo = {
   id: string

src/core/server/api/routers/billing.ts

@@ -2,7 +2,6 @@ import { TRPCError } from '@trpc/server'
 import { headers } from 'next/headers'
 import { z } from 'zod'
 import { createBillingRepository } from '@/core/modules/billing/repository.server'
-import { createTeamsRepository } from '@/core/modules/teams/teams-repository.server'
 import { throwTRPCErrorFromRepoError } from '@/core/server/adapters/errors'
 import { withTeamAuthedRequestRepository } from '@/core/server/api/middlewares/repository'
 import { createTRPCRouter } from '@/core/server/trpc/init'
@@ -25,12 +24,6 @@ const billingRepositoryProcedure = protectedTeamProcedure.use(
   )
 )
 
-const billingAndTeamsRepositoryProcedure = billingRepositoryProcedure.use(
-  withTeamAuthedRequestRepository(createTeamsRepository, (teamsRepository) => ({
-    teamsRepository,
-  }))
-)
-
 export const billingRouter = createTRPCRouter({
   createCheckout: billingRepositoryProcedure
     .input(z.object({ tierId: z.string() }))
@@ -136,4 +129,19 @@ export const billingRouter = createTRPCRouter({
     if (!result.ok) throwTRPCErrorFromRepoError(result.error)
     return result.data
   }),
+
+  createPaymentMethodsSession: billingRepositoryProcedure.mutation(
+    async ({ ctx }) => {
+      const result = await ctx.billingRepository.createPaymentMethodsSession()
+      if (!result.ok) throwTRPCErrorFromRepoError(result.error)
+      return result.data
+    }
+  ),
+  createVerificationPayment: billingRepositoryProcedure.mutation(
+    async ({ ctx }) => {
+      const result = await ctx.billingRepository.createVerificationPayment()
+      if (!result.ok) throwTRPCErrorFromRepoError(result.error)
+      return result.data
+    }
+  ),
 })

src/features/dashboard/billing/hooks.ts

@@ -140,6 +140,21 @@ export function usePaymentElementAppearance() {
       '.AccordionButton--selected:hover': {
         backgroundColor: isDark ? '#1f1f1f' : '#f2f2f2',
       },
+      '.CheckboxInput': {
+        backgroundColor: isDark ? '#1f1f1f' : '#ffffff',
+        border: isDark ? '1px solid #424242' : '1px solid #707070',
+        boxShadow: 'none',
+      },
+      '.CheckboxInput:hover': {
+        border: isDark ? '1px solid #848484' : '1px solid #333333',
+      },
+      '.CheckboxInput--checked': {
+        backgroundColor: isDark ? '#ff8800' : '#e56f00',
+        border: isDark ? '1px solid #ff8800' : '1px solid #e56f00',
+      },
+      '.CheckboxLabel': {
+        color: isDark ? '#e6e6e6' : '#333333',
+      },
       '.Spinner': {
         color: isDark ? '#ff8800' : '#e56f00', // accent-main-highlight
         borderColor: isDark