summaryrefslogtreecommitdiff
path: root/src/lib
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib')
-rw-r--r--src/lib/auth/components/IsAuth.jsx2
-rw-r--r--src/lib/auth/hooks/useLogin.js2
-rw-r--r--src/lib/cart/components/Cartheader.jsx325
-rw-r--r--src/lib/checkout/components/Checkout.jsx4
-rw-r--r--src/lib/product/components/Product/ProductDesktop.jsx44
-rw-r--r--src/lib/product/components/Product/ProductMobile.jsx18
6 files changed, 216 insertions, 179 deletions
diff --git a/src/lib/auth/components/IsAuth.jsx b/src/lib/auth/components/IsAuth.jsx
index a32e648c..1948ae0c 100644
--- a/src/lib/auth/components/IsAuth.jsx
+++ b/src/lib/auth/components/IsAuth.jsx
@@ -8,7 +8,7 @@ const IsAuth = ({ children }) => {
useEffect(() => {
if (!getAuth() && router.pathname != '/login') {
- router.replace(`/login?next=${router.asPath}`)
+ router.replace(`/login?next=${encodeURIComponent(router.asPath)}`)
} else {
setResponse(children)
}
diff --git a/src/lib/auth/hooks/useLogin.js b/src/lib/auth/hooks/useLogin.js
index 34605614..17731a86 100644
--- a/src/lib/auth/hooks/useLogin.js
+++ b/src/lib/auth/hooks/useLogin.js
@@ -71,7 +71,7 @@ const useLogin = () => {
if (data.isAuth) {
session.odooUser = data.user
setCookie('auth', JSON.stringify(session?.odooUser))
- router.push(router?.query?.next ?? '/')
+ router.push(decodeURIComponent(router?.query?.next) ?? '/')
return
}
}
diff --git a/src/lib/cart/components/Cartheader.jsx b/src/lib/cart/components/Cartheader.jsx
index aa6980ac..580dfc8c 100644
--- a/src/lib/cart/components/Cartheader.jsx
+++ b/src/lib/cart/components/Cartheader.jsx
@@ -8,6 +8,7 @@ import { useRouter } from 'next/router'
import odooApi from '@/core/api/odooApi'
import { useProductCartContext } from '@/contexts/ProductCartContext'
import whatsappUrl from '@/core/utils/whatsappUrl'
+import { AnimatePresence, motion } from 'framer-motion'
const { ShoppingCartIcon, PhotoIcon } = require('@heroicons/react/24/outline')
const { default: Link } = require('next/link')
@@ -113,164 +114,182 @@ const Cardheader = (cartCount) => {
</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='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 className='text-base font-semibold leading-none'>Keranjang Belanja</h5>
- <Link href='/shop/cart' class='text-sm font-medium text-red-600 underline'>
- Lihat Semua
- </Link>
- </div>
- <hr className='mt-3 mb-3 border border-gray-100' />
- <div className='flow-root max-h-[250px] overflow-y-auto'>
- {!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' className='max-w-sm animate-pulse'>
- <div className='flex items-center space-x-4 mb- 2'>
- <div className='flex-shrink-0'>
- <PhotoIcon className='h-16 w-16 text-gray-500' />
+
+ <AnimatePresence>
+ {isHovered && (
+ <>
+ <motion.div
+ initial={{ opacity: 0 }}
+ animate={{ opacity: 1 }}
+ exit={{ opacity: 0 }}
+ transition={{ duration: 0.15 }}
+ className='fixed top-[155px] left-0 w-full h-full bg-black/50 z-10'
+ />
+
+ <motion.div
+ initial={{ opacity: 0 }}
+ animate={{ opacity: 1, transition: { duration: 0.2 } }}
+ exit={{ opacity: 0, transition: { duration: 0.3 } }}
+ className='absolute z-10 left-0 w-96'
+ onMouseEnter={handleMouseEnter}
+ onMouseLeave={handleMouseLeave}
+ >
+ <motion.div
+ initial={{ height: 0 }}
+ animate={{ height: 'auto' }}
+ exit={{ height: 0 }}
+ className='w-full max-w-md p-2 bg-white border border-gray-200 rounded-lg shadow overflow-hidden'
+ >
+ <div className='p-2 flex justify-between items-center'>
+ <h5 className='text-base font-semibold leading-none'>Keranjang Belanja</h5>
+ <Link href='/shop/cart' class='text-sm font-medium text-red-600 underline'>
+ Lihat Semua
+ </Link>
+ </div>
+ <hr className='mt-3 mb-3 border border-gray-100' />
+ <div className='flow-root max-h-[250px] overflow-y-auto'>
+ {!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>
- <div className='flex-1 min-w-0'>
- <div className='h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4'></div>
- <div className='h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px] mb-2.5'></div>
- <div className='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
+ )}
+ {isLoading &&
+ itemLoading.map((item) => (
+ <div key={item} role='status' className='max-w-sm animate-pulse'>
+ <div className='flex items-center space-x-4 mb- 2'>
+ <div className='flex-shrink-0'>
+ <PhotoIcon className='h-16 w-16 text-gray-500' />
+ </div>
+ <div className='flex-1 min-w-0'>
+ <div className='h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4'></div>
+ <div className='h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px] mb-2.5'></div>
+ <div className='h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5'></div>
+ </div>
+ </div>
+ </div>
+ ))}
+ {auth && 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>
- </div>
- </div>
- ))}
- {auth && 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>
- )}
- {auth && products.length > 0 && !isLoading && (
- <>
- <ul role='list' className='divide-y divide-gray-200 dark:divide-gray-700'>
- {products &&
- products?.map((product, index) => (
- <>
- <li className='py-1 sm:py-2'>
- <div className='flex items-center space-x-4'>
- <div className='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-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 className='text-caption-2 font-medium text-gray-900 truncate dark:text-white'>
- {product.parent.name}
- </p>
- </Link>
-
- {product?.hasFlashsale && (
- <div className='flex gap-x-1 items-center mb-2 mt-1'>
- <div className='badge-solid-red'>
- {product?.price?.discountPercentage}%
+ )}
+ {auth && products.length > 0 && !isLoading && (
+ <>
+ <ul role='list' className='divide-y divide-gray-200 dark:divide-gray-700'>
+ {products &&
+ products?.map((product, index) => (
+ <>
+ <li className='py-1 sm:py-2'>
+ <div className='flex items-center space-x-4'>
+ <div className='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='text-gray_r-11 line-through text-caption-2'>
- {currencyFormat(product?.price?.price)}
+ <div className='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 className='text-caption-2 font-medium text-gray-900 truncate dark:text-white'>
+ {product.parent.name}
+ </p>
+ </Link>
+
+ {product?.hasFlashsale && (
+ <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'>
+ {product?.price?.priceDiscount > 0 ? (
+ currencyFormat(product?.price?.priceDiscount)
+ ) : (
+ <span className='text-gray_r-12/90 font-normal text-caption-1'>
+ <a
+ href={whatsappUrl('product', {
+ name: product.name,
+ manufacture: product.manufacture?.name,
+ url: createSlug(
+ '/shop/product/',
+ product.name,
+ product.id,
+ true
+ )
+ })}
+ className='text-danger-500 underline'
+ rel='noopener noreferrer'
+ target='_blank'
+ >
+ Call For Price
+ </a>
+ </span>
+ )}
+ </div>
+ </div>
</div>
</div>
- )}
- <div className='flex justify-between items-center'>
- <div className='font-semibold text-sm text-red-600'>
- {product?.price?.priceDiscount > 0 ? (
- currencyFormat(product?.price?.priceDiscount)
- ) : (
- <span className='text-gray_r-12/90 font-normal text-caption-1'>
- <a
- href={whatsappUrl('product', {
- name: product.name,
- manufacture: product.manufacture?.name,
- url: createSlug(
- '/shop/product/',
- product.name,
- product.id,
- true
- )
- })}
- className='text-danger-500 underline'
- rel='noopener noreferrer'
- target='_blank'
- >
- Call For Price
- </a>
- </span>
- )}
- </div>
- </div>
- </div>
- </div>
- </li>
- </>
- ))}
- </ul>
- <hr />
- </>
- )}
- </div>
- {auth && products.length > 0 && !isLoading && (
- <>
- <div className='mt-3'>
- <span className='text-gray-400 text-caption-2'>Subtotal Sebelum PPN : </span>
- <span className='font-semibold text-red-600'>{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>
+ </li>
+ </>
+ ))}
+ </ul>
+ <hr />
+ </>
+ )}
+ </div>
+ {auth && products.length > 0 && !isLoading && (
+ <>
+ <div className='mt-3'>
+ <span className='text-gray-400 text-caption-2'>Subtotal Sebelum PPN : </span>
+ <span className='font-semibold text-red-600'>{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>
+ </>
+ )}
+ </motion.div>
+ </motion.div>
+ </>
+ )}
+ </AnimatePresence>
</div>
)
}
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 35236e79..511fcdba 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -5,7 +5,6 @@ import useAuth from '@/core/hooks/useAuth'
import { getItemAddress } from '@/core/utils/address'
import addressesApi from '@/lib/address/api/addressesApi'
import {
- ArrowLongLeftIcon,
BanknotesIcon,
ChevronLeftIcon,
ClockIcon,
@@ -17,17 +16,14 @@ import { deleteItemCart, getCartApi } from '@/core/utils/cart'
import currencyFormat from '@/core/utils/currencyFormat'
import { toast } from 'react-hot-toast'
import getFileBase64 from '@/core/utils/getFileBase64'
-// import checkoutApi from '../api/checkoutApi'
import { useRouter } from 'next/router'
import VariantGroupCard from '@/lib/variant/components/VariantGroupCard'
import axios from 'axios'
import Image from '@/core/components/elements/Image/Image'
-import imageNext from 'next/image'
import MobileView from '@/core/components/views/MobileView'
import DesktopView from '@/core/components/views/DesktopView'
import ExpedisiList from '../api/ExpedisiList'
import whatsappUrl from '@/core/utils/whatsappUrl'
-import { createSlug } from '@/core/utils/slug'
import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
import { useQuery } from 'react-query'
import { gtagPurchase } from '@/core/utils/googleTag'
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 855c9f75..701750b2 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -90,38 +90,38 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
}
const updateCart = (variantId, quantity, source) => {
- let dataUpdate
+ let dataUpdate = {
+ productId: variantId,
+ quantity,
+ selected: true,
+ source: source === 'buy' ? 'buy' : null
+ }
+
if (product.variants.length > 1) {
let variantIndex = product.variants.findIndex((varian) => varian.id == variantId)
- dataUpdate = {
- productId: variantId,
- quantity,
- programLineId: product.variants[variantIndex].programActive,
- selected: true,
- source: source === 'buy' ? 'buy' : null
- }
+ dataUpdate['programLineId'] = product.variants[variantIndex].programActive
} else {
- dataUpdate = {
- productId: variantId,
- quantity,
- programLineId: promotionActiveId,
- selected: true,
- source: source === 'buy' ? 'buy' : null
- }
+ dataUpdate['programLineId'] = promotionActiveId
}
+
updateItemCart(dataUpdate)
}
- const handleAddToCart = (variantId) => {
- if (!auth) {
- router.push(`/login?next=/shop/product/${slug}`)
- return
- }
+ const redirectToLogin = (action, variantId, quantity) => {
+ const nextURL = `/shop/product/${slug}?action=${action}&variantId=${variantId}&qty=${quantity}`
+ router.push(`/login?next=${encodeURIComponent(nextURL)}`)
+ return true
+ }
+ const handleAddToCart = (variantId) => {
const quantity = variantQuantityRefs.current[variantId].value
if (!validQuantity(quantity)) return
+ if (!auth) {
+ return redirectToLogin('add_to_cart', variantId, quantity)
+ }
+
let source = 'cart'
updateCart(variantId, quantity, source)
setRefreshCart(true)
@@ -141,6 +141,10 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
const quantity = variantQuantityRefs.current[variant].value
if (!validQuantity(quantity)) return
+ if (!auth) {
+ return redirectToLogin('buy', variant, quantity)
+ }
+
let source = 'buy'
updateCart(variant, quantity, source)
router.push(`/shop/checkout?source=buy`)
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 402490f7..70ac1cbc 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -20,9 +20,12 @@ import odooApi from '@/core/api/odooApi'
import ImageNext from 'next/image'
import CountDown2 from '@/core/components/elements/CountDown/CountDown2'
import Breadcrumb from './Breadcrumb'
+import useAuth from '@/core/hooks/useAuth'
const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
const router = useRouter()
+ const auth = useAuth()
+ const { slug } = router.query
const [quantity, setQuantity] = useState('1')
const [selectedVariant, setSelectedVariant] = useState(null)
@@ -128,9 +131,20 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
return isValid
}
+ const redirectToLogin = (action) => {
+ const nextURL = `/shop/product/${slug}?action=${action}&variantId=${activeVariant.id}&qty=${quantity}`
+ router.push(`/login?next=${encodeURIComponent(nextURL)}`)
+ return true
+ }
+
const handleClickCart = () => {
if (!validAction()) return
gtagAddToCart(activeVariant, quantity)
+
+ if (!auth) {
+ return redirectToLogin('add_to_cart')
+ }
+
updateItemCart({
productId: activeVariant.id,
quantity,
@@ -143,6 +157,10 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
const handleClickBuy = () => {
if (!validAction()) return
+ if (!auth) {
+ return redirectToLogin('buy')
+ }
+
updateItemCart({
productId: activeVariant.id,
quantity,
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 03:33:26 +0000