summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/lib/product/components/Product.jsx81
-rw-r--r--src/lib/product/components/ProductCard.jsx20
-rw-r--r--src/lib/wishlist/api/createOrDeleteWishlistApi.js10
-rw-r--r--src/lib/wishlist/api/wishlistApi.js14
-rw-r--r--src/lib/wishlist/hooks/useWishlist.js13
5 files changed, 122 insertions, 16 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/wishlist/api/createOrDeleteWishlistApi.js b/src/lib/wishlist/api/createOrDeleteWishlistApi.js
new file mode 100644
index 00000000..63cb1c51
--- /dev/null
+++ b/src/lib/wishlist/api/createOrDeleteWishlistApi.js
@@ -0,0 +1,10 @@
+import odooApi from "@/core/api/odooApi";
+import { getAuth } from "@/core/utils/auth";
+
+const createOrDeleteWishlistApi = async ({ data }) => {
+ const auth = getAuth()
+ const dataWishlist = await odooApi('POST', `/api/v1/user/${auth.id}/wishlist/create-or-delete`, data)
+ return dataWishlist
+}
+
+export default createOrDeleteWishlistApi \ No newline at end of file
diff --git a/src/lib/wishlist/api/wishlistApi.js b/src/lib/wishlist/api/wishlistApi.js
new file mode 100644
index 00000000..a8906dd4
--- /dev/null
+++ b/src/lib/wishlist/api/wishlistApi.js
@@ -0,0 +1,14 @@
+import odooApi from '@/core/api/odooApi'
+import { getAuth } from '@/core/utils/auth'
+
+const wishlistApi = async ({ productId }) => {
+ const auth = getAuth()
+ if (!auth) return { productTotal: 0, products: [] }
+ const dataWishlist = await odooApi(
+ 'GET',
+ `/api/v1/user/${auth.id}/wishlist?product_id=${productId}`
+ )
+ return dataWishlist
+}
+
+export default wishlistApi
diff --git a/src/lib/wishlist/hooks/useWishlist.js b/src/lib/wishlist/hooks/useWishlist.js
new file mode 100644
index 00000000..1eb17d53
--- /dev/null
+++ b/src/lib/wishlist/hooks/useWishlist.js
@@ -0,0 +1,13 @@
+import { useQuery } from "react-query"
+import wishlistApi from "../api/wishlistApi"
+
+const useWishlist = ({ productId }) => {
+ const fetchWishlist = async () => await wishlistApi({ productId })
+ const { data, isLoading, refetch } = useQuery(`wishlist-${productId}`, fetchWishlist)
+
+ return {
+ wishlist: { data, isLoading, refetch }
+ }
+}
+
+export default useWishlist
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 04:45:04 +0000