49 lines
1.1 KiB
TypeScript
49 lines
1.1 KiB
TypeScript
"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;
|