fix(billing): finish the portal tab after the page that opened it unmounts

Author: waleedlatif1

apps/sim/hooks/queries/subscription-portal.test.tsx

@@ -0,0 +1,106 @@
+/** @vitest-environment jsdom */
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { renderDataHook, unmountDataHooks } from '@/platform/lib/render-hook.test-support'
+
+const mocks = vi.hoisted(() => ({ requestJson: vi.fn() }))
+
+vi.mock('@/lib/api/client/request', () => ({ requestJson: mocks.requestJson }))
+
+import { useOpenBillingPortal } from '@/hooks/queries/subscription'
+
+const BODY = { context: 'user' } as const
+const PORTAL_URL = 'https://billing.example.test/session'
+
+function deferredPortal() {
+  let resolve: (value: { url: string }) => void = () => {}
+  let reject: (error: Error) => void = () => {}
+  mocks.requestJson.mockReturnValueOnce(
+    new Promise((res, rej) => {
+      resolve = res
+      reject = rej
+    })
+  )
+  return { resolve, reject }
+}
+
+async function settle() {
+  await vi.waitFor(() => expect(mocks.requestJson).toHaveBeenCalled())
+}
+
+/**
+ * Failure mode: the tab opened before the request belongs to the viewer's click, so it has to reach
+ * the portal or close whatever the page does in the meantime, including leave.
+ */
+describe('useOpenBillingPortal after the page that asked has gone', () => {
+  const portalTab = { location: { href: '' }, close: vi.fn() }
+  const openTab = vi.fn()
+
+  beforeEach(() => {
+    mocks.requestJson.mockReset()
+    portalTab.location.href = ''
+    portalTab.close.mockReset()
+    openTab.mockReset().mockReturnValue(portalTab)
+    vi.stubGlobal('open', openTab)
+  })
+
+  afterEach(async () => {
+    await unmountDataHooks()
+    vi.unstubAllGlobals()
+  })
+
+  it('still sends the opened tab to the portal', async () => {
+    const portal = deferredPortal()
+    const hook = await renderDataHook(() => useOpenBillingPortal())
+    hook.result.current.open(BODY, vi.fn())
+    await settle()
+    await hook.unmount()
+
+    portal.resolve({ url: PORTAL_URL })
+
+    await vi.waitFor(() => expect(portalTab.location.href).toBe(PORTAL_URL))
+  })
+
+  it('still closes the opened tab and reports a failed request', async () => {
+    const portal = deferredPortal()
+    const onError = vi.fn()
+    const hook = await renderDataHook(() => useOpenBillingPortal())
+    hook.result.current.open(BODY, onError)
+    await settle()
+    await hook.unmount()
+
+    portal.reject(new Error('no portal'))
+
+    await vi.waitFor(() => expect(portalTab.close).toHaveBeenCalledOnce())
+    expect(onError).toHaveBeenCalledWith(expect.objectContaining({ message: 'no portal' }))
+  })
+
+  it('leaves the current page alone when a blocked tab outlives the page that asked', async () => {
+    const location = { href: 'https://app.example.test/elsewhere' }
+    vi.stubGlobal('location', location)
+    openTab.mockReturnValue(null)
+    const portal = deferredPortal()
+    const hook = await renderDataHook(() => useOpenBillingPortal())
+    hook.result.current.open(BODY, vi.fn())
+    await settle()
+    await hook.unmount()
+
+    portal.resolve({ url: PORTAL_URL })
+    await vi.waitFor(() => expect(hook.queryClient.isMutating()).toBe(0))
+
+    expect(location.href).toBe('https://app.example.test/elsewhere')
+  })
+
+  it('takes the current tab when one is blocked and the page is still here', async () => {
+    const location = { href: 'https://app.example.test/billing' }
+    vi.stubGlobal('location', location)
+    openTab.mockReturnValue(null)
+    const portal = deferredPortal()
+    const hook = await renderDataHook(() => useOpenBillingPortal())
+    hook.result.current.open(BODY, vi.fn())
+    await settle()
+
+    portal.resolve({ url: PORTAL_URL })
+
+    await vi.waitFor(() => expect(location.href).toBe(PORTAL_URL))
+  })
+})

apps/sim/hooks/queries/subscription.ts

@@ -204,30 +204,42 @@ export function useUpdateUsageLimit() {
 
 type OpenBillingPortalParams = ContractBodyInput<typeof createBillingPortalContract>
 
+interface OpenBillingPortalVariables {
+  body: OpenBillingPortalParams
+  portalWindow: Window | null
+  onError: (error: Error) => void
+}
+
 /**
  * Opens the billing portal in a new tab. The tab opens before the request so a popup blocker still
- * treats it as the viewer's click; if one blocks it anyway, the portal takes the current tab. A failed
- * request closes the tab and reports through `onError`.
+ * treats it as the viewer's click, and it reaches the portal or closes even if the page that asked
+ * has gone, so it is never stranded blank. If a blocker stops the tab, the portal takes the current
+ * tab, but only while that page is still mounted: a viewer who moved on is not pulled away.
  */
 export function useOpenBillingPortal() {
   const portal = useMutation({
-    mutationFn: (body: OpenBillingPortalParams) =>
+    mutationFn: ({ body }: OpenBillingPortalVariables) =>
       requestJson(createBillingPortalContract, { body }),
+    onSuccess: (data, { portalWindow }) => {
+      if (portalWindow) portalWindow.location.href = data.url
+    },
+    onError: (error, { portalWindow, onError }) => {
+      portalWindow?.close()
+      onError(error)
+    },
   })
   return {
     isPending: portal.isPending,
     open: (body: OpenBillingPortalParams, onError: (error: Error) => void) => {
       const portalWindow = window.open('', '_blank')
-      portal.mutate(body, {
-        onSuccess: (data) => {
-          if (portalWindow) portalWindow.location.href = data.url
-          else window.location.href = data.url
-        },
-        onError: (error) => {
-          portalWindow?.close()
-          onError(error)
-        },
-      })
+      portal.mutate(
+        { body, portalWindow, onError },
+        {
+          onSuccess: (data) => {
+            if (!portalWindow) window.location.href = data.url
+          },
+        }
+      )
     },
   }
 }