page variant

1 files changed, 315 insertions, 0 deletions

diff --git a/src/lib/product/components/Product/ProductMobileVariant.jsx b/src/lib/product/components/Product/ProductMobileVariant.jsx
new file mode 100644
index 00000000..29d7700d
--- /dev/null
+++ b/src/lib/product/components/Product/ProductMobileVariant.jsx
@@ -0,0 +1,315 @@
+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'
+import { createSlug } from '@/core/utils/slug'
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
+import whatsappUrl from '@/core/utils/whatsappUrl'
+import { gtagAddToCart } from '@/core/utils/googleTag'
+
+const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
+  const router = useRouter()
+
+  const [quantity, setQuantity] = useState('1')
+  const [selectedVariant, setSelectedVariant] = useState(product.id)
+  const [informationTab, setInformationTab] = useState(informationTabOptions[0].value)
+  const [addCartAlert, setAddCartAlert] = useState(false)
+
+  const getLowestPrice = () => {
+    const lowest = product.price
+    return lowest
+  }
+
+  const [activeVariant, setActiveVariant] = useState({
+    id: null,
+    code: product.code,
+    name: product.name,
+    price: getLowestPrice(),
+    stock: product.stockTotal,
+    weight: product.weight
+  })
+
+  useEffect(() => {
+    if (selectedVariant) {
+      setActiveVariant({
+        id: product.id,
+        code: product.code,
+        name: product.name,
+        price: product.price,
+        stock: product.stock,
+        weight: product.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
+    gtagAddToCart(activeVariant, quantity)
+    updateItemCart({
+      productId: activeVariant.id,
+      quantity,
+      selected: true
+    })
+    setAddCartAlert(true)
+  }
+
+  const handleClickBuy = () => {
+    if (!validAction()) return
+    router.push(`/shop/checkout?productId=${activeVariant.id}&quantity=${quantity}`)
+  }
+
+  const productSimilarQuery = [
+    product?.name,
+    `fq=-product_id_i:${product.id}`,
+    `fq=-manufacture_id_i:${product.manufacture?.id || 0}`
+  ].join('&')
+
+  return (
+    <MobileView>
+      <Image
+        src={product.parent.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={createSlug('/shop/brands/', product.manufacture?.name, product.manufacture?.id)}
+            >
+              {product.manufacture?.name}
+            </Link>
+          ) : (
+            <div>-</div>
+          )}
+          <button type='button' className='ml-auto' onClick={toggleWishlist}>
+            {wishlist.data?.productTotal > 0 ? (
+              <HeartIcon className='w-6 fill-danger-500 text-danger-500' />
+            ) : (
+              <HeartIcon className='w-6' />
+            )}
+          </button>
+        </div>
+        <h1 className='leading-6 font-medium mb-3'>{activeVariant?.name}</h1>
+
+        {activeVariant?.price?.discountPercentage > 0 && (
+          <div className='flex gap-x-1 items-center'>
+            <div className='text-gray_r-11 line-through text-caption-1'>
+              {currencyFormat(activeVariant?.price?.price * 1.11)}
+            </div>
+            <div className='badge-solid-red'>{activeVariant?.price?.discountPercentage}%</div>
+          </div>
+        )}
+        <h3 className='font-semibold mt-1 text-caption-1'>
+          {currencyFormat(activeVariant?.price?.priceDiscount)}
+        </h3>
+        <h3 className='text-danger-500 font-semibold mt-1'>
+          {activeVariant?.price?.priceDiscount > 0 ? (
+            currencyFormat(activeVariant?.price?.priceDiscount * 1.11)
+          ) : (
+            <span className='text-gray_r-11 leading-6 font-normal'>
+              Hubungi kami untuk dapatkan harga terbaik,&nbsp;
+              <a
+                href={whatsappUrl('product', {
+                  name: product.name,
+                  url: createSlug('/shop/product/', product.name, product.id, true)
+                })}
+                className='text-danger-500 underline'
+              >
+                klik disini
+              </a>
+            </span>
+          )}
+
+          {activeVariant?.price?.priceDiscount > 0 && (
+            <span className='text-xs text-gray_r-11'> *include PPN</span>
+          )}
+        </h3>
+      </div>
+
+      <Divider />
+
+      <div className='p-4'>
+        <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='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={whatsappUrl('product', {
+                  name: product.name,
+                  url: createSlug('/shop/product/', product.name, product.id, true)
+                })}
+                className='text-danger-500 font-medium'
+              >
+                Tanya Stok
+              </a>
+            )}
+          </SpecificationContent>
+          <SpecificationContent label='Berat Barang'>
+            {activeVariant?.weight > 0 && <span>{activeVariant?.weight} KG</span>}
+            {activeVariant?.weight == 0 && (
+              <a
+                href={whatsappUrl('productWeight', {
+                  name: product.name,
+                  url: createSlug('/shop/product/', product.name, product.id, true)
+                })}
+                className='text-danger-500 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>
+
+      <BottomPopup
+        title='Berhasil Ditambahkan'
+        active={addCartAlert}
+        close={() => setAddCartAlert(false)}
+      >
+        <div className='flex mt-4'>
+          <div className='w-[15%]'>
+            <Image
+              src={product.image}
+              alt={product.name}
+              className='h-20 object-contain object-center w-full border border-gray_r-4'
+            />
+          </div>
+          <div className='ml-3 flex flex-1 items-center text-sm font-normal'>{product.name}</div>
+          <div className='ml-3 flex items-center text-sm font-normal'>
+            <Link href='/shop/cart' className='flex-1 py-2 text-gray_r-12 btn-yellow'>
+              Lihat Keranjang
+            </Link>
+          </div>
+        </div>
+        <div className='mt-8 mb-4'>
+          <div className='text-h-sm font-semibold mb-6'>Kamu Mungkin Juga Suka</div>
+          <LazyLoad>
+            <ProductSimilar query={productSimilarQuery} />
+          </LazyLoad>
+        </div>
+      </BottomPopup>
+    </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-danger-500 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 ProductMobileVariant