Rework billing

frontend/src/components/AppShell.tsx

@@ -1,10 +1,12 @@
 import { A, useLocation } from "@solidjs/router"
 import { createEffect, createMemo, createSignal, For, onCleanup, Show } from "solid-js"
 import Fuse from "fuse.js"
-import { primeProfiles, useProfilePicture, useTenantRelays, type Relay } from "@/lib/hooks"
+import { primeProfiles, useProfilePicture, useTenant, useTenantRelays, type Relay } from "@/lib/hooks"
+import { listTenantInvoices, type Invoice } from "@/lib/api"
 import { account, eventStore, identity } from "@/lib/state"
 import serverIcon from "@/assets/server.svg"
 import Modal from "@/components/Modal"
+import PaymentDialog from "@/components/PaymentDialog"
 
 type Profile = {
   name?: string
@@ -33,10 +35,28 @@ function RelayIcon() {
 export default function AppShell(props: { children?: any }) {
   const location = useLocation()
   const picture = useProfilePicture(() => account()?.pubkey)
+  const [tenant] = useTenant()
   const [tenantRelays] = useTenantRelays()
   const [profile, setProfile] = createSignal<Profile>({})
   const [searchOpen, setSearchOpen] = createSignal(false)
   const [searchQuery, setSearchQuery] = createSignal("")
+  const [pastDueInvoice, setPastDueInvoice] = createSignal<Invoice | undefined>()
+  const [showPaymentDialog, setShowPaymentDialog] = createSignal(false)
+
+  createEffect(async () => {
+    const t = tenant()
+    if (!t?.past_due_at) {
+      setPastDueInvoice(undefined)
+      return
+    }
+    try {
+      const invoices = await listTenantInvoices(t.pubkey)
+      const openInvoice = invoices.find(inv => inv.status === "open")
+      setPastDueInvoice(openInvoice)
+    } catch {
+      // ignore
+    }
+  })
 
   const username = createMemo(() => profile().name || profile().display_name || shortenPubkey(account()?.pubkey))
   const nip05 = createMemo(() => profile().nip05 || "No NIP-05")
@@ -138,9 +158,36 @@ export default function AppShell(props: { children?: any }) {
       </aside>
 
       <div class="md:pl-[260px] min-h-screen pb-20 md:pb-0">
+        <Show when={tenant()?.past_due_at}>
+          <div class="bg-red-600 text-white px-4 py-3 text-sm flex items-center justify-between">
+            <span>Your account has an overdue balance.</span>
+            <Show when={pastDueInvoice()}>
+              <button
+                type="button"
+                onClick={() => setShowPaymentDialog(true)}
+                class="font-medium underline hover:no-underline"
+              >
+                Pay now
+              </button>
+            </Show>
+          </div>
+        </Show>
         <main>{props.children}</main>
       </div>
 
+      <Show when={pastDueInvoice() && showPaymentDialog()}>
+        {(_) => {
+          const invoice = pastDueInvoice()!
+          return (
+            <PaymentDialog
+              invoice={invoice}
+              open={true}
+              onClose={() => setShowPaymentDialog(false)}
+            />
+          )
+        }}
+      </Show>
+
       <nav
         class="fixed inset-x-0 bottom-0 z-20 border-t border-gray-200 bg-white md:hidden"
         onClick={() => {