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/ProductMobile.jsx | 280 ---------------------------
 1 file changed, 280 deletions(-)
 delete mode 100644 src/lib/product/components/ProductMobile.jsx

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

diff --git a/src/lib/product/components/ProductMobile.jsx b/src/lib/product/components/ProductMobile.jsx
deleted file mode 100644
index 07da876e..00000000
--- a/src/lib/product/components/ProductMobile.jsx
+++ /dev/null
@@ -1,280 +0,0 @@
-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 { updateItemCart } from '@/core/utils/cart'
-import { HeartIcon } from '@heroicons/react/24/outline'
-import { useRouter } from 'next/router'
-import MobileView from '@/core/components/views/MobileView'
-import { toast } from 'react-hot-toast'
-
-const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
-  const router = useRouter()
-
-  const [quantity, setQuantity] = useState('1')
-  const [selectedVariant, setSelectedVariant] = useState(null)
-  const [informationTab, setInformationTab] = useState(informationTabOptions[0].value)
-
-  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(', ') : ''
-
-      setActiveVariant({
-        id: variant.id,
-        code: variant.code,
-        name: variant.parent.name + variantAttributes,
-        price: variant.price,
-        stock: variant.stock,
-        weight: variant.weight
-      })
-    }
-  }, [selectedVariant, product])
-
-  const validAction = () => {
-    let isValid = true
-    if (!selectedVariant) {
-      toast.error('Pilih varian terlebih dahulu')
-      isValid = false
-    }
-    if (!quantity || quantity < 1 || isNaN(parseInt(quantity))) {
-      toast.error('Jumlah barang minimal 1')
-      isValid = false
-    }
-    return isValid
-  }
-
-  const handleClickCart = () => {
-    if (!validAction()) return
-    updateItemCart({
-      productId: activeVariant.id,
-      quantity
-    })
-    toast.success('Berhasil menambahkan ke keranjang')
-  }
-
-  const handleClickBuy = () => {
-    if (!validAction()) return
-    router.push(`/shop/checkout?productId=${activeVariant.id}&quantity=${quantity}`)
-  }
-
-  const productSimilarQuery = [
-    product?.name.replace(/[()/"&]/g, ''),
-    `fq=-product_id:${product.id}`,
-    `fq=-manufacture_id:${product.manufacture?.id || 0}`
-  ].join('&')
-
-  return (
-    <MobileView>
-      <Image
-        src={product.image}
-        alt={product.name}
-        className='h-72 object-contain object-center w-full border-b border-gray_r-4'
-      />
-
-      <div className='p-4'>
-        <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'>
-            <div className='text-gray_r-11 line-through text-caption-1'>
-              {currencyFormat(activeVariant?.price?.price)}
-            </div>
-            <div className='badge-solid-red'>{activeVariant?.price?.discountPercentage}%</div>
-          </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'>
-              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' onClick={handleClickBuy}>
-            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={productSimilarQuery} />
-        </LazyLoad>
-      </div>
-    </MobileView>
-  )
-}
-
-const informationTabOptions = [
-  { value: 'specification', label: 'Spesifikasi' },
-  { 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-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 ProductMobile
-- 
cgit v1.2.3