fix(console): Service plan entitlement assignment during 3DS (#2556)

apps/console/app/root.tsx

@@ -87,6 +87,7 @@ export type LoaderData = {
   PASSPORT_URL: string
   displayName: string
   hasUnpaidInvoices: boolean
+  unpaidInvoiceURL: string
   ENV: {
     POSTHOG_API_KEY: string
     POSTHOG_PROXY_HOST: string
@@ -157,16 +158,22 @@ export const loader: LoaderFunction = getRollupReqFunctionErrorWrapper(
         context.env.SECRET_STRIPE_API_KEY
       )
 
+      let unpaidInvoiceURL = '/billing/portal'
+
       const hasUnpaidInvoices = invoices.some((invoice) => {
         if (invoice.status)
-          return ['uncollectible', 'open'].includes(invoice.status)
+          if (['uncollectible', 'open'].includes(invoice.status)) {
+            unpaidInvoiceURL = invoice.url as string
+            return true
+          }
         return false
       })
 
       return json<LoaderData>({
         apps: reshapedApps,
         avatarUrl,
         hasUnpaidInvoices,
+        unpaidInvoiceURL,
         PASSPORT_URL,
         ENV: {
           POSTHOG_API_KEY,
@@ -207,6 +214,7 @@ export default function App() {
     displayName,
     accountURN,
     hasUnpaidInvoices,
+    unpaidInvoiceURL,
   } = loaderData
 
   useEffect(() => {
@@ -274,6 +282,7 @@ export default function App() {
                 displayName,
                 accountURN,
                 hasUnpaidInvoices,
+                unpaidInvoiceURL,
               }}
             />
           </PostHogProvider>
@@ -286,6 +295,7 @@ export default function App() {
               displayName,
               accountURN,
               hasUnpaidInvoices,
+              unpaidInvoiceURL,
             }}
           />
         )}

apps/console/app/routes/__layout.tsx

@@ -17,8 +17,14 @@ import { ToastWithLink } from '@proofzero/design-system/src/atoms/toast/ToastWit
 
 export default function DashboardIndexPage() {
   const context = useOutletContext<OutletContextData>()
-  const { apps, avatarUrl, displayName, PASSPORT_URL, hasUnpaidInvoices } =
-    context
+  const {
+    apps,
+    avatarUrl,
+    displayName,
+    PASSPORT_URL,
+    hasUnpaidInvoices,
+    unpaidInvoiceURL,
+  } = context
 
   return (
     <Popover className="min-h-[100dvh] relative">
@@ -36,7 +42,7 @@ export default function DashboardIndexPage() {
             {hasUnpaidInvoices && (
               <ToastWithLink
                 message="We couldn't process payment for your account"
-                linkHref={`/billing/portal`}
+                linkHref={unpaidInvoiceURL}
                 linkText="Update payment information"
                 type={'urgent'}
               />

apps/console/app/routes/__layout/billing/update.tsx

@@ -14,6 +14,8 @@ import {
 import { reconcileAppSubscriptions } from '~/services/billing/stripe'
 import { type AccountURN } from '@proofzero/urns/account'
 import { ToastType } from '@proofzero/design-system/src/atoms/toast'
+import Stripe from 'stripe'
+import { type ServicePlanType } from '@proofzero/types/account'
 
 /**
  * WARNING: Here be dragons, and not the cute, cuddly kind! This code runs twice in certain scenarios because when the user
@@ -37,14 +39,20 @@ export const action: ActionFunction = getRollupReqFunctionErrorWrapper(
 
     const subId = fd.get('subId') as string
     const redirectUrl = fd.get('redirectUrl') as string
+    const updatePlanParams = fd.get('updatePlanParams') as string
 
     const coreClient = createCoreClient(context.env.Core, {
       ...getAuthzHeaderConditionallyFromToken(jwt),
       ...traceHeader,
     })
+
+    // if this method was called from "$clientId/billing" page, update the plan
+    // and assign the new plan to the app
+
     const flashSession = await getFlashSession(request, context.env)
 
     try {
+      // First we reconcile the subscriptions
       await reconcileAppSubscriptions(
         {
           subscriptionID: subId,
@@ -55,6 +63,33 @@ export const action: ActionFunction = getRollupReqFunctionErrorWrapper(
         },
         context.env
       )
+
+      // Then based on reconciled result we update the plan
+      // We call this only if we update the plan for the app
+      if (updatePlanParams.length) {
+        const { clientId, plan } = JSON.parse(updatePlanParams) as {
+          clientId: string
+          plan: ServicePlanType
+          paymentIntentId: string
+        }
+
+        const entitlements = await coreClient.account.getEntitlements.query({
+          accountURN,
+        })
+
+        const numberOfEntitlements = entitlements.plans[plan]?.entitlements
+        const apps = await coreClient.starbase.listApps.query()
+        const allotedApps = apps.filter((a) => a.appPlan === plan).length
+
+        if (numberOfEntitlements && numberOfEntitlements > allotedApps) {
+          await coreClient.starbase.setAppPlan.mutate({
+            accountURN,
+            clientId,
+            plan,
+          })
+        }
+      }
+
       flashSession.flash(
         'toast_notification',
         JSON.stringify({

apps/console/app/routes/apps/$clientId.tsx

@@ -151,6 +151,7 @@ export default function AppDetailIndexPage() {
     displayName,
     accountURN,
     hasUnpaidInvoices,
+    unpaidInvoiceURL,
   } = useOutletContext<OutletContextData>()
   const {
     appDetails,
@@ -203,7 +204,7 @@ export default function AppDetailIndexPage() {
             {hasUnpaidInvoices && (
               <ToastWithLink
                 message="We couldn't process payment for your account"
-                linkHref={`/billing/portal`}
+                linkHref={unpaidInvoiceURL}
                 linkText="Update payment information"
                 type={'urgent'}
               />

apps/console/app/routes/apps/$clientId/billing.tsx

@@ -207,7 +207,13 @@ const processPurchaseOp = async (
     sub,
     flashSession,
   })
-  if (sub.status === 'active' || sub.status === 'trialing') {
+
+  const invoiceStatus = (sub.latest_invoice as Stripe.Invoice)?.status
+
+  if (
+    (sub.status === 'active' || sub.status === 'trialing') &&
+    invoiceStatus === 'paid'
+  ) {
     await coreClient.account.updateEntitlements.mutate({
       accountURN: accountURN,
       subscriptionID: sub.id,
@@ -753,6 +759,10 @@ export default () => {
         status,
         client_secret,
         payment_method,
+        updatePlanParams: {
+          clientId: appDetails.clientId,
+          plan: ServicePlanType.PRO,
+        },
         redirectUrl: `/apps/${appDetails.clientId}/billing`,
       })
     }

apps/console/app/utils/billing.ts

@@ -13,6 +13,7 @@ import { type Session, type SessionData } from '@remix-run/cloudflare'
 import { commitFlashSession } from '~/utilities/session.server'
 import { type Env } from 'bindings'
 import Stripe from 'stripe'
+import { type ServicePlanType } from '@proofzero/types/account'
 
 export type StripeInvoice = {
   id: string
@@ -134,6 +135,7 @@ export const process3DSecureCard = async ({
   submit,
   subId,
   redirectUrl,
+  updatePlanParams,
 }: {
   STRIPE_PUBLISHABLE_KEY: string
   status: string
@@ -142,6 +144,10 @@ export const process3DSecureCard = async ({
   submit: SubmitFunction
   subId: string
   redirectUrl?: string
+  updatePlanParams?: {
+    clientId?: string
+    plan: ServicePlanType
+  }
 }) => {
   const stripeClient = await loadStripe(STRIPE_PUBLISHABLE_KEY)
   if (status === 'requires_action') {
@@ -160,6 +166,9 @@ export const process3DSecureCard = async ({
       {
         subId,
         redirectUrl: redirectUrl ? redirectUrl : '/billing',
+        updatePlanParams: updatePlanParams
+          ? JSON.stringify(updatePlanParams)
+          : '',
       },
       {
         method: 'post',