summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/core/components/elements/Navbar/NavbarDesktop.jsx7
-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
-rw-r--r--src/pages/shop/product/[slug].jsx28
8 files changed, 247 insertions, 183 deletions
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index fb94e4a6..d9f5658e 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -40,7 +40,7 @@ const NavbarDesktop = () => {
const router = useRouter()
const { product } = useProductContext()
-
+
useEffect(() => {
if (router.pathname === '/shop/product/[slug]') {
setPayloadWa({
@@ -110,7 +110,9 @@ const NavbarDesktop = () => {
<br />
Quotation
</Link>
- <Cardheader cartCount={cartCount}/>
+
+ <Cardheader cartCount={cartCount} />
+
<Link
target='_blank'
rel='noreferrer'
@@ -134,6 +136,7 @@ const NavbarDesktop = () => {
</a>
</div>
</div>
+
<div className='container mx-auto mt-6'>
<div className='flex'>
<button
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,
diff --git a/src/pages/shop/product/[slug].jsx b/src/pages/shop/product/[slug].jsx
index 4c17ab37..d8366d3c 100644
--- a/src/pages/shop/product/[slug].jsx
+++ b/src/pages/shop/product/[slug].jsx
@@ -9,6 +9,7 @@ import cookie from 'cookie'
import axios from 'axios'
import { useProductContext } from '@/contexts/ProductContext'
import { useEffect } from 'react'
+import { updateItemCart } from '@/core/utils/cart'
const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
const Product = dynamic(() => import('@/lib/product/components/Product/Product'))
@@ -22,7 +23,10 @@ export async function getServerSideProps(context) {
const authToken = auth?.token || ''
let response = await axios(
- `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/product-detail?id=` + getIdFromSlug(slug) +'&auth=' + tier
+ `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/product-detail?id=` +
+ getIdFromSlug(slug) +
+ '&auth=' +
+ tier
)
let product = response.data
// let productSolr = await productApi({ id: getIdFromSlug(slug), headers: { Token: authToken } })
@@ -39,7 +43,6 @@ export async function getServerSideProps(context) {
}
export default function ProductDetail({ product }) {
- console.log(product);
const router = useRouter()
const { setProduct } = useProductContext()
@@ -49,6 +52,27 @@ export default function ProductDetail({ product }) {
}
}, [product, setProduct])
+ useEffect(() => {
+ const { action, variantId, qty } = router.query
+ const addToCart = async () => {
+ const data = {
+ productId: variantId,
+ quantity: qty,
+ selected: true,
+ programLineId: null,
+ source: action
+ }
+ console.log('data dr test', data)
+ await updateItemCart(data)
+ const redirectURL = action === 'buy' ? '/shop/checkout?source=buy' : '/shop/cart'
+ router.push(redirectURL)
+ }
+
+ if (action && variantId && qty) {
+ addToCart()
+ }
+ }, [router])
+
if (!product) return <PageNotFound />
return (
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-17 23:47:55 +0000