Restore to commit 74e578279624c6045ca440a3459ebfa1f8d54191
This commit is contained in:
southseact-3d
390
temp_syntax_check2.js
Normal file
390
temp_syntax_check2.js
Normal file
@@ -0,0 +1,390 @@
|
||||
|
||||
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>
|
||||
Reference in New Issue
Block a user