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/identity-step.tsx
+++ b/pledge-now-pay-later/src/app/p/[token]/steps/identity-step.tsx
@@ -0,0 +1,123 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+
+interface Props {
+  onSubmit: (data: {
+    donorName: string
+    donorEmail: string
+    donorPhone: string
+    giftAid: boolean
+  }) => void
+}
+
+export function IdentityStep({ onSubmit }: Props) {
+  const [name, setName] = useState("")
+  const [email, setEmail] = useState("")
+  const [phone, setPhone] = useState("")
+  const [giftAid, setGiftAid] = useState(false)
+  const [submitting, setSubmitting] = useState(false)
+
+  const hasContact = email.includes("@") || phone.length >= 10
+  const isValid = hasContact
+
+  const handleSubmit = async () => {
+    if (!isValid) return
+    setSubmitting(true)
+    try {
+      await onSubmit({ donorName: name, donorEmail: email, donorPhone: phone, giftAid })
+    } catch {
+      setSubmitting(false)
+    }
+  }
+
+  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">
+          Almost there!
+        </h1>
+        <p className="text-muted-foreground">
+          We need a way to send you payment details
+        </p>
+      </div>
+
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="name">Name <span className="text-muted-foreground font-normal">(optional)</span></Label>
+          <Input
+            id="name"
+            placeholder="Your name"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            autoComplete="name"
+          />
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="email">Email</Label>
+          <Input
+            id="email"
+            type="email"
+            placeholder="your@email.com"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            autoComplete="email"
+            inputMode="email"
+          />
+        </div>
+
+        <div className="relative flex items-center">
+          <div className="flex-grow border-t border-gray-200" />
+          <span className="flex-shrink mx-3 text-xs text-muted-foreground">or</span>
+          <div className="flex-grow border-t border-gray-200" />
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="phone">Phone</Label>
+          <Input
+            id="phone"
+            type="tel"
+            placeholder="07700 900000"
+            value={phone}
+            onChange={(e) => setPhone(e.target.value)}
+            autoComplete="tel"
+            inputMode="tel"
+          />
+        </div>
+
+        {/* Gift Aid */}
+        <label className="flex items-start gap-3 rounded-2xl border-2 border-gray-200 bg-white p-4 cursor-pointer hover:border-trust-blue/50 transition-colors">
+          <input
+            type="checkbox"
+            checked={giftAid}
+            onChange={(e) => setGiftAid(e.target.checked)}
+            className="mt-1 h-5 w-5 rounded border-gray-300 text-trust-blue focus:ring-trust-blue"
+          />
+          <div>
+            <span className="font-semibold text-gray-900">Add Gift Aid</span>
+            <p className="text-sm text-muted-foreground mt-0.5">
+              Boost your donation by 25% at no extra cost to you. You must be a UK taxpayer.
+            </p>
+          </div>
+        </label>
+      </div>
+
+      <Button
+        size="xl"
+        className="w-full"
+        disabled={!isValid || submitting}
+        onClick={handleSubmit}
+      >
+        {submitting ? "Submitting..." : "Complete Pledge ✓"}
+      </Button>
+
+      <p className="text-center text-xs text-muted-foreground">
+        We&apos;ll only use this to send payment details and confirm receipt.
+      </p>
+    </div>
+  )
+}