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

Compare commits

merge into: cx:main
Branches Tags
cx:main
cx:canary-update
cx:form-with-prefetch-fix-test
cx:add-useoptimistic
cx:context
cx:dynamic
cx:integration-guide
cx:pe
cx:profile-cart
cx:repro-1118
cx:jump
cx:v1
crowetic:v1
...
pull from: cx:add-useoptimistic
Branches Tags
cx:main
cx:canary-update
cx:form-with-prefetch-fix-test
cx:add-useoptimistic
cx:context
cx:dynamic
cx:integration-guide
cx:pe
cx:profile-cart
cx:repro-1118
cx:jump
crowetic:main
crowetic:canary-update
crowetic:form-with-prefetch-fix-test
crowetic:add-useoptimistic
crowetic:context
crowetic:dynamic
crowetic:integration-guide
crowetic:pe
crowetic:profile-cart
crowetic:repro-1118
crowetic:jump
cx:v1
crowetic:v1

1 Commits
main ... add-useopt

Author SHA1 Message Date
StephDietz
c12f18d39d use useoptimistic for incrementing cart values 2024-04-03 13:34:31 -05:00
2 changed files with 70 additions and 37 deletions
Show Stats Expand all files Collapse all files

63
components/cart/edit-item-quantity-button.tsx
View File

@ -5,6 +5,7 @@ import clsx from 'clsx';
import { updateItemQuantity } from 'components/cart/actions'; import { updateItemQuantity } from 'components/cart/actions';
import LoadingDots from 'components/loading-dots'; import LoadingDots from 'components/loading-dots';
import type { CartItem } from 'lib/shopify/types'; import type { CartItem } from 'lib/shopify/types';
import { useOptimistic, useState } from 'react';
import { useFormState, useFormStatus } from 'react-dom'; import { useFormState, useFormStatus } from 'react-dom';
function SubmitButton({ type }: { type: 'plus' | 'minus' }) { function SubmitButton({ type }: { type: 'plus' | 'minus' }) {
@ -29,29 +30,67 @@ function SubmitButton({ type }: { type: 'plus' | 'minus' }) {
{pending ? ( {pending ? (
<LoadingDots className="bg-black dark:bg-white" /> <LoadingDots className="bg-black dark:bg-white" />
) : type === 'plus' ? ( ) : type === 'plus' ? (
<PlusIcon className="h-4 w-4 dark:text-neutral-500" /> <PlusIcon className="w-4 h-4 dark:text-neutral-500" />
) : ( ) : (
<MinusIcon className="h-4 w-4 dark:text-neutral-500" /> <MinusIcon className="w-4 h-4 dark:text-neutral-500" />
)} )}
</button> </button>
); );
} }
export function EditItemQuantityButton({ item, type, onQuantityChange }: { item: CartItem; type: 'plus' | 'minus'; onQuantityChange: (quantity: number) => void }) {
export function EditItemQuantityButton({ item, type }: { item: CartItem; type: 'plus' | 'minus' }) {
const [message, formAction] = useFormState(updateItemQuantity, null); const [message, formAction] = useFormState(updateItemQuantity, null);
const payload = {
lineId: item.id, const [optimisticQuantity, setOptimisticQuantity] = useOptimistic(item.quantity, (state: number, change: number) => state + change);
variantId: item.merchandise.id,
quantity: type === 'plus' ? item.quantity + 1 : item.quantity - 1 // const handleSubmit = async (event: React.FormEvent) => {
}; // event.preventDefault();
const actionWithVariant = formAction.bind(null, payload); // 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 ( return (
<form action={actionWithVariant}> <form action={async () => {
<SubmitButton type={type} /> 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"> <p aria-live="polite" className="sr-only" role="status">
{message} {message}
</p> </p>
</form> </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>
);
}

44
components/cart/modal.tsx
View File

@ -11,7 +11,7 @@ import Link from 'next/link';
import { Fragment, useEffect, useRef, useState } from 'react'; import { Fragment, useEffect, useRef, useState } from 'react';
import CloseCart from './close-cart'; import CloseCart from './close-cart';
import { DeleteItemButton } from './delete-item-button'; import { DeleteItemButton } from './delete-item-button';
import { EditItemQuantityButton } from './edit-item-quantity-button'; import { EditItemQuantity } from './edit-item-quantity-button';
import OpenCart from './open-cart'; import OpenCart from './open-cart';
type MerchandiseSearchParams = { type MerchandiseSearchParams = {
@ -74,13 +74,13 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
</div> </div>
{!cart || cart.lines.length === 0 ? ( {!cart || cart.lines.length === 0 ? (
<div className="mt-20 flex w-full flex-col items-center justify-center overflow-hidden"> <div className="flex flex-col items-center justify-center w-full mt-20 overflow-hidden">
<ShoppingCartIcon className="h-16" /> <ShoppingCartIcon className="h-16" />
<p className="mt-6 text-center text-2xl font-bold">Your cart is empty.</p> <p className="mt-6 text-2xl font-bold text-center">Your cart is empty.</p>
</div> </div>
) : ( ) : (
<div className="flex h-full flex-col justify-between overflow-hidden p-1"> <div className="flex flex-col justify-between h-full p-1 overflow-hidden">
<ul className="flex-grow overflow-auto py-4"> <ul className="flex-grow py-4 overflow-auto">
{cart.lines.map((item, i) => { {cart.lines.map((item, i) => {
const merchandiseSearchParams = {} as MerchandiseSearchParams; const merchandiseSearchParams = {} as MerchandiseSearchParams;
@ -98,9 +98,9 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
return ( return (
<li <li
key={i} key={i}
className="flex w-full flex-col border-b border-neutral-300 dark:border-neutral-700" className="flex flex-col w-full border-b border-neutral-300 dark:border-neutral-700"
> >
<div className="relative flex w-full flex-row justify-between px-1 py-4"> <div className="relative flex flex-row justify-between w-full px-1 py-4">
<div className="absolute z-40 -mt-2 ml-[55px]"> <div className="absolute z-40 -mt-2 ml-[55px]">
<DeleteItemButton item={item} /> <DeleteItemButton item={item} />
</div> </div>
@ -109,9 +109,9 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
onClick={closeCart} onClick={closeCart}
className="z-30 flex flex-row space-x-4" className="z-30 flex flex-row space-x-4"
> >
<div className="relative h-16 w-16 cursor-pointer overflow-hidden rounded-md border border-neutral-300 bg-neutral-300 dark:border-neutral-700 dark:bg-neutral-900 dark:hover:bg-neutral-800"> <div className="relative w-16 h-16 overflow-hidden border rounded-md cursor-pointer border-neutral-300 bg-neutral-300 dark:border-neutral-700 dark:bg-neutral-900 dark:hover:bg-neutral-800">
<Image <Image
className="h-full w-full object-cover" className="object-cover w-full h-full"
width={64} width={64}
height={64} height={64}
alt={ alt={
@ -122,7 +122,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
/> />
</div> </div>
<div className="flex flex-1 flex-col text-base"> <div className="flex flex-col flex-1 text-base">
<span className="leading-tight"> <span className="leading-tight">
{item.merchandise.product.title} {item.merchandise.product.title}
</span> </span>
@ -133,19 +133,13 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
) : null} ) : null}
</div> </div>
</Link> </Link>
<div className="flex h-16 flex-col justify-between"> <div className="flex flex-col justify-between h-16">
<Price <Price
className="flex justify-end space-y-2 text-right text-sm" className="flex justify-end space-y-2 text-sm text-right"
amount={item.cost.totalAmount.amount} amount={item.cost.totalAmount.amount}
currencyCode={item.cost.totalAmount.currencyCode} currencyCode={item.cost.totalAmount.currencyCode}
/> />
<div className="ml-auto flex h-9 flex-row items-center rounded-full border border-neutral-200 dark:border-neutral-700"> <EditItemQuantity item={item} />
<EditItemQuantityButton item={item} type="minus" />
<p className="w-6 text-center">
<span className="w-full text-sm">{item.quantity}</span>
</p>
<EditItemQuantityButton item={item} type="plus" />
</div>
</div> </div>
</div> </div>
</li> </li>
@ -153,22 +147,22 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
})} })}
</ul> </ul>
<div className="py-4 text-sm text-neutral-500 dark:text-neutral-400"> <div className="py-4 text-sm text-neutral-500 dark:text-neutral-400">
<div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 dark:border-neutral-700"> <div className="flex items-center justify-between pb-1 mb-3 border-b border-neutral-200 dark:border-neutral-700">
<p>Taxes</p> <p>Taxes</p>
<Price <Price
className="text-right text-base text-black dark:text-white" className="text-base text-right text-black dark:text-white"
amount={cart.cost.totalTaxAmount.amount} amount={cart.cost.totalTaxAmount.amount}
currencyCode={cart.cost.totalTaxAmount.currencyCode} currencyCode={cart.cost.totalTaxAmount.currencyCode}
/> />
</div> </div>
<div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1 dark:border-neutral-700"> <div className="flex items-center justify-between pt-1 pb-1 mb-3 border-b border-neutral-200 dark:border-neutral-700">
<p>Shipping</p> <p>Shipping</p>
<p className="text-right">Calculated at checkout</p> <p className="text-right">Calculated at checkout</p>
</div> </div>
<div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1 dark:border-neutral-700"> <div className="flex items-center justify-between pt-1 pb-1 mb-3 border-b border-neutral-200 dark:border-neutral-700">
<p>Total</p> <p>Total</p>
<Price <Price
className="text-right text-base text-black dark:text-white" className="text-base text-right text-black dark:text-white"
amount={cart.cost.totalAmount.amount} amount={cart.cost.totalAmount.amount}
currencyCode={cart.cost.totalAmount.currencyCode} currencyCode={cart.cost.totalAmount.currencyCode}
/> />
@ -176,7 +170,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
</div> </div>
<a <a
href={cart.checkoutUrl} href={cart.checkoutUrl}
className="block w-full rounded-full bg-blue-600 p-3 text-center text-sm font-medium text-white opacity-90 hover:opacity-100" className="block w-full p-3 text-sm font-medium text-center text-white bg-blue-600 rounded-full opacity-90 hover:opacity-100"
> >
Proceed to Checkout Proceed to Checkout
</a> </a>