diff options
4 files changed, 49 insertions, 21 deletions
diff --git a/src-migrate/modules/cart/components/ItemSelect.tsx b/src-migrate/modules/cart/components/ItemSelect.tsx index b904a1de..d4a1b537 100644 --- a/src-migrate/modules/cart/components/ItemSelect.tsx +++ b/src-migrate/modules/cart/components/ItemSelect.tsx @@ -13,23 +13,25 @@ type Props = { const CartItemSelect = ({ item }: Props) => { const auth = getAuth() - const { loadCart } = useCartStore() + const { updateCartItem, cart } = useCartStore() const [isLoad, setIsLoad] = useState<boolean>(false) const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => { - if (typeof auth !== 'object') return - - setIsLoad(true) - await upsertUserCart({ - userId: auth.id, - type: item.cart_type, - id: item.id, - qty: item.quantity, - selected: e.target.checked - }) - await loadCart(auth.id) - setIsLoad(false) + if (typeof auth !== 'object' || !cart) return + + setIsLoad(true); + const updatedCartItems = cart.products.map(cartItem => + cartItem.id === item.id + ? { ...cartItem, selected: e.target.checked } + : cartItem + ); + + // Update the entire cart + const updatedCart = { ...cart, products: updatedCartItems }; + updateCartItem(updatedCart); + + setIsLoad(false); } return ( diff --git a/src-migrate/modules/product-promo/components/AddToCart.tsx b/src-migrate/modules/product-promo/components/AddToCart.tsx index 3d0955e3..a3938142 100644 --- a/src-migrate/modules/product-promo/components/AddToCart.tsx +++ b/src-migrate/modules/product-promo/components/AddToCart.tsx @@ -135,7 +135,7 @@ const ProductPromoAddToCart = ({product, promotion }: Props) => { {!!product?.manufacture?.name ? ( <Link href={createSlug('/shop/brands/', product.manufacture.name, product.manufacture.id.toString())} - className=' hover:underline' + className=' hover:underline text-red-500' color={"red"} > {product.manufacture.name} diff --git a/src-migrate/pages/shop/cart/index.tsx b/src-migrate/pages/shop/cart/index.tsx index c9ff86b7..2fa53681 100644 --- a/src-migrate/pages/shop/cart/index.tsx +++ b/src-migrate/pages/shop/cart/index.tsx @@ -28,7 +28,7 @@ const CartPage = () => { const [buttonSelectNow, setButtonSelectNow] = useState(true); const [isLoad, setIsLoad] = useState<boolean>(false) const [isLoadDelete, setIsLoadDelete] = useState<boolean>(false) - const { loadCart, cart, summary, updateCartItem} = useCartStore(); + const { loadCart, cart, summary, updateCartItem } = useCartStore(); const useDivvice = useDevice(); const { setRefreshCart } = useProductCartContext() const [isTop, setIsTop] = useState(true); @@ -101,6 +101,31 @@ const CartPage = () => { return cart.products.every(item => item.selected); }, [cart]); + + useEffect(() => { + const updateCartItems = async () => { + if (typeof auth === 'object' && cart) { + const upsertPromises = cart.products.map(item => + upsertUserCart({ + userId: auth.id, + type: item.cart_type, + id: item.id, + qty: item.quantity, + selected: item.selected + }) + ); + try { + await Promise.all(upsertPromises); + await loadCart(auth.id); + } catch (error) { + console.error('Failed to update cart items:', error); + } + } + }; + + updateCartItems(); + }, [hasChanged]); + const handleCheckout = () => { router.push('/shop/checkout'); } @@ -151,7 +176,7 @@ const CartPage = () => { return ( <> - <div className={`${isTop ? 'border-b-[0px]' : 'border-b-[1px]'} sticky top-[180px] bg-white py-4 border-gray-300 z-50 w-3/4`}> + <div className={`${isTop ? 'border-b-[0px]' : 'border-b-[1px]'} sticky top-[157px] bg-white py-4 border-gray-300 z-50 w-3/4`}> <div className={`${style['title']}`}>Keranjang Belanja</div> <div className='h-2' /> <div className={`flex items-center object-center justify-between `}> @@ -169,7 +194,7 @@ const CartPage = () => { /> )} <p className='p-2 text-caption-2'> - {hasSelectedAll ? "Unchek all" : "Select all"} + {hasSelectedAll ? "Uncheck all" : "Select all"} </p> </div> <div className='delate all flex items-center object-center'> @@ -183,7 +208,7 @@ const CartPage = () => { variant='outline' colorScheme='red' w='full' - isDisabled={!hasSelected || hasSelectNoPrice} + isDisabled={!hasSelected} onClick={handleDelete} > {isLoadDelete && <Spinner size='xs' />} @@ -290,4 +315,4 @@ const CartPage = () => { ); }; -export default CartPage; +export default CartPage;
\ No newline at end of file diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx index ff08a4a1..454202df 100644 --- a/src/core/components/elements/Navbar/NavbarDesktop.jsx +++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx @@ -32,6 +32,7 @@ import { } from '@chakra-ui/react'; import style from "./style/NavbarDesktop.module.css"; import useTransactions from '@/lib/transaction/hooks/useTransactions'; +import { useCartStore } from '~/modules/cart/stores/useCartStore'; const Search = dynamic(() => import('./Search'), { ssr: false }); const TopBanner = dynamic(() => import('./TopBanner'), { ssr: false }); @@ -46,7 +47,7 @@ const NavbarDesktop = () => { const [templateWA, setTemplateWA] = useState(null); const [payloadWA, setPayloadWa] = useState(null); const [urlPath, setUrlPath] = useState(null); - + const { loadCart, cart, summary, updateCartItem } = useCartStore(); const router = useRouter(); const { product } = useProductContext(); @@ -136,7 +137,7 @@ const NavbarDesktop = () => { return () => { window.removeEventListener('localStorageChange', handleCartChange); }; - }, [transactions.data]); + }, [transactions.data, cart]); useEffect(() => { const handleQuotationChange = () => { |