userAdityaa/caravel
1
1
Fork 0
forked from coracle/caravel
Code Pull Requests Activity

Rework billing

Browse Source
This commit is contained in:
Jon Staab
2026-04-07 14:40:48 -07:00
parent 65dfcaeb6c
commit 0980523a50
33 changed files with 1589 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Account.tsx
+44 -19
View File
@@ -1,17 +1,20 @@
import { createEffect, createMemo, createSignal, For, Show } from "solid-js"
import { createEffect, createMemo, createResource, createSignal, For, Show } from "solid-js"
import PageContainer from "@/components/PageContainer"
import LoadingState from "@/components/LoadingState"
import PaymentDialog from "@/components/PaymentDialog"
import useMinLoading from "@/components/useMinLoading"
import { updateActiveTenantBilling, useTenant, useTenantInvoices, type Invoice } from "@/lib/hooks"
import { updateActiveTenant, useTenant } from "@/lib/hooks"
import { createPortalSession, listTenantInvoices, type Invoice } from "@/lib/api"
import { account } from "@/lib/state"
export default function Account() {
const [tenant, { refetch: refetchTenant }] = useTenant()
const [invoices, { refetch: refetchInvoices }] = useTenantInvoices()
const [invoices, { refetch: refetchInvoices }] = createResource(() => listTenantInvoices(account()!.pubkey))
const [nwcUrl, setNwcUrl] = createSignal("")
const [saving, setSaving] = createSignal(false)
const [error, setError] = createSignal("")
const [selectedInvoice, setSelectedInvoice] = createSignal<Invoice | undefined>()
const [portalLoading, setPortalLoading] = createSignal(false)
const invoicesLoading = useMinLoading(() => invoices.loading)
const hasBillingChanges = createMemo(() => {
@@ -29,7 +32,7 @@ export default function Account() {
setSaving(true)
try {
const next = nwcUrl().trim()
await updateActiveTenantBilling(next)
await updateActiveTenant({ nwc_url: next })
await refetchTenant()
} catch (e) {
setError(e instanceof Error ? e.message : "Failed to update billing")
@@ -43,15 +46,29 @@ export default function Account() {
void refetchInvoices()
}
async function openPortal() {
setPortalLoading(true)
try {
const { url } = await createPortalSession(account()!.pubkey)
window.location.href = url
} catch (e) {
setError(e instanceof Error ? e.message : "Failed to open billing portal")
} finally {
setPortalLoading(false)
}
}
function logout() {
localStorage.clear()
window.location.href = "/"
}
const invoiceStatusStyles: Record<string, string> = {
pending: "bg-yellow-50 text-yellow-700 border-yellow-200",
draft: "bg-gray-100 text-gray-500 border-gray-200",
open: "bg-yellow-50 text-yellow-700 border-yellow-200",
paid: "bg-green-50 text-green-700 border-green-200",
closed: "bg-gray-100 text-gray-500 border-gray-200",
void: "bg-gray-100 text-gray-500 border-gray-200",
uncollectible: "bg-red-50 text-red-700 border-red-200",
}
return (
@@ -80,7 +97,17 @@ export default function Account() {
</section>
<section class="bg-white border border-gray-200 rounded-xl p-6">
<h2 class="text-lg font-semibold text-gray-900 mb-4">Recurring Billing</h2>
<div class="flex items-center justify-between gap-3 mb-4">
<h2 class="text-lg font-semibold text-gray-900">Recurring Billing</h2>
<button
type="button"
onClick={openPortal}
disabled={portalLoading()}
class="text-sm font-medium text-blue-600 hover:text-blue-700 disabled:opacity-50"
>
{portalLoading() ? "Loading..." : "Manage Billing"}
</button>
</div>
<p class="text-sm text-gray-600 mb-4">
Enable automatic payments by providing your Nostr Wallet Connect URL.
</p>
@@ -101,6 +128,9 @@ export default function Account() {
{saving() ? "Saving..." : "Save"}
</button>
</div>
<Show when={tenant()?.nwc_error}>
<p class="mt-3 text-sm text-red-600">{tenant()!.nwc_error}</p>
</Show>
<Show when={error()}>
<p class="mt-3 text-sm text-red-600">{error()}</p>
</Show>
@@ -116,7 +146,7 @@ export default function Account() {
<ul class="space-y-3">
<For each={invoices()}>
{(invoice) => {
const isPending = () => invoice.status === "pending"
const isOpen = () => invoice.status === "open"
const statusStyle = () => invoiceStatusStyles[invoice.status] ?? "bg-gray-100 text-gray-500 border-gray-200"
const periodLabel = () => {
const start = new Date(invoice.period_start * 1000)
@@ -126,33 +156,28 @@ export default function Account() {
return (
<li
class={`rounded-lg border border-gray-200 p-4 text-sm ${isPending() ? "cursor-pointer hover:border-blue-300 hover:bg-blue-50 transition-colors" : ""}`}
onClick={() => isPending() && setSelectedInvoice(invoice)}
title={isPending() ? "Click to pay this invoice" : undefined}
class={`rounded-lg border border-gray-200 p-4 text-sm ${isOpen() ? "cursor-pointer hover:border-blue-300 hover:bg-blue-50 transition-colors" : ""}`}
onClick={() => isOpen() && setSelectedInvoice(invoice)}
title={isOpen() ? "Click to pay this invoice" : undefined}
>
<div class="flex items-center justify-between gap-3">
<div>
<span class="font-medium text-gray-900">
{invoice.items.length > 0
? `${invoice.items.reduce((sum, item) => sum + item.sats, 0).toLocaleString()} sats`
: "—"}
${(invoice.amount_due / 100).toFixed(2)}
</span>
<Show when={invoice.period_start && invoice.period_end}>
<p class="text-xs text-gray-500 mt-0.5">{periodLabel()}</p>
</Show>
</div>
<div class="flex items-center gap-2 flex-shrink-0">
<Show when={isPending()}>
<span class="text-xs text-blue-600 font-medium">Pay now →</span>
<Show when={isOpen()}>
<span class="text-xs text-blue-600 font-medium">Pay now</span>
</Show>
<span class={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium capitalize ${statusStyle()}`}>
{invoice.status}
</span>
</div>
</div>
<Show when={invoice.error}>
<p class="text-xs text-red-500 mt-2">{invoice.error}</p>
</Show>
</li>
)
}}
frontend/src/pages/Home.tsx
+4 -4
View File
@@ -187,8 +187,8 @@ export default function Home() {
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
</svg>
),
title: "Pay with sats",
body: "Lightning-native billing. No credit cards, no bank accounts — just sats, straight from your wallet.",
title: "Flexible payments",
body: "Pay with Bitcoin/Lightning or with a card.",
},
].map(({ icon, title, body }) => (
<div class="bg-white rounded-2xl border border-gray-200 p-6 hover:border-blue-200 hover:shadow-sm transition-all">
@@ -301,7 +301,7 @@ export default function Home() {
<div class="max-w-5xl mx-auto px-6 py-20">
<h2 class="text-3xl font-bold text-center text-gray-900 mb-4">Simple pricing</h2>
<p class="text-center text-gray-500 mb-14 max-w-lg mx-auto">
Pay in sats. Upgrade or cancel any time.
Upgrade or cancel any time.
</p>
<PricingTable onCta={openRelayModal} />
@@ -314,7 +314,7 @@ export default function Home() {
<div class="relative max-w-5xl mx-auto px-6 py-28 text-center">
<h2 class="text-4xl font-extrabold text-gray-900 mb-4">Ready to launch your relay?</h2>
<p class="text-gray-500 mb-10 max-w-lg mx-auto text-lg">
Join communities already running on Caravel. Set up in minutes, pay in sats.
Join communities already running on Caravel. Set up in minutes.
</p>
<button
type="button"
frontend/src/pages/admin/AdminRelayDetail.tsx
+3 -1
View File
@@ -15,7 +15,7 @@ export default function AdminRelayDetail() {
const [relay, { refetch, mutate }] = useRelay(relayId)
const loading = useMinLoading(() => relay.loading && !relay())
const [activity] = useRelayActivity(relayId)
const { busy, handleDeactivate, toggles } = useRelayToggles(relayId, relay, { refetch, mutate })
const { busy, handleDeactivate, handleReactivate, toggles } = useRelayToggles(relayId, relay, { refetch, mutate })
return (
<PageContainer>
@@ -29,7 +29,9 @@ export default function AdminRelayDetail() {
showTenant
editHref={`/admin/relays/${params.id}/edit`}
onDeactivate={handleDeactivate}
onReactivate={handleReactivate}
deactivating={busy()}
reactivating={busy()}
enforcePlanLimits={false}
showPlanActions={false}
{...toggles}
frontend/src/pages/admin/AdminTenantDetail.tsx
+32 -1
View File
@@ -14,6 +14,12 @@ export default function AdminTenantDetail() {
const [relays] = useAdminTenantRelays(tenantId)
const loading = useMinLoading(() => tenant.loading || relays.loading)
const pastDueLabel = () => {
const ts = tenant()?.past_due_at
if (!ts) return null
return new Date(ts * 1000).toLocaleString()
}
return (
<PageContainer>
<BackLink href="/admin/tenants" label="Tenants" />
@@ -24,7 +30,32 @@ export default function AdminTenantDetail() {
<section class="bg-white border border-gray-200 rounded-xl p-6">
<h2 class="text-lg font-semibold mb-4">Status</h2>
<Show when={tenant()}>
<p class="text-sm text-gray-700">Current: <span class="font-medium uppercase tracking-wide">tenant</span></p>
{(t) => (
<dl class="grid gap-y-3 text-sm">
<div class="flex gap-2">
<dt class="text-gray-500">Status:</dt>
<dd class="font-medium uppercase tracking-wide">{t().past_due_at ? "past due" : "active"}</dd>
</div>
<Show when={t().stripe_customer_id}>
<div class="flex gap-2">
<dt class="text-gray-500">Stripe Customer:</dt>
<dd class="font-mono text-xs">{t().stripe_customer_id}</dd>
</div>
</Show>
<Show when={pastDueLabel()}>
<div class="flex gap-2">
<dt class="text-gray-500">Past Due Since:</dt>
<dd class="text-red-600 font-medium">{pastDueLabel()}</dd>
</div>
</Show>
<Show when={t().nwc_error}>
<div class="flex gap-2">
<dt class="text-gray-500">NWC Error:</dt>
<dd class="text-red-600">{t().nwc_error}</dd>
</div>
</Show>
</dl>
)}
</Show>
</section>
<section class="bg-white border border-gray-200 rounded-xl p-6">
frontend/src/pages/relays/RelayDetail.tsx
+8 -11
View File
@@ -2,7 +2,7 @@ import { useParams } from "@solidjs/router"
import { createMemo, createResource, 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"
@@ -21,7 +21,7 @@ export default function RelayDetail() {
const [members] = createResource(relayUrl, getRelayMembers)
const loading = useMinLoading(() => relay.loading && !relay())
const [activity] = useRelayActivity(relayId)
const { busy, handleDeactivate, handleUpdatePlan, pendingInvoice, clearPendingInvoice, toggles } = useRelayToggles(relayId, relay, { refetch, mutate })
const { busy, handleDeactivate, handleReactivate, handleUpdatePlan, needsPaymentSetup, clearNeedsPaymentSetup, toggles } = useRelayToggles(relayId, relay, { refetch, mutate })
return (
<PageContainer>
@@ -35,7 +35,9 @@ export default function RelayDetail() {
currentMembers={members.length}
editHref={`/relays/${params.id}/edit`}
onDeactivate={handleDeactivate}
onReactivate={handleReactivate}
deactivating={busy()}
reactivating={busy()}
onUpdatePlan={handleUpdatePlan}
{...toggles}
/>
@@ -43,15 +45,10 @@ export default function RelayDetail() {
</div>
)}
</Show>
<Show when={pendingInvoice()}>
{(invoice) => (
<PaymentDialog
invoice={invoice()}
open={true}
onClose={clearPendingInvoice}
/>
)}
</Show>
<PaymentSetup
open={needsPaymentSetup()}
onClose={clearNeedsPaymentSetup}
/>
</PageContainer>
)
}
frontend/src/pages/relays/RelayList.tsx
+1 -4
View File
@@ -34,10 +34,7 @@ export default function RelayList() {
<select value={status()} onChange={e => setStatus(e.currentTarget.value)} class="border border-gray-300 rounded-lg px-3 py-2 bg-white">
<option value="all">All statuses</option>
<option value="active">Active</option>
<option value="pending">Pending</option>
<option value="deactivated">Deactivated</option>
<option value="provisioning_failed">Provisioning failed</option>
<option value="suspended">Suspended</option>
<option value="inactive">Inactive</option>
</select>
</div>
<ResourceState loading={loading()} error={relays.error} loadingText="Loading relays..." errorText="Failed to load relays." />
frontend/src/pages/relays/RelayNew.tsx
+11 -14
View File
@@ -2,13 +2,13 @@ import { createSignal } from "solid-js"
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 { checkPendingInvoice, createRelayForActiveTenant, type Invoice } from "@/lib/hooks"
import { createRelayForActiveTenant, tenantNeedsPaymentSetup } from "@/lib/hooks"
export default function RelayNew() {
const navigate = useNavigate()
const [pendingInvoice, setPendingInvoice] = createSignal<Invoice | undefined>()
const [showPaymentSetup, setShowPaymentSetup] = createSignal(false)
let createdRelayId = ""
async function handleSubmit(values: RelayFormValues) {
@@ -16,9 +16,9 @@ export default function RelayNew() {
createdRelayId = relay.id
if (values.plan !== "free") {
const invoice = await checkPendingInvoice()
if (invoice) {
setPendingInvoice(invoice)
const needs = await tenantNeedsPaymentSetup()
if (needs) {
setShowPaymentSetup(true)
return
}
}
@@ -27,7 +27,7 @@ export default function RelayNew() {
}
function handleDialogClose() {
setPendingInvoice(undefined)
setShowPaymentSetup(false)
navigate(`/relays/${createdRelayId}`)
}
@@ -41,13 +41,10 @@ export default function RelayNew() {
submitLabel="Create Relay"
submittingLabel="Creating..."
/>
{pendingInvoice() && (
<PaymentDialog
invoice={pendingInvoice()!}
open={!!pendingInvoice()}
onClose={handleDialogClose}
/>
)}
<PaymentSetup
open={showPaymentSetup()}
onClose={handleDialogClose}
/>
</PageContainer>
)
}