Complete dashboard UI overhaul: persona journeys + brand unification
Navigation: goal-oriented, not feature-oriented
- Overview → Home
- Campaigns → Collect ('I want people to pledge')
- Pledges → Money ('Where's the money?')
- Exports → Reports ('My treasurer needs numbers')
- Old routes still work via re-exports
Terminology: human language, not SaaS jargon
- new → Waiting
- initiated → Said they paid
- paid → Received ✓
- overdue → Needs a nudge
- Campaign → Appeal
- QR Source → Pledge link
- Reconcile → Match payments
- Rail → Payment method
- Pipeline by Status → How pledges are doing
- Conversion rate → % who pledged
- CRM Export Pack → Full data download
Visual identity: brand-consistent dashboard
- Sharp edges (no rounded-lg cards)
- Gap-px grids for stats (brand signature pattern)
- Left-border accents (brand signature pattern)
- Midnight/Paper/Promise Blue 60-30-10 color rule
- Typography as hero (big bold numbers, not card-heavy)
- No emoji in UI chrome
- Brand-consistent status badges (colored bg + text, not shadcn Badge)
- Consistent header typography (text-3xl font-black tracking-tight)
Pages rewritten: layout, home, events (collect), pledges (money),
exports (reports), reconcile, settings
Reconcile: auto-detects bank CSV format via presets + AI before upload
UX spec: docs/UX_OVERHAUL_SPEC.md
This commit is contained in:
@@ -1,27 +1,16 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect, useCallback } from "react"
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import {
|
||||
Building2, CreditCard, Palette, Check, Loader2, AlertCircle,
|
||||
MessageCircle, Radio, QrCode, RefreshCw, Smartphone, Wifi, WifiOff
|
||||
Check, Loader2, AlertCircle,
|
||||
MessageCircle, Radio, RefreshCw, Smartphone, Wifi, WifiOff, QrCode
|
||||
} from "lucide-react"
|
||||
|
||||
interface OrgSettings {
|
||||
name: string
|
||||
bankName: string
|
||||
bankSortCode: string
|
||||
bankAccountNo: string
|
||||
bankAccountName: string
|
||||
refPrefix: string
|
||||
primaryColor: string
|
||||
gcAccessToken: string
|
||||
gcEnvironment: string
|
||||
orgType: string
|
||||
name: string; bankName: string; bankSortCode: string; bankAccountNo: string
|
||||
bankAccountName: string; refPrefix: string; primaryColor: string
|
||||
gcAccessToken: string; gcEnvironment: string; orgType: string
|
||||
}
|
||||
|
||||
export default function SettingsPage() {
|
||||
@@ -33,281 +22,226 @@ export default function SettingsPage() {
|
||||
|
||||
useEffect(() => {
|
||||
fetch("/api/settings")
|
||||
.then((r) => r.json())
|
||||
.then((data) => { if (data.name) setSettings(data) })
|
||||
.then(r => r.json())
|
||||
.then(data => { if (data.name) setSettings(data) })
|
||||
.catch(() => setError("Failed to load settings"))
|
||||
.finally(() => setLoading(false))
|
||||
}, [])
|
||||
|
||||
const save = async (section: string, data: Record<string, string>) => {
|
||||
setSaving(section)
|
||||
setError(null)
|
||||
setSaving(section); setError(null)
|
||||
try {
|
||||
const res = await fetch("/api/settings", {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(data),
|
||||
})
|
||||
const res = await fetch("/api/settings", { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) })
|
||||
if (res.ok) { setSaved(section); setTimeout(() => setSaved(null), 2000) }
|
||||
else setError("Failed to save")
|
||||
} catch { setError("Failed to save") }
|
||||
setSaving(null)
|
||||
}
|
||||
|
||||
if (loading) return <div className="flex items-center justify-center py-20"><Loader2 className="h-8 w-8 text-trust-blue animate-spin" /></div>
|
||||
if (!settings) return <div className="text-center py-20"><AlertCircle className="h-8 w-8 text-danger-red mx-auto mb-2" /><p className="text-muted-foreground">Failed to load settings</p></div>
|
||||
if (loading) return <div className="flex items-center justify-center py-20"><Loader2 className="h-6 w-6 text-[#1E40AF] animate-spin" /></div>
|
||||
if (!settings) return <div className="text-center py-20"><AlertCircle className="h-6 w-6 text-[#DC2626] mx-auto mb-2" /><p className="text-sm text-gray-500">Failed to load settings</p></div>
|
||||
|
||||
const update = (key: keyof OrgSettings, value: string) => setSettings((s) => s ? { ...s, [key]: value } : s)
|
||||
const update = (key: keyof OrgSettings, value: string) => setSettings(s => s ? { ...s, [key]: value } : s)
|
||||
|
||||
const SaveButton = ({ section, data }: { section: string; data: Record<string, string> }) => (
|
||||
<button
|
||||
onClick={() => save(section, data)}
|
||||
disabled={saving === section}
|
||||
className="bg-[#111827] px-4 py-2 text-xs font-bold text-white hover:bg-gray-800 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{saving === section ? <><Loader2 className="h-3 w-3 mr-1.5 animate-spin inline" /> Saving</> : saved === section ? <><Check className="h-3 w-3 mr-1.5 inline" /> Saved!</> : "Save"}
|
||||
</button>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="space-y-6 max-w-2xl">
|
||||
<div className="space-y-8 max-w-2xl">
|
||||
<div>
|
||||
<h1 className="text-2xl font-black text-gray-900">Settings</h1>
|
||||
<p className="text-sm text-muted-foreground mt-0.5">Configure your organisation's payment details and integrations</p>
|
||||
<h1 className="text-3xl font-black text-[#111827] tracking-tight">Settings</h1>
|
||||
<p className="text-sm text-gray-500 mt-0.5">Your charity details, bank account, and connections</p>
|
||||
</div>
|
||||
|
||||
{error && <div className="rounded-lg bg-danger-red/10 border border-danger-red/20 p-3 text-sm text-danger-red">{error}</div>}
|
||||
{error && <div className="border-l-2 border-[#DC2626] bg-[#DC2626]/5 p-3 text-sm text-[#DC2626]">{error}</div>}
|
||||
|
||||
{/* WhatsApp — MOST IMPORTANT, first */}
|
||||
{/* WhatsApp — most important, always first */}
|
||||
<WhatsAppPanel />
|
||||
|
||||
{/* Bank Details */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base flex items-center gap-2"><Building2 className="h-4 w-4 text-trust-blue" /> Bank Account</CardTitle>
|
||||
<CardDescription className="text-xs">Shown to donors who choose bank transfer. Each pledge gets a unique reference.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div><Label className="text-xs">Bank Name</Label><Input value={settings.bankName} onChange={(e) => update("bankName", e.target.value)} placeholder="e.g. Barclays" /></div>
|
||||
<div><Label className="text-xs">Account Name</Label><Input value={settings.bankAccountName} onChange={(e) => update("bankAccountName", e.target.value)} /></div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div><Label className="text-xs">Sort Code</Label><Input value={settings.bankSortCode} onChange={(e) => update("bankSortCode", e.target.value)} placeholder="20-30-80" /></div>
|
||||
<div><Label className="text-xs">Account Number</Label><Input value={settings.bankAccountNo} onChange={(e) => update("bankAccountNo", e.target.value)} placeholder="12345678" /></div>
|
||||
</div>
|
||||
<div><Label className="text-xs">Reference Prefix</Label><Input value={settings.refPrefix} onChange={(e) => update("refPrefix", e.target.value)} maxLength={4} className="w-24" /><p className="text-[10px] text-muted-foreground mt-1">e.g. {settings.refPrefix}-XXXX-50</p></div>
|
||||
<Button size="sm" onClick={() => save("bank", { bankName: settings.bankName, bankSortCode: settings.bankSortCode, bankAccountNo: settings.bankAccountNo, bankAccountName: settings.bankAccountName, refPrefix: settings.refPrefix })} disabled={saving === "bank"}>
|
||||
{saving === "bank" ? <><Loader2 className="h-3.5 w-3.5 mr-1.5 animate-spin" /> Saving</> : saved === "bank" ? <><Check className="h-3.5 w-3.5 mr-1.5" /> Saved!</> : "Save Bank Details"}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/* Bank account */}
|
||||
<div className="bg-white border border-gray-200 p-6 space-y-4">
|
||||
<div>
|
||||
<h3 className="text-base font-bold text-[#111827]">Bank account</h3>
|
||||
<p className="text-xs text-gray-500 mt-0.5">These details are shown to donors so they can transfer money to you. Each pledge gets a unique reference code.</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div><label className="text-[10px] font-bold text-gray-500 block mb-1">Bank name</label><Input value={settings.bankName} onChange={e => update("bankName", e.target.value)} placeholder="e.g. Barclays" /></div>
|
||||
<div><label className="text-[10px] font-bold text-gray-500 block mb-1">Account name</label><Input value={settings.bankAccountName} onChange={e => update("bankAccountName", e.target.value)} /></div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div><label className="text-[10px] font-bold text-gray-500 block mb-1">Sort code</label><Input value={settings.bankSortCode} onChange={e => update("bankSortCode", e.target.value)} placeholder="20-30-80" /></div>
|
||||
<div><label className="text-[10px] font-bold text-gray-500 block mb-1">Account number</label><Input value={settings.bankAccountNo} onChange={e => update("bankAccountNo", e.target.value)} placeholder="12345678" /></div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] font-bold text-gray-500 block mb-1">Reference code prefix</label>
|
||||
<Input value={settings.refPrefix} onChange={e => update("refPrefix", e.target.value)} maxLength={4} className="w-24" />
|
||||
<p className="text-[10px] text-gray-400 mt-1">Donors will see references like <strong>{settings.refPrefix}-XXXX-50</strong></p>
|
||||
</div>
|
||||
<SaveButton section="bank" data={{ bankName: settings.bankName, bankSortCode: settings.bankSortCode, bankAccountNo: settings.bankAccountNo, bankAccountName: settings.bankAccountName, refPrefix: settings.refPrefix }} />
|
||||
</div>
|
||||
|
||||
{/* GoCardless */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base flex items-center gap-2"><CreditCard className="h-4 w-4 text-trust-blue" /> GoCardless (Direct Debit)</CardTitle>
|
||||
<CardDescription className="text-xs">Enable Direct Debit collection protected by the DD Guarantee.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div><Label className="text-xs">Access Token</Label><Input type="password" value={settings.gcAccessToken} onChange={(e) => update("gcAccessToken", e.target.value)} placeholder="sandbox_xxxxx or live_xxxxx" /></div>
|
||||
<div>
|
||||
<Label className="text-xs">Environment</Label>
|
||||
<div className="flex gap-2 mt-1">
|
||||
{["sandbox", "live"].map((env) => (
|
||||
<button key={env} onClick={() => update("gcEnvironment", env)} className={`px-3 py-1.5 rounded-lg text-xs font-medium border-2 transition-colors ${settings.gcEnvironment === env ? env === "live" ? "border-danger-red bg-danger-red/5 text-danger-red" : "border-trust-blue bg-trust-blue/5 text-trust-blue" : "border-gray-200 text-muted-foreground"}`}>
|
||||
{env.charAt(0).toUpperCase() + env.slice(1)} {env === "live" && settings.gcEnvironment === "live" && "⚠️"}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{/* Direct Debit */}
|
||||
<div className="bg-white border border-gray-200 p-6 space-y-4">
|
||||
<div>
|
||||
<h3 className="text-base font-bold text-[#111827]">Direct Debit</h3>
|
||||
<p className="text-xs text-gray-500 mt-0.5">Accept Direct Debit payments via GoCardless. Donors set up a mandate and payments are collected automatically.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] font-bold text-gray-500 block mb-1">GoCardless access token</label>
|
||||
<Input type="password" value={settings.gcAccessToken} onChange={e => update("gcAccessToken", e.target.value)} placeholder="sandbox_xxxxx or live_xxxxx" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] font-bold text-gray-500 block mb-1">Mode</label>
|
||||
<div className="flex gap-2 mt-1">
|
||||
{["sandbox", "live"].map(env => (
|
||||
<button key={env} onClick={() => update("gcEnvironment", env)} className={`px-3 py-1.5 text-xs font-bold border-2 transition-colors ${settings.gcEnvironment === env ? env === "live" ? "border-[#DC2626] bg-[#DC2626]/5 text-[#DC2626]" : "border-[#1E40AF] bg-[#1E40AF]/5 text-[#1E40AF]" : "border-gray-200 text-gray-400"}`}>
|
||||
{env === "sandbox" ? "Test mode" : "Live mode"}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<Button size="sm" onClick={() => save("gc", { gcAccessToken: settings.gcAccessToken, gcEnvironment: settings.gcEnvironment })} disabled={saving === "gc"}>
|
||||
{saving === "gc" ? <><Loader2 className="h-3.5 w-3.5 mr-1.5 animate-spin" /> Saving</> : saved === "gc" ? <><Check className="h-3.5 w-3.5 mr-1.5" /> Saved!</> : "Save GoCardless"}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<SaveButton section="gc" data={{ gcAccessToken: settings.gcAccessToken, gcEnvironment: settings.gcEnvironment }} />
|
||||
</div>
|
||||
|
||||
{/* Branding */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base flex items-center gap-2"><Palette className="h-4 w-4 text-trust-blue" /> Branding</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div><Label className="text-xs">Organisation Name</Label><Input value={settings.name} onChange={(e) => update("name", e.target.value)} /></div>
|
||||
<div>
|
||||
<Label className="text-xs">Primary Colour</Label>
|
||||
<div className="flex gap-2 mt-1"><Input type="color" value={settings.primaryColor} onChange={(e) => update("primaryColor", e.target.value)} className="w-12 h-9 p-0.5" /><Input value={settings.primaryColor} onChange={(e) => update("primaryColor", e.target.value)} className="flex-1" /></div>
|
||||
<div className="bg-white border border-gray-200 p-6 space-y-4">
|
||||
<div>
|
||||
<h3 className="text-base font-bold text-[#111827]">Your charity</h3>
|
||||
<p className="text-xs text-gray-500 mt-0.5">This name and colour appear on pledge pages and WhatsApp messages.</p>
|
||||
</div>
|
||||
<div><label className="text-[10px] font-bold text-gray-500 block mb-1">Charity name</label><Input value={settings.name} onChange={e => update("name", e.target.value)} /></div>
|
||||
<div>
|
||||
<label className="text-[10px] font-bold text-gray-500 block mb-1">Brand colour</label>
|
||||
<div className="flex gap-2 mt-1">
|
||||
<Input type="color" value={settings.primaryColor} onChange={e => update("primaryColor", e.target.value)} className="w-12 h-9 p-0.5" />
|
||||
<Input value={settings.primaryColor} onChange={e => update("primaryColor", e.target.value)} className="flex-1" />
|
||||
</div>
|
||||
<Button size="sm" onClick={() => save("brand", { name: settings.name, primaryColor: settings.primaryColor })} disabled={saving === "brand"}>
|
||||
{saving === "brand" ? <><Loader2 className="h-3.5 w-3.5 mr-1.5 animate-spin" /> Saving</> : saved === "brand" ? <><Check className="h-3.5 w-3.5 mr-1.5" /> Saved!</> : "Save Branding"}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<SaveButton section="brand" data={{ name: settings.name, primaryColor: settings.primaryColor }} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── WhatsApp Connection Panel ───────────────────────────────────
|
||||
// ─── WhatsApp Connection Panel ───────────────────────────────
|
||||
|
||||
function WhatsAppPanel() {
|
||||
const [status, setStatus] = useState<string>("loading")
|
||||
const [qrImage, setQrImage] = useState<string | null>(null)
|
||||
const [phone, setPhone] = useState<string>("")
|
||||
const [pushName, setPushName] = useState<string>("")
|
||||
const [starting, setStarting] = useState(false)
|
||||
const [showQr, setShowQr] = useState(false) // only true after user clicks Connect
|
||||
const [phone, setPhone] = useState(""); const [pushName, setPushName] = useState("")
|
||||
const [starting, setStarting] = useState(false); const [showQr, setShowQr] = useState(false)
|
||||
|
||||
const checkStatus = useCallback(async () => {
|
||||
try {
|
||||
const res = await fetch("/api/whatsapp/qr")
|
||||
const data = await res.json()
|
||||
const res = await fetch("/api/whatsapp/qr"); const data = await res.json()
|
||||
setStatus(data.status)
|
||||
if (data.screenshot) setQrImage(data.screenshot)
|
||||
if (data.phone) setPhone(data.phone)
|
||||
if (data.pushName) setPushName(data.pushName)
|
||||
// Auto-show QR panel once connected (user paired successfully)
|
||||
if (data.status === "CONNECTED") setShowQr(false)
|
||||
} catch {
|
||||
setStatus("ERROR")
|
||||
}
|
||||
} catch { setStatus("ERROR") }
|
||||
}, [])
|
||||
|
||||
// On mount: just check if already connected. Don't start polling yet.
|
||||
useEffect(() => { checkStatus() }, [checkStatus])
|
||||
|
||||
// Poll only when user has clicked Connect and we're waiting for scan
|
||||
useEffect(() => {
|
||||
if (!showQr) return
|
||||
const interval = setInterval(checkStatus, 5000)
|
||||
return () => clearInterval(interval)
|
||||
}, [showQr, checkStatus])
|
||||
useEffect(() => { if (!showQr) return; const i = setInterval(checkStatus, 5000); return () => clearInterval(i) }, [showQr, checkStatus])
|
||||
|
||||
const startSession = async () => {
|
||||
setStarting(true)
|
||||
setShowQr(true)
|
||||
try {
|
||||
await fetch("/api/whatsapp/qr", { method: "POST" })
|
||||
await new Promise(r => setTimeout(r, 3000))
|
||||
await checkStatus()
|
||||
} catch { /* ignore */ }
|
||||
setStarting(true); setShowQr(true)
|
||||
try { await fetch("/api/whatsapp/qr", { method: "POST" }); await new Promise(r => setTimeout(r, 3000)); await checkStatus() } catch { /* */ }
|
||||
setStarting(false)
|
||||
}
|
||||
|
||||
if (status === "CONNECTED") {
|
||||
return (
|
||||
<Card className="border-[#25D366]/30 bg-[#25D366]/[0.02]">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<MessageCircle className="h-4 w-4 text-[#25D366]" /> WhatsApp
|
||||
<Badge variant="success" className="gap-1 ml-1"><Radio className="h-2.5 w-2.5" /> Connected</Badge>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-lg bg-[#25D366]/10 flex items-center justify-center">
|
||||
<Smartphone className="h-6 w-6 text-[#25D366]" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-sm">{pushName || "WhatsApp Business"}</p>
|
||||
<p className="text-xs text-muted-foreground">+{phone}</p>
|
||||
</div>
|
||||
<div className="ml-auto">
|
||||
<Wifi className="h-5 w-5 text-[#25D366]" />
|
||||
</div>
|
||||
<div className="bg-white border border-[#25D366]/30 p-6">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<h3 className="text-base font-bold text-[#111827]">WhatsApp</h3>
|
||||
<span className="text-[10px] font-bold px-1.5 py-0.5 bg-[#25D366]/10 text-[#25D366] flex items-center gap-1"><Radio className="h-2.5 w-2.5" /> Connected</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-10 h-10 bg-[#25D366]/10 flex items-center justify-center"><Smartphone className="h-5 w-5 text-[#25D366]" /></div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-[#111827]">{pushName || "WhatsApp"}</p>
|
||||
<p className="text-xs text-gray-500">+{phone}</p>
|
||||
</div>
|
||||
<div className="mt-4 pt-3 border-t border-[#25D366]/10 grid grid-cols-3 gap-3">
|
||||
<div className="text-center">
|
||||
<p className="text-[10px] text-muted-foreground">Auto-Sends</p>
|
||||
<p className="text-xs font-medium">Receipts</p>
|
||||
<Wifi className="h-5 w-5 text-[#25D366] ml-auto" />
|
||||
</div>
|
||||
<div className="mt-4 pt-3 border-t border-[#25D366]/10 grid grid-cols-3 gap-3">
|
||||
{[
|
||||
{ label: "Receipts", desc: "Auto-sends when someone pledges" },
|
||||
{ label: "Reminders", desc: "4-step reminder sequence" },
|
||||
{ label: "Chatbot", desc: "Donors reply PAID, HELP, etc." },
|
||||
].map(f => (
|
||||
<div key={f.label} className="text-center">
|
||||
<p className="text-xs font-bold text-[#111827]">{f.label}</p>
|
||||
<p className="text-[9px] text-gray-500 mt-0.5">{f.desc}</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="text-[10px] text-muted-foreground">Reminders</p>
|
||||
<p className="text-xs font-medium">4-step</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="text-[10px] text-muted-foreground">Chatbot</p>
|
||||
<p className="text-xs font-medium">PAID / HELP</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (status === "SCAN_QR_CODE" && showQr) {
|
||||
return (
|
||||
<Card className="border-warm-amber/30">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<MessageCircle className="h-4 w-4 text-[#25D366]" /> WhatsApp
|
||||
<Badge variant="warning" className="gap-1 ml-1"><QrCode className="h-2.5 w-2.5" /> Scan QR</Badge>
|
||||
</CardTitle>
|
||||
<CardDescription className="text-xs">Open WhatsApp on your phone → Settings → Linked Devices → Link a Device</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
{qrImage ? (
|
||||
<div className="relative">
|
||||
{/* Crop to QR area: the screenshot shows full WhatsApp web page.
|
||||
QR code is roughly in center. We use overflow hidden + object positioning. */}
|
||||
<div className="w-72 h-72 rounded-lg border-2 border-[#25D366]/20 overflow-hidden bg-white">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={qrImage}
|
||||
alt="WhatsApp QR Code"
|
||||
className="w-[200%] h-auto max-w-none"
|
||||
style={{ marginLeft: "-30%", marginTop: "-35%" }}
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute -bottom-2 -right-2 w-8 h-8 rounded-full bg-[#25D366] flex items-center justify-center shadow-lg">
|
||||
<MessageCircle className="h-4 w-4 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-72 h-72 rounded-lg border-2 border-dashed border-muted flex items-center justify-center">
|
||||
<Loader2 className="h-8 w-8 text-muted-foreground animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
<div className="text-center space-y-1">
|
||||
<p className="text-sm font-medium">Scan with WhatsApp</p>
|
||||
<p className="text-xs text-muted-foreground">Open WhatsApp → Settings → Linked Devices → Link a Device</p>
|
||||
<p className="text-xs text-muted-foreground">Auto-refreshes every 5 seconds</p>
|
||||
<div className="bg-white border border-[#F59E0B]/30 p-6">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<h3 className="text-base font-bold text-[#111827]">WhatsApp</h3>
|
||||
<span className="text-[10px] font-bold px-1.5 py-0.5 bg-[#F59E0B]/10 text-[#F59E0B] flex items-center gap-1"><QrCode className="h-2.5 w-2.5" /> Scan QR code</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
{qrImage ? (
|
||||
<div className="w-64 h-64 border-2 border-[#25D366]/20 overflow-hidden bg-white">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img src={qrImage} alt="WhatsApp QR Code" className="w-[200%] h-auto max-w-none" style={{ marginLeft: "-30%", marginTop: "-35%" }} />
|
||||
</div>
|
||||
<Button variant="outline" size="sm" onClick={checkStatus} className="gap-1.5">
|
||||
<RefreshCw className="h-3 w-3" /> Refresh
|
||||
</Button>
|
||||
) : (
|
||||
<div className="w-64 h-64 border-2 border-dashed border-gray-200 flex items-center justify-center">
|
||||
<Loader2 className="h-6 w-6 text-gray-400 animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
<div className="text-center space-y-1">
|
||||
<p className="text-sm font-bold text-[#111827]">Scan with your phone</p>
|
||||
<p className="text-xs text-gray-500">Open WhatsApp → Settings → Linked Devices → Link a Device</p>
|
||||
<p className="text-[10px] text-gray-400">Auto-refreshes every 5 seconds</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<button onClick={checkStatus} className="border border-gray-200 px-3 py-1.5 text-xs font-semibold text-gray-600 hover:bg-gray-50 flex items-center gap-1.5">
|
||||
<RefreshCw className="h-3 w-3" /> Refresh
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// NO_SESSION or STARTING or ERROR
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<MessageCircle className="h-4 w-4 text-muted-foreground" /> WhatsApp
|
||||
<Badge variant="secondary" className="gap-1 ml-1"><WifiOff className="h-2.5 w-2.5" /> Offline</Badge>
|
||||
</CardTitle>
|
||||
<CardDescription className="text-xs">
|
||||
Connect WhatsApp to auto-send pledge receipts, payment reminders, and enable a chatbot for donors.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="rounded-lg bg-muted/50 p-4 space-y-3">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-10 h-10 rounded-lg bg-[#25D366]/10 flex items-center justify-center flex-shrink-0">
|
||||
<Smartphone className="h-5 w-5 text-[#25D366]" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium">Connect your WhatsApp number</p>
|
||||
<ul className="text-xs text-muted-foreground mt-1 space-y-0.5">
|
||||
<li>📨 Pledge receipts with bank transfer details</li>
|
||||
<li>⏰ Automatic reminders (2d before → due day → 3d after → 10d final)</li>
|
||||
<li>🤖 Donor chatbot: reply PAID, HELP, CANCEL, STATUS</li>
|
||||
<li>📊 Volunteer notifications when someone pledges at their table</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<Button onClick={startSession} disabled={starting} className="w-full bg-[#25D366] hover:bg-[#25D366]/90 text-white">
|
||||
{starting ? <><Loader2 className="h-4 w-4 mr-2 animate-spin" /> Starting session...</> : <><MessageCircle className="h-4 w-4 mr-2" /> Connect WhatsApp</>}
|
||||
</Button>
|
||||
<p className="text-[10px] text-muted-foreground text-center">
|
||||
Uses WAHA (WhatsApp HTTP API) · No WhatsApp Business API required · Free tier
|
||||
</p>
|
||||
<div className="bg-white border border-gray-200 p-6">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<h3 className="text-base font-bold text-[#111827]">WhatsApp</h3>
|
||||
<span className="text-[10px] font-bold px-1.5 py-0.5 bg-gray-100 text-gray-500 flex items-center gap-1"><WifiOff className="h-2.5 w-2.5" /> Not connected</span>
|
||||
</div>
|
||||
<div className="border-l-2 border-[#25D366] pl-4 space-y-2">
|
||||
<p className="text-sm font-medium text-[#111827]">Connect your WhatsApp number</p>
|
||||
<div className="text-xs text-gray-500 space-y-0.5">
|
||||
<p>When you connect, donors automatically receive:</p>
|
||||
<p className="font-medium text-gray-600">• Pledge receipts with bank details</p>
|
||||
<p className="font-medium text-gray-600">• Payment reminders on a 4-step schedule</p>
|
||||
<p className="font-medium text-gray-600">• A chatbot (they reply PAID, HELP, or CANCEL)</p>
|
||||
<p className="font-medium text-gray-600">• Volunteer notifications on each pledge</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<button onClick={startSession} disabled={starting} className="mt-4 w-full bg-[#25D366] px-4 py-2.5 text-sm font-bold text-white hover:bg-[#25D366]/90 disabled:opacity-50 transition-colors flex items-center justify-center gap-2">
|
||||
{starting ? <><Loader2 className="h-4 w-4 animate-spin" /> Starting...</> : <><MessageCircle className="h-4 w-4" /> Connect WhatsApp</>}
|
||||
</button>
|
||||
<p className="text-[10px] text-gray-400 text-center mt-2">
|
||||
Free — no WhatsApp Business API required
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user