feat: encourage payment setup for paid relays without making it required (#40)

Co-authored-by: userAdityaa <aditya.chaudhary1558@gmail.com>
Co-committed-by: userAdityaa <aditya.chaudhary1558@gmail.com>

frontend/src/pages/relays/RelayDetail.tsx

@@ -1,14 +1,16 @@
 import { useParams } from "@solidjs/router"
-import { createMemo, createResource, Show } from "solid-js"
+import { createMemo, createResource, createSignal, Show } from "solid-js"
 import BackLink from "@/components/BackLink"
 import PageContainer from "@/components/PageContainer"
+import PaymentDialog from "@/components/PaymentDialog"
 import PaymentSetup from "@/components/PaymentSetup"
 import RelayDetailCard from "@/components/RelayDetailCard"
 import ResourceState from "@/components/ResourceState"
 import useMinLoading from "@/components/useMinLoading"
 import ActivityFeed from "@/components/ActivityFeed"
-import { getRelayMembers, useRelay, useRelayActivity } from "@/lib/hooks"
+import { getLatestOpenInvoice, getRelayMembers, useRelay, useRelayActivity, useTenant } from "@/lib/hooks"
 import useRelayToggles from "@/lib/useRelayToggles"
+import { plans } from "@/lib/state"
 
 export default function RelayDetail() {
   const params = useParams()
@@ -21,7 +23,32 @@ export default function RelayDetail() {
   const [members] = createResource(relayUrl, getRelayMembers)
   const loading = useMinLoading(() => relay.loading && !relay())
   const [activity] = useRelayActivity(relayId)
-  const { busy, handleDeactivate, handleReactivate, handleUpdatePlan, needsPaymentSetup, clearNeedsPaymentSetup, toggles } = useRelayToggles(relayId, relay, { refetch, mutate })
+  const { busy, handleDeactivate, handleReactivate, handleUpdatePlan, pendingInvoice, clearPendingInvoice, 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)
+
+  const isPaidRelay = createMemo(() => {
+    const r = relay()
+    if (!r) return false
+    const plan = plans().find(p => p.id === r.plan)
+    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_url
+  })
 
   return (
     <PageContainer>
@@ -30,6 +57,44 @@ 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}
@@ -45,9 +110,37 @@ export default function RelayDetail() {
           </div>
         )}
       </Show>
+      <Show when={pendingInvoice()}>
+        {(inv) => (
+          <PaymentDialog
+            invoice={inv()}
+            open={true}
+            onClose={() => {
+              clearPendingInvoice()
+              void refetchTenant()
+              void refetchOpenInvoice()
+            }}
+          />
+        )}
+      </Show>
+      <Show when={openInvoice()}>
+        {(inv) => (
+          <PaymentDialog
+            invoice={inv()!}
+            open={invoiceDialogOpen()}
+            onClose={() => {
+              setInvoiceDialogOpen(false)
+              void refetchOpenInvoice()
+            }}
+          />
+        )}
+      </Show>
       <PaymentSetup
-        open={needsPaymentSetup()}
-        onClose={clearNeedsPaymentSetup}
+        open={paymentSetupOpen()}
+        onClose={() => {
+          setPaymentSetupOpen(false)
+          void refetchTenant()
+        }}
       />
     </PageContainer>
   )

frontend/src/pages/relays/RelayNew.tsx

@@ -1,14 +1,15 @@
-import { createSignal } from "solid-js"
+import { createSignal, Show } from "solid-js"
 import { useNavigate } from "@solidjs/router"
 import BackLink from "@/components/BackLink"
 import PageContainer from "@/components/PageContainer"
-import PaymentSetup from "@/components/PaymentSetup"
+import PaymentDialog from "@/components/PaymentDialog"
 import RelayForm, { type RelayFormValues } from "@/components/RelayForm"
-import { createRelayForActiveTenant, tenantNeedsPaymentSetup } from "@/lib/hooks"
+import { createRelayForActiveTenant, getLatestOpenInvoice } from "@/lib/hooks"
+import type { Invoice } from "@/lib/api"
 
 export default function RelayNew() {
   const navigate = useNavigate()
-  const [showPaymentSetup, setShowPaymentSetup] = createSignal(false)
+  const [pendingInvoice, setPendingInvoice] = createSignal<Invoice | undefined>()
   let createdRelayId = ""
 
   async function handleSubmit(values: RelayFormValues) {
@@ -16,9 +17,9 @@ export default function RelayNew() {
     createdRelayId = relay.id
 
     if (values.plan !== "free") {
-      const needs = await tenantNeedsPaymentSetup()
-      if (needs) {
-        setShowPaymentSetup(true)
+      const invoice = await getLatestOpenInvoice()
+      if (invoice) {
+        setPendingInvoice(invoice)
         return
       }
     }
@@ -27,7 +28,7 @@ export default function RelayNew() {
   }
 
   function handleDialogClose() {
-    setShowPaymentSetup(false)
+    setPendingInvoice(undefined)
     navigate(`/relays/${createdRelayId}`)
   }
 
@@ -41,10 +42,15 @@ export default function RelayNew() {
         submitLabel="Create Relay"
         submittingLabel="Creating..."
       />
-      <PaymentSetup
-        open={showPaymentSetup()}
-        onClose={handleDialogClose}
-      />
+      <Show when={pendingInvoice()}>
+        {(inv) => (
+          <PaymentDialog
+            invoice={inv()}
+            open={true}
+            onClose={handleDialogClose}
+          />
+        )}
+      </Show>
     </PageContainer>
   )
 }