From 464277dd85a61d1c336c59a9eaf44f4f50dcd0cc Mon Sep 17 00:00:00 2001
From: insvrgent <zaditgans671555@gmail.com>
Date: Wed, 22 Jan 2025 13:30:09 +0700
Subject: [PATCH] ok

---
 src/pages/CreateUserWithCoupon.js |  2 +-
 src/pages/Join.js                 | 85 ++++++++++++++++++++-----------
 2 files changed, 56 insertions(+), 31 deletions(-)

diff --git a/src/pages/CreateUserWithCoupon.js b/src/pages/CreateUserWithCoupon.js
index 16e7ab5..d06e73f 100644
--- a/src/pages/CreateUserWithCoupon.js
+++ b/src/pages/CreateUserWithCoupon.js
@@ -50,7 +50,7 @@ const LinktreePage = ({ setModal }) => {
     }
 
     try {
-      const response = await fetch(`${API_BASE_URL}/user/create-with-coupon`, {
+      const response = await fetch(`${API_BASE_URL}/coupon/create-user`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
diff --git a/src/pages/Join.js b/src/pages/Join.js
index 52de2e8..7e29b98 100644
--- a/src/pages/Join.js
+++ b/src/pages/Join.js
@@ -1,7 +1,6 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import styles from './Join.module.css'; // Import the module.css file
 import API_BASE_URL from '../config.js';
-
 import Coupon from '../components/Coupon';
 
 function getAuthToken() {
@@ -9,15 +8,28 @@ function getAuthToken() {
 }
 
 const LinktreePage = ({ data, setModal }) => {
+  const queryParams = new URLSearchParams(window.location.search);
   const [isUsingCoupon, setIsUsingCoupon] = useState(false);
   const [couponCode, setCouponCode] = useState('');
   const [couponStatus, setCouponStatus] = useState(0);
   const [couponDetails, setCouponDetails] = useState(null);
 
-  const handleCheckCoupon = async (e) => {
-    e.preventDefault();
+  // Detect query params on component mount
+  useEffect(() => {
+    const code = queryParams.get('couponCode');
+    console.log(code)
+    if (code) {
+      setCouponStatus(200)
+      setCouponCode(code);
+      setIsUsingCoupon(true);  // Automatically switch to the coupon input state
+      handleCheckCoupon(code); // Automatically check the coupon code
+    }
+  }, [queryParams]);
+
+  // Handle manual coupon code check
+  const handleCheckCoupon = async (code = couponCode) => {
     try {
-      const response = await fetch(`${API_BASE_URL}/coupon/check/${couponCode}`, {
+      const response = await fetch(`${API_BASE_URL}/coupon/check/${code}`, {
         method: 'GET',
         headers: {
           'Content-Type': 'application/json',
@@ -43,15 +55,10 @@ const LinktreePage = ({ data, setModal }) => {
     <div className={styles.linktreePage}>
       {!isUsingCoupon ? (
         <div className={styles.dashboardContainer}>
-          {/* Main Heading */}
           <div className={styles.mainHeading}>Nikmati Kemudahan Mengelola Kafe</div>
-
-          {/* Sub Heading */}
           <div className={styles.subHeading}>
             Daftarkan kedaimu sekarang dan mulai gunakan semua fitur unggulan kami.
           </div>
-
-          {/* Form Section */}
           <form className={styles.linktreeForm}>
             <label htmlFor="username" className={styles.usernameLabel}>
               --------------------------------------------
@@ -66,8 +73,6 @@ const LinktreePage = ({ data, setModal }) => {
               <span>➜</span>
             </button>
           </form>
-
-          {/* Footer Links */}
           <div className={styles.footer}>
             <div className={styles.footerLinks}>
               <a
@@ -92,17 +97,12 @@ const LinktreePage = ({ data, setModal }) => {
         </div>
       ) : (
         <div className={styles.dashboardContainer}>
-          {/* Main Heading */}
           <div className={styles.mainHeading}>Daftar Menggunakan Kupon</div>
-
-          {/* Sub Heading */}
           <div className={styles.subHeading}>
             Kupon tidak hanya dapat digunakan untuk pembuatan akun penyewa, tetapi juga dapat digunakan untuk memperpanjang masa berlangganan.
           </div>
-
-          {/* Coupon Check Section */}
-          {couponStatus == 0 ?
-            <form className={styles.linktreeForm} onSubmit={handleCheckCoupon}>
+          {couponStatus === 0 ? (
+            <form className={styles.linktreeForm} onSubmit={(e) => e.preventDefault()}>
               <label htmlFor="coupon" className={styles.usernameLabel}>
                 --------------------------------------------
               </label>
@@ -114,26 +114,33 @@ const LinktreePage = ({ data, setModal }) => {
                 value={couponCode}
                 onChange={(e) => setCouponCode(e.target.value)}
               />
-              <button type="submit" className={styles.claimButton}>
+              <button onClick={() => handleCheckCoupon()} className={styles.claimButton}>
                 <span>Cek</span>
               </button>
             </form>
-            :
+          ) : (
             <>
-              <Coupon code={couponDetails?.code || null} value={couponDetails?.discountValue} period={couponDetails?.discountPeriods} expiration={couponDetails?.expirationDate} />
-
-
+              <Coupon
+                code={couponDetails?.code || null}
+                value={couponDetails?.discountValue}
+                period={couponDetails?.discountPeriods}
+                expiration={couponDetails?.expirationDate}
+              />
               <form className={styles.linktreeForm}>
                 <label htmlFor="username" className={styles.usernameLabel}>
                   --------------------------------------------
                 </label>
-                <button type="submit" className={styles.claimButton} style={{ width: '266px' }} onClick={() => setModal('create_user', { codeStatus: 200, couponCode })}>
+                <button
+                  type="submit"
+                  className={styles.claimButton}
+                  style={{ width: '266px' }}
+                  onClick={() => setModal('create_user', { codeStatus: 200, couponCode })}
+                >
                   <span>Buat akun dengan kupon ini</span>
                 </button>
               </form>
             </>
-          }
-          {/* Footer Links */}
+          )}
           <div className={styles.footer}>
             <div className={styles.footerLinks}>
               <a
@@ -143,13 +150,31 @@ const LinktreePage = ({ data, setModal }) => {
                 className={styles.footerLink}
               >
                 Pelajari lebih lanjut
-              </a>
-              <a
-                onClick={() => { setIsUsingCoupon(couponStatus == 0 ? false : true); setCouponCode(null); setCouponDetails(null); setCouponStatus(0) }}
+              </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);
+                  setCouponCode('');
+                  setCouponDetails(null);
+                  setCouponStatus(0);
+                  
+              
+                }}
                 className={styles.footerLink}
               >
                 Kembali
               </a>
+
             </div>
             <div className={styles.footerImage}>
               <img src="./laporan.png" alt="Linktree visual" />