fix

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