add component list product for cart, quotation, and checkout

1 files changed, 3 insertions, 254 deletions

diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index 5716d01b..c6aaa596 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -23,6 +23,8 @@ import { getPromotionProgram } from '@/lib/promotinProgram/api/homepageApi'
 import PromotionType from '@/lib/promotinProgram/components/PromotionType'
 import { gtagBeginCheckout } from '@/core/utils/googleTag'
 import { useProductCartContext } from '@/contexts/ProductCartContext'
+import CardProdcuctsList from '@/core/components/elements/Product/cartProductsList'
+// import cardProdcuctsList from '@/core/components/elements/Product/cartProductsList'
 
 const Cart = () => {
   const router = useRouter()
@@ -530,260 +532,7 @@ const Cart = () => {
           <div className='col-span-9 border border-gray_r-6 rounded bg-white p-4 pt-6'>
             <h1 className='text-title-sm font-semibold mb-6'>Keranjang</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>
-                {isLoading && (
-                  <tr>
-                    <td colSpan={6}>
-                      <div className='container flex justify-center my-4'>
-                        <LogoSpinner width={48} height={48} />
-                      </div>
-                    </td>
-                  </tr>
-                )}
-                {!isLoading && (!products || products?.length == 0) && (
-                  <tr>
-                    <td colSpan={6}>Keranjang belanja anda masih kosong</td>
-                  </tr>
-                )}
-                {products &&
-                  products?.map((product) => (
-                    <>
-                      {product.hasProgram && (
-                        <tr className='!border-b-0 pb-0'>
-                          <td colSpan={6}>
-                            <div className='flex gap-x-2 bg-yellow-100 p-2 items-center'>
-                              {product.program ? (
-                                <>
-                                  <div className='flex border border-solid border-red-600 rounded-md p-1'>
-                                    <span className='text-red-600'>
-                                      {product.program.type.label}
-                                    </span>
-                                  </div>
-                                  <div className='flex'>
-                                    {product.program.type.value == 'merchandise' ? (
-                                      <>Selamat anda mendapatkan merchandise indoteknik.com</>
-                                    ) : (
-                                      <>
-                                        Selamat! Pembelian anda lebih hemat
-                                        <span className='text-red-600 font-semibold ml-2'>
-                                          {' '}
-                                          {currencyFormat(product.program?.totalSavings)}
-                                        </span>
-                                      </>
-                                    )}
-                                  </div>
-                                </>
-                              ) : (
-                                <>
-                                  <div className='flex border border-solid border-red-600 rounded-md p-1'>
-                                    <span className='text-red-600'>Promo</span>
-                                  </div>
-                                  <div className='flex'>
-                                    Pilih Promo Yang Tersedia Bisa lebih Hemat
-                                  </div>
-                                </>
-                              )}
-                              <div
-                                onClick={() =>
-                                  handlePopUpPromo(
-                                    product.id,
-                                    product.quantity,
-                                    product.program?.id
-                                  )
-                                }
-                                className='ml-auto text-red-500 flex gap-x-1 cursor-pointer'
-                              >
-                                <div className='font-semibold'> Cek Promo</div>
-                                <div>
-                                  <svg
-                                    aria-hidden='true'
-                                    fill='none'
-                                    stroke='currentColor'
-                                    stroke-width='1.5'
-                                    viewBox='0 0 20 24'
-                                    className='h-5 w-5 font-semibold'
-                                  >
-                                    <path
-                                      d='M8.25 4.5l7.5 7.5-7.5 7.5'
-                                      stroke-linecap='round'
-                                      stroke-linejoin='round'
-                                    ></path>
-                                  </svg>
-                                </div>
-                              </div>
-                            </div>
-                          </td>
-                        </tr>
-                      )}
-                      <tr
-                        key={product.id}
-                        className={`${product.hasProgram ? '!border-t-0 !border-b-0' : ''}`}
-                      >
-                        <td className='relative'>
-                          <ComponentCanBuy canBuy={product.canBuy} />
-                          <input
-                            type='checkbox'
-                            onClick={() => toggleSelected(product.id)}
-                            checked={product?.selected}
-                            className='accent-danger-500 w-4'
-                          />
-                        </td>
-                        <td className='flex relative'>
-                          <ComponentCanBuy canBuy={product.canBuy} />
-                          <Link
-                            href={createSlug(
-                              '/shop/product/',
-                              product?.parent.name,
-                              product?.parent.id
-                            )}
-                            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-28 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 className='relative'>
-                          <ComponentCanBuy canBuy={product.canBuy} />
-                          <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 className='relative'>
-                          <ComponentCanBuy canBuy={product.canBuy} />
-                          {product?.hasFlashsale ? (
-                            <>
-                              <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>
-                            </>
-                          ) : (
-                            <div className='font-normal mt-1'>
-                              {currencyFormat(product?.price?.price)}
-                            </div>
-                          )}
-                        </td>
-                        <td className='relative'>
-                          <ComponentCanBuy canBuy={product.canBuy} />
-                          <div className='text-danger-500 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>
-                      {product?.program?.items && (
-                        <tr key={product.program.id} className='!border-t-0'>
-                          {product.program.items.map((item) => (
-                            <>
-                              <td className='relative'>
-                                <ComponentCanBuy canBuy={product.canBuy} />
-                              </td>
-                              <td className='flex relative'>
-                                <ComponentCanBuy canBuy={product.canBuy} />
-                                <div className='w-[20%] flex-shrink-0'>
-                                  <Image
-                                    src={item.parent.image}
-                                    alt={item.name}
-                                    className='object-contain object-center border border-gray_r-6 h-28 w-full rounded-md'
-                                  />
-                                </div>
-                                <div className='px-2 text-left'>
-                                  <div className=''>
-                                    <span className='border border-solid border-red-600 rounded-md p-1 text-red-600'>
-                                      {product.program.type.label}
-                                    </span>
-                                  </div>
-                                  <div className='mt-2 line-clamp-2 leading-6'>{item.name}</div>
-                                </div>
-                              </td>
-                              <td className='relative'>
-                                <ComponentCanBuy canBuy={product.canBuy} />
-                                <input
-                                  className='form-input w-16 py-2 text-center bg-gray_r-1'
-                                  type='number'
-                                  value={1}
-                                  disabled
-                                />
-                              </td>
-                              <td className='relative'>
-                                <ComponentCanBuy canBuy={product.canBuy} />
-                                {item?.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>
-                                )}
-                                <div className='font-normal mt-1'>
-                                  {item?.price.priceDiscount > 0 ? 'Gratis' : ''}
-                                </div>
-                              </td>
-                              <td className='relative'>
-                                <ComponentCanBuy canBuy={product.canBuy} />
-                                <div className='text-danger-500 font-medium'>
-                                  {item.price.priceDiscount > 0 ? 'Gratis' : ''}
-                                </div>
-                              </td>
-                              <td></td>
-                            </>
-                          ))}
-                        </tr>
-                      )}
-                    </>
-                  ))}
-              </tbody>
-            </table>
+            <CardProdcuctsList isLoading={isLoading} products={products} source='cart' handlePopUpPromo ={handlePopUpPromo} toggleSelected ={toggleSelected} updateQuantity ={updateQuantity} setDeleteConfirmation ={setDeleteConfirmation}/>
 
             <div className='pt-2 pb-6 flex items-center gap-x-3'>
               <NextImage