summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src-migrate/modules/product-detail/components/AddToCart.tsx267
1 files changed, 195 insertions, 72 deletions
diff --git a/src-migrate/modules/product-detail/components/AddToCart.tsx b/src-migrate/modules/product-detail/components/AddToCart.tsx
index ee7cb385..9664c33a 100644
--- a/src-migrate/modules/product-detail/components/AddToCart.tsx
+++ b/src-migrate/modules/product-detail/components/AddToCart.tsx
@@ -205,102 +205,225 @@ const AddToCart = ({
active={addCartAlert}
close={() => setAddCartAlert(false)}
>
- {/* HEADER ITEM YANG DITAMBAHKAN */}
- <div className='flex mt-4'>
- <div className='w-[10%]'>
- <ImageNext
- src={product.image}
- alt={product.name}
- className='h-32 object-contain object-center w-full border border-gray_r-4'
- width={80}
- height={80}
- />
- </div>
+ {/* ===== MOBILE LAYOUT: konten scroll + footer fixed di dalam popup ===== */}
+ <div className='md:hidden flex flex-col max-h-[75vh]'>
+ {/* area scroll */}
+ <div className='flex-1 overflow-y-auto' style={{ scrollbarWidth: 'none' }}>
+ {/* HEADER ITEM */}
+ <div className='flex mt-4'>
+ <div className='w-[10%]'>
+ <ImageNext
+ src={product.image}
+ alt={product.name}
+ className='h-32 object-contain object-center w-full border border-gray_r-4'
+ width={80}
+ height={80}
+ />
+ </div>
- <div className='ml-3 flex flex-1 items-start font-medium justify-center flex-col gap-y-1'>
- {!!product.manufacture.name ? (
- <Link
- href={createSlug(
- '/shop/brands/',
- product.manufacture.name,
- product.manufacture.id.toString()
+ <div className='ml-3 flex flex-1 items-start font-medium justify-center flex-col gap-y-1'>
+ {!!product.manufacture.name ? (
+ <Link
+ href={createSlug(
+ '/shop/brands/',
+ product.manufacture.name,
+ product.manufacture.id.toString()
+ )}
+ className=' hover:underline'
+ color={'red'}
+ >
+ {product.manufacture.name}
+ </Link>
+ ) : (
+ '-'
)}
- className=' hover:underline'
- color={'red'}
- >
- {product.manufacture.name}
- </Link>
- ) : (
- '-'
- )}
- <p className='text-ellipsis overflow-hidden'>{product.name}</p>
- <p>{product.code}</p>
-
- {!!product.lowest_price && product.lowest_price.price > 0 && (
- <>
- <div className='flex items-end gap-x-2'>
- {product.lowest_price.discount_percentage > 0 && (
- <>
- <div className='badge-solid-red'>
- {Math.floor(product.lowest_price.discount_percentage)}%
- </div>
- <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
- Rp {formatCurrency(product.lowest_price.price || 0)}
+ <p className='text-ellipsis overflow-hidden'>{product.name}</p>
+ <p>{product.code}</p>
+
+ {!!product.lowest_price && product.lowest_price.price > 0 && (
+ <>
+ <div className='flex items-end gap-x-2'>
+ {product.lowest_price.discount_percentage > 0 && (
+ <>
+ <div className='badge-solid-red'>
+ {Math.floor(
+ product.lowest_price.discount_percentage
+ )}
+ %
+ </div>
+ <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
+ Rp {formatCurrency(product.lowest_price.price || 0)}
+ </div>
+ </>
+ )}
+ <div className='text-danger-500 font-semibold'>
+ Rp{' '}
+ {formatCurrency(
+ product.lowest_price.price_discount || 0
+ )}
</div>
- </>
- )}
- <div className='text-danger-500 font-semibold'>
- Rp{' '}
- {formatCurrency(product.lowest_price.price_discount || 0)}
- </div>
- </div>
- </>
- )}
+ </div>
+ </>
+ )}
+
+ {!!product.lowest_price && product.lowest_price.price === 0 && (
+ <span>
+ Hubungi kami untuk dapatkan harga terbaik,{' '}
+ <Link
+ href={askAdminUrl}
+ target='_blank'
+ className='font-medium underline'
+ color={'red'}
+ >
+ klik disini
+ </Link>
+ </span>
+ )}
+ </div>
- {!!product.lowest_price && product.lowest_price.price === 0 && (
- <span>
- Hubungi kami untuk dapatkan harga terbaik,{' '}
+ {/* sembunyikan link header di mobile agar tidak dobel */}
+ <div className='ml-3 items-center font-normal hidden md:flex'>
<Link
- href={askAdminUrl}
- target='_blank'
- className='font-medium underline'
- color={'red'}
+ href='/shop/cart'
+ className='flex-1 py-2 text-gray_r-12 btn-yellow'
>
- klik disini
+ Lihat Keranjang
</Link>
- </span>
- )}
+ </div>
+ </div>
+
+ {/* PROMO KHUSUS MOBILE */}
+ <div className='mt-6'>
+ <ProductPromoSection
+ product={product}
+ productId={Number(activeVariant?.id) || Number(variantId) || 0}
+ />
+ </div>
+
+ {/* PRODUCT SIMILAR */}
+ <div className='mt-8 mb-4'>
+ <div className='text-h-sm font-semibold mb-6'>
+ Kamu Mungkin Juga Suka
+ </div>
+ <DesktopView>
+ <LazyLoad>
+ <ProductSimilar query={productSimilarQuery} />
+ </LazyLoad>
+ </DesktopView>
+ <MobileView>
+ <ProductSimilar query={productSimilarQuery} />
+ </MobileView>
+ </div>
</div>
- <div className='ml-3 flex items-center font-normal'>
+ {/* footer tombol: selalu terlihat di bawah popup mobile */}
+ <div className='border-t border-gray-200 bg-white px-4 pt-3 pb-[calc(env(safe-area-inset-bottom)+12px)]'>
<Link
href='/shop/cart'
- className='flex-1 py-2 text-gray_r-12 btn-yellow'
+ className='w-full block text-center btn-yellow py-3 rounded-xl font-semibold'
>
- Lihat Keranjang
+ Cek Keranjang
</Link>
</div>
</div>
- {/* === PROMO KHUSUS MOBILE (DI ATAS PRODUCT SIMILAR) === */}
- <MobileView>
+ {/* ===== DESKTOP LAYOUT: tetap seperti semula ===== */}
+ <div className='hidden md:block'>
+ {/* HEADER ITEM */}
+ <div className='flex mt-4'>
+ <div className='w-[10%]'>
+ <ImageNext
+ src={product.image}
+ alt={product.name}
+ className='h-32 object-contain object-center w-full border border-gray_r-4'
+ width={80}
+ height={80}
+ />
+ </div>
+
+ <div className='ml-3 flex flex-1 items-start font-medium justify-center flex-col gap-y-1'>
+ {!!product.manufacture.name ? (
+ <Link
+ href={createSlug(
+ '/shop/brands/',
+ product.manufacture.name,
+ product.manufacture.id.toString()
+ )}
+ className=' hover:underline'
+ color={'red'}
+ >
+ {product.manufacture.name}
+ </Link>
+ ) : (
+ '-'
+ )}
+ <p className='text-ellipsis overflow-hidden'>{product.name}</p>
+ <p>{product.code}</p>
+
+ {!!product.lowest_price && product.lowest_price.price > 0 && (
+ <>
+ <div className='flex items-end gap-x-2'>
+ {product.lowest_price.discount_percentage > 0 && (
+ <>
+ <div className='badge-solid-red'>
+ {Math.floor(product.lowest_price.discount_percentage)}
+ %
+ </div>
+ <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
+ Rp {formatCurrency(product.lowest_price.price || 0)}
+ </div>
+ </>
+ )}
+ <div className='text-danger-500 font-semibold'>
+ Rp{' '}
+ {formatCurrency(product.lowest_price.price_discount || 0)}
+ </div>
+ </div>
+ </>
+ )}
+
+ {!!product.lowest_price && product.lowest_price.price === 0 && (
+ <span>
+ Hubungi kami untuk dapatkan harga terbaik,{' '}
+ <Link
+ href={askAdminUrl}
+ target='_blank'
+ className='font-medium underline'
+ color={'red'}
+ >
+ klik disini
+ </Link>
+ </span>
+ )}
+ </div>
+
+ <div className='ml-3 flex items-center font-normal'>
+ <Link
+ href='/shop/cart'
+ className='flex-1 py-2 text-gray_r-12 btn-yellow'
+ >
+ Lihat Keranjang
+ </Link>
+ </div>
+ </div>
+
+ {/* PROMO (desktop biarkan sama posisinya) */}
<div className='mt-6'>
<ProductPromoSection
product={product}
- // gunakan id varian aktif; fallback ke variantId dari props
productId={Number(activeVariant?.id) || Number(variantId) || 0}
/>
</div>
- </MobileView>
- {/* PRODUCT SIMILAR: tetap seperti semula, muncul di mobile & desktop */}
- <div className='mt-8 mb-4'>
- <div className='text-h-sm font-semibold mb-6'>
- Kamu Mungkin Juga Suka
+ {/* PRODUCT SIMILAR */}
+ <div className='mt-8 mb-4'>
+ <div className='text-h-sm font-semibold mb-6'>
+ Kamu Mungkin Juga Suka
+ </div>
+ <LazyLoad>
+ <ProductSimilar query={productSimilarQuery} />
+ </LazyLoad>
</div>
- <LazyLoad>
- <ProductSimilar query={productSimilarQuery} />
- </LazyLoad>
</div>
</BottomPopup>
</div>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-17 19:54:19 +0000