crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-19 16:07:01 +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[];
availableForSale: boolean;
}) {
const [selectedVariantId, setSelectedVariantId] = useState(variants[0]?.id);
const [selectedVariantId, setSelectedVariantId] = useState<string | undefined>(undefined);
const router = useRouter();
const searchParams = useSearchParams();
const [isPending, startTransition] = useTransition();
@ -27,17 +27,24 @@ export function AddToCart({
)
);
if (variant) {
setSelectedVariantId(variant.id);
}
setSelectedVariantId(variant?.id);
}, [searchParams, variants, setSelectedVariantId]);
const title = !availableForSale
? 'Out of stock'
: !selectedVariantId
? 'Please select options'
: undefined;
return (
<button
aria-label="Add item to cart"
disabled={isPending}
disabled={isPending || !availableForSale || !selectedVariantId}
title={title}
onClick={() => {
if (!availableForSale) return;
// Safeguard in case someone messes with `disabled` in devtools.
if (!availableForSale || !selectedVariantId) return;
startTransition(async () => {
const error = await addItem(selectedVariantId);
@ -52,7 +59,7 @@ export function AddToCart({
className={clsx(
'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
}
)}