96 lines
3.2 KiB
TypeScript
96 lines
3.2 KiB
TypeScript
"use client"
|
|
|
|
import { Building2, CreditCard, Landmark, Globe } from "lucide-react"
|
|
|
|
interface Props {
|
|
onSelect: (rail: "bank" | "gocardless" | "card" | "fpx") => void
|
|
amount: number
|
|
}
|
|
|
|
export function PaymentStep({ onSelect, amount }: Props) {
|
|
const pounds = (amount / 100).toFixed(2)
|
|
|
|
const options = [
|
|
{
|
|
id: "bank" as const,
|
|
icon: Building2,
|
|
title: "Bank Transfer",
|
|
subtitle: "Zero fees — 100% goes to charity",
|
|
tag: "Recommended",
|
|
tagColor: "bg-success-green text-white",
|
|
detail: "Use your banking app to transfer directly",
|
|
},
|
|
{
|
|
id: "gocardless" as const,
|
|
icon: Landmark,
|
|
title: "Direct Debit",
|
|
subtitle: "Automatic collection — set and forget",
|
|
tag: "Low fees",
|
|
tagColor: "bg-trust-blue/10 text-trust-blue",
|
|
detail: "We'll collect via GoCardless",
|
|
},
|
|
{
|
|
id: "card" as const,
|
|
icon: CreditCard,
|
|
title: "Card Payment via Stripe",
|
|
subtitle: "Pay now by Visa, Mastercard, Amex",
|
|
tag: "Stripe",
|
|
tagColor: "bg-purple-100 text-purple-700",
|
|
detail: "Secure payment powered by Stripe",
|
|
},
|
|
{
|
|
id: "fpx" as const,
|
|
icon: Globe,
|
|
title: "FPX Online Banking",
|
|
subtitle: "Pay via Malaysian bank account",
|
|
tag: "Malaysia",
|
|
tagColor: "bg-amber-500/10 text-amber-700",
|
|
detail: "Instant payment from 18 Malaysian banks",
|
|
},
|
|
]
|
|
|
|
return (
|
|
<div className="max-w-md mx-auto pt-4 space-y-6">
|
|
<div className="text-center space-y-2">
|
|
<h1 className="text-2xl font-extrabold text-gray-900">
|
|
How would you like to pay?
|
|
</h1>
|
|
<p className="text-lg text-muted-foreground">
|
|
Pledge: <span className="font-bold text-foreground">£{pounds}</span>
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
{options.map((opt) => (
|
|
<button
|
|
key={opt.id}
|
|
onClick={() => onSelect(opt.id)}
|
|
className="w-full text-left tap-target rounded-2xl border-2 border-gray-200 bg-white p-5 hover:border-trust-blue/50 active:scale-[0.99] transition-all group"
|
|
>
|
|
<div className="flex items-start gap-4">
|
|
<div className="rounded-xl bg-trust-blue/5 p-3 group-hover:bg-trust-blue/10 transition-colors">
|
|
<opt.icon className="h-6 w-6 text-trust-blue" />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2">
|
|
<span className="font-bold text-gray-900">{opt.title}</span>
|
|
{opt.tag && (
|
|
<span className={`text-xs font-semibold px-2 py-0.5 rounded-full ${opt.tagColor}`}>
|
|
{opt.tag}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="text-sm text-muted-foreground mt-0.5">{opt.subtitle}</p>
|
|
<p className="text-xs text-muted-foreground/70 mt-1">{opt.detail}</p>
|
|
</div>
|
|
<div className="text-muted-foreground/40 group-hover:text-trust-blue transition-colors text-xl">
|
|
→
|
|
</div>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|