391 lines
17 KiB
JavaScript
391 lines
17 KiB
JavaScript
|
|
const card = document.querySelector(`.plan-card[data-plan="${plan}"]`);
|
|
if (!card) return;
|
|
|
|
console.log('Plan selected:', plan);
|
|
isProcessing = true;
|
|
|
|
// Update UI state
|
|
const allCards = document.querySelectorAll('.plan-card');
|
|
allCards.forEach(c => {
|
|
c.classList.remove('ring-4', 'ring-green-700', 'ring-offset-2');
|
|
});
|
|
card.classList.add('ring-4', 'ring-green-700', 'ring-offset-2');
|
|
|
|
// Disable all buttons during selection
|
|
const allButtons = document.querySelectorAll('.plan-btn');
|
|
allButtons.forEach(btn => {
|
|
btn.disabled = true;
|
|
btn.textContent = 'Processing...';
|
|
btn.classList.add('opacity-50', 'cursor-not-allowed');
|
|
});
|
|
|
|
try {
|
|
const authHeaders = getAuthHeaders();
|
|
let data;
|
|
|
|
if (plan === 'hobby') {
|
|
// Hobby plan is free, use original endpoint
|
|
const response = await fetch('/api/select-plan', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
...authHeaders
|
|
},
|
|
body: JSON.stringify({ plan }),
|
|
credentials: 'include',
|
|
});
|
|
|
|
data = await response.json();
|
|
|
|
if (response.ok && data.ok) {
|
|
window.location.href = '/apps';
|
|
} else {
|
|
throw new Error(data.error || 'Failed to select plan');
|
|
}
|
|
} else {
|
|
// Paid plans use inline subscription checkout
|
|
const response = await fetch('/api/subscription/checkout', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
...authHeaders
|
|
},
|
|
body: JSON.stringify({
|
|
plan: plan,
|
|
billingCycle: currentBillingCycle,
|
|
currency: currentCurrency.toLowerCase(),
|
|
inline: true,
|
|
previousPlan: (typeof window.currentPlan !== 'undefined' ? window.currentPlan : '')
|
|
}),
|
|
credentials: 'include',
|
|
});
|
|
|
|
data = await response.json();
|
|
|
|
if (response.ok && data.sessionId) {
|
|
// Use Dodo inline checkout - prefer inlineCheckoutUrl if available, otherwise use checkoutUrl
|
|
const checkoutUrl = data.inlineCheckoutUrl || data.checkoutUrl;
|
|
if (checkoutUrl) {
|
|
await openInlineCheckout(checkoutUrl, data.sessionId);
|
|
} else {
|
|
throw new Error('No checkout URL provided');
|
|
}
|
|
} else {
|
|
throw new Error(data.error || 'Failed to start checkout');
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Error selecting plan:', error);
|
|
|
|
alert(error.message || 'Failed to select plan. Please try again.');
|
|
|
|
// Re-enable buttons
|
|
allButtons.forEach(btn => {
|
|
btn.disabled = false;
|
|
const planType = btn.getAttribute('data-plan');
|
|
if (planType === 'hobby') {
|
|
btn.textContent = 'Start for Free';
|
|
} else if (planType === 'starter') {
|
|
btn.textContent = 'Choose Starter';
|
|
} else if (planType === 'professional') {
|
|
btn.textContent = 'Get Started';
|
|
} else if (planType === 'enterprise') {
|
|
btn.textContent = 'Choose Enterprise';
|
|
}
|
|
btn.classList.remove('opacity-50', 'cursor-not-allowed');
|
|
});
|
|
isProcessing = false;
|
|
}
|
|
}
|
|
|
|
function setupBillingCycleToggle() {
|
|
const monthlyBtn = document.getElementById('monthly-toggle');
|
|
const yearlyBtn = document.getElementById('yearly-toggle');
|
|
if (!monthlyBtn || !yearlyBtn) return;
|
|
|
|
monthlyBtn.addEventListener('click', () => {
|
|
currentBillingCycle = 'monthly';
|
|
monthlyBtn.className = 'px-6 py-2 rounded-full text-sm font-medium bg-green-700 text-white shadow-sm transition-all';
|
|
yearlyBtn.className = 'px-6 py-2 rounded-full text-sm font-medium text-gray-600 hover:text-gray-900 transition-all';
|
|
updatePlanPrices();
|
|
});
|
|
|
|
yearlyBtn.addEventListener('click', () => {
|
|
currentBillingCycle = 'yearly';
|
|
yearlyBtn.className = 'px-6 py-2 rounded-full text-sm font-medium bg-green-700 text-white shadow-sm transition-all';
|
|
monthlyBtn.className = 'px-6 py-2 rounded-full text-sm font-medium text-gray-600 hover:text-gray-900 transition-all';
|
|
updatePlanPrices();
|
|
});
|
|
}
|
|
|
|
function setupCurrencyDropdown() {
|
|
const dropdown = document.getElementById('currency-dropdown');
|
|
const btn = document.getElementById('currency-btn');
|
|
const options = document.getElementById('currency-options');
|
|
const chevron = document.getElementById('currency-chevron');
|
|
if (!dropdown || !btn || !options) return;
|
|
|
|
btn.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
const isOpen = !dropdown.classList.contains('open');
|
|
|
|
if (isOpen) {
|
|
dropdown.classList.add('open');
|
|
options.classList.remove('hidden');
|
|
if (chevron) chevron.style.transform = 'rotate(180deg)';
|
|
} else {
|
|
dropdown.classList.remove('open');
|
|
options.classList.add('hidden');
|
|
if (chevron) chevron.style.transform = 'rotate(0deg)';
|
|
}
|
|
});
|
|
|
|
// Handle currency selection
|
|
document.querySelectorAll('.currency-option').forEach(option => {
|
|
option.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
const currency = option.getAttribute('data-value');
|
|
currentCurrency = currency;
|
|
|
|
// Update button display
|
|
const flags = { USD: '🇺🇸', GBP: '🇬🇧', EUR: '🇪🇺' };
|
|
const flagEl = document.getElementById('currency-flag');
|
|
const codeEl = document.getElementById('currency-code');
|
|
if (flagEl) flagEl.textContent = flags[currency];
|
|
if (codeEl) codeEl.textContent = currency;
|
|
|
|
// Close dropdown
|
|
dropdown.classList.remove('open');
|
|
options.classList.add('hidden');
|
|
if (chevron) chevron.style.transform = 'rotate(0deg)';
|
|
|
|
updatePlanPrices();
|
|
});
|
|
});
|
|
|
|
// Close dropdown when clicking outside
|
|
document.addEventListener('click', () => {
|
|
dropdown.classList.remove('open');
|
|
options.classList.add('hidden');
|
|
if (chevron) chevron.style.transform = 'rotate(0deg)';
|
|
});
|
|
}
|
|
|
|
function updatePlanPrices() {
|
|
// Update Hobby plan price
|
|
const hobbyPrice = document.getElementById('hobby-price');
|
|
const hobbyPeriod = document.getElementById('hobby-period');
|
|
if (hobbyPrice) hobbyPrice.textContent = currencySymbols[currentCurrency] + '0';
|
|
if (hobbyPeriod) hobbyPeriod.textContent = currentBillingCycle === 'monthly' ? '/mo' : '/yr';
|
|
|
|
// Update Starter plan price
|
|
const starterPrice = document.getElementById('starter-price');
|
|
const starterPeriod = document.getElementById('starter-period');
|
|
const starterAmount = planPricing.starter[currentBillingCycle][currentCurrency];
|
|
if (starterPrice) starterPrice.textContent = currencySymbols[currentCurrency] + starterAmount.toFixed(starterAmount % 1 === 0 ? 0 : 2);
|
|
if (starterPeriod) starterPeriod.textContent = currentBillingCycle === 'monthly' ? '/mo' : '/yr';
|
|
|
|
// Update Professional plan price
|
|
const proPrice = document.getElementById('pro-price');
|
|
const proPeriod = document.getElementById('pro-period');
|
|
const proAmount = planPricing.professional[currentBillingCycle][currentCurrency];
|
|
if (proPrice) proPrice.textContent = currencySymbols[currentCurrency] + proAmount.toFixed(proAmount % 1 === 0 ? 0 : 2);
|
|
if (proPeriod) proPeriod.textContent = currentBillingCycle === 'monthly' ? '/mo' : '/yr';
|
|
|
|
// Update Enterprise plan price
|
|
const enterprisePrice = document.getElementById('enterprise-price');
|
|
const enterprisePeriod = document.getElementById('enterprise-period');
|
|
const enterpriseAmount = planPricing.enterprise[currentBillingCycle][currentCurrency];
|
|
if (enterprisePrice) enterprisePrice.textContent = currencySymbols[currentCurrency] + enterpriseAmount.toFixed(enterpriseAmount % 1 === 0 ? 0 : 2);
|
|
if (enterprisePeriod) enterprisePeriod.textContent = currentBillingCycle === 'monthly' ? '/mo' : '/yr';
|
|
}
|
|
|
|
function setupPlanSelection() {
|
|
// Only handle card clicks to avoid double-triggering
|
|
document.querySelectorAll('.plan-card').forEach(card => {
|
|
card.addEventListener('click', async (e) => {
|
|
// Let links within the card work normally
|
|
if (e.target.closest('a')) return;
|
|
|
|
e.preventDefault();
|
|
|
|
const plan = card.getAttribute('data-plan');
|
|
if (!plan) return;
|
|
|
|
// Use the shared triggerPlanSelection function
|
|
triggerPlanSelection(plan);
|
|
});
|
|
});
|
|
|
|
// Prevent button clicks from bubbling to card (card listener handles everything)
|
|
document.querySelectorAll('.plan-btn').forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
// Just let it bubble to the card
|
|
});
|
|
});
|
|
}
|
|
|
|
// Detect Location and Set Currency
|
|
async function autoDetectCurrency() {
|
|
try {
|
|
const response = await fetch('https://ipapi.co/json/');
|
|
const data = await response.json();
|
|
if (data.currency && currencySymbols[data.currency]) {
|
|
currentCurrency = data.currency;
|
|
|
|
// Update button display
|
|
const flags = { USD: '🇺🇸', GBP: '🇬🇧', EUR: '🇪🇺' };
|
|
const flagEl = document.getElementById('currency-flag');
|
|
const codeEl = document.getElementById('currency-code');
|
|
if (flagEl) flagEl.textContent = flags[currentCurrency];
|
|
if (codeEl) codeEl.textContent = currentCurrency;
|
|
|
|
updatePlanPrices();
|
|
}
|
|
} catch (err) {
|
|
console.log('Currency detection failed, defaulting to USD');
|
|
}
|
|
}
|
|
const modal = document.getElementById('payment-modal');
|
|
const container = document.getElementById('payment-frame-container');
|
|
|
|
container.innerHTML = `<iframe src="${checkoutUrl}" allowpaymentrequest="true"></iframe>`;
|
|
modal.classList.add('active');
|
|
|
|
let pollCount = 0;
|
|
const maxPolls = 180;
|
|
const pollInterval = 1000;
|
|
|
|
const checkPaymentStatus = async () => {
|
|
try {
|
|
pollCount++;
|
|
|
|
const resp = await fetch(`/api/subscription/confirm?session_id=${encodeURIComponent(sessionId)}`, {
|
|
credentials: 'include'
|
|
});
|
|
|
|
if (resp.ok) {
|
|
const data = await resp.json();
|
|
if (data.ok) {
|
|
clearInterval(pollTimer);
|
|
closeCheckoutModal();
|
|
window.location.href = '/apps';
|
|
return;
|
|
}
|
|
}
|
|
|
|
if (pollCount >= maxPolls) {
|
|
clearInterval(pollTimer);
|
|
closeCheckoutModal();
|
|
alert('Payment confirmation timeout. Please check your account status.');
|
|
reenableButtons();
|
|
isProcessing = false;
|
|
}
|
|
} catch (error) {
|
|
console.error('Error checking payment status:', error);
|
|
}
|
|
};
|
|
|
|
const pollTimer = setInterval(checkPaymentStatus, pollInterval);
|
|
|
|
function closeCheckoutModal() {
|
|
clearInterval(pollTimer);
|
|
modal.classList.remove('active');
|
|
container.innerHTML = '';
|
|
}
|
|
|
|
function reenableButtons() {
|
|
const allButtons = document.querySelectorAll('.plan-btn');
|
|
allButtons.forEach(btn => {
|
|
btn.disabled = false;
|
|
const planType = btn.getAttribute('data-plan');
|
|
if (planType === 'hobby') {
|
|
btn.textContent = 'Start for Free';
|
|
} else if (planType === 'starter') {
|
|
btn.textContent = 'Choose Starter';
|
|
} else if (planType === 'professional') {
|
|
btn.textContent = 'Get Started';
|
|
} else if (planType === 'enterprise') {
|
|
btn.textContent = 'Choose Enterprise';
|
|
}
|
|
btn.classList.remove('opacity-50', 'cursor-not-allowed');
|
|
});
|
|
}
|
|
|
|
document.getElementById('payment-modal-close').onclick = () => {
|
|
closeCheckoutModal();
|
|
reenableButtons();
|
|
isProcessing = false;
|
|
};
|
|
|
|
modal.onclick = (e) => {
|
|
if (e.target === modal) {
|
|
closeCheckoutModal();
|
|
reenableButtons();
|
|
isProcessing = false;
|
|
}
|
|
};
|
|
|
|
const handleEsc = (e) => {
|
|
if (e.key === 'Escape') {
|
|
closeCheckoutModal();
|
|
reenableButtons();
|
|
isProcessing = false;
|
|
}
|
|
};
|
|
document.addEventListener('keydown', handleEsc);
|
|
}
|
|
|
|
// Email Signup Form Handler
|
|
const signupForm = document.getElementById('footer-signup-form');
|
|
const signupMessage = document.getElementById('signup-message');
|
|
|
|
if (signupForm) {
|
|
signupForm.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const email = signupForm.querySelector('input[name="email"]').value;
|
|
const button = signupForm.querySelector('button');
|
|
|
|
button.disabled = true;
|
|
button.textContent = 'Subscribing...';
|
|
|
|
try {
|
|
const response = await fetch('https://emailmarketing.modelrailway3d.co.uk/api/webhooks/incoming/wh_0Z49zi_DGj4-lKJMOPO8-g', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
email: email,
|
|
source: 'plugin_compass_select_plan',
|
|
timestamp: new Date().toISOString()
|
|
})
|
|
});
|
|
|
|
if (response.ok) {
|
|
signupMessage.textContent = 'Successfully subscribed!';
|
|
signupMessage.className = 'mt-2 text-xs text-green-600';
|
|
signupForm.reset();
|
|
} else {
|
|
throw new Error('Failed to subscribe');
|
|
}
|
|
} catch (error) {
|
|
signupMessage.textContent = 'Failed to subscribe. Please try again.';
|
|
signupMessage.className = 'mt-2 text-xs text-red-600';
|
|
} finally {
|
|
signupMessage.classList.remove('hidden');
|
|
button.disabled = false;
|
|
button.textContent = 'Subscribe';
|
|
|
|
setTimeout(() => {
|
|
signupMessage.classList.add('hidden');
|
|
}, 5000);
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|