diff --git a/frontend/src/pages/relays/RelayDetail.tsx b/frontend/src/pages/relays/RelayDetail.tsx index 24ee55f..b8a9968 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 ( @@ -30,6 +46,35 @@ export default function RelayDetail() { {(r) => (
+ +
+
+

Payment method recommended

+

+ This relay is on a paid plan. Invoices are due at end of the billing period, you can pay manually or set up automatic payments now. +

+
+
+ + +
+
+
{ + clearNeedsPaymentSetup() + setPaymentSetupOpen(false) + void refetchTenant() + }} /> )