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 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' }) {
@ -29,29 +30,67 @@ function SubmitButton({ type }: { type: 'plus' | 'minus' }) {
{pending ? (
<LoadingDots className="bg-black dark:bg-white" />
) : 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>
);
}
export function EditItemQuantityButton({ item, type }: { item: CartItem; type: 'plus' | 'minus' }) {
export function EditItemQuantityButton({ item, type, onQuantityChange }: { item: CartItem; type: 'plus' | 'minus'; onQuantityChange: (quantity: number) => void }) {
const [message, formAction] = useFormState(updateItemQuantity, null);
const payload = {
lineId: item.id,
variantId: item.merchandise.id,
quantity: type === 'plus' ? item.quantity + 1 : item.quantity - 1
};
const actionWithVariant = formAction.bind(null, payload);
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={actionWithVariant}>
<SubmitButton type={type} />
<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>
);
}

44
components/cart/modal.tsx
View File

@ -11,7 +11,7 @@ import Link from 'next/link';
import { Fragment, useEffect, useRef, useState } from 'react';
import CloseCart from './close-cart';
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';
type MerchandiseSearchParams = {
@ -74,13 +74,13 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
</div>
{!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" />
<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 className="flex h-full flex-col justify-between overflow-hidden p-1">
<ul className="flex-grow overflow-auto py-4">
<div className="flex flex-col justify-between h-full p-1 overflow-hidden">
<ul className="flex-grow py-4 overflow-auto">
{cart.lines.map((item, i) => {
const merchandiseSearchParams = {} as MerchandiseSearchParams;
@ -98,9 +98,9 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
return (
<li
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]">
<DeleteItemButton item={item} />
</div>
@ -109,9 +109,9 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
onClick={closeCart}
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
className="h-full w-full object-cover"
className="object-cover w-full h-full"
width={64}
height={64}
alt={
@ -122,7 +122,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
/>
</div>
<div className="flex flex-1 flex-col text-base">
<div className="flex flex-col flex-1 text-base">
<span className="leading-tight">
{item.merchandise.product.title}
</span>
@ -133,19 +133,13 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
) : null}
</div>
</Link>
<div className="flex h-16 flex-col justify-between">
<div className="flex flex-col justify-between h-16">
<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}
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">
<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>
<EditItemQuantity item={item} />
</div>
</div>
</li>
@ -153,22 +147,22 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
})}
</ul>
<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>
<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}
currencyCode={cart.cost.totalTaxAmount.currencyCode}
/>
</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 className="text-right">Calculated at checkout</p>
</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>
<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}
currencyCode={cart.cost.totalAmount.currencyCode}
/>
@ -176,7 +170,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
</div>
<a
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
</a>