feat: add improved pi agent with observatory, dashboard, and pledge-now-pay-later

2026-03-01 23:41:24 +08:00
parent ae242436c9
commit f832b913d5
99 changed files with 20949 additions and 74 deletions
--- a/pledge-now-pay-later/src/app/p/[token]/steps/payment-step.tsx
+++ b/pledge-now-pay-later/src/app/p/[token]/steps/payment-step.tsx
@@ -0,0 +1,95 @@
+"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>
+  )
+}