diff --git a/src/pages/Join.js b/src/pages/Join.js index 7e29b98..1e20541 100644 --- a/src/pages/Join.js +++ b/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 (
{!isUsingCoupon ? ( @@ -150,31 +168,28 @@ const LinktreePage = ({ data, setModal }) => { className={styles.footerLink} > Pelajari lebih lanjut - + { - // 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 -
Linktree visual