feat: open payment modal immediately on relay plan upgrade

frontend/src/lib/useRelayToggles.ts

@@ -1,5 +1,5 @@
 import { createSignal } from "solid-js"
-import { updateRelayById, deactivateRelayById, reactivateRelayById, getLatestOpenInvoice, type Relay } from "@/lib/hooks"
+import { updateRelayById, deactivateRelayById, reactivateRelayById, getLatestOpenInvoice, tenantNeedsPaymentSetup, type Relay } from "@/lib/hooks"
 import { setToastMessage } from "@/components/Toast"
 import type { Invoice, PlanId } from "@/lib/api"
 
@@ -31,6 +31,7 @@ export default function useRelayToggles(
 ) {
   const [busy, setBusy] = createSignal(false)
   const [pendingInvoice, setPendingInvoice] = createSignal<Invoice | undefined>()
+  const [pendingPaymentSetup, setPendingPaymentSetup] = createSignal(false)
 
   async function updateRelay(next: Relay, previous: Relay) {
     mutate(next)
@@ -101,8 +102,12 @@ export default function useRelayToggles(
     }
 
     if (plan !== "free") {
-      const invoice = await getLatestOpenInvoice()
-      if (invoice) setPendingInvoice(invoice)
+      const needsSetup = await tenantNeedsPaymentSetup()
+      if (needsSetup) {
+        const invoice = await getLatestOpenInvoice()
+        if (invoice) setPendingInvoice(invoice)
+        setPendingPaymentSetup(true)
+      }
     }
   }
 
@@ -116,5 +121,5 @@ export default function useRelayToggles(
     onToggleLivekitSupport: () => toggle("livekit_enabled", relay()?.plan !== "free"),
   }
 
-  return { busy, handleDeactivate, handleReactivate, handleUpdatePlan, pendingInvoice, clearPendingInvoice: () => setPendingInvoice(undefined), toggles }
+  return { busy, handleDeactivate, handleReactivate, handleUpdatePlan, pendingInvoice, clearPendingInvoice: () => setPendingInvoice(undefined), pendingPaymentSetup, clearPendingPaymentSetup: () => setPendingPaymentSetup(false), toggles }
 }

frontend/src/pages/relays/RelayDetail.tsx

@@ -1,5 +1,5 @@
 import { useParams } from "@solidjs/router"
-import { createMemo, createResource, createSignal, Show } from "solid-js"
+import { createEffect, createMemo, createResource, createSignal, Show } from "solid-js"
 import BackLink from "@/components/BackLink"
 import PageContainer from "@/components/PageContainer"
 import PaymentDialog from "@/components/PaymentDialog"
@@ -28,13 +28,20 @@ export default function RelayDetail() {
   })
   const loading = useMinLoading(() => relay.loading && !relay())
   const [activity] = useRelayActivity(relayId)
-  const { busy, handleDeactivate, handleReactivate, handleUpdatePlan, pendingInvoice, clearPendingInvoice, toggles } = useRelayToggles(relayId, relay, { refetch, mutate })
+  const { busy, handleDeactivate, handleReactivate, handleUpdatePlan, pendingInvoice, clearPendingInvoice, pendingPaymentSetup, clearPendingPaymentSetup, toggles } = useRelayToggles(relayId, relay, { refetch, mutate })
 
   const [tenant, { refetch: refetchTenant }] = useTenant()
   const [paymentSetupOpen, setPaymentSetupOpen] = createSignal(false)
   const [invoiceDialogOpen, setInvoiceDialogOpen] = createSignal(false)
   const [paymentBannerDismissed, setPaymentBannerDismissed] = createSignal(false)
 
+  createEffect(() => {
+    if (pendingPaymentSetup() && !pendingInvoice()) {
+      setPaymentSetupOpen(true)
+      clearPendingPaymentSetup()
+    }
+  })
+
   const isPaidRelay = createMemo(() => {
     const r = relay()
     if (!r) return false

frontend/src/pages/relays/RelayNew.tsx

@@ -3,13 +3,15 @@ import { useNavigate } from "@solidjs/router"
 import BackLink from "@/components/BackLink"
 import PageContainer from "@/components/PageContainer"
 import PaymentDialog from "@/components/PaymentDialog"
+import PaymentSetup from "@/components/PaymentSetup"
 import RelayForm, { type RelayFormValues } from "@/components/RelayForm"
-import { createRelayForActiveTenant, getLatestOpenInvoice } from "@/lib/hooks"
+import { createRelayForActiveTenant, getLatestOpenInvoice, tenantNeedsPaymentSetup } from "@/lib/hooks"
 import type { Invoice } from "@/lib/api"
 
 export default function RelayNew() {
   const navigate = useNavigate()
   const [pendingInvoice, setPendingInvoice] = createSignal<Invoice | undefined>()
+  const [paymentSetupOpen, setPaymentSetupOpen] = createSignal(false)
   let createdRelayId = ""
 
   async function handleSubmit(values: RelayFormValues) {
@@ -17,9 +19,14 @@ export default function RelayNew() {
     createdRelayId = relay.id
 
     if (values.plan !== "free") {
-      const invoice = await getLatestOpenInvoice()
-      if (invoice) {
-        setPendingInvoice(invoice)
+      const needsSetup = await tenantNeedsPaymentSetup()
+      if (needsSetup) {
+        const invoice = await getLatestOpenInvoice()
+        if (invoice) {
+          setPendingInvoice(invoice)
+          return
+        }
+        setPaymentSetupOpen(true)
         return
       }
     }
@@ -27,8 +34,13 @@ export default function RelayNew() {
     navigate(`/relays/${relay.id}`)
   }
 
-  function handleDialogClose() {
+  function handleInvoiceClose() {
     setPendingInvoice(undefined)
+    setPaymentSetupOpen(true)
+  }
+
+  function handleSetupClose() {
+    setPaymentSetupOpen(false)
     navigate(`/relays/${createdRelayId}`)
   }
 
@@ -47,10 +59,14 @@ export default function RelayNew() {
           <PaymentDialog
             invoice={inv()}
             open={true}
-            onClose={handleDialogClose}
+            onClose={handleInvoiceClose}
           />
         )}
       </Show>
+      <PaymentSetup
+        open={paymentSetupOpen()}
+        onClose={handleSetupClose}
+      />
     </PageContainer>
   )
 }