feat(MED-100): update montonio redirect

app/home/(user)/_components/cart/index.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { useState } from "react";
+import { Loader2 } from "lucide-react";
 import { StoreCart, StoreCartLineItem } from "@medusajs/types"
 import CartItems from "./cart-items"
 import { Trans } from '@kit/ui/trans';
@@ -10,7 +12,6 @@ import {
   CardHeader,
 } from '@kit/ui/card';
 import DiscountCode from "./discount-code";
-import { useRouter } from "next/navigation";
 import { initiatePaymentSession } from "@lib/data/cart";
 import { formatCurrency } from "@/packages/shared/src/utils";
 import { useTranslation } from "react-i18next";
@@ -27,9 +28,10 @@ export default function Cart({
   analysisPackages: StoreCartLineItem[];
   otherItems: StoreCartLineItem[];
 }) {
-  const router = useRouter();
   const { i18n: { language } } = useTranslation();
 
+  const [isInitiatingSession, setIsInitiatingSession] = useState(false);
+
   const items = cart?.items ?? [];
 
   if (!cart || items.length === 0) {
@@ -49,13 +51,18 @@ export default function Cart({
     );
   }
 
-  async function handlePayment() {
+  async function initiatePayment() {
+    setIsInitiatingSession(true);
     const response = await initiatePaymentSession(cart!, {
-      provider_id: 'pp_system_default',
+      provider_id: 'pp_montonio_montonio',
     });
     if (response.payment_collection) {
-      const url = await handleNavigateToPayment({ language });
-      router.push(url);
+      const { payment_sessions } = response.payment_collection;
+      const paymentSessionId = payment_sessions![0]!.id;
+      const url = await handleNavigateToPayment({ language, paymentSessionId });
+      window.location.href = url;
+    } else {
+      setIsInitiatingSession(false);
     }
   }
 
@@ -102,7 +109,8 @@ export default function Cart({
       </div>
 
       <div>
-        <Button className="h-10" onClick={handlePayment}>
+        <Button className="h-10" onClick={initiatePayment} disabled={isInitiatingSession}>
+          {isInitiatingSession && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
           <Trans i18nKey="cart:checkout.goToCheckout" />
         </Button>
       </div>

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

@@ -1,101 +0,0 @@
-'use client';
-
-import { useRouter, 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';
-import GlobalLoader from '../../loading';
-
-enum Status {
-  LOADING = 'LOADING',
-  ERROR = 'ERROR',
-}
-
-export function MontonioCheckoutCallback() {
-  const router = useRouter();
-  const [status, setStatus] = useState<Status>(Status.LOADING);
-  const [isFinalized, setIsFinalized] = useState(false);
-  const searchParams = useSearchParams();
-  
-  useEffect(() => {
-    if (isFinalized) {
-      return;
-    }
-
-    const token = searchParams.get('order-token');
-    if (!token) {
-      router.push('/home/cart');
-      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 }),
-        });
-        setIsFinalized(true);
-
-        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') {
-          try {
-            await placeOrder();
-          } catch (e) {
-            console.error("Error placing order", e);
-            router.push('/home/cart');
-          }
-        } else {
-          throw new Error('Payment failed or pending');
-        }
-      } catch (e) {
-        console.error("Error verifying token", e);
-        setStatus(Status.ERROR);
-      }
-    }
-
-    void verifyToken();
-  }, [searchParams, isFinalized]);
-
-  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 <GlobalLoader />;
-}

app/home/(user)/_components/cart/types.ts

@@ -0,0 +1,22 @@
+export interface MontonioOrderToken {
+  uuid: string;
+  accessKey: string;
+  merchantReference: string;
+  merchantReferenceDisplay: string;
+  paymentStatus:
+  | 'PAID'
+  | 'FAILED'
+  | 'CANCELLED'
+  | 'PENDING'
+  | 'EXPIRED'
+  | 'REFUNDED';
+  paymentMethod: string;
+  grandTotal: number;
+  currency: string;
+  senderIban?: string;
+  senderName?: string;
+  paymentProviderName?: string;
+  paymentLinkUuid: string;
+  iat: number;
+  exp: number;
+}