This commit is contained in:
oliver
2026-06-22 18:17:22 -03:00
parent 365c69871e
commit 07fc9f9050
3 changed files with 302 additions and 148 deletions
+83
View File
@@ -24,6 +24,7 @@ const CREDITS_URL = `${API_BASE}/payment/credits`; // hidden form POST → 302 S
const INVOICES_URL = `${API_BASE}/invoices`; // GET ?email=
const INVOICE_EMAIL_URL = `${API_BASE}/user`; // POST {email, invoice_email}
const PORTAL_URL = `${API_BASE}/account/portal`; // GET ?email= → { url }
const AFFILIATE_LINKS_URL = `${API_BASE}/affiliate/link`; // GET → [{areas:[{area,text,link}]}]
const CONTRACT_EXTEND_URL = "https://derez.ai"; // ← replace with Stripe payment link
const CONTRACT_CANCEL_URL = "https://derez.ai"; // ← replace with Stripe cancellation link
@@ -1116,6 +1117,17 @@ function closeUserPanel() {
if (codeEl) codeEl.textContent = "—";
const copyBtn = document.getElementById("acct-affiliate-copy-btn");
if (copyBtn) copyBtn.style.display = "none";
// reset tab to settings
const settingsTab = document.getElementById("acct-tab-settings");
const affiliateTab = document.getElementById("acct-tab-affiliate");
const settingsPane = document.getElementById("acct-pane-settings");
const affiliatePane = document.getElementById("acct-pane-affiliate");
if (settingsTab && affiliateTab && settingsPane && affiliatePane) {
affiliateTab.classList.remove("active");
settingsTab.classList.add("active");
affiliatePane.style.display = "none";
settingsPane.style.display = "flex";
}
}
function toggleAccountPwSave(value) {
@@ -1348,6 +1360,77 @@ function exportInvoicesCSV() {
URL.revokeObjectURL(url);
}
/* ─── Account Panel Tab Switching ─────────────────────────────── */
function switchAccountTab(tab) {
const settingsTab = document.getElementById("acct-tab-settings");
const affiliateTab = document.getElementById("acct-tab-affiliate");
const settingsPane = document.getElementById("acct-pane-settings");
const affiliatePane = document.getElementById("acct-pane-affiliate");
if (!settingsTab || !affiliateTab || !settingsPane || !affiliatePane) return;
if (tab === "affiliate") {
settingsTab.classList.remove("active");
affiliateTab.classList.add("active");
settingsPane.style.display = "none";
affiliatePane.style.display = "flex";
loadAffiliateLinks();
} else {
affiliateTab.classList.remove("active");
settingsTab.classList.add("active");
affiliatePane.style.display = "none";
settingsPane.style.display = "flex";
}
}
async function loadAffiliateLinks() {
const body = document.getElementById("affiliate-links-body");
if (!body) return;
body.innerHTML = '<div class="loading-row"><div class="spinner"></div></div>';
try {
const res = await fetch(AFFILIATE_LINKS_URL);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();
dbg("\u2190 Affiliate links", data);
renderAffiliateLinks(data);
} catch (err) {
dbg("\u2190 Affiliate links error", err.message);
body.innerHTML =
'<p class="text-muted" style="font-size:13px;padding:4px 0;">Could not load affiliate links.</p>';
}
}
function renderAffiliateLinks(data) {
const body = document.getElementById("affiliate-links-body");
if (!body) return;
const rows = Array.isArray(data) ? data : data && data.data ? data.data : [];
const areas =
rows.length && Array.isArray(rows[0].areas) ? rows[0].areas : [];
const filtered = areas.filter((a) => a.text && a.link);
if (!filtered.length) {
body.innerHTML =
'<p class="text-muted" style="font-size:13px;padding:4px 0;">No affiliate links available yet.</p>';
return;
}
body.innerHTML = `
<div class="invoice-list">
<div class="invoice-row invoice-row--head" style="grid-template-columns:1fr 2fr 2fr;">
<span>Area</span>
<span>Text</span>
<span>Link</span>
</div>
${filtered
.map(
(a) => `
<div class="invoice-row" style="grid-template-columns:1fr 2fr 2fr;">
<span class="invoice-uuid">${escHtml(a.area || "—")}</span>
<span class="invoice-product">${escHtml(a.text || "")}</span>
<span class="invoice-dl">${a.link ? `<a href="${escAttr(a.link)}" target="_blank" rel="noopener" class="invoice-dl-link">Open &rarr;</a>` : `<span class="invoice-dl-link invoice-dl-link--disabled">—</span>`}</span>
</div>`,
)
.join("")}
</div>`;
}
/* ═══════════════════════════════════════════════════════════════
RESTART
═══════════════════════════════════════════════════════════════ */
+74 -8
View File
@@ -812,7 +812,27 @@
>
<div class="modal account-modal">
<div class="modal-header">
<span class="modal-title">Account Settings</span>
<div
class="auth-switch"
style="position: static; margin: 0"
>
<button
type="button"
id="acct-tab-settings"
class="auth-switch-btn active"
onclick="switchAccountTab('settings')"
>
Account Settings
</button>
<button
type="button"
id="acct-tab-affiliate"
class="auth-switch-btn"
onclick="switchAccountTab('affiliate')"
>
Affiliate Settings
</button>
</div>
<button
type="button"
class="modal-close-btn"
@@ -822,11 +842,19 @@
</button>
</div>
<div class="account-modal-body">
<!-- ── Left: settings ──────────────────────── -->
<!-- ── Pane: Settings ──────────────────────── -->
<div
id="acct-pane-settings"
class="account-pane"
style="display: flex"
>
<div class="account-col account-col--settings">
<div class="acct-section">
<div class="acct-field-label">Email</div>
<div class="acct-field-val" id="acct-email-display">
<div
class="acct-field-val"
id="acct-email-display"
>
</div>
</div>
@@ -866,11 +894,16 @@
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="20 6 9 17 4 12" />
<polyline
points="20 6 9 17 4 12"
/>
</svg>
</button>
</div>
<p class="ssh-hint" style="margin-bottom: 0">
<p
class="ssh-hint"
style="margin-bottom: 0"
>
Min. 8 characters.
</p>
</div>
@@ -886,7 +919,9 @@
placeholder="invoices@example.com"
autocomplete="email"
oninput="
toggleInvoiceEmailSave(this.value)
toggleInvoiceEmailSave(
this.value,
)
"
onkeydown="
if (event.key === 'Enter')
@@ -911,7 +946,9 @@
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="20 6 9 17 4 12" />
<polyline
points="20 6 9 17 4 12"
/>
</svg>
</button>
</div>
@@ -938,7 +975,9 @@
</div>
<div class="acct-divider"></div>
<div class="acct-section">
<div class="acct-field-label">Affiliate Code</div>
<div class="acct-field-label">
Affiliate Code
</div>
<div class="acct-affiliate-row">
<span
class="acct-affiliate-code"
@@ -983,6 +1022,33 @@
<div id="invoices-body"></div>
</div>
</div>
<!-- ── Pane: Affiliate ─────────────────────── -->
<div
id="acct-pane-affiliate"
class="account-pane"
style="display: none"
>
<div
class="account-col account-col--invoices"
style="flex: 1"
>
<div class="acct-invoices-toolbar">
<div class="acct-invoices-title">
Affiliate Links
</div>
</div>
<div id="affiliate-links-body">
<p
class="text-muted"
style="font-size: 13px; padding: 4px 0"
>
Switch to this tab to see available
affiliate links.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
+5
View File
@@ -1475,6 +1475,11 @@ body::after {
min-height: 320px;
}
.account-pane {
display: flex;
width: 100%;
}
.account-col {
display: flex;
flex-direction: column;