notif berhasil di tambahan ke keranjang

2 files changed, 51 insertions, 3 deletions

diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 73d072e8..0bff3ceb 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -323,6 +323,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
         </div>
         <div>
           <BottomPopup
+            className='!w-[50%]'
             title='Berhasil Ditambahkan'
             active={addCartAlert}
             close={() => setAddCartAlert(false)}
@@ -335,8 +336,20 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
                   className='h-20 object-contain object-center w-full border border-gray_r-4'
                 />
               </div>
-              <div className='ml-3 flex items-center text-sm font-normal'>{product.name}</div>
-              <div className='w-[15%] ml-3 flex items-center text-sm font-normal align-middle'>Lihat Keranjang</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>
         </div>
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 1194419e..43ef0e5e 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -12,6 +12,7 @@ import { useRouter } from 'next/router'
 import MobileView from '@/core/components/views/MobileView'
 import { toast } from 'react-hot-toast'
 import { createSlug } from '@/core/utils/slug'
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 
 const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
   const router = useRouter()
@@ -19,6 +20,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
   const [quantity, setQuantity] = useState('1')
   const [selectedVariant, setSelectedVariant] = useState(null)
   const [informationTab, setInformationTab] = useState(informationTabOptions[0].value)
+  const [addCartAlert, setAddCartAlert] = useState(false)
 
   const getLowestPrice = () => {
     const prices = product.variants.map((variant) => variant.price)
@@ -87,7 +89,8 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
       quantity,
       selected: true
     })
-    toast.success('Berhasil menambahkan ke keranjang')
+    // toast.success('Berhasil menambahkan ke keranjang')
+    setAddCartAlert(true)
   }
 
   const handleClickBuy = () => {
@@ -266,6 +269,38 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
           <ProductSimilar query={productSimilarQuery} />
         </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>
+        </div>
     </MobileView>
   )
 }