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

Adds add to cart safeguard

Browse Source
This commit is contained in:
Michael Novotny 2023-07-27 23:41:04 -05:00
parent 6bae5081d6
commit 4aafac469a
No known key found for this signature in database
1 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,7 +15,7 @@ export function AddToCart({
variants: ProductVariant[]; variants: ProductVariant[];
availableForSale: boolean; availableForSale: boolean;
}) { }) {
const [selectedVariantId, setSelectedVariantId] = useState(variants[0]?.id); const [selectedVariantId, setSelectedVariantId] = useState<string | undefined>(undefined);
const router = useRouter(); const router = useRouter();
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const [isPending, startTransition] = useTransition(); const [isPending, startTransition] = useTransition();
@ -27,17 +27,24 @@ export function AddToCart({
) )
); );
if (variant) { setSelectedVariantId(variant?.id);
setSelectedVariantId(variant.id);
}
}, [searchParams, variants, setSelectedVariantId]); }, [searchParams, variants, setSelectedVariantId]);
const title = !availableForSale
? 'Out of stock'
: !selectedVariantId
? 'Please select options'
: undefined;
return ( return (
<button <button
aria-label="Add item to cart" aria-label="Add item to cart"
disabled={isPending} disabled={isPending || !availableForSale || !selectedVariantId}
title={title}
onClick={() => { onClick={() => {
if (!availableForSale) return; // Safeguard in case someone messes with `disabled` in devtools.
if (!availableForSale || !selectedVariantId) return;
startTransition(async () => { startTransition(async () => {
const error = await addItem(selectedVariantId); const error = await addItem(selectedVariantId);
@ -52,7 +59,7 @@ export function AddToCart({
className={clsx( className={clsx(
'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90', 'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90',
{ {
'cursor-not-allowed opacity-60': !availableForSale, 'cursor-not-allowed opacity-60 hover:opacity-60': !availableForSale || !selectedVariantId,
'cursor-not-allowed': isPending 'cursor-not-allowed': isPending
} }
)} )}