checkout

2 files changed, 44 insertions, 10 deletions

diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index f1a001a6..d9c95327 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -1,4 +1,5 @@
 import Image from '@/core/components/elements/Image/Image'
+import ImageNext from 'next/image'
 import Link from '@/core/components/elements/Link/Link'
 import DesktopView from '@/core/components/views/DesktopView'
 import currencyFormat from '@/core/utils/currencyFormat'
@@ -58,7 +59,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
   }
 
   const handleAddToCart = (variantId) => {
-    if(!auth) {
+    if (!auth) {
       router.push(`/login?next=/shop/product/${slug}`)
       return
     }
@@ -165,11 +166,13 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                     )}
                   </div>
                 </div>
-                <div className='pt-3'>
-                  <div className='flex mt-1'>
-                    <PromotionType></PromotionType>
+                {product.variants.length <= 1 && (
+                  <div className='pt-3'>
+                    <div className='flex mt-1'>
+                      <PromotionType></PromotionType>
+                    </div>
                   </div>
-                </div>
+                )}
               </div>
             </div>
 
@@ -328,7 +331,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                   </tr>
                 </thead>
                 <tbody>
-                  {product.variants.map((variant) => (
+                  {product.variants.map((variant, index) => (
                     <tr key={variant.id}>
                       <td>{variant.code}</td>
                       <td>{variant.attributes.join(', ') || '-'}</td>
@@ -367,6 +370,27 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                         />
                       </td>
                       <td className='flex gap-x-3'>
+                        {index == 0 ? (
+                          <ImageNext
+                            src='/images/noun-applied-check2.svg'
+                            alt=''
+                            height={60}
+                            width={60}
+                            onClick={() => setPromotionType(true)}
+                            className='cursor-pointer'
+                          ></ImageNext>
+                        ) : (
+                          <div className='w-[60px] flex justify-center'>
+                            <ImageNext
+                              src='/images/noun-discount-5796402.svg'
+                              alt=''
+                              height={30}
+                              width={30}
+                              onClick={() => setPromotionType(true)}
+                              className='cursor-pointer'
+                            ></ImageNext>
+                          </div>
+                        )}
                         <button
                           type='button'
                           onClick={() => handleAddToCart(variant.id)}
@@ -396,7 +420,16 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
             <ProductSimilar query={productSimilarQuery} />
           </LazyLoad>
         </div>
-
+        <BottomPopup
+          className=' !h-[75%]'
+          title='Pakai Promo'
+          active={promotionType}
+          close={() => setPromotionType(false)}
+        >
+          <div className='flex mt-4'>
+            <PromotionType isModal={true}></PromotionType>
+          </div>
+        </BottomPopup>
         <BottomPopup
           className='!container'
           title='Berhasil Ditambahkan'
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 1c2974b0..4da237ed 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -171,9 +171,6 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
       <Divider />
 
       <div className='p-4'>
-        <div className='mb-5'>
-          <PromotionType></PromotionType>
-        </div>
         <div>
           <label className='flex justify-between'>
             Pilih Varian:
@@ -189,6 +186,10 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
             isSearchable={product.variantTotal > 10}
           />
         </div>
+        <div className='mt-5'>
+          <PromotionType></PromotionType>
+        </div>
+
         <div className='mt-4 mb-2'>Jumlah</div>
         <div className='flex gap-x-3'>
           <div className='w-2/12'>