if (window.customerData) { customerTags = window.customerData.tags || []; customerEmail = window.customerData.email || ''; console.log('Method 3 success - Tags:', customerTags); updateButtons(); return; } console.log('All methods failed - customer data not available'); console.log('Please add customer liquid data to your template'); // Show a temporary test message showTestInterface(); } // Test interface for debugging function showTestInterface() { const testDiv = document.createElement('div'); testDiv.id = 'debug-test'; testDiv.style.cssText = ` position: fixed; top: 10px; right: 10px; background: #f8f9fa; border: 2px solid #007bff; padding: 15px; border-radius: 8px; z-index: 10000; max-width: 300px; font-family: Arial; `; testDiv.innerHTML = `

Debug Test

Customer data not detected. Test the buttons:

No subscription Basic Member Plus Member Premium Member Test Close `; document.body.appendChild(testDiv); } function testSubscription() { const testTag = document.getElementById('test-tags').value; customerTags = testTag ? [testTag] : []; customerEmail = 'test@example.com'; // Test email console.log('Testing with tags:', customerTags); updateButtons(); } function closeTestInterface() { const testDiv = document.getElementById('debug-test'); if (testDiv) { testDiv.remove(); } } function updateButtons() { const hasBasic = customerTags.includes('basic-member'); const hasPlus = customerTags.includes('plus-member'); const hasPremium = customerTags.includes('premium-member'); // Update Basic plan button const basicButton = document.getElementById('basic-button'); if (hasBasic) { basicButton.innerHTML = 'Cancel Subscription'; } else if (hasPlus || hasPremium) { basicButton.innerHTML = 'Downgrade'; } // Update Plus plan button const plusButton = document.getElementById('plus-button'); if (hasPlus) { plusButton.innerHTML = 'Cancel Subscription'; } else if (hasBasic) { plusButton.innerHTML = 'Upgrade'; } else if (hasPremium) { plusButton.innerHTML = 'Downgrade'; } // Update Premium plan button const premiumButton = document.getElementById('premium-button'); if (hasPremium) { premiumButton.innerHTML = 'Cancel Subscription'; } else if (hasBasic || hasPlus) { premiumButton.innerHTML = 'Upgrade'; } } function showCancelModal(plan) { currentPlan = plan; const planName = plan.charAt(0).toUpperCase() + plan.slice(1); document.getElementById('cancel-plan-name').textContent = planName; document.getElementById('cancel-modal').style.display = 'block'; } function closeModal() { document.getElementById('cancel-modal').style.display = 'none'; currentPlan = ''; } function showUpgradeMessage() { document.getElementById('message-modal').style.display = 'block'; } function closeMessageModal() { document.getElementById('message-modal').style.display = 'none'; } function showSuccessModal() { document.getElementById('success-modal').style.display = 'block'; } function closeSuccessModal() { document.getElementById('success-modal').style.display = 'none'; } function confirmCancel() { if (!customerEmail || !currentPlan) { alert('Error: Unable to process cancellation. Please try again.'); return; } // Send email notification sendCancelNotification(customerEmail, currentPlan); // Reset buttons to show regular purchase options resetToRegularView(); // Update local state (remove the tag locally for immediate UI update) customerTags = customerTags.filter(tag => !tag.includes('-member')); // Close cancel modal closeModal(); // Show success message showSuccessModal(); } function sendCancelNotification(email, plan) { // Option 1: Using a simple form submission to your email service // You'll need to replace 'YOUR_FORM_ENDPOINT' with your actual endpoint const formData = new FormData(); formData.append('customer_email', email); formData.append('cancelled_plan', plan); formData.append('message', `Customer ${email} has cancelled their ${plan} subscription.`); formData.append('timestamp', new Date().toISOString()); // You can use services like Formspree, Netlify Forms, or your own endpoint fetch('https://formspree.io/f/shop.vita.tech@gmail.com', { method: 'POST', body: formData, headers: { 'Accept': 'application/json' } }).catch(error => { console.log('Email notification failed:', error); }); // Option 2: Alternative using a hidden form (if you prefer this method) /* const form = document.createElement('form'); form.method = 'POST'; form.action = 'YOUR_EMAIL_ENDPOINT'; form.style.display = 'none'; const fields = { 'customer_email': email, 'cancelled_plan': plan, 'message': `Customer ${email} has cancelled their ${plan} subscription.`, 'timestamp': new Date().toISOString() }; Object.keys(fields).forEach(key => { const field = document.createElement('input'); field.name = key; field.value = fields[key]; form.appendChild(field); }); document.body.appendChild(form); form.submit(); document.body.removeChild(form); */ } function resetToRegularView() { // Reset all buttons to show original purchase links document.getElementById('basic-button').innerHTML = 'Choose Basic'; document.getElementById('plus-button').innerHTML = 'Choose Plus'; document.getElementById('premium-button').innerHTML = 'Choose Premium'; } // Initialize when page loads document.addEventListener('DOMContentLoaded', function() { getCustomerData(); }); // Also try to update buttons after a short delay in case customer data loads later setTimeout(getCustomerData, 1000);