4
0
forked from crowetic/commerce
commerce/components/cart/edit-item-quantity-button.tsx
2024-04-03 13:34:31 -05:00

97 lines
3.4 KiB
TypeScript

'use client';
import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline';
import clsx from 'clsx';
import { updateItemQuantity } from 'components/cart/actions';
import LoadingDots from 'components/loading-dots';
import type { CartItem } from 'lib/shopify/types';
import { useOptimistic, useState } from 'react';
import { useFormState, useFormStatus } from 'react-dom';
function SubmitButton({ type }: { type: 'plus' | 'minus' }) {
const { pending } = useFormStatus();
return (
<button
type="submit"
onClick={(e: React.FormEvent<HTMLButtonElement>) => {
if (pending) e.preventDefault();
}}
aria-label={type === 'plus' ? 'Increase item quantity' : 'Reduce item quantity'}
aria-disabled={pending}
className={clsx(
'ease flex h-full min-w-[36px] max-w-[36px] flex-none items-center justify-center rounded-full px-2 transition-all duration-200 hover:border-neutral-800 hover:opacity-80',
{
'cursor-not-allowed': pending,
'ml-auto': type === 'minus'
}
)}
>
{pending ? (
<LoadingDots className="bg-black dark:bg-white" />
) : type === 'plus' ? (
<PlusIcon className="w-4 h-4 dark:text-neutral-500" />
) : (
<MinusIcon className="w-4 h-4 dark:text-neutral-500" />
)}
</button>
);
}
export function EditItemQuantityButton({ item, type, onQuantityChange }: { item: CartItem; type: 'plus' | 'minus'; onQuantityChange: (quantity: number) => void }) {
const [message, formAction] = useFormState(updateItemQuantity, null);
const [optimisticQuantity, setOptimisticQuantity] = useOptimistic(item.quantity, (state: number, change: number) => state + change);
// const handleSubmit = async (event: React.FormEvent) => {
// event.preventDefault();
// const change = type === 'plus' ? 1 : -1;
// setOptimisticQuantity(change);
// onQuantityChange(optimisticQuantity + change);
// const updatedPayload = {
// lineId: item.id,
// variantId: item.merchandise.id,
// quantity: optimisticQuantity + change
// };
// await formAction(updatedPayload);
// };
return (
<form action={async () => {
const change = type === 'plus' ? 1 : -1;
setOptimisticQuantity(change);
onQuantityChange(optimisticQuantity + change);
const updatedPayload = {
lineId: item.id,
variantId: item.merchandise.id,
quantity: optimisticQuantity + change
};
const actionWithVariant = formAction.bind(null, updatedPayload);
await actionWithVariant();
}}>
<SubmitButton type={type} pending={!!message} />
<p aria-live="polite" className="sr-only" role="status">
{message}
</p>
</form>
);
}
export function EditItemQuantity({ item }: { item: CartItem }) {
const [quantity, setQuantity] = useState(item.quantity);
const handleQuantityChange = (newQuantity: number) => setQuantity(newQuantity);
return (
<div className="flex flex-row items-center ml-auto border rounded-full h-9 border-neutral-200 dark:border-neutral-700">
<EditItemQuantityButton item={{ ...item, quantity }} type="minus" onQuantityChange={handleQuantityChange} />
<p className="w-6 text-center">
<span className="w-full text-sm">{quantity}</span>
</p>
<EditItemQuantityButton item={{ ...item, quantity }} type="plus" onQuantityChange={handleQuantityChange} />
</div>
);
}