136 lines
4.2 KiB
JavaScript
136 lines
4.2 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import styles from './LinktreePage.module.css'; // Import the module.css file
|
|
import API_BASE_URL from '../config.js';
|
|
|
|
function getAuthToken() {
|
|
return localStorage.getItem('auth');
|
|
}
|
|
|
|
const LinktreePage = ({ setModal }) => {
|
|
const queryParams = new URLSearchParams(window.location.search);
|
|
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('');
|
|
|
|
// 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
|
|
}
|
|
}, [queryParams]);
|
|
|
|
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}/coupon/create-user`, {
|
|
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;
|