Compare commits

..

1 Commits

Author SHA1 Message Date
userAdityaa 5070368a72 docs: document delinquent relay status across spec 2026-04-20 18:14:08 +00:00
2 changed files with 6 additions and 55 deletions
+2 -2
View File
@@ -64,7 +64,7 @@ export default function PaymentSetup(props: PaymentSetupProps) {
<div class="flex items-start justify-between gap-3"> <div class="flex items-start justify-between gap-3">
<div> <div>
<h2 class="text-lg font-semibold text-gray-900">Set Up Payments</h2> <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 once invoices are issued for your relay.</p> <p class="text-sm text-gray-500 mt-1">Choose how you'd like to pay for your relay.</p>
</div> </div>
<button <button
type="button" type="button"
@@ -144,7 +144,7 @@ export default function PaymentSetup(props: PaymentSetupProps) {
<line x1="1" y1="10" x2="23" y2="10" /> <line x1="1" y1="10" x2="23" y2="10" />
</svg> </svg>
</div> </div>
<p class="text-sm text-gray-600">Add a payment card via Stripe to enable automatic billing once invoices are issued.</p> <p class="text-sm text-gray-600">Add a payment card via Stripe to enable automatic billing.</p>
<button <button
type="button" type="button"
onClick={openPortal} onClick={openPortal}
+4 -53
View File
@@ -1,5 +1,5 @@
import { useParams } from "@solidjs/router" import { useParams } from "@solidjs/router"
import { createMemo, createResource, createSignal, Show } from "solid-js" import { createMemo, createResource, Show } from "solid-js"
import BackLink from "@/components/BackLink" import BackLink from "@/components/BackLink"
import PageContainer from "@/components/PageContainer" import PageContainer from "@/components/PageContainer"
import PaymentSetup from "@/components/PaymentSetup" import PaymentSetup from "@/components/PaymentSetup"
@@ -7,9 +7,8 @@ import RelayDetailCard from "@/components/RelayDetailCard"
import ResourceState from "@/components/ResourceState" import ResourceState from "@/components/ResourceState"
import useMinLoading from "@/components/useMinLoading" import useMinLoading from "@/components/useMinLoading"
import ActivityFeed from "@/components/ActivityFeed" import ActivityFeed from "@/components/ActivityFeed"
import { getRelayMembers, useRelay, useRelayActivity, useTenant } from "@/lib/hooks" import { getRelayMembers, useRelay, useRelayActivity } from "@/lib/hooks"
import useRelayToggles from "@/lib/useRelayToggles" import useRelayToggles from "@/lib/useRelayToggles"
import { plans } from "@/lib/state"
export default function RelayDetail() { export default function RelayDetail() {
const params = useParams() const params = useParams()
@@ -24,21 +23,6 @@ export default function RelayDetail() {
const [activity] = useRelayActivity(relayId) const [activity] = useRelayActivity(relayId)
const { busy, handleDeactivate, handleReactivate, handleUpdatePlan, needsPaymentSetup, clearNeedsPaymentSetup, toggles } = useRelayToggles(relayId, relay, { refetch, mutate }) 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 ( return (
<PageContainer> <PageContainer>
<BackLink href="/relays" label="Relays" /> <BackLink href="/relays" label="Relays" />
@@ -46,35 +30,6 @@ export default function RelayDetail() {
<Show when={!loading() && relay()}> <Show when={!loading() && relay()}>
{(r) => ( {(r) => (
<div class="space-y-6 mb-6"> <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 <RelayDetailCard
relay={r()} relay={r()}
currentMembers={members.length} currentMembers={members.length}
@@ -91,12 +46,8 @@ export default function RelayDetail() {
)} )}
</Show> </Show>
<PaymentSetup <PaymentSetup
open={needsPaymentSetup() || paymentSetupOpen()} open={needsPaymentSetup()}
onClose={() => { onClose={clearNeedsPaymentSetup}
clearNeedsPaymentSetup()
setPaymentSetupOpen(false)
void refetchTenant()
}}
/> />
</PageContainer> </PageContainer>
) )