summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/contexts/ProductCartContext.js21
-rw-r--r--src/core/components/elements/Navbar/NavbarDesktop.jsx10
-rw-r--r--src/lib/cart/components/Cartheader.jsx309
-rw-r--r--src/lib/product/api/productSimilarApi.js12
-rw-r--r--src/lib/product/components/Product/ProductDesktop.jsx4
-rw-r--r--src/pages/_app.jsx77
6 files changed, 295 insertions, 138 deletions
diff --git a/src/contexts/ProductCartContext.js b/src/contexts/ProductCartContext.js
new file mode 100644
index 00000000..06e97563
--- /dev/null
+++ b/src/contexts/ProductCartContext.js
@@ -0,0 +1,21 @@
+import { createContext, useCallback, useContext, useEffect, useState } from 'react'
+
+const ProductCartContext = createContext()
+
+export const ProductCartProvider = ({ children }) => {
+ const [productCart, setProductCart] = useState(null)
+ const [refreshCart, setRefreshCart] = useState(false)
+ const [isLoading, setIsloading] = useState(false)
+
+ return (
+ <ProductCartContext.Provider
+ value={{ productCart, setProductCart, refreshCart, setRefreshCart, isLoading, setIsloading }}
+ >
+ {children}
+ </ProductCartContext.Provider>
+ )
+}
+
+export const useProductCartContext = () => {
+ return useContext(ProductCartContext)
+}
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index 2bee64f7..3aba55c9 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -10,17 +10,14 @@ import DesktopView from '../../views/DesktopView'
import dynamic from 'next/dynamic'
import IndoteknikLogo from '@/images/logo.png'
import Category from '@/lib/category/components/Category'
-import { useContext, useEffect, useState } from 'react'
+import { useCallback, useContext, useEffect, useState } from 'react'
import useAuth from '@/core/hooks/useAuth'
import NavbarUserDropdown from './NavbarUserDropdown'
-import { getCountCart } from '@/core/utils/cart'
+import { getCartApi, getCountCart } from '@/core/utils/cart'
import whatsappUrl from '@/core/utils/whatsappUrl'
import { useRouter } from 'next/router'
import { getAuth, setAuth } from '@/core/utils/auth'
import { createSlug, getIdFromSlug } from '@/core/utils/slug'
-import productApi from '@/lib/product/api/productApi'
-import { useSession } from 'next-auth/react'
-import { AuthContext } from '@/pages/_app'
import { TopBannerSkeleton } from '../Skeleton/TopBannerSkeleton'
import { useProductContext } from '@/contexts/ProductContext'
import Cardheader from '@/lib/cart/components/Cartheader'
@@ -32,7 +29,6 @@ const TopBanner = dynamic(() => import('./TopBanner'), {
const NavbarDesktop = () => {
const [isOpenCategory, setIsOpenCategory] = useState(false)
- const { authenticated } = useContext(AuthContext)
const auth = useAuth()
const [cartCount, setCartCount] = useState(0)
@@ -44,7 +40,7 @@ const NavbarDesktop = () => {
const router = useRouter()
const { product } = useProductContext()
-
+
useEffect(() => {
if (router.pathname === '/shop/product/[slug]') {
setPayloadWa({
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>
diff --git a/src/lib/product/api/productSimilarApi.js b/src/lib/product/api/productSimilarApi.js
index c1bccd59..a008ce5d 100644
--- a/src/lib/product/api/productSimilarApi.js
+++ b/src/lib/product/api/productSimilarApi.js
@@ -21,10 +21,14 @@ const productSimilarApi = async ({ query, source }) => {
const dataProductSimilar = await axios(
`${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/search?q=${query}&page=1&orderBy=popular-weekly&operation=OR`
)
- dataProductSimilar.data.response.products = [
- ...dataflashSale,
- ...dataProductSimilar.data.response.products,
- ];
+ if (dataflashSale) {
+ dataProductSimilar.data.response.products = [
+ ...dataflashSale,
+ ...dataProductSimilar.data.response.products
+ ]
+ } else {
+ dataProductSimilar.data.response.products = [...dataProductSimilar.data.response.products]
+ }
return dataProductSimilar.data.response
}
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 937f2746..6da289bc 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -22,6 +22,7 @@ import ImageNext from 'next/image'
import CountDown2 from '@/core/components/elements/CountDown/CountDown2'
import { LazyLoadComponent } from 'react-lazy-load-image-component'
import ColumnsSLA from './ColumnsSLA'
+import { useProductCartContext } from '@/contexts/ProductCartContext'
const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
const router = useRouter()
@@ -39,6 +40,8 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
const [selectVariantPromoActive, setSelectVariantPromoActive] = useState(null)
const [backgorundFlashSale, setBackgorundFlashSale] = useState(null)
+ const {setRefreshCart , refreshCart} = useProductCartContext()
+
const getLowestPrice = useCallback(() => {
const prices = product.variants.map((variant) => variant.price)
const lowest = prices.reduce((lowest, price) => {
@@ -116,6 +119,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
let source = 'cart'
updateCart(variantId, quantity, source)
+ setRefreshCart(true)
setAddCartAlert(true)
}
diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx
index ef737794..0062f7fc 100644
--- a/src/pages/_app.jsx
+++ b/src/pages/_app.jsx
@@ -11,12 +11,13 @@ import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'
import { SessionProvider } from 'next-auth/react'
import { getAuth } from '@/core/utils/auth'
import { ProductProvider } from '@/contexts/ProductContext'
+import { ProductCartProvider } from '@/contexts/ProductCartContext'
const queryClient = new QueryClient()
export const AuthContext = createContext({
- authenticated : false,
- setAuthenticated : (auth) => {}
+ authenticated: false,
+ setAuthenticated: (auth) => {}
})
function MyApp({ Component, pageProps: { session, ...pageProps } }) {
@@ -63,43 +64,45 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }) {
return (
// <AuthContext.Provider value={{authenticated, setAuthenticated}}>
- <SessionProvider session={session}>
- <AnimatePresence>
- {animateLoader && (
- <motion.div
- initial={{ opacity: 0 }}
- animate={{ opacity: 1 }}
- exit={{ opacity: 0 }}
- transition={{
- duration: 0.1
- }}
- className='fixed w-screen h-screen z-[500] bg-white flex justify-center items-center'
- >
- <LogoSpinner />
- </motion.div>
- )}
- </AnimatePresence>
- <Toaster
- position='top-center'
- containerStyle={toasterStyle}
- toastOptions={{
- duration: 3000,
- className: 'border border-gray_r-8'
- }}
- />
- <NextProgress color='#F01C21' options={{ showSpinner: false }} />
- <QueryClientProvider client={queryClient}>
- <AnimatePresence
- mode='popLayout'
- initial={false}
- onExitComplete={() => window.scrollTo(0, 0)}
+ <SessionProvider session={session}>
+ <AnimatePresence>
+ {animateLoader && (
+ <motion.div
+ initial={{ opacity: 0 }}
+ animate={{ opacity: 1 }}
+ exit={{ opacity: 0 }}
+ transition={{
+ duration: 0.1
+ }}
+ className='fixed w-screen h-screen z-[500] bg-white flex justify-center items-center'
>
- <ProductProvider>
+ <LogoSpinner />
+ </motion.div>
+ )}
+ </AnimatePresence>
+ <Toaster
+ position='top-center'
+ containerStyle={toasterStyle}
+ toastOptions={{
+ duration: 3000,
+ className: 'border border-gray_r-8'
+ }}
+ />
+ <NextProgress color='#F01C21' options={{ showSpinner: false }} />
+ <QueryClientProvider client={queryClient}>
+ <AnimatePresence
+ mode='popLayout'
+ initial={false}
+ onExitComplete={() => window.scrollTo(0, 0)}
+ >
+ <ProductProvider>
+ <ProductCartProvider>
{!animateLoader && <Component {...pageProps} key={router.asPath} />}
- </ProductProvider>
- </AnimatePresence>
- </QueryClientProvider>
- </SessionProvider>
+ </ProductCartProvider>
+ </ProductProvider>
+ </AnimatePresence>
+ </QueryClientProvider>
+ </SessionProvider>
// </AuthContext.Provider>
)
}
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 02:46:38 +0000