Add invoice payment dialog

frontend/src/pages/relays/RelayDetail.tsx

@@ -2,6 +2,7 @@ import { useParams } from "@solidjs/router"
 import { createMemo, createResource, Show } from "solid-js"
 import BackLink from "@/components/BackLink"
 import PageContainer from "@/components/PageContainer"
+import PaymentDialog from "@/components/PaymentDialog"
 import RelayDetailCard from "@/components/RelayDetailCard"
 import ResourceState from "@/components/ResourceState"
 import useMinLoading from "@/components/useMinLoading"
@@ -20,7 +21,7 @@ export default function RelayDetail() {
   const [members] = createResource(relayUrl, getRelayMembers)
   const loading = useMinLoading(() => relay.loading && !relay())
   const [activity] = useRelayActivity(relayId)
-  const { busy, handleDeactivate, handleUpdatePlan, toggles } = useRelayToggles(relayId, relay, { refetch, mutate })
+  const { busy, handleDeactivate, handleUpdatePlan, pendingInvoice, clearPendingInvoice, toggles } = useRelayToggles(relayId, relay, { refetch, mutate })
 
   return (
     <PageContainer>
@@ -42,6 +43,15 @@ export default function RelayDetail() {
           </div>
         )}
       </Show>
+      <Show when={pendingInvoice()}>
+        {(invoice) => (
+          <PaymentDialog
+            invoice={invoice()}
+            open={true}
+            onClose={clearPendingInvoice}
+          />
+        )}
+      </Show>
     </PageContainer>
   )
 }

frontend/src/pages/relays/RelayNew.tsx

@@ -1,17 +1,36 @@
+import { createSignal } from "solid-js"
 import { useNavigate } from "@solidjs/router"
 import BackLink from "@/components/BackLink"
 import PageContainer from "@/components/PageContainer"
+import PaymentDialog from "@/components/PaymentDialog"
 import RelayForm, { type RelayFormValues } from "@/components/RelayForm"
-import { createRelayForActiveTenant } from "@/lib/hooks"
+import { checkPendingInvoice, createRelayForActiveTenant, type Invoice } from "@/lib/hooks"
 
 export default function RelayNew() {
   const navigate = useNavigate()
+  const [pendingInvoice, setPendingInvoice] = createSignal<Invoice | undefined>()
+  let createdRelayId = ""
 
   async function handleSubmit(values: RelayFormValues) {
     const relay = await createRelayForActiveTenant(values)
+    createdRelayId = relay.id
+
+    if (values.plan !== "free") {
+      const invoice = await checkPendingInvoice()
+      if (invoice) {
+        setPendingInvoice(invoice)
+        return
+      }
+    }
+
     navigate(`/relays/${relay.id}`)
   }
 
+  function handleDialogClose() {
+    setPendingInvoice(undefined)
+    navigate(`/relays/${createdRelayId}`)
+  }
+
   return (
     <PageContainer size="narrow">
       <BackLink href="/relays" label="Relays" />
@@ -22,6 +41,13 @@ export default function RelayNew() {
         submitLabel="Create Relay"
         submittingLabel="Creating..."
       />
+      {pendingInvoice() && (
+        <PaymentDialog
+          invoice={pendingInvoice()!}
+          open={!!pendingInvoice()}
+          onClose={handleDialogClose}
+        />
+      )}
     </PageContainer>
   )
 }