forked from coracle/caravel
Improve payment dialogs
This commit is contained in:
Jon Staab
@@ -2,11 +2,14 @@ import { createEffect, createResource, createSignal, For, Show } from "solid-js"
|
||||
import QRCode from "qrcode"
|
||||
import Modal from "@/components/Modal"
|
||||
import PaymentSetup from "@/components/PaymentSetup"
|
||||
import { CardSetupBody } from "@/components/PaymentSetupShell"
|
||||
import { useCardPortal } from "@/lib/usePaymentSetup"
|
||||
import { getInvoice, getInvoiceBolt11, listInvoiceItems, type Invoice } from "@/lib/api"
|
||||
import { billingTenant } from "@/lib/state"
|
||||
|
||||
type PayStatus = "idle" | "loading" | "success" | "error"
|
||||
type Bolt11Status = "idle" | "loading" | "ready" | "error"
|
||||
type PayMethod = "lightning" | "card"
|
||||
|
||||
type PaymentInvoice = Pick<Invoice, "id" | "amount"> &
|
||||
Partial<Pick<Invoice, "period_start" | "period_end">>
|
||||
@@ -24,6 +27,7 @@ export default function PaymentDialog(props: PaymentDialogProps) {
|
||||
const [bolt11Error, setBolt11Error] = createSignal("")
|
||||
const [payStatus, setPayStatus] = createSignal<PayStatus>("idle")
|
||||
const [payError, setPayError] = createSignal("")
|
||||
const [payMethod, setPayMethod] = createSignal<PayMethod>("lightning")
|
||||
const [showPaymentSetup, setShowPaymentSetup] = createSignal(false)
|
||||
const [setupSaved, setSetupSaved] = createSignal(false)
|
||||
const [items] = createResource(
|
||||
@@ -31,6 +35,10 @@ export default function PaymentDialog(props: PaymentDialogProps) {
|
||||
listInvoiceItems,
|
||||
)
|
||||
|
||||
// Card payment is a redirect to the Stripe billing portal; once a card is on
|
||||
// file we retry collection on this invoice automatically.
|
||||
const card = useCardPortal()
|
||||
|
||||
const autopayConfigured = () => {
|
||||
const t = billingTenant()
|
||||
return Boolean(t?.nwc_is_set || t?.stripe_payment_method_id)
|
||||
@@ -87,6 +95,8 @@ export default function PaymentDialog(props: PaymentDialogProps) {
|
||||
setBolt11Error("")
|
||||
setBolt11("")
|
||||
setQrDataUrl("")
|
||||
setPayMethod("lightning")
|
||||
card.reset()
|
||||
props.onClose()
|
||||
}
|
||||
|
||||
@@ -154,59 +164,75 @@ export default function PaymentDialog(props: PaymentDialogProps) {
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<p class="text-xs font-medium text-gray-500 uppercase tracking-wide text-center">Pay with Lightning</p>
|
||||
<Show when={bolt11Status() === "idle" || bolt11Status() === "loading"}>
|
||||
<div class="flex items-center justify-center py-12 text-sm text-gray-400">Generating invoice...</div>
|
||||
</Show>
|
||||
<Show when={bolt11Status() === "error"}>
|
||||
<div class="rounded-lg border border-red-200 bg-red-50 p-4">
|
||||
<p class="text-sm font-medium text-red-700">Unable to generate invoice</p>
|
||||
<p class="mt-1 text-xs text-red-600 wrap-break-word">{bolt11Error()}</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void loadBolt11()}
|
||||
class="mt-3 inline-flex items-center rounded-lg bg-red-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-red-700"
|
||||
>
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
</Show>
|
||||
<Show when={bolt11Status() === "ready"}>
|
||||
<img src={qrDataUrl()} alt="Lightning invoice QR code" class="mx-auto rounded-lg" />
|
||||
<Show when={bolt11()}>
|
||||
<div class="flex rounded-lg border border-gray-300">
|
||||
<input
|
||||
type="text"
|
||||
readOnly
|
||||
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"
|
||||
/>
|
||||
{/* Method switcher */}
|
||||
<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 ${payMethod() === "lightning" ? "bg-gray-900 text-white" : "text-gray-700 hover:bg-gray-50"}`}
|
||||
onClick={() => setPayMethod("lightning")}
|
||||
>
|
||||
Lightning
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class={`flex-1 rounded-md px-3 py-2 text-sm transition-colors ${payMethod() === "card" ? "bg-gray-900 text-white" : "text-gray-700 hover:bg-gray-50"}`}
|
||||
onClick={() => setPayMethod("card")}
|
||||
>
|
||||
Card
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Lightning: pay this invoice via a bolt11 QR */}
|
||||
<Show when={payMethod() === "lightning"}>
|
||||
<Show when={bolt11Status() === "idle" || bolt11Status() === "loading"}>
|
||||
<div class="flex items-center justify-center py-12 text-sm text-gray-400">Generating invoice...</div>
|
||||
</Show>
|
||||
<Show when={bolt11Status() === "error"}>
|
||||
<div class="rounded-lg border border-red-200 bg-red-50 p-4">
|
||||
<p class="text-sm font-medium text-red-700">Unable to generate invoice</p>
|
||||
<p class="mt-1 text-xs text-red-600 wrap-break-word">{bolt11Error()}</p>
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center px-3 text-gray-400 hover:text-gray-700"
|
||||
onClick={copyBolt11}
|
||||
title="Copy invoice"
|
||||
onClick={() => void loadBolt11()}
|
||||
class="mt-3 inline-flex items-center rounded-lg bg-red-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-red-700"
|
||||
>
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2" />
|
||||
<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
|
||||
</svg>
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
</Show>
|
||||
<Show when={bolt11Status() === "ready"}>
|
||||
<img src={qrDataUrl()} alt="Lightning invoice QR code" class="mx-auto rounded-lg" />
|
||||
<Show when={bolt11()}>
|
||||
<div class="flex rounded-lg border border-gray-300">
|
||||
<input
|
||||
type="text"
|
||||
readOnly
|
||||
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
|
||||
type="button"
|
||||
class="flex items-center px-3 text-gray-400 hover:text-gray-700"
|
||||
onClick={copyBolt11}
|
||||
title="Copy invoice"
|
||||
>
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2" />
|
||||
<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</Show>
|
||||
<p class="text-xs text-gray-500 text-center">
|
||||
Scan this QR code with a Bitcoin Lightning wallet to pay.
|
||||
</p>
|
||||
</Show>
|
||||
</Show>
|
||||
|
||||
{/* Card / automatic payment alternative */}
|
||||
<div class="border-t border-gray-100 pt-3 text-center">
|
||||
<p class="text-xs text-gray-500 mb-1">Prefer to pay with a card?</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPaymentSetup(true)}
|
||||
class="text-sm font-medium text-blue-600 hover:text-blue-700"
|
||||
>
|
||||
Pay with card or set up automatic payments
|
||||
</button>
|
||||
</div>
|
||||
{/* Card: redirect to the Stripe billing portal */}
|
||||
<Show when={payMethod() === "card"}>
|
||||
<CardSetupBody card={card} />
|
||||
</Show>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
@@ -232,9 +258,9 @@ export default function PaymentDialog(props: PaymentDialogProps) {
|
||||
</div>
|
||||
|
||||
{/* Error */}
|
||||
<Show when={payError()}>
|
||||
<Show when={payError() || card.error()}>
|
||||
<div class="px-6 pb-2">
|
||||
<p class="text-xs text-red-600">{payError()}</p>
|
||||
<p class="text-xs text-red-600 text-center">{payError() || card.error()}</p>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
@@ -261,14 +287,16 @@ export default function PaymentDialog(props: PaymentDialogProps) {
|
||||
>
|
||||
Pay Later
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={checkPayment}
|
||||
disabled={payStatus() === "loading" || bolt11Status() !== "ready"}
|
||||
class="py-2 px-4 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{payStatus() === "loading" ? "Checking..." : "Complete Payment"}
|
||||
</button>
|
||||
<Show when={payMethod() === "lightning"}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={checkPayment}
|
||||
disabled={payStatus() === "loading" || bolt11Status() !== "ready"}
|
||||
class="py-2 px-4 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{payStatus() === "loading" ? "Checking..." : "Complete Payment"}
|
||||
</button>
|
||||
</Show>
|
||||
</Show>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
import { createEffect, 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"
|
||||
import { PaymentSetupShell, PaymentSetupBody, SetupFooter, NwcSetupBody, CardSetupBody } from "@/components/PaymentSetupShell"
|
||||
import { useCardPortal, useNwcSetup } from "@/lib/usePaymentSetup"
|
||||
|
||||
type Tab = "nwc" | "card"
|
||||
|
||||
@@ -22,73 +20,29 @@ export default function PaymentSetup(props: PaymentSetupProps) {
|
||||
createEffect(() => {
|
||||
if (props.open) setTab(props.initialTab ?? "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)
|
||||
props.onSaved?.()
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "Failed to save wallet connection")
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
const nwc = useNwcSetup(() => props.onSaved?.())
|
||||
const card = useCardPortal()
|
||||
|
||||
async function openPortal() {
|
||||
setRedirecting(true)
|
||||
setError("")
|
||||
try {
|
||||
const { url } = await createPortalSession(account()!.pubkey, window.location.href)
|
||||
window.location.href = url
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "Failed to open billing portal")
|
||||
setRedirecting(false)
|
||||
}
|
||||
}
|
||||
// Surface only the active tab's error so a stale failure on one method doesn't
|
||||
// bleed into the other.
|
||||
const error = () => (tab() === "nwc" ? nwc.error() : card.error())
|
||||
|
||||
function handleClose() {
|
||||
setNwcUrl("")
|
||||
setSaved(false)
|
||||
setError("")
|
||||
nwc.reset()
|
||||
card.reset()
|
||||
props.onClose()
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
<PaymentSetupShell
|
||||
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"
|
||||
title="Set Up Payments"
|
||||
description="Choose how you'd like to pay once invoices are issued for your relay."
|
||||
error={error()}
|
||||
footer={<SetupFooter saved={nwc.saved()} cancelLabel="Set up later" onClose={handleClose} />}
|
||||
>
|
||||
<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 once invoices are issued 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">
|
||||
@@ -109,92 +63,14 @@ export default function PaymentSetup(props: PaymentSetupProps) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-6 py-4 min-h-[180px] flex flex-col justify-center">
|
||||
<PaymentSetupBody>
|
||||
<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>
|
||||
<NwcSetupBody nwc={nwc} />
|
||||
</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. If an invoice is currently due, we will retry collection after card setup.</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>
|
||||
<CardSetupBody card={card} />
|
||||
</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>
|
||||
</PaymentSetupBody>
|
||||
</PaymentSetupShell>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
import { createSignal, Show } from "solid-js"
|
||||
import Modal from "@/components/Modal"
|
||||
import { createPortalSession } from "@/lib/api"
|
||||
import { account } from "@/lib/state"
|
||||
import { PaymentSetupShell, PaymentSetupBody, SetupFooter, CardSetupBody } from "@/components/PaymentSetupShell"
|
||||
import { useCardPortal } from "@/lib/usePaymentSetup"
|
||||
|
||||
type PaymentSetupCardProps = {
|
||||
open: boolean
|
||||
@@ -16,97 +14,29 @@ type PaymentSetupCardProps = {
|
||||
// there's no method switcher — adding/updating a card is a redirect to the
|
||||
// Stripe billing portal, which returns to wherever it was opened from.
|
||||
export default function PaymentSetupCard(props: PaymentSetupCardProps) {
|
||||
const [redirecting, setRedirecting] = createSignal(false)
|
||||
const [error, setError] = createSignal("")
|
||||
|
||||
async function openPortal() {
|
||||
setRedirecting(true)
|
||||
setError("")
|
||||
try {
|
||||
const { url } = await createPortalSession(account()!.pubkey, window.location.href)
|
||||
window.location.href = url
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "Failed to open billing portal")
|
||||
setRedirecting(false)
|
||||
}
|
||||
}
|
||||
const card = useCardPortal()
|
||||
|
||||
function handleClose() {
|
||||
setError("")
|
||||
card.reset()
|
||||
props.onClose()
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
<PaymentSetupShell
|
||||
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"
|
||||
title={props.isUpdate ? "Manage Card" : "Add a Card"}
|
||||
description={
|
||||
props.isUpdate
|
||||
? "Manage your saved card in the Stripe billing portal."
|
||||
: "Add a card via the Stripe billing portal to pay invoices automatically."
|
||||
}
|
||||
error={card.error()}
|
||||
footer={<SetupFooter cancelLabel="Cancel" onClose={handleClose} />}
|
||||
>
|
||||
<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">
|
||||
{props.isUpdate ? "Manage Card" : "Add a Card"}
|
||||
</h2>
|
||||
<p class="text-sm text-gray-500 mt-1">
|
||||
{props.isUpdate
|
||||
? "Manage your saved card in the Stripe billing portal."
|
||||
: "Add a card via the Stripe billing portal to pay invoices automatically."}
|
||||
</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 py-4 min-h-[180px] flex flex-col justify-center">
|
||||
<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">
|
||||
{props.isUpdate
|
||||
? "Update or remove your card in the Stripe billing portal. We'll retry any due invoice after you're done."
|
||||
: "Add a payment card via Stripe to enable automatic billing. If an invoice is currently due, we will retry collection after card setup."}
|
||||
</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..." : props.isUpdate ? "Manage card" : "Add a payment card"}
|
||||
</button>
|
||||
</div>
|
||||
</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">
|
||||
<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"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
<PaymentSetupBody>
|
||||
<CardSetupBody card={card} isUpdate={props.isUpdate} />
|
||||
</PaymentSetupBody>
|
||||
</PaymentSetupShell>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { createSignal, Show } from "solid-js"
|
||||
import Modal from "@/components/Modal"
|
||||
import { updateActiveTenant } from "@/lib/hooks"
|
||||
import { PaymentSetupShell, PaymentSetupBody, SetupFooter, NwcSetupBody } from "@/components/PaymentSetupShell"
|
||||
import { useNwcSetup } from "@/lib/usePaymentSetup"
|
||||
|
||||
type PaymentSetupNWCProps = {
|
||||
open: boolean
|
||||
@@ -16,132 +15,29 @@ type PaymentSetupNWCProps = {
|
||||
// Lightning wallet", so there's no method switcher — the card path lives on its
|
||||
// own row that redirects to Stripe.
|
||||
export default function PaymentSetupNWC(props: PaymentSetupNWCProps) {
|
||||
const [nwcUrl, setNwcUrl] = createSignal("")
|
||||
const [saving, setSaving] = createSignal(false)
|
||||
const [saved, setSaved] = createSignal(false)
|
||||
const [error, setError] = createSignal("")
|
||||
|
||||
async function save() {
|
||||
const url = nwcUrl().trim()
|
||||
if (!url) return
|
||||
setSaving(true)
|
||||
setError("")
|
||||
try {
|
||||
await updateActiveTenant({ nwc_url: url })
|
||||
setSaved(true)
|
||||
props.onSaved?.()
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "Failed to save wallet connection")
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
const nwc = useNwcSetup(() => props.onSaved?.())
|
||||
|
||||
function handleClose() {
|
||||
setNwcUrl("")
|
||||
setSaved(false)
|
||||
setError("")
|
||||
nwc.reset()
|
||||
props.onClose()
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
<PaymentSetupShell
|
||||
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"
|
||||
title={props.isUpdate ? "Update Lightning Wallet" : "Connect Lightning Wallet"}
|
||||
description={
|
||||
props.isUpdate
|
||||
? "Paste a new Nostr Wallet Connect URL to replace your connected wallet."
|
||||
: "Paste your Nostr Wallet Connect URL to pay invoices automatically over Lightning."
|
||||
}
|
||||
error={nwc.error()}
|
||||
footer={<SetupFooter saved={nwc.saved()} cancelLabel="Cancel" onClose={handleClose} />}
|
||||
>
|
||||
<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">
|
||||
{props.isUpdate ? "Update Lightning Wallet" : "Connect Lightning Wallet"}
|
||||
</h2>
|
||||
<p class="text-sm text-gray-500 mt-1">
|
||||
{props.isUpdate
|
||||
? "Paste a new Nostr Wallet Connect URL to replace your connected wallet."
|
||||
: "Paste your Nostr Wallet Connect URL to pay invoices automatically over Lightning."}
|
||||
</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 py-4 min-h-[180px] flex flex-col justify-center">
|
||||
<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={save}
|
||||
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>
|
||||
</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()}
|
||||
fallback={
|
||||
<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"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
}
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</Modal>
|
||||
<PaymentSetupBody>
|
||||
<NwcSetupBody nwc={nwc} />
|
||||
</PaymentSetupBody>
|
||||
</PaymentSetupShell>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,159 @@
|
||||
import { Show, type JSX } from "solid-js"
|
||||
import Modal from "@/components/Modal"
|
||||
import type { CardPortal, NwcSetup } from "@/lib/usePaymentSetup"
|
||||
|
||||
type PaymentSetupShellProps = {
|
||||
open: boolean
|
||||
onClose: () => void
|
||||
title: string
|
||||
description: string
|
||||
error?: string
|
||||
footer: JSX.Element
|
||||
children: JSX.Element
|
||||
}
|
||||
|
||||
// Shared chrome for the payment-setup dialogs: the modal frame, the
|
||||
// title/description header with a close button, the error line, and the footer
|
||||
// container. Each caller supplies the body (children) and footer buttons.
|
||||
export function PaymentSetupShell(props: PaymentSetupShellProps) {
|
||||
return (
|
||||
<Modal
|
||||
open={props.open}
|
||||
onClose={props.onClose}
|
||||
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">{props.title}</h2>
|
||||
<p class="text-sm text-gray-500 mt-1">{props.description}</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={props.onClose}
|
||||
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>
|
||||
|
||||
{props.children}
|
||||
|
||||
<Show when={props.error}>
|
||||
<div class="px-6 pb-2">
|
||||
<p class="text-xs text-red-600">{props.error}</p>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<div class="px-6 py-4 border-t border-gray-100">{props.footer}</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
// The fixed-height content region between the header and footer.
|
||||
export function PaymentSetupBody(props: { children: JSX.Element }) {
|
||||
return <div class="px-6 py-4 min-h-[180px] flex flex-col justify-center">{props.children}</div>
|
||||
}
|
||||
|
||||
// Footer for every payment-setup dialog: a "Done" confirm once an action has
|
||||
// succeeded, otherwise a secondary dismiss button. Card setup never "saves" (it
|
||||
// redirects away), so it always shows the dismiss button.
|
||||
export function SetupFooter(props: { saved?: boolean; cancelLabel: string; onClose: () => void }) {
|
||||
return (
|
||||
<Show
|
||||
when={props.saved}
|
||||
fallback={
|
||||
<button
|
||||
type="button"
|
||||
onClick={props.onClose}
|
||||
class="py-2 px-4 border border-gray-300 text-gray-700 text-sm rounded-lg hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
{props.cancelLabel}
|
||||
</button>
|
||||
}
|
||||
>
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={props.onClose}
|
||||
class="py-2 px-4 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700"
|
||||
>
|
||||
Done
|
||||
</button>
|
||||
</div>
|
||||
</Show>
|
||||
)
|
||||
}
|
||||
|
||||
// Lightning/NWC body: the URL input + save, or the success state once saved.
|
||||
export function NwcSetupBody(props: { nwc: NwcSetup }) {
|
||||
const nwc = props.nwc
|
||||
return (
|
||||
<Show
|
||||
when={!nwc.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={nwc.nwcUrl()}
|
||||
onInput={(e) => nwc.setNwcUrl(e.currentTarget.value)}
|
||||
placeholder="nostr+walletconnect://..."
|
||||
class="w-full border border-gray-300 rounded-lg px-3 py-2"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={nwc.save}
|
||||
disabled={nwc.saving() || !nwc.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"
|
||||
>
|
||||
{nwc.saving() ? "Saving..." : "Save"}
|
||||
</button>
|
||||
</div>
|
||||
</Show>
|
||||
)
|
||||
}
|
||||
|
||||
// Card body: an explanation plus the button that redirects to the Stripe portal.
|
||||
// `isUpdate` adjusts the copy for tenants who already have a card on file.
|
||||
export function CardSetupBody(props: { card: CardPortal; isUpdate?: boolean }) {
|
||||
return (
|
||||
<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">
|
||||
{props.isUpdate
|
||||
? "Update or remove your card in the Stripe billing portal. We'll retry any due invoice after you're done."
|
||||
: "Add a payment card via Stripe to enable automatic billing. If an invoice is currently due, we will retry collection after card setup."}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={props.card.openPortal}
|
||||
disabled={props.card.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"
|
||||
>
|
||||
{props.card.redirecting() ? "Redirecting..." : props.isUpdate ? "Manage card" : "Add a payment card"}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -28,7 +28,7 @@ export default function RelayListItem(props: RelayListItemProps) {
|
||||
class="inline-flex items-center rounded-full border border-red-200 bg-red-50 px-2.5 py-0.5 text-xs font-medium text-red-700 max-w-56 truncate"
|
||||
title={props.relay.sync_error}
|
||||
>
|
||||
{props.relay.sync_error}
|
||||
Failed to sync
|
||||
</span>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
@@ -23,4 +23,7 @@
|
||||
--color-blue-500: #c18254;
|
||||
--color-blue-600: #c18254;
|
||||
--color-blue-700: #a66d46;
|
||||
--color-blue-800: #8a5a39;
|
||||
--color-blue-900: #6f4730;
|
||||
--color-blue-950: #45291a;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,67 @@
|
||||
import { createSignal } from "solid-js"
|
||||
import { updateActiveTenant } from "@/lib/hooks"
|
||||
import { createPortalSession } from "@/lib/api"
|
||||
import { account } from "@/lib/state"
|
||||
|
||||
// Lightning/NWC save state machine, shared by the combined and focused setup
|
||||
// dialogs. `onSaved` fires once the wallet URL is persisted.
|
||||
export function useNwcSetup(onSaved?: () => void) {
|
||||
const [nwcUrl, setNwcUrl] = createSignal("")
|
||||
const [saving, setSaving] = createSignal(false)
|
||||
const [saved, setSaved] = createSignal(false)
|
||||
const [error, setError] = createSignal("")
|
||||
|
||||
async function save() {
|
||||
const url = nwcUrl().trim()
|
||||
if (!url) return
|
||||
setSaving(true)
|
||||
setError("")
|
||||
try {
|
||||
await updateActiveTenant({ nwc_url: url })
|
||||
setSaved(true)
|
||||
onSaved?.()
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "Failed to save wallet connection")
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
function reset() {
|
||||
setNwcUrl("")
|
||||
setSaved(false)
|
||||
setError("")
|
||||
}
|
||||
|
||||
return { nwcUrl, setNwcUrl, saving, saved, error, save, reset }
|
||||
}
|
||||
|
||||
export type NwcSetup = ReturnType<typeof useNwcSetup>
|
||||
|
||||
// Card setup is a full-page redirect to the Stripe billing portal (which returns
|
||||
// to wherever it was opened from), so there's no local "saved" state — only the
|
||||
// in-flight redirect and any failure to open the portal.
|
||||
export function useCardPortal() {
|
||||
const [redirecting, setRedirecting] = createSignal(false)
|
||||
const [error, setError] = createSignal("")
|
||||
|
||||
async function openPortal() {
|
||||
setRedirecting(true)
|
||||
setError("")
|
||||
try {
|
||||
const { url } = await createPortalSession(account()!.pubkey, window.location.href)
|
||||
window.location.href = url
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : "Failed to open billing portal")
|
||||
setRedirecting(false)
|
||||
}
|
||||
}
|
||||
|
||||
function reset() {
|
||||
setError("")
|
||||
}
|
||||
|
||||
return { redirecting, error, openPortal, reset }
|
||||
}
|
||||
|
||||
export type CardPortal = ReturnType<typeof useCardPortal>
|
||||
Reference in New Issue
Block a user