diff --git a/storefront/actions/medusa/cart.ts b/storefront/actions/medusa/cart.ts index 832fa54..ede8fec 100644 --- a/storefront/actions/medusa/cart.ts +++ b/storefront/actions/medusa/cart.ts @@ -108,7 +108,7 @@ export async function updateCartQuantity({ lineItem, quantity, }: { - countryCode?: string; + countryCode: string; lineItem: string; quantity: number; }) { @@ -141,26 +141,6 @@ export async function updateCartQuantity({ } } -export async function deleteLineItem({ - countryCode = "us", - lineItem, -}: { - countryCode?: string; - lineItem: string; -}) { - const cart = await getOrSetCart(countryCode); - - if (!cart) { - throw new Error("Error retrieving or creating cart"); - } - - const cacheTag = await getCacheTag("carts"); - - await medusa.store.cart.deleteLineItem(cart.id, lineItem).then(() => { - revalidateTag(cacheTag); - }); -} - export async function updateCart(data: StoreUpdateCart) { const cartId = await getCartId(); if (!cartId) { diff --git a/storefront/app/[countryCode]/(website)/products/[handle]/_parts/options.tsx b/storefront/app/[countryCode]/(website)/products/[handle]/_parts/options.tsx index 373b9b2..f1144b7 100644 --- a/storefront/app/[countryCode]/(website)/products/[handle]/_parts/options.tsx +++ b/storefront/app/[countryCode]/(website)/products/[handle]/_parts/options.tsx @@ -19,7 +19,7 @@ export default function OptionsSelect({options}: Props) { value: value.toLowerCase(), })); - if (!values || values?.length === 0) return null; + if (!values || values.length <= 1) return null; const activeOption = selectedOptions[option.title.toLowerCase()]; const setOption = (value: string) => setSelectedOptions((prev) => ({ diff --git a/storefront/app/[countryCode]/(website)/products/[handle]/_parts/sticky-atc.tsx b/storefront/app/[countryCode]/(website)/products/[handle]/_parts/sticky-atc.tsx index ca08a0f..de82c6a 100644 --- a/storefront/app/[countryCode]/(website)/products/[handle]/_parts/sticky-atc.tsx +++ b/storefront/app/[countryCode]/(website)/products/[handle]/_parts/sticky-atc.tsx @@ -42,11 +42,14 @@ export default function StickyAtc({ )} >
- {product.options && ( -
- -
- )} + {product.options && + product.options.some( + (option) => (option.values?.length || 0) > 1, + ) && ( +
+ +
+ )}
diff --git a/storefront/components/global/header/cart/cart-context.tsx b/storefront/components/global/header/cart/cart-context.tsx index 1271b8d..d8ff5e4 100644 --- a/storefront/components/global/header/cart/cart-context.tsx +++ b/storefront/components/global/header/cart/cart-context.tsx @@ -11,6 +11,7 @@ import {addToCart, updateCartQuantity} from "@/actions/medusa/cart"; import {usePathname} from "next/navigation"; import { createContext, + useCallback, useContext, useEffect, useOptimistic, @@ -43,8 +44,10 @@ const CartContext = createContext< export function CartProvider({ cart, children, + countryCode, }: PropsWithChildren<{ cart: Cart | null; + countryCode: string; }>) { const [optimisticCart, setOptimisticCart] = useOptimistic(cart); const [cartOpen, setCartOpen] = useState(false); @@ -52,68 +55,71 @@ export function CartProvider({ const [, startTransition] = useTransition(); const pathname = usePathname(); - const handleOptimisticAddToCart = async (payload: AddToCartEventPayload) => { - setCartOpen(true); - - startTransition(async () => { - setOptimisticCart((prev) => { - const items = [...(prev?.items || [])]; - - const existingItemIndex = items.findIndex( - ({variant}) => variant?.id === payload.productVariant.id, - ); - - if (existingItemIndex > -1) { - const item = items[existingItemIndex]; - items[existingItemIndex] = { - ...item, - quantity: item.quantity + 1, + const handleOptimisticAddToCart = useCallback( + async (payload: AddToCartEventPayload) => { + setCartOpen(true); + + startTransition(async () => { + setOptimisticCart((prev) => { + const items = [...(prev?.items || [])]; + + const existingItemIndex = items.findIndex( + ({variant}) => variant?.id === payload.productVariant.id, + ); + + if (existingItemIndex > -1) { + const item = items[existingItemIndex]; + items[existingItemIndex] = { + ...item, + quantity: item.quantity + 1, + }; + return {...prev, items} as Cart; + } + + const priceAmount = + payload.productVariant.calculated_price?.calculated_amount || 0; + + const newItem: StoreCartLineItem = { + cart: prev || ({} as StoreCart), + cart_id: prev?.id || "", + discount_tax_total: 0, + discount_total: 0, + id: generateOptimisticItemId(payload.productVariant.id), + is_discountable: false, + is_tax_inclusive: false, + item_subtotal: priceAmount, + item_tax_total: 0, + item_total: priceAmount, + original_subtotal: priceAmount, + original_tax_total: 0, + original_total: priceAmount, + product: payload.productVariant.product || undefined, + quantity: 1, + requires_shipping: true, + subtotal: priceAmount, + tax_total: 0, + title: payload.productVariant.title || "", + total: priceAmount, + unit_price: priceAmount, + variant: payload.productVariant || undefined, }; - return {...prev, items} as Cart; - } - - const priceAmount = - payload.productVariant.calculated_price?.calculated_amount || 0; - - const newItem: StoreCartLineItem = { - cart: prev || ({} as StoreCart), - cart_id: prev?.id || "", - discount_tax_total: 0, - discount_total: 0, - id: generateOptimisticItemId(payload.productVariant.id), - is_discountable: false, - is_tax_inclusive: false, - item_subtotal: priceAmount, - item_tax_total: 0, - item_total: priceAmount, - original_subtotal: priceAmount, - original_tax_total: 0, - original_total: priceAmount, - product: payload.productVariant.product || undefined, - quantity: 1, - requires_shipping: true, - subtotal: priceAmount, - tax_total: 0, - title: payload.productVariant.title || "", - total: priceAmount, - unit_price: priceAmount, - variant: payload.productVariant || undefined, - }; - const newItems = [...items, newItem]; + const newItems = [...items, newItem]; - const newTotal = calculateCartTotal(newItems); + const newTotal = calculateCartTotal(newItems); - return {...prev, items: newItems, total: newTotal} as Cart; - }); + return {...prev, items: newItems, total: newTotal} as Cart; + }); - await addToCart({ - quantity: 1, - region_id: payload.regionId, - variantId: payload.productVariant.id, + await addToCart({ + quantity: 1, + region_id: payload.regionId, + variantId: payload.productVariant.id, + }); }); - }); - }; + }, + [setCartOpen, setOptimisticCart], + ); useEffect(() => { addToCartEventBus.registerCartAddHandler(handleOptimisticAddToCart); @@ -164,6 +170,7 @@ export function CartProvider({ if (!isOptimisticItemId(lineItem)) { await updateCartQuantity({ + countryCode, lineItem, quantity, }); diff --git a/storefront/components/global/header/cart/index.tsx b/storefront/components/global/header/cart/index.tsx index 237271e..51475c8 100644 --- a/storefront/components/global/header/cart/index.tsx +++ b/storefront/components/global/header/cart/index.tsx @@ -34,7 +34,7 @@ export default async function Cart({ ) : null; return ( - + ); diff --git a/storefront/components/shared/input-combobox.tsx b/storefront/components/shared/input-combobox.tsx index 7b42f37..98a0ab3 100644 --- a/storefront/components/shared/input-combobox.tsx +++ b/storefront/components/shared/input-combobox.tsx @@ -81,15 +81,19 @@ export default forwardRef< return (
- + {!isDisabled && ( + + )}