product detail

1 files changed, 160 insertions, 0 deletions

diff --git a/src/lib/product/components/ProductDesktop.jsx b/src/lib/product/components/ProductDesktop.jsx
new file mode 100644
index 00000000..dc733eac
--- /dev/null
+++ b/src/lib/product/components/ProductDesktop.jsx
@@ -0,0 +1,160 @@
+import Image from '@/core/components/elements/Image/Image'
+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 { useEffect, useState } from 'react'
+
+const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
+  const [variantQuantity, setVariantQuantity] = useState(null)
+
+  useEffect(() => {
+    const mapVariantQuantity = product.variants.reduce((acc, cur) => {
+      acc[cur.id] = 1
+      return acc
+    }, {})
+    setVariantQuantity(mapVariantQuantity)
+  }, [product])
+
+  const changeQuantity = (variantId, quantity) => {
+    setVariantQuantity((variantQuantity) => ({ ...variantQuantity, [variantId]: quantity }))
+  }
+
+  return (
+    <DesktopView>
+      <div className='container mx-auto mt-10'>
+        <div className='flex'>
+          <div className='w-3/12'>
+            <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'>
+            <h1 className='text-title-md leading-8 font-medium'>{product?.name}</h1>
+            <div className='mt-6 flex flex-col gap-y-4'>
+              <div className='flex'>
+                <div className='w-1/4 text-gray_r-12/60'>Nomor SKU</div>
+                <div className='w-3/4'>SKU-{product.id}</div>
+              </div>
+              <div className='flex'>
+                <div className='w-1/4 text-gray_r-12/60'>Part Number</div>
+                <div className='w-3/4'>{product.code || '-'}</div>
+              </div>
+              <div className='flex'>
+                <div className='w-1/4 text-gray_r-12/60'>Manufacture</div>
+                <div className='w-3/4'>
+                  {product.manufacture?.name ? (
+                    <Link href='/'>{product.manufacture?.name}</Link>
+                  ) : (
+                    <div>-</div>
+                  )}
+                </div>
+              </div>
+              <div className='flex'>
+                <div className='w-1/4 text-gray_r-12/60'>Berat Barang</div>
+                <div className='w-3/4'>
+                  {product?.weight > 0 && <span>{product?.weight} KG</span>}
+                  {product?.weight == 0 && (
+                    <a href='https://wa.me' className='text-red_r-11 font-medium'>
+                      Tanya Berat
+                    </a>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className='w-3/12'>
+            {product.variants.length > 1 && product.lowestPrice.priceDiscount > 0 && (
+              <div className='text-gray_r-12/80'>Harga mulai dari: </div>
+            )}
+            {product?.lowestPrice.discountPercentage > 0 && (
+              <div className='flex gap-x-1 items-center mt-2'>
+                <div className='badge-solid-red text-caption-1'>
+                  {product?.lowestPrice.discountPercentage}%
+                </div>
+                <div className='text-gray_r-11 line-through text-caption-1'>
+                  {currencyFormat(product?.lowestPrice.price)}
+                </div>
+              </div>
+            )}
+            <h3 className='text-red_r-11 font-semibold mt-1 text-title-lg'>
+              {product?.lowestPrice.priceDiscount > 0 ? (
+                currencyFormat(product?.lowestPrice.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>
+                </span>
+              )}
+            </h3>
+            <button type='button' className='btn-solid-red w-full mt-6'>
+              Lihat Varian
+            </button>
+
+            <div className='flex mt-4'>
+              <button className='flex items-center gap-x-1' onClick={toggleWishlist}>
+                {wishlist.data?.productTotal > 0 ? (
+                  <HeartIcon className='w-6 fill-red_r-11 text-red_r-11' />
+                ) : (
+                  <HeartIcon className='w-6' />
+                )}
+                Wishlist
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div className='mt-12'>
+          <div className='text-h-lg font-semibold mb-6'>Varian Produk</div>
+          <div className='table-specification'>
+            <table>
+              <thead>
+                <tr>
+                  <th>No. SKU</th>
+                  <th>Harga</th>
+                  <th>Jumlah</th>
+                  <th>Action</th>
+                </tr>
+              </thead>
+              <tbody>
+                {product.variants.map((variant) => (
+                  <tr key={variant.id}>
+                    <td>{variant.code}</td>
+                    <td>
+                      {variant.price.discountPercentage > 0 && (
+                        <>
+                          <span className='line-through text-caption-1 text-gray_r-11'>
+                            {currencyFormat(variant.price.price)}
+                          </span>{' '}
+                        </>
+                      )}
+                      {currencyFormat(variant.price.priceDiscount)}
+                    </td>
+                    <td>
+                      <input
+                        type='number'
+                        className='form-input w-16 text-center'
+                        value={variantQuantity[variant.id]}
+                        onChange={(e) => changeQuantity(variant.id, e.target.value)}
+                      />
+                    </td>
+                    <td className='flex gap-x-3'>
+                      <button className='flex-1 py-2 btn-yellow'>Keranjang</button>
+                      <button className='flex-1 py-2 btn-solid-red'>Beli</button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </DesktopView>
+  )
+}
+
+export default ProductDesktop