From 7f501c19769ea39149fb3d0f6d45176d79a33b9a Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Mon, 8 Sep 2025 12:14:41 +0700
Subject: <Miqdad> Move lihat keranjang button and hide scrollbar

---
 .../product-detail/components/AddToCart.tsx        | 267 +++++++++++++++------
 1 file 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>
-- 
cgit v1.2.3