ok

src/pages/Join.js

@@ -19,7 +19,7 @@ const LinktreePage = ({ data, setModal }) => {
     const code = queryParams.get('couponCode');
     console.log(code)
     if (code) {
-      setCouponStatus(200)
+      setCouponStatus(200);
       setCouponCode(code);
       setIsUsingCoupon(true);  // Automatically switch to the coupon input state
       handleCheckCoupon(code); // Automatically check the coupon code
@@ -51,6 +51,24 @@ const LinktreePage = ({ data, setModal }) => {
     }
   };
 
+  // Listen for query parameter changes (using the `location` object)
+  useEffect(() => {
+    const handlePopState = () => {
+      const newQueryParams = new URLSearchParams(window.location.search);
+      const newCouponCode = newQueryParams.get('couponCode');
+      if (!newCouponCode) {
+        setIsUsingCoupon(false);
+        setCouponCode('');
+        setCouponDetails(null);
+        setCouponStatus(0);
+      }
+    };
+    window.addEventListener('popstate', handlePopState);
+    return () => {
+      window.removeEventListener('popstate', handlePopState);
+    };
+  }, []);
+
   return (
     <div className={styles.linktreePage}>
       {!isUsingCoupon ? (
@@ -150,31 +168,28 @@ const LinktreePage = ({ data, setModal }) => {
                 className={styles.footerLink}
               >
                 Pelajari lebih lanjut
-              </a><a
+              </a>
+              <a
                 onClick={() => {
-                  
                   // Get the current URL query parameters
                   const url = new URL(window.location.href);
-                  
+
                   // Remove the couponCode query parameter
                   url.searchParams.delete('couponCode');
-                  
+
                   // Update the browser's URL, but keep 'modal=join' intact
                   window.history.pushState({}, '', url.toString());
-                  
-                  // Reset the states
-                  setIsUsingCoupon(couponStatus === 0 ? false : true);
+
+                  // Reset the states and force the component to reset
+                  setIsUsingCoupon(couponStatus == 0 ? false : true);
                   setCouponCode('');
                   setCouponDetails(null);
                   setCouponStatus(0);
-                  
-              
                 }}
                 className={styles.footerLink}
               >
                 Kembali
               </a>
-
             </div>
             <div className={styles.footerImage}>
               <img src="./laporan.png" alt="Linktree visual" />