2 files changed, 29 insertions, 8 deletions
diff --git a/src-migrate/modules/popup-information/index.tsx b/src-migrate/modules/popup-information/index.tsx
index d50711cc..5c3bc8fa 100644
--- a/src-migrate/modules/popup-information/index.tsx
+++ b/src-migrate/modules/popup-information/index.tsx
@@ -10,11 +10,21 @@ import dynamic from 'next/dynamic';
 const PagePopupInformation = () => {
   const router = useRouter();
   const isHomePage = router.pathname === '/';
+  // Updated to match your URL structure with /shop/product/
+  const isProductDetail = router.pathname.includes('/shop/product/');
   const auth = getAuth();
   const [active, setActive] = useState<boolean>(false);
   const [data, setData] = useState<any>(null);
   const [loading, setLoading] = useState(true);
+  const [hasClosedPopup, setHasClosedPopup] = useState<boolean>(false);
 
+  useEffect(() => {
+    // Check if user has closed the popup in this session
+    const popupClosed = sessionStorage.getItem('popupClosed');
+    if (popupClosed) {
+      setHasClosedPopup(true);
+    }
+  }, []);
 
   useEffect(() => {
     const getData = async () => {
@@ -26,25 +36,33 @@ const PagePopupInformation = () => {
       setLoading(false);
     };
 
-    if (isHomePage && !auth) {
+    // Show popup if user is on homepage OR product detail page AND not authenticated AND hasn't closed popup
+    if ((isHomePage || isProductDetail) && !auth && !hasClosedPopup) {
       setActive(true);
       getData();
     }
-  }, [isHomePage, auth]);
+  }, [isHomePage, isProductDetail, auth, hasClosedPopup]);
+
+  const handleClose = () => {
+    setActive(false);
+    // Set session storage to remember user closed the popup
+    sessionStorage.setItem('popupClosed', 'true');
+  };
+
   return (
     <div className='group'>
       {data && !loading && (
         <Modal
           active={active}
           className='!w-fit !bg-transparent !border-none overflow-hidden'
-          close={() => setActive(false)}
+          close={handleClose}
           mode='desktop'
         >
-          <div
-            className='w-[350px] md:w-[530px]'
-            onClick={() => setActive(false)}
-          >
-            <Link href={data[0].url === false ? '/' :data[0].url} aria-label='popup'>
+          <div className='w-[350px] md:w-[530px]' onClick={handleClose}>
+            <Link
+              href={data[0].url === false ? '/' : data[0].url}
+              aria-label='popup'
+            >
               <Image
                 src={data[0]?.image}
                 alt={data[0]?.name}
diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index 4667e086..539ff6d7 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -23,6 +23,8 @@ import PriceAction from './PriceAction';
 import SimilarBottom from './SimilarBottom';
 import SimilarSide from './SimilarSide';
 
+import PagePopupInformation from '~/modules/popup-information';
+
 import { gtagProductDetail } from '@/core/utils/googleTag';
 
 type Props = {
@@ -80,6 +82,7 @@ const ProductDetail = ({ product }: Props) => {
           <Breadcrumb id={product.id} name={product.name} />
         </div>
         <div className='md:w-9/12 md:flex md:flex-col md:pr-4 md:pt-6'>
+          <PagePopupInformation />
           <div className='md:flex md:flex-wrap'>
             <div className='md:w-4/12'>
               <ProductImage product={product} />