cart, checkout, quotation

1 files changed, 187 insertions, 31 deletions

diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index b48b41fc..8bd9e362 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -1,6 +1,7 @@
 import Link from '@/core/components/elements/Link/Link'
 import useCart from '../hooks/useCart'
 import Image from '@/core/components/elements/Image/Image'
+import NextImage from 'next/image'
 import currencyFormat from '@/core/utils/currencyFormat'
 import { useEffect, useState } from 'react'
 import { deleteItemCart, getItemCart, updateItemCart } from '@/core/utils/cart'
@@ -118,6 +119,33 @@ const Cart = () => {
 
   return (
     <>
+      <BottomPopup
+        active={deleteConfirmation}
+        close={() => setDeleteConfirmation(null)}
+        title='Hapus dari Keranjang'
+      >
+        <div className='leading-7 text-gray_r-12/80'>
+          Apakah anda yakin menghapus barang{' '}
+          <span className='underline'>{deleteConfirmation?.name}</span> dari keranjang?
+        </div>
+        <div className='flex mt-6 gap-x-4'>
+          <button
+            className='btn-solid-red flex-1'
+            type='button'
+            onClick={() => deleteProduct(deleteConfirmation?.id)}
+          >
+            Ya, Hapus
+          </button>
+          <button
+            className='btn-light flex-1'
+            type='button'
+            onClick={() => setDeleteConfirmation(null)}
+          >
+            Batal
+          </button>
+        </div>
+      </BottomPopup>
+
       <MobileView>
         <div className='pt-4'>
           <div className='flex justify-between mb-4 px-4'>
@@ -255,41 +283,169 @@ const Cart = () => {
               </div>
             </div>
           </div>
-
-          <BottomPopup
-            active={deleteConfirmation}
-            close={() => setDeleteConfirmation(null)}
-            title='Hapus dari Keranjang'
-          >
-            <div className='leading-7 text-gray_r-12/80'>
-              Apakah anda yakin menghapus barang{' '}
-              <span className='underline'>{deleteConfirmation?.name}</span> dari keranjang?
-            </div>
-            <div className='flex mt-6 gap-x-4'>
-              <button
-                className='btn-solid-red flex-1'
-                type='button'
-                onClick={() => deleteProduct(deleteConfirmation?.id)}
-              >
-                Ya, Hapus
-              </button>
-              <button
-                className='btn-light flex-1'
-                type='button'
-                onClick={() => setDeleteConfirmation(null)}
-              >
-                Batal
-              </button>
-            </div>
-          </BottomPopup>
         </div>
       </MobileView>
 
       <DesktopView>
-        <div className='container mx-auto pt-10'>
-          <div className='flex'>
-            <div className='w-9/12'>
-              <h1 className='text-title-sm font-semibold'>Daftar Produk Belanja</h1>
+        <div className='container mx-auto py-10 flex'>
+          <div className='w-9/12 border border-gray_r-6 rounded bg-white p-4'>
+            <h1 className='text-title-sm font-semibold mb-6'>Daftar Produk Belanja</h1>
+
+            <table className='table-cart'>
+              <thead>
+                <tr>
+                  <th colSpan={2}>Nama Produk</th>
+                  <th>Jumlah</th>
+                  <th>Harga</th>
+                  <th>Subtotal</th>
+                  <th>Action</th>
+                </tr>
+              </thead>
+              <tbody>
+                {!cart.isLoading && (!products || products?.length == 0) && (
+                  <tr>
+                    <td colSpan={6}>Keranjang belanja anda masih kosong</td>
+                  </tr>
+                )}
+                {products?.map((product) => (
+                  <tr key={product.id}>
+                    <td>
+                      <button
+                        type='button'
+                        className='flex items-center mr-2'
+                        onClick={() => toggleSelected(product.id)}
+                      >
+                        {!product?.selected && (
+                          <div className='w-5 h-5 border border-gray_r-11 rounded' />
+                        )}
+                        {product?.selected && (
+                          <CheckIcon className='border bg-red_r-10 w-5 text-white' />
+                        )}
+                      </button>
+                    </td>
+                    <td className='flex'>
+                      <Link
+                        href={createSlug(
+                          '/shop/product/',
+                          product?.parent.name,
+                          product?.parent.id
+                        )}
+                        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'
+                        />
+                      </Link>
+                      <div className='px-2 text-left'>
+                        <Link
+                          href={createSlug(
+                            '/shop/product/',
+                            product?.parent.name,
+                            product?.parent.id
+                          )}
+                          className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
+                        >
+                          {product?.parent?.name}
+                        </Link>
+                        <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}
+                        onChange={(e) => updateQuantity(e.target.value, product?.id)}
+                        onBlur={(e) => updateQuantity(e.target.value, product?.id, 'BLUR')}
+                      />
+                    </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>
+                    <td>
+                      <div className='flex justify-center items-center h-full'>
+                        <button
+                          className='btn-red p-1 ml-1'
+                          onClick={() => setDeleteConfirmation(product)}
+                        >
+                          <TrashIcon className='w-4' />
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+
+            <div className='pt-2 pb-6 flex items-center gap-x-3'>
+              <NextImage
+                src='/images/logo-question.png'
+                alt='Logo Question Indoteknik'
+                width={60}
+                height={60}
+              />
+              <div className='text-gray_r-12/90'>
+                Tanya stock untuk pembelian anda sebelum melanjutkan pembayaran!
+              </div>
+            </div>
+          </div>
+
+          <div className='w-3/12 pl-4'>
+            <div className='sticky top-32 w-full p-4 rounded border border-gray_r-6 bg-white'>
+              <h1 className='text-title-sm font-semibold mb-6'>Ringkasan Belanja</h1>
+              <div className='flex justify-between mb-4'>
+                <div className='text-gray_r-11'>
+                  Total:
+                  <span className='text-red_r-11 font-semibold'>
+                    &nbsp;
+                    {selectedProduct().length > 0
+                      ? currencyFormat(totalPriceBeforeTax - totalDiscountAmount + totalTaxAmount)
+                      : '-'}
+                  </span>
+                </div>
+              </div>
+              <div className='flex gap-x-3'>
+                <button
+                  type='button'
+                  className='btn-yellow flex-1'
+                  disabled={selectedProduct().length == 0}
+                  onClick={() => router.push('/shop/quotation')}
+                >
+                  Quotation
+                </button>
+                <button
+                  type='button'
+                  className='btn-solid-red flex-1'
+                  disabled={selectedProduct().length == 0}
+                  onClick={() => router.push('/shop/checkout')}
+                >
+                  Checkout
+                </button>
+              </div>
             </div>
           </div>
         </div>