cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Disables Add to Cart while mutating (#987)

Browse Source
This commit is contained in:
Michael Novotny 2023-04-25 09:38:47 -05:00 committed by GitHub
parent c2b96d6e2f
commit af21b29b73
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/product/add-to-cart.tsx
View File

@ -1,5 +1,6 @@
'use client'; 'use client';
import clsx from 'clsx';
import { useRouter, useSearchParams } from 'next/navigation'; import { useRouter, useSearchParams } from 'next/navigation';
import { useEffect, useState, useTransition } from 'react'; import { useEffect, useState, useTransition } from 'react';
@ -62,10 +63,15 @@ export function AddToCart({
return ( return (
<button <button
aria-label="Add item to cart" aria-label="Add item to cart"
disabled={isMutating}
onClick={handleAdd} onClick={handleAdd}
className={`${ className={clsx(
availableForSale ? 'opacity-90 hover:opacity-100' : 'cursor-not-allowed opacity-60' 'flex w-full items-center justify-center bg-black p-4 text-sm uppercase tracking-wide text-white opacity-90 hover:opacity-100 dark:bg-white dark:text-black',
} flex w-full items-center justify-center bg-black p-4 text-sm uppercase tracking-wide text-white dark:bg-white dark:text-black`} {
'cursor-not-allowed opacity-60': !availableForSale,
'cursor-not-allowed': isMutating
}
)}
> >
<span>{availableForSale ? 'Add To Cart' : 'Out Of Stock'}</span> <span>{availableForSale ? 'Add To Cart' : 'Out Of Stock'}</span>
{isMutating ? <LoadingDots className="bg-white dark:bg-black" /> : null} {isMutating ? <LoadingDots className="bg-white dark:bg-black" /> : null}