Merged in CR/Pricelist (pull request #92)

CR/Pricelist

11 files changed, 326 insertions, 497 deletions

diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index b5976a1b..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()
@@ -32,7 +34,7 @@ const Cart = () => {
 
   const [cart, setCart] = useState(null)
 
-  const {setRefreshCart} = useProductCartContext()
+  const { setRefreshCart } = useProductCartContext()
 
   useEffect(() => {
     if (!auth) return
@@ -115,7 +117,7 @@ const Cart = () => {
         selected: true
       }).then(() => {
         getCart().then(() => {
-          if(promotionActiveId){
+          if (promotionActiveId) {
             setPromotionType(false)
           }
         })
@@ -438,7 +440,7 @@ const Cart = () => {
                     product.program.items &&
                     product.program.items.map((item) => (
                       <div key={item.id} className='flex mx-4 relative'>
-                         <ComponentCanBuy canBuy={product.canBuy} />
+                        <ComponentCanBuy canBuy={product.canBuy} />
                         <input className='mr-2 accent-danger-500 w-4' />
                         <Link
                           href={createSlug(
@@ -530,254 +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?.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 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/cart/components/Cartheader.jsx b/src/lib/cart/components/Cartheader.jsx
index cbe7c7e1..901b1501 100644
--- a/src/lib/cart/components/Cartheader.jsx
+++ b/src/lib/cart/components/Cartheader.jsx
@@ -204,7 +204,7 @@ const Cardheader = (cartCount) => {
                                 </p>
                               </Link>
 
-                              {product?.price?.discountPercentage > 0 && (
+                              {product?.hasFlashsale  && (
                                 <div className='flex gap-x-1 items-center mb-2 mt-1'>
                                   <div className='badge-solid-red'>
                                     {product?.price?.discountPercentage}%
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 6d2f62e0..e2c1a85b 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
 
@@ -633,8 +634,11 @@ const Checkout = () => {
                               Berakhir dalam{' '}
                               <span className='text-red-600'>{item.remainingTime}</span> lagi,{' '}
                             </div>
-                            <div className='text-sm ml-2 text-red-600' onClick={() => handlingTnC(item)} >
-                             Baca S&K
+                            <div
+                              className='text-sm ml-2 text-red-600'
+                              onClick={() => handlingTnC(item)}
+                            >
+                              Baca S&K
                             </div>
                           </div>
                         </div>
@@ -985,7 +989,9 @@ 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>
@@ -1045,21 +1051,27 @@ const Checkout = () => {
                               />
                             </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)}
+                              {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='badge-solid-red'>
-                                    {product?.price?.discountPercentage}%
+                                  <div className='font-normal mt-1'>
+                                    {currencyFormat(product?.price?.priceDiscount)}
                                   </div>
+                                </>
+                              ) : (
+                                <div className='font-normal mt-1'>
+                                  {product.price.priceDiscount > 0
+                                    ? currencyFormat(product?.price?.priceDiscount)
+                                    : 'Call For Price'}
                                 </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'>
@@ -1139,7 +1151,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 5cc35df7..4c8c3ae9 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -44,7 +44,10 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
   const { setRefreshCart, refreshCart } = useProductCartContext()
 
   const getLowestPrice = useCallback(() => {
-    const prices = product.variants.map((variant) => variant.price)
+    const prices = product.variants.map((variant) => ({
+      price: variant.price,
+      isFlashsale: variant.isFlashsale
+    }))
     const lowest = prices.reduce((lowest, price) => {
       return price.priceDiscount < lowest.priceDiscount ? price : lowest
     }, prices[0])
@@ -413,13 +416,13 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
               <div className='text-gray_r-12/80'>Harga mulai dari: </div>
             )}
 
-            {lowestPrice?.discountPercentage > 0 && (
+            {/* {lowestPrice?.discountPercentage > 0 && (
               <div className='flex gap-x-1 items-center mt-2'>
                 <div className='badge-solid-red text-caption-1'>
                   {lowestPrice?.discountPercentage}%
                 </div>
-                <div className='text-gray_r-11 line-through text-caption-1'>
-                  {currencyFormat(lowestPrice?.price)}
+                <div className='text-gray_r-9 text-caption-1'>
+                  Include PPN {currencyFormat(lowestPrice?.price * process.env.NEXT_PUBLIC_PPN)}
                 </div>
                 {product.flashSale.remainingTime > 0 && (
                   <div className='bg-red-600 rounded-full mb-1 p-2 pl-3 pr-3 flex w-fit items-center gap-x-1'>
@@ -436,28 +439,56 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
                   </div>
                 )}
               </div>
+            )} */}
+
+            {lowestPrice?.isFlashsale ? (
+              <>
+                <div className='flex gap-x-1 items-center mt-2'>
+                  <div className='badge-solid-red text-caption-1'>
+                    {lowestPrice?.price?.discountPercentage}%
+                  </div>
+                  <div className='text-gray_r-9 line-through text-caption-1'>
+                    {currencyFormat(lowestPrice?.price?.price)}
+                  </div>
+                  <div className='text-danger-500 font-semibold text-xl'>
+                    {currencyFormat(lowestPrice?.price?.priceDiscount)}
+                  </div>
+                </div>
+                <div className='text-gray_r-9 text-base font-normal mt-1'>
+                  Termasuk PPN:{' '}
+                  {currencyFormat(lowestPrice?.price.priceDiscount * process.env.NEXT_PUBLIC_PPN)}
+                </div>
+              </>
+            ) : (
+              <h3 className='text-danger-500 font-semibold mt-1 text-title-md'>
+                {lowestPrice?.price.price > 0 ? (
+                  <>
+                    {currencyFormat(lowestPrice?.price.price)}
+                    <div className='text-gray_r-9 text-base font-normal mt-1'>
+                      Termasuk PPN:{' '}
+                      {currencyFormat(lowestPrice?.price.price * process.env.NEXT_PUBLIC_PPN)}
+                    </div>
+                  </>
+                ) : (
+                  <span className='text-gray_r-12/90 font-normal text-h-sm'>
+                    Hubungi kami untuk dapatkan harga terbaik,&nbsp;
+                    <a
+                      href={whatsappUrl('product', {
+                        name: product.name,
+                        manufacture: product.manufacture?.name,
+                        url: createSlug('/shop/product/', product.name, product.id, true)
+                      })}
+                      className='text-danger-500 underline'
+                      rel='noopener noreferrer'
+                      target='_blank'
+                    >
+                      klik disini
+                    </a>
+                  </span>
+                )}
+              </h3>
             )}
-            <h3 className='text-danger-500 font-semibold mt-1 text-title-md'>
-              {lowestPrice?.priceDiscount > 0 ? (
-                currencyFormat(lowestPrice?.priceDiscount)
-              ) : (
-                <span className='text-gray_r-12/90 font-normal text-h-sm'>
-                  Hubungi kami untuk dapatkan harga terbaik,&nbsp;
-                  <a
-                    href={whatsappUrl('product', {
-                      name: product.name,
-                      manufacture: product.manufacture?.name,
-                      url: createSlug('/shop/product/', product.name, product.id, true)
-                    })}
-                    className='text-danger-500 underline'
-                    rel='noopener noreferrer'
-                    target='_blank'
-                  >
-                    klik disini
-                  </a>
-                </span>
-              )}
-            </h3>
+
             {product.variants.length > 1 ? (
               <button
                 type='button'
@@ -549,32 +580,65 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
                         <ColumnsSLA variant={variant} product={product} />
                       </LazyLoadComponent>
                       <td>
-                        {variant.price.discountPercentage > 0 &&
+                        {variant.isFlashsale ? (
+                          <>
+                            <div className='flex items-center gap-x-1 justify-center'>
+                              <div className='badge-solid-red text-caption-1'>
+                                {variant?.price?.discountPercentage}%
+                              </div>
+                              <div className='line-through text-caption-1 text-gray_r-11'>
+                                {currencyFormat(variant?.price?.price)}
+                              </div>{' '}
+                              <div className=' text-caption-1 text-red-600 font-semibold'>
+                                {currencyFormat(variant?.price?.priceDiscount)}
+                              </div>{' '}
+                            </div>
+                            <div className=' text-caption-1 text-gray_r-11 mb-1'>
+                              Inc. PPN:{' '}
+                              {currencyFormat(
+                                variant.price.priceDiscount * process.env.NEXT_PUBLIC_PPN
+                              )}
+                            </div>
+                          </>
+                        ) : (
+                          <div>
+                            {variant?.price?.price > 0 ? (
+                              <>
+                                <div className=' text-caption-1 text-red-600 font-semibold'>
+                                  {currencyFormat(variant?.price?.price)}
+                                </div>{' '}
+                                <div className=' text-caption-1 text-gray_r-11 mb-1'>
+                                  Inc. PPN:{' '}
+                                  {currencyFormat(
+                                    variant?.price?.priceDiscount * process.env.NEXT_PUBLIC_PPN
+                                  )}
+                                </div>
+                              </>
+                            ) : (
+                              <a
+                                href={whatsappUrl('product', {
+                                  name: variant.name,
+                                  manufacture: product.manufacture?.name,
+                                  url: createSlug('/shop/product/', product.name, product.id, true)
+                                })}
+                                className='text-red_r-11'
+                                rel='noopener noreferrer'
+                                target='_blank'
+                              >
+                                Call for price
+                              </a>
+                            )}
+                          </div>
+                        )}
+                        {/* {variant.price.discountPercentage > 0 &&
                           variant.price.priceDiscount > 0 && (
                             <>
                               <div className='line-through text-caption-1 text-gray_r-11 mb-1'>
                                 {currencyFormat(variant.price.price)}
                               </div>{' '}
                             </>
-                          )}
-                        <div>
-                          {variant.price.priceDiscount > 0 ? (
-                            currencyFormat(variant.price.priceDiscount)
-                          ) : (
-                            <a
-                              href={whatsappUrl('product', {
-                                name: variant.name,
-                                manufacture: product.manufacture?.name,
-                                url: createSlug('/shop/product/', product.name, product.id, true)
-                              })}
-                              className='text-red_r-11'
-                              rel='noopener noreferrer'
-                              target='_blank'
-                            >
-                              Call for price
-                            </a>
-                          )}
-                        </div>
+                          )} */}
+
                         {/* <VariantPrice id={variant.id} /> */}
                       </td>
                       <td>
diff --git a/src/lib/product/components/Product/ProductDesktopVariant.jsx b/src/lib/product/components/Product/ProductDesktopVariant.jsx
index d64e70c2..51739bc9 100644
--- a/src/lib/product/components/Product/ProductDesktopVariant.jsx
+++ b/src/lib/product/components/Product/ProductDesktopVariant.jsx
@@ -203,7 +203,8 @@ const ProductDesktopVariant = ({ product, wishlist, toggleWishlist, isVariant })
                       <a
                         href={whatsappUrl('product', {
                           name: product.name,
-                          url: createSlug('/shop/product/variant/', product.name, product.id, true)
+                            manufacture: product?.manufacture?.name,
+                            url: createSlug('/shop/product/', product.name, product.id, true)
                         })}
                         className='text-danger-500 font-medium'
                       >
@@ -269,44 +270,52 @@ const ProductDesktopVariant = ({ product, wishlist, toggleWishlist, isVariant })
             </div> */}
           </div>
           <div className='w-[25%]'>
-            {lowestPrice?.priceDiscount > 0 ? (
+            {product?.flashSale?.remainingTime > 0 ? (
               <>
-                <div className='flex gap-x-2 mb-3 items-center'>
-                  <div className='flex'>
-                    <span className='text-gray-400 text-md'>Harga Sebelum PPN : </span>
-                  </div>
-                  <div className='flex'>
-                    <span className=' text-body-1 '>
-                      {currencyFormat(lowestPrice?.priceDiscount)}
-                    </span>
-                  </div>
-                </div>
-                <span className='font-semibold'>Termasuk PPN :</span>
-                <div className='flex gap-x-1 items-center mt-2 '>
+                <div className='flex gap-x-1 items-center mt-2'>
                   <div className='badge-solid-red text-caption-1'>
                     {lowestPrice?.discountPercentage}%
                   </div>
-                  <div className='text-gray_r-11 line-through text-caption-1'>
-                    {currencyFormat(lowestPrice?.price * 1.11)}
+                  <div className='text-gray_r-9 line-through text-caption-1'>
+                    {currencyFormat(lowestPrice?.price)}
                   </div>
-                  <h3 className='text-danger-500 font-semibold text-title-sm'>
-                    {currencyFormat(lowestPrice?.priceDiscount * 1.11)}
-                  </h3>
+                  <div className='text-danger-500 font-semibold text-xl'>
+                    {currencyFormat(lowestPrice?.priceDiscount)}
+                  </div>
+                </div>
+                <div className='text-gray_r-9 text-base font-normal mt-1'>
+                  Termasuk PPN:{' '}
+                  {currencyFormat(lowestPrice?.priceDiscount * process.env.NEXT_PUBLIC_PPN)}
                 </div>
               </>
             ) : (
-              <span className='text-gray_r-12/90 font-normal text-h-sm'>
-                Hubungi kami untuk dapatkan harga terbaik,&nbsp;
-                <a
-                  href={whatsappUrl('product', {
-                    name: product.name,
-                    url: createSlug('/shop/product/', product.name, product.id, true)
-                  })}
-                  className='text-danger-500 underline'
-                >
-                  klik disini
-                </a>
-              </span>
+              <h3 className='text-danger-500 font-semibold mt-1 text-title-md'>
+                {lowestPrice?.price > 0 ? (
+                  <>
+                    {currencyFormat(lowestPrice?.price)}
+                    <div className='text-gray_r-9 text-base font-normal mt-1'>
+                      Termasuk PPN:{' '}
+                      {currencyFormat(lowestPrice?.price * process.env.NEXT_PUBLIC_PPN)}
+                    </div>
+                  </>
+                ) : (
+                  <span className='text-gray_r-12/90 font-normal text-h-sm'>
+                    Hubungi kami untuk dapatkan harga terbaik,&nbsp;
+                    <a
+                      href={whatsappUrl('product', {
+                        name: product.name,
+                        manufacture: product.manufacture?.name,
+                        url: createSlug('/shop/product/', product.name, product.id, true)
+                      })}
+                      className='text-danger-500 underline'
+                      rel='noopener noreferrer'
+                      target='_blank'
+                    >
+                      klik disini
+                    </a>
+                  </span>
+                )}
+              </h3>
             )}
             <div className='flex gap-x-3 mt-4'>
               <input
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 12c43727..20a1d3f4 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -100,7 +100,8 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
         price: variant.price,
         stock: variant.stock,
         weight: variant.weight,
-        hasProgram: variant.hasProgram
+        hasProgram: variant.hasProgram,
+        isFlashsale: variant.isFlashsale
       }
 
       setActiveVariant(newActiveVariant)
@@ -231,32 +232,48 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
             <div className='text-gray_r-12/80 text-caption-2 mt-2 mb-1'>Harga mulai dari: </div>
           )}
 
-        {activeVariant?.price?.discountPercentage > 0 && (
-          <div className='flex gap-x-1 items-center'>
-            <div className='text-gray_r-11 line-through text-caption-1'>
-              {currencyFormat(activeVariant?.price?.price)}
+        {activeVariant.isFlashsale ? (
+          <>
+            <div className='flex gap-x-1 items-center'>
+              <div className='badge-solid-red'>{activeVariant?.price?.discountPercentage}%</div>
+              <div className='text-gray_r-11 line-through text-caption-1'>
+                {currencyFormat(activeVariant?.price?.price)}
+              </div>
+              <div className='text-danger-500 font-semibold'>
+                {currencyFormat(activeVariant?.price?.priceDiscount)}
+              </div>
             </div>
-            <div className='badge-solid-red'>{activeVariant?.price?.discountPercentage}%</div>
-          </div>
+            <div className='text-gray_r-9 text-base font-normal mt-1'>
+              Termasuk PPN:{' '}
+              {currencyFormat(activeVariant?.price.priceDiscount * process.env.NEXT_PUBLIC_PPN)}
+            </div>
+          </>
+        ) : (
+          <h3 className='text-danger-500 font-semibold mt-1'>
+            {activeVariant?.price?.price > 0 ? (
+              <>
+                {currencyFormat(activeVariant?.price?.price)}
+                <div className='text-gray_r-9 text-base font-normal mt-1'>
+                  Termasuk PPN:{' '}
+                  {currencyFormat(activeVariant?.price.price * process.env.NEXT_PUBLIC_PPN)}
+                </div>
+              </>
+            ) : (
+              <span className='text-gray_r-11 leading-6 font-normal'>
+                Hubungi kami untuk dapatkan harga terbaik,&nbsp;
+                <a
+                  href={whatsappUrl('product', {
+                    name: product.name,
+                    url: createSlug('/shop/product/', product.name, product.id, true)
+                  })}
+                  className='text-danger-500 underline'
+                >
+                  klik disini
+                </a>
+              </span>
+            )}
+          </h3>
         )}
-        <h3 className='text-danger-500 font-semibold mt-1'>
-          {activeVariant?.price?.priceDiscount > 0 ? (
-            currencyFormat(activeVariant?.price?.priceDiscount)
-          ) : (
-            <span className='text-gray_r-11 leading-6 font-normal'>
-              Hubungi kami untuk dapatkan harga terbaik,&nbsp;
-              <a
-                href={whatsappUrl('product', {
-                  name: product.name,
-                  url: createSlug('/shop/product/', product.name, product.id, true)
-                })}
-                className='text-danger-500 underline'
-              >
-                klik disini
-              </a>
-            </span>
-          )}
-        </h3>
       </div>
 
       <Divider />
diff --git a/src/lib/product/components/Product/ProductMobileVariant.jsx b/src/lib/product/components/Product/ProductMobileVariant.jsx
index d0c209cc..8cdb631f 100644
--- a/src/lib/product/components/Product/ProductMobileVariant.jsx
+++ b/src/lib/product/components/Product/ProductMobileVariant.jsx
@@ -39,7 +39,8 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
     name: product.name,
     price: getLowestPrice(),
     stock: product.stockTotal,
-    weight: product.weight
+    weight: product.weight,
+    isFlashSale: product.isFlashsale
   })
 
   useEffect(() => {
@@ -50,7 +51,8 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
         name: product.name,
         price: product.price,
         stock: product.stock,
-        weight: product.weight
+        weight: product.weight,
+        isFlashSale: product.isFlashsale
       })
     }
   }, [selectedVariant, product])
@@ -139,47 +141,47 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
         </div>
         <h1 className='leading-6 font-medium mb-3'>{activeVariant?.name}</h1>
 
-        {activeVariant?.price?.priceDiscount > 0 ? (
+        {activeVariant.isFlashsale ? (
           <>
             <div className='flex gap-x-1 items-center'>
-              <div className='text-gray_r-11 text-caption-1'>Harga Sebelum PPN :</div>
-              <div className='text-gray_r-12 line-through text-caption-1'>
-                {' '}
+              <div className='badge-solid-red'>{activeVariant?.price?.discountPercentage}%</div>
+              <div className='text-gray_r-11 line-through text-caption-1'>
+                {currencyFormat(activeVariant?.price?.price)}
+              </div>
+              <div className='text-danger-500 font-semibold'>
                 {currencyFormat(activeVariant?.price?.priceDiscount)}
               </div>
             </div>
-            <div className='mt-2'>
-              <span className='font-semibold '>Termasuk PPN :</span>
-              <div className='flex gap-x-2 items-center mt-2'>
-                {activeVariant?.price?.discountPercentage > 0 && (
-                  <>
-                    <div className='badge-solid-red'>
-                      {activeVariant?.price?.discountPercentage}%
-                    </div>
-                    <div className='text-gray_r-11 line-through text-caption-1'>
-                      {currencyFormat(activeVariant?.price?.price * 1.11)}
-                    </div>
-                  </>
-                )}
-                <h3 className='text-danger-500 font-semibold'>
-                  {currencyFormat(activeVariant?.price?.priceDiscount * 1.11)}
-                </h3>
-              </div>
+            <div className='text-gray_r-9 text-base font-normal mt-1'>
+              Termasuk PPN:{' '}
+              {currencyFormat(activeVariant?.price.priceDiscount * process.env.NEXT_PUBLIC_PPN)}
             </div>
           </>
         ) : (
-          <span className='text-gray_r-11 leading-6 font-normal'>
-            Hubungi kami untuk dapatkan harga terbaik,&nbsp;
-            <a
-              href={whatsappUrl('product', {
-                name: product.name,
-                url: createSlug('/shop/product/', product.name, product.id, true)
-              })}
-              className='text-danger-500 underline'
-            >
-              klik disini
-            </a>
-          </span>
+          <h3 className='text-danger-500 font-semibold mt-1'>
+            {activeVariant?.price?.priceDiscount > 0 ? (
+              <>
+                {currencyFormat(activeVariant?.price?.priceDiscount)}
+                <div className='text-gray_r-9 text-base font-normal mt-1'>
+                  Termasuk PPN:{' '}
+                  {currencyFormat(activeVariant?.price.priceDiscount * process.env.NEXT_PUBLIC_PPN)}
+                </div>
+              </>
+            ) : (
+              <span className='text-gray_r-11 leading-6 font-normal'>
+                Hubungi kami untuk dapatkan harga terbaik,&nbsp;
+                <a
+                  href={whatsappUrl('product', {
+                    name: product.name,
+                    url: createSlug('/shop/product/', product.name, product.id, true)
+                  })}
+                  className='text-danger-500 underline'
+                >
+                  klik disini
+                </a>
+              </span>
+            )}
+          </h3>
         )}
       </div>
 
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index 10ffdaec..6a5e29ab 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -82,30 +82,47 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
           )}
           <Link
             href={createSlug('/shop/product/', product?.name, product?.id)}
-            className={`mb-2 !text-gray_r-12 leading-6 block ${
+            className={`mb-3 !text-gray_r-12 leading-6 block ${
               simpleTitle ? 'line-clamp-2 h-12' : 'line-clamp-3 h-[64px]'
             }`}
             title={product?.name}
           >
             {product?.name}
           </Link>
-          {product?.lowestPrice.discountPercentage > 0 && (
-            <div className='flex gap-x-1 mb-1 items-center'>
-              <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
-                {currencyFormat(product.lowestPrice.price)}
+          {product?.flashSale?.id > 0 ? (
+            <>
+              {product?.lowestPrice.discountPercentage > 0 && (
+                <div className='flex gap-x-1 mb-1 items-center'>
+                  <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
+                    {currencyFormat(product.lowestPrice.price)}
+                  </div>
+                  <div className='badge-solid-red'>{product?.lowestPrice.discountPercentage}%</div>
+                </div>
+              )}
+
+              <div className='text-danger-500 font-semibold mb-2'>
+                {product?.lowestPrice.priceDiscount > 0 ? (
+                  currencyFormat(product?.lowestPrice.priceDiscount)
+                ) : (
+                  <a href={callForPriceWhatsapp}>Call for price</a>
+                )}
               </div>
-              <div className='badge-solid-red'>{product?.lowestPrice.discountPercentage}%</div>
+            </>
+          ) : (
+            <div className='text-danger-500 font-semibold mb-2 min-h-[40px]'>
+              {product?.lowestPrice.price > 0 ? (
+                <>
+                  {currencyFormat(product?.lowestPrice.price)}
+                  <div className='text-gray_r-9 text-[10px] font-normal mt-2'>
+                    Inc. PPN: {currencyFormat(product.lowestPrice.price * process.env.NEXT_PUBLIC_PPN )}
+                  </div>
+                </>
+              ) : (
+                <a href={callForPriceWhatsapp}>Call for price</a>
+              )}
             </div>
           )}
 
-          <div className='text-danger-500 font-semibold mb-2'>
-            {product?.lowestPrice.priceDiscount > 0 ? (
-              currencyFormat(product?.lowestPrice.priceDiscount)
-            ) : (
-              <a href={callForPriceWhatsapp}>Call for price</a>
-            )}
-          </div>
-
           {product?.stockTotal > 0 && (
             <div className='flex gap-x-1'>
               <div className='badge-solid-red'>Ready Stock</div>
@@ -169,30 +186,46 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
           )}
           <Link
             href={createSlug('/shop/product/', product?.name, product?.id)}
-            className={`mb-2 !text-gray_r-12 leading-6 ${
+            className={`mb-3 !text-gray_r-12 leading-6 ${
               simpleTitle ? 'line-clamp-2' : 'line-clamp-3'
             }`}
           >
             {product?.name}
           </Link>
+          {product?.flashSale?.id > 0 ? (
+            <>
+              {product?.lowestPrice.discountPercentage > 0 && (
+                <div className='flex gap-x-1 mb-1 items-center'>
+                  <div className='badge-solid-red'>{product?.lowestPrice?.discountPercentage}%</div>
+                  <div className='text-gray_r-11 line-through text-caption-2'>
+                    {currencyFormat(product?.lowestPrice?.price)}
+                  </div>
+                </div>
+              )}
 
-          {product?.lowestPrice?.discountPercentage > 0 && (
-            <div className='flex gap-x-1 mb-1 items-center'>
-              <div className='badge-solid-red'>{product?.lowestPrice?.discountPercentage}%</div>
-              <div className='text-gray_r-11 line-through text-caption-2'>
-                {currencyFormat(product?.lowestPrice?.price)}
+              <div className='text-danger-500 font-semibold mb-2'>
+                {product?.lowestPrice?.priceDiscount > 0 ? (
+                  currencyFormat(product?.lowestPrice?.priceDiscount)
+                ) : (
+                  <a href={callForPriceWhatsapp}>Call for price</a>
+                )}
               </div>
+            </>
+          ) : (
+            <div className='text-danger-500 font-semibold mb-2 min-h-[40px]'>
+              {product?.lowestPrice.price > 0 ? (
+                <>
+                  {currencyFormat(product?.lowestPrice.price)}
+                  <div className='text-gray_r-9 text-[11px] sm:text-caption-2 font-normal mt-2'>
+                    Inc. PPN: {currencyFormat(product.lowestPrice.price * process.env.NEXT_PUBLIC_PPN)}
+                  </div>
+                </>
+              ) : (
+                <a href={callForPriceWhatsapp}>Call for price</a>
+              )}
             </div>
           )}
 
-          <div className='text-danger-500 font-semibold mb-2'>
-            {product?.lowestPrice?.priceDiscount > 0 ? (
-              currencyFormat(product?.lowestPrice?.priceDiscount)
-            ) : (
-              <a href={callForPriceWhatsapp}>Call for price</a>
-            )}
-          </div>
-
           {product?.stockTotal > 0 && (
             <div className='flex gap-x-1'>
               <div className='badge-solid-red'>Ready Stock</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'>
diff --git a/src/lib/variant/components/VariantCard.jsx b/src/lib/variant/components/VariantCard.jsx
index 0f9f02f6..64b6d146 100644
--- a/src/lib/variant/components/VariantCard.jsx
+++ b/src/lib/variant/components/VariantCard.jsx
@@ -43,7 +43,7 @@ const VariantCard = ({ product, openOnClick = true, buyMore = false }) => {
           Berat Item : {product?.weight} Kg
         </p>
         <div className='flex flex-wrap gap-x-1 items-center mt-auto'>
-          {product.price.discountPercentage > 0 && (
+          {product.hasFlashsale && (
             <>
               <p className='text-caption-2 text-gray_r-11 line-through'>
                 {currencyFormat(product.price.price)}
diff --git a/src/lib/variant/components/VariantGroupCard.jsx b/src/lib/variant/components/VariantGroupCard.jsx
index dd5983a9..1e921546 100644
--- a/src/lib/variant/components/VariantGroupCard.jsx
+++ b/src/lib/variant/components/VariantGroupCard.jsx
@@ -4,7 +4,6 @@ import Image from '@/core/components/elements/Image/Image'
 import currencyFormat from '@/core/utils/currencyFormat'
 
 const VariantGroupCard = ({ variants, ...props }) => {
-  console.log('variant', variants)
   const [showAll, setShowAll] = useState(false)
   const variantsToShow = showAll ? variants : variants.slice(0, 2)