joshua
ad9ead807d
registration/success read the token from the wrong localStorage key (token instead of hope_events_token), which broke registration/form loading there and made the new "Pay with Yoco" checkout call fail with "Not authorized, token failed" — switched to the shared auth context like the rest of the app. dashboard/user's "Make payment" reused the ticket-email dialog, which hardcoded "Sending tickets…" while loading — the dialog now takes an optional loading title/subtitle so payNow can show its own message.
272 lines
12 KiB
TypeScript
272 lines
12 KiB
TypeScript
"use client";
|
|
import React, { Suspense } from "react";
|
|
import { Navbar } from "@/components/layout/Navbar";
|
|
import { Footer } from "@/components/layout/Footer";
|
|
import { useSearchParams, useRouter } from "next/navigation";
|
|
import { useAuth } from "@/hooks/useAuth";
|
|
|
|
type FormField = { id: string; type: 'yes_no'|'text'|'date'|'numeric'|'statement'|'paragraph'; label: string; isRequired?: boolean; helpText?: string|null };
|
|
|
|
function RegistrationSuccessContent() {
|
|
const search = useSearchParams();
|
|
const router = useRouter();
|
|
const { token } = useAuth();
|
|
const registrationId = search.get("registrationId") || search.get("id");
|
|
const fallbackTotalParam = search.get("totalDue");
|
|
const fallbackTotalDue = React.useMemo(() => {
|
|
const n = fallbackTotalParam ? Number(fallbackTotalParam) : 0;
|
|
return isNaN(n) ? 0 : n;
|
|
}, [fallbackTotalParam]);
|
|
|
|
const [reg, setReg] = React.useState<any | null>(null);
|
|
const [form, setForm] = React.useState<{ isRequired: boolean; fields: FormField[] } | null>(null);
|
|
const [formsData, setFormsData] = React.useState<Record<number, Record<string, string>>>({});
|
|
const [loading, setLoading] = React.useState(false);
|
|
const [error, setError] = React.useState<string | null>(null);
|
|
const [info, setInfo] = React.useState<string | null>(null);
|
|
const [payLoading, setPayLoading] = React.useState(false);
|
|
|
|
React.useEffect(() => {
|
|
(async () => {
|
|
setError(null);
|
|
setInfo(null);
|
|
if (!registrationId) return;
|
|
try {
|
|
setLoading(true);
|
|
// Try to fetch registration and event form
|
|
const r = token ? await (await import('@/lib/api')).apiFetch(`/api/registrations/${encodeURIComponent(registrationId)}`, { authToken: token }) : null;
|
|
if (r) {
|
|
setReg(r);
|
|
const ev = await (await import('@/lib/api')).apiFetch(`/api/events/${encodeURIComponent(r.eventId)}`);
|
|
if (ev?.form) setForm(ev.form);
|
|
// Load any saved draft
|
|
try {
|
|
const d = await (await import('@/lib/api')).apiFetch(`/api/registrations/${encodeURIComponent(registrationId)}/forms/draft`, { authToken: token || undefined });
|
|
if (d && d.data && typeof d.data === 'object') setFormsData(d.data);
|
|
} catch {}
|
|
}
|
|
} catch (e: any) {
|
|
setError(e?.message || 'Failed to load details');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
})();
|
|
}, [registrationId, token]);
|
|
|
|
const totalDue = React.useMemo(() => {
|
|
if (!reg) return 0;
|
|
try {
|
|
return (reg.registrationOptions || []).reduce((s: number, ro: any) => {
|
|
const unit = (ro.priceSnapshot !== null && ro.priceSnapshot !== undefined)
|
|
? Number(ro.priceSnapshot)
|
|
: (ro.variant?.price ?? ro.eventOption?.price ?? 0);
|
|
return s + unit * (ro.quantity || 0);
|
|
}, 0);
|
|
} catch { return 0; }
|
|
}, [reg]);
|
|
|
|
React.useEffect(() => {
|
|
// If free registration, do not show Yoco and redirect to dashboard after a short delay
|
|
if (reg && totalDue === 0) {
|
|
// attempt ticket generation if status is paid (may fail if required forms aren't completed)
|
|
(async () => {
|
|
try {
|
|
if (token && reg?.id) {
|
|
await (await import('@/lib/api')).apiFetch('/api/tickets/generate', { method: 'POST', authToken: token, body: { registrationId: reg.id } });
|
|
}
|
|
} catch {}
|
|
setTimeout(() => router.replace('/dashboard'), 600);
|
|
})();
|
|
}
|
|
}, [reg, totalDue, router, token]);
|
|
|
|
const goPay = async () => {
|
|
if (!registrationId) return;
|
|
if (!token) { setError('Please login to pay.'); return; }
|
|
try {
|
|
setError(null);
|
|
setPayLoading(true);
|
|
const { createFullPaymentCheckout } = await import('@/lib/api');
|
|
const res = await createFullPaymentCheckout(token, registrationId);
|
|
if (res.priceUpdated) {
|
|
// Early-bird price changed since registration — surface the new total and
|
|
// reload the registration so the displayed totalDue reflects it, instead of redirecting.
|
|
setError(`${res.message || 'Pricing has changed.'} New total: R ${(res.newTotal ?? 0).toFixed(2)}. Please try again.`);
|
|
try {
|
|
const r = await (await import('@/lib/api')).apiFetch(`/api/registrations/${encodeURIComponent(registrationId)}`, { authToken: token });
|
|
if (r) setReg(r);
|
|
} catch {}
|
|
return;
|
|
}
|
|
if (!res.redirectUrl) { setError('Failed to create checkout'); return; }
|
|
window.location.href = res.redirectUrl;
|
|
} catch (e: any) {
|
|
setError(e?.message || 'Failed to create checkout');
|
|
} finally {
|
|
setPayLoading(false);
|
|
}
|
|
};
|
|
|
|
const goDashboard = () => {
|
|
router.push("/dashboard/user");
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen flex flex-col">
|
|
<Navbar />
|
|
<main className="flex-1 px-4 py-10 max-w-2xl mx-auto w-full">
|
|
<div className="border rounded-xl p-6 bg-white shadow-sm">
|
|
<div className="text-2xl font-semibold mb-2">Registration successful</div>
|
|
<p className="text-gray-700 mb-4">Thank you! Your registration has been created{registrationId ? ` (#${registrationId.slice(0,8)})` : ""}.</p>
|
|
{form?.isRequired && reg ? (
|
|
<div className="mb-6 p-3 border rounded bg-yellow-50 text-yellow-800">
|
|
<div className="font-medium">This event requires attendee details.</div>
|
|
<div className="text-sm">Please complete one form per main ticket to receive tickets. You can also do this later from your dashboard, but tickets cannot be generated until completed.</div>
|
|
</div>
|
|
) : (totalDue > 0 || (!reg && fallbackTotalDue > 0)) ? (
|
|
<p className="text-gray-700 mb-6">Would you like to pay with Yoco now?</p>
|
|
) : null}
|
|
|
|
<div className="flex flex-col sm:flex-row gap-3 mt-4">
|
|
{(totalDue > 0 || (!reg && fallbackTotalDue > 0)) && (
|
|
<button
|
|
onClick={goPay}
|
|
disabled={!registrationId || payLoading}
|
|
className="px-4 py-2 rounded bg-green-600 text-white disabled:opacity-60"
|
|
>{payLoading ? "Creating checkout..." : "Pay with Yoco"}</button>
|
|
)}
|
|
<button
|
|
onClick={goDashboard}
|
|
className="px-4 py-2 rounded bg-gray-100 text-gray-800 hover:bg-gray-200"
|
|
>{(totalDue > 0 || (!reg && fallbackTotalDue > 0)) ? "Go to Dashboard (Pay Later)" : "Go to Dashboard"}</button>
|
|
</div>
|
|
{error && <p className="text-sm text-red-600 mt-3">{error}</p>}
|
|
{!registrationId && (
|
|
<p className="text-sm text-red-600 mt-4">Missing registration reference. You can still go to your Dashboard to view registrations.</p>
|
|
)}
|
|
</div>
|
|
</main>
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function AttendeeForms({ reg, form, formsData, setFormsData, setError, setInfo }: { reg: any; form: { isRequired: boolean; fields: FormField[] }; formsData: Record<number, Record<string,string>>; setFormsData: any; setError: any; setInfo: any; }) {
|
|
const { token } = useAuth();
|
|
const registrationId = reg?.id;
|
|
const mainTickets = (reg?.registrationOptions || []).filter((o: any) => o?.eventOption?.isMainTicket).reduce((s: number, o: any) => s + (o.quantity || 0), 0);
|
|
const count = Math.max(0, mainTickets);
|
|
|
|
const canSubmit = React.useMemo(() => {
|
|
if (!form || count <= 0) return false;
|
|
const reqFields = (form.fields || [])
|
|
.filter(f => !!f.isRequired && f.type !== 'statement' && f.type !== 'paragraph')
|
|
.map(f => f.id);
|
|
for (let i = 0; i < count; i++) {
|
|
const data = formsData[i] || {};
|
|
for (const fid of reqFields) {
|
|
const v = data[fid];
|
|
if (v === undefined || v === null || String(v).trim() === '') {
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
return true;
|
|
}, [form, formsData, count]);
|
|
|
|
const update = (idx: number, fieldId: string, value: string) => {
|
|
setFormsData((prev: any) => ({ ...prev, [idx]: { ...(prev[idx]||{}), [fieldId]: value } }));
|
|
};
|
|
|
|
const submit = async () => {
|
|
try {
|
|
setError(null); setInfo(null);
|
|
if (!token) { setError('Please login to submit forms.'); return; }
|
|
const payload = [] as any[];
|
|
for (let i = 0; i < count; i++) {
|
|
payload.push({ answers: formsData[i] || {} });
|
|
}
|
|
await (await import('@/lib/api')).apiFetch(`/api/registrations/${encodeURIComponent(registrationId)}/forms/responses`, {
|
|
method: 'POST',
|
|
authToken: token,
|
|
body: { responses: payload }
|
|
});
|
|
setInfo('Attendee forms submitted. You will receive tickets once payment is confirmed.');
|
|
} catch (e: any) {
|
|
setError(e?.message || 'Failed to submit forms');
|
|
}
|
|
};
|
|
|
|
const saveDraft = async () => {
|
|
try {
|
|
setError(null); setInfo(null);
|
|
if (!token) { setError('Please login to save drafts.'); return; }
|
|
await (await import('@/lib/api')).apiFetch(`/api/registrations/${encodeURIComponent(registrationId)}/forms/draft`, {
|
|
method: 'PUT',
|
|
authToken: token,
|
|
body: { data: formsData }
|
|
});
|
|
setInfo('Draft saved. You can finish later from your dashboard.');
|
|
} catch (e: any) {
|
|
setError(e?.message || 'Failed to save draft');
|
|
}
|
|
};
|
|
|
|
if (!form || !Array.isArray(form.fields) || count === 0) return null;
|
|
|
|
return (
|
|
<div className="border rounded p-3 bg-gray-50 mb-4">
|
|
<div className="text-sm font-medium mb-2">Attendee details</div>
|
|
<div className="space-y-4">
|
|
{Array.from({ length: count }, (_, idx) => (
|
|
<div key={idx} className="bg-white border rounded p-3">
|
|
<div className="font-medium mb-2">Attendee {idx + 1}</div>
|
|
{form.fields.map((f) => (
|
|
<div key={f.id} className="mb-2">
|
|
{f.type === 'statement' ? (
|
|
<div className="text-sm text-gray-700 whitespace-pre-line">{f.label}</div>
|
|
) : f.type === 'paragraph' ? (
|
|
<div className="text-sm text-gray-700">
|
|
{f.label && <div className="font-medium mb-1 whitespace-pre-line">{f.label}</div>}
|
|
{f.helpText && <div className="whitespace-pre-line">{f.helpText}</div>}
|
|
</div>
|
|
) : (
|
|
<>
|
|
<label className="block text-xs text-gray-600 mb-1">{f.label}{f.isRequired ? ' *' : ''}</label>
|
|
{f.type === 'yes_no' ? (
|
|
<select className="border rounded px-2 py-1 text-sm" value={formsData[idx]?.[f.id] || ''} onChange={e => update(idx, f.id, e.target.value)}>
|
|
<option value="">Select</option>
|
|
<option value="yes">Yes</option>
|
|
<option value="no">No</option>
|
|
</select>
|
|
) : f.type === 'date' ? (
|
|
<input type="date" className="border rounded px-2 py-1 text-sm" value={formsData[idx]?.[f.id] || ''} onChange={e => update(idx, f.id, e.target.value)} />
|
|
) : f.type === 'numeric' ? (
|
|
<input type="number" className="border rounded px-2 py-1 text-sm" value={formsData[idx]?.[f.id] || ''} onChange={e => update(idx, f.id, e.target.value)} />
|
|
) : (
|
|
<input type="text" className="border rounded px-2 py-1 text-sm w-full" value={formsData[idx]?.[f.id] || ''} onChange={e => update(idx, f.id, e.target.value)} />
|
|
)}
|
|
{f.helpText && <div className="text-xs text-gray-500 mt-1">{f.helpText}</div>}
|
|
</>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="mt-3 flex gap-2">
|
|
<button className="px-3 py-1.5 text-sm rounded bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-50" disabled={!canSubmit} onClick={submit}>Submit attendee forms</button>
|
|
<button className="px-3 py-1.5 text-sm rounded bg-gray-100 hover:bg-gray-200" onClick={saveDraft}>Save for later</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function RegistrationSuccessPage() {
|
|
return (
|
|
<Suspense fallback={<div className="p-6">Loading...</div>}>
|
|
<RegistrationSuccessContent />
|
|
</Suspense>
|
|
);
|
|
}
|