ok

2025-01-21 07:41:46 +07:00
parent 308eafa6d4
commit e0ef8d5023
7 changed files with 371 additions and 63 deletions
--- a/src/pages/CreateUserWithCoupon.js
+++ b/src/pages/CreateUserWithCoupon.js
@@ -0,0 +1,123 @@
+import React, { useState } from 'react';
+import styles from './Join.module.css'; // Import the module.css file
+import API_BASE_URL from '../config.js';
+
+function getAuthToken() {
+  return localStorage.getItem('auth');
+}
+
+const LinktreePage = ({ setModal }) => {
+  const [isUsingCoupon, setIsUsingCoupon] = useState(false);
+  const [couponCode, setCouponCode] = useState('');
+  const [couponStatus, setCouponStatus] = useState('');
+  const [couponDetails, setCouponDetails] = useState(null);
+  const [username, setUsername] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [retypePassword, setRetypePassword] = useState('');
+
+  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('Coupon is valid');
+        setCouponDetails(data.coupon);
+      } else {
+        setCouponStatus('Coupon not found or expired');
+        setCouponDetails(null);
+      }
+    } catch (error) {
+      setCouponStatus('Error checking coupon.');
+      setCouponDetails(null);
+    }
+  };
+
+  const handleCreateUserWithCoupon = async (e) => {
+    e.preventDefault();
+
+    if (password !== retypePassword) {
+      setCouponStatus('Passwords do not match');
+      return;
+    }
+
+    try {
+      const response = await fetch(`${API_BASE_URL}/user/create-with-coupon`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${getAuthToken()}`,
+        },
+        body: JSON.stringify({
+          username,
+          email,
+          password,
+          couponCode,
+        }),
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        setCouponStatus('User created successfully with coupon');
+        setCouponDetails(null);
+        console.log(data);
+      } else {
+        const errorData = await response.json();
+        setCouponStatus(errorData.message || 'Error creating user');
+      }
+    } catch (error) {
+      setCouponStatus('Error creating user.');
+    }
+  };
+
+  return (
+    <div className={styles.linktreePage}>
+        <div className={styles.dashboardContainer}>
+          <div className={styles.mainHeading}>Gunakan Kupon</div>
+            <form className={styles.linktreeForm} onSubmit={handleCreateUserWithCoupon}>
+              <input
+                type="text"
+                placeholder="Username"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                className={styles.usernameInput}
+              />
+              <input
+                type="email"
+                placeholder="Email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className={styles.usernameInput}
+              />
+              <input
+                type="password"
+                placeholder="Password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className={styles.usernameInput}
+              />
+              <input
+                type="password"
+                placeholder="Re-type Password"
+                value={retypePassword}
+                onChange={(e) => setRetypePassword(e.target.value)}
+                className={styles.usernameInput}
+              />
+              <button type="submit" className={styles.claimButton}>
+                <span>Buat Akun</span>
+              </button>
+            </form>
+        </div>
+    </div>
+  );
+};
+
+export default LinktreePage;
--- a/src/pages/Dashboard.js
+++ b/src/pages/Dashboard.js
@@ -946,7 +946,7 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
                  onError={(e) => e.target.src = '/fallback-image.png'}
                />
              </div>
-              <a style={{left: 0, right: 0, bottom: 0, textAlign: 'center', color: '#254F1A', fontSize:'13px', position: 'fixed'}}>©2025 KEDIRITECHNOPARK</a>
+              <a style={{left: 0, right: 0, bottom: 0, textAlign: 'center', color: '#254F1A', fontSize:'13px', position: 'fixed'}}>©2025 KEDIRITECHNOPARK.COM</a>
            </div>
          </div>
        </div>
--- a/src/pages/Join.js
+++ b/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>
  );
 };