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/components/ActivityFeed.tsx
+8 -13
View File
@@ -2,19 +2,14 @@ import { For, Show } from "solid-js"
import type { Activity } from "@/lib/hooks"
const ACTIVITY_LABELS: Record<string, string> = {
create_relay: "Relay created",
update_relay: "Relay updated",
deactivate_relay: "Relay deactivated",
fail_relay_sync: "Relay sync failed",
create_tenant: "Account created",
update_tenant_billing_anchor: "Billing anchor updated",
update_tenant_nwc_url: "Wallet connection updated",
create_invoice: "Invoice created",
mark_invoice_paid: "Invoice paid",
mark_invoice_attempted: "Invoice payment attempted",
mark_invoice_sent: "Invoice sent",
mark_invoice_closed: "Invoice closed",
mark_relay_synced: "Relay synchronized",
create_relay: "Relay created",
update_relay: "Relay updated",
deactivate_relay: "Relay deactivated",
activate_relay: "Relay activated",
fail_relay_sync: "Relay sync failed",
complete_relay_sync: "Relay sync completed",
create_tenant: "Account created",
update_tenant: "Account updated",
}
function formatDate(ts: number) {
frontend/src/components/AppShell.tsx
+48 -1
View File
@@ -1,10 +1,12 @@
import { A, useLocation } from "@solidjs/router"
import { createEffect, createMemo, createSignal, For, onCleanup, Show } from "solid-js"
import Fuse from "fuse.js"
import { primeProfiles, useProfilePicture, useTenantRelays, type Relay } from "@/lib/hooks"
import { primeProfiles, useProfilePicture, useTenant, useTenantRelays, type Relay } from "@/lib/hooks"
import { listTenantInvoices, type Invoice } from "@/lib/api"
import { account, eventStore, identity } from "@/lib/state"
import serverIcon from "@/assets/server.svg"
import Modal from "@/components/Modal"
import PaymentDialog from "@/components/PaymentDialog"
type Profile = {
name?: string
@@ -33,10 +35,28 @@ function RelayIcon() {
export default function AppShell(props: { children?: any }) {
const location = useLocation()
const picture = useProfilePicture(() => account()?.pubkey)
const [tenant] = useTenant()
const [tenantRelays] = useTenantRelays()
const [profile, setProfile] = createSignal<Profile>({})
const [searchOpen, setSearchOpen] = createSignal(false)
const [searchQuery, setSearchQuery] = createSignal("")
const [pastDueInvoice, setPastDueInvoice] = createSignal<Invoice | undefined>()
const [showPaymentDialog, setShowPaymentDialog] = createSignal(false)
createEffect(async () => {
const t = tenant()
if (!t?.past_due_at) {
setPastDueInvoice(undefined)
return
}
try {
const invoices = await listTenantInvoices(t.pubkey)
const openInvoice = invoices.find(inv => inv.status === "open")
setPastDueInvoice(openInvoice)
} catch {
// ignore
}
})
const username = createMemo(() => profile().name || profile().display_name || shortenPubkey(account()?.pubkey))
const nip05 = createMemo(() => profile().nip05 || "No NIP-05")
@@ -138,9 +158,36 @@ export default function AppShell(props: { children?: any }) {
</aside>
<div class="md:pl-[260px] min-h-screen pb-20 md:pb-0">
<Show when={tenant()?.past_due_at}>
<div class="bg-red-600 text-white px-4 py-3 text-sm flex items-center justify-between">
<span>Your account has an overdue balance.</span>
<Show when={pastDueInvoice()}>
<button
type="button"
onClick={() => setShowPaymentDialog(true)}
class="font-medium underline hover:no-underline"
>
Pay now
</button>
</Show>
</div>
</Show>
<main>{props.children}</main>
</div>
<Show when={pastDueInvoice() && showPaymentDialog()}>
{(_) => {
const invoice = pastDueInvoice()!
return (
<PaymentDialog
invoice={invoice}
open={true}
onClose={() => setShowPaymentDialog(false)}
/>
)
}}
</Show>
<nav
class="fixed inset-x-0 bottom-0 z-20 border-t border-gray-200 bg-white md:hidden"
onClick={() => {
frontend/src/components/PaymentDialog.tsx
+64 -79
View File
@@ -1,31 +1,44 @@
import { createEffect, createSignal, Show } from "solid-js"
import QRCode from "qrcode"
import Modal from "@/components/Modal"
import { getInvoice, type Invoice } from "@/lib/api"
import PaymentSetup from "@/components/PaymentSetup"
import { getInvoice, getInvoiceBolt11 } from "@/lib/api"
import { tenantNeedsPaymentSetup } from "@/lib/hooks"
type Tab = "bitcoin" | "card"
type PayStatus = "idle" | "loading" | "success" | "error"
type PaymentInvoice = {
id: string
amount_due: number
}
type PaymentDialogProps = {
invoice: Invoice
invoice: PaymentInvoice
open: boolean
onClose: () => void
}
export default function PaymentDialog(props: PaymentDialogProps) {
const [tab, setTab] = createSignal<Tab>("bitcoin")
const [bolt11, setBolt11] = createSignal("")
const [qrDataUrl, setQrDataUrl] = createSignal("")
const [payStatus, setPayStatus] = createSignal<PayStatus>("idle")
const [payError, setPayError] = createSignal("")
const [showSetup, setShowSetup] = createSignal(false)
const [showPaymentSetup, setShowPaymentSetup] = createSignal(false)
createEffect(async () => {
const bolt11 = props.invoice?.bolt11
if (!bolt11) return
setQrDataUrl(await QRCode.toDataURL(bolt11, { width: 256, margin: 2 }))
if (!props.open || !props.invoice.id) return
try {
const { bolt11: invoice } = await getInvoiceBolt11(props.invoice.id)
setBolt11(invoice)
setQrDataUrl(await QRCode.toDataURL(invoice, { width: 256, margin: 2 }))
} catch {
// bolt11 generation may fail
}
})
function copyBolt11() {
void navigator.clipboard.writeText(props.invoice.bolt11)
void navigator.clipboard.writeText(bolt11())
}
async function checkPayment() {
@@ -35,6 +48,7 @@ export default function PaymentDialog(props: PaymentDialogProps) {
const invoice = await getInvoice(props.invoice.id)
if (invoice.status === "paid") {
setPayStatus("success")
tenantNeedsPaymentSetup().then(needs => setShowSetup(needs)).catch(() => {})
} else {
setPayStatus("error")
setPayError("Payment not yet confirmed. Please try again after sending.")
@@ -48,18 +62,16 @@ export default function PaymentDialog(props: PaymentDialogProps) {
function handleClose() {
setPayStatus("idle")
setPayError("")
setBolt11("")
setQrDataUrl("")
setShowSetup(false)
props.onClose()
}
const totalSats = () => props.invoice.items.reduce((sum, item) => sum + item.sats, 0)
const periodLabel = () => {
const start = new Date(props.invoice.period_start * 1000)
const end = new Date(props.invoice.period_end * 1000)
return `${start.toLocaleDateString()} – ${end.toLocaleDateString()}`
}
const amountLabel = () => `$${(props.invoice.amount_due / 100).toFixed(2)}`
return (
<>
<Modal
open={props.open}
onClose={handleClose}
@@ -71,14 +83,7 @@ export default function PaymentDialog(props: PaymentDialogProps) {
<div class="flex items-start justify-between gap-3">
<div>
<h2 class="text-lg font-semibold text-gray-900">Pay Invoice</h2>
<Show when={totalSats() > 0}>
<p class="text-2xl font-bold text-gray-900 mt-1">
{totalSats().toLocaleString()} <span class="text-base font-normal text-gray-500">sats</span>
</p>
</Show>
<Show when={props.invoice.period_start && props.invoice.period_end}>
<p class="text-xs text-gray-500 mt-0.5">{periodLabel()}</p>
</Show>
<p class="text-2xl font-bold text-gray-900 mt-1">{amountLabel()}</p>
</div>
<button
type="button"
@@ -93,45 +98,24 @@ export default function PaymentDialog(props: PaymentDialogProps) {
</div>
</div>
{/* Pay with label + Tabs */}
<div class="px-6 pt-4">
<p class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-2">Pay with</p>
<div class="flex gap-2 border border-gray-200 rounded-lg p-1">
<button
type="button"
class={`flex-1 rounded-md px-3 py-2 text-sm transition-colors ${tab() === "bitcoin" ? "bg-gray-900 text-white" : "text-gray-700 hover:bg-gray-50"}`}
onClick={() => setTab("bitcoin")}
>
Bitcoin
</button>
<button
type="button"
class={`flex-1 rounded-md px-3 py-2 text-sm transition-colors ${tab() === "card" ? "bg-gray-900 text-white" : "text-gray-700 hover:bg-gray-50"}`}
onClick={() => setTab("card")}
>
Card
</button>
</div>
</div>
{/* Tab content */}
{/* Content */}
<div class="px-6 py-4 min-h-[240px] flex flex-col items-center justify-center">
<Show when={tab() === "bitcoin"}>
<Show
when={payStatus() === "success"}
fallback={
<div class="w-full space-y-3">
<Show
when={qrDataUrl()}
fallback={<div class="flex items-center justify-center py-12 text-sm text-gray-400">Generating invoice...</div>}
>
<img src={qrDataUrl()} alt="Lightning invoice QR code" class="mx-auto rounded-lg" />
</Show>
<Show
when={payStatus() === "success"}
fallback={
<div class="w-full space-y-3">
<Show
when={qrDataUrl()}
fallback={<div class="flex items-center justify-center py-12 text-sm text-gray-400">Generating invoice...</div>}
>
<img src={qrDataUrl()} alt="Lightning invoice QR code" class="mx-auto rounded-lg" />
</Show>
<Show when={bolt11()}>
<div class="flex rounded-lg border border-gray-300">
<input
type="text"
readOnly
value={props.invoice.bolt11}
value={bolt11()}
class="min-w-0 flex-1 rounded-l-lg border-0 px-3 py-2 text-xs text-gray-500 bg-transparent focus:outline-none"
/>
<button
@@ -146,31 +130,27 @@ export default function PaymentDialog(props: PaymentDialogProps) {
</svg>
</button>
</div>
</div>
}
>
<div class="text-center">
<div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
<svg class="w-6 h-6 text-green-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12" />
</svg>
</div>
<p class="text-sm font-medium text-gray-900">Payment confirmed!</p>
<p class="text-xs text-gray-500 mt-1">Thank you. Your relay is now active.</p>
</Show>
</div>
</Show>
</Show>
<Show when={tab() === "card"}>
<div class="text-center">
<div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-gray-100">
<svg class="w-6 h-6 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="1" y="4" width="22" height="16" rx="2" ry="2" />
<line x1="1" y1="10" x2="23" y2="10" />
}
>
<div class="text-center space-y-3">
<div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
<svg class="w-6 h-6 text-green-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12" />
</svg>
</div>
<p class="text-sm font-medium text-gray-700">Coming soon</p>
<p class="text-xs text-gray-500 mt-1">Card payments are not yet available.</p>
<p class="text-sm font-medium text-gray-900">Payment confirmed!</p>
<p class="text-xs text-gray-500">Thank you. Your account is up to date.</p>
<Show when={showSetup()}>
<button
type="button"
onClick={() => setShowPaymentSetup(true)}
class="mt-2 text-sm font-medium text-blue-600 hover:text-blue-700"
>
Set up automatic payments
</button>
</Show>
</div>
</Show>
</div>
@@ -216,5 +196,10 @@ export default function PaymentDialog(props: PaymentDialogProps) {
</Show>
</div>
</Modal>
<PaymentSetup
open={showPaymentSetup()}
onClose={() => setShowPaymentSetup(false)}
/>
</>
)
}
frontend/src/components/PaymentSetup.tsx
+190
View File
@@ -0,0 +1,190 @@
import { createSignal, Show } from "solid-js"
import Modal from "@/components/Modal"
import { updateActiveTenant } from "@/lib/hooks"
import { createPortalSession } from "@/lib/api"
import { account } from "@/lib/state"
type Tab = "nwc" | "card"
type PaymentSetupProps = {
open: boolean
onClose: () => void
}
export default function PaymentSetup(props: PaymentSetupProps) {
const [tab, setTab] = createSignal<Tab>("nwc")
const [nwcUrl, setNwcUrl] = createSignal("")
const [saving, setSaving] = createSignal(false)
const [saved, setSaved] = createSignal(false)
const [error, setError] = createSignal("")
const [redirecting, setRedirecting] = createSignal(false)
async function saveNwc() {
const url = nwcUrl().trim()
if (!url) return
setSaving(true)
setError("")
try {
await updateActiveTenant({ nwc_url: url })
setSaved(true)
} catch (e) {
setError(e instanceof Error ? e.message : "Failed to save wallet connection")
} finally {
setSaving(false)
}
}
async function openPortal() {
setRedirecting(true)
setError("")
try {
const { url } = await createPortalSession(account()!.pubkey)
window.location.href = url
} catch (e) {
setError(e instanceof Error ? e.message : "Failed to open billing portal")
setRedirecting(false)
}
}
function handleClose() {
setNwcUrl("")
setSaved(false)
setError("")
props.onClose()
}
return (
<Modal
open={props.open}
onClose={handleClose}
wrapperClass="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
panelClass="w-full max-w-md rounded-2xl bg-white shadow-xl overflow-hidden"
>
<div class="px-6 pt-6 pb-4 border-b border-gray-100">
<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>
</div>
<button
type="button"
onClick={handleClose}
class="text-gray-400 hover:text-gray-700 rounded p-1 hover:bg-gray-100 flex-shrink-0"
aria-label="Close"
>
<svg class="w-5 h-5" 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>
<div class="px-6 pt-4">
<p class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-2">Pay with</p>
<div class="flex gap-2 border border-gray-200 rounded-lg p-1">
<button
type="button"
class={`flex-1 rounded-md px-3 py-2 text-sm transition-colors ${tab() === "nwc" ? "bg-gray-900 text-white" : "text-gray-700 hover:bg-gray-50"}`}
onClick={() => setTab("nwc")}
>
Lightning (NWC)
</button>
<button
type="button"
class={`flex-1 rounded-md px-3 py-2 text-sm transition-colors ${tab() === "card" ? "bg-gray-900 text-white" : "text-gray-700 hover:bg-gray-50"}`}
onClick={() => setTab("card")}
>
Card
</button>
</div>
</div>
<div class="px-6 py-4 min-h-[180px] flex flex-col justify-center">
<Show when={tab() === "nwc"}>
<Show
when={!saved()}
fallback={
<div class="text-center">
<div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
<svg class="w-6 h-6 text-green-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12" />
</svg>
</div>
<p class="text-sm font-medium text-gray-900">Wallet connected!</p>
<p class="text-xs text-gray-500 mt-1">Automatic payments are now enabled.</p>
</div>
}
>
<div class="space-y-3">
<label class="block text-sm font-medium text-gray-700">Nostr Wallet Connect URL</label>
<input
type="text"
value={nwcUrl()}
onInput={(e) => setNwcUrl(e.currentTarget.value)}
placeholder="nostr+walletconnect://..."
class="w-full border border-gray-300 rounded-lg px-3 py-2"
/>
<button
type="button"
onClick={saveNwc}
disabled={saving() || !nwcUrl().trim()}
class="w-full py-2 px-4 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
>
{saving() ? "Saving..." : "Save"}
</button>
</div>
</Show>
</Show>
<Show when={tab() === "card"}>
<div class="text-center space-y-4">
<div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-gray-100">
<svg class="w-6 h-6 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="1" y="4" width="22" height="16" rx="2" ry="2" />
<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>
<button
type="button"
onClick={openPortal}
disabled={redirecting()}
class="w-full py-2 px-4 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
>
{redirecting() ? "Redirecting..." : "Add a payment card"}
</button>
</div>
</Show>
</div>
<Show when={error()}>
<div class="px-6 pb-2">
<p class="text-xs text-red-600">{error()}</p>
</div>
</Show>
<div class="px-6 py-4 border-t border-gray-100">
<Show when={saved()}>
<div class="flex justify-end">
<button
type="button"
onClick={handleClose}
class="py-2 px-4 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700"
>
Done
</button>
</div>
</Show>
<Show when={!saved()}>
<button
type="button"
onClick={handleClose}
class="py-2 px-4 border border-gray-300 text-gray-700 text-sm rounded-lg hover:bg-gray-50 transition-colors"
>
Set up later
</button>
</Show>
</div>
</Modal>
)
}
frontend/src/components/PricingTable.tsx
+5 -6
View File
@@ -20,10 +20,9 @@ function XIcon() {
)
}
function priceLabel(sats: number) {
if (sats === 0) return "0"
if (sats >= 1000) return `${(sats / 1000).toLocaleString()}K`
return sats.toLocaleString()
function priceLabel(amount: number) {
if (amount === 0) return "Free"
return `$${amount / 100}`
}
function memberLabel(members: number | null) {
@@ -55,8 +54,8 @@ export default function PricingTable(props: PricingTableProps) {
)}
<h3 class="text-lg font-bold text-gray-900 mb-1">{plan.name}</h3>
<div class="mb-8">
<span class="text-4xl font-extrabold text-gray-900">{priceLabel(plan.sats)}</span>
<span class="text-sm text-gray-400 ml-1">sats / mo</span>
<span class="text-4xl font-extrabold text-gray-900">{priceLabel(plan.amount)}</span>
<span class="text-sm text-gray-400 ml-1">/ mo</span>
</div>
<ul class="mb-8 text-sm text-gray-600 space-y-3">
<li class="flex items-start gap-2"><CheckIcon />{memberLabel(plan.members)}</li>
frontend/src/components/RelayDetailCard.tsx
+31 -18
View File
@@ -10,12 +10,8 @@ import { setToastMessage } from "@/components/Toast"
import { plans } from "@/lib/state"
const STATUS_STYLES: Record<string, string> = {
active: "bg-green-50 text-green-700 border-green-200",
new: "bg-blue-50 text-blue-700 border-blue-200",
pending: "bg-yellow-50 text-yellow-700 border-yellow-200",
provisioning_failed: "bg-red-50 text-red-700 border-red-200",
deactivated: "bg-gray-100 text-gray-500 border-gray-200",
suspended: "bg-orange-50 text-orange-700 border-orange-200",
active: "bg-green-50 text-green-700 border-green-200",
inactive: "bg-gray-100 text-gray-500 border-gray-200",
}
function StatusBadge(props: { status: string }) {
@@ -56,7 +52,9 @@ type RelayDetailCardProps = {
showTenant?: boolean
editHref?: string
onDeactivate?: () => void
onReactivate?: () => void
deactivating?: boolean
reactivating?: boolean
onTogglePublicJoin?: () => void
onToggleStripSignatures?: () => void
onToggleGroups?: () => void
@@ -149,7 +147,7 @@ export default function RelayDetailCard(props: RelayDetailCardProps) {
</div>
</div>
<Show when={props.editHref && props.onDeactivate}>
<Show when={props.editHref && (props.onDeactivate || props.onReactivate)}>
<div class="relative flex-shrink-0" ref={menuContainerRef}>
<button
type="button"
@@ -174,17 +172,32 @@ export default function RelayDetailCard(props: RelayDetailCardProps) {
>
Edit Details
</A>
<button
type="button"
class="block w-full text-left px-3 py-2 text-sm text-red-600 hover:bg-red-50 disabled:opacity-50"
onClick={() => {
setMenuOpen(false)
props.onDeactivate?.()
}}
disabled={props.deactivating}
>
{props.deactivating ? "Deactivating..." : "Deactivate"}
</button>
<Show when={r().status === "active" && props.onDeactivate}>
<button
type="button"
class="block w-full text-left px-3 py-2 text-sm text-red-600 hover:bg-red-50 disabled:opacity-50"
onClick={() => {
setMenuOpen(false)
props.onDeactivate?.()
}}
disabled={props.deactivating}
>
{props.deactivating ? "Deactivating..." : "Deactivate"}
</button>
</Show>
<Show when={r().status === "inactive" && props.onReactivate}>
<button
type="button"
class="block w-full text-left px-3 py-2 text-sm text-blue-600 hover:bg-blue-50 disabled:opacity-50"
onClick={() => {
setMenuOpen(false)
props.onReactivate?.()
}}
disabled={props.reactivating}
>
{props.reactivating ? "Reactivating..." : "Reactivate"}
</button>
</Show>
</div>
</div>
</Show>
frontend/src/components/RelayForm.tsx
+1 -1
View File
@@ -110,7 +110,7 @@ export default function RelayForm(props: RelayFormProps) {
>
<div class="font-bold text-gray-900">{p.name}</div>
<div class="text-sm text-gray-500 mt-1">
{p.sats === 0 ? "Free" : `${p.sats.toLocaleString()} sats/mo`}
{p.amount === 0 ? "Free" : `$${p.amount / 100}/mo`}
</div>
<div class="text-xs text-gray-500 mt-2">
{p.members === null ? "Unlimited members" : `Up to ${p.members} members`}
frontend/src/lib/api.ts
+28 -31
View File
@@ -11,8 +11,8 @@ type ApiOk<T> = {
code: string
}
type BillingInput = {
nwc_url: string
type UpdateTenantInput = {
nwc_url?: string
}
type AuthCache = {
@@ -34,7 +34,8 @@ export class ApiError extends Error {
export type Plan = {
id: string
name: string
sats: number
amount: number
stripe_price_id: string | null
members: number | null
blossom: boolean
livekit: boolean
@@ -50,6 +51,8 @@ export type Relay = {
plan: PlanId
status: string
sync_error: string
stripe_subscription_item_id: string | null
synced: number
info_name: string
info_icon: string
info_description: string
@@ -97,28 +100,18 @@ export type Tenant = {
pubkey: string
nwc_url: string
created_at: number
billing_anchor: number
}
export type InvoiceItem = {
id: string
invoice: string
relay: string
sats: number
stripe_customer_id: string
stripe_subscription_id: string | null
past_due_at: number | null
nwc_error: string | null
}
export type Invoice = {
id: string
tenant: string
status: string
items: InvoiceItem[]
created_at: number
attempted_at: number
error: string
closed_at: number
sent_at: number
paid_at: number
bolt11: string
amount_due: number
currency: string
hosted_invoice_url: string
period_start: number
period_end: number
}
@@ -222,10 +215,6 @@ export function getTenant(pubkey: string) {
return callApi<undefined, Tenant>("GET", `/tenants/${pubkey}`)
}
export function createTenant() {
return callApi<undefined, Tenant>("POST", "/tenants")
}
export function listTenantRelays(pubkey: string) {
return callApi<undefined, Relay[]>("GET", `/tenants/${pubkey}/relays`)
}
@@ -234,8 +223,8 @@ export function listTenantInvoices(pubkey: string) {
return callApi<undefined, Invoice[]>("GET", `/tenants/${pubkey}/invoices`)
}
export function updateTenantBilling(pubkey: string, billing: BillingInput) {
return callApi<BillingInput, BillingInput>("PUT", `/tenants/${pubkey}/billing`, billing)
export function updateTenant(pubkey: string, input: UpdateTenantInput) {
return callApi<UpdateTenantInput, Tenant>("PUT", `/tenants/${pubkey}`, input)
}
export function listRelays() {
@@ -247,7 +236,19 @@ export function getRelay(id: string) {
}
export function listRelayActivity(id: string) {
return callApi<undefined, Activity[]>("GET", `/relays/${id}/activity`)
return callApi<undefined, { activity: Activity[] }>("GET", `/relays/${id}/activity`)
}
export function reactivateRelay(id: string) {
return callApi<undefined, void>("POST", `/relays/${id}/reactivate`)
}
export function createPortalSession(pubkey: string) {
return callApi<undefined, { url: string }>("GET", `/tenants/${pubkey}/stripe/session`)
}
export function getInvoiceBolt11(invoiceId: string) {
return callApi<undefined, { bolt11: string }>("GET", `/invoices/${invoiceId}/bolt11`)
}
export function createRelay(input: CreateRelayInput) {
@@ -262,10 +263,6 @@ export function deactivateRelay(id: string) {
return callApi<undefined, void>("POST", `/relays/${id}/deactivate`)
}
export function listInvoices() {
return callApi<undefined, Invoice[]>("GET", "/invoices")
}
export function getInvoice(id: string) {
return callApi<undefined, Invoice>("GET", `/invoices/${id}`)
}
frontend/src/lib/hooks.ts
+13 -11
View File
@@ -7,18 +7,17 @@ import { map, of } from "rxjs"
import {
createRelay,
deactivateRelay,
reactivateRelay,
getRelay,
getTenant,
listRelayActivity,
listRelays,
listTenantInvoices,
listTenantRelays,
listTenants,
updateRelay,
updateTenantBilling,
updateTenant,
type Activity,
type CreateRelayInput,
type Invoice,
type Relay,
type Tenant,
type UpdateRelayInput,
@@ -87,11 +86,12 @@ export const useTenant = () => createResource(() => getTenant(account()!.pubkey)
export const useTenantRelays = () => createResource(() => listTenantRelays(account()!.pubkey))
export const useTenantInvoices = () => createResource(() => listTenantInvoices(account()!.pubkey))
export const useRelay = (relayId: () => string) => createResource(relayId, getRelay)
export const useRelayActivity = (relayId: () => string) => createResource(relayId, listRelayActivity)
export const useRelayActivity = (relayId: () => string) => createResource(relayId, async (id) => {
const result = await listRelayActivity(id)
return result.activity
})
export const useAdminTenants = () => createResource(listTenants)
@@ -122,7 +122,7 @@ export const createRelayForActiveTenant = (input: CreateRelayInput) => {
return createRelay({...defaults, ...input, ...overrides})
}
export const updateActiveTenantBilling = (nwc_url: string) => updateTenantBilling(account()!.pubkey, { nwc_url })
export const updateActiveTenant = (input: { nwc_url?: string }) => updateTenant(account()!.pubkey, input)
export const updateRelayById = (id: string, input: UpdateRelayInput) => updateRelay(id, input)
@@ -130,9 +130,11 @@ export const updateRelayPlanById = (id: string, plan: string) => updateRelay(id,
export const deactivateRelayById = (id: string) => deactivateRelay(id)
export async function checkPendingInvoice(): Promise<Invoice | undefined> {
const invoices = await listTenantInvoices(account()!.pubkey)
return invoices.find(inv => inv.status === "pending")
export const reactivateRelayById = (id: string) => reactivateRelay(id)
export async function tenantNeedsPaymentSetup(): Promise<boolean> {
const tenant = await getTenant(account()!.pubkey)
return !tenant.nwc_url && !tenant.stripe_subscription_id
}
export async function getRelayMembers(url: string) {
@@ -145,4 +147,4 @@ export async function getRelayMembers(url: string) {
}
}
export type { Activity, Invoice, Relay, Tenant }
export type { Activity, Relay, Tenant }
frontend/src/lib/useRelayToggles.ts
+18 -5
View File
@@ -1,5 +1,5 @@
import { createSignal } from "solid-js"
import { updateRelayById, deactivateRelayById, checkPendingInvoice, type Invoice, type Relay } from "@/lib/hooks"
import { updateRelayById, deactivateRelayById, reactivateRelayById, tenantNeedsPaymentSetup, type Relay } from "@/lib/hooks"
import { setToastMessage } from "@/components/Toast"
import type { PlanId } from "@/lib/api"
@@ -30,7 +30,7 @@ export default function useRelayToggles(
{ refetch, mutate }: RelayActions,
) {
const [busy, setBusy] = createSignal(false)
const [pendingInvoice, setPendingInvoice] = createSignal<Invoice | undefined>()
const [needsPaymentSetup, setNeedsPaymentSetup] = createSignal(false)
async function updateRelay(next: Relay, previous: Relay) {
mutate(next)
@@ -63,6 +63,19 @@ export default function useRelayToggles(
}
}
async function handleReactivate() {
if (busy()) return
setBusy(true)
try {
await reactivateRelayById(relayId())
await refetch()
} catch (e) {
setToastMessage(e instanceof Error ? e.message : "Failed to reactivate relay")
} finally {
setBusy(false)
}
}
async function handleUpdatePlan(plan: PlanId) {
const current = relay()
if (!current) return
@@ -88,8 +101,8 @@ export default function useRelayToggles(
}
if (plan !== "free") {
const invoice = await checkPendingInvoice()
if (invoice) setPendingInvoice(invoice)
const needs = await tenantNeedsPaymentSetup()
if (needs) setNeedsPaymentSetup(true)
}
}
@@ -103,5 +116,5 @@ export default function useRelayToggles(
onToggleLivekitSupport: () => toggle("livekit_enabled", relay()?.plan !== "free"),
}
return { busy, handleDeactivate, handleUpdatePlan, pendingInvoice, clearPendingInvoice: () => setPendingInvoice(undefined), toggles }
return { busy, handleDeactivate, handleReactivate, handleUpdatePlan, needsPaymentSetup, clearNeedsPaymentSetup: () => setNeedsPaymentSetup(false), toggles }
}
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>
)
}