feat(MED-100): show toast on delete

app/home/(user)/_components/cart/cart-item-delete.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { Trash } from "lucide-react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from 'sonner';
+
+import { deleteLineItem } from "@lib/data/cart";
+import { Spinner } from "@medusajs/icons";
+
+const CartItemDelete = ({
+  id,
+  children,
+}: {
+  id: string;
+  children?: React.ReactNode;
+}) => {
+  const [isDeleting, setIsDeleting] = useState(false);
+  const { t } = useTranslation();
+
+  const handleDelete = async () => {
+    setIsDeleting(true);
+
+    const promise = async () => {
+      await deleteLineItem(id);
+    };
+
+    toast.promise(promise, {
+      success: t(`cart:items.delete.success`),
+      loading: t(`cart:items.delete.loading`),
+      error: t(`cart:items.delete.error`),
+    });
+  };
+
+  return (
+    <div className="flex items-center justify-between text-small-regular">
+      <button
+        className="flex gap-x-1 text-ui-fg-subtle hover:text-ui-fg-base cursor-pointer"
+        onClick={() => handleDelete()}
+      >
+        {isDeleting ? <Spinner className="animate-spin" /> : <Trash />}
+        <span>{children}</span>
+      </button>
+    </div>
+  );
+};
+
+export default CartItemDelete;

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

@@ -1,14 +1,13 @@
 "use client"
 
 import { HttpTypes } from "@medusajs/types"
-import DeleteButton from "@modules/common/components/delete-button"
 import { useTranslation } from "react-i18next"
 import {
   TableCell,
   TableRow,
 } from '@kit/ui/table';
 import { formatCurrency } from "@/packages/shared/src/utils"
-import { Trash } from "lucide-react"
+import CartItemDelete from "./cart-item-delete";
 
 export default function CartItem({ item, currencyCode }: {
   item: HttpTypes.StoreCartLineItem
@@ -49,7 +48,7 @@ export default function CartItem({ item, currencyCode }: {
 
       <TableCell className="text-right px-6">
         <span className="flex gap-x-1 justify-end w-[60px]">
-          <DeleteButton id={item.id} data-testid="product-delete-button" Icon={<Trash />} />
+          <CartItemDelete id={item.id} />
         </span>
       </TableCell>
     </TableRow>

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useSearchParams } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 
 import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
@@ -8,6 +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';
 
 enum Status {
   LOADING = 'LOADING',
@@ -15,12 +16,14 @@ enum Status {
 }
 
 export function MontonioCheckoutCallback() {
+  const router = useRouter();
   const [status, setStatus] = useState<Status>(Status.LOADING);
   const searchParams = useSearchParams();
-
+  
   useEffect(() => {
     const token = searchParams.get('order-token');
     if (!token) {
+      router.push('/home/cart');
       return;
     }
 
@@ -44,7 +47,12 @@ export function MontonioCheckoutCallback() {
         const body = await response.json();
         const paymentStatus = body.status as string;
         if (paymentStatus === 'PAID') {
-          await placeOrder();
+          try {
+            await placeOrder();
+          } catch (e) {
+            console.error("Error placing order", e);
+            router.push('/home/cart');
+          }
         } else {
           setStatus(Status.ERROR);
         }
@@ -83,5 +91,5 @@ export function MontonioCheckoutCallback() {
     );
   }
 
-  return null;
+  return (<Loading />);
 }