${window.escapeHtml(ref.referee_name)}
${ref.referral_status}
${window.formatTimeAgo(ref.referred_at)}
`).join('');
}
/**
* Format date nicely
*/
formatDate(dateString) {
const date = new Date(dateString);
const now = new Date();
const diffTime = Math.abs(now - date);
const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
if (diffDays === 0) return 'Today';
if (diffDays === 1) return 'Yesterday';
if (diffDays < 7) return `${diffDays} days ago`;
return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
}
/**
* Handle form submission
*/
async handleFormSubmit(event) {
event.preventDefault();
const form = event.target;
const formData = new FormData(form);
this.setFormLoading(true, form);
try {
let result = { success: false, message: '' };
if (form.id === 'referral-code-form') {
// Registration with referral code - goes to LoginRoutes
const data = {
name: formData.get('referral_name'),
email: formData.get('referral_email'),
referral_code: formData.get('referral_code')
};
if (!data.name || !data.email || !data.referral_code) {
result.message = 'Please fill in all fields';
} else {
result = await this.makeRequest('auth/register', data); // UPDATED endpoint
}
} else if (form.id === 'login-form') {
const data = {
type: 'login',
email: formData.get('login_email'),
context: {
redirect_to: window.location.href + '?seeReferral=1'
}
};
result = await this.makeRequest('magic', data);
}
if (result.success) {
this.handleSuccess(form, result);
} else {
this.showFormMessage(form, result.message || 'Something went wrong. Please try again.', 'error');
}
} catch (error) {
console.error('Error submitting form:', error);
this.showFormMessage(form, 'Something went wrong. Please try again.', 'error');
} finally {
this.setFormLoading(false, form);
}
}
async makeRequest(endpoint, data) {
const validEndpoints = [
'magic',
'auth/register'
];
if (!validEndpoints.includes(endpoint)) {
return { success: false, message: 'Invalid endpoint' };
}
const response = await fetch(`${jvbSettings.api}${endpoint}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-WP-Nonce': window.auth.getNonce(),
},
body: JSON.stringify(data)
});
// Add error handling to see the actual response
if (!response.ok) {
const errorText = await response.text();
console.error('Error response:', response.status, errorText);
try {
return JSON.parse(errorText);
} catch {
return { success: false, message: 'Server error' };
}
}
return await response.json();
}
/**
* Show success state
*/
handleSuccess(form, result) {
// Hide form
form.style.display = 'none';
// Show success message
const successDiv = form.nextElementSibling;
if (successDiv && successDiv.classList.contains('success-content')) {
successDiv.hidden = false;
// Scroll to message
successDiv.scrollIntoView({
behavior: 'smooth',
block: 'center'
});
}
// Fire custom event
this.dispatchEvent('emailSent', {
email: result.email
});
}
/**
* Show message in form status area
*/
showFormMessage(form, text, type = 'error') {
const status = form.querySelector('.status');
if (!status) return;
const message = status.querySelector('.message');
if (message) {
message.textContent = text;
}
status.hidden = false;
status.className = `status ${type}`;
if (type === 'error') {
setTimeout(() => {
status.hidden = true;
}, 5000);
}
}
/**
* Set form loading state
*/
setFormLoading(loading, form) {
const inputs = form.querySelectorAll('input, button');
inputs.forEach(input => input.disabled = loading);
const status = form.querySelector('.status');
if (status) {
status.classList.toggle('loading', loading);
if (loading) {
status.hidden = false;
const message = status.querySelector('.message');
if (message) {
message.textContent = 'Sending...';
}
}
}
}
/**
* Dispatch custom event
*/
dispatchEvent(eventName, detail) {
const event = new CustomEvent('referralWidget:' + eventName, {
detail: detail,
bubbles: true
});
this.container.dispatchEvent(event);
}
}
document.addEventListener('DOMContentLoaded', async function () {
window.auth.subscribe((event) => {
if (event === 'auth-loaded') {
window.jvbReferral = new Referral();
}
});
});