feat(MED-100): small improvements

app/api/montonio/verify-token/route.ts

@@ -58,6 +58,12 @@ export const POST = enhanceRouteHandler(
         algorithms: ['HS256'],
       }) as MontonioOrderToken;
 
+      const activeCartId = request.cookies.get('_medusa_cart_id')?.value;
+      const [, cartId] = decoded.merchantReferenceDisplay.split(':');
+      if (cartId !== activeCartId) {
+        throw new Error('Invalid cart id');
+      }
+
       logger.info(
         {
           name: namespace,

app/home/(user)/_components/cart/cart-items.tsx

@@ -21,7 +21,7 @@ export default function CartItems({ cart, items, productColumnLabelKey }: {
   return (
     <Table className="rounded-lg border border-separate">
       <TableHeader className="text-ui-fg-subtle txt-medium-plus">
-        <TableRow className="">
+        <TableRow>
           <TableHead className="px-6">
             <Trans i18nKey={productColumnLabelKey} />
           </TableHead>

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

@@ -8,7 +8,7 @@ import { Button } from '@kit/ui/button';
 import { Trans } from '@kit/ui/trans';
 import { placeOrder } from "@lib/data/cart"
 import Link from 'next/link';
-import Loading from '@/app/home/loading';
+import GlobalLoader from '../../loading';
 
 enum Status {
   LOADING = 'LOADING',
@@ -18,9 +18,14 @@ enum Status {
 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');
@@ -38,6 +43,7 @@ export function MontonioCheckoutCallback() {
           },
           body: JSON.stringify({ token }),
         });
+        setIsFinalized(true);
 
         if (!response.ok) {
           const body = await response.json();
@@ -54,7 +60,7 @@ export function MontonioCheckoutCallback() {
             router.push('/home/cart');
           }
         } else {
-          setStatus(Status.ERROR);
+          throw new Error('Payment failed or pending');
         }
       } catch (e) {
         console.error("Error verifying token", e);
@@ -63,7 +69,7 @@ export function MontonioCheckoutCallback() {
     }
 
     void verifyToken();
-  }, [searchParams]);
+  }, [searchParams, isFinalized]);
 
   if (status === Status.ERROR) {
     return (
@@ -91,5 +97,5 @@ export function MontonioCheckoutCallback() {
     );
   }
 
-  return (<Loading />);
+  return <GlobalLoader />;
 }

app/home/(user)/_components/order/cart-totals.tsx

@@ -67,7 +67,7 @@ export default function CartTotals({ order }: {
       </div>
       <div className="h-px w-full border-b border-gray-200 my-4" />
       <div className="flex items-center justify-between text-ui-fg-base mb-2 txt-medium ">
-        <span><Trans i18nKey="cart:orderConfirmed.total" /></span>
+        <span className="font-bold"><Trans i18nKey="cart:orderConfirmed.total" /></span>
         <span
           className="txt-xlarge-plus"
           data-testid="cart-total"

app/home/(user)/_components/order/order-completed.tsx

@@ -1,6 +1,7 @@
 import { Trans } from '@kit/ui/trans';
 import { PageBody, PageHeader } from '@kit/ui/page';
 import { StoreOrder } from "@medusajs/types"
+import Divider from "@modules/common/components/divider"
 
 import CartTotals from "./cart-totals"
 import OrderDetails from "./order-details"
@@ -14,8 +15,10 @@ export default async function OrderCompleted({
   return (
     <PageBody>
       <PageHeader title={<Trans i18nKey="cart:orderConfirmed.title" />} />
+      <Divider />
       <div className="grid grid-cols-1 small:grid-cols-[1fr_360px] gap-x-40 lg:px-4 gap-y-6">
         <OrderDetails order={order} />
+        <Divider />
         <OrderItems order={order} />
         <CartTotals order={order} />
       </div>

app/home/(user)/_components/order/order-item.tsx

@@ -11,13 +11,13 @@ export default function OrderItem({ item, currencyCode }: {
 }) {
   return (
     <TableRow className="w-full" data-testid="product-row">
-      {/* <TableCell className="!pl-0 p-4 w-24">
+      {/* <TableCell className="px-6 w-24">
         <div className="flex w-16">
           <Thumbnail thumbnail={item.thumbnail} size="square" />
         </div>
       </TableCell> */}
 
-      <TableCell className="text-left">
+      <TableCell className="text-left px-6">
         <span
           className="txt-medium-plus text-ui-fg-base"
           data-testid="product-name"
@@ -27,8 +27,8 @@ export default function OrderItem({ item, currencyCode }: {
         <LineItemOptions variant={item.variant} data-testid="product-variant" />
       </TableCell>
 
-      <TableCell className="!pr-0">
-        <span className="!pr-0 flex flex-col items-end h-full justify-center">
+      <TableCell className="px-6">
+        <span className="flex flex-col items-end h-full justify-center">
           <span className="flex gap-x-1 ">
             <span className="text-ui-fg-muted">
               {item.quantity}x{" "}

app/home/(user)/_components/order/order-items.tsx

@@ -2,7 +2,6 @@ import repeat from "@lib/util/repeat"
 import { StoreOrder } from "@medusajs/types"
 import { Table, TableBody } from "@kit/ui/table"
 
-import Divider from "@modules/common/components/divider"
 import SkeletonLineItem from "@modules/skeletons/components/skeleton-line-item"
 import OrderItem from "./order-item"
 import { Heading } from "@kit/ui/heading"
@@ -19,8 +18,7 @@ export default function OrderItems({ order }: {
         <Trans i18nKey="cart:orderConfirmed.summary" />
       </Heading>
       <div className="flex flex-col">
-        <Divider className="!mb-0" />
-        <Table>
+        <Table className="rounded-lg border border-separate">
           <TableBody data-testid="products-table">
             {items?.length
               ? items

components/select-analysis-package.tsx

@@ -93,7 +93,7 @@ export default function SelectAnalysisPackage({
         </CardDescription>
       </CardContent>
       <CardFooter>
-        <Button className="w-full" onClick={() => handleSelect(variant)} isLoading={isAddingToCart}>
+        <Button className="w-full text-[10px] sm:text-sm" onClick={() => handleSelect(variant)} isLoading={isAddingToCart}>
           {!isAddingToCart && <Trans i18nKey='order-analysis-package:selectThisPackage' />}
         </Button>
       </CardFooter>

lib/services/medusaCart.service.ts

@@ -73,7 +73,7 @@ export async function handleNavigateToPayment({ language }: { language: string }
     currency: cart.currency_code.toUpperCase(),
     description: `Order from Medreport`,
     locale: language,
-    merchantReference: `${account.id}:${Date.now()}`,
+    merchantReference: `${account.id}:${cart.id}:${Date.now()}`,
   });
 
   const { error } = await supabase

packages/billing/montonio/src/services/montonio-webhook-handler.service.ts

@@ -84,7 +84,7 @@ export class MontonioWebhookHandlerService
     }, `Received Montonio webhook event`);
 
     if (event.paymentStatus === 'PAID') {
-      const accountId = event.merchantReferenceDisplay.split(':')[0];
+      const [accountId] = event.merchantReferenceDisplay.split(':');
       if (!accountId) {
         throw new Error('Invalid merchant reference');
       }

public/locales/et/cart.json

@@ -45,7 +45,7 @@
   },
   "orderConfirmed": {
     "title": "Tellimus on edukalt esitatud",
-    "summary": "Summa",
+    "summary": "Teenused",
     "subtotal": "Vahesumma",
     "taxes": "Maksud",
     "giftCard": "Kinkekaart",