From d178a520534af7d1cbcc03134034ad8a2327b461 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 20 Mar 2023 17:14:16 +0700
Subject: product detail and cart header

---
 src/lib/product/components/ProductDesktop.jsx | 279 --------------------------
 1 file changed, 279 deletions(-)
 delete mode 100644 src/lib/product/components/ProductDesktop.jsx

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

diff --git a/src/lib/product/components/ProductDesktop.jsx b/src/lib/product/components/ProductDesktop.jsx
deleted file mode 100644
index 55d44212..00000000
--- a/src/lib/product/components/ProductDesktop.jsx
+++ /dev/null
@@ -1,279 +0,0 @@
-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 { Fragment, useEffect, useRef, useState } from 'react'
-import LazyLoad from 'react-lazy-load'
-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 changeQuantity = (variantId, quantity) => {
-    setVariantQuantity((variantQuantity) => ({ ...variantQuantity, [variantId]: quantity }))
-  }
-
-  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) => {
-    let isValid = true
-    if (
-      !variantQuantity[variantId] ||
-      variantQuantity[variantId] < 1 ||
-      isNaN(parseInt(variantQuantity[variantId]))
-    ) {
-      toast.error('Jumlah barang minimal 1')
-      isValid = false
-    }
-    return isValid
-  }
-
-  const handleAddToCart = (variantId) => {
-    if (!validAction(variantId)) return
-    updateItemCart({
-      productId: variantId,
-      quantity: variantQuantity[variantId]
-    })
-    toast.success('Berhasil menambahkan ke keranjang')
-  }
-
-  const productSimilarQuery = [
-    product?.name.replace(/[()/"&]/g, ''),
-    `fq=-product_id:${product.id}`,
-    `fq=-manufacture_id:${product.manufacture?.id || 0}`
-  ].join('&')
-
-  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-10 font-medium'>{product?.name}</h1>
-            <div className='mt-10'>
-              <div className='flex p-3'>
-                <div className='w-1/4 text-gray_r-12/70'>Nomor SKU</div>
-                <div className='w-3/4'>SKU-{product.id}</div>
-              </div>
-              <div className='flex p-3 bg-gray_r-4'>
-                <div className='w-1/4 text-gray_r-12/70'>Part Number</div>
-                <div className='w-3/4'>{product.code || '-'}</div>
-              </div>
-              <div className='flex p-3'>
-                <div className='w-1/4 text-gray_r-12/70'>Manufacture</div>
-                <div className='w-3/4'>
-                  {product.manufacture?.name ? (
-                    <Link href='/'>{product.manufacture?.name}</Link>
-                  ) : (
-                    <div>-</div>
-                  )}
-                </div>
-              </div>
-              <div className='flex p-3 bg-gray_r-4'>
-                <div className='w-1/4 text-gray_r-12/70'>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-md'>
-              {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'
-              onClick={goToVariantSection}
-              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' ref={variantSectionRef}>
-          <div className='text-h-lg font-semibold mb-6'>Varian Produk</div>
-          <div className='table-specification'>
-            <table>
-              <thead>
-                <tr>
-                  <th>Part Number</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 py-2 text-center bg-gray_r-1'
-                        value={variantQuantity?.[variant.id]}
-                        onChange={(e) => changeQuantity(variant.id, e.target.value)}
-                      />
-                    </td>
-                    <td className='flex gap-x-3'>
-                      <button
-                        type='button'
-                        onClick={() => handleAddToCart(variant.id)}
-                        className='flex-1 py-2 btn-yellow'
-                      >
-                        Keranjang
-                      </button>
-                      <button type='button' className='flex-1 py-2 btn-solid-red'>
-                        Beli
-                      </button>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
-
-        <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'>
-            {informationTabOptions.map((option) => (
-              <TabButton
-                value={option.value}
-                key={option.value}
-                active={informationTab == option.value}
-                onClick={() => setInformationTab(option.value)}
-              >
-                {option.label}
-              </TabButton>
-            ))}
-          </div>
-          <div className='flex'>
-            <div className='w-3/4 leading-7 product__description'>
-              <TabContent active={informationTab == 'description'}>
-                <span
-                  dangerouslySetInnerHTML={{
-                    __html:
-                      product.description != ''
-                        ? product.description
-                        : 'Belum ada deskripsi produk.'
-                  }}
-                />
-              </TabContent>
-              
-              <TabContent active={informationTab == 'information'}>Belum ada informasi.</TabContent>
-            </div>
-          </div>
-        </div>
-
-        <div className='my-12'>
-          <div className='text-h-lg font-semibold mb-6'>Kamu Mungkin Juga Suka</div>
-          <LazyLoad>
-            <ProductSimilar query={productSimilarQuery} />
-          </LazyLoad>
-        </div>
-      </div>
-    </DesktopView>
-  )
-}
-
-const informationTabOptions = [
-  { value: 'description', label: 'Deskripsi' },
-  { value: 'information', label: 'Info Penting' }
-]
-
-const TabButton = ({ children, active, ...props }) => {
-  const activeClassName = active
-    ? 'text-red_r-11 underline underline-offset-4'
-    : 'text-gray_r-12/80'
-  return (
-    <button {...props} type='button' className={`font-medium ${activeClassName}`}>
-      {children}
-    </button>
-  )
-}
-
-const TabContent = ({ children, active, className = '', ...props }) => (
-  <div {...props} className={`${active ? 'block' : 'hidden'} ${className}`}>
-    {children}
-  </div>
-)
-
-export default ProductDesktop
-- 
cgit v1.2.3