From 0775f867e861f903f6f3d850ce4412df0157ef3e Mon Sep 17 00:00:00 2001 From: userAdityaa Date: Thu, 7 May 2026 19:34:13 +0545 Subject: [PATCH] feat: open payment modal immediately on relay plan upgrade --- frontend/src/lib/useRelayToggles.ts | 13 +++++++---- frontend/src/pages/relays/RelayDetail.tsx | 11 +++++++-- frontend/src/pages/relays/RelayNew.tsx | 28 ++++++++++++++++++----- 3 files changed, 40 insertions(+), 12 deletions(-) diff --git a/frontend/src/lib/useRelayToggles.ts b/frontend/src/lib/useRelayToggles.ts index fa20b8e..3d4d27f 100644 --- a/frontend/src/lib/useRelayToggles.ts +++ b/frontend/src/lib/useRelayToggles.ts @@ -1,5 +1,5 @@ import { createSignal } from "solid-js" -import { updateRelayById, deactivateRelayById, reactivateRelayById, getLatestOpenInvoice, type Relay } from "@/lib/hooks" +import { updateRelayById, deactivateRelayById, reactivateRelayById, getLatestOpenInvoice, tenantNeedsPaymentSetup, type Relay } from "@/lib/hooks" import { setToastMessage } from "@/components/Toast" import type { Invoice, PlanId } from "@/lib/api" @@ -31,6 +31,7 @@ export default function useRelayToggles( ) { const [busy, setBusy] = createSignal(false) const [pendingInvoice, setPendingInvoice] = createSignal() + const [pendingPaymentSetup, setPendingPaymentSetup] = createSignal(false) async function updateRelay(next: Relay, previous: Relay) { mutate(next) @@ -101,8 +102,12 @@ export default function useRelayToggles( } if (plan !== "free") { - const invoice = await getLatestOpenInvoice() - if (invoice) setPendingInvoice(invoice) + const needsSetup = await tenantNeedsPaymentSetup() + if (needsSetup) { + const invoice = await getLatestOpenInvoice() + if (invoice) setPendingInvoice(invoice) + setPendingPaymentSetup(true) + } } } @@ -116,5 +121,5 @@ export default function useRelayToggles( onToggleLivekitSupport: () => toggle("livekit_enabled", relay()?.plan !== "free"), } - return { busy, handleDeactivate, handleReactivate, handleUpdatePlan, pendingInvoice, clearPendingInvoice: () => setPendingInvoice(undefined), toggles } + return { busy, handleDeactivate, handleReactivate, handleUpdatePlan, pendingInvoice, clearPendingInvoice: () => setPendingInvoice(undefined), pendingPaymentSetup, clearPendingPaymentSetup: () => setPendingPaymentSetup(false), toggles } } diff --git a/frontend/src/pages/relays/RelayDetail.tsx b/frontend/src/pages/relays/RelayDetail.tsx index e63855d..c8bba1b 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, createSignal, Show } from "solid-js" +import { createEffect, createMemo, createResource, createSignal, Show } from "solid-js" import BackLink from "@/components/BackLink" import PageContainer from "@/components/PageContainer" import PaymentDialog from "@/components/PaymentDialog" @@ -28,13 +28,20 @@ export default function RelayDetail() { }) const loading = useMinLoading(() => relay.loading && !relay()) const [activity] = useRelayActivity(relayId) - const { busy, handleDeactivate, handleReactivate, handleUpdatePlan, pendingInvoice, clearPendingInvoice, toggles } = useRelayToggles(relayId, relay, { refetch, mutate }) + 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()) { + setPaymentSetupOpen(true) + clearPendingPaymentSetup() + } + }) + const isPaidRelay = createMemo(() => { const r = relay() if (!r) return false diff --git a/frontend/src/pages/relays/RelayNew.tsx b/frontend/src/pages/relays/RelayNew.tsx index aa48944..bb1b6be 100644 --- a/frontend/src/pages/relays/RelayNew.tsx +++ b/frontend/src/pages/relays/RelayNew.tsx @@ -3,13 +3,15 @@ import { useNavigate } from "@solidjs/router" import BackLink from "@/components/BackLink" import PageContainer from "@/components/PageContainer" import PaymentDialog from "@/components/PaymentDialog" +import PaymentSetup from "@/components/PaymentSetup" import RelayForm, { type RelayFormValues } from "@/components/RelayForm" -import { createRelayForActiveTenant, getLatestOpenInvoice } from "@/lib/hooks" +import { createRelayForActiveTenant, getLatestOpenInvoice, tenantNeedsPaymentSetup } from "@/lib/hooks" import type { Invoice } from "@/lib/api" export default function RelayNew() { const navigate = useNavigate() const [pendingInvoice, setPendingInvoice] = createSignal() + const [paymentSetupOpen, setPaymentSetupOpen] = createSignal(false) let createdRelayId = "" async function handleSubmit(values: RelayFormValues) { @@ -17,9 +19,14 @@ export default function RelayNew() { createdRelayId = relay.id if (values.plan !== "free") { - const invoice = await getLatestOpenInvoice() - if (invoice) { - setPendingInvoice(invoice) + const needsSetup = await tenantNeedsPaymentSetup() + if (needsSetup) { + const invoice = await getLatestOpenInvoice() + if (invoice) { + setPendingInvoice(invoice) + return + } + setPaymentSetupOpen(true) return } } @@ -27,8 +34,13 @@ export default function RelayNew() { navigate(`/relays/${relay.id}`) } - function handleDialogClose() { + function handleInvoiceClose() { setPendingInvoice(undefined) + setPaymentSetupOpen(true) + } + + function handleSetupClose() { + setPaymentSetupOpen(false) navigate(`/relays/${createdRelayId}`) } @@ -47,10 +59,14 @@ export default function RelayNew() { )} + ) } -- 2.52.0