2 files changed, 74 insertions, 2 deletions
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index f926f171..0bff3ceb 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -10,12 +10,16 @@ import { toast } from 'react-hot-toast'
 import { updateItemCart } from '@/core/utils/cart'
 import { useRouter } from 'next/router'
 import { createSlug } from '@/core/utils/slug'
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
+import { Toast } from 'flowbite-react'
 
 const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
   const router = useRouter()
 
   const [lowestPrice, setLowestPrice] = useState(null)
 
+  const [addCartAlert, setAddCartAlert] = useState(false)
+
   const getLowestPrice = useCallback(() => {
     const prices = product.variants.map((variant) => variant.price)
     const lowest = prices.reduce((lowest, price) => {
@@ -54,7 +58,8 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
       quantity,
       selected: true
     })
-    toast.success('Berhasil menambahkan ke keranjang')
+    setAddCartAlert(true)
+    // toast.success('Berhasil menambahkan ke keranjang')
   }
 
   const handleBuy = (variantId) => {
@@ -316,6 +321,38 @@ 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>
+            </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>
       </div>
     </DesktopView>
   )
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>
   )
 }