change request layout harga

2 files changed, 76 insertions, 70 deletions

diff --git a/src/lib/product/components/Product/ProductDesktopVariant.jsx b/src/lib/product/components/Product/ProductDesktopVariant.jsx
index 557bcc0e..e0573357 100644
--- a/src/lib/product/components/Product/ProductDesktopVariant.jsx
+++ b/src/lib/product/components/Product/ProductDesktopVariant.jsx
@@ -196,46 +196,45 @@ const ProductDesktopVariant = ({ product, wishlist, toggleWishlist, isVariant })
             </div> */}
           </div>
           <div className='w-[25%]'>
-            <div className='flex justify-between mb-3 items-center'>
-              <div className='flex'>
-                <span className='text-gray-400 text-md'>Harga Sebelum PPN : </span>
-              </div>
-              <div className='flex'>
-                <span className='font-semibold text-body-1 text-danger-500'>
-                  {currencyFormat(lowestPrice?.priceDiscount)}
-                </span>
-              </div>
-            </div>
-            <span className='font-semibold'>Termasuk PPN :</span>
-            {lowestPrice?.discountPercentage > 0 && (
-              <div className='flex gap-x-1 items-center mt-2 '>
-                <div className='badge-solid-red text-caption-1'>
-                  {lowestPrice?.discountPercentage}%
+            {lowestPrice?.priceDiscount > 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>
-                <div className='text-gray_r-11 line-through text-caption-1'>
-                  {currencyFormat(lowestPrice?.price * 1.11)}
+                <span className='font-semibold'>Termasuk PPN :</span>
+                <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>
+                  <h3 className='text-danger-500 font-semibold text-title-sm'>
+                    {currencyFormat(lowestPrice?.priceDiscount * 1.11)}
+                  </h3>
                 </div>
-                <h3 className='text-danger-500 font-semibold text-title-sm'>
-                  {lowestPrice?.priceDiscount > 0 ? (
-                    currencyFormat(lowestPrice?.priceDiscount * 1.11)
-                  ) : (
-                    <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>
-              </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>
             )}
-
             <div className='flex gap-x-3 mt-4'>
               <input
                 type='number'
@@ -258,7 +257,6 @@ const ProductDesktopVariant = ({ product, wishlist, toggleWishlist, isVariant })
                 Beli
               </button>
             </div>
-
             <div className='flex mt-4'>
               <button className='flex items-center gap-x-1' onClick={toggleWishlist}>
                 {wishlist.data?.productTotal > 0 ? (
@@ -269,7 +267,6 @@ const ProductDesktopVariant = ({ product, wishlist, toggleWishlist, isVariant })
                 Wishlist
               </button>
             </div>
-
             <div className='border border-gray_r-6 overflow-auto mt-4'>
               <div className='font-medium text-center p-4 bg-gray_r-1 border-b border-gray_r-6 sticky top-0 z-10'>
                 Produk Serupa
diff --git a/src/lib/product/components/Product/ProductMobileVariant.jsx b/src/lib/product/components/Product/ProductMobileVariant.jsx
index 29d7700d..26c3fea3 100644
--- a/src/lib/product/components/Product/ProductMobileVariant.jsx
+++ b/src/lib/product/components/Product/ProductMobileVariant.jsx
@@ -115,39 +115,48 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
         </div>
         <h1 className='leading-6 font-medium mb-3'>{activeVariant?.name}</h1>
 
-        {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 * 1.11)}
+        {activeVariant?.price?.priceDiscount > 0 ? (
+          <>
+            <div className='flex gap-x-1 items-center'>
+              <div className='text-gray_r-11 line-through text-caption-1'>Harga Sebelum PPN :</div>
+              <div className='text-gray_r-12 line-through text-caption-1'>
+                {' '}
+                {currencyFormat(activeVariant?.price?.priceDiscount)}
+              </div>
             </div>
-            <div className='badge-solid-red'>{activeVariant?.price?.discountPercentage}%</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>
+          </>
+        ) : (
+          <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='font-semibold mt-1 text-caption-1'>
-          {currencyFormat(activeVariant?.price?.priceDiscount)}
-        </h3>
-        <h3 className='text-danger-500 font-semibold mt-1'>
-          {activeVariant?.price?.priceDiscount > 0 ? (
-            currencyFormat(activeVariant?.price?.priceDiscount * 1.11)
-          ) : (
-            <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>
-          )}
-
-          {activeVariant?.price?.priceDiscount > 0 && (
-            <span className='text-xs text-gray_r-11'> *include PPN</span>
-          )}
-        </h3>
       </div>
 
       <Divider />