From e72c16eb549488e1ed847b022880f542d2a9c525 Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Thu, 5 Oct 2023 09:32:12 +0700
Subject: add component list product for cart, quotation, and checkout

---
 src/lib/cart/components/Cart.jsx                   | 257 +--------------------
 src/lib/checkout/components/Checkout.jsx           |   8 +-
 .../product/components/Product/ProductDesktop.jsx  |   4 +-
 src/lib/product/components/ProductCard.jsx         |   6 +-
 src/lib/quotation/components/Quotation.jsx         |  66 +-----
 5 files changed, 16 insertions(+), 325 deletions(-)

(limited to 'src/lib')

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
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 4739cd18..6b7852f2 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -32,6 +32,7 @@ import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import { useQuery } from 'react-query'
 import { gtagPurchase } from '@/core/utils/googleTag'
 import { findVoucher, getVoucher } from '../api/getVoucher'
+import CardProdcuctsList from '@/core/components/elements/Product/cartProductsList'
 
 const SELF_PICKUP_ID = 32
 
@@ -988,7 +989,10 @@ const Checkout = () => {
 
               <div className='p-4'>
                 <div className='font-medium'>Detail Pesanan</div>
-                <table className='table-checkout'>
+                
+                <CardProdcuctsList isLoading={isLoading} products={products} />
+                
+                {/* <table className='table-checkout'>
                   <thead>
                     <tr>
                       <th>Nama Produk</th>
@@ -1148,7 +1152,7 @@ const Checkout = () => {
                       ))
                     )}
                   </tbody>
-                </table>
+                </table> */}
               </div>
             </div>
             <div className='w-1/4 pl-4'>
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 5e827089..4c8c3ae9 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -594,7 +594,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
                               </div>{' '}
                             </div>
                             <div className=' text-caption-1 text-gray_r-11 mb-1'>
-                              + PPN:{' '}
+                              Inc. PPN:{' '}
                               {currencyFormat(
                                 variant.price.priceDiscount * process.env.NEXT_PUBLIC_PPN
                               )}
@@ -608,7 +608,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
                                   {currencyFormat(variant?.price?.price)}
                                 </div>{' '}
                                 <div className=' text-caption-1 text-gray_r-11 mb-1'>
-                                  + PPN:{' '}
+                                  Inc. PPN:{' '}
                                   {currencyFormat(
                                     variant?.price?.priceDiscount * process.env.NEXT_PUBLIC_PPN
                                   )}
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index 16c63c00..6a5e29ab 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -113,8 +113,8 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
               {product?.lowestPrice.price > 0 ? (
                 <>
                   {currencyFormat(product?.lowestPrice.price)}
-                  <div className='text-gray_r-9  text-[11px] font-normal sm:text-caption-2 mt-2'>
-                    + PPN: {currencyFormat(product.lowestPrice.price * process.env.NEXT_PUBLIC_PPN)}
+                  <div className='text-gray_r-9 text-[10px] font-normal mt-2'>
+                    Inc. PPN: {currencyFormat(product.lowestPrice.price * process.env.NEXT_PUBLIC_PPN )}
                   </div>
                 </>
               ) : (
@@ -217,7 +217,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                 <>
                   {currencyFormat(product?.lowestPrice.price)}
                   <div className='text-gray_r-9 text-[11px] sm:text-caption-2 font-normal mt-2'>
-                    + PPN: {currencyFormat(product.lowestPrice.price * process.env.NEXT_PUBLIC_PPN)}
+                    Inc. PPN: {currencyFormat(product.lowestPrice.price * process.env.NEXT_PUBLIC_PPN)}
                   </div>
                 </>
               ) : (
diff --git a/src/lib/quotation/components/Quotation.jsx b/src/lib/quotation/components/Quotation.jsx
index cee35457..8c379ead 100644
--- a/src/lib/quotation/components/Quotation.jsx
+++ b/src/lib/quotation/components/Quotation.jsx
@@ -16,6 +16,7 @@ import MobileView from '@/core/components/views/MobileView'
 import DesktopView from '@/core/components/views/DesktopView'
 import Image from '@/core/components/elements/Image/Image'
 import { useQuery } from 'react-query'
+import CardProdcuctsList from '@/core/components/elements/Product/cartProductsList'
 
 const { checkoutApi } = require('@/lib/checkout/api/checkoutApi')
 const { getProductsCheckout } = require('@/lib/checkout/api/checkoutApi')
@@ -174,70 +175,7 @@ const Quotation = () => {
         <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>
+            <CardProdcuctsList isLoading={isLoading} products={products} source='checkout' />
           </div>
 
           <div className='w-1/4 pl-4'>
-- 
cgit v1.2.3