50 lines
2.6 KiB
TypeScript
50 lines
2.6 KiB
TypeScript
|
'use client';
|
||
|
|
import { Suspense, useEffect, useState } from 'react';
|
||
|
|
import { useSearchParams } from 'next/navigation';
|
||
|
|
import { api, errMsg } from '@/lib/api';
|
||
|
|
import { Alert } from '@/components/ui';
|
||
|
|
|
||
|
|
interface Info { contractNumber: string; orgName: string; productName: string; termEnd: string }
|
||
|
|
|
||
|
|
function Decision() {
|
||
|
|
const sp = useSearchParams();
|
||
|
|
const token = sp.get('token') ?? '';
|
||
|
|
const preselect = sp.get('action') === 'cancel' ? 'cancel' : sp.get('action') === 'keep' ? 'keep' : null;
|
||
|
|
const [info, setInfo] = useState<Info | null>(null);
|
||
|
|
const [err, setErr] = useState('');
|
||
|
|
const [busy, setBusy] = useState(false);
|
||
|
|
const [done, setDone] = useState<'keep' | 'cancel' | null>(null);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (!token) { setErr('Der Link ist unvollständig.'); return; }
|
||
|
|
api<Info>('GET', `/contracts/renewal-decision?token=${encodeURIComponent(token)}`).then(setInfo).catch((e) => setErr(errMsg(e)));
|
||
|
|
}, [token]);
|
||
|
|
|
||
|
|
async function decide(action: 'keep' | 'cancel') {
|
||
|
|
setBusy(true); setErr('');
|
||
|
|
try { await api('POST', '/contracts/renewal-decision', { token, action }); setDone(action); }
|
||
|
|
catch (e) { setErr(errMsg(e)); } finally { setBusy(false); }
|
||
|
|
}
|
||
|
|
|
||
|
|
return (<main id="main" className="center"><div className="auth card" style={{ maxWidth: 480 }}>
|
||
|
|
<h1>Vertragsentscheidung</h1>
|
||
|
|
{err && <Alert kind="err">{err}</Alert>}
|
||
|
|
{done ? (
|
||
|
|
<Alert kind="ok">
|
||
|
|
{done === 'keep' ? 'Vielen Dank! Der Vertrag wird weitergeführt.' : 'Die Kündigung wurde erfasst. Unser Team kümmert sich um die Abmeldung und meldet sich bei Rückfragen.'}
|
||
|
|
</Alert>
|
||
|
|
) : info ? (<>
|
||
|
|
<p className="muted">
|
||
|
|
Vertrag <strong>{info.contractNumber}</strong> ({info.productName}) für <strong>{info.orgName}</strong> läuft am{' '}
|
||
|
|
<strong>{new Date(info.termEnd).toLocaleDateString('de-DE')}</strong> aus. Möchten Sie ihn behalten oder kündigen?
|
||
|
|
</p>
|
||
|
|
<div className="row" style={{ marginTop: 16 }}>
|
||
|
|
<button className="btn primary" disabled={busy} autoFocus={preselect === 'keep'} onClick={() => decide('keep')}>{busy ? '…' : 'Vertrag behalten'}</button>
|
||
|
|
<button className="btn danger" disabled={busy} autoFocus={preselect === 'cancel'} onClick={() => decide('cancel')}>{busy ? '…' : 'Vertrag kündigen'}</button>
|
||
|
|
</div>
|
||
|
|
<p className="muted small" style={{ marginTop: 16 }}>„Behalten" verlängert den Vertrag automatisch um eine weitere Laufzeit. „Kündigen" leitet die Abmeldung ein.</p>
|
||
|
|
</>) : !err && <p className="muted" role="status">Wird geladen …</p>}
|
||
|
|
</div></main>);
|
||
|
|
}
|
||
|
|
export default function Page() { return <Suspense><Decision /></Suspense>; }
|