commerce/components/cart/add-to-cart.tsx

'use client';

import { PlusIcon } from '@heroicons/react/24/outline';
import clsx from 'clsx';
import { addItem } from 'components/cart/actions';
import LoadingDots from 'components/loading-dots';
import { ProductVariant } from 'lib/shopify/types';
import { useSearchParams } from 'next/navigation';
// @ts-ignore
import { experimental_useFormState as useFormState, experimental_useFormStatus as useFormStatus } from 'react-dom';

function SubmitButton({ availableForSale, selectedVariantId }: {
  availableForSale: boolean;
  selectedVariantId: string | undefined;
}) {
  const { pending } = useFormStatus()
  const buttonClasses = 'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white'

  if (!availableForSale) {
    return <button aria-disabled className={clsx(
      buttonClasses,
      'cursor-not-allowed opacity-60 hover:opacity-60'
    )}>
    Out Of Stock
  </button>
  }

  if (!selectedVariantId) {
    return <button aria-label="Please select an option" aria-disabled className={clsx(
      buttonClasses,
      'cursor-not-allowed opacity-60 hover:opacity-60'
    )}>
      <div className="absolute left-0 ml-4">
      <PlusIcon className="h-5" />
      </div>
      Add To Cart
  </button>
  }

  return (
    <button type="submit" aria-disabled={pending} className={clsx(
      buttonClasses,
      {
        'hover:opacity-90': true,
        'cursor-not-allowed': pending
      }
    )}>
      <div className="absolute left-0 ml-4">
        {!pending ? <PlusIcon className="h-5" /> : <LoadingDots className="mb-3 bg-white" />}
      </div>
      Add To Cart
    </button> 
  )
  
}

export function AddToCart({
  variants,
  availableForSale
}: {
  variants: ProductVariant[];
  availableForSale: boolean;
}) {
  const [message, formAction] = useFormState(addItem, null)
  const searchParams = useSearchParams();
  const defaultVariantId = variants.length === 1 ? variants[0]?.id : undefined;
  const variant = variants.find((variant: ProductVariant) =>
    variant.selectedOptions.every(
      (option) => option.value === searchParams.get(option.name.toLowerCase())
    )
  );
  const selectedVariantId = variant?.id || defaultVariantId;
  const actionWithVariant = formAction.bind(null, selectedVariantId)

  return (
    <form action={actionWithVariant}
    >
      <SubmitButton availableForSale={availableForSale} selectedVariantId={selectedVariantId} />
      <p aria-live="polite" className="sr-only" role="status">
        {message}
      </p>
    </form>
  )
}