summaryrefslogtreecommitdiff
path: root/src-migrate/modules/product-detail/components/AddToCart.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src-migrate/modules/product-detail/components/AddToCart.tsx')
-rw-r--r--src-migrate/modules/product-detail/components/AddToCart.tsx307
1 files changed, 224 insertions, 83 deletions
diff --git a/src-migrate/modules/product-detail/components/AddToCart.tsx b/src-migrate/modules/product-detail/components/AddToCart.tsx
index 1cb58a75..147fd6d2 100644
--- a/src-migrate/modules/product-detail/components/AddToCart.tsx
+++ b/src-migrate/modules/product-detail/components/AddToCart.tsx
@@ -20,6 +20,7 @@ import axios from 'axios';
import useDevice from '@/core/hooks/useDevice';
import MobileView from '@/core/components/views/MobileView';
import DesktopView from '@/core/components/views/DesktopView';
+import ProductPromoSection from '~/modules/product-promo/components/Section';
type Props = {
variantId: number | null;
quantity?: number;
@@ -177,112 +178,252 @@ const AddToCart = ({
return (
<div className='w-full'>
<MobileView>
- <Button
- onClick={handleButton}
- colorScheme={btnConfig[source].colorScheme}
- variant= {btnConfig[source].variant}
- className='w-full'
- >
- {btnConfig[source].text}
- </Button>
+ <Button
+ onClick={handleButton}
+ colorScheme={btnConfig[source].colorScheme}
+ variant={btnConfig[source].variant}
+ className='w-full'
+ >
+ {btnConfig[source].text}
+ </Button>
</MobileView>
+
<DesktopView>
- <Button
- onClick={handleButton}
- colorScheme={btnConfig[source].colorScheme}
- variant= {btnConfig[source].variant}
- className='w-full'
- >
- {btnConfig[source].text}
- </Button>
+ <Button
+ onClick={handleButton}
+ colorScheme={btnConfig[source].colorScheme}
+ variant={btnConfig[source].variant}
+ className='w-full'
+ >
+ {btnConfig[source].text}
+ </Button>
</DesktopView>
+
<BottomPopup
className='!container'
title='Berhasil Ditambahkan'
active={addCartAlert}
- close={() => {
- setAddCartAlert(false);
- }}
+ close={() => setAddCartAlert(false)}
>
- <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()
+ {/* ===== 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-[25%]'>
+ <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>
+ ) : (
+ '-'
)}
- 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,{' '}
+ {!!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>
+
+ {/* 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 mb-2 block text-center btn-yellow py-3 rounded-xl font-semibold'
>
Lihat Keranjang
</Link>
</div>
</div>
- <div className='mt-8 mb-4'>
- <div className='text-h-sm font-semibold mb-6'>
- Kamu Mungkin Juga Suka
+
+ {/* ===== 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}
+ 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>
+ <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:18:46 +0000