path: root/src/lib/quotation/components/Quotation.jsx

import Alert from '@/core/components/elements/Alert/Alert'
import Divider from '@/core/components/elements/Divider/Divider'
import Link from '@/core/components/elements/Link/Link'
import useAuth from '@/core/hooks/useAuth'
import CartApi from '@/lib/cart/api/CartApi'
import { ExclamationCircleIcon } from '@heroicons/react/24/outline'
import { useEffect, useState } from 'react'
import _ from 'lodash'
import { deleteItemCart, getCart, getItemCart } from '@/core/utils/cart'
import currencyFormat from '@/core/utils/currencyFormat'
import { toast } from 'react-hot-toast'
import checkoutApi from '@/lib/checkout/api/checkoutApi'
import { useRouter } from 'next/router'
import VariantGroupCard from '@/lib/variant/components/VariantGroupCard'
import MobileView from '@/core/components/views/MobileView'
import DesktopView from '@/core/components/views/DesktopView'
import Image from '@/core/components/elements/Image/Image'
import variantPriceApi from '@/lib/variant/api/variantPriceApi'

const Quotation = () => {
  const router = useRouter()
  const auth = useAuth()

  const [products, setProducts] = useState(null)
  const [totalAmount, setTotalAmount] = useState(0)
  const [totalDiscountAmount, setTotalDiscountAmount] = useState(0)

  useEffect(() => {
    const loadProducts = async () => {
      const cart = getCart()
      const variantIds = _.filter(cart, (o) => o.selected == true)
        .map((o) => o.productId)
        .join(',')
      const dataProducts = await CartApi({ variantIds })
      const productsWithQuantity = dataProducts?.map(async (product) => {
        const productPrice = await variantPriceApi({ id: product.id })
        return {
          ...product,
          price: {
            price: productPrice.priceExclude,
            discountPercentage: productPrice.discount,
            priceDiscount: productPrice.priceExcludeAfterDiscount
          },
          quantity: getItemCart({ productId: product.id }).quantity
        }
      })
      if (productsWithQuantity) {
        Promise.all(productsWithQuantity).then((resolvedProducts) => {
          setProducts(resolvedProducts)
        })
      }
    }
    loadProducts()
  }, [])

  useEffect(() => {
    if (products) {
      let calculateTotalAmount = 0
      let calculateTotalDiscountAmount = 0
      products.forEach((product) => {
        calculateTotalAmount += product.price.price * product.quantity
        calculateTotalDiscountAmount +=
          (product.price.price - product.price.priceDiscount) * product.quantity
      })
      setTotalAmount(calculateTotalAmount)
      setTotalDiscountAmount(calculateTotalDiscountAmount)
    }
  }, [products])

  const [isLoading, setIsLoading] = useState(false)

  const checkout = async () => {
    if (!products || products.length == 0) return
    setIsLoading(true)
    const productOrder = products.map((product) => ({
      product_id: product.id,
      quantity: product.quantity
    }))
    let data = {
      partner_shipping_id: auth.partnerId,
      partner_invoice_id: auth.partnerId,
      order_line: JSON.stringify(productOrder)
    }
    const isSuccess = await checkoutApi({ data })
    setIsLoading(false)
    if (isSuccess?.id) {
      for (const product of products) deleteItemCart({ productId: product.id })
      router.push(`/shop/quotation/finish?id=${isSuccess.id}`)
      return
    }
    toast.error('Gagal melakukan transaksi, terjadi kesalahan internal')
  }

  const taxTotal = (totalAmount - totalDiscountAmount) * 0.11

  return (
    <>
      <MobileView>
        <div className='p-4'>
          <Alert type='info' className='text-caption-2 flex gap-x-3'>
            <div>
              <ExclamationCircleIcon className='w-7 text-blue-700' />
            </div>
            <span className='leading-5'>
              Jika mengalami kesulitan dalam melakukan pembelian di website Indoteknik. Hubungi kami
              disini
            </span>
          </Alert>
        </div>

        <Divider />

        <div className='p-4 flex flex-col gap-y-4'>
          {products && <VariantGroupCard openOnClick={false} variants={products} />}
        </div>

        <Divider />

        <div className='p-4'>
          <div className='flex justify-between items-center'>
            <div className='font-medium'>Ringkasan Penawaran</div>
            <div className='text-gray_r-11 text-caption-1'>{products?.length} Barang</div>
          </div>
          <hr className='my-4 border-gray_r-6' />
          <div className='flex flex-col gap-y-4'>
            <div className='flex gap-x-2 justify-between'>
              <div className='text-gray_r-11'>Total Belanja</div>
              <div>{currencyFormat(totalAmount)}</div>
            </div>
            <div className='flex gap-x-2 justify-between'>
              <div className='text-gray_r-11'>Total Diskon</div>
              <div className='text-danger-500'>- {currencyFormat(totalDiscountAmount)}</div>
            </div>
            <div className='flex gap-x-2 justify-between'>
              <div className='text-gray_r-11'>Subtotal</div>
              <div>{currencyFormat(totalAmount - totalDiscountAmount)}</div>
            </div>
            <div className='flex gap-x-2 justify-between'>
              <div className='text-gray_r-11'>PPN 11%</div>
              <div>{currencyFormat(taxTotal)}</div>
            </div>
          </div>
          <hr className='my-4 border-gray_r-6' />
          <div className='flex gap-x-2 justify-between mb-4'>
            <div>Grand Total</div>
            <div className='font-semibold text-gray_r-12'>
              {currencyFormat(totalAmount - totalDiscountAmount + taxTotal)}
            </div>
          </div>
          <p className='text-caption-2 text-gray_r-10 mb-2'>*) Belum termasuk biaya pengiriman</p>
          <p className='text-caption-2 text-gray_r-10 leading-5'>
            Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui{' '}
            <Link href='/' className='inline font-normal'>
              Syarat & Ketentuan
            </Link>{' '}
            yang berlaku
          </p>
        </div>

        <Divider />

        <div className='flex gap-x-3 p-4'>
          <button className='flex-1 btn-yellow' onClick={checkout} disabled={isLoading}>
            {isLoading ? 'Loading...' : 'Quotation'}
          </button>
        </div>
      </MobileView>

      <DesktopView>
        <div className='container mx-auto py-10 flex'>
          <div className='w-3/4 border border-gray_r-6 rounded bg-white p-4'>
            <div className='font-medium'>Detail Barang</div>
            <table className='table-checkout'>
              <thead>
                <tr>
                  <th>Nama Produk</th>
                  <th>Jumlah</th>
                  <th>Harga</th>
                  <th>Subtotal</th>
                </tr>
              </thead>
              <tbody>
                {products?.map((product) => (
                  <tr key={product.id}>
                    <td className='flex'>
                      <div className='w-[30%] flex-shrink-0'>
                        <Image
                          src={product?.parent?.image}
                          alt={product?.name}
                          className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md'
                        />
                      </div>
                      <div className='px-2 text-left'>
                        <div className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'>
                          {product?.parent?.name}
                        </div>
                        <div className='text-gray_r-11 mt-2'>
                          {product?.code}{' '}
                          {product?.attributes.length > 0
                            ? `| ${product?.attributes.join(', ')}`
                            : ''}
                        </div>
                      </div>
                    </td>
                    <td>
                      <input
                        className='form-input w-16 py-2 text-center bg-gray_r-1'
                        type='number'
                        value={product?.quantity}
                        disabled
                      />
                    </td>
                    <td>
                      {product?.price?.discountPercentage > 0 && (
                        <div className='flex gap-x-1 items-center justify-center mt-3'>
                          <div className='text-gray_r-11 line-through text-caption-1'>
                            {currencyFormat(product?.price?.price)}
                          </div>
                          <div className='badge-solid-red'>
                            {product?.price?.discountPercentage}%
                          </div>
                        </div>
                      )}
                      <div className='font-normal mt-1'>
                        {currencyFormat(product?.price?.priceDiscount)}
                      </div>
                    </td>
                    <td>
                      <div className='text-danger-500 font-medium'>
                        {currencyFormat(product?.price?.priceDiscount * product?.quantity)}
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div className='w-1/4 pl-4'>
            <div className='border border-gray_r-6 bg-white rounded p-4'>
              <div className='flex justify-between items-center'>
                <div className='font-medium'>Ringkasan Pesanan</div>
                <div className='text-gray_r-11 text-caption-1'>{products?.length} Barang</div>
              </div>

              <hr className='my-4 border-gray_r-6' />

              <div className='flex flex-col gap-y-4'>
                <div className='flex gap-x-2 justify-between'>
                  <div className='text-gray_r-11'>Total Belanja</div>
                  <div>{currencyFormat(totalAmount)}</div>
                </div>
                <div className='flex gap-x-2 justify-between'>
                  <div className='text-gray_r-11'>Total Diskon</div>
                  <div className='text-danger-500'>- {currencyFormat(totalDiscountAmount)}</div>
                </div>
                <div className='flex gap-x-2 justify-between'>
                  <div className='text-gray_r-11'>Subtotal</div>
                  <div>{currencyFormat(totalAmount - totalDiscountAmount)}</div>
                </div>
                <div className='flex gap-x-2 justify-between'>
                  <div className='text-gray_r-11'>PPN 11%</div>
                  <div>{currencyFormat(taxTotal)}</div>
                </div>
              </div>

              <hr className='my-4 border-gray_r-6' />

              <div className='flex gap-x-2 justify-between mb-4'>
                <div>Grand Total</div>
                <div className='font-semibold text-gray_r-12'>
                  {currencyFormat(totalAmount - totalDiscountAmount + taxTotal)}
                </div>
              </div>
              <p className='text-caption-2 text-gray_r-11 mb-2'>
                *) Belum termasuk biaya pengiriman
              </p>
              <p className='text-caption-2 text-gray_r-11 leading-5'>
                Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui{' '}
                <Link href='/' className='inline font-normal'>
                  Syarat & Ketentuan
                </Link>{' '}
                yang berlaku
              </p>

              <hr className='my-4 border-gray_r-6' />

              <button
                className='w-full btn-yellow mt-4'
                onClick={checkout}
                disabled={isLoading || !products || products?.length == 0}
              >
                {isLoading ? 'Loading...' : 'Buat Quotation'}
              </button>
            </div>
          </div>
        </div>
      </DesktopView>
    </>
  )
}

export default Quotation