From 8cfb615556e67408d7afb6d9694b2407447085ff Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 22 Feb 2023 23:34:50 +0700
Subject: fix

---
 src/lib/product/components/Product.jsx | 81 +++++++++++++++++++++++++++++-----
 1 file changed, 71 insertions(+), 10 deletions(-)

(limited to 'src/lib/product/components/Product.jsx')

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>
 )
-- 
cgit v1.2.3

