setIsConfigCafeIdentityName(false)} // Close the config modal
style={{
@@ -641,7 +650,7 @@ const SetPaymentQr = ({ shop }) => {
setCafeIdentifyNameDefault(cafeIdentifyNameUpdate)
// Handle save functionality here
setIsConfigCafeIdentityName(false); // Close after saving
-
+
}}
style={{
backgroundColor: '#303034',
diff --git a/src/helpers/couponHelpers.js b/src/helpers/couponHelpers.js
new file mode 100644
index 0000000..8344aca
--- /dev/null
+++ b/src/helpers/couponHelpers.js
@@ -0,0 +1,109 @@
+// helpers/couponHelpers.js
+
+import API_BASE_URL from '../config.js';
+
+// Helper function to get the auth token from localStorage
+export function getAuthToken() {
+ return localStorage.getItem('auth');
+}
+
+// Function to check the validity of the coupon code
+export async function checkCoupon(couponCode) {
+ try {
+ const response = await fetch(`${API_BASE_URL}/coupon/check/${couponCode}`, {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ });
+
+ if (response.ok) {
+ const data = await response.json();
+ return { status: 'Coupon is valid', coupon: data.coupon };
+ } else {
+ return { status: 'Coupon not found or expired', coupon: null };
+ }
+ } catch (error) {
+ console.error('Error checking coupon:', error);
+ return { status: 'Error checking coupon.', coupon: null };
+ }
+}
+
+// Function to create a user with the coupon code
+export async function createUserWithCoupon(username, email, password, couponCode) {
+ try {
+ const response = await fetch(`${API_BASE_URL}/coupon/create-user`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ username,
+ email,
+ password,
+ couponCode,
+ }),
+ });
+
+ if (response.ok) {
+ const data = await response.json();
+ return { success: true, token: data.token };
+ } else {
+ const errorData = await response.json();
+ return { success: false, message: errorData.message || 'Error creating user' };
+ }
+ } catch (error) {
+ console.error('Error creating user with coupon:', error);
+ return { success: false, message: 'Error creating user.' };
+ }
+}
+
+// Function to create a user with the coupon code
+export async function logCouponForUser(couponCode) {
+ try {
+ const response = await fetch(`${API_BASE_URL}/coupon/log-user`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${getAuthToken()}`,
+ },
+ body: JSON.stringify({
+ couponCode,
+ }),
+ });
+
+ if (response.ok) {
+ const data = await response.json();
+ return { success: true };
+ } else {
+ const errorData = await response.json();
+ return { success: false, message: errorData.message || 'Error creating user' };
+ }
+ } catch (error) {
+ console.error('Error creating user with coupon:', error);
+ return { success: false, message: 'Error creating user.' };
+ }
+}
+
+// Function to check the validity of the coupon code
+export async function getUserCoupons() {
+ try {
+ const response = await fetch(`${API_BASE_URL}/coupon/get/`, {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${getAuthToken()}`,
+ },
+ });
+
+ if (response.ok) {
+ const data = await response.json();
+ return { status: 'Coupon is valid', coupons: data.coupons };
+ } else {
+ return { status: 'Coupon not found or expired', coupon: null };
+ }
+ } catch (error) {
+ console.error('Error checking coupon:', error);
+ return { status: 'Error checking coupon.', coupon: null };
+ }
+}
diff --git a/src/pages/CreateUserWithCoupon.js b/src/pages/CreateUserWithCoupon.js
index c61fd4e..91388ba 100644
--- a/src/pages/CreateUserWithCoupon.js
+++ b/src/pages/CreateUserWithCoupon.js
@@ -1,10 +1,7 @@
+// LinktreePage.js
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');
-}
+import styles from './Join.module.css';
+import { checkCoupon, createUserWithCoupon } from '../helpers/couponHelpers'; // Import the helper functions
const LinktreePage = ({ setModal }) => {
const queryParams = new URLSearchParams(window.location.search);
@@ -25,39 +22,22 @@ const LinktreePage = ({ setModal }) => {
// Detect query params on component mount
useEffect(() => {
const code = queryParams.get('couponCode');
- console.log(code)
if (code) {
- setCouponStatus(200);
+ setCouponStatus('Coupon is valid');
setCouponCode(code);
- setIsUsingCoupon(true); // Automatically switch to the coupon input state
+ setIsUsingCoupon(true); // Automatically switch to the coupon input state
}
}, [queryParams]);
+ // Handle coupon validation
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 { status, coupon } = await checkCoupon(couponCode);
+ setCouponStatus(status);
+ setCouponDetails(coupon);
};
+ // Handle user creation with coupon
const handleCreateUserWithCoupon = async (e) => {
e.preventDefault();
@@ -66,55 +46,38 @@ const LinktreePage = ({ setModal }) => {
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,
- }),
- });
+ setLoading(true);
+ const { success, token, message } = await createUserWithCoupon(username, email, password, couponCode);
- if (response.ok) {
- const data = await response.json();
- setCouponStatus('User created successfully with coupon');
- setCouponDetails(null);
+ if (success) {
+ setCouponStatus('User created successfully with coupon');
+ localStorage.setItem('auth', token);
- localStorage.setItem('auth', data.token);
+ // Clean the URL by removing query parameters and hash
+ const cleanUrl = window.location.origin + window.location.pathname;
+ window.history.replaceState(null, '', cleanUrl);
- // Clean the URL by removing query parameters and hash
- const cleanUrl = window.location.origin + window.location.pathname;
-
- // Replace the current URL with the cleaned one
- window.history.replaceState(null, '', cleanUrl);
-
- // Reload the page with the cleaned URL (no query params or hash)
- window.location.reload();
- } else {
- const errorData = await response.json();
- setCouponStatus(errorData.message || 'Error creating user');
- setModal('join', { couponCode })
- }
- } catch (error) {
- setCouponStatus('Error creating user.');
- setModal('join', { couponCode })
+ // Reload the page with the cleaned URL (no query params or hash)
+ window.location.reload();
+ } else {
+ setCouponStatus(message || 'Error creating user');
+ setModal('join', { couponCode });
}
+
+ setLoading(false);
};
return (
Gunakan Kupon
+
+ Daftarkan kedaimu sekarang dan mulai gunakan semua fitur unggulan kami.
+
- ---- masuk -------------------------------
+ ---- Daftar -------------------------------
{ setInputtingPassword(true); setWasInputtingPassword(true) }} className={styles.claimButton}>
+ { setInputtingPassword(true); setWasInputtingPassword(true); }} className={styles.claimButton}>
➜
@@ -139,7 +102,6 @@ const LinktreePage = ({ setModal }) => {
setInputtingPassword(false)} htmlFor="password" className={styles.usernameLabel}> <--- <-- kembali
-----------------
-
{
const navigate = useNavigate();
@@ -29,6 +31,7 @@ const LinktreePage = ({ user, setModal }) => {
const [isModalOpen, setIsModalOpen] = useState(false);
const [selectedItemId, setSelectedItemId] = useState(0);
const [selectedSubItemId, setSelectedSubItemId] = useState(0);
+ const [coupons, setCoupons] = useState(null);
useEffect(() => {
@@ -55,11 +58,22 @@ const LinktreePage = ({ user, setModal }) => {
// Remove cafeId from the query parameter
searchParams.delete('cafeId');
}
-
+
// Update the URL with the modified query params
window.history.replaceState(null, '', `${url.pathname}?${searchParams.toString()}`);
}, [selectedItemId]);
+ // Detect query params on component mount
+ useEffect(() => {
+ handleGetkCoupons();
+ }, []);
+
+ // Handle manual coupon code check
+ const handleGetkCoupons = async () => {
+ const result = await getUserCoupons();
+ setCoupons(result.coupons);
+ console.log(result)
+ };
// Handle user transactions
const handleMyTransactions = async () => {
@@ -169,15 +183,15 @@ const LinktreePage = ({ user, setModal }) => {
// Strong contrasting colors for visibility on white background
"#333333", // Dark Gray (great contrast for legibility)
"#555555", // Medium Gray (slightly lighter, still legible)
-
+
// Subtle accent colors (not too bright, but distinct)
"#4B9F8D", // Muted Teal (offers a soft contrast)
"#7F7F7F", // Slate Gray (elegant and balanced)
-
+
// Softer neutral colors (for less emphasis)
"#B0B0B0", // Light Gray (gentle tone for subtle slices)
"#D3D3D3", // Silver Gray (light, but still visible on white background)
-
+
// A touch of color for balance (but still muted)
"#9C6E5C", // Muted Brown (earthy, grounded tone)
"#A1A1A1", // Silver (neutral highlight)
@@ -202,19 +216,19 @@ const LinktreePage = ({ user, setModal }) => {
if (user.roleId == 1 || user.roleId == 0 && selectedItemId == 0)
segments = (selectedItemId != 0 && selectedItemId != -1 && selectedSubItemId == 0 ? allSelectedSubItems : selectedItemId != 0 && selectedItemId != -1 ? filteredItems.report?.items || [] : items?.items || []).map((item, index) => ({
- percentage: item.percentage || (items?.totalIncome / item?.totalIncome || items?.totalIncome / item?.report?.totalIncome) * 100,
- value: item.username || item.itemName || item.name,
+ percentage: item.percentage || (items?.totalIncome / item?.totalIncome || items?.totalIncome / item?.report?.totalIncome) * 100,
+ value: item.username || item.itemName || item.name,
color: (colors && colors[index]) || "#cccccc", // Safe check for colors array
})) || []; // Ensure segments is an empty array if no items are availabled
// Function to combine items of all cafes for the selected tenant
console.log(selectedItems)
console.log(segments)
-// Check if items and items.items are defined before proceeding
-const allMaterials = (items?.items || []).flatMap(item => item.report?.materialsPurchased || []);
+ // Check if items and items.items are defined before proceeding
+ const allMaterials = (items?.items || []).flatMap(item => item.report?.materialsPurchased || []);
-// Sort the merged array by date if it's not empty
-const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(b.date));
+ // Sort the merged array by date if it's not empty
+ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(b.date));
@@ -681,7 +695,7 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
cafe.cafeId == selectedSubItemId)?.cafeId) == null ? 'hidden' : 'visible' }} onClick={() => window.location.href = window.location.origin + '/' + (selectedItems?.cafeIdentifyName || selectedSubItems.find(cafe => cafe.cafeId == selectedSubItemId)?.cafeIdentifyName)}>Kunjungi kedai
-
terlaku
+
terlaku
new Date(a.date) - new Date(
>
★
-
{item.percentage == 'Infinity' || isNaN(item.percentage) ? 0 : item.percentage}% {item.value}
+
{item.percentage == 'Infinity' || isNaN(item.percentage) ? 0 : item.percentage}% {item.value}
))}
{segments.length < 1 &&
@@ -748,6 +762,15 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
penambahan stok
+ {coupons && coupons.map((coupon) => {
+ return
+ })}
+
setModal('claim-coupon')}>
@@ -844,38 +867,38 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
{API_BASE_URL == 'https://test.api.kedaimaster.com' ?
-
- KEDAIMASTER CREDITS
-
-
- {['AI - MUHAMMAD AINUL FIKRI',
- 'BACKEND - ZADIT TAQWA W.',
- 'FRONTEND - M. PASHA A. P.' ,
- 'FRONTEND - NAUFAL DANIYAL P.',
- 'FRONTEND - ZADIT TAQWA W.',
- 'UI/UX - KEVIN DWI WIJAYA',
- 'UI/UX - LUNA CHELISA A.',
- 'UI/UX - MAULINA AYU E.',
- 'UI/UX - NUR ARINDA P.',
- 'UI/UX - NAURA IZZATI B.',].map((item, index) => (
-
{item}
- ))}
+
+ KEDAIMASTER CREDITS
+
+
+ {['AI - MUHAMMAD AINUL FIKRI',
+ 'BACKEND - ZADIT TAQWA W.',
+ 'FRONTEND - M. PASHA A. P.',
+ 'FRONTEND - NAUFAL DANIYAL P.',
+ 'FRONTEND - ZADIT TAQWA W.',
+ 'UI/UX - KEVIN DWI WIJAYA',
+ 'UI/UX - LUNA CHELISA A.',
+ 'UI/UX - MAULINA AYU E.',
+ 'UI/UX - NUR ARINDA P.',
+ 'UI/UX - NAURA IZZATI B.',].map((item, index) => (
+
{item}
+ ))}
+
+ gratis 3 bulan pertama
- gratis 3 bulan pertama
-
- :
-
- COBA KEDAIMASTER
-
-
- {['pemesanan langsung dari meja', 'pengelolaan pesanan dan keuangan', 'tentukan suasana musik', 'pengelolaan stok dan manajemen', 'jangan pernah ragukan pelanggan'].map((item, index) => (
-
{item}
- ))}
+ :
+
+ COBA KEDAIMASTER
+
+
+ {['pemesanan langsung dari meja', 'pengelolaan pesanan dan keuangan', 'tentukan suasana musik', 'pengelolaan stok dan manajemen', 'jangan pernah ragukan pelanggan'].map((item, index) => (
+
{item}
+ ))}
+
+ Gratis 3 bulan pertama
- Gratis 3 bulan pertama
-
}
Solusi berbasis web untuk memudahkan pengelolaan kedai, dengan fitur yang mempermudah pemilik, kasir, dan tamu berinteraksi.
@@ -883,8 +906,8 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
{getLocalStorage('auth') == null && (
-
-
---- masuk -------------------------------
+
+ ---- Masuk -------------------------------
{setInputtingPassword(true); setWasInputtingPassword(true)}} className={styles.claimButton}>
+ { setInputtingPassword(true); setWasInputtingPassword(true) }} className={styles.claimButton}>
➜
-
+
- setInputtingPassword(false)} htmlFor="password" className={styles.usernameLabel}> <--- <-- kembali
+ setInputtingPassword(false)} htmlFor="password" className={styles.usernameLabel}> <--- <-- Kembali
-----
setModal('reset-password', { username: username })} className={styles.usernameLabel}>
lupa password? -
@@ -947,7 +970,7 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
onError={(e) => e.target.src = '/fallback-image.png'}
/>
-
©2025 KEDIRITECHNOPARK.COM
+
©2025 KEDIRITECHNOPARK.COM
diff --git a/src/pages/Join.js b/src/pages/Join.js
index e219a3a..a356f57 100644
--- a/src/pages/Join.js
+++ b/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 ? (
Nikmati Kemudahan Mengelola Kafe
-
+
Daftarkan kedaimu sekarang dan mulai gunakan semua fitur unggulan kami.
-
-
-
) : (
-
Daftar Menggunakan Kupon
+
{isOnlyClaimCoupon ? 'Aktifkan Kupon' : 'Daftar Menggunakan Kupon'}
- 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.
{couponStatus === 0 ? (
-}
+ {couponStatus === 200 &&
+
+
+ --------------------------------------------
+
+ {
+ 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();
+ }
+ }}
+ >
+ {isOnlyClaimCoupon ? 'Aktifkan untuk akun ini' : 'Buat akun dengan kupon ini'}
+
+
+
+ }
)}
-
diff --git a/src/pages/Join.module.css b/src/pages/Join.module.css
index 28ae05b..6ca4c93 100644
--- a/src/pages/Join.module.css
+++ b/src/pages/Join.module.css
@@ -6,6 +6,7 @@
flex-direction: column;
justify-content: center;
background-color: rgb(232 204 88);
+ overflow: hidden;
}
@@ -72,6 +73,15 @@
margin-bottom: 1.5rem;
}
+.subHeadingTransparent {
+ font-weight: 400;
+ line-height: 1.5rem;
+ font-size: 14px;
+ font-family: 'poppins';
+ color: transparent;
+ margin-bottom: -2.5rem;
+}
+
/* Form */
.linktreeForm {
display: flex;
@@ -127,6 +137,7 @@
flex: 1;
display: flex;
flex-direction: column;
+ margin-bottom: 14px;
}
.footerLink {
@@ -159,3 +170,129 @@
margin-top: -50px;
margin-bottom: 30px;
}
+
+
+.LoginForm {
+ display: inline-flex;
+ position: relative;
+ height: 237px;
+}
+
+/* Form */
+.FormUsername {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ position: absolute;
+ left: 0vw;
+}
+
+.FormUsername.animateForm {
+ animation: FormUsernameProgress 0.5s forwards;
+ /* Apply the animation when inputtingPassword is true */
+}
+
+.FormUsername.reverseForm {
+ animation: FormUsernameReverse 0.5s forwards;
+ /* Reverse animation when inputtingPassword is false */
+}
+
+@keyframes FormUsernameProgress {
+ 0% {
+ left: 0vw;
+ }
+
+ 100% {
+ left: -100vw;
+ }
+}
+
+@keyframes FormUsernameReverse {
+ 0% {
+ left: -100vw;
+ }
+
+ 100% {
+ left: 0vw;
+ }
+}
+
+.FormPassword {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ position: absolute;
+ left: 100vw;
+}
+
+.FormPassword.animateForm {
+ animation: FormPasswordProgress 0.5s forwards;
+ /* Apply the animation when inputtingPassword is true */
+}
+
+.FormPassword.reverseForm {
+ animation: FormPasswordReverse 0.5s forwards;
+ /* Reverse animation when inputtingPassword is false */
+}
+
+@keyframes FormPasswordProgress {
+ 0% {
+ left: 100vw;
+ }
+
+ 100% {
+ left: 0vw;
+ }
+}
+
+@keyframes FormPasswordReverse {
+ 0% {
+ left: 0vw;
+ }
+
+ 99.9% {
+ left: 100vw;
+ visibility: hidden;
+ }
+ 100% {
+ left: 0vw;
+ visibility: hidden;
+ }
+}
+
+
+.usernameLabel {
+ font-size: 0.875rem;
+ color: #444;
+ margin-bottom: 5px;
+ position: relative;
+}
+
+.usernameInputError {
+ width: 250px;
+ height: 55px;
+ padding-left: 10px;
+ font-size: 1rem;
+ background-color: #f0f0f0;
+ border-radius: 5px;
+ border: 2px solid red;
+ /* Red border when error is true */
+ margin-top: 5px;
+ margin-bottom: 15px;
+
+ /* Apply keyframe animation for border color transition */
+ animation: borderTransition 2s ease-in-out forwards;
+}
+
+/* Keyframe animation for border color transition */
+@keyframes borderTransition {
+ 0% {
+ border-color: red;
+ /* Initial red border */
+ }
+
+ 100% {
+ border-color: transparent;
+ /* Transition to transparent */
+ }
+}
\ No newline at end of file
diff --git a/src/pages/LinktreePage.module.css b/src/pages/LinktreePage.module.css
index e695c86..bcbc000 100644
--- a/src/pages/LinktreePage.module.css
+++ b/src/pages/LinktreePage.module.css
@@ -208,6 +208,11 @@
left: 100vw;
}
+.FormPassword.idleForm {
+ left: 0vw;
+ visibility: hidden;
+}
+
.FormPassword.animateForm {
animation: FormPasswordProgress 0.5s forwards;
/* Apply the animation when inputtingPassword is true */
@@ -338,9 +343,10 @@
padding: 12px 30px;
border-radius: 30px;
text-align: center;
- font-size: 0.875rem;
+ font-size: 0.8rem;
margin-top: 1.5rem;
cursor: pointer;
+ max-width: 200px;
}
.footerImage {
![]({"https://i.imgur.com/yt6osgL.png"})
+ 
-