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`}