From e492f3eeda80d1829fa3f46931f60869bee0aef2 Mon Sep 17 00:00:00 2001
From: userAdityaa <aditya.chaudhary1558@gmail.com>
Date: Tue, 21 Apr 2026 02:12:19 +0545
Subject: [PATCH] feat: encourage payment setup for paid relays without making
 it required

---
 frontend/src/components/PaymentSetup.tsx  |  4 +-
 frontend/src/pages/relays/RelayDetail.tsx | 57 +++++++++++++++++++++--
 2 files changed, 55 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/PaymentSetup.tsx b/frontend/src/components/PaymentSetup.tsx
index 2a54f24..f883879 100644
--- a/frontend/src/components/PaymentSetup.tsx
+++ b/frontend/src/components/PaymentSetup.tsx
@@ -64,7 +64,7 @@ export default function PaymentSetup(props: PaymentSetupProps) {
         <div class="flex items-start justify-between gap-3">
           <div>
             <h2 class="text-lg font-semibold text-gray-900">Set Up Payments</h2>
-            <p class="text-sm text-gray-500 mt-1">Choose how you'd like to pay for your relay.</p>
+            <p class="text-sm text-gray-500 mt-1">Choose how you'd like to pay once invoices are issued for your relay.</p>
           </div>
           <button
             type="button"
@@ -144,7 +144,7 @@ export default function PaymentSetup(props: PaymentSetupProps) {
                 <line x1="1" y1="10" x2="23" y2="10" />
               </svg>
             </div>
-            <p class="text-sm text-gray-600">Add a payment card via Stripe to enable automatic billing.</p>
+            <p class="text-sm text-gray-600">Add a payment card via Stripe to enable automatic billing once invoices are issued.</p>
             <button
               type="button"
               onClick={openPortal}
diff --git a/frontend/src/pages/relays/RelayDetail.tsx b/frontend/src/pages/relays/RelayDetail.tsx
index 24ee55f..a0ebe61 100644
--- a/frontend/src/pages/relays/RelayDetail.tsx
+++ b/frontend/src/pages/relays/RelayDetail.tsx
@@ -1,5 +1,5 @@
 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 PaymentSetup from "@/components/PaymentSetup"
@@ -7,8 +7,9 @@ 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 { getRelayMembers, useRelay, useRelayActivity, useTenant } from "@/lib/hooks"
 import useRelayToggles from "@/lib/useRelayToggles"
+import { plans } from "@/lib/state"
 
 export default function RelayDetail() {
   const params = useParams()
@@ -23,6 +24,21 @@ export default function RelayDetail() {
   const [activity] = useRelayActivity(relayId)
   const { busy, handleDeactivate, handleReactivate, handleUpdatePlan, needsPaymentSetup, clearNeedsPaymentSetup, toggles } = useRelayToggles(relayId, relay, { refetch, mutate })
 
+  const [tenant, { refetch: refetchTenant }] = useTenant()
+  const [paymentSetupOpen, setPaymentSetupOpen] = createSignal(false)
+  const [paymentBannerDismissed, setPaymentBannerDismissed] = createSignal(false)
+
+  const showPaymentNudge = createMemo(() => {
+    if (paymentBannerDismissed()) return false
+    const r = relay()
+    if (!r) return false
+    const plan = plans().find(p => p.id === r.plan)
+    if (!plan || plan.amount === 0) return false
+    const t = tenant()
+    if (!t) return false
+    return !t.nwc_url && !t.stripe_subscription_id
+  })
+
   return (
     <PageContainer>
       <BackLink href="/relays" label="Relays" />
@@ -30,6 +46,35 @@ 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 generated at the end of the billing period, so you cannot pay in advance. You can set up NWC or Stripe now to be ready when an invoice is issued.
+                  </p>
+                </div>
+                <div class="flex items-center gap-3 shrink-0">
+                  <button
+                    type="button"
+                    onClick={() => setPaymentSetupOpen(true)}
+                    class="text-sm font-medium text-amber-800 underline hover:text-amber-900 whitespace-nowrap"
+                  >
+                    Set up NWC or Stripe
+                  </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}
@@ -46,8 +91,12 @@ export default function RelayDetail() {
         )}
       </Show>
       <PaymentSetup
-        open={needsPaymentSetup()}
-        onClose={clearNeedsPaymentSetup}
+        open={needsPaymentSetup() || paymentSetupOpen()}
+        onClose={() => {
+          clearNeedsPaymentSetup()
+          setPaymentSetupOpen(false)
+          void refetchTenant()
+        }}
       />
     </PageContainer>
   )