88 lines
2.1 KiB
TypeScript
88 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import { useSearchParams } from 'next/navigation';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
|
|
import { Button } from '@kit/ui/button';
|
|
import { Trans } from '@kit/ui/trans';
|
|
import { placeOrder } from "@lib/data/cart"
|
|
import Link from 'next/link';
|
|
|
|
enum Status {
|
|
LOADING = 'LOADING',
|
|
ERROR = 'ERROR',
|
|
}
|
|
|
|
export function MontonioCheckoutCallback() {
|
|
const [status, setStatus] = useState<Status>(Status.LOADING);
|
|
const searchParams = useSearchParams();
|
|
|
|
useEffect(() => {
|
|
const token = searchParams.get('order-token');
|
|
if (!token) {
|
|
return;
|
|
}
|
|
|
|
async function verifyToken() {
|
|
setStatus(Status.LOADING);
|
|
|
|
try {
|
|
const response = await fetch('/api/montonio/verify-token', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ token }),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const body = await response.json();
|
|
throw new Error(body.error ?? 'Failed to verify payment status.');
|
|
}
|
|
|
|
const body = await response.json();
|
|
const paymentStatus = body.status as string;
|
|
if (paymentStatus === 'PAID') {
|
|
await placeOrder();
|
|
} else {
|
|
setStatus(Status.ERROR);
|
|
}
|
|
} catch (e) {
|
|
console.error("Error verifying token", e);
|
|
setStatus(Status.ERROR);
|
|
}
|
|
}
|
|
|
|
void verifyToken();
|
|
}, [searchParams]);
|
|
|
|
if (status === Status.ERROR) {
|
|
return (
|
|
<div className={'flex flex-col space-y-4'}>
|
|
<Alert variant={'destructive'}>
|
|
<AlertTitle>
|
|
<Trans i18nKey={'checkout.error.title'} />
|
|
</AlertTitle>
|
|
|
|
<AlertDescription>
|
|
<p>
|
|
<Trans i18nKey={'checkout.error.description'} />
|
|
</p>
|
|
</AlertDescription>
|
|
</Alert>
|
|
|
|
<div className={'flex'}>
|
|
<Button asChild>
|
|
<Link href={'/home'}>
|
|
<Trans i18nKey={'checkout.goToDashboard'} />
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
}
|