mailpilot sending
This commit is contained in:
southseact-3d
444
chat/public/settings-layouts/layout-10-wizard.html
Normal file
444
chat/public/settings-layouts/layout-10-wizard.html
Normal file
@@ -0,0 +1,444 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Account Settings - Plugin Compass</title>
|
||||
<link rel="icon" type="image/png" href="/assets/Plugin.png">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/dodopayments-checkout@latest/dist/index.js"></script>
|
||||
<script src="/posthog.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
--green: #008060;
|
||||
--green-dark: #004c3f;
|
||||
--green-light: #e3f5ef;
|
||||
--border: #e5e7eb;
|
||||
--muted: #6b7280;
|
||||
--panel: #ffffff;
|
||||
--bg: #f8fafc;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body { margin: 0; font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--bg); color: #0f172a; min-height: 100vh; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
.nav { background: #fff; border-bottom: 1px solid var(--border); padding: 16px 32px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; }
|
||||
.brand { display: flex; align-items: center; gap: 12px; }
|
||||
.brand img { width: 32px; height: 32px; border-radius: 8px; }
|
||||
.brand span { font-weight: 700; font-size: 18px; }
|
||||
.nav-links { display: flex; gap: 8px; align-items: center; }
|
||||
.nav-btn { padding: 10px 18px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--muted); transition: all 0.2s; }
|
||||
.nav-btn:hover { background: #f1f5f9; color: #1e293b; }
|
||||
.nav-btn.active { background: var(--green-light); color: var(--green); }
|
||||
.user-menu { position: relative; }
|
||||
.user-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; cursor: pointer; }
|
||||
.dropdown { position: relative; }
|
||||
.dropdown-menu { position: absolute; top: 100%; right: 0; margin-top: 8px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); min-width: 180px; display: none; padding: 6px; z-index: 1000; }
|
||||
.dropdown-menu.active { display: block; }
|
||||
.dropdown-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; font-size: 14px; color: #475569; }
|
||||
.dropdown-item:hover { background: #f8fafc; color: var(--green); }
|
||||
.shell { max-width: 900px; margin: 0 auto; padding: 40px 32px; }
|
||||
.wizard-steps { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; padding: 20px; background: #fff; border: 1px solid var(--border); border-radius: 12px; }
|
||||
.wizard-step { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 8px; cursor: pointer; transition: all 0.2s; }
|
||||
.wizard-step:hover { background: #f8fafc; }
|
||||
.wizard-step.active { background: var(--green-light); }
|
||||
.wizard-step.completed { color: var(--green); }
|
||||
.wizard-step .step-num { width: 28px; height: 28px; border-radius: 50%; background: #e5e7eb; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
|
||||
.wizard-step.active .step-num { background: var(--green); color: #fff; }
|
||||
.wizard-step.completed .step-num { background: var(--green); color: #fff; }
|
||||
.wizard-step .step-label { font-size: 14px; font-weight: 500; color: var(--muted); }
|
||||
.wizard-step.active .step-label { color: var(--green); }
|
||||
.wizard-step.completed .step-label { color: var(--green); }
|
||||
.wizard-divider { flex: 1; height: 2px; background: var(--border); }
|
||||
.wizard-content { display: none; }
|
||||
.wizard-content.active { display: block; }
|
||||
.card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 32px; margin-bottom: 24px; }
|
||||
.card h2 { font-size: 20px; font-weight: 700; margin: 0 0 8px; }
|
||||
.card .subtitle { color: var(--muted); font-size: 14px; margin-bottom: 24px; }
|
||||
.profile-header { display: flex; align-items: center; gap: 20px; padding: 24px; background: linear-gradient(135deg, var(--green-light), #fff); border-radius: 12px; margin-bottom: 24px; }
|
||||
.profile-avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; }
|
||||
.profile-info h3 { margin: 0; font-size: 20px; }
|
||||
.profile-info p { margin: 0; color: var(--muted); }
|
||||
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; }
|
||||
.badge.success { background: #ecfdf5; color: #059669; }
|
||||
.field { margin-bottom: 20px; }
|
||||
.field label { display: block; font-weight: 600; font-size: 13px; color: #475569; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.025em; }
|
||||
.field-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
|
||||
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
|
||||
input, select { width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; background: #fff; transition: all 0.2s; }
|
||||
input:focus, select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(0,128,96,0.1); }
|
||||
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 40px; }
|
||||
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: 10px; font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.2s; border: 1px solid var(--border); background: #fff; color: #1e293b; }
|
||||
.btn:hover { background: #f8fafc; }
|
||||
.btn.primary { background: var(--green); color: #fff; border: none; }
|
||||
.btn.primary:hover { background: var(--green-dark); }
|
||||
.btn.danger { color: #dc2626; border-color: #fecaca; }
|
||||
.btn.danger:hover { background: #fef2f2; }
|
||||
.btn.full { width: 100%; }
|
||||
.actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
|
||||
.status { font-size: 13px; color: var(--muted); }
|
||||
.status.success { color: #059669; }
|
||||
.status.error { color: #b91c1c; }
|
||||
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
|
||||
@media (max-width: 700px) { .info-grid { grid-template-columns: 1fr; } }
|
||||
.info-card { padding: 20px; background: #f8fafc; border-radius: 12px; text-align: center; }
|
||||
.info-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--green-light); color: var(--green); display: flex; align-items: center; justify-content: center; font-size: 18px; margin: 0 auto 12px; }
|
||||
.info-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
|
||||
.info-value { font-size: 18px; font-weight: 700; }
|
||||
.payment-item { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; }
|
||||
.payment-item.default { border-color: var(--green); background: var(--green-light); }
|
||||
.payment-icon { width: 52px; height: 36px; background: #f1f5f9; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 26px; }
|
||||
.empty-state { text-align: center; padding: 48px 24px; color: var(--muted); }
|
||||
.empty-state i { font-size: 40px; margin-bottom: 16px; opacity: 0.5; }
|
||||
.invoice-item { display: flex; align-items: center; justify-content: space-between; padding: 16px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; transition: all 0.2s; }
|
||||
.invoice-item:hover { border-color: var(--green); box-shadow: 0 2px 8px rgba(0,128,96,0.08); }
|
||||
.invoice-amount { font-weight: 700; color: var(--green); font-size: 16px; }
|
||||
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15,23,42,0.6); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 10000; opacity: 0; visibility: hidden; transition: all 0.3s; }
|
||||
.modal-overlay.active { opacity: 1; visibility: visible; }
|
||||
.modal { background: #fff; border-radius: 20px; padding: 28px; max-width: 440px; width: 90%; }
|
||||
.modal-header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
|
||||
.modal-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; }
|
||||
.modal-icon.warning { background: #fff7ed; color: #ea580c; }
|
||||
.modal-icon.info { background: #eff6ff; color: #2563eb; }
|
||||
.modal-title { font-size: 18px; font-weight: 700; }
|
||||
.modal-body { color: #64748b; font-size: 15px; line-height: 1.6; margin-bottom: 24px; }
|
||||
.modal-actions { display: flex; gap: 12px; justify-content: flex-end; }
|
||||
@media (max-width: 600px) {
|
||||
.shell { padding: 24px 16px; }
|
||||
.wizard-steps { flex-direction: column; gap: 12px; text-align: center; padding: 24px; flex-direction: column; text-align: center; }
|
||||
.wizard-divider { width: 2px; height: 24px; margin: 0 auto; }
|
||||
.wizard-step { flex-direction: column; padding: 12px; flex-direction: column; padding: 12px; }
|
||||
.profile-header { flex-direction: column; text-align: center; }
|
||||
.profile-avatar { width: 64px; height: 64px; font-size: 26px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="nav">
|
||||
<a href="/" class="brand">
|
||||
<img src="/assets/Plugin.png" alt="Plugin Compass">
|
||||
<span>Plugin Compass</span>
|
||||
</a>
|
||||
<div class="nav-links">
|
||||
<a href="/apps" class="nav-btn"><i class="fa-solid fa-grid-2"></i> Apps</a>
|
||||
<a href="/topup" class="nav-btn"><i class="fa-solid fa-coins"></i> Tokens</a>
|
||||
<a href="/settings" class="nav-btn active"><i class="fa-solid fa-gear"></i> Settings</a>
|
||||
<div class="dropdown">
|
||||
<div class="user-avatar" id="nav-avatar">?</div>
|
||||
<div class="dropdown-menu" id="user-dropdown">
|
||||
<a href="/apps" class="dropdown-item"><i class="fa-solid fa-grid-2"></i> My Apps</a>
|
||||
<a href="/settings" class="dropdown-item"><i class="fa-solid fa-gear"></i> Settings</a>
|
||||
<a href="#" class="dropdown-item" id="logout-link"><i class="fa-solid fa-arrow-right-from-bracket"></i> Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<main class="shell">
|
||||
<div class="wizard-steps">
|
||||
<div class="wizard-step active" data-step="1">
|
||||
<div class="step-num">1</div>
|
||||
<div class="step-label">Account Overview</div>
|
||||
</div>
|
||||
<div class="wizard-divider"></div>
|
||||
<div class="wizard-step" data-step="2">
|
||||
<div class="step-num">2</div>
|
||||
<div class="step-label">Billing Settings</div>
|
||||
</div>
|
||||
<div class="wizard-divider"></div>
|
||||
<div class="wizard-step" data-step="3">
|
||||
<div class="step-num">3</div>
|
||||
<div class="step-label">Payments & Invoices</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-content active" id="step-content-1">
|
||||
<div class="profile-header">
|
||||
<div class="profile-avatar" id="settings-avatar">?</div>
|
||||
<div class="profile-info">
|
||||
<h3 id="settings-email">Loading...</h3>
|
||||
<p><span class="badge success" id="settings-status">Active</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-card">
|
||||
<div class="info-icon"><i class="fa-solid fa-crown"></i></div>
|
||||
<div class="info-label">Current Plan</div>
|
||||
<div class="info-value" id="settings-plan">-</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="info-icon"><i class="fa-solid fa-chart-line"></i></div>
|
||||
<div class="info-label">Status</div>
|
||||
<div class="info-value" id="settings-billing-status">-</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="info-icon"><i class="fa-solid fa-calendar"></i></div>
|
||||
<div class="info-label">Renews On</div>
|
||||
<div class="info-value" id="settings-renews">-</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<a href="/topup" class="btn"><i class="fa-solid fa-coins"></i> Buy Top-ups</a>
|
||||
<button class="btn primary" onclick="goToStep(2)">Continue <i class="fa-solid fa-arrow-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-content" id="step-content-2">
|
||||
<div class="card">
|
||||
<h2>Billing Settings</h2>
|
||||
<p class="subtitle">Update your plan and billing preferences</p>
|
||||
<form id="settings-form">
|
||||
<div class="field-row">
|
||||
<div class="field">
|
||||
<label for="plan">Subscription Plan</label>
|
||||
<select id="plan"></select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="billing-cycle">Billing Cycle</label>
|
||||
<select id="billing-cycle">
|
||||
<option value="monthly">Monthly</option>
|
||||
<option value="yearly">Yearly (save 20%)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<div class="field">
|
||||
<label for="currency">Currency</label>
|
||||
<select id="currency">
|
||||
<option value="usd">USD - US Dollar</option>
|
||||
<option value="gbp">GBP - British Pound</option>
|
||||
<option value="eur">EUR - Euro</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="billing-email">Billing Email</label>
|
||||
<input id="billing-email" type="email" placeholder="you@example.com" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="status" id="settings-status-line"></div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="btn" onclick="goToStep(1)"><i class="fa-solid fa-arrow-left"></i> Back</button>
|
||||
<button class="btn danger" id="cancel-plan"><i class="fa-solid fa-ban"></i> Cancel Plan</button>
|
||||
<button type="submit" form="settings-form" class="btn primary">Save Changes</button>
|
||||
<button class="btn primary" onclick="goToStep(3)">Continue <i class="fa-solid fa-arrow-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wizard-content" id="step-content-3">
|
||||
<div class="card">
|
||||
<h2>Payment Methods</h2>
|
||||
<p class="subtitle">Manage your saved payment methods</p>
|
||||
<div id="payment-methods-list">
|
||||
<div class="empty-state"><i class="fa-regular fa-credit-card"></i><p>No payment methods saved yet</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h2>Invoice History</h2>
|
||||
<p class="subtitle">View and download your payment invoices</p>
|
||||
<div id="invoices-list">
|
||||
<div class="empty-state"><i class="fa-solid fa-file-invoice"></i><p>No invoices yet</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="btn" onclick="goToStep(2)"><i class="fa-solid fa-arrow-left"></i> Back</button>
|
||||
<button class="btn primary" onclick="goToStep(1)"><i class="fa-solid fa-check"></i> Done</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<div class="modal-overlay" id="confirm-modal">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<div class="modal-icon warning" id="modal-icon"><i class="fa-solid fa-triangle-exclamation"></i></div>
|
||||
<div class="modal-title" id="modal-title">Confirm</div>
|
||||
</div>
|
||||
<div class="modal-body" id="modal-body">Are you sure?</div>
|
||||
<div class="modal-actions">
|
||||
<button class="btn" id="modal-cancel">Cancel</button>
|
||||
<button class="btn primary" id="modal-confirm">Confirm</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function goToStep(step) {
|
||||
document.querySelectorAll('.wizard-step').forEach(s => {
|
||||
s.classList.remove('active');
|
||||
const stepNum = parseInt(s.dataset.step);
|
||||
if (stepNum < step) s.classList.add('completed');
|
||||
else s.classList.remove('completed');
|
||||
});
|
||||
document.querySelector(`.wizard-step[data-step="${step}"]`).classList.add('active');
|
||||
document.querySelectorAll('.wizard-content').forEach(c => c.classList.remove('active'));
|
||||
document.getElementById(`step-content-${step}`).classList.add('active');
|
||||
}
|
||||
document.querySelectorAll('.wizard-step').forEach(step => {
|
||||
step.addEventListener('click', () => goToStep(parseInt(step.dataset.step)));
|
||||
});
|
||||
document.getElementById('nav-avatar').addEventListener('click', () => {
|
||||
document.getElementById('user-dropdown').classList.toggle('active');
|
||||
});
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!e.target.closest('.dropdown')) document.getElementById('user-dropdown').classList.remove('active');
|
||||
});
|
||||
const el = {
|
||||
email: document.getElementById('settings-email'),
|
||||
avatar: document.getElementById('settings-avatar'),
|
||||
navAvatar: document.getElementById('nav-avatar'),
|
||||
plan: document.getElementById('settings-plan'),
|
||||
billingStatus: document.getElementById('settings-billing-status'),
|
||||
renews: document.getElementById('settings-renews'),
|
||||
status: document.getElementById('settings-status'),
|
||||
billingEmail: document.getElementById('billing-email'),
|
||||
billingCycle: document.getElementById('billing-cycle'),
|
||||
currency: document.getElementById('currency'),
|
||||
planSelect: document.getElementById('plan'),
|
||||
form: document.getElementById('settings-form'),
|
||||
statusLine: document.getElementById('settings-status-line'),
|
||||
cancel: document.getElementById('cancel-plan'),
|
||||
paymentMethodsList: document.getElementById('payment-methods-list'),
|
||||
invoicesList: document.getElementById('invoices-list'),
|
||||
};
|
||||
let csrfToken = '';
|
||||
let currentPlan = '';
|
||||
function showConfirmModal({ title, body, icon, onConfirm }) {
|
||||
const modal = document.getElementById('confirm-modal');
|
||||
document.getElementById('modal-title').textContent = title;
|
||||
document.getElementById('modal-body').textContent = body;
|
||||
const iconEl = document.getElementById('modal-icon');
|
||||
iconEl.className = `modal-icon ${icon || 'warning'}`;
|
||||
iconEl.innerHTML = icon === 'info' ? '<i class="fa-solid fa-circle-info"></i>' : '<i class="fa-solid fa-triangle-exclamation"></i>';
|
||||
modal.classList.add('active');
|
||||
const handleConfirm = () => { onConfirm(); closeModal(); };
|
||||
const closeModal = () => { modal.classList.remove('active'); document.getElementById('modal-confirm').removeEventListener('click', handleConfirm); document.getElementById('modal-cancel').removeEventListener('click', closeModal); };
|
||||
document.getElementById('modal-confirm').addEventListener('click', handleConfirm);
|
||||
document.getElementById('modal-cancel').addEventListener('click', closeModal);
|
||||
}
|
||||
function setStatus(msg, type = '') { if (el.statusLine) { el.statusLine.textContent = msg || ''; el.statusLine.className = `status ${type}`; } }
|
||||
function formatDate(iso) { if (!iso) return '-'; const date = new Date(iso); return isNaN(date.getTime()) ? '-' : date.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' }); }
|
||||
function setAvatar(email) { const initial = (email || '?').trim().charAt(0).toUpperCase() || '?'; el.avatar.textContent = initial; el.navAvatar.textContent = initial; }
|
||||
function renderAccount(account) {
|
||||
const email = account?.email || '';
|
||||
el.email.textContent = email || 'Unknown';
|
||||
setAvatar(email);
|
||||
el.plan.textContent = account?.plan || 'hobby';
|
||||
el.billingStatus.textContent = account?.billingStatus || 'active';
|
||||
el.renews.textContent = formatDate(account?.subscriptionRenewsAt);
|
||||
el.planSelect.value = account?.plan || 'hobby';
|
||||
el.billingEmail.value = account?.billingEmail || email || '';
|
||||
el.currency.value = account?.subscriptionCurrency || 'usd';
|
||||
el.status.textContent = account?.billingStatus === 'canceled' ? 'Canceled' : 'Active';
|
||||
currentPlan = account?.plan || 'hobby';
|
||||
}
|
||||
async function loadAccount() {
|
||||
try {
|
||||
const resp = await fetch('/api/account', { credentials: 'same-origin' });
|
||||
if (resp.status === 401) { window.location.href = '/login?next=/settings'; return; }
|
||||
const data = await resp.json().catch(() => ({}));
|
||||
renderAccount(data.account || {});
|
||||
} catch (err) { setStatus('Unable to load account.', 'error'); }
|
||||
}
|
||||
async function loadPlans() {
|
||||
try {
|
||||
const resp = await fetch('/api/account/plans', { credentials: 'same-origin' });
|
||||
const data = await resp.json().catch(() => ({}));
|
||||
const plans = Array.isArray(data.plans) ? data.plans : ['hobby', 'starter', 'business', 'enterprise'];
|
||||
el.planSelect.innerHTML = '';
|
||||
plans.forEach(plan => {
|
||||
const option = document.createElement('option');
|
||||
option.value = plan;
|
||||
option.textContent = plan === 'hobby' ? 'Hobby (free)' : plan === 'business' ? 'Professional' : plan.charAt(0).toUpperCase() + plan.slice(1);
|
||||
el.planSelect.appendChild(option);
|
||||
});
|
||||
if (data.defaultPlan) el.planSelect.value = data.defaultPlan;
|
||||
} catch (_) {
|
||||
el.planSelect.innerHTML = '<option value="hobby">Hobby (free)</option><option value="starter">Starter</option><option value="business">Professional</option><option value="enterprise">Enterprise</option>';
|
||||
}
|
||||
}
|
||||
async function saveAccount(event) {
|
||||
if (event) event.preventDefault();
|
||||
const payload = { plan: el.planSelect.value, billingCycle: el.billingCycle.value, currency: el.currency.value, billingEmail: el.billingEmail.value };
|
||||
showConfirmModal({ title: 'Save Changes', body: 'Update your billing settings?', icon: 'info', onConfirm: async () => {
|
||||
setStatus('Saving...');
|
||||
try {
|
||||
const resp = await fetch('/api/account', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrfToken }, credentials: 'same-origin', body: JSON.stringify(payload) });
|
||||
const data = await resp.json().catch(() => ({}));
|
||||
if (!resp.ok) throw new Error(data.error || 'Save failed');
|
||||
renderAccount(data.account || {});
|
||||
setStatus('Saved successfully', 'success');
|
||||
} catch (err) { setStatus(err.message, 'error'); }
|
||||
}});
|
||||
}
|
||||
async function loadCsrfToken() {
|
||||
const csrfResp = await fetch('/api/csrf', { credentials: 'same-origin' });
|
||||
if (csrfResp.ok) { const csrfData = await csrfResp.json().catch(() => ({})); csrfToken = csrfData.csrfToken || ''; }
|
||||
}
|
||||
function getCardIcon(brand) {
|
||||
const b = (brand || '').toLowerCase();
|
||||
if (b.includes('visa')) return '<i class="fa-brands fa-cc-visa" style="color:#1a1f71;"></i>';
|
||||
if (b.includes('mastercard')) return '<i class="fa-brands fa-cc-mastercard" style="color:#eb001b;"></i>';
|
||||
return '<i class="fa-regular fa-credit-card"></i>';
|
||||
}
|
||||
function renderPaymentMethods(methods) {
|
||||
if (!el.paymentMethodsList) return;
|
||||
if (!Array.isArray(methods) || methods.length === 0) {
|
||||
el.paymentMethodsList.innerHTML = '<div class="empty-state"><i class="fa-regular fa-credit-card"></i><p>No payment methods saved yet</p></div>';
|
||||
return;
|
||||
}
|
||||
el.paymentMethodsList.innerHTML = methods.map((m, i) => `
|
||||
<div class="payment-item ${i === 0 ? 'default' : ''}">
|
||||
<div class="payment-icon">${getCardIcon(m.brand)}</div>
|
||||
<div style="flex:1;"><div style="font-weight:700;">${m.brand || 'Card'} ${i === 0 ? '<span class="badge success">Default</span>' : ''}</div><div style="font-size:13px;color:var(--muted);">•••• ${m.last4 || '••••'}</div></div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
async function loadPaymentMethods() {
|
||||
try {
|
||||
const resp = await fetch('/api/account/payment-methods', { credentials: 'same-origin' });
|
||||
if (resp.status === 404 || resp.status === 401) { renderPaymentMethods([]); return; }
|
||||
const data = await resp.json().catch(() => ({}));
|
||||
renderPaymentMethods(data.paymentMethods || []);
|
||||
} catch (err) { renderPaymentMethods([]); }
|
||||
}
|
||||
function renderInvoices(invoices) {
|
||||
if (!el.invoicesList) return;
|
||||
if (!Array.isArray(invoices) || invoices.length === 0) {
|
||||
el.invoicesList.innerHTML = '<div class="empty-state"><i class="fa-solid fa-file-invoice"></i><p>No invoices yet</p></div>';
|
||||
return;
|
||||
}
|
||||
el.invoicesList.innerHTML = invoices.map(inv => {
|
||||
const date = new Date(inv.createdAt).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
|
||||
const amount = inv.amount / 100;
|
||||
return `<div class="invoice-item"><div><div style="font-weight:700;">${inv.invoiceNumber}</div><div style="font-size:13px;color:var(--muted);">${inv.description || ''} • ${date}</div></div><div class="invoice-amount">${inv.currency} ${amount.toFixed(2)}</div></div>`;
|
||||
}).join('');
|
||||
}
|
||||
async function loadInvoices() {
|
||||
try {
|
||||
const resp = await fetch('/api/account/invoices', { credentials: 'same-origin' });
|
||||
if (resp.status === 404 || resp.status === 401) { renderInvoices([]); return; }
|
||||
const data = await resp.json().catch(() => ({}));
|
||||
renderInvoices(data.invoices || []);
|
||||
} catch (err) { renderInvoices([]); }
|
||||
}
|
||||
document.getElementById('logout-link').addEventListener('click', async (e) => {
|
||||
e.preventDefault();
|
||||
showConfirmModal({ title: 'Logout', body: 'Are you sure?', icon: 'info', onConfirm: async () => {
|
||||
await fetch('/api/logout', { method: 'POST', credentials: 'same-origin' });
|
||||
window.location.href = '/login';
|
||||
}});
|
||||
});
|
||||
el.cancel.addEventListener('click', () => {
|
||||
showConfirmModal({ title: 'Cancel Subscription', body: 'Are you sure you want to cancel?', icon: 'warning', onConfirm: async () => {
|
||||
setStatus('Canceling...');
|
||||
try {
|
||||
const resp = await fetch('/api/subscription/cancel', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrfToken }, credentials: 'same-origin' });
|
||||
const data = await resp.json().catch(() => ({}));
|
||||
if (!resp.ok) throw new Error(data.error || 'Unable to cancel');
|
||||
renderAccount(data.account || {});
|
||||
setStatus('Subscription canceled', 'success');
|
||||
} catch (err) { setStatus(err.message, 'error'); }
|
||||
}});
|
||||
});
|
||||
el.form.addEventListener('submit', saveAccount);
|
||||
loadCsrfToken().then(() => { loadAccount(); loadPlans(); loadPaymentMethods(); loadInvoices(); });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user