Add invoice payment dialog

frontend/src/components/PaymentDialog.tsx

@@ -0,0 +1,218 @@
+import { createEffect, createSignal, Show } from "solid-js"
+import QRCode from "qrcode"
+import Modal from "@/components/Modal"
+import { getInvoice, type Invoice } from "@/lib/api"
+
+type Tab = "bitcoin" | "card"
+type PayStatus = "idle" | "loading" | "success" | "error"
+
+type PaymentDialogProps = {
+  invoice: Invoice
+  open: boolean
+  onClose: () => void
+}
+
+export default function PaymentDialog(props: PaymentDialogProps) {
+  const [tab, setTab] = createSignal<Tab>("bitcoin")
+  const [qrDataUrl, setQrDataUrl] = createSignal("")
+  const [payStatus, setPayStatus] = createSignal<PayStatus>("idle")
+  const [payError, setPayError] = createSignal("")
+
+  createEffect(async () => {
+    const bolt11 = props.invoice?.bolt11
+    if (!bolt11) return
+    setQrDataUrl(await QRCode.toDataURL(bolt11, { width: 256, margin: 2 }))
+  })
+
+  function copyBolt11() {
+    void navigator.clipboard.writeText(props.invoice.bolt11)
+  }
+
+  async function checkPayment() {
+    setPayStatus("loading")
+    setPayError("")
+    try {
+      const invoice = await getInvoice(props.invoice.id)
+      if (invoice.status === "paid") {
+        setPayStatus("success")
+      } else {
+        setPayStatus("error")
+        setPayError("Payment not yet confirmed. Please try again after sending.")
+      }
+    } catch (e) {
+      setPayStatus("error")
+      setPayError(e instanceof Error ? e.message : "Failed to check payment status")
+    }
+  }
+
+  function handleClose() {
+    setPayStatus("idle")
+    setPayError("")
+    props.onClose()
+  }
+
+  const periodLabel = () => {
+    const start = new Date(props.invoice.period_start * 1000)
+    const end = new Date(props.invoice.period_end * 1000)
+    return `${start.toLocaleDateString()} – ${end.toLocaleDateString()}`
+  }
+
+  return (
+    <Modal
+      open={props.open}
+      onClose={handleClose}
+      wrapperClass="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+      panelClass="w-full max-w-md rounded-2xl bg-white shadow-xl overflow-hidden"
+    >
+      {/* Header */}
+      <div class="px-6 pt-6 pb-4 border-b border-gray-100">
+        <div class="flex items-start justify-between gap-3">
+          <div>
+            <h2 class="text-lg font-semibold text-gray-900">Pay Invoice</h2>
+            <Show when={props.invoice.amount}>
+              <p class="text-2xl font-bold text-gray-900 mt-1">
+                {props.invoice.amount.toLocaleString()} <span class="text-base font-normal text-gray-500">sats</span>
+              </p>
+            </Show>
+            <Show when={props.invoice.period_start && props.invoice.period_end}>
+              <p class="text-xs text-gray-500 mt-0.5">{periodLabel()}</p>
+            </Show>
+          </div>
+          <button
+            type="button"
+            onClick={handleClose}
+            class="text-gray-400 hover:text-gray-700 rounded p-1 hover:bg-gray-100 flex-shrink-0"
+            aria-label="Close"
+          >
+            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M18 6L6 18M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      {/* Pay with label + Tabs */}
+      <div class="px-6 pt-4">
+        <p class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-2">Pay with</p>
+        <div class="flex gap-2 border border-gray-200 rounded-lg p-1">
+          <button
+            type="button"
+            class={`flex-1 rounded-md px-3 py-2 text-sm transition-colors ${tab() === "bitcoin" ? "bg-gray-900 text-white" : "text-gray-700 hover:bg-gray-50"}`}
+            onClick={() => setTab("bitcoin")}
+          >
+            Bitcoin
+          </button>
+          <button
+            type="button"
+            class={`flex-1 rounded-md px-3 py-2 text-sm transition-colors ${tab() === "card" ? "bg-gray-900 text-white" : "text-gray-700 hover:bg-gray-50"}`}
+            onClick={() => setTab("card")}
+          >
+            Card
+          </button>
+        </div>
+      </div>
+
+      {/* Tab content */}
+      <div class="px-6 py-4 min-h-[240px] flex flex-col items-center justify-center">
+        <Show when={tab() === "bitcoin"}>
+          <Show
+            when={payStatus() === "success"}
+            fallback={
+              <div class="w-full space-y-3">
+                <Show
+                  when={qrDataUrl()}
+                  fallback={<div class="flex items-center justify-center py-12 text-sm text-gray-400">Generating invoice...</div>}
+                >
+                  <img src={qrDataUrl()} alt="Lightning invoice QR code" class="mx-auto rounded-lg" />
+                </Show>
+                <div class="flex rounded-lg border border-gray-300">
+                  <input
+                    type="text"
+                    readOnly
+                    value={props.invoice.bolt11}
+                    class="min-w-0 flex-1 rounded-l-lg border-0 px-3 py-2 text-xs text-gray-500 bg-transparent focus:outline-none"
+                  />
+                  <button
+                    type="button"
+                    class="flex items-center px-3 text-gray-400 hover:text-gray-700"
+                    onClick={copyBolt11}
+                    title="Copy invoice"
+                  >
+                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                      <rect x="9" y="9" width="13" height="13" rx="2" />
+                      <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            }
+          >
+            <div class="text-center">
+              <div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
+                <svg class="w-6 h-6 text-green-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <polyline points="20 6 9 17 4 12" />
+                </svg>
+              </div>
+              <p class="text-sm font-medium text-gray-900">Payment confirmed!</p>
+              <p class="text-xs text-gray-500 mt-1">Thank you. Your relay is now active.</p>
+            </div>
+          </Show>
+        </Show>
+
+        <Show when={tab() === "card"}>
+          <div class="text-center">
+            <div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-gray-100">
+              <svg class="w-6 h-6 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <rect x="1" y="4" width="22" height="16" rx="2" ry="2" />
+                <line x1="1" y1="10" x2="23" y2="10" />
+              </svg>
+            </div>
+            <p class="text-sm font-medium text-gray-700">Coming soon</p>
+            <p class="text-xs text-gray-500 mt-1">Card payments are not yet available.</p>
+          </div>
+        </Show>
+      </div>
+
+      {/* Error */}
+      <Show when={payError()}>
+        <div class="px-6 pb-2">
+          <p class="text-xs text-red-600">{payError()}</p>
+        </div>
+      </Show>
+
+      {/* Footer */}
+      <div class="px-6 py-4 flex justify-between gap-3 border-t border-gray-100">
+        <Show
+          when={payStatus() !== "success"}
+          fallback={
+            <div class="flex justify-end w-full">
+              <button
+                type="button"
+                onClick={handleClose}
+                class="py-2 px-4 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700"
+              >
+                Done
+              </button>
+            </div>
+          }
+        >
+          <button
+            type="button"
+            onClick={handleClose}
+            class="py-2 px-4 border border-gray-300 text-gray-700 text-sm rounded-lg hover:bg-gray-50 transition-colors"
+          >
+            Pay Later
+          </button>
+          <button
+            type="button"
+            onClick={checkPayment}
+            disabled={payStatus() === "loading"}
+            class="py-2 px-4 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
+          >
+            {payStatus() === "loading" ? "Checking..." : "Complete Payment"}
+          </button>
+        </Show>
+      </div>
+    </Modal>
+  )
+}

frontend/src/lib/api.ts

@@ -104,6 +104,7 @@ export type Invoice = {
   id: string
   tenant: string
   status: string
+  amount: number
   created_at: number
   attempted_at: number
   error: string

frontend/src/lib/hooks.ts

@@ -18,6 +18,7 @@ import {
   updateTenantBilling,
   type Activity,
   type CreateRelayInput,
+  type Invoice,
   type Relay,
   type Tenant,
   type UpdateRelayInput,
@@ -129,6 +130,11 @@ export const updateRelayPlanById = (id: string, plan: string) => updateRelay(id,
 
 export const deactivateRelayById = (id: string) => deactivateRelay(id)
 
+export async function checkPendingInvoice(): Promise<Invoice | undefined> {
+  const invoices = await listTenantInvoices(account()!.pubkey)
+  return invoices.find(inv => inv.status === "pending")
+}
+
 export async function getRelayMembers(url: string) {
   const management = new RelayManagement(new NostrRelay(url), account()!.signer)
 
@@ -139,4 +145,4 @@ export async function getRelayMembers(url: string) {
   }
 }
 
-export type { Activity, Relay, Tenant }
+export type { Activity, Invoice, Relay, Tenant }

frontend/src/lib/useRelayToggles.ts

@@ -1,5 +1,5 @@
 import { createSignal } from "solid-js"
-import { updateRelayById, deactivateRelayById, type Relay } from "@/lib/hooks"
+import { updateRelayById, deactivateRelayById, checkPendingInvoice, type Invoice, type Relay } from "@/lib/hooks"
 import { setToastMessage } from "@/components/Toast"
 import type { PlanId } from "@/lib/api"
 
@@ -30,6 +30,7 @@ export default function useRelayToggles(
   { refetch, mutate }: RelayActions,
 ) {
   const [busy, setBusy] = createSignal(false)
+  const [pendingInvoice, setPendingInvoice] = createSignal<Invoice | undefined>()
 
   async function updateRelay(next: Relay, previous: Relay) {
     mutate(next)
@@ -85,6 +86,11 @@ export default function useRelayToggles(
       setToastMessage(e instanceof Error ? e.message : "Failed to update relay plan")
       throw e
     }
+
+    if (plan !== "free") {
+      const invoice = await checkPendingInvoice()
+      if (invoice) setPendingInvoice(invoice)
+    }
   }
 
   const toggles = {
@@ -97,5 +103,5 @@ export default function useRelayToggles(
     onToggleLivekitSupport: () => toggle("livekit_enabled", relay()?.plan !== "free"),
   }
 
-  return { busy, handleDeactivate, handleUpdatePlan, toggles }
+  return { busy, handleDeactivate, handleUpdatePlan, pendingInvoice, clearPendingInvoice: () => setPendingInvoice(undefined), toggles }
 }

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) => (
+                  {(invoice) => {
-                    <li class="rounded-lg border border-gray-200 p-3 text-sm text-gray-700">
+                    const isPending = () => invoice.status === "pending"
-                      <div class="flex items-center justify-between gap-3">
+                    const statusStyle = () => invoiceStatusStyles[invoice.status] ?? "bg-gray-100 text-gray-500 border-gray-200"
-                        <span class="font-medium">—</span>
+                    const periodLabel = () => {
-                        <span class="uppercase text-xs tracking-wide text-gray-500">{invoice.status}</span>
+                      const start = new Date(invoice.period_start * 1000)
-                      </div>
+                      const end = new Date(invoice.period_end * 1000)
-                      <p class="text-xs text-gray-500 mt-1">{new Date(invoice.created_at * 1000).toLocaleString()}</p>
+                      return `${start.toLocaleDateString()} – ${end.toLocaleDateString()}`
-                      <p class="text-xs mt-2 break-all">{invoice.bolt11}</p>
+                    }
-                    </li>
+
-                  )}
+                    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>
   )
 }