Jon Staab
286 lines
11 KiB
TypeScript
286 lines
11 KiB
TypeScript
import { createEffect, createResource, createSignal, Show } from "solid-js"
|
|
import QRCode from "qrcode"
|
|
import Modal from "@/components/Modal"
|
|
import PaymentSetup from "@/components/PaymentSetup"
|
|
import InvoiceItemsList from "@/components/payment/InvoiceItemsList"
|
|
import LightningPayBody from "@/components/payment/LightningPayBody"
|
|
import { setToastMessage } from "@/lib/state"
|
|
import { copyToClipboard } from "@/lib/clipboard"
|
|
import { useInvoiceCheckout } from "@/lib/usePaymentSetup"
|
|
import { ensureInvoiceBolt11, listInvoiceItems, reconcileInvoice, type Invoice } from "@/lib/api"
|
|
import { autopayConfigured } from "@/lib/paymentMethod"
|
|
import { billingTenant } from "@/lib/state"
|
|
import { formatUsd, formatPeriod } from "@/lib/format"
|
|
|
|
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">>
|
|
|
|
type PaymentDialogProps = {
|
|
invoice: PaymentInvoice
|
|
open: boolean
|
|
onClose: () => void
|
|
}
|
|
|
|
export default function PaymentDialog(props: PaymentDialogProps) {
|
|
const [bolt11, setBolt11] = createSignal("")
|
|
const [qrDataUrl, setQrDataUrl] = createSignal("")
|
|
const [bolt11Status, setBolt11Status] = createSignal<Bolt11Status>("idle")
|
|
const [bolt11Error, setBolt11Error] = createSignal("")
|
|
const [payStatus, setPayStatus] = createSignal<PayStatus>("idle")
|
|
const [payMethod, setPayMethod] = createSignal<PayMethod>("lightning")
|
|
const [showPaymentSetup, setShowPaymentSetup] = createSignal(false)
|
|
const [setupSaved, setSetupSaved] = createSignal(false)
|
|
const [items] = createResource(
|
|
() => (props.open ? props.invoice.id : undefined),
|
|
listInvoiceItems,
|
|
)
|
|
|
|
// Paying by card opens a Stripe Checkout session scoped to this invoice (which
|
|
// can clear a 3D Secure challenge the off-session charge can't), then returns
|
|
// here where the payment is reconciled. Distinct from PaymentSetup, which
|
|
// manages the recurring card on file via the billing portal.
|
|
const checkout = useInvoiceCheckout(() => props.invoice.id)
|
|
|
|
const hasAutopay = () => {
|
|
const t = billingTenant()
|
|
return t ? autopayConfigured(t) : false
|
|
}
|
|
|
|
async function loadBolt11() {
|
|
if (!props.invoice.id) return
|
|
setBolt11Status("loading")
|
|
setBolt11Error("")
|
|
setBolt11("")
|
|
setQrDataUrl("")
|
|
|
|
try {
|
|
const { lnbc } = await ensureInvoiceBolt11(props.invoice.id)
|
|
setBolt11(lnbc)
|
|
setQrDataUrl(await QRCode.toDataURL(lnbc, { width: 256, margin: 2 }))
|
|
setBolt11Status("ready")
|
|
} catch (e) {
|
|
setBolt11Status("error")
|
|
setBolt11Error(e instanceof Error ? e.message : "Failed to generate Lightning invoice")
|
|
}
|
|
}
|
|
|
|
createEffect(() => {
|
|
if (!props.open || !props.invoice.id) return
|
|
void loadBolt11()
|
|
})
|
|
|
|
// The checkout redirect lives in a shared hook, so surface its failures here
|
|
// by mirroring its error signal into the toast.
|
|
createEffect(() => {
|
|
const err = checkout.error()
|
|
if (err) setToastMessage(err)
|
|
})
|
|
|
|
function copyBolt11() {
|
|
void copyToClipboard(bolt11(), { successMessage: "Invoice copied" })
|
|
}
|
|
|
|
async function checkPayment() {
|
|
setPayStatus("loading")
|
|
try {
|
|
const invoice = await reconcileInvoice(props.invoice.id)
|
|
if (invoice.paid_at != null) {
|
|
setPayStatus("success")
|
|
} else {
|
|
setPayStatus("error")
|
|
setToastMessage("Payment not yet confirmed. Please try again after sending.")
|
|
}
|
|
} catch (e) {
|
|
setPayStatus("error")
|
|
setToastMessage(e instanceof Error ? e.message : "Failed to check payment status")
|
|
}
|
|
}
|
|
|
|
function handleClose() {
|
|
setPayStatus("idle")
|
|
setBolt11Status("idle")
|
|
setBolt11Error("")
|
|
setBolt11("")
|
|
setQrDataUrl("")
|
|
setPayMethod("lightning")
|
|
checkout.reset()
|
|
props.onClose()
|
|
}
|
|
|
|
const amountLabel = () => formatUsd(props.invoice.amount)
|
|
|
|
const periodLabel = () => formatPeriod(props.invoice.period_start, props.invoice.period_end)
|
|
|
|
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"
|
|
>
|
|
{/* Header */}
|
|
<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">Pay Invoice</h2>
|
|
<p class="text-2xl font-bold text-gray-900 mt-1">{amountLabel()}</p>
|
|
<Show when={periodLabel()}>
|
|
<p class="text-xs text-gray-500 mt-0.5">Billing period {periodLabel()}</p>
|
|
</Show>
|
|
</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>
|
|
|
|
{/* Content */}
|
|
<div class="px-6 py-4 min-h-[240px] flex flex-col items-center justify-center">
|
|
<Show
|
|
when={payStatus() === "success"}
|
|
fallback={
|
|
<div class="w-full space-y-4">
|
|
{/* What's being paid for — the invoice's actual line items */}
|
|
<Show when={(items() ?? []).length > 0}>
|
|
<InvoiceItemsList items={items() ?? []} />
|
|
</Show>
|
|
|
|
{/* 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"}>
|
|
<LightningPayBody
|
|
bolt11Status={bolt11Status}
|
|
bolt11={bolt11}
|
|
qrDataUrl={qrDataUrl}
|
|
bolt11Error={bolt11Error}
|
|
onRetry={() => void loadBolt11()}
|
|
onCopy={copyBolt11}
|
|
/>
|
|
</Show>
|
|
|
|
{/* Card: redirect to a Stripe Checkout session for this invoice */}
|
|
<Show when={payMethod() === "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">
|
|
Pay this invoice on Stripe's secure checkout. You'll be redirected and brought back here once it's done.
|
|
</p>
|
|
<button
|
|
type="button"
|
|
onClick={checkout.openCheckout}
|
|
disabled={checkout.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"
|
|
>
|
|
{checkout.redirecting() ? "Redirecting..." : `Pay ${amountLabel()} by card`}
|
|
</button>
|
|
</div>
|
|
</Show>
|
|
</div>
|
|
}
|
|
>
|
|
<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-900">Payment confirmed!</p>
|
|
<p class="text-xs text-gray-500">Thank you. Your account is up to date.</p>
|
|
<Show when={!hasAutopay()}>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPaymentSetup(true)}
|
|
class="mt-2 inline-flex items-center justify-center rounded-lg border border-blue-200 bg-blue-50 px-4 py-2 text-sm font-medium text-blue-700 hover:bg-blue-100 transition-colors"
|
|
>
|
|
Set up automatic payments
|
|
</button>
|
|
</Show>
|
|
</div>
|
|
</Show>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div class="px-6 py-4 flex justify-between gap-3 border-t border-gray-100">
|
|
<Show
|
|
when={payStatus() !== "success"}
|
|
fallback={
|
|
<div class="flex justify-end w-full">
|
|
<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>
|
|
}
|
|
>
|
|
<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"
|
|
>
|
|
Pay Later
|
|
</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>
|
|
<PaymentSetup
|
|
open={showPaymentSetup()}
|
|
onClose={() => {
|
|
setShowPaymentSetup(false)
|
|
if (setupSaved()) {
|
|
setSetupSaved(false)
|
|
props.onClose()
|
|
}
|
|
}}
|
|
onSaved={() => setSetupSaved(true)}
|
|
/>
|
|
</>
|
|
)
|
|
}
|