product detail and cart header

3 files changed, 30 insertions, 41 deletions

diff --git a/src/lib/product/components/Product.jsx b/src/lib/product/components/Product/Product.jsx
index 9521cbe4..9521cbe4 100644
--- a/src/lib/product/components/Product.jsx
+++ b/src/lib/product/components/Product/Product.jsx
diff --git a/src/lib/product/components/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 55d44212..ac17ec6e 100644
--- a/src/lib/product/components/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -3,46 +3,24 @@ import Link from '@/core/components/elements/Link/Link'
 import DesktopView from '@/core/components/views/DesktopView'
 import currencyFormat from '@/core/utils/currencyFormat'
 import { HeartIcon } from '@heroicons/react/24/outline'
-import { Fragment, useEffect, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import LazyLoad from 'react-lazy-load'
-import ProductSimilar from './ProductSimilar'
+import ProductSimilar from '../ProductSimilar'
 import { toast } from 'react-hot-toast'
 import { updateItemCart } from '@/core/utils/cart'
 
 const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
-  const [variantQuantity, setVariantQuantity] = useState(null)
   const [informationTab, setInformationTab] = useState(informationTabOptions[0].value)
 
-  useEffect(() => {
-    const mapVariantQuantity = product.variants.reduce((acc, cur) => {
-      acc[cur.id] = '1'
-      return acc
-    }, {})
-    setVariantQuantity(mapVariantQuantity)
-  }, [product])
+  const variantQuantityRefs = useRef([])
 
-  const changeQuantity = (variantId, quantity) => {
-    setVariantQuantity((variantQuantity) => ({ ...variantQuantity, [variantId]: quantity }))
+  const setVariantQuantityRef = (variantId) => (element) => {
+    variantQuantityRefs.current[variantId] = element
   }
 
-  const variantSectionRef = useRef(null)
-  const goToVariantSection = () => {
-    if (variantSectionRef.current) {
-      const position = variantSectionRef.current.getBoundingClientRect()
-      window.scrollTo({
-        top: position.top - 120 + window.pageYOffset,
-        behavior: 'smooth'
-      })
-    }
-  }
-
-  const validAction = (variantId) => {
+  const validQuantity = (quantity) => {
     let isValid = true
-    if (
-      !variantQuantity[variantId] ||
-      variantQuantity[variantId] < 1 ||
-      isNaN(parseInt(variantQuantity[variantId]))
-    ) {
+    if (!quantity || quantity < 1 || isNaN(parseInt(quantity))) {
       toast.error('Jumlah barang minimal 1')
       isValid = false
     }
@@ -50,14 +28,26 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
   }
 
   const handleAddToCart = (variantId) => {
-    if (!validAction(variantId)) return
+    const quantity = variantQuantityRefs.current[variantId].value
+    if (!validQuantity(quantity)) return
     updateItemCart({
       productId: variantId,
-      quantity: variantQuantity[variantId]
+      quantity
     })
     toast.success('Berhasil menambahkan ke keranjang')
   }
 
+  const variantSectionRef = useRef(null)
+  const goToVariantSection = () => {
+    if (variantSectionRef.current) {
+      const position = variantSectionRef.current.getBoundingClientRect()
+      window.scrollTo({
+        top: position.top - 120 + window.pageYOffset,
+        behavior: 'smooth'
+      })
+    }
+  }
+
   const productSimilarQuery = [
     product?.name.replace(/[()/"&]/g, ''),
     `fq=-product_id:${product.id}`,
@@ -66,16 +56,16 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
 
   return (
     <DesktopView>
-      <div className='container mx-auto mt-10'>
+      <div className='container mx-auto pt-10'>
         <div className='flex'>
-          <div className='w-3/12'>
+          <div className='w-[30%]'>
             <Image
               src={product.image}
               alt={product.name}
               className='h-96 object-contain object-center w-full border border-gray_r-4'
             />
           </div>
-          <div className='w-6/12 px-4'>
+          <div className='w-[50%] px-4'>
             <h1 className='text-title-md leading-10 font-medium'>{product?.name}</h1>
             <div className='mt-10'>
               <div className='flex p-3'>
@@ -110,7 +100,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
             </div>
           </div>
 
-          <div className='w-3/12'>
+          <div className='w-[20%]'>
             {product.variants.length > 1 && product.lowestPrice.priceDiscount > 0 && (
               <div className='text-gray_r-12/80'>Harga mulai dari: </div>
             )}
@@ -187,8 +177,8 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                       <input
                         type='number'
                         className='form-input w-16 py-2 text-center bg-gray_r-1'
-                        value={variantQuantity?.[variant.id]}
-                        onChange={(e) => changeQuantity(variant.id, e.target.value)}
+                        ref={setVariantQuantityRef(variant.id)}
+                        defaultValue={1}
                       />
                     </td>
                     <td className='flex gap-x-3'>
@@ -212,8 +202,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
 
         <div className='mt-12'>
           <div className='text-h-lg font-semibold'>Informasi Produk</div>
-          <div className='my-5 h-0.5 bg-gray_r-6' />
-          <div className='flex gap-x-4 mb-5'>
+          <div className='flex gap-x-4 mt-6 mb-4'>
             {informationTabOptions.map((option) => (
               <TabButton
                 value={option.value}
@@ -237,7 +226,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                   }}
                 />
               </TabContent>
-              
+
               <TabContent active={informationTab == 'information'}>Belum ada informasi.</TabContent>
             </div>
           </div>
diff --git a/src/lib/product/components/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 07da876e..c572a58e 100644
--- a/src/lib/product/components/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -4,7 +4,7 @@ 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 ProductSimilar from '../ProductSimilar'
 import LazyLoad from 'react-lazy-load'
 import { updateItemCart } from '@/core/utils/cart'
 import { HeartIcon } from '@heroicons/react/24/outline'