Jon Staab
117 lines
4.4 KiB
TypeScript
117 lines
4.4 KiB
TypeScript
import { createMemo, createResource, createSignal, For, Show } from "solid-js"
|
|
import { getTenant, listTenantInvoices, updateTenantBilling } from "../lib/api"
|
|
import PageContainer from "../components/PageContainer"
|
|
import ResourceState from "../components/ResourceState"
|
|
|
|
export default function Account() {
|
|
const [tenant, { refetch: refetchTenant }] = createResource(getTenant)
|
|
const [invoices] = createResource(listTenantInvoices)
|
|
const [nwcUrl, setNwcUrl] = createSignal("")
|
|
const [saving, setSaving] = createSignal(false)
|
|
const [error, setError] = createSignal("")
|
|
|
|
const recurringEnabled = createMemo(() => !!tenant()?.tenant_nwc_url?.trim())
|
|
|
|
async function saveBilling() {
|
|
setError("")
|
|
setSaving(true)
|
|
try {
|
|
await updateTenantBilling(nwcUrl().trim())
|
|
setNwcUrl("")
|
|
await refetchTenant()
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : "Failed to update billing")
|
|
} finally {
|
|
setSaving(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<PageContainer>
|
|
<h1 class="text-2xl font-bold text-gray-900 mb-6">My Account</h1>
|
|
|
|
<div class="space-y-6">
|
|
<section class="bg-white border border-gray-200 rounded-xl p-6">
|
|
<div class="flex items-center justify-between gap-3">
|
|
<h2 class="text-lg font-semibold text-gray-900">Account Status</h2>
|
|
<Show when={tenant()}>
|
|
{(t) => (
|
|
<span class="rounded-full border border-gray-300 bg-gray-100 px-2.5 py-1 text-xs font-medium uppercase tracking-wide text-gray-700">
|
|
{t().status}
|
|
</span>
|
|
)}
|
|
</Show>
|
|
</div>
|
|
<ResourceState
|
|
loading={tenant.loading}
|
|
error={undefined}
|
|
loadingText="Loading account..."
|
|
errorText=""
|
|
/>
|
|
</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>
|
|
<p class="text-sm text-gray-600 mb-4">
|
|
Enable automatic payments by providing your Nostr Wallet Connect URL.
|
|
</p>
|
|
<div class="flex gap-2">
|
|
<input
|
|
type="text"
|
|
value={nwcUrl()}
|
|
onInput={(e) => setNwcUrl(e.currentTarget.value)}
|
|
placeholder="nostr+walletconnect://..."
|
|
class="flex-1 border border-gray-300 rounded-lg px-3 py-2"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={saveBilling}
|
|
disabled={saving()}
|
|
class="py-2 px-4 bg-blue-600 text-white rounded-lg disabled:opacity-50"
|
|
>
|
|
{saving() ? "Saving..." : "Save"}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setNwcUrl("")
|
|
void saveBilling()
|
|
}}
|
|
disabled={saving() || !recurringEnabled()}
|
|
class="py-2 px-4 border border-gray-300 rounded-lg disabled:opacity-50"
|
|
>
|
|
Disable
|
|
</button>
|
|
</div>
|
|
<Show when={error()}>
|
|
<p class="mt-3 text-sm text-red-600">{error()}</p>
|
|
</Show>
|
|
</section>
|
|
|
|
<section class="bg-white border border-gray-200 rounded-xl p-6">
|
|
<h2 class="text-lg font-semibold text-gray-900 mb-4">Invoice History</h2>
|
|
<Show when={invoices.loading}>
|
|
<p class="text-gray-500">Loading invoices...</p>
|
|
</Show>
|
|
<Show when={(invoices()?.length ?? 0) > 0} fallback={<p class="text-gray-500">No invoices yet.</p>}>
|
|
<ul class="space-y-3">
|
|
<For each={invoices()}>
|
|
{(invoice) => (
|
|
<li class="rounded-lg border border-gray-200 p-3 text-sm text-gray-700">
|
|
<div class="flex items-center justify-between gap-3">
|
|
<span class="font-medium">{invoice.amount.toLocaleString()} sats</span>
|
|
<span class="uppercase text-xs tracking-wide text-gray-500">{invoice.status}</span>
|
|
</div>
|
|
<p class="text-xs text-gray-500 mt-1">{new Date(invoice.created_at).toLocaleString()}</p>
|
|
<p class="text-xs mt-2 break-all">{invoice.invoice}</p>
|
|
</li>
|
|
)}
|
|
</For>
|
|
</ul>
|
|
</Show>
|
|
</section>
|
|
</div>
|
|
</PageContainer>
|
|
)
|
|
}
|