Add invoice payment dialog

frontend/src/pages/Account.tsx

@@ -1,15 +1,17 @@
 import { createEffect, createMemo, createSignal, For, Show } from "solid-js"
 import PageContainer from "@/components/PageContainer"
 import LoadingState from "@/components/LoadingState"
+import PaymentDialog from "@/components/PaymentDialog"
 import useMinLoading from "@/components/useMinLoading"
-import { updateActiveTenantBilling, useTenant, useTenantInvoices } from "@/lib/hooks"
+import { updateActiveTenantBilling, useTenant, useTenantInvoices, type Invoice } from "@/lib/hooks"
 
 export default function Account() {
   const [tenant, { refetch: refetchTenant }] = useTenant()
-  const [invoices] = useTenantInvoices()
+  const [invoices, { refetch: refetchInvoices }] = useTenantInvoices()
   const [nwcUrl, setNwcUrl] = createSignal("")
   const [saving, setSaving] = createSignal(false)
   const [error, setError] = createSignal("")
+  const [selectedInvoice, setSelectedInvoice] = createSignal<Invoice | undefined>()
   const invoicesLoading = useMinLoading(() => invoices.loading)
 
   const hasBillingChanges = createMemo(() => {
@@ -36,11 +38,22 @@ export default function Account() {
     }
   }
 
+  function handleInvoiceDialogClose() {
+    setSelectedInvoice(undefined)
+    void refetchInvoices()
+  }
+
   function logout() {
     localStorage.clear()
     window.location.href = "/"
   }
 
+  const invoiceStatusStyles: Record<string, string> = {
+    pending: "bg-yellow-50 text-yellow-700 border-yellow-200",
+    paid: "bg-green-50 text-green-700 border-green-200",
+    closed: "bg-gray-100 text-gray-500 border-gray-200",
+  }
+
   return (
     <PageContainer>
       <div class="mb-6 py-2 flex items-center justify-between gap-3">
@@ -99,25 +112,64 @@ export default function Account() {
             <LoadingState message="Loading invoices..." paddingClass="py-8" />
           </Show>
           <Show when={!invoicesLoading()}>
-            <Show when={(invoices()?.length ?? 0) > 0} fallback={<p class="text-gray-500">No invoices yet.</p>}>
+            <Show when={(invoices()?.length ?? 0) > 0} fallback={<p class="text-gray-500 text-sm">No invoices yet.</p>}>
               <ul class="space-y-3">
                 <For each={invoices()}>
-                  {(invoice) => (
-                    <li class="rounded-lg border border-gray-200 p-3 text-sm text-gray-700">
-                      <div class="flex items-center justify-between gap-3">
-                        <span class="font-medium">—</span>
-                        <span class="uppercase text-xs tracking-wide text-gray-500">{invoice.status}</span>
-                      </div>
-                      <p class="text-xs text-gray-500 mt-1">{new Date(invoice.created_at * 1000).toLocaleString()}</p>
-                      <p class="text-xs mt-2 break-all">{invoice.bolt11}</p>
-                    </li>
-                  )}
+                  {(invoice) => {
+                    const isPending = () => invoice.status === "pending"
+                    const statusStyle = () => invoiceStatusStyles[invoice.status] ?? "bg-gray-100 text-gray-500 border-gray-200"
+                    const periodLabel = () => {
+                      const start = new Date(invoice.period_start * 1000)
+                      const end = new Date(invoice.period_end * 1000)
+                      return `${start.toLocaleDateString()} – ${end.toLocaleDateString()}`
+                    }
+
+                    return (
+                      <li
+                        class={`rounded-lg border border-gray-200 p-4 text-sm ${isPending() ? "cursor-pointer hover:border-blue-300 hover:bg-blue-50 transition-colors" : ""}`}
+                        onClick={() => isPending() && setSelectedInvoice(invoice)}
+                        title={isPending() ? "Click to pay this invoice" : undefined}
+                      >
+                        <div class="flex items-center justify-between gap-3">
+                          <div>
+                            <span class="font-medium text-gray-900">
+                              {invoice.amount ? `${invoice.amount.toLocaleString()} sats` : "—"}
+                            </span>
+                            <Show when={invoice.period_start && invoice.period_end}>
+                              <p class="text-xs text-gray-500 mt-0.5">{periodLabel()}</p>
+                            </Show>
+                          </div>
+                          <div class="flex items-center gap-2 flex-shrink-0">
+                            <Show when={isPending()}>
+                              <span class="text-xs text-blue-600 font-medium">Pay now →</span>
+                            </Show>
+                            <span class={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium capitalize ${statusStyle()}`}>
+                              {invoice.status}
+                            </span>
+                          </div>
+                        </div>
+                        <Show when={invoice.error}>
+                          <p class="text-xs text-red-500 mt-2">{invoice.error}</p>
+                        </Show>
+                      </li>
+                    )
+                  }}
                 </For>
               </ul>
             </Show>
           </Show>
         </section>
       </div>
+
+      <Show when={selectedInvoice()}>
+        {(invoice) => (
+          <PaymentDialog
+            invoice={invoice()}
+            open={true}
+            onClose={handleInvoiceDialogClose}
+          />
+        )}
+      </Show>
     </PageContainer>
   )
 }

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>
   )
 }