summaryrefslogtreecommitdiff
path: root/src/lib/product/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/product/components')
-rw-r--r--src/lib/product/components/Product.jsx81
-rw-r--r--src/lib/product/components/ProductCard.jsx20
-rw-r--r--src/lib/product/components/ProductFilter.jsx22
-rw-r--r--src/lib/product/components/ProductSearch.jsx13
-rw-r--r--src/lib/product/components/ProductSlider.jsx10
5 files changed, 122 insertions, 24 deletions
diff --git a/src/lib/product/components/Product.jsx b/src/lib/product/components/Product.jsx
index 2181c38e..9e33316c 100644
--- a/src/lib/product/components/Product.jsx
+++ b/src/lib/product/components/Product.jsx
@@ -9,6 +9,11 @@ import ProductSimilar from './ProductSimilar'
import LazyLoad from 'react-lazy-load'
import { toast } from 'react-hot-toast'
import { updateItemCart } from '@/core/utils/cart'
+import useWishlist from '@/lib/wishlist/hooks/useWishlist'
+import { HeartIcon } from '@heroicons/react/24/outline'
+import useAuth from '@/core/hooks/useAuth'
+import { useRouter } from 'next/router'
+import createOrDeleteWishlistApi from '@/lib/wishlist/api/createOrDeleteWishlistApi'
const informationTabOptions = [
{ value: 'specification', label: 'Spesifikasi' },
@@ -17,6 +22,9 @@ const informationTabOptions = [
]
const Product = ({ product }) => {
+ const auth = useAuth()
+ const router = useRouter()
+ const { wishlist } = useWishlist({ productId: product?.id })
const [quantity, setQuantity] = useState('1')
const [selectedVariant, setSelectedVariant] = useState(null)
const [informationTab, setInformationTab] = useState(null)
@@ -82,6 +90,21 @@ const Product = ({ product }) => {
toast.success('Berhasil menambahkan ke keranjang')
}
+ const toggleWishlist = async () => {
+ if (!auth) {
+ router.push('/login')
+ return
+ }
+ const data = { product_id: product.id }
+ await createOrDeleteWishlistApi({ data })
+ if (wishlist.data.productTotal > 0) {
+ toast.success('Berhasil menghapus dari wishlist')
+ } else {
+ toast.success('Berhasil menambahkan ke wishlist')
+ }
+ wishlist.refetch()
+ }
+
return (
<>
<Image
@@ -91,9 +114,24 @@ const Product = ({ product }) => {
/>
<div className='p-4'>
- <Link href='/' className='mb-2'>
- {product.manufacture?.name}
- </Link>
+ <div className='flex items-end mb-2'>
+ {product.manufacture?.name ? (
+ <Link href='/'>{product.manufacture?.name}</Link>
+ ) : (
+ <div>-</div>
+ )}
+ <button
+ type='button'
+ className='ml-auto'
+ onClick={toggleWishlist}
+ >
+ {wishlist.data?.productTotal > 0 ? (
+ <HeartIcon className='w-6 fill-red_r-11 text-red_r-11' />
+ ) : (
+ <HeartIcon className='w-6' />
+ )}
+ </button>
+ </div>
<h1 className='leading-6 font-medium'>{activeVariant?.name}</h1>
{activeVariant?.price?.discountPercentage > 0 && (
<div className='flex gap-x-1 items-center mt-2'>
@@ -109,7 +147,10 @@ const Product = ({ product }) => {
) : (
<span className='text-gray_r-11 leading-6 font-normal'>
Hubungi kami untuk dapatkan harga terbaik,&nbsp;
- <a href='https://wa.me/' className='text-red_r-11 underline'>
+ <a
+ href='https://wa.me/'
+ className='text-red_r-11 underline'
+ >
klik disini
</a>
</span>
@@ -146,10 +187,17 @@ const Product = ({ product }) => {
onChange={(e) => setQuantity(e.target.value)}
/>
</div>
- <button type='button' className='btn-yellow flex-1' onClick={handleClickCart}>
+ <button
+ type='button'
+ className='btn-yellow flex-1'
+ onClick={handleClickCart}
+ >
Keranjang
</button>
- <button type='button' className='btn-solid-red flex-1'>
+ <button
+ type='button'
+ className='btn-solid-red flex-1'
+ >
Beli
</button>
</div>
@@ -193,7 +241,10 @@ const Product = ({ product }) => {
</span>
)}
{activeVariant?.stock == 0 && (
- <a href='https://wa.me' className='text-red_r-11 font-medium'>
+ <a
+ href='https://wa.me'
+ className='text-red_r-11 font-medium'
+ >
Tanya Stok
</a>
)}
@@ -201,7 +252,10 @@ const Product = ({ product }) => {
<SpecificationContent label='Berat Barang'>
{activeVariant?.weight > 0 && <span>{activeVariant?.weight} KG</span>}
{activeVariant?.weight == 0 && (
- <a href='https://wa.me' className='text-red_r-11 font-medium'>
+ <a
+ href='https://wa.me'
+ className='text-red_r-11 font-medium'
+ >
Tanya Berat
</a>
)}
@@ -232,14 +286,21 @@ const Product = ({ product }) => {
const TabButton = ({ children, active, ...props }) => {
const activeClassName = active ? 'text-red_r-11 underline underline-offset-4' : 'text-gray_r-11'
return (
- <button {...props} type='button' className={`font-medium pb-1 ${activeClassName}`}>
+ <button
+ {...props}
+ type='button'
+ className={`font-medium pb-1 ${activeClassName}`}
+ >
{children}
</button>
)
}
const TabContent = ({ children, active, className, ...props }) => (
- <div {...props} className={`${active ? 'block' : 'hidden'} ${className}`}>
+ <div
+ {...props}
+ className={`${active ? 'block' : 'hidden'} ${className}`}
+ >
{children}
</div>
)
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index dd221e4f..6b88a3bd 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -23,12 +23,20 @@ const ProductCard = ({ product, simpleTitle }) => {
)}
</Link>
<div className='p-2 pb-3 text-caption-2 leading-5'>
- <Link
- href={createSlug('/shop/brands/', product?.manufacture?.name, product?.manufacture.id)}
- className='mb-1'
- >
- {product?.manufacture?.name}
- </Link>
+ {product?.manufacture?.name ? (
+ <Link
+ href={createSlug(
+ '/shop/brands/',
+ product?.manufacture?.name,
+ product?.manufacture.id
+ )}
+ className='mb-1'
+ >
+ {product.manufacture.name}
+ </Link>
+ ) : (
+ <div>-</div>
+ )}
<Link
href={createSlug('/shop/product/', product?.name, product?.id)}
className={`font-medium mb-2 !text-gray_r-12 ${
diff --git a/src/lib/product/components/ProductFilter.jsx b/src/lib/product/components/ProductFilter.jsx
index d920cfb8..eca95f74 100644
--- a/src/lib/product/components/ProductFilter.jsx
+++ b/src/lib/product/components/ProductFilter.jsx
@@ -35,7 +35,11 @@ const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBr
}
return (
- <BottomPopup active={active} close={close} title='Filter Produk'>
+ <BottomPopup
+ active={active}
+ close={close}
+ title='Filter Produk'
+ >
<div className='flex flex-col gap-y-4'>
{!defaultBrand && (
<div>
@@ -48,7 +52,10 @@ const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBr
>
<option value=''>Pilih Brand...</option>
{brands.map((brand, index) => (
- <option value={brand} key={index}>
+ <option
+ value={brand}
+ key={index}
+ >
{brand}
</option>
))}
@@ -65,7 +72,10 @@ const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBr
>
<option value=''>Pilih Kategori...</option>
{categories.map((category, index) => (
- <option value={category} key={index}>
+ <option
+ value={category}
+ key={index}
+ >
{category}
</option>
))}
@@ -107,7 +117,11 @@ const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBr
/>
</div>
</div>
- <button type='button' className='btn-solid-red w-full mt-2' onClick={handleSubmit}>
+ <button
+ type='button'
+ className='btn-solid-red w-full mt-2'
+ onClick={handleSubmit}
+ >
Terapkan Filter
</button>
</div>
diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index 25d0278f..52bd5119 100644
--- a/src/lib/product/components/ProductSearch.jsx
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -77,12 +77,21 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
)}
</div>
- <button className='btn-light mb-6 py-2 px-5' onClick={popup.activate}>
+ <button
+ className='btn-light mb-6 py-2 px-5'
+ onClick={popup.activate}
+ >
Filter
</button>
<div className='grid grid-cols-2 gap-3'>
- {products && products.map((product) => <ProductCard product={product} key={product.id} />)}
+ {products &&
+ products.map((product) => (
+ <ProductCard
+ product={product}
+ key={product.id}
+ />
+ ))}
</div>
<Pagination
diff --git a/src/lib/product/components/ProductSlider.jsx b/src/lib/product/components/ProductSlider.jsx
index 0dab2f6b..060d4638 100644
--- a/src/lib/product/components/ProductSlider.jsx
+++ b/src/lib/product/components/ProductSlider.jsx
@@ -42,12 +42,18 @@ const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) =>
>
{bannerMode && (
<SwiperSlide>
- <Link href={products.banner.url} className='w-full h-full block'></Link>
+ <Link
+ href={products.banner.url}
+ className='w-full h-full block'
+ ></Link>
</SwiperSlide>
)}
{products?.products?.map((product, index) => (
<SwiperSlide key={index}>
- <ProductCard product={product} simpleTitle={simpleTitle} />
+ <ProductCard
+ product={product}
+ simpleTitle={simpleTitle}
+ />
</SwiperSlide>
))}
</Swiper>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 01:07:18 +0000