crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-13 21:27:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Format

Browse Source
This commit is contained in:
Lee Robinson 2023-09-30 21:59:54 -05:00
parent b02a9d1cad
commit 0024f4d3ee
1 changed files with 52 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
components/cart/add-to-cart.tsx
View File

@ -7,51 +7,66 @@ 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';
import {
experimental_useFormState as useFormState,
experimental_useFormStatus as useFormStatus
} from 'react-dom';
function SubmitButton({ availableForSale, selectedVariantId }: {
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'
const { pending } = useFormStatus();
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 <button aria-disabled className={clsx(
buttonClasses,
'cursor-not-allowed opacity-60 hover:opacity-60'
)}>
Out Of Stock
</button>
return (
<button aria-disabled className={clsx(buttonClasses, disabledClasses)}>
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
aria-label="Please select an option"
aria-disabled
className={clsx(buttonClasses, disabledClasses)}
>
<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,
{
<button
type="submit"
aria-label="Add to cart"
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" />}
{!pending ? (
<PlusIcon className="h-5" />
) : (
<LoadingDots className="mb-3 bg-white" />
)}
</div>
Add To Cart
</button>
)
</button>
);
}
export function AddToCart({
@ -61,7 +76,7 @@ export function AddToCart({
variants: ProductVariant[];
availableForSale: boolean;
}) {
const [message, formAction] = useFormState(addItem, null)
const [message, formAction] = useFormState(addItem, null);
const searchParams = useSearchParams();
const defaultVariantId = variants.length === 1 ? variants[0]?.id : undefined;
const variant = variants.find((variant: ProductVariant) =>
@ -70,15 +85,17 @@ export function AddToCart({
)
);
const selectedVariantId = variant?.id || defaultVariantId;
const actionWithVariant = formAction.bind(null, selectedVariantId)
const actionWithVariant = formAction.bind(null, selectedVariantId);
return (
<form action={actionWithVariant}
>
<SubmitButton availableForSale={availableForSale} selectedVariantId={selectedVariantId} />
<form action={actionWithVariant}>
<SubmitButton
availableForSale={availableForSale}
selectedVariantId={selectedVariantId}
/>
<p aria-live="polite" className="sr-only" role="status">
{message}
</p>
</form>
)
}
);
}