summaryrefslogtreecommitdiff
path: root/src/lib/cart/components/Cartheader.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/cart/components/Cartheader.jsx')
-rw-r--r--src/lib/cart/components/Cartheader.jsx309
1 files changed, 219 insertions, 90 deletions
diff --git a/src/lib/cart/components/Cartheader.jsx b/src/lib/cart/components/Cartheader.jsx
index 1760360d..3fc959d4 100644
--- a/src/lib/cart/components/Cartheader.jsx
+++ b/src/lib/cart/components/Cartheader.jsx
@@ -1,49 +1,128 @@
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
import { getCartApi } from '../api/CartApi'
import currencyFormat from '@/core/utils/currencyFormat'
import Image from '@/core/components/elements/Image/Image'
import { createSlug } from '@/core/utils/slug'
+import useAuth from '@/core/hooks/useAuth'
+import { useRouter } from 'next/router'
+import odooApi from '@/core/api/odooApi'
+import { useProductCartContext } from '@/contexts/ProductCartContext'
-const { ShoppingCartIcon } = require('@heroicons/react/24/outline')
+const { ShoppingCartIcon, PhotoIcon } = require('@heroicons/react/24/outline')
const { default: Link } = require('next/link')
const Cardheader = (cartCount) => {
- const [count, setCardCount] = useState(null)
- const [products, setProducts] = useState(null)
+ const router = useRouter()
+ const [subTotal, setSubTotal] = useState(null)
+ const [buttonLoading, SetButtonTerapkan] = useState(false)
+ const itemLoading = [1, 2, 3]
+ const auth = useAuth()
+ const [countCart, setCountCart] = useState(null)
+ const { productCart, setRefreshCart, setProductCart, refreshCart, isLoading, setIsloading } =
+ useProductCartContext()
- const getCart = async () => {
- const listCart = await getCartApi()
- setProducts(listCart.products)
+ const [isHovered, setIsHovered] = useState(false)
+
+ const products = useMemo(() => {
+ return productCart?.products || []
+ }, [productCart])
+
+
+ const handleMouseEnter = () => {
+ setIsHovered(true)
+ getCart()
+ }
+
+ const handleMouseLeave = () => {
+ setIsHovered(false)
+ }
+
+ const getCart = () => {
+ if (!productCart && auth) {
+ refreshCartf()
+ }
}
+ const refreshCartf = useCallback(async () => {
+ setIsloading(true)
+ let cart = await getCartApi()
+ setProductCart(cart)
+ setCountCart(cart.productTotal)
+ setIsloading(false)
+ }, [setProductCart])
useEffect(() => {
- getCart()
+ if (!products) return
+
+ let calculateTotalPriceBeforeTax = 0
+ let calculateTotalTaxAmount = 0
+ let calculateTotalDiscountAmount = 0
+ for (const product of products) {
+ if (product.quantity == '') continue
+
+ let priceBeforeTax = product.price.price / 1.11
+ calculateTotalPriceBeforeTax += priceBeforeTax * product.quantity
+ calculateTotalTaxAmount += (product.price.price - priceBeforeTax) * product.quantity
+ calculateTotalDiscountAmount +=
+ (product.price.price - product.price.priceDiscount) * product.quantity
+ }
+ let subTotal =
+ calculateTotalPriceBeforeTax - calculateTotalDiscountAmount + calculateTotalTaxAmount
+ setSubTotal(subTotal)
+ }, [products])
+
+ useEffect(() => {
+ if (refreshCart) {
+ refreshCartf()
+ }
+ setRefreshCart(false)
+ }, [refreshCart, refreshCartf, setRefreshCart])
+
+ useEffect(() => {
+ setCountCart(cartCount.cartCount)
}, [])
+ const handleCheckout = async () => {
+ SetButtonTerapkan(true)
+ let checkoutAll = await odooApi('POST', `/api/v1/user/${auth.id}/cart/select-all`)
+ router.push('/shop/checkout')
+ }
+
return (
<div className='relative group'>
- <Link
- href='/shop/cart'
- target='_blank'
- rel='noreferrer'
- className='flex items-center gap-x-2 !text-gray_r-12/80'
+ <div>
+ <Link
+ href='/shop/cart'
+ target='_blank'
+ rel='noreferrer'
+ className='flex items-center gap-x-2 !text-gray_r-12/80'
+ onMouseEnter={handleMouseEnter}
+ onMouseLeave={handleMouseLeave}
+ >
+ <div className={`relative ${countCart > 0 && 'mr-2'}`}>
+ <ShoppingCartIcon className='w-7' />
+ {countCart > 0 && (
+ <span className='absolute -top-2 -right-2 badge-solid-red rounded-full w-5 h-5 flex items-center justify-center'>
+ {countCart}
+ </span>
+ )}
+ </div>
+ <span>
+ Keranjang
+ <br />
+ Belanja
+ </span>
+ </Link>
+ </div>
+ <div
+ className={` ${
+ isHovered ? 'block' : 'hidden'
+ } fixed top-[155px] left-0 w-full h-full bg-black opacity-50 z-10`}
+ ></div>
+ <div
+ className='hidden group-hover:block absolute z-10 left-0 w-96'
+ onMouseEnter={handleMouseEnter}
+ onMouseLeave={handleMouseLeave}
>
- <div className={`relative ${cartCount.cartCount > 0 && 'mr-2'}`}>
- <ShoppingCartIcon className='w-7' />
- {cartCount.cartCount > 0 && (
- <span className='absolute -top-2 -right-2 badge-solid-red rounded-full w-5 h-5 flex items-center justify-center'>
- {cartCount.cartCount}
- </span>
- )}
- </div>
- <span>
- Keranjang
- <br />
- Belanja
- </span>
- </Link>
- {/* <div className='hidden group-hover:block fixed top-0 left-0 w-full h-full bg-black opacity-50 z-10'></div> */}
- <div className='hidden group-hover:block absolute z-10 left-0 w-96'>
<div className='w-full max-w-md p-2 bg-white border border-gray-200 rounded-lg shadow'>
<div className='p-2 flex justify-between items-center'>
<h5 class='text-base font-semibold leading-none'>Keranjang Belanja</h5>
@@ -53,71 +132,121 @@ const Cardheader = (cartCount) => {
</div>
<hr className='mt-3 mb-3 border border-gray-100' />
<div className='flow-root max-h-[250px] overflow-y-auto'>
- <ul role='list' class='divide-y divide-gray-200 dark:divide-gray-700'>
- {products &&
- products?.map((product, index) => (
- <>
- <li class='py-1 sm:py-2'>
- <div class='flex items-center space-x-4'>
- <div class='flex-shrink-0'>
- <Link
- href={createSlug(
- '/shop/product/',
- product?.parent.name,
- product?.parent.id
- )}
- className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
- >
- <Image
- src={product?.parent?.image}
- alt={product?.name}
- className='object-contain object-center border border-gray_r-6 h-16 w-16 rounded-md'
- />
- </Link>
- </div>
- <div class='flex-1 min-w-0'>
- <Link
- href={createSlug(
- '/shop/product/',
- product?.parent.name,
- product?.parent.id
- )}
- className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
- >
- {' '}
- <p class='text-caption-2 font-medium text-gray-900 truncate dark:text-white'>
- {product.parent.name}
- </p>
- </Link>
-
- {product?.price?.discountPercentage > 0 && (
- <div className='flex gap-x-1 items-center mb-2 mt-1'>
- <div className='badge-solid-red'>
- {product?.price?.discountPercentage}%
- </div>
- <div className='text-gray_r-11 line-through text-caption-2'>
- {currencyFormat(product?.price?.price)}
- </div>
+ {!auth && (
+ <div className='justify-center p-4'>
+ <p className='text-gray-500 text-center '>
+ Silahkan{' '}
+ <Link href='/login' className='text-red-600 underline leading-6'>
+ Login
+ </Link>{' '}
+ Untuk Melihat Daftar Keranjang Belanja Anda
+ </p>
+ </div>
+ )}
+ {isLoading &&
+ itemLoading.map((item) => (
+ <div key={item} role='status' class='max-w-sm animate-pulse'>
+ <div class='flex items-center space-x-4 mb- 2'>
+ <div class='flex-shrink-0'>
+ <PhotoIcon class='h-16 w-16 text-gray-500' />
+ </div>
+ <div class='flex-1 min-w-0'>
+ <div class='h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4'></div>
+ <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px] mb-2.5'></div>
+ <div class='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
+ </div>
+ </div>
+ </div>
+ ))}
+ {products.length === 0 && !isLoading && (
+ <div className='justify-center p-4'>
+ <p className='text-gray-500 text-center '>
+ Tidak Ada Produk di Keranjang Belanja Anda
+ </p>
+ </div>
+ )}
+ {products.length > 0 && !isLoading && (
+ <>
+ <ul role='list' class='divide-y divide-gray-200 dark:divide-gray-700'>
+ {products &&
+ products?.map((product, index) => (
+ <>
+ <li class='py-1 sm:py-2'>
+ <div class='flex items-center space-x-4'>
+ <div class='flex-shrink-0'>
+ <Link
+ href={createSlug(
+ '/shop/product/',
+ product?.parent.name,
+ product?.parent.id
+ )}
+ className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
+ >
+ <Image
+ src={product?.parent?.image}
+ alt={product?.name}
+ className='object-contain object-center border border-gray_r-6 h-16 w-16 rounded-md'
+ />
+ </Link>
</div>
- )}
- <div className='flex justify-between items-center'>
- <div className='font-semibold text-sm text-red-600'>
- {currencyFormat(product?.price?.priceDiscount)}
+ <div class='flex-1 min-w-0'>
+ <Link
+ href={createSlug(
+ '/shop/product/',
+ product?.parent.name,
+ product?.parent.id
+ )}
+ className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
+ >
+ {' '}
+ <p class='text-caption-2 font-medium text-gray-900 truncate dark:text-white'>
+ {product.parent.name}
+ </p>
+ </Link>
+
+ {product?.price?.discountPercentage > 0 && (
+ <div className='flex gap-x-1 items-center mb-2 mt-1'>
+ <div className='badge-solid-red'>
+ {product?.price?.discountPercentage}%
+ </div>
+ <div className='text-gray_r-11 line-through text-caption-2'>
+ {currencyFormat(product?.price?.price)}
+ </div>
+ </div>
+ )}
+ <div className='flex justify-between items-center'>
+ <div className='font-semibold text-sm text-red-600'>
+ {currencyFormat(product?.price?.priceDiscount)}
+ </div>
+ </div>
</div>
</div>
- </div>
- </div>
- </li>
- </>
- ))}
- </ul>
- <hr />
+ </li>
+ </>
+ ))}
+ </ul>
+ <hr />
+ </>
+ )}
</div>
- {/* <div className='mt-3'>
- <Link href='#' className='text-caption-1 text-red-600 underline'>
- Buka Keranjang Belanja
- </Link>
- </div> */}
+ {products.length > 0 && !isLoading && (
+ <>
+ <div className='mt-3'>
+ <span className='text-gray-400 text-caption-2'>Sub Total Sebelum PPN : </span>
+ <span className='font-semibold text-red-600'>Rp. {currencyFormat(subTotal)}</span>
+ </div>
+ <div className='mt-5 mb-2'>
+ <button
+ type='button'
+ className='btn-solid-red rounded-lg w-full'
+ onClick={handleCheckout}
+ disabled={buttonLoading}
+ >
+ {buttonLoading ? 'Loading...' : 'Lanjutkan Ke Pembayaran'}
+ </button>
+ </div>
+ </>
+ )}
</div>
</div>
</div>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 01:02:14 +0000