feat(MED-100): update cart checkout flow and views

app/home/(user)/_components/cart/montonio-checkout-callback.tsx

@@ -0,0 +1,87 @@
+'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;
+}