Tempahan Sales Page

Langkah 1 daripada 2

🔒 Bayaran selamat melalui Toyyibpay

// const firebaseConfig = { apiKey: "YOUR_API_KEY", authDomain: "YOUR_AUTH_DOMAIN", projectId: "YOUR_PROJECT_ID", storageBucket: "YOUR_STORAGE_BUCKET", messagingSenderId: "YOUR_MESSAGING_SENDER_ID", appId: "YOUR_APP_ID" }; // TODO: Uncomment untuk initialize Firebase // firebase.initializeApp(firebaseConfig); // const db = firebase.firestore(); // ============================================ // GLOBAL STATE // ============================================ let formData = { fullName: '', phoneNumber: '', birthday: '', email: '' }; // ============================================ // VALIDATION FUNCTIONS // ============================================ function showError(fieldId, message) { const input = document.getElementById(fieldId); const errorDiv = document.getElementById('error' + fieldId.charAt(0).toUpperCase() + fieldId.slice(1)); const errorText = document.getElementById('error' + fieldId.charAt(0).toUpperCase() + fieldId.slice(1) + 'Text'); input.classList.add('error'); errorDiv.classList.add('show'); errorText.textContent = message; } function hideError(fieldId) { const input = document.getElementById(fieldId); const errorDiv = document.getElementById('error' + fieldId.charAt(0).toUpperCase() + fieldId.slice(1)); input.classList.remove('error'); errorDiv.classList.remove('show'); } function validateForm() { let isValid = true; // Validate Full Name const fullName = document.getElementById('fullName').value.trim(); if (fullName.length < 3) { showError('fullName', 'Nama penuh minimum 3 huruf'); isValid = false; } else { hideError('fullName'); } // Validate Phone Number const phoneNumber = document.getElementById('phoneNumber').value.replace(/[\s-]/g, ''); const phoneRegex = /^01[0-9]{8,9}$/; if (!phoneRegex.test(phoneNumber)) { showError('phoneNumber', 'Format: 0123456789'); isValid = false; } else { hideError('phoneNumber'); } // Validate Birthday const birthday = document.getElementById('birthday').value; if (!birthday) { showError('birthday', 'Sila pilih tarikh lahir'); isValid = false; } else { const birthDate = new Date(birthday); const today = new Date(); const age = today.getFullYear() - birthDate.getFullYear(); if (age < 13 || age > 100) { showError('birthday', 'Umur mesti antara 13-100 tahun'); isValid = false; } else { hideError('birthday'); } } // Validate Email const email = document.getElementById('email').value.trim(); const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(email)) { showError('email', 'Format email tidak sah'); isValid = false; } else { hideError('email'); } return isValid; } // ============================================ // FIREBASE FUNCTION - saveToFirestore() // ============================================ async function saveToFirestore(data) { try { // TODO: Uncomment bila dah setup Firebase // const docRef = await db.collection('orders').add({ // ...data, // createdAt: firebase.firestore.FieldValue.serverTimestamp(), // timestamp: Date.now() // }); // return { success: true, id: docRef.id }; // DEMO MODE - Simulation (buang bila setup Firebase) console.log('=== DATA YANG AKAN DISIMPAN ==='); console.log(data); await new Promise(resolve => setTimeout(resolve, 2000)); return { success: true, id: 'demo-' + Date.now() }; } catch (error) { console.error('Firebase Error:', error); throw new Error('Gagal menyimpan data ke Firestore'); } } // ============================================ // NAVIGATION FUNCTIONS // ============================================ function goToPaymentStep() { if (validateForm()) { // Save form data formData.fullName = document.getElementById('fullName').value.trim(); formData.phoneNumber = document.getElementById('phoneNumber').value.trim(); formData.birthday = document.getElementById('birthday').value; formData.email = document.getElementById('email').value.trim(); // Update summary document.getElementById('summaryName').textContent = formData.fullName; document.getElementById('summaryPhone').textContent = formData.phoneNumber; document.getElementById('summaryBirthday').textContent = formData.birthday; document.getElementById('summaryEmail').textContent = formData.email; // Show payment step document.getElementById('signupForm').classList.add('hidden'); document.getElementById('paymentOptions').classList.remove('hidden'); // Scroll to top window.scrollTo({ top: 0, behavior: 'smooth' }); } } function goBackToForm() { document.getElementById('paymentOptions').classList.add('hidden'); document.getElementById('signupForm').classList.remove('hidden'); document.getElementById('errorAlert').classList.remove('show'); // Scroll to top window.scrollTo({ top: 0, behavior: 'smooth' }); } // ============================================ // PAYMENT HANDLER // ============================================ async function handlePayment(paymentType) { const depositBtn = document.getElementById('depositBtn'); const fullBtn = document.getElementById('fullBtn'); const backBtn = document.getElementById('backBtn'); const loadingIndicator = document.getElementById('loadingIndicator'); const errorAlert = document.getElementById('errorAlert'); // Disable buttons & show loading depositBtn.disabled = true; fullBtn.disabled = true; backBtn.disabled = true; loadingIndicator.classList.add('show'); errorAlert.classList.remove('show'); // Payment URLs - GANTI DENGAN URL SEBENAR AWAK const paymentUrls = { deposit: 'https://toyyibpay.com/deposit-link', full: 'https://toyyibpay.com/full-payment-link' }; // Data untuk simpan const orderData = { fullName: formData.fullName, phoneNumber: formData.phoneNumber, birthday: formData.birthday, email: formData.email, paymentType: paymentType, amount: paymentType === 'deposit' ? 20 : 599 }; try { // Simpan ke Firestore const result = await saveToFirestore(orderData); if (result.success) { console.log('✅ Data berjaya disimpan. ID:', result.id); // Redirect ke Toyyibpay window.location.href = paymentUrls[paymentType]; } else { throw new Error('Gagal menyimpan data'); } } catch (error) { console.error('Payment Error:', error); // Show error & enable buttons errorAlert.classList.add('show'); depositBtn.disabled = false; fullBtn.disabled = false; backBtn.disabled = false; loadingIndicator.classList.remove('show'); } } // ============================================ // EVENT LISTENERS // ============================================ // Clear errors on input ['fullName', 'phoneNumber', 'birthday', 'email'].forEach(fieldId => { const input = document.getElementById(fieldId); input.addEventListener('input', () => { hideError(fieldId); }); // Support Enter key input.addEventListener('keypress', (e) => { if (e.key === 'Enter') { e.preventDefault(); goToPaymentStep(); } }); });