cart, checkout, quotation

1 files changed, 297 insertions, 152 deletions

diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index ef0b1d54..57d217a7 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -16,8 +16,9 @@ import checkoutApi from '../api/checkoutApi'
 import { useRouter } from 'next/router'
 import VariantGroupCard from '@/lib/variant/components/VariantGroupCard'
 import axios from 'axios'
-import Script from 'next/script'
 import Image from '@/core/components/elements/Image/Image'
+import MobileView from '@/core/components/views/MobileView'
+import DesktopView from '@/core/components/views/DesktopView'
 
 const Checkout = () => {
   const router = useRouter()
@@ -99,17 +100,12 @@ const Checkout = () => {
     }
   }, [products])
 
-  const poNumber = useRef('')
-  const poFile = useRef('')
+  const poNumber = useRef(null)
+  const poFile = useRef(null)
 
   const [isLoading, setIsLoading] = useState(false)
 
   const checkout = async () => {
-    if (!paymentMethod) {
-      toast.error('Metode pembayaran harus dipilih', { position: 'bottom-center' })
-      return
-    }
-
     const file = poFile.current.files[0]
     if (typeof file !== 'undefined' && file.size > 5000000) {
       toast.error('Maksimal ukuran file adalah 5MB', { position: 'bottom-center' })
@@ -130,179 +126,331 @@ const Checkout = () => {
     if (typeof file !== 'undefined') data.po_file = await getFileBase64(file)
 
     const isCheckouted = await checkoutApi({ data })
-    setIsLoading(false)
     if (!isCheckouted?.id) {
       toast.error('Gagal melakukan transaksi, terjadi kesalahan internal')
       return
     }
 
     for (const product of products) deleteItemCart({ productId: product.id })
-    if (paymentMethod == 'midtrans') {
-      const payment = await axios.post(
-        `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/midtrans-payment?transactionId=${isCheckouted.id}`
-      )
-      window.location.href = payment.data.redirectUrl
-    } else {
-      router.push(`/shop/checkout/finish?order_id=${isCheckouted.name}`)
-    }
+    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
   }
 
   return (
     <>
-      <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>
+      <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 />
+        <Divider />
 
-      <SectionAddress
-        label='Alamat Pengiriman'
-        url='/my/address?select=shipping'
-        address={selectedAddress.shipping}
-      />
+        <SectionAddress
+          label='Alamat Pengiriman'
+          url='/my/address?select=shipping'
+          address={selectedAddress.shipping}
+        />
 
-      <Divider />
+        <Divider />
 
-      <div className='p-4 flex flex-col gap-y-4'>
-        {products && (
-          <VariantGroupCard
-            openOnClick={false}
-            variants={products}
-          />
-        )}
-      </div>
+        <div className='p-4 flex flex-col gap-y-4'>
+          {products && <VariantGroupCard openOnClick={false} variants={products} />}
+        </div>
 
-      <Divider />
+        <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-red_r-11'>- {currencyFormat(totalDiscountAmount)}</div>
+        <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>
-          <div className='flex gap-x-2 justify-between'>
-            <div className='text-gray_r-11'>Subtotal</div>
-            <div>{currencyFormat(totalAmount - totalDiscountAmount)}</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-red_r-11'>- {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% (Incl.)</div>
+              <div>{currencyFormat((totalAmount - totalDiscountAmount) * 0.11)}</div>
+            </div>
           </div>
-          <div className='flex gap-x-2 justify-between'>
-            <div className='text-gray_r-11'>PPN 11% (Incl.)</div>
-            <div>{currencyFormat((totalAmount - totalDiscountAmount) * 0.11)}</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)}
+            </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>
-        <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)}
+
+        <Divider />
+
+        <SectionAddress
+          label='Alamat Penagihan'
+          url='/my/address?select=invoicing'
+          address={selectedAddress.invoicing}
+        />
+
+        <Divider />
+
+        <div className='p-4'>
+          <div className='font-medium mb-4'>Metode Pembayaran</div>
+          <div className='flex flex-col gap-y-3'>
+            <div
+              className={`p-2 idt-transition border rounded text-gray_r-12/80 ${
+                paymentMethod == 'manual' ? 'border-yellow_r-8 bg-yellow_r-2' : 'border-gray_r-6'
+              }`}
+              onClick={() => setPaymentMethod('manual')}
+            >
+              Bank BCA (PT. Indoteknik Dotcom)
+              <div className='mt-1'>8870-4000-81</div>
+            </div>
+            <div
+              className={`p-2 idt-transition border rounded ${
+                paymentMethod == 'midtrans' ? 'border-yellow_r-8 bg-yellow_r-2' : 'border-gray_r-6'
+              }`}
+              onClick={() => setPaymentMethod('midtrans')}
+            >
+              <Image src='/images/payments/midtrans.jpg' alt='Midtrans Payment' />
+            </div>
           </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 />
-
-      <SectionAddress
-        label='Alamat Penagihan'
-        url='/my/address?select=invoicing'
-        address={selectedAddress.invoicing}
-      />
+        <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 />
+        <Divider />
 
-      <div className='p-4'>
-        <div className='font-medium mb-4'>Metode Pembayaran</div>
-        <div className='flex flex-col gap-y-3'>
-          <div
-            className={`p-2 idt-transition border rounded text-gray_r-12/80 ${
-              paymentMethod == 'manual' ? 'border-yellow_r-8 bg-yellow_r-2' : 'border-gray_r-6'
-            }`}
-            onClick={() => setPaymentMethod('manual')}
-          >
-            Bank BCA (PT. Indoteknik Dotcom)
-            <div className='mt-1'>8870-4000-81</div>
-          </div>
-          <div
-            className={`p-2 idt-transition border rounded ${
-              paymentMethod == 'midtrans' ? 'border-yellow_r-8 bg-yellow_r-2' : 'border-gray_r-6'
-            }`}
-            onClick={() => setPaymentMethod('midtrans')}
+        <div className='flex gap-x-3 p-4'>
+          <button
+            className='flex-1 btn-yellow'
+            onClick={checkout}
+            disabled={isLoading || !products || products?.length == 0}
           >
-            <Image
-              src='/images/payments/midtrans.jpg'
-              alt='Midtrans Payment'
-            />
-          </div>
+            {isLoading ? 'Loading...' : 'Bayar'}
+          </button>
         </div>
-      </div>
-
-      <Divider />
+      </MobileView>
+
+      <DesktopView>
+        <div className='container mx-auto py-10 flex'>
+          <div className='w-3/4 border border-gray_r-6 rounded bg-white'>
+            <SectionAddress
+              label='Alamat Pengiriman'
+              url='/my/address?select=shipping'
+              address={selectedAddress.shipping}
+            />
 
-      <div className='p-4'>
-        <div className='font-medium'>Purchase Order</div>
+            <Divider />
 
-        <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}
+            <SectionAddress
+              label='Alamat Penagihan'
+              url='/my/address?select=invoicing'
+              address={selectedAddress.invoicing}
             />
+
+            <Divider />
+
+            <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-[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-red_r-11 font-medium'>
+                          {currencyFormat(product?.price?.priceDiscount * product?.quantity)}
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
           </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 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-red_r-11'>- {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% (Incl.)</div>
+                  <div>{currencyFormat((totalAmount - totalDiscountAmount) * 0.11)}</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)}
+                </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' />
+
+              <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}
+              >
+                {isLoading ? 'Loading...' : 'Lanjut Pembayaran'}
+              </button>
+            </div>
           </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}
-        >
-          {isLoading ? 'Loading...' : 'Bayar'}
-        </button>
-      </div>
+      </DesktopView>
     </>
   )
 }
@@ -311,10 +459,7 @@ 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}
-      >
+      <Link className='text-caption-1' href={url}>
         Pilih Alamat Lain
       </Link>
     </div>