'use client'; import clsx from 'clsx'; import { Dialog, Transition } from '@headlessui/react'; import { ShoppingCartIcon, XMarkIcon } from '@heroicons/react/24/outline'; import LoadingDots from 'components/loading-dots'; import Price from 'components/price'; import { DEFAULT_OPTION } from 'lib/constants'; import { createUrl } from 'lib/utils'; import Image from 'next/image'; import Link from 'next/link'; import { Fragment, useEffect, useRef, useState } from 'react'; import { useFormStatus } from 'react-dom'; import { createCartAndSetCookie, redirectToCheckout } from './actions'; import { useCart } from './cart-context'; import { DeleteItemButton } from './delete-item-button'; import { EditItemQuantityButton } from './edit-item-quantity-button'; import OpenCart from './open-cart'; type MerchandiseSearchParams = { [key: string]: string; }; export default function CartModal() { const { cart, updateCartItem } = useCart(); const [isOpen, setIsOpen] = useState(false); const quantityRef = useRef(cart?.totalQuantity); const openCart = () => setIsOpen(true); const closeCart = () => setIsOpen(false); useEffect(() => { if (!cart) { createCartAndSetCookie(); } }, [cart]); useEffect(() => { if ( cart?.totalQuantity && cart?.totalQuantity !== quantityRef.current && cart?.totalQuantity > 0 ) { if (!isOpen) { setIsOpen(true); } quantityRef.current = cart?.totalQuantity; } }, [isOpen, cart?.totalQuantity, quantityRef]); return ( <> ); } function CloseCart({ className }: { className?: string }) { return (
); } function CheckoutButton() { const { pending } = useFormStatus(); return ( ); }