path: root/src/lib/checkout/components/CheckoutOld.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 { getItemAddress } from '@/core/utils/address'
import addressesApi from '@/lib/address/api/addressesApi'
import CartApi from '@/lib/cart/api/CartApi'
import { ExclamationCircleIcon } from '@heroicons/react/24/outline'
import React, { useEffect, useRef, 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 getFileBase64 from '@/core/utils/getFileBase64'
import checkoutApi from '../api/checkoutApi'
import { useRouter } from 'next/router'
import VariantGroupCard from '@/lib/variant/components/VariantGroupCard'
import axios from 'axios'
import Image from '@/core/components/elements/Image/Image'
import MobileView from '@/core/components/views/MobileView'
import DesktopView from '@/core/components/views/DesktopView'
import ExpedisiList from '../api/ExpedisiList'
import whatsappUrl from '@/core/utils/whatsappUrl'
import { createSlug } from '@/core/utils/slug'
import BottomPopup from '@/core/components/elements/Popup/BottomPopup'

const SELF_PICKUP_ID = 32

const Checkout = () => {
  const router = useRouter()
  const auth = useAuth()
  const [selectedAddress, setSelectedAddress] = useState({
    shipping: null,
    invoicing: null
  })
  const [addresses, setAddresses] = useState(null)

  useEffect(() => {
    if (!auth) return

    const getAddresses = async () => {
      const dataAddresses = await addressesApi()
      setAddresses(dataAddresses)
    }

    getAddresses()
  }, [auth])

  useEffect(() => {
    if (!addresses) return

    const matchAddress = (key) => {
      const addressToMatch = getItemAddress(key)
      const foundAddress = addresses.filter((address) => address.id == addressToMatch)
      if (foundAddress.length > 0) {
        return foundAddress[0]
      }
      return addresses[0]
    }

    setSelectedAddress({
      shipping: matchAddress('shipping'),
      invoicing: matchAddress('invoicing')
    })
  }, [addresses])

  const [products, setProducts] = useState(null)
  const [totalAmount, setTotalAmount] = useState(0)
  const [totalDiscountAmount, setTotalDiscountAmount] = useState(0)
  const [totalWeight, setTotalWeight] = useState(0)
  const [priceCheck, setPriceCheck] = useState(false)
  const [listExpedisi, setExpedisi] = useState([])
  const [listserviceExpedisi, setListServiceExpedisi] = useState([])
  const [selectedExpedisi, setSelectedExpedisi] = useState(0)
  const [selectedCarrierId, setselectedCarrierId] = useState(0)
  const [selectedCarrier, setselectedCarrier] = useState(0)
  const [biayaKirim, setBiayaKirim] = useState(0)
  const [checkWeigth, setCheckWeight] = useState(false)
  const [selectedServiceType, setSelectedServiceType] = useState(null)
  const [selectedExpedisiService, setselectedExpedisiService] = useState(null)
  const [etd, setEtd] = useState(null)
  const [etdFix, setEtdFix] = useState(null)

  useEffect(() => {
    const loadExpedisi = async () => {
      let dataExpedisi = await ExpedisiList()
      dataExpedisi = dataExpedisi.map((expedisi) => ({
        value: expedisi.id,
        label: expedisi.name,
        carrierId: expedisi.deliveryCarrierId
      }))
      setExpedisi(dataExpedisi)
    }
    loadExpedisi()
  }, [])

  useEffect(() => {
    const loadProducts = async () => {
      let variantIds = ''
      let { query } = router
      if (query?.productId) {
        variantIds = query.productId
      } else {
        const cart = getCart()
        variantIds = _.filter(cart, (o) => o.selected == true)
          .map((o) => o.productId)
          .join(',')
      }

      const dataProducts = await CartApi({ variantIds })
      const productsWithQuantity = dataProducts?.map((product) => {
        if (product.price.priceDiscount == 0) setPriceCheck(true)
        return {
          ...product,
          quantity: query.quantity
            ? query.quantity
            : getItemCart({ productId: product.id }).quantity
        }
      })
      setProducts(productsWithQuantity)
    }
    loadProducts()
  }, [router])

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

  useEffect(() => {
    const loadServiceRajaOngkir = async () => {
      const body = {
        origin: 2127,
        destination: selectedAddress.shipping.rajaongkirCityId,
        weight: totalWeight,
        courier: selectedCarrier,
        originType: 'subdistrict',
        destinationType: 'subdistrict'
      }
      setBiayaKirim(0)
      const dataService = await axios('/api/rajaongkir-service?body=' + JSON.stringify(body))
      setListServiceExpedisi(dataService.data[0].costs)
      if (dataService.data[0].costs[0]) {
        setBiayaKirim(dataService.data[0].costs[0]?.cost[0].value)
        setselectedExpedisiService(
          dataService.data[0].costs[0]?.description + '-' + dataService.data[0].costs[0]?.service
        )
        setEtd(dataService.data[0].costs[0]?.cost[0].etd)
        toast.success('Harap pilih tipe layanan pengiriman')
      } else {
        toast.error('Maaf, layanan tidak tersedia. Mohon pilih expedisi lain.')
      }
    }
    if (selectedCarrier != 0 && selectedCarrier != 1 && totalWeight > 0) {
      loadServiceRajaOngkir()
    } else {
      setListServiceExpedisi()
      setBiayaKirim(0)
      setselectedExpedisiService()
      setEtd()
    }
  }, [selectedCarrier, selectedAddress, totalWeight])

  useEffect(() => {
    if (selectedServiceType) {
      let serviceType = selectedServiceType.split(',')
      setBiayaKirim(serviceType[0])
      setselectedExpedisiService(serviceType[1])
      setEtd(serviceType[2])
    }
  }, [selectedServiceType])

  useEffect(() => {
    if (etd) setEtdFix(calculateEstimatedArrival(etd))
  }, [etd])

  useEffect(() => {
    if (selectedExpedisi) {
      let serviceType = selectedExpedisi.split(',')
      setselectedCarrier(serviceType[0])
      setselectedCarrierId(serviceType[1])
      setListServiceExpedisi([])
    }
  }, [selectedExpedisi])

  const poNumber = useRef(null)
  const poFile = useRef(null)

  const [isLoading, setIsLoading] = useState(false)

  const checkout = async () => {
    const file = poFile.current.files[0]
    if (typeof file !== 'undefined' && file.size > 5000000) {
      toast.error('Maksimal ukuran file adalah 5MB', { position: 'bottom-center' })
      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),
      delivery_amount: biayaKirim,
      carrier_id: selectedCarrierId,
      delivery_service_type: selectedExpedisiService,
      type: 'sale_order'
    }
    if (poNumber.current.value) data.po_number = poNumber.current.value
    if (typeof file !== 'undefined') data.po_file = await getFileBase64(file)

    const isCheckouted = await checkoutApi({ data })
    if (!isCheckouted?.id) {
      toast.error('Gagal melakukan transaksi, terjadi kesalahan internal')
      return
    }

    for (const product of products) deleteItemCart({ productId: product.id })
    const payment = await axios.post(
      `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/midtrans-payment?transactionId=${isCheckouted.id}`
    )
    setIsLoading(false)
    window.location.href = payment.data.redirectUrl
  }
  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 />

        {selectedCarrierId == SELF_PICKUP_ID && <PickupAddress label='Alamat Pickup' />}
        {selectedCarrierId != SELF_PICKUP_ID && (
          <>
            <SectionAddress
              address={selectedAddress.shipping}
              label='Alamat Pengiriman'
              url='/my/address?select=shipping'
            />
            <Divider />
            <SectionAddress
              address={selectedAddress.invoicing}
              label='Alamat Penagihan'
              url='/my/address?select=invoice'
            />
          </>
        )}
        <Divider />
        <SectionValidation address={selectedAddress.invoicing} />
        <SectionExpedisi
          address={selectedAddress.shipping}
          listExpedisi={listExpedisi}
          setSelectedExpedisi={setSelectedExpedisi}
          checkWeigth={checkWeigth}
        />
        <Divider />
        <SectionListService
          listserviceExpedisi={listserviceExpedisi}
          setSelectedServiceType={setSelectedServiceType}
        />

        <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 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 className='flex gap-x-2 justify-between'>
              <div className='text-gray_r-11'>
                Biaya Kirim <p className='text-xs mt-3'>{etdFix}</p>
              </div>
              <div>{currencyFormat(Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000)}</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 +
                  Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
              )}
            </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='/syarat-ketentuan' className='inline font-normal'>
              Syarat & Ketentuan
            </Link>{' '}
            yang berlaku
          </p>
        </div>

        <Divider />

        <div className='p-4'>
          <div className='font-medium'>Purchase Order</div>

          <div className='mt-4 flex gap-x-3'>
            <div className='w-6/12'>
              <label className='form-label font-normal'>Dokumen PO</label>
              <input
                type='file'
                className='form-input mt-2 h-12'
                accept='image/*,application/pdf'
                ref={poFile}
              />
            </div>
            <div className='w-6/12'>
              <label className='form-label font-normal'>Nomor PO</label>
              <input type='text' className='form-input mt-2 h-12' ref={poNumber} />
            </div>
          </div>
          <p className='text-caption-2 text-gray_r-11 mt-2'>Ukuran dokumen PO Maksimal 5MB</p>
        </div>

        <Divider />

        <div className='flex gap-x-3 p-4'>
          <button
            className='flex-1 btn-yellow'
            onClick={checkout}
            disabled={
              isLoading || !products || products?.length == 0 || priceCheck || selectedExpedisi == 0
            }
          >
            {isLoading ? 'Loading...' : 'Lanjut Pembayaran'}
          </button>
        </div>
        {priceCheck && (
          <div className='px-4 mb-4'>
            <span className='text-danger-500'>
              *) Terdapat produk yang belum memiliki harga,{' '}
              <a href={whatsappUrl()} className='underline'>
                Hubungi Kami untuk meminta harga.
              </a>
            </span>
          </div>
        )}
      </MobileView>

      <DesktopView>
        <div className='container mx-auto py-10 flex'>
          <div className='w-3/4 border border-gray_r-6 rounded bg-white'>
            {selectedCarrierId == SELF_PICKUP_ID && <PickupAddress label='Alamat Pickup' />}
            {selectedCarrierId != SELF_PICKUP_ID && (
              <>
                <SectionAddress
                  address={selectedAddress.shipping}
                  label='Alamat Pengiriman'
                  url='/my/address?select=shipping'
                />
                <Divider />
                <SectionAddress
                  address={selectedAddress.invoicing}
                  label='Alamat Penagihan'
                  url='/my/address?select=invoice'
                />
              </>
            )}
            <Divider />
            <SectionValidation address={selectedAddress.invoicing} />
            <SectionExpedisi
              address={selectedAddress.shipping}
              listExpedisi={listExpedisi}
              setSelectedExpedisi={setSelectedExpedisi}
              checkWeigth={checkWeigth}
            />
            <Divider />
            <SectionListService
              listserviceExpedisi={listserviceExpedisi}
              setSelectedServiceType={setSelectedServiceType}
            />

            <div className='p-4'>
              <div className='font-medium'>Detail Pesanan</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-[20%] 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 className='text-gray_r-11 mt-2'>
                            Berat item : {product?.weight} Kg
                          </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'>
                          {product.price.priceDiscount > 0
                            ? currencyFormat(product?.price?.priceDiscount)
                            : 'Call For Price'}
                        </div>
                      </td>
                      <td>
                        <div className='text-danger-500 font-medium'>
                          {product.price.priceDiscount > 0 ? (
                            currencyFormat(product?.price?.priceDiscount * product?.quantity)
                          ) : (
                            <a
                              href={whatsappUrl('product', {
                                name: product.name,
                                url: createSlug('/shop/product/', product.name, product.id, true)
                              })}
                              className='underline'
                            >
                              Call For Price{' '}
                            </a>
                          )}
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>

          <div className='w-1/4 pl-4'>
            <div className='sticky top-48 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 className='flex gap-x-2 justify-between'>
                  <div className='text-gray_r-11'>
                    Biaya Kirim
                    <p className='text-xs mt-3'>{etdFix}</p>
                  </div>
                  <div>{currencyFormat(Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000)}</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 +
                      Math.round(parseInt(biayaKirim * 1.1) / 1000) * 1000
                  )}
                </div>
              </div>
              <p className='text-caption-2 text-gray_r-11 leading-5'>
                Dengan melakukan pembelian melalui website Indoteknik, saya menyetujui{' '}
                <Link href='/syarat-ketentuan' className='inline font-normal'>
                  Syarat & Ketentuan
                </Link>{' '}
                yang berlaku
              </p>

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

              <div className='font-medium mt-4'>
                Purchase Order <span className='font-normal text-gray_r-11'>(Opsional)</span>
              </div>

              <div className='mt-4 flex gap-x-3'>
                <div className='w-6/12'>
                  <label className='form-label font-normal'>Dokumen PO</label>
                  <input
                    type='file'
                    className='form-input mt-2 h-12'
                    accept='image/*,application/pdf'
                    ref={poFile}
                  />
                </div>
                <div className='w-6/12'>
                  <label className='form-label font-normal'>Nomor PO</label>
                  <input type='text' className='form-input mt-2 h-12' ref={poNumber} />
                </div>
              </div>
              <p className='text-caption-2 text-gray_r-11 mt-2'>Ukuran dokumen PO Maksimal 5MB</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 ||
                  priceCheck ||
                  selectedCarrier == 0 ||
                  (selectedCarrier != 1 && biayaKirim == 0)
                }
              >
                {isLoading ? 'Loading...' : 'Lanjut Pembayaran'}
              </button>
              {priceCheck && (
                <div className='mt-4'>
                  <span className='text-danger-500'>
                    *) Terdapat produk yang belum memiliki harga,{' '}
                    <a href={whatsappUrl()} className='underline'>
                      Hubungi Kami untuk meminta harga.
                    </a>
                  </span>
                </div>
              )}
            </div>
          </div>
        </div>
      </DesktopView>
    </>
  )
}

const SectionAddress = ({ address, label, url }) => (
  <div className='p-4'>
    <div className='flex justify-between items-center'>
      <div className='font-medium'>{label}</div>
      <Link className='text-caption-1' href={url}>
        Pilih Alamat Lain
      </Link>
    </div>

    {address && (
      <div className='mt-4 text-caption-1'>
        <div className='badge-red mb-2'>
          {address.type.charAt(0).toUpperCase() + address.type.slice(1) + ' Address'}
        </div>
        <p className='font-medium'>{address.name}</p>
        <p className='mt-2 text-gray_r-11'>{address.mobile}</p>
        <p className='mt-1 text-gray_r-11'>
          {address.street}, {address?.city?.name}
        </p>
      </div>
    )}
  </div>
)

const SectionValidation = ({ address }) =>
  address?.rajaongkirCityId == 0 && (
    <BottomPopup active={true} title='Update Alamat'>
      <div className='leading-7 text-gray_r-12/80'>
        Mohon untuk memperbarui alamat Anda dengan mengklik tombol di bawah ini.{' '}
      </div>
      <div className='flex justify-center mt-6 gap-x-4'>
        <Link
          className='btn-solid-red w-full md:w-fit text-white'
          href={`/my/address/${address?.id}/edit`}
        >
          Update Alamat
        </Link>
      </div>
    </BottomPopup>
  )

const SectionExpedisi = ({ address, listExpedisi, setSelectedExpedisi, checkWeigth }) =>
  address?.rajaongkirCityId > 0 && (
    <div className='p-4'>
      <div className='flex justify-between items-center'>
        <div className='font-medium'>Pilih Expedisi : </div>
        <div>
          <select className='form-input' onChange={(e) => setSelectedExpedisi(e.target.value)}>
            <option value='0,0'>Pengiriman</option>
            <option value='1,32'>SELF PICKUP</option>
            {checkWeigth != true &&
              listExpedisi.map((expedisi) => (
                <option
                  disabled={checkWeigth}
                  value={expedisi.label + ',' + expedisi.carrierId}
                  key={expedisi.value}
                >
                  {' '}
                  {expedisi.label.toUpperCase()}{' '}
                </option>
              ))}
          </select>
        </div>
      </div>
      {checkWeigth == true && (
        <p className='mt-4 text-gray_r-11 leading-6'>
          Mohon maaf, pengiriman hanya tersedia untuk self pickup karena terdapat barang yang belum
          diatur beratnya. Mohon atur berat barang dengan menghubungi admin melalui{' '}
          <a
            className='text-danger-500 inline'
            href='https://api.whatsapp.com/send?phone=628128080622'
          >
            tautan ini
          </a>
        </p>
      )}
    </div>
  )

const SectionListService = ({ listserviceExpedisi, setSelectedServiceType }) =>
  listserviceExpedisi?.length > 0 && (
    <>
      <div className='p-4'>
        <div className='flex justify-between items-center'>
          <div className='font-medium'>Service Type Expedisi : </div>
          <div>
            <select className='form-input' onChange={(e) => setSelectedServiceType(e.target.value)}>
              {listserviceExpedisi.map((service) => (
                <option
                  value={
                    service.cost[0].value +
                    ',' +
                    service.description +
                    '-' +
                    service.service +
                    ',' +
                    extractDuration(service.cost[0].etd)
                  }
                  key={service.service}
                >
                  {' '}
                  {service.description} - {service.service.toUpperCase()}
                  {extractDuration(service.cost[0].etd) &&
                    ` (Estimasi Tiba ${extractDuration(service.cost[0].etd)} Hari)`}
                </option>
              ))}
            </select>
          </div>
        </div>
      </div>
      <Divider />
    </>
  )

function addDays(date, days) {
  const result = new Date(date)
  result.setDate(result.getDate() + days)
  return result
}

function formatDate(date) {
  const day = date.getDate()
  const month = date.toLocaleString('default', { month: 'short' })
  return `${day} ${month}`
}

function calculateEstimatedArrival(duration) {
  if (duration) {
    let estimationDate = duration.split('-')
    estimationDate[0] = parseInt(estimationDate[0])
    estimationDate[1] = parseInt(estimationDate[1])
    const from = addDays(new Date(), estimationDate[0] + 3)
    const to = addDays(new Date(), estimationDate[1] + 3)

    let etdText = `*Estimasi tiba ${formatDate(from)}`

    if (estimationDate[1] > estimationDate[0]) {
      etdText += ` - ${formatDate(to)}`
    }

    return etdText
  }

  return ''
}

const extractDuration = (text) => {
  const matches = text.match(/\d+(?:-\d+)?/g)

  if (matches && matches.length === 1) {
    const parts = matches[0].split('-')
    const min = parseInt(parts[0])
    const max = parseInt(parts[1])

    if (min === max) {
      return min.toString()
    }

    return matches[0]
  }

  return ''
}

const PickupAddress = ({ label }) => (
  <div className='p-4'>
    <div className='flex justify-between items-center'>
      <div className='font-medium'>{label}</div>
    </div>
    <div className='mt-4 text-caption-1'>
      <p className='font-medium'>Indoteknik</p>
      <p className='mt-2 mb-2 text-gray_r-11 leading-6'>
        Jl. Bandengan Utara Raya No.85, RT.3/RW.16, Penjaringan, Kec. Penjaringan, Kota Jkt Utara,
        Daerah Khusus Ibukota Jakarta, Indonesia Kodepos : 14440
      </p>
      <p className='mt-1 text-gray_r-11'>Telp : 021-2933 8828/29</p>
      <p className='mt-1 text-gray_r-11'>Mobile : 0813 9000 7430</p>
    </div>
  </div>
)

export default Checkout