ok

src/pages/Join.js

@@ -1,14 +1,13 @@
+// LinktreePage.js
 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 { checkCoupon, logCouponForUser } from '../helpers/couponHelpers';  // Import the new helper
 import Coupon from '../components/Coupon';
 
-function getAuthToken() {
-  return localStorage.getItem('auth');
-}
 
 const LinktreePage = ({ data, setModal }) => {
   const queryParams = new URLSearchParams(window.location.search);
+  const [isOnlyClaimCoupon, setIsOnlyClaimCoupon] = useState(false);
   const [isUsingCoupon, setIsUsingCoupon] = useState(false);
   const [couponCode, setCouponCode] = useState('');
   const [couponStatus, setCouponStatus] = useState(0);
@@ -16,9 +15,15 @@ const LinktreePage = ({ data, setModal }) => {
 
   // Detect query params on component mount
   useEffect(() => {
-    if(couponCode != '') return;
+    if (couponCode !== '') return;
+    const modal = queryParams.get('modal');
     const code = queryParams.get('couponCode');
+
     console.log(code)
+    if (modal == 'claim-coupon') {
+      setIsOnlyClaimCoupon(true)
+      setIsUsingCoupon(true);  // Automatically switch to the coupon input state
+    }
     if (code) {
       setCouponCode(code);
       setIsUsingCoupon(true);  // Automatically switch to the coupon input state
@@ -28,27 +33,14 @@ const LinktreePage = ({ data, setModal }) => {
 
   // Handle manual coupon code check
   const handleCheckCoupon = async (code = couponCode) => {
-    try {
-      const response = await fetch(`${API_BASE_URL}/coupon/check/${code}`, {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${getAuthToken()}`,
-        },
-      });
+    const result = await checkCoupon(code);  // Call the helper
+    setCouponStatus(result.coupon ? 200 : 404);
+    setCouponDetails(result.coupon);
+  };
 
-      if (response.ok) {
-        const data = await response.json();
-        setCouponStatus(200);
-        setCouponDetails(data.coupon);
-      } else {
-        setCouponStatus(404);
-        setCouponDetails(null);
-      }
-    } catch (error) {
-      setCouponStatus(404);
-      setCouponDetails(null);
-    }
+  // Handle manual coupon code check
+  const handleLogCouponForUser = async (code = couponCode) => {
+    const result = await logCouponForUser(code);  // Call the helper
   };
 
   // Listen for query parameter changes (using the `location` object)
@@ -74,7 +66,7 @@ const LinktreePage = ({ data, setModal }) => {
       {!isUsingCoupon ? (
         <div className={styles.dashboardContainer}>
           <div className={styles.mainHeading}>Nikmati Kemudahan Mengelola Kafe</div>
-          <div className={styles.subHeading}>
+          <div className={styles.subHeadingTransparent}>
             Daftarkan kedaimu sekarang dan mulai gunakan semua fitur unggulan kami.
           </div>
           <form className={styles.linktreeForm}>
@@ -108,16 +100,13 @@ const LinktreePage = ({ data, setModal }) => {
                 Gunakan kupon
               </a>
             </div>
-            <div className={styles.footerImage}>
-              <img src="./laporan.png" alt="Linktree visual" />
-            </div>
           </div>
         </div>
       ) : (
         <div className={styles.dashboardContainer}>
-          <div className={styles.mainHeading}>Daftar Menggunakan Kupon</div>
+          <div className={styles.mainHeading}>{isOnlyClaimCoupon ? 'Aktifkan Kupon' : 'Daftar Menggunakan Kupon'}</div>
           <div className={styles.subHeading}>
-            Kupon tidak hanya dapat digunakan untuk pembuatan akun penyewa, tetapi juga dapat digunakan untuk memperpanjang masa berlangganan.
+            Kupon dapat digunakan untuk pembuatan akun penyewa maupun untuk memperpanjang masa berlangganan.
           </div>
           {couponStatus === 0 ? (
             <form className={styles.linktreeForm} onSubmit={(e) => e.preventDefault()}>
@@ -144,21 +133,29 @@ const LinktreePage = ({ data, setModal }) => {
                 period={couponDetails?.discountPeriods}
                 expiration={couponDetails?.expirationDate}
               />
-              {couponStatus == 200 &&
-              <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 })}
-                >
-                  <span>Buat akun dengan kupon ini</span>
-                </button>
-              </form>
-}
+              {couponStatus === 200 &&
+                <div className={styles.linktreeForm}>
+                  <label htmlFor="username" className={styles.usernameLabel}>
+                    --------------------------------------------
+                  </label>
+                  <button
+                    className={styles.claimButton}
+                    style={{ width: '266px' }}
+                    onClick={() => {
+                      if (!isOnlyClaimCoupon) {
+                        // If it's only claiming a coupon, trigger claim logic
+                        setModal('create_user', { codeStatus: 200, couponCode });
+                      } else {
+                        // Otherwise, handle the coupon for user creation
+                        handleLogCouponForUser();
+                      }
+                    }}
+                  >
+                    <span>{isOnlyClaimCoupon ? 'Aktifkan untuk akun ini' : 'Buat akun dengan kupon ini'}</span>
+                  </button>
+
+                </div>
+              }
             </>
           )}
           <div className={styles.footer}>
@@ -171,31 +168,23 @@ const LinktreePage = ({ data, setModal }) => {
               >
                 Pelajari lebih lanjut
               </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');
-                  url.searchParams.delete('codeStatus');
-
-                  // Update the browser's URL, but keep 'modal=join' intact
-                  window.history.pushState({}, '', url.toString());
-
-                  // 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" />
+              {(!isOnlyClaimCoupon || couponStatus != 0) &&
+                <a
+                  onClick={() => {
+                    const url = new URL(window.location.href);
+                    url.searchParams.delete('couponCode');
+                    url.searchParams.delete('codeStatus');
+                    window.history.pushState({}, '', url.toString());
+                    setIsUsingCoupon(couponStatus === 0 ? false : true);
+                    setCouponCode('');
+                    setCouponDetails(null);
+                    setCouponStatus(0);
+                  }}
+                  className={styles.footerLink}
+                >
+                  Kembali
+                </a>
+              }
             </div>
           </div>
         </div>