Massive user-story-oriented refactor

frontend/src/pages/relays/RelayDetail.tsx

@@ -1,5 +1,5 @@
 import { useParams } from "@solidjs/router"
-import { createEffect, createMemo, createResource, createSignal, Show } from "solid-js"
+import { createEffect, createResource, createSignal, onCleanup, Show } from "solid-js"
 import BackLink from "@/components/BackLink"
 import PageContainer from "@/components/PageContainer"
 import PaymentDialog from "@/components/PaymentDialog"
@@ -9,9 +9,10 @@ import ResourceState from "@/components/ResourceState"
 import useMinLoading from "@/components/useMinLoading"
 import ActivityFeed from "@/components/ActivityFeed"
 import { listRelayMembers } from "@/lib/api"
-import { getLatestOpenInvoice, useRelay, useRelayActivity, useTenant } from "@/lib/hooks"
+import { useRelay, useRelayActivity } from "@/lib/hooks"
 import useRelayToggles from "@/lib/useRelayToggles"
-import { plans } from "@/lib/state"
+import { setBillingFlowActive } from "@/lib/billing"
+import { refetchBilling } from "@/lib/state"
 
 export default function RelayDetail() {
   const params = useParams()
@@ -30,10 +31,7 @@ export default function RelayDetail() {
   const [activity] = useRelayActivity(relayId)
   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()) {
@@ -42,25 +40,10 @@ export default function RelayDetail() {
     }
   })
 
-  const isPaidRelay = createMemo(() => {
-    const r = relay()
-    if (!r) return false
-    const plan = plans().find(p => p.id === r.plan_id)
-    return !!(plan && plan.amount > 0)
-  })
-
-  const [openInvoice, { refetch: refetchOpenInvoice }] = createResource(
-    isPaidRelay,
-    async (paid) => paid ? getLatestOpenInvoice() : null
-  )
-
-  const showPaymentNudge = createMemo(() => {
-    if (paymentBannerDismissed()) return false
-    if (!isPaidRelay()) return false
-    const t = tenant()
-    if (!t) return false
-    return !t.nwc_is_set && !t.stripe_payment_method_id
-  })
+  // Suppress the shared banner's redundant pay/setup prompts while this page's
+  // own inline plan-change modals are open.
+  createEffect(() => setBillingFlowActive(Boolean(pendingInvoice()) || paymentSetupOpen()))
+  onCleanup(() => setBillingFlowActive(false))
 
   return (
     <PageContainer>
@@ -69,44 +52,6 @@ export default function RelayDetail() {
       <Show when={!loading() && relay()}>
         {(r) => (
           <div class="space-y-6 mb-6">
-            <Show when={showPaymentNudge()}>
-              <div class="rounded-lg border border-amber-200 bg-amber-50 p-4 flex items-start justify-between gap-4">
-                <div class="min-w-0">
-                  <p class="text-sm font-medium text-amber-800">Payment setup recommended</p>
-                  <p class="text-sm text-amber-700 mt-1">
-                    This relay is on a paid plan. Invoices are due when your subscription starts. Set up NWC or Stripe for automatic payments, or pay open invoices via Lightning.
-                  </p>
-                </div>
-                <div class="flex items-center gap-3 shrink-0">
-                  <Show when={openInvoice()}>
-                    <button
-                      type="button"
-                      onClick={() => setInvoiceDialogOpen(true)}
-                      class="text-sm font-medium text-amber-800 underline hover:text-amber-900 whitespace-nowrap"
-                    >
-                      Pay invoice
-                    </button>
-                  </Show>
-                  <button
-                    type="button"
-                    onClick={() => setPaymentSetupOpen(true)}
-                    class="text-sm font-medium text-amber-800 underline hover:text-amber-900 whitespace-nowrap"
-                  >
-                    Set up payments
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => setPaymentBannerDismissed(true)}
-                    aria-label="Dismiss"
-                    class="text-amber-500 hover:text-amber-800 shrink-0"
-                  >
-                    <svg class="w-4 h-4" 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>
-            </Show>
             <RelayDetailCard
               relay={r()}
               currentMembers={members()?.length}
@@ -129,20 +74,7 @@ export default function RelayDetail() {
             open={true}
             onClose={() => {
               clearPendingInvoice()
-              void refetchTenant()
-              void refetchOpenInvoice()
-            }}
-          />
-        )}
-      </Show>
-      <Show when={openInvoice()}>
-        {(inv) => (
-          <PaymentDialog
-            invoice={inv()!}
-            open={invoiceDialogOpen()}
-            onClose={() => {
-              setInvoiceDialogOpen(false)
-              void refetchOpenInvoice()
+              void refetchBilling()
             }}
           />
         )}
@@ -151,7 +83,7 @@ export default function RelayDetail() {
         open={paymentSetupOpen()}
         onClose={() => {
           setPaymentSetupOpen(false)
-          void refetchTenant()
+          void refetchBilling()
         }}
       />
     </PageContainer>