Jon Staab
77 lines
2.5 KiB
TypeScript
77 lines
2.5 KiB
TypeScript
import { createEffect, createSignal, Show } from "solid-js"
|
|
import { PaymentSetupShell, PaymentSetupBody, SetupFooter, NwcSetupBody, CardSetupBody } from "@/components/PaymentSetupShell"
|
|
import { useCardPortal, useNwcSetup } from "@/lib/usePaymentSetup"
|
|
|
|
type Tab = "nwc" | "card"
|
|
|
|
type PaymentSetupProps = {
|
|
open: boolean
|
|
onClose: () => void
|
|
onSaved?: () => void
|
|
// Which method to show first. Lightning/NWC is the default; pass "card" to land
|
|
// a tenant on the card tab (e.g. when their card is the method that failed).
|
|
initialTab?: Tab
|
|
}
|
|
|
|
export default function PaymentSetup(props: PaymentSetupProps) {
|
|
const [tab, setTab] = createSignal<Tab>(props.initialTab ?? "nwc")
|
|
|
|
// Reset to the requested tab each time the dialog opens.
|
|
createEffect(() => {
|
|
if (props.open) setTab(props.initialTab ?? "nwc")
|
|
})
|
|
|
|
const nwc = useNwcSetup(() => props.onSaved?.())
|
|
const card = useCardPortal()
|
|
|
|
// 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() {
|
|
nwc.reset()
|
|
card.reset()
|
|
props.onClose()
|
|
}
|
|
|
|
return (
|
|
<PaymentSetupShell
|
|
open={props.open}
|
|
onClose={handleClose}
|
|
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-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>
|
|
|
|
<PaymentSetupBody>
|
|
<Show when={tab() === "nwc"}>
|
|
<NwcSetupBody nwc={nwc} />
|
|
</Show>
|
|
<Show when={tab() === "card"}>
|
|
<CardSetupBody card={card} />
|
|
</Show>
|
|
</PaymentSetupBody>
|
|
</PaymentSetupShell>
|
|
)
|
|
}
|