'use client'; import { XMarkIcon } from '@heroicons/react/24/outline'; import clsx from 'clsx'; import { removeItem } from 'components/cart/actions'; import LoadingDots from 'components/loading-dots'; import type { CartItem } from 'lib/shopify/types'; import { useTransition } from 'react'; import { // @ts-ignore experimental_useFormState as useFormState, experimental_useFormStatus as useFormStatus } from 'react-dom'; function SubmitButton() { const { pending } = useFormStatus(); return ( <button type="submit" aria-label="Remove cart item" aria-disabled={pending} className={clsx( 'ease flex h-[17px] w-[17px] items-center justify-center rounded-full bg-neutral-500 transition-all duration-200', { 'cursor-not-allowed px-0': pending } )} > {pending ? ( <LoadingDots className="bg-white" /> ) : ( <XMarkIcon className="hover:text-accent-3 mx-[1px] h-4 w-4 text-white dark:text-black" /> )} </button> ); } export function DeleteItemButton({ item }: { item: CartItem }) { const [isPending, startTransition] = useTransition(); const [message, formAction] = useFormState(removeItem, null); const itemId = item.id; const actionWithVariant = formAction.bind(null, itemId); const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => { if (isPending) { event.preventDefault(); } else { startTransition(actionWithVariant); } }; return ( <form action={actionWithVariant} onSubmit={handleSubmit}> <SubmitButton /> <p aria-live="polite" className="sr-only" role="status"> {message} </p> </form> ); }