diff options
Diffstat (limited to 'src-migrate')
| -rw-r--r-- | src-migrate/modules/cart/components/ItemSelect.tsx | 28 | ||||
| -rw-r--r-- | src-migrate/modules/product-promo/components/AddToCart.tsx | 2 | ||||
| -rw-r--r-- | src-migrate/pages/shop/cart/index.tsx | 35 |
3 files changed, 46 insertions, 19 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 |