From f99e0aba70efad0deb907d8e27f09fc9f527c8a4 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Fri, 17 Feb 2023 17:07:50 +0700
Subject: Refactor

---
 src/lib/product/components/Product.jsx | 276 +++++++++++++++++++++++++++++++++
 1 file changed, 276 insertions(+)
 create mode 100644 src/lib/product/components/Product.jsx

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

diff --git a/src/lib/product/components/Product.jsx b/src/lib/product/components/Product.jsx
new file mode 100644
index 00000000..2a3624e7
--- /dev/null
+++ b/src/lib/product/components/Product.jsx
@@ -0,0 +1,276 @@
+import Badge from "@/core/components/elements/Badge/Badge"
+import Divider from "@/core/components/elements/Divider/Divider"
+import Image from "@/core/components/elements/Image/Image"
+import Link from "@/core/components/elements/Link/Link"
+import currencyFormat from "@/core/utils/currencyFormat"
+import { useEffect, useState } from "react"
+import Select from "react-select"
+import ProductSimilar from "./ProductSimilar"
+import LazyLoad from "react-lazy-load"
+import { toast } from "react-hot-toast"
+import { addItemCart } from "@/core/utils/cart"
+
+const informationTabOptions = [
+  { value: 'specification', label: 'Spesifikasi' },
+  { value: 'description', label: 'Deskripsi' },
+  { value: 'important', label: 'Info Penting' },
+]
+
+const Product = ({ product }) => {
+  const [ quantity, setQuantity ] = useState('1')
+  const [ selectedVariant, setSelectedVariant ] = useState(null)
+  const [ informationTab, setInformationTab ] = useState(null)
+
+  const [ activeVariant, setActiveVariant ] = useState({
+    id: product.id,
+    code: product.code,
+    name: product.name,
+    price: product.lowestPrice,
+    stock: product.stockTotal,
+    weight: product.weight,
+  })
+  
+  const variantOptions = product.variants?.map((variant) => ({
+    value: variant.id,
+    label: 
+      (variant.code ? `[${variant.code}] ` : '')
+      +
+      (variant.attributes.length > 0 ? variant.attributes.join(', ') : product.name) 
+  }))
+
+  useEffect(() => {
+    if (!selectedVariant && variantOptions.length == 1) {
+      setSelectedVariant(variantOptions[0])
+    }
+  }, [selectedVariant, variantOptions])
+
+  useEffect(() => {
+    if (selectedVariant) {
+      const variant = product.variants.find(variant => variant.id == selectedVariant.value)
+      const variantAttributes = variant.attributes.length > 0 ? ' - ' + variant.attributes.join(', ') : ''
+      console.log(variant);
+      setActiveVariant({
+        id: variant.id,
+        code: variant.code,
+        name: variant.parent.name + variantAttributes,
+        price: variant.price,
+        stock: variant.stock,
+        weight: variant.weight
+      })
+    }
+  }, [selectedVariant, product])
+
+  useEffect(() => {
+    if (!informationTab) {
+      setInformationTab(informationTabOptions[0].value)
+    }
+  }, [informationTab])
+
+  const handleClickCart = () => {
+    if (!selectedVariant) {
+      toast.error('Pilih varian terlebih dahulu')
+      return
+    }
+    if (!quantity || quantity < 1 || isNaN(parseInt(quantity))) {
+      toast.error('Jumlah barang minimal 1')
+      return
+    }
+    addItemCart({
+      productId: activeVariant.id,
+      quantity
+    })
+    toast.success('Berhasil menambahkan ke keranjang')
+  }
+
+  return (
+    <>
+      <Image
+        src={product.image}
+        alt={product.name}
+        className="h-72 object-contain object-center w-full border-b border-gray_r-4 bg-white"
+      />
+
+      <div className="p-4">
+        <Link href="/" className="mb-2">{ product.manufacture?.name }</Link>
+        <h1 className="leading-6 font-medium">
+          {activeVariant?.name}
+        </h1>
+        { activeVariant?.price?.discountPercentage > 0 && (
+          <div className="flex gap-x-1 items-center mt-2">
+            <div className="text-gray_r-11 line-through text-caption-1">
+              {currencyFormat(activeVariant?.price?.priceDiscount)}
+            </div>
+            <Badge type="solid-red">
+              {activeVariant?.price?.discountPercentage}%
+            </Badge>
+          </div>
+        ) }
+        <h3 className="text-red_r-11 font-semibold mt-1">
+          { activeVariant?.price?.price > 0 ? currencyFormat(activeVariant?.price?.price) : (
+            <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">klik disini</a>
+            </span>
+          ) }
+        </h3>
+      </div>
+
+      <Divider />
+
+      <div className="p-4">
+        <div>
+          <label className="flex justify-between">
+            Pilih Varian:
+            <span className="text-gray_r-11">
+              { product?.variantTotal } Varian
+            </span>
+          </label>
+          <Select
+            name="variant"
+            classNamePrefix="form-select"
+            options={variantOptions}
+            className="mt-2"
+            value={selectedVariant}
+            onChange={(option) => setSelectedVariant(option)}
+            isSearchable={product.variantTotal > 10}
+          />
+        </div>
+        <div className="mt-4 mb-2">Jumlah</div>
+        <div className="flex gap-x-3">
+          <div className="w-2/12">
+            <input 
+              name="quantity"
+              type="number" 
+              className="form-input" 
+              value={quantity}
+              onChange={(e) => setQuantity(e.target.value)}
+            />
+          </div>
+          <button 
+            type="button"
+            className="btn-yellow flex-1"
+            onClick={handleClickCart}
+          >
+            Keranjang
+          </button>
+          <button 
+            type="button"
+            className="btn-solid-red flex-1"
+          >
+            Beli
+          </button>
+        </div>
+      </div>
+
+      <Divider />
+
+      <div className="p-4">
+        <h2 className="font-semibold">Informasi Produk</h2>
+        <div className="flex gap-x-4 mt-4 mb-3">
+          { informationTabOptions.map((option) => (
+            <TabButton 
+              value={option.value} 
+              key={option.value}
+              active={informationTab == option.value}
+              onClick={() => setInformationTab(option.value)}
+            >
+              {option.label}
+            </TabButton>
+          )) }
+        </div>
+
+        <TabContent 
+          active={informationTab == 'specification'} 
+          className="rounded border border-gray_r-6 divide-y divide-gray_r-6"
+        >
+          <SpecificationContent label="Jumlah Varian">
+            <span>{product?.variantTotal} Varian</span>
+          </SpecificationContent>
+          <SpecificationContent label="Nomor SKU">
+            <span>SKU-{product?.id}</span>
+          </SpecificationContent>
+          <SpecificationContent label="Part Number">
+            <span>{activeVariant?.code || '-'}</span>
+          </SpecificationContent>   
+          <SpecificationContent label="Stok">
+            { activeVariant?.stock > 0 && (
+              <span className="flex gap-x-1.5">
+                <div className="badge-solid-red">Ready Stock</div>
+                <div className="badge-gray">
+                  { activeVariant?.stock > 5 ? '> 5' : '< 5' }
+                </div>
+              </span>
+            ) }
+            { activeVariant?.stock == 0 && (
+              <a 
+                href="https://wa.me" 
+                className="text-red_r-11 font-medium"
+              >
+                Tanya Stok
+              </a>
+            ) }
+          </SpecificationContent>   
+          <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"
+              >
+                Tanya Berat
+              </a>
+            ) }
+          </SpecificationContent>   
+        </TabContent>
+
+        <TabContent
+          active={informationTab == 'description'}
+          className="leading-6 text-gray_r-11"
+          dangerouslySetInnerHTML={{__html: (product.description != '' ? product.description : 'Belum ada deskripsi produk.')}}
+        />
+      </div>
+
+      <Divider />
+
+      <div className="p-4">
+        <h2 className="font-semibold mb-4">Kamu Mungkin Juga Suka</h2>
+        <LazyLoad>
+          <ProductSimilar query={product?.name.split(' ').slice(1, 3).join(' ')} />
+        </LazyLoad>
+      </div>
+    </>
+  )
+}
+
+const TabButton = ({ children, active, ...props }) => {
+  const activeClassName = active ? 'text-red_r-11 border-b border-red_r-11' : 'text-gray_r-11'
+  return (
+    <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}`}
+  >
+    { children }
+  </div>
+)
+
+const SpecificationContent = ({ children, label }) => (
+  <div className="flex justify-between p-3">
+    <span className="text-gray_r-11">{ label }</span>
+    { children }
+  </div>
+)
+
+export default Product
\ No newline at end of file
-- 
cgit v1.2.3


From 69f55de26319e570ce0a8c4dbe8a29cb0d0b51c5 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Sat, 18 Feb 2023 22:03:55 +0700
Subject: optimization

---
 src/lib/product/components/Product.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(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 2a3624e7..299cdc77 100644
--- a/src/lib/product/components/Product.jsx
+++ b/src/lib/product/components/Product.jsx
@@ -87,7 +87,7 @@ const Product = ({ product }) => {
       <Image
         src={product.image}
         alt={product.name}
-        className="h-72 object-contain object-center w-full border-b border-gray_r-4 bg-white"
+        className="h-72 object-contain object-center w-full border-b border-gray_r-4"
       />
 
       <div className="p-4">
-- 
cgit v1.2.3


From 75767ed41d28947429f3dbef9c7e128ebc552e64 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Sat, 18 Feb 2023 22:18:46 +0700
Subject: change animation

---
 src/lib/product/components/Product.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(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 299cdc77..396eba5f 100644
--- a/src/lib/product/components/Product.jsx
+++ b/src/lib/product/components/Product.jsx
@@ -48,7 +48,7 @@ const Product = ({ product }) => {
     if (selectedVariant) {
       const variant = product.variants.find(variant => variant.id == selectedVariant.value)
       const variantAttributes = variant.attributes.length > 0 ? ' - ' + variant.attributes.join(', ') : ''
-      console.log(variant);
+      
       setActiveVariant({
         id: variant.id,
         code: variant.code,
-- 
cgit v1.2.3


From d22df6bd30b8ed4bcfa938dcbbedc5fc376c2304 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 20 Feb 2023 10:49:35 +0700
Subject: cart refactor

---
 src/lib/product/components/Product.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 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 396eba5f..39d29d4d 100644
--- a/src/lib/product/components/Product.jsx
+++ b/src/lib/product/components/Product.jsx
@@ -8,7 +8,7 @@ import Select from "react-select"
 import ProductSimilar from "./ProductSimilar"
 import LazyLoad from "react-lazy-load"
 import { toast } from "react-hot-toast"
-import { addItemCart } from "@/core/utils/cart"
+import { updateItemCart } from "@/core/utils/cart"
 
 const informationTabOptions = [
   { value: 'specification', label: 'Spesifikasi' },
@@ -75,7 +75,7 @@ const Product = ({ product }) => {
       toast.error('Jumlah barang minimal 1')
       return
     }
-    addItemCart({
+    updateItemCart({
       productId: activeVariant.id,
       quantity
     })
@@ -98,7 +98,7 @@ const Product = ({ product }) => {
         { activeVariant?.price?.discountPercentage > 0 && (
           <div className="flex gap-x-1 items-center mt-2">
             <div className="text-gray_r-11 line-through text-caption-1">
-              {currencyFormat(activeVariant?.price?.priceDiscount)}
+              {currencyFormat(activeVariant?.price?.price)}
             </div>
             <Badge type="solid-red">
               {activeVariant?.price?.discountPercentage}%
@@ -106,7 +106,7 @@ const Product = ({ product }) => {
           </div>
         ) }
         <h3 className="text-red_r-11 font-semibold mt-1">
-          { activeVariant?.price?.price > 0 ? currencyFormat(activeVariant?.price?.price) : (
+          { activeVariant?.price?.priceDiscount > 0 ? currencyFormat(activeVariant?.price?.priceDiscount) : (
             <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">klik disini</a>
-- 
cgit v1.2.3


From 525166e62b793b351d1a6be2421c0a33b22f7b7b Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 20 Feb 2023 11:35:25 +0700
Subject: cart refactor

---
 src/lib/product/components/Product.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(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 39d29d4d..92f4e37d 100644
--- a/src/lib/product/components/Product.jsx
+++ b/src/lib/product/components/Product.jsx
@@ -245,7 +245,7 @@ const Product = ({ product }) => {
 }
 
 const TabButton = ({ children, active, ...props }) => {
-  const activeClassName = active ? 'text-red_r-11 border-b border-red_r-11' : 'text-gray_r-11'
+  const activeClassName = active ? 'text-red_r-11 underline underline-offset-4' : 'text-gray_r-11'
   return (
     <button 
       {...props}
-- 
cgit v1.2.3


From f66b12fd1d0b83af0d7230d7b1565fbe00afbe3c Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 22 Feb 2023 11:03:34 +0700
Subject: prettier

---
 src/lib/product/components/Product.jsx | 230 +++++++++++++++------------------
 1 file changed, 104 insertions(+), 126 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 92f4e37d..2181c38e 100644
--- a/src/lib/product/components/Product.jsx
+++ b/src/lib/product/components/Product.jsx
@@ -1,41 +1,40 @@
-import Badge from "@/core/components/elements/Badge/Badge"
-import Divider from "@/core/components/elements/Divider/Divider"
-import Image from "@/core/components/elements/Image/Image"
-import Link from "@/core/components/elements/Link/Link"
-import currencyFormat from "@/core/utils/currencyFormat"
-import { useEffect, useState } from "react"
-import Select from "react-select"
-import ProductSimilar from "./ProductSimilar"
-import LazyLoad from "react-lazy-load"
-import { toast } from "react-hot-toast"
-import { updateItemCart } from "@/core/utils/cart"
+import Badge from '@/core/components/elements/Badge/Badge'
+import Divider from '@/core/components/elements/Divider/Divider'
+import Image from '@/core/components/elements/Image/Image'
+import Link from '@/core/components/elements/Link/Link'
+import currencyFormat from '@/core/utils/currencyFormat'
+import { useEffect, useState } from 'react'
+import Select from 'react-select'
+import ProductSimilar from './ProductSimilar'
+import LazyLoad from 'react-lazy-load'
+import { toast } from 'react-hot-toast'
+import { updateItemCart } from '@/core/utils/cart'
 
 const informationTabOptions = [
   { value: 'specification', label: 'Spesifikasi' },
   { value: 'description', label: 'Deskripsi' },
-  { value: 'important', label: 'Info Penting' },
+  { value: 'important', label: 'Info Penting' }
 ]
 
 const Product = ({ product }) => {
-  const [ quantity, setQuantity ] = useState('1')
-  const [ selectedVariant, setSelectedVariant ] = useState(null)
-  const [ informationTab, setInformationTab ] = useState(null)
+  const [quantity, setQuantity] = useState('1')
+  const [selectedVariant, setSelectedVariant] = useState(null)
+  const [informationTab, setInformationTab] = useState(null)
 
-  const [ activeVariant, setActiveVariant ] = useState({
+  const [activeVariant, setActiveVariant] = useState({
     id: product.id,
     code: product.code,
     name: product.name,
     price: product.lowestPrice,
     stock: product.stockTotal,
-    weight: product.weight,
+    weight: product.weight
   })
-  
+
   const variantOptions = product.variants?.map((variant) => ({
     value: variant.id,
-    label: 
-      (variant.code ? `[${variant.code}] ` : '')
-      +
-      (variant.attributes.length > 0 ? variant.attributes.join(', ') : product.name) 
+    label:
+      (variant.code ? `[${variant.code}] ` : '') +
+      (variant.attributes.length > 0 ? variant.attributes.join(', ') : product.name)
   }))
 
   useEffect(() => {
@@ -46,9 +45,10 @@ const Product = ({ product }) => {
 
   useEffect(() => {
     if (selectedVariant) {
-      const variant = product.variants.find(variant => variant.id == selectedVariant.value)
-      const variantAttributes = variant.attributes.length > 0 ? ' - ' + variant.attributes.join(', ') : ''
-      
+      const variant = product.variants.find((variant) => variant.id == selectedVariant.value)
+      const variantAttributes =
+        variant.attributes.length > 0 ? ' - ' + variant.attributes.join(', ') : ''
+
       setActiveVariant({
         id: variant.id,
         code: variant.code,
@@ -87,76 +87,69 @@ const Product = ({ product }) => {
       <Image
         src={product.image}
         alt={product.name}
-        className="h-72 object-contain object-center w-full border-b border-gray_r-4"
+        className='h-72 object-contain object-center w-full border-b border-gray_r-4'
       />
 
-      <div className="p-4">
-        <Link href="/" className="mb-2">{ product.manufacture?.name }</Link>
-        <h1 className="leading-6 font-medium">
-          {activeVariant?.name}
-        </h1>
-        { activeVariant?.price?.discountPercentage > 0 && (
-          <div className="flex gap-x-1 items-center mt-2">
-            <div className="text-gray_r-11 line-through text-caption-1">
+      <div className='p-4'>
+        <Link href='/' className='mb-2'>
+          {product.manufacture?.name}
+        </Link>
+        <h1 className='leading-6 font-medium'>{activeVariant?.name}</h1>
+        {activeVariant?.price?.discountPercentage > 0 && (
+          <div className='flex gap-x-1 items-center mt-2'>
+            <div className='text-gray_r-11 line-through text-caption-1'>
               {currencyFormat(activeVariant?.price?.price)}
             </div>
-            <Badge type="solid-red">
-              {activeVariant?.price?.discountPercentage}%
-            </Badge>
+            <Badge type='solid-red'>{activeVariant?.price?.discountPercentage}%</Badge>
           </div>
-        ) }
-        <h3 className="text-red_r-11 font-semibold mt-1">
-          { activeVariant?.price?.priceDiscount > 0 ? currencyFormat(activeVariant?.price?.priceDiscount) : (
-            <span className="text-gray_r-11 leading-6 font-normal">
+        )}
+        <h3 className='text-red_r-11 font-semibold mt-1'>
+          {activeVariant?.price?.priceDiscount > 0 ? (
+            currencyFormat(activeVariant?.price?.priceDiscount)
+          ) : (
+            <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">klik disini</a>
+              <a href='https://wa.me/' className='text-red_r-11 underline'>
+                klik disini
+              </a>
             </span>
-          ) }
+          )}
         </h3>
       </div>
 
       <Divider />
 
-      <div className="p-4">
+      <div className='p-4'>
         <div>
-          <label className="flex justify-between">
+          <label className='flex justify-between'>
             Pilih Varian:
-            <span className="text-gray_r-11">
-              { product?.variantTotal } Varian
-            </span>
+            <span className='text-gray_r-11'>{product?.variantTotal} Varian</span>
           </label>
           <Select
-            name="variant"
-            classNamePrefix="form-select"
+            name='variant'
+            classNamePrefix='form-select'
             options={variantOptions}
-            className="mt-2"
+            className='mt-2'
             value={selectedVariant}
             onChange={(option) => setSelectedVariant(option)}
             isSearchable={product.variantTotal > 10}
           />
         </div>
-        <div className="mt-4 mb-2">Jumlah</div>
-        <div className="flex gap-x-3">
-          <div className="w-2/12">
-            <input 
-              name="quantity"
-              type="number" 
-              className="form-input" 
+        <div className='mt-4 mb-2'>Jumlah</div>
+        <div className='flex gap-x-3'>
+          <div className='w-2/12'>
+            <input
+              name='quantity'
+              type='number'
+              className='form-input'
               value={quantity}
               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>
@@ -164,78 +157,70 @@ const Product = ({ product }) => {
 
       <Divider />
 
-      <div className="p-4">
-        <h2 className="font-semibold">Informasi Produk</h2>
-        <div className="flex gap-x-4 mt-4 mb-3">
-          { informationTabOptions.map((option) => (
-            <TabButton 
-              value={option.value} 
+      <div className='p-4'>
+        <h2 className='font-semibold'>Informasi Produk</h2>
+        <div className='flex gap-x-4 mt-4 mb-3'>
+          {informationTabOptions.map((option) => (
+            <TabButton
+              value={option.value}
               key={option.value}
               active={informationTab == option.value}
               onClick={() => setInformationTab(option.value)}
             >
               {option.label}
             </TabButton>
-          )) }
+          ))}
         </div>
 
-        <TabContent 
-          active={informationTab == 'specification'} 
-          className="rounded border border-gray_r-6 divide-y divide-gray_r-6"
+        <TabContent
+          active={informationTab == 'specification'}
+          className='rounded border border-gray_r-6 divide-y divide-gray_r-6'
         >
-          <SpecificationContent label="Jumlah Varian">
+          <SpecificationContent label='Jumlah Varian'>
             <span>{product?.variantTotal} Varian</span>
           </SpecificationContent>
-          <SpecificationContent label="Nomor SKU">
+          <SpecificationContent label='Nomor SKU'>
             <span>SKU-{product?.id}</span>
           </SpecificationContent>
-          <SpecificationContent label="Part Number">
+          <SpecificationContent label='Part Number'>
             <span>{activeVariant?.code || '-'}</span>
-          </SpecificationContent>   
-          <SpecificationContent label="Stok">
-            { activeVariant?.stock > 0 && (
-              <span className="flex gap-x-1.5">
-                <div className="badge-solid-red">Ready Stock</div>
-                <div className="badge-gray">
-                  { activeVariant?.stock > 5 ? '> 5' : '< 5' }
-                </div>
+          </SpecificationContent>
+          <SpecificationContent label='Stok'>
+            {activeVariant?.stock > 0 && (
+              <span className='flex gap-x-1.5'>
+                <div className='badge-solid-red'>Ready Stock</div>
+                <div className='badge-gray'>{activeVariant?.stock > 5 ? '> 5' : '< 5'}</div>
               </span>
-            ) }
-            { activeVariant?.stock == 0 && (
-              <a 
-                href="https://wa.me" 
-                className="text-red_r-11 font-medium"
-              >
+            )}
+            {activeVariant?.stock == 0 && (
+              <a href='https://wa.me' className='text-red_r-11 font-medium'>
                 Tanya Stok
               </a>
-            ) }
-          </SpecificationContent>   
-          <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"
-              >
+            )}
+          </SpecificationContent>
+          <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'>
                 Tanya Berat
               </a>
-            ) }
-          </SpecificationContent>   
+            )}
+          </SpecificationContent>
         </TabContent>
 
         <TabContent
           active={informationTab == 'description'}
-          className="leading-6 text-gray_r-11"
-          dangerouslySetInnerHTML={{__html: (product.description != '' ? product.description : 'Belum ada deskripsi produk.')}}
+          className='leading-6 text-gray_r-11'
+          dangerouslySetInnerHTML={{
+            __html: product.description != '' ? product.description : 'Belum ada deskripsi produk.'
+          }}
         />
       </div>
 
       <Divider />
 
-      <div className="p-4">
-        <h2 className="font-semibold mb-4">Kamu Mungkin Juga Suka</h2>
+      <div className='p-4'>
+        <h2 className='font-semibold mb-4'>Kamu Mungkin Juga Suka</h2>
         <LazyLoad>
           <ProductSimilar query={product?.name.split(' ').slice(1, 3).join(' ')} />
         </LazyLoad>
@@ -247,30 +232,23 @@ 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}`}
-    >
-      { children }
+    <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}`}
-  >
-    { children }
+  <div {...props} className={`${active ? 'block' : 'hidden'} ${className}`}>
+    {children}
   </div>
 )
 
 const SpecificationContent = ({ children, label }) => (
-  <div className="flex justify-between p-3">
-    <span className="text-gray_r-11">{ label }</span>
-    { children }
+  <div className='flex justify-between p-3'>
+    <span className='text-gray_r-11'>{label}</span>
+    {children}
   </div>
 )
 
-export default Product
\ No newline at end of file
+export default Product
-- 
cgit v1.2.3


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

