fix: improve delete line from cart functionality

src/app/(main)/cart/page.tsx

@@ -2,9 +2,9 @@ import { cookies } from "next/headers";
 import Image from "next/image";
 import Link from "next/link";
 import { CheckoutLink } from "./CheckoutLink";
-import { DeleteLineButton } from "./DeleteLineButton";
 import * as Checkout from "@/lib/checkout";
 import { formatMoney, getHrefForVariant } from "@/lib/utils";
+import { DeleteLineForm } from "@/ui/components/DeleteLineForm/DeleteLineForm";
 
 export const metadata = {
 	title: "Shopping Cart · Saleor Storefront example",
@@ -35,7 +35,7 @@ export default async function Page() {
 	return (
 		<section className="mx-auto max-w-7xl p-8">
 			<h1 className="mt-8 text-3xl font-bold text-neutral-900">Your Shopping Cart</h1>
-			<form className="mt-12">
+			<div className="mt-12">
 				<ul
 					data-testid="CartProductList"
 					role="list"
@@ -76,7 +76,7 @@ export default async function Page() {
 								</div>
 								<div className="flex justify-between">
 									<div className="text-sm font-bold">Qty: {item.quantity}</div>
-									<DeleteLineButton checkoutId={checkoutId} lineId={item.id} />
+									<DeleteLineForm checkoutId={checkoutId} lineId={item.id} />
 								</div>
 							</div>
 						</li>
@@ -103,7 +103,7 @@ export default async function Page() {
 						/>
 					</div>
 				</div>
-			</form>
+			</div>
 		</section>
 	);
 }

src/ui/components/DeleteLineForm/DeleteLineForm.tsx

@@ -0,0 +1,33 @@
+import { revalidatePath } from "next/cache";
+import { SubmitButon } from "./components/SubmitButton";
+import { executeGraphQL } from "@/lib/graphql";
+import { CheckoutDeleteLinesDocument } from "@/gql/graphql";
+
+type Props = {
+	lineId: string;
+	checkoutId: string;
+};
+
+export const DeleteLineForm = ({ lineId, checkoutId }: Props) => {
+	const deleteLineAction = async (lineId: string, checkoutId: string) => {
+		"use server";
+
+		await executeGraphQL(CheckoutDeleteLinesDocument, {
+			variables: {
+				checkoutId,
+				lineIds: [lineId],
+			},
+			cache: "no-cache",
+		});
+
+		revalidatePath("/cart");
+	};
+
+	const deleteLineActionWithArgs = deleteLineAction.bind(null, lineId, checkoutId);
+
+	return (
+		<form action={deleteLineActionWithArgs}>
+			<SubmitButon />
+		</form>
+	);
+};

src/ui/components/DeleteLineForm/components/SubmitButton.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { useFormStatus } from "react-dom";
+
+export const SubmitButon = () => {
+	const { pending } = useFormStatus();
+	return (
+		<button type="submit" className="text-sm text-neutral-500 hover:text-neutral-900" aria-disabled={pending}>
+			{pending ? "Removing" : "Remove"}
+			<span className="sr-only">line from cart</span>
+		</button>
+	);
+};