ok

src/pages/Join.js

@@ -1,63 +1,162 @@
-import React from 'react';
+import React, { useState } 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() {
+  return localStorage.getItem('auth');
+}
+
+const LinktreePage = ({ data, setModal }) => {
+  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();
+    try {
+      const response = await fetch(`${API_BASE_URL}/coupon/check/${couponCode}`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${getAuthToken()}`,
+        },
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        setCouponStatus(200);
+        setCouponDetails(data.coupon);
+      } else {
+        setCouponStatus(404);
+        setCouponDetails(null);
+      }
+    } catch (error) {
+      setCouponStatus(404);
+      setCouponDetails(null);
+    }
+  };
 
-const LinktreePage = ({ data }) => {
   return (
     <div className={styles.linktreePage}>
+      {!isUsingCoupon ? (
+        <div className={styles.dashboardContainer}>
+          {/* Main Heading */}
+          <div className={styles.mainHeading}>Nikmati Kemudahan Mengelola Kafe</div>
 
-      <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}>--------------------------------------------</label>
-          <input
-            id="username"
-            placeholder="nomor whatsapp atau email"
-            maxLength="30"
-            className={styles.usernameInput}
-          />
-          <button type="submit" className={styles.claimButton}>
-            <span>➜</span>
-          </button>
-        </form>
-
-        {/* Footer Links */}
-        <div className={styles.footer}>
-          <div className={styles.footerLinks}>
-            <a
-              href="https://linktr.ee/discover/trending"
-              target="_blank"
-              rel="noreferrer"
-              className={styles.footerLink}
-            >
-              Pelajari lebih lanjut
-            </a>
-            <a
-              href="https://linktr.ee"
-              target="_blank"
-              rel="noreferrer"
-              className={styles.footerLink}
-            >
-              Gunakan kupon
-            </a>
+          {/* Sub Heading */}
+          <div className={styles.subHeading}>
+            Daftarkan kedaimu sekarang dan mulai gunakan semua fitur unggulan kami.
           </div>
-          <div className={styles.footerImage}>
-            <img
-              src="./laporan.png"
-              alt="Linktree visual"
+
+          {/* Form Section */}
+          <form className={styles.linktreeForm}>
+            <label htmlFor="username" className={styles.usernameLabel}>
+              --------------------------------------------
+            </label>
+            <input
+              id="username"
+              placeholder="nomor whatsapp atau email"
+              maxLength="30"
+              className={styles.usernameInput}
             />
+            <button type="submit" className={styles.claimButton}>
+              <span>➜</span>
+            </button>
+          </form>
+
+          {/* Footer Links */}
+          <div className={styles.footer}>
+            <div className={styles.footerLinks}>
+              <a
+                href="https://linktr.ee/discover/trending"
+                target="_blank"
+                rel="noreferrer"
+                className={styles.footerLink}
+              >
+                Pelajari lebih lanjut
+              </a>
+              <a
+                onClick={() => setIsUsingCoupon(true)}
+                className={styles.footerLink}
+              >
+                Gunakan kupon
+              </a>
+            </div>
+            <div className={styles.footerImage}>
+              <img src="./laporan.png" alt="Linktree visual" />
+            </div>
           </div>
         </div>
-      </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}>
+              <label htmlFor="coupon" className={styles.usernameLabel}>
+                --------------------------------------------
+              </label>
+              <input
+                id="coupon"
+                placeholder="kode kupon"
+                maxLength="30"
+                className={styles.usernameInput}
+                value={couponCode}
+                onChange={(e) => setCouponCode(e.target.value)}
+              />
+              <button type="submit" className={styles.claimButton}>
+                <span>Cek</span>
+              </button>
+            </form>
+            :
+            <>
+              <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 })}>
+                  <span>Buat akun dengan kupon ini</span>
+                </button>
+              </form>
+            </>
+          }
+          {/* Footer Links */}
+          <div className={styles.footer}>
+            <div className={styles.footerLinks}>
+              <a
+                href="https://linktr.ee/discover/trending"
+                target="_blank"
+                rel="noreferrer"
+                className={styles.footerLink}
+              >
+                Pelajari lebih lanjut
+              </a>
+              <a
+                onClick={() => { setIsUsingCoupon(couponStatus == 0 ? false : true); setCouponCode(null); setCouponDetails(null); setCouponStatus(0) }}
+                className={styles.footerLink}
+              >
+                Kembali
+              </a>
+            </div>
+            <div className={styles.footerImage}>
+              <img src="./laporan.png" alt="Linktree visual" />
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };