commerce/components/cart/delete-item-button.tsx

'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 { useState } from 'react';
import {
  // @ts-ignore
  experimental_useFormState as useFormState,
  experimental_useFormStatus as useFormStatus
} from 'react-dom';

function SubmitButton({ submitting }: { submitting: boolean }) {
  let { pending } = useFormStatus();
  pending = pending || submitting;

  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 [submitting, setSubmitting] = useState(false);
  const [message, formAction] = useFormState(removeItem, null);
  const itemId = item.id;
  const actionWithVariant = formAction.bind(null, itemId);

  return (
    <form
      action={actionWithVariant}
      // Prevent double clicks
      onClick={async (e) => {
        e.preventDefault();
        if (submitting) return;
        setSubmitting(true);
        await removeItem(message, itemId);
        setSubmitting(false);
      }}
    >
      <SubmitButton submitting={submitting} />
      <p aria-live="polite" className="sr-only" role="status">
        {message}
      </p>
    </form>
  );
}