waha: QR pairing in dashboard, whatsapp/qr API, settings overhaul
- /api/whatsapp/qr: GET returns session status + QR image, POST starts/restarts session - Settings page: WhatsApp panel shows QR code for pairing, connected status with phone info - WAHA session started with webhook pointing to /api/whatsapp/webhook - WAHA_API_URL updated to external https://waha.quikcue.com (cross-stack DNS doesn't work) - Auto-polls every 5 seconds during QR scan state - Shows connected state with phone number, push name, feature summary
This commit is contained in:
123
pledge-now-pay-later/src/app/api/whatsapp/qr/route.ts
Normal file
123
pledge-now-pay-later/src/app/api/whatsapp/qr/route.ts
Normal file
@@ -0,0 +1,123 @@
|
||||
import { NextResponse } from "next/server"
|
||||
|
||||
const WAHA_URL = process.env.WAHA_API_URL || "https://waha.quikcue.com"
|
||||
const WAHA_KEY = process.env.WAHA_API_KEY || "qc-waha-api-7Fp3nR9xYm2K"
|
||||
const WAHA_SESSION = process.env.WAHA_SESSION || "default"
|
||||
|
||||
/**
|
||||
* GET /api/whatsapp/qr
|
||||
* Returns the WAHA QR code screenshot as PNG for WhatsApp pairing.
|
||||
* Also returns session status.
|
||||
*/
|
||||
export async function GET() {
|
||||
try {
|
||||
// First check session status
|
||||
const sessRes = await fetch(`${WAHA_URL}/api/sessions`, {
|
||||
headers: { "X-Api-Key": WAHA_KEY },
|
||||
signal: AbortSignal.timeout(5000),
|
||||
})
|
||||
const sessions = await sessRes.json()
|
||||
|
||||
const session = Array.isArray(sessions)
|
||||
? sessions.find((s: { name: string }) => s.name === WAHA_SESSION)
|
||||
: null
|
||||
|
||||
if (!session) {
|
||||
return NextResponse.json({
|
||||
status: "NO_SESSION",
|
||||
message: "No WAHA session exists. Start one first.",
|
||||
})
|
||||
}
|
||||
|
||||
if (session.status === "WORKING") {
|
||||
const me = session.me || {}
|
||||
return NextResponse.json({
|
||||
status: "CONNECTED",
|
||||
phone: me.id?.replace("@c.us", "") || "unknown",
|
||||
pushName: me.pushname || "",
|
||||
})
|
||||
}
|
||||
|
||||
if (session.status === "SCAN_QR_CODE") {
|
||||
// Get screenshot
|
||||
const qrRes = await fetch(`${WAHA_URL}/api/screenshot?session=${WAHA_SESSION}`, {
|
||||
headers: { "X-Api-Key": WAHA_KEY },
|
||||
signal: AbortSignal.timeout(10000),
|
||||
})
|
||||
|
||||
if (!qrRes.ok) {
|
||||
return NextResponse.json({ status: "SCAN_QR_CODE", error: "Failed to get QR" })
|
||||
}
|
||||
|
||||
const buffer = await qrRes.arrayBuffer()
|
||||
const base64 = Buffer.from(buffer).toString("base64")
|
||||
|
||||
return NextResponse.json({
|
||||
status: "SCAN_QR_CODE",
|
||||
qrImage: `data:image/png;base64,${base64}`,
|
||||
message: "Scan this QR code with WhatsApp on your phone",
|
||||
})
|
||||
}
|
||||
|
||||
return NextResponse.json({
|
||||
status: session.status,
|
||||
message: `Session is ${session.status}`,
|
||||
})
|
||||
} catch (error) {
|
||||
console.error("WhatsApp QR error:", error)
|
||||
return NextResponse.json({ status: "ERROR", error: String(error) })
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* POST /api/whatsapp/qr - Start or restart a session
|
||||
*/
|
||||
export async function POST() {
|
||||
try {
|
||||
// Check if session exists
|
||||
const sessRes = await fetch(`${WAHA_URL}/api/sessions`, {
|
||||
headers: { "X-Api-Key": WAHA_KEY },
|
||||
signal: AbortSignal.timeout(5000),
|
||||
})
|
||||
const sessions = await sessRes.json()
|
||||
const existing = Array.isArray(sessions)
|
||||
? sessions.find((s: { name: string }) => s.name === WAHA_SESSION)
|
||||
: null
|
||||
|
||||
if (existing) {
|
||||
// Stop and restart
|
||||
await fetch(`${WAHA_URL}/api/sessions/stop`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json", "X-Api-Key": WAHA_KEY },
|
||||
body: JSON.stringify({ name: WAHA_SESSION }),
|
||||
signal: AbortSignal.timeout(10000),
|
||||
})
|
||||
// Small delay
|
||||
await new Promise(r => setTimeout(r, 2000))
|
||||
}
|
||||
|
||||
// Start session with webhook
|
||||
const startRes = await fetch(`${WAHA_URL}/api/sessions/start`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json", "X-Api-Key": WAHA_KEY },
|
||||
body: JSON.stringify({
|
||||
name: WAHA_SESSION,
|
||||
config: {
|
||||
webhooks: [
|
||||
{
|
||||
url: `${process.env.BASE_URL || "https://pledge.quikcue.com"}/api/whatsapp/webhook`,
|
||||
events: ["message"],
|
||||
},
|
||||
],
|
||||
},
|
||||
}),
|
||||
signal: AbortSignal.timeout(15000),
|
||||
})
|
||||
|
||||
const result = await startRes.json()
|
||||
return NextResponse.json({ success: true, status: result.status || "STARTING" })
|
||||
} catch (error) {
|
||||
console.error("WhatsApp session start error:", error)
|
||||
return NextResponse.json({ success: false, error: String(error) })
|
||||
}
|
||||
}
|
||||
@@ -1,12 +1,15 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
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 { Building2, CreditCard, Palette, Check, Loader2, AlertCircle, MessageCircle, Radio } from "lucide-react"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import {
|
||||
Building2, CreditCard, Palette, Check, Loader2, AlertCircle,
|
||||
MessageCircle, Radio, QrCode, RefreshCw, Smartphone, Wifi, WifiOff
|
||||
} from "lucide-react"
|
||||
|
||||
interface OrgSettings {
|
||||
name: string
|
||||
@@ -30,9 +33,7 @@ export default function SettingsPage() {
|
||||
useEffect(() => {
|
||||
fetch("/api/settings", { headers: { "x-org-id": "demo" } })
|
||||
.then((r) => r.json())
|
||||
.then((data) => {
|
||||
if (data.name) setSettings(data)
|
||||
})
|
||||
.then((data) => { if (data.name) setSettings(data) })
|
||||
.catch(() => setError("Failed to load settings"))
|
||||
.finally(() => setLoading(false))
|
||||
}, [])
|
||||
@@ -46,105 +47,47 @@ export default function SettingsPage() {
|
||||
headers: { "Content-Type": "application/json", "x-org-id": "demo" },
|
||||
body: JSON.stringify(data),
|
||||
})
|
||||
if (res.ok) {
|
||||
setSaved(section)
|
||||
setTimeout(() => setSaved(null), 2000)
|
||||
} else {
|
||||
setError("Failed to save")
|
||||
}
|
||||
} catch {
|
||||
setError("Failed to save")
|
||||
}
|
||||
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 (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 (!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>
|
||||
)
|
||||
}
|
||||
|
||||
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)
|
||||
|
||||
return (
|
||||
<div className="space-y-6 max-w-2xl">
|
||||
<div>
|
||||
<h1 className="text-3xl font-extrabold text-gray-900">Settings</h1>
|
||||
<p className="text-muted-foreground mt-1">Configure your organisation's payment details</p>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="rounded-xl bg-danger-red/10 border border-danger-red/20 p-3 text-sm text-danger-red">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
{error && <div className="rounded-xl bg-danger-red/10 border border-danger-red/20 p-3 text-sm text-danger-red">{error}</div>}
|
||||
|
||||
{/* WhatsApp — MOST IMPORTANT, first */}
|
||||
<WhatsAppPanel />
|
||||
|
||||
{/* Bank Details */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg flex items-center gap-2">
|
||||
<Building2 className="h-5 w-5" /> Bank Account Details
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
These details are shown to donors when they choose bank transfer.
|
||||
</CardDescription>
|
||||
<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-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Bank Name</Label>
|
||||
<Input value={settings.bankName} onChange={(e) => update("bankName", e.target.value)} />
|
||||
<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="space-y-2">
|
||||
<Label>Account Name</Label>
|
||||
<Input value={settings.bankAccountName} onChange={(e) => update("bankAccountName", e.target.value)} />
|
||||
<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>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Sort Code</Label>
|
||||
<Input value={settings.bankSortCode} onChange={(e) => update("bankSortCode", e.target.value)} placeholder="XX-XX-XX" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Account Number</Label>
|
||||
<Input value={settings.bankAccountNo} onChange={(e) => update("bankAccountNo", e.target.value)} placeholder="XXXXXXXX" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Reference Prefix</Label>
|
||||
<Input value={settings.refPrefix} onChange={(e) => update("refPrefix", e.target.value)} maxLength={4} />
|
||||
<p className="text-xs text-muted-foreground">Max 4 chars. Used in payment references, e.g. {settings.refPrefix}-XXXX-50</p>
|
||||
</div>
|
||||
<Button
|
||||
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-4 w-4 mr-2 animate-spin" /> Saving...</>
|
||||
) : saved === "bank" ? (
|
||||
<><Check className="h-4 w-4 mr-2" /> Saved!</>
|
||||
) : (
|
||||
"Save Bank Details"
|
||||
)}
|
||||
<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>
|
||||
@@ -152,116 +95,40 @@ export default function SettingsPage() {
|
||||
{/* GoCardless */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg flex items-center gap-2">
|
||||
<CreditCard className="h-5 w-5" /> GoCardless (Direct Debit)
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Connect GoCardless to enable Direct Debit collection.
|
||||
</CardDescription>
|
||||
<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 className="space-y-2">
|
||||
<Label>Access Token</Label>
|
||||
<Input
|
||||
type="password"
|
||||
value={settings.gcAccessToken}
|
||||
onChange={(e) => update("gcAccessToken", e.target.value)}
|
||||
placeholder="sandbox_xxxxx or live_xxxxx"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Environment</Label>
|
||||
<div className="flex gap-3">
|
||||
<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-4 py-2 rounded-xl text-sm 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 hover:border-gray-300"
|
||||
}`}
|
||||
>
|
||||
{env.charAt(0).toUpperCase() + env.slice(1)}
|
||||
{env === "live" && settings.gcEnvironment === "live" && " ⚠️"}
|
||||
<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>
|
||||
{settings.gcEnvironment === "live" && (
|
||||
<p className="text-xs text-danger-red font-medium">⚠️ Live mode will create real Direct Debit mandates</p>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => save("gc", {
|
||||
gcAccessToken: settings.gcAccessToken,
|
||||
gcEnvironment: settings.gcEnvironment,
|
||||
})}
|
||||
disabled={saving === "gc"}
|
||||
>
|
||||
{saving === "gc" ? (
|
||||
<><Loader2 className="h-4 w-4 mr-2 animate-spin" /> Saving...</>
|
||||
) : saved === "gc" ? (
|
||||
<><Check className="h-4 w-4 mr-2" /> Connected!</>
|
||||
) : (
|
||||
"Save GoCardless Settings"
|
||||
)}
|
||||
<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>
|
||||
|
||||
{/* WhatsApp (WAHA) */}
|
||||
<WhatsAppStatus />
|
||||
|
||||
{/* Branding */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg flex items-center gap-2">
|
||||
<Palette className="h-5 w-5" /> Branding
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Customise the look of your pledge pages.
|
||||
</CardDescription>
|
||||
<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 className="space-y-2">
|
||||
<Label>Organisation Name</Label>
|
||||
<Input
|
||||
value={settings.name}
|
||||
onChange={(e) => update("name", e.target.value)}
|
||||
/>
|
||||
<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>
|
||||
<div className="space-y-2">
|
||||
<Label>Primary Colour</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
type="color"
|
||||
value={settings.primaryColor}
|
||||
onChange={(e) => update("primaryColor", e.target.value)}
|
||||
className="w-14 h-11 p-1"
|
||||
/>
|
||||
<Input
|
||||
value={settings.primaryColor}
|
||||
onChange={(e) => update("primaryColor", e.target.value)}
|
||||
className="flex-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => save("brand", {
|
||||
name: settings.name,
|
||||
primaryColor: settings.primaryColor,
|
||||
})}
|
||||
disabled={saving === "brand"}
|
||||
>
|
||||
{saving === "brand" ? (
|
||||
<><Loader2 className="h-4 w-4 mr-2 animate-spin" /> Saving...</>
|
||||
) : saved === "brand" ? (
|
||||
<><Check className="h-4 w-4 mr-2" /> Saved!</>
|
||||
) : (
|
||||
"Save Branding"
|
||||
)}
|
||||
<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>
|
||||
@@ -269,58 +136,160 @@ export default function SettingsPage() {
|
||||
)
|
||||
}
|
||||
|
||||
function WhatsAppStatus() {
|
||||
const [status, setStatus] = useState<{ connected: boolean; session: string; version?: string } | null>(null)
|
||||
const [checking, setChecking] = useState(true)
|
||||
// ─── WhatsApp Connection Panel ───────────────────────────────────
|
||||
|
||||
useEffect(() => {
|
||||
fetch("/api/whatsapp/send")
|
||||
.then(r => r.json())
|
||||
.then(data => setStatus(data))
|
||||
.catch(() => setStatus({ connected: false, session: "default" }))
|
||||
.finally(() => setChecking(false))
|
||||
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 checkStatus = useCallback(async () => {
|
||||
try {
|
||||
const res = await fetch("/api/whatsapp/qr")
|
||||
const data = await res.json()
|
||||
setStatus(data.status)
|
||||
if (data.qrImage) setQrImage(data.qrImage)
|
||||
if (data.phone) setPhone(data.phone)
|
||||
if (data.pushName) setPushName(data.pushName)
|
||||
} catch {
|
||||
setStatus("ERROR")
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
checkStatus()
|
||||
// Poll every 5 seconds when waiting for QR scan
|
||||
const interval = setInterval(checkStatus, 5000)
|
||||
return () => clearInterval(interval)
|
||||
}, [checkStatus])
|
||||
|
||||
const startSession = async () => {
|
||||
setStarting(true)
|
||||
try {
|
||||
await fetch("/api/whatsapp/qr", { method: "POST" })
|
||||
// Wait a bit for session to initialize
|
||||
await new Promise(r => setTimeout(r, 3000))
|
||||
await checkStatus()
|
||||
} catch { /* ignore */ }
|
||||
setStarting(false)
|
||||
}
|
||||
|
||||
if (status === "CONNECTED") {
|
||||
return (
|
||||
<Card className={status?.connected ? "border-[#25D366]/30" : ""}>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg flex items-center gap-2">
|
||||
<MessageCircle className="h-5 w-5 text-[#25D366]" /> WhatsApp Integration
|
||||
{checking ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
|
||||
) : status?.connected ? (
|
||||
<Badge variant="success" className="gap-1"><Radio className="h-3 w-3" /> Connected</Badge>
|
||||
) : (
|
||||
<Badge variant="warning">Not Connected</Badge>
|
||||
)}
|
||||
<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>
|
||||
<CardDescription>
|
||||
Send pledge receipts, payment reminders, and bank details via WhatsApp.
|
||||
Donors can reply PAID, HELP, or CANCEL.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{status?.connected ? (
|
||||
<div className="rounded-xl bg-[#25D366]/5 border border-[#25D366]/20 p-4 space-y-2">
|
||||
<p className="text-sm font-medium text-[#25D366]">✅ WhatsApp is active</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Session: {status.session} · WAHA {status.version || ""}
|
||||
</p>
|
||||
<div className="text-xs text-muted-foreground space-y-1 mt-2 pt-2 border-t border-[#25D366]/10">
|
||||
<p><strong>Auto-sends:</strong> Pledge receipts with bank details</p>
|
||||
<p><strong>Reminders:</strong> Gentle → Nudge → Urgent → Final</p>
|
||||
<p><strong>Chatbot:</strong> Donors reply PAID, HELP, CANCEL, STATUS</p>
|
||||
<CardContent>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-full 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>
|
||||
) : (
|
||||
<div className="rounded-xl bg-warm-amber/5 border border-warm-amber/20 p-4 space-y-2">
|
||||
<p className="text-sm font-medium text-warm-amber">WhatsApp not connected</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Connect a WhatsApp number in WAHA ({`waha.quikcue.com`}) to enable automatic messaging.
|
||||
The app works without it — messages will be skipped.
|
||||
</p>
|
||||
<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>
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
||||
if (status === "SCAN_QR_CODE") {
|
||||
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">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img src={qrImage} alt="WhatsApp QR Code" className="w-64 h-64 rounded-xl border-2 border-[#25D366]/20" />
|
||||
<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-64 h-64 rounded-xl 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">QR refreshes automatically every 5 seconds</p>
|
||||
</div>
|
||||
<Button variant="outline" size="sm" onClick={checkStatus} className="gap-1.5">
|
||||
<RefreshCw className="h-3 w-3" /> Refresh QR
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
// 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-xl bg-muted/50 p-4 space-y-3">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-10 h-10 rounded-full 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>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user