ok

src/App.js

@@ -81,13 +81,19 @@ function App() {
   const [subscriptions, setSubscriptions] = useState(null);
   const [selectedProduct, setSelectedProduct] = useState({});
   const [showedModal, setShowedModal] = useState(null); // 'product' | 'login' | null
-  const [postLoginAction, setPostLoginAction] = useState(null);
 
   const [username, setUsername] = useState(null);
 
   const productSectionRef = useRef(null);
   const courseSectionRef = useRef(null);
 
+  const requestLogin = (nextAction) => {
+    const url = new URL(window.location);
+    url.searchParams.set('next', nextAction);
+    window.history.pushState({}, '', url);
+    setShowedModal('login');
+  };
+
   useEffect(() => {
     // Ambil token dari cookies
     const match = document.cookie.match(new RegExp('(^| )token=([^;]+)'));
@@ -122,6 +128,13 @@ function App() {
 
     }
   }, []);
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    if (params.has('next')) {
+        setShowedModal('login');
+    }
+  }, []);
   const scrollToProduct = () => {
     productSectionRef.current?.scrollIntoView({ behavior: "smooth" });
   };
@@ -201,6 +214,11 @@ function App() {
           <div
             className={styles.modal}
             onClick={() => {
+              const url = new URL(window.location);
+              if (url.searchParams.has('next')) {
+                url.searchParams.delete('next');
+                window.history.pushState({}, '', url);
+              }
               setShowedModal(null);
               setSelectedProduct({});
             }}
@@ -212,17 +230,13 @@ function App() {
               {showedModal === 'product' && (
                 <ProductDetailPage
                   subscriptions={subscriptions}
-                  setPostLoginAction={setPostLoginAction}
-                  setShowedModal={setShowedModal}
+                  requestLogin={requestLogin}
                   product={selectedProduct}
-                  onClose={() => {
-                    setShowedModal(null);
-                    setSelectedProduct({});
-                  }}
+                  setShowedModal={setShowedModal}
                 />
               )}
               {showedModal === 'login' && (
-                <Login postLoginAction={postLoginAction} setPostLoginAction={setPostLoginAction} onClose={() => setShowedModal(null)} />
+                <Login setShowedModal={setShowedModal} />
               )}
             </div>
           </div>

src/components/Login.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-const LoginRegister = ({postLoginAction, setPostLoginAction}) => {
+const LoginRegister = ({setShowedModal}) => {
   const [tab, setTab] = useState('login'); // 'login' or 'register'
   const [email, setEmail] = useState('');
   const [username, setUsername] = useState('');
@@ -95,11 +95,17 @@ const LoginRegister = ({postLoginAction, setPostLoginAction}) => {
       if (token) {
         document.cookie = `token=${token}; path=/; max-age=${7 * 24 * 60 * 60}`;
         
-        if (postLoginAction) {
-          postLoginAction(); // resume action (e.g., checkout)
-          setPostLoginAction(null);
+        const params = new URLSearchParams(window.location.search);
+        const nextAction = params.get('next');
+
+        if (nextAction === 'checkout') {
+          params.delete('next');
+          const newUrl = `${window.location.pathname}?${params.toString()}`;
+          window.history.replaceState({}, '', newUrl);
+          setShowedModal('product');
+        } else {
+          window.location.reload();
         }
-        // window.location.reload()
       } else {
         alert('Token tidak ditemukan pada respons login');
       }

src/components/ProductDetailPage.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import styles from './ProductDetail.module.css';
 
-const ProductDetail = ({ subscriptions, product, setPostLoginAction, setShowedModal }) => {
+const ProductDetail = ({ subscriptions, product, requestLogin, setShowedModal }) => {
   const [showChildSelector, setShowChildSelector] = useState(false);
   const [selectedChildIds, setSelectedChildIds] = useState([]);
 
@@ -33,8 +33,7 @@ const ProductDetail = ({ subscriptions, product, setPostLoginAction, setShowedMo
     const token = tokenCookie ? tokenCookie.split('=')[1] : '';
 
     if (!token) {
-      setPostLoginAction(() => () => setShowedModal('product'));
-      setShowedModal('login');
+      requestLogin('checkout');
       return;
     }
     if (product.type == 'product') {