joshua
1f88ce5e0e
Estimates and snapshots the Yoco card-processing fee (always church-borne) on every card payment, lets the admin configure in-person/online fee % per plan in Settings -> Payments, and surfaces the fee alongside gross revenue across the Finance/Profit reports, Master Orders, Revenue Detailed, and the full cashup reconciliation flow (close-out screen, Cashup report, and audit trail) so payout figures match what actually lands in the bank.
580 lines
25 KiB
TypeScript
580 lines
25 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useRef, useState } from "react";
|
|
import { useAuth } from "@/hooks/useAuth";
|
|
import { useRouter } from "next/navigation";
|
|
import { apiFetch, API_BASE, resolveToApiOrigin } from "@/lib/api";
|
|
import { useSiteSettings } from "@/contexts/SiteSettingsContext";
|
|
import { useDismissingState } from "@/hooks/useDismissingState";
|
|
|
|
type TabId = "organisation" | "branding" | "notifications" | "email" | "legal" | "payments";
|
|
|
|
const TABS: { id: TabId; label: string }[] = [
|
|
{ id: "organisation", label: "Organisation" },
|
|
{ id: "branding", label: "Branding" },
|
|
{ id: "notifications", label: "Notifications" },
|
|
{ id: "email", label: "Email" },
|
|
{ id: "legal", label: "Legal" },
|
|
{ id: "payments", label: "Payments" },
|
|
];
|
|
|
|
// Default fee % pre-fill per Yoco plan — the "Up to R50k / Debit" rate, since debit is the
|
|
// most common consumer card type in SA and small churches likely stay in the lowest volume
|
|
// tier. Purely a UI convenience for the plan <select>; the actual % fields stay freely
|
|
// editable afterward so the admin can match their real blended rate.
|
|
const YOCO_PLAN_DEFAULTS: Record<"core" | "plus" | "pro", { inPerson: string; online: string }> = {
|
|
core: { inPerson: "2.30", online: "2.95" },
|
|
plus: { inPerson: "2.10", online: "2.75" },
|
|
pro: { inPerson: "1.95", online: "2.55" },
|
|
};
|
|
|
|
const inputCls =
|
|
"w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400";
|
|
|
|
function Field({
|
|
label, hint, required, children,
|
|
}: {
|
|
label: string; hint?: string; required?: boolean; children: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
{label} {required && <span className="text-red-500">*</span>}
|
|
</label>
|
|
{children}
|
|
{hint && <p className="text-xs text-gray-400 mt-1">{hint}</p>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function SaveBar({
|
|
saving, onSave, result,
|
|
}: {
|
|
saving: boolean;
|
|
onSave: () => void;
|
|
result: { ok: boolean; message: string } | null;
|
|
}) {
|
|
return (
|
|
<div className="flex items-center justify-between pt-4 border-t mt-6 flex-wrap gap-3">
|
|
{result ? (
|
|
<span className={`text-sm flex items-center gap-1.5 ${result.ok ? "text-green-600" : "text-red-600"}`}>
|
|
{result.ok ? "✓" : "✗"} {result.message}
|
|
</span>
|
|
) : (
|
|
<span />
|
|
)}
|
|
<button
|
|
type="button"
|
|
disabled={saving}
|
|
onClick={onSave}
|
|
className="px-6 py-2 bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 text-white rounded-lg text-sm font-medium"
|
|
>
|
|
{saving ? "Saving…" : "Save"}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function SiteSettingsPage() {
|
|
const { token } = useAuth();
|
|
const router = useRouter();
|
|
const { reload: reloadSettings } = useSiteSettings();
|
|
|
|
const [activeTab, setActiveTab] = useState<TabId>("organisation");
|
|
const [loadingInitial, setLoadingInitial] = useState(true);
|
|
|
|
// Per-tab save state
|
|
const [saving, setSaving] = useState(false);
|
|
const [result, setResult] = useDismissingState<{ ok: boolean; message: string } | null>(null);
|
|
|
|
// ── Organisation ──
|
|
const [orgName, setOrgName] = useState("");
|
|
const [orgTagline, setOrgTagline] = useState("");
|
|
const [orgEmail, setOrgEmail] = useState("");
|
|
const [orgPhone, setOrgPhone] = useState("");
|
|
const [orgAddress, setOrgAddress] = useState("");
|
|
const [appBaseUrl, setAppBaseUrl] = useState("");
|
|
|
|
// ── Branding ──
|
|
const [accentColor, setAccentColor] = useState("#2563eb");
|
|
const [logoUrl, setLogoUrl] = useState("");
|
|
const [logoFile, setLogoFile] = useState<File | null>(null);
|
|
const [logoPreview, setLogoPreview] = useState<string | null>(null);
|
|
const fileRef = useRef<HTMLInputElement>(null);
|
|
|
|
// ── Notifications ──
|
|
const [notifEmails, setNotifEmails] = useState("");
|
|
|
|
// ── SMTP ──
|
|
const [smtpHost, setSmtpHost] = useState("");
|
|
const [smtpPort, setSmtpPort] = useState("587");
|
|
const [smtpSecure, setSmtpSecure] = useState(false);
|
|
const [smtpFrom, setSmtpFrom] = useState("");
|
|
const [smtpUser, setSmtpUser] = useState("");
|
|
const [smtpPass, setSmtpPass] = useState("");
|
|
const [smtpPassSet, setSmtpPassSet] = useState(false);
|
|
const [smtpTesting, setSmtpTesting] = useState(false);
|
|
const [smtpTestResult, setSmtpTestResult] = useDismissingState<{ ok: boolean; message: string; raw?: string } | null>(null);
|
|
|
|
// ── Legal ──
|
|
const [legalOperatorName, setLegalOperatorName] = useState("");
|
|
const [legalIoName, setLegalIoName] = useState("");
|
|
const [legalIoEmail, setLegalIoEmail] = useState("");
|
|
const [legalWebsiteUrl, setLegalWebsiteUrl] = useState("");
|
|
const [legalEffectiveDate, setLegalEffectiveDate] = useState("");
|
|
|
|
// ── Payments (Yoco fees) ──
|
|
const [yocoPlan, setYocoPlan] = useState<"core" | "plus" | "pro">("core");
|
|
const [feeInPersonPct, setFeeInPersonPct] = useState("");
|
|
const [feeOnlinePct, setFeeOnlinePct] = useState("");
|
|
|
|
// ── Load all settings once ────────────────────────────────────────────────
|
|
useEffect(() => {
|
|
if (!token) return;
|
|
apiFetch<Record<string, string>>("/api/settings/all", { authToken: token })
|
|
.then((s) => {
|
|
setOrgName(s.org_name || "");
|
|
setOrgTagline(s.org_tagline || "");
|
|
setOrgEmail(s.org_email || "");
|
|
setOrgPhone(s.org_phone || "");
|
|
setOrgAddress(s.org_address || "");
|
|
setAppBaseUrl(s.app_base_url || "");
|
|
setAccentColor(s.accent_color || "#2563eb");
|
|
setLogoUrl(s.logo_url || "");
|
|
setNotifEmails(s.reg_notification_emails || "");
|
|
setSmtpHost(s.smtp_host || "");
|
|
setSmtpPort(s.smtp_port || "587");
|
|
setSmtpSecure((s.smtp_secure || "").toLowerCase() === "true");
|
|
setSmtpFrom(s.smtp_from || "");
|
|
setSmtpUser(s.smtp_user || "");
|
|
setSmtpPassSet(!!s.smtp_pass && s.smtp_pass !== "");
|
|
setSmtpPass("");
|
|
setLegalOperatorName(s.legal_operator_name || "");
|
|
setLegalIoName(s.legal_io_name || "");
|
|
setLegalIoEmail(s.legal_io_email || "");
|
|
setLegalWebsiteUrl(s.legal_website_url || "");
|
|
setLegalEffectiveDate(s.legal_effective_date || "");
|
|
setYocoPlan((s.yoco_plan as "core" | "plus" | "pro") || "core");
|
|
setFeeInPersonPct(s.yoco_fee_in_person_pct || "");
|
|
setFeeOnlinePct(s.yoco_fee_online_pct || "");
|
|
})
|
|
.catch((e: any) => setResult({ ok: false, message: e?.message || "Failed to load settings" }))
|
|
.finally(() => setLoadingInitial(false));
|
|
}, [token]);
|
|
|
|
// Clear result when switching tabs
|
|
const switchTab = (id: TabId) => { setActiveTab(id); setResult(null); };
|
|
|
|
// ── Save helpers ──────────────────────────────────────────────────────────
|
|
const save = async (updates: Record<string, string>) => {
|
|
if (!token) return;
|
|
setSaving(true);
|
|
setResult(null);
|
|
try {
|
|
await apiFetch("/api/settings", { method: "PUT", authToken: token, body: updates });
|
|
setResult({ ok: true, message: "Saved." });
|
|
reloadSettings();
|
|
} catch (e: any) {
|
|
setResult({ ok: false, message: e?.message || "Failed to save" });
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const saveOrganisation = () => save({
|
|
org_name: orgName.trim(),
|
|
org_tagline: orgTagline.trim(),
|
|
org_email: orgEmail.trim(),
|
|
org_phone: orgPhone.trim(),
|
|
org_address: orgAddress.trim(),
|
|
app_base_url: appBaseUrl.trim(),
|
|
});
|
|
|
|
const saveBranding = async () => {
|
|
if (!token) return;
|
|
setSaving(true);
|
|
setResult(null);
|
|
try {
|
|
let finalLogoUrl = logoUrl;
|
|
if (logoFile) {
|
|
const fd = new FormData();
|
|
fd.append("image", logoFile);
|
|
const res = await fetch(`${API_BASE}/api/uploads/logo`, {
|
|
method: "POST",
|
|
headers: { Authorization: `Bearer ${token}` },
|
|
body: fd,
|
|
});
|
|
if (!res.ok) throw new Error("Logo upload failed");
|
|
const data = await res.json();
|
|
finalLogoUrl = data.url || logoUrl;
|
|
}
|
|
await apiFetch("/api/settings", {
|
|
method: "PUT", authToken: token,
|
|
body: { accent_color: accentColor, logo_url: finalLogoUrl },
|
|
});
|
|
setLogoUrl(finalLogoUrl);
|
|
setLogoFile(null);
|
|
setLogoPreview(null);
|
|
setResult({ ok: true, message: "Saved." });
|
|
reloadSettings();
|
|
} catch (e: any) {
|
|
setResult({ ok: false, message: e?.message || "Failed to save" });
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const saveNotifications = () => save({ reg_notification_emails: notifEmails.trim() });
|
|
|
|
const saveSmtp = async () => {
|
|
if (!token) return;
|
|
setSaving(true);
|
|
setResult(null);
|
|
try {
|
|
const updates: Record<string, string> = {
|
|
smtp_host: smtpHost.trim(),
|
|
smtp_port: smtpPort.trim(),
|
|
smtp_secure: smtpSecure ? "true" : "false",
|
|
smtp_from: smtpFrom.trim(),
|
|
smtp_user: smtpUser.trim(),
|
|
};
|
|
if (smtpPass.trim() !== "") updates.smtp_pass = smtpPass.trim();
|
|
await apiFetch("/api/settings", { method: "PUT", authToken: token, body: updates });
|
|
if (smtpPass.trim() !== "") { setSmtpPassSet(true); setSmtpPass(""); }
|
|
setResult({ ok: true, message: "Saved." });
|
|
reloadSettings();
|
|
} catch (e: any) {
|
|
setResult({ ok: false, message: e?.message || "Failed to save" });
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const saveLegal = () => save({
|
|
legal_operator_name: legalOperatorName.trim(),
|
|
legal_io_name: legalIoName.trim(),
|
|
legal_io_email: legalIoEmail.trim(),
|
|
legal_website_url: legalWebsiteUrl.trim(),
|
|
legal_effective_date: legalEffectiveDate.trim(),
|
|
});
|
|
|
|
const handleYocoPlanChange = (plan: "core" | "plus" | "pro") => {
|
|
setYocoPlan(plan);
|
|
const defaults = YOCO_PLAN_DEFAULTS[plan];
|
|
setFeeInPersonPct(defaults.inPerson);
|
|
setFeeOnlinePct(defaults.online);
|
|
};
|
|
|
|
const savePayments = () => save({
|
|
yoco_plan: yocoPlan,
|
|
yoco_fee_in_person_pct: feeInPersonPct.trim(),
|
|
yoco_fee_online_pct: feeOnlinePct.trim(),
|
|
});
|
|
|
|
const handleTestSmtp = async () => {
|
|
if (!token) return;
|
|
setSmtpTesting(true);
|
|
setSmtpTestResult(null);
|
|
try {
|
|
await apiFetch("/api/settings/test-smtp", {
|
|
method: "POST",
|
|
authToken: token,
|
|
body: {
|
|
host: smtpHost.trim(),
|
|
port: smtpPort.trim(),
|
|
secure: smtpSecure,
|
|
from: smtpFrom.trim(),
|
|
user: smtpUser.trim(),
|
|
pass: smtpPass.trim() !== "" ? smtpPass.trim() : "••••••••",
|
|
},
|
|
});
|
|
setSmtpTestResult({ ok: true, message: "Connection successful — check your inbox for a test email." });
|
|
} catch (e: any) {
|
|
setSmtpTestResult({ ok: false, message: e?.message || "SMTP test failed", raw: e?.data?.raw });
|
|
} finally {
|
|
setSmtpTesting(false);
|
|
}
|
|
};
|
|
|
|
if (loadingInitial) return <div className="p-6 text-sm text-gray-500">Loading settings…</div>;
|
|
|
|
const currentLogoSrc = logoPreview || (logoUrl ? resolveToApiOrigin(logoUrl) : null);
|
|
|
|
return (
|
|
<div className="max-w-3xl mx-auto w-full p-6">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h1 className="text-2xl font-semibold">Site Settings</h1>
|
|
<p className="text-sm text-gray-500 mt-1">Configure your organisation, branding, email, and legal pages.</p>
|
|
</div>
|
|
<button
|
|
className="px-3 py-1.5 text-sm rounded bg-gray-100 hover:bg-gray-200"
|
|
onClick={() => router.push("/dashboard/admin")}
|
|
>
|
|
Back
|
|
</button>
|
|
</div>
|
|
|
|
{/* Tab bar */}
|
|
<div className="flex items-center gap-2 flex-wrap mb-6">
|
|
{TABS.map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
type="button"
|
|
onClick={() => switchTab(tab.id)}
|
|
className={`px-3 py-1.5 text-sm rounded border transition-colors ${
|
|
activeTab === tab.id
|
|
? "bg-indigo-600 text-white border-indigo-600"
|
|
: "bg-white text-gray-800 border-gray-200 hover:bg-gray-50"
|
|
}`}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* ── Organisation ─────────────────────────────────────────────────── */}
|
|
{activeTab === "organisation" && (
|
|
<div className="space-y-4">
|
|
<Field label="Organisation name" required>
|
|
<input className={inputCls} placeholder="Hope Family Church"
|
|
value={orgName} onChange={e => setOrgName(e.target.value)} />
|
|
</Field>
|
|
<Field label="Tagline">
|
|
<input className={inputCls} placeholder="Connecting community through events"
|
|
value={orgTagline} onChange={e => setOrgTagline(e.target.value)} />
|
|
</Field>
|
|
<div className="grid sm:grid-cols-2 gap-4">
|
|
<Field label="Contact email">
|
|
<input type="email" className={inputCls} placeholder="admin@yourchurch.org"
|
|
value={orgEmail} onChange={e => setOrgEmail(e.target.value)} />
|
|
</Field>
|
|
<Field label="Phone">
|
|
<input className={inputCls} placeholder="+27 12 345 6789"
|
|
value={orgPhone} onChange={e => setOrgPhone(e.target.value)} />
|
|
</Field>
|
|
</div>
|
|
<Field label="Address">
|
|
<input className={inputCls} placeholder="123 Church St, City"
|
|
value={orgAddress} onChange={e => setOrgAddress(e.target.value)} />
|
|
</Field>
|
|
<Field label="Site URL" hint="The public URL of this site — used in email links (e.g. password reset, ticket delivery). e.g. https://events.yourchurch.org">
|
|
<input className={inputCls} placeholder="https://events.yourchurch.org"
|
|
value={appBaseUrl} onChange={e => setAppBaseUrl(e.target.value)} />
|
|
</Field>
|
|
<SaveBar saving={saving} onSave={saveOrganisation} result={result} />
|
|
</div>
|
|
)}
|
|
|
|
{/* ── Branding ─────────────────────────────────────────────────────── */}
|
|
{activeTab === "branding" && (
|
|
<div className="space-y-5">
|
|
<Field label="Accent / brand colour">
|
|
<div className="flex items-center gap-3">
|
|
<input type="color" className="h-10 w-20 border rounded cursor-pointer"
|
|
value={accentColor} onChange={e => setAccentColor(e.target.value)} />
|
|
<input className={`${inputCls} font-mono`} placeholder="#2563eb"
|
|
value={accentColor} onChange={e => setAccentColor(e.target.value)} />
|
|
</div>
|
|
<div className="mt-2 h-6 rounded-lg transition-colors" style={{ background: accentColor }} />
|
|
</Field>
|
|
|
|
<Field label="Site logo" hint="PNG, JPG, SVG or WebP, max 2 MB. Displayed in the navigation bar.">
|
|
{currentLogoSrc && (
|
|
<div className="mb-3 flex items-center gap-3">
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img src={currentLogoSrc} alt="Current logo" className="h-16 object-contain border rounded p-1 bg-gray-50" />
|
|
<button
|
|
type="button"
|
|
className="text-xs text-red-500 hover:text-red-700"
|
|
onClick={() => { setLogoUrl(""); setLogoFile(null); setLogoPreview(null); if (fileRef.current) fileRef.current.value = ""; }}
|
|
>
|
|
Remove
|
|
</button>
|
|
</div>
|
|
)}
|
|
<input ref={fileRef} type="file" accept="image/*" onChange={e => {
|
|
const file = e.target.files?.[0];
|
|
if (!file) return;
|
|
setLogoFile(file);
|
|
setLogoPreview(URL.createObjectURL(file));
|
|
}} className="text-sm" />
|
|
</Field>
|
|
|
|
<SaveBar saving={saving} onSave={saveBranding} result={result} />
|
|
</div>
|
|
)}
|
|
|
|
{/* ── Notifications ─────────────────────────────────────────────────── */}
|
|
{activeTab === "notifications" && (
|
|
<div className="space-y-4">
|
|
<Field
|
|
label="Registration notification emails"
|
|
hint="Who gets notified when someone registers for an event. Separate multiple addresses with commas."
|
|
>
|
|
<input className={inputCls} placeholder="registrations@yourchurch.org, admin@yourchurch.org"
|
|
value={notifEmails} onChange={e => setNotifEmails(e.target.value)} />
|
|
</Field>
|
|
<SaveBar saving={saving} onSave={saveNotifications} result={result} />
|
|
</div>
|
|
)}
|
|
|
|
{/* ── Email / SMTP ──────────────────────────────────────────────────── */}
|
|
{activeTab === "email" && (
|
|
<div className="space-y-4">
|
|
<p className="text-sm text-gray-500">
|
|
Outgoing email for tickets, payment confirmations, and account notifications.
|
|
Leave blank to use server environment variables. The password is stored encrypted.
|
|
</p>
|
|
|
|
<div className="grid sm:grid-cols-2 gap-4">
|
|
<Field label="SMTP host">
|
|
<input className={inputCls} placeholder="smtp.yourprovider.com"
|
|
value={smtpHost} onChange={e => setSmtpHost(e.target.value)} />
|
|
</Field>
|
|
<Field label="Port">
|
|
<input type="number" className={inputCls} placeholder="587"
|
|
value={smtpPort} onChange={e => setSmtpPort(e.target.value)} />
|
|
</Field>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<input type="checkbox" id="smtpSecure" checked={smtpSecure}
|
|
onChange={e => setSmtpSecure(e.target.checked)} className="rounded" />
|
|
<label htmlFor="smtpSecure" className="text-sm text-gray-700">Use TLS/SSL (port 465)</label>
|
|
</div>
|
|
|
|
<Field label="From address" hint="The address emails appear to come from.">
|
|
<input type="email" className={inputCls} placeholder="no-reply@yourchurch.org"
|
|
value={smtpFrom} onChange={e => setSmtpFrom(e.target.value)} />
|
|
</Field>
|
|
|
|
<div className="grid sm:grid-cols-2 gap-4">
|
|
<Field label="SMTP username">
|
|
<input type="email" className={inputCls} placeholder="mail@yourchurch.org"
|
|
value={smtpUser} onChange={e => setSmtpUser(e.target.value)} autoComplete="username" />
|
|
</Field>
|
|
<Field
|
|
label="SMTP password"
|
|
hint={smtpPassSet ? "Password is saved. Leave blank to keep it." : undefined}
|
|
>
|
|
<div className="relative">
|
|
<input type="password" className={inputCls}
|
|
placeholder={smtpPassSet ? "Leave blank to keep current" : "Enter password"}
|
|
value={smtpPass} onChange={e => setSmtpPass(e.target.value)} autoComplete="new-password" />
|
|
{smtpPassSet && smtpPass === "" && (
|
|
<span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-green-600 pointer-events-none">● saved</span>
|
|
)}
|
|
</div>
|
|
</Field>
|
|
</div>
|
|
|
|
{/* Test connection */}
|
|
<div className="pt-1 space-y-2">
|
|
<div className="flex items-center gap-3 flex-wrap">
|
|
<button
|
|
type="button"
|
|
disabled={smtpTesting || !smtpHost.trim()}
|
|
onClick={handleTestSmtp}
|
|
className="px-4 py-2 text-sm rounded-lg bg-gray-100 hover:bg-gray-200 disabled:opacity-50 border"
|
|
>
|
|
{smtpTesting ? "Testing…" : "Test connection"}
|
|
</button>
|
|
{smtpTestResult && (
|
|
<span className={`text-sm ${smtpTestResult.ok ? "text-green-600" : "text-red-600"}`}>
|
|
{smtpTestResult.ok ? "✓" : "✗"} {smtpTestResult.message}
|
|
</span>
|
|
)}
|
|
</div>
|
|
{smtpTestResult && !smtpTestResult.ok && smtpTestResult.raw && (
|
|
<details className="text-xs text-gray-500">
|
|
<summary className="cursor-pointer select-none hover:text-gray-700">Show technical details</summary>
|
|
<pre className="mt-1 p-2 bg-gray-100 rounded text-xs overflow-x-auto whitespace-pre-wrap break-all">{smtpTestResult.raw}</pre>
|
|
</details>
|
|
)}
|
|
</div>
|
|
|
|
<SaveBar saving={saving} onSave={saveSmtp} result={result} />
|
|
</div>
|
|
)}
|
|
|
|
{/* ── Legal ─────────────────────────────────────────────────────────── */}
|
|
{activeTab === "legal" && (
|
|
<div className="space-y-4">
|
|
<p className="text-sm text-gray-500">
|
|
These values populate the Terms of Use and Privacy Policy pages automatically.
|
|
</p>
|
|
|
|
<Field label="Operator / responsible party"
|
|
hint='Shown in the "Owned and operated by" line of the Terms of Use.'>
|
|
<input className={inputCls} placeholder="Jane Smith on behalf of Example Church, City, South Africa"
|
|
value={legalOperatorName} onChange={e => setLegalOperatorName(e.target.value)} />
|
|
</Field>
|
|
<Field label="Website URL (without https://)">
|
|
<input className={inputCls} placeholder="events.yourchurch.org"
|
|
value={legalWebsiteUrl} onChange={e => setLegalWebsiteUrl(e.target.value)} />
|
|
</Field>
|
|
<Field label="Effective date">
|
|
<input className={inputCls} placeholder="April 2026"
|
|
value={legalEffectiveDate} onChange={e => setLegalEffectiveDate(e.target.value)} />
|
|
</Field>
|
|
|
|
<div className="border-t pt-4">
|
|
<p className="text-sm font-medium text-gray-700 mb-3">Information Officer (POPIA)</p>
|
|
<div className="grid sm:grid-cols-2 gap-4">
|
|
<Field label="Full name">
|
|
<input className={inputCls} placeholder="Jane Smith"
|
|
value={legalIoName} onChange={e => setLegalIoName(e.target.value)} />
|
|
</Field>
|
|
<Field label="Email">
|
|
<input type="email" className={inputCls} placeholder="io@yourchurch.org"
|
|
value={legalIoEmail} onChange={e => setLegalIoEmail(e.target.value)} />
|
|
</Field>
|
|
</div>
|
|
</div>
|
|
|
|
<SaveBar saving={saving} onSave={saveLegal} result={result} />
|
|
</div>
|
|
)}
|
|
|
|
{/* ── Payments (Yoco fees) ─────────────────────────────────────────────── */}
|
|
{activeTab === "payments" && (
|
|
<div className="space-y-4">
|
|
<p className="text-sm text-gray-500">
|
|
Yoco deducts a processing fee from every card transaction before it reaches your bank account.
|
|
Reports use the estimate below to show a more accurate payout. Yoco's real rate varies by
|
|
monthly volume and card type, which this app doesn't track — pick your plan to pre-fill a
|
|
starting value, then adjust the percentages to match your actual bank statement.
|
|
</p>
|
|
|
|
<Field label="Yoco plan">
|
|
<select
|
|
className={inputCls}
|
|
value={yocoPlan}
|
|
onChange={e => handleYocoPlanChange(e.target.value as "core" | "plus" | "pro")}
|
|
>
|
|
<option value="core">Core</option>
|
|
<option value="plus">Plus</option>
|
|
<option value="pro">Pro</option>
|
|
</select>
|
|
</Field>
|
|
|
|
<div className="grid sm:grid-cols-2 gap-4">
|
|
<Field label="In-person (card machine) fee %">
|
|
<input type="number" step="0.01" min="0" max="100" className={inputCls} placeholder="2.30"
|
|
value={feeInPersonPct} onChange={e => setFeeInPersonPct(e.target.value)} />
|
|
</Field>
|
|
<Field label="Online (checkout link) fee %">
|
|
<input type="number" step="0.01" min="0" max="100" className={inputCls} placeholder="2.95"
|
|
value={feeOnlinePct} onChange={e => setFeeOnlinePct(e.target.value)} />
|
|
</Field>
|
|
</div>
|
|
<p className="text-xs text-gray-400">These fees are always absorbed by the church — they're shown in reports for an accurate payout, never added to what attendees pay.</p>
|
|
|
|
<SaveBar saving={saving} onSave={savePayments} result={result} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
} |