'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'; import { useState } from 'react'; import { // @ts-ignore experimental_useFormState as useFormState, experimental_useFormStatus as useFormStatus } from 'react-dom'; function SubmitButton({ availableForSale, selectedVariantId, submitting }: { availableForSale: boolean; selectedVariantId: string | undefined; submitting: boolean; }) { let { pending } = useFormStatus(); pending = pending || submitting; const buttonClasses = 'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white'; const disabledClasses = 'cursor-not-allowed opacity-60 hover:opacity-60'; if (!availableForSale) { return ( ); } if (!selectedVariantId) { return ( ); } return ( ); } export function AddToCart({ variants, availableForSale }: { variants: ProductVariant[]; availableForSale: boolean; }) { const [submitting, setSubmitting] = useState(false); 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 (
{ e.preventDefault(); if (submitting) return; setSubmitting(true); await addItem(message, selectedVariantId); setSubmitting(false); }} >

{message}

); }