layout popup add to cart

2 files changed, 54 insertions, 61 deletions

diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 0bff3ceb..bb2b2db9 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -321,38 +321,36 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
             <ProductSimilar query={productSimilarQuery} />
           </LazyLoad>
         </div>
-        <div>
-          <BottomPopup
-            className='!w-[50%]'
-            title='Berhasil Ditambahkan'
-            active={addCartAlert}
-            close={() => setAddCartAlert(false)}
-          >
-            <div className='flex mt-10 mb-5'>
-              <div className='w-[15%]'>
-                <Image
-                  src={product.image}
-                  alt={product.name}
-                  className='h-20 object-contain object-center w-full border border-gray_r-4'
-                />
-              </div>
-              <div className='ml-3 flex flex-1 items-center text-sm font-normal'>
-                {product.name}
-              </div>
-              <div className='ml-3 flex items-center text-sm font-normal'>
-                <Link href='/shop/cart' className='flex-1 py-2 text-gray_r-12 btn-yellow'>
-                  Lihat Keranjang
-                </Link>
-              </div>
+
+        <BottomPopup
+          className='!container'
+          title='Berhasil Ditambahkan'
+          active={addCartAlert}
+          close={() => setAddCartAlert(false)}
+        >
+          <div className='flex mt-4'>
+            <div className='w-[10%]'>
+              <Image
+                src={product.image}
+                alt={product.name}
+                className='h-32 object-contain object-center w-full border border-gray_r-4'
+              />
             </div>
-            <div className='my-12'>
-              <div className='text-h-lg font-semibold mb-6'>Kamu Mungkin Juga Suka</div>
-              <LazyLoad>
-                <ProductSimilar query={productSimilarQuery} />
-              </LazyLoad>
+            <div className='ml-3 flex flex-1 items-center font-normal'>{product.name}</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>
-          </BottomPopup>
-        </div>
+          </div>
+
+          <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>
+        </BottomPopup>
       </div>
     </DesktopView>
   )
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 43ef0e5e..0a7d690a 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -89,7 +89,6 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
       quantity,
       selected: true
     })
-    // toast.success('Berhasil menambahkan ke keranjang')
     setAddCartAlert(true)
   }
 
@@ -270,37 +269,33 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
         </LazyLoad>
       </div>
 
-      <div>
-          <BottomPopup
-            title='Berhasil Ditambahkan'
-            active={addCartAlert}
-            close={() => setAddCartAlert(false)}
-          >
-            <div className='flex mt-10 mb-5'>
-              <div className='w-[15%]'>
-                <Image
-                  src={product.image}
-                  alt={product.name}
-                  className='h-20 object-contain object-center w-full border border-gray_r-4'
-                />
-              </div>
-              <div className='ml-3 flex flex-1 items-center text-sm font-normal'>
-                {product.name}
-              </div>
-              <div className='ml-3 flex items-center text-sm font-normal'>
-                <Link href='/shop/cart' className='flex-1 py-2 text-gray_r-12 btn-yellow'>
-                  Lihat Keranjang
-                </Link>
-              </div>
-            </div>
-            <div className='my-12'>
-              <div className='text-h-lg font-semibold mb-6'>Kamu Mungkin Juga Suka</div>
-              <LazyLoad>
-                <ProductSimilar query={productSimilarQuery} />
-              </LazyLoad>
-            </div>
-          </BottomPopup>
+      <BottomPopup
+        title='Berhasil Ditambahkan'
+        active={addCartAlert}
+        close={() => setAddCartAlert(false)}
+      >
+        <div className='flex mt-4'>
+          <div className='w-[15%]'>
+            <Image
+              src={product.image}
+              alt={product.name}
+              className='h-20 object-contain object-center w-full border border-gray_r-4'
+            />
+          </div>
+          <div className='ml-3 flex flex-1 items-center text-sm font-normal'>{product.name}</div>
+          <div className='ml-3 flex items-center text-sm font-normal'>
+            <Link href='/shop/cart' className='flex-1 py-2 text-gray_r-12 btn-yellow'>
+              Lihat Keranjang
+            </Link>
+          </div>
+        </div>
+        <div className='mt-8 mb-4'>
+          <div className='text-h-lg font-semibold mb-6'>Kamu Mungkin Juga Suka</div>
+          <LazyLoad>
+            <ProductSimilar query={productSimilarQuery} />
+          </LazyLoad>
         </div>
+      </BottomPopup>
     </MobileView>
   )
 }