188 lines
8.4 KiB
HTML
188 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Affiliate Dashboard | Plugin Compass</title>
|
|
<link rel="icon" type="image/png" href="/assets/Plugin.png">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
<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;600&display=swap" rel="stylesheet">
|
|
<script>
|
|
tailwind.config = { theme: { extend: { fontFamily: { sans: ['Inter', 'sans-serif'] } } } };
|
|
</script>
|
|
|
|
<!-- PostHog Analytics -->
|
|
<script src="/posthog.js"></script>
|
|
</head>
|
|
<body class="min-h-screen bg-amber-50 text-gray-900">
|
|
<nav class="sticky top-0 z-30 bg-amber-50/95 backdrop-blur border-b border-amber-200">
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 h-14 flex items-center justify-between">
|
|
<a href="/" class="flex items-center gap-2 font-semibold">
|
|
<img src="/assets/Plugin.png" alt="Plugin Compass" class="w-8 h-8 rounded-lg">
|
|
<span>Plugin<span class="text-green-700">Compass</span></span>
|
|
</a>
|
|
<div class="flex items-center gap-3 text-sm">
|
|
<a href="/affiliate" class="text-gray-700 hover:text-gray-900 hidden sm:inline">Showcase</a>
|
|
<button id="logout" class="px-3 py-2 rounded-lg border border-gray-300 hover:bg-white">Logout</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
|
|
<header class="mb-8">
|
|
<p class="text-xs font-semibold uppercase text-green-700 mb-1">Affiliate dashboard</p>
|
|
<h1 class="text-3xl font-bold">Earnings & tracking links</h1>
|
|
<p class="text-gray-600">Create campaign links and monitor the 7.5% commissions attributed to you.</p>
|
|
</header>
|
|
|
|
<section class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
|
<div class="bg-white border border-amber-200 rounded-2xl p-6 shadow-sm">
|
|
<p class="text-sm text-gray-600">Total earnings</p>
|
|
<div class="text-3xl font-bold mt-2" id="total-earnings">$0.00</div>
|
|
<p class="text-xs text-gray-500 mt-1">7.5% of Business & Enterprise billings</p>
|
|
<button id="request-withdrawal" class="mt-3 w-full px-4 py-2 rounded-lg bg-green-700 text-white text-sm font-semibold hover:bg-green-600">Request Withdrawal</button>
|
|
</div>
|
|
<div class="bg-white border border-amber-200 rounded-2xl p-6 shadow-sm md:col-span-2">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div>
|
|
<p class="text-sm text-gray-600">Primary tracking link</p>
|
|
<p class="font-semibold text-gray-900" id="primary-link">—</p>
|
|
</div>
|
|
<button id="copy-link" class="px-3 py-2 rounded-lg bg-green-700 text-white text-sm hover:bg-green-600">Copy</button>
|
|
</div>
|
|
<p class="text-xs text-gray-500">Share this on your pricing pages, emails, or social posts.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="bg-white border border-amber-200 rounded-2xl p-6 shadow-sm mb-8">
|
|
<div class="flex flex-wrap items-center justify-between gap-3 mb-4">
|
|
<div>
|
|
<h2 class="text-lg font-semibold">Tracking links</h2>
|
|
<p class="text-sm text-gray-600">Create unique links for campaigns and channels.</p>
|
|
</div>
|
|
<button id="new-link" class="px-4 py-2 rounded-lg bg-green-700 text-white text-sm font-semibold hover:bg-green-600">Create link</button>
|
|
</div>
|
|
<div id="links" class="space-y-3 text-sm text-gray-800"></div>
|
|
</section>
|
|
|
|
<section class="bg-white border border-amber-200 rounded-2xl p-6 shadow-sm">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<h2 class="text-lg font-semibold">Recent earnings</h2>
|
|
<a href="/affiliate-transactions" class="text-xs text-green-700 hover:underline font-semibold">View all transactions</a>
|
|
</div>
|
|
<div id="earnings" class="space-y-3 text-sm text-gray-800"></div>
|
|
</section>
|
|
</main>
|
|
|
|
<script>
|
|
const linksEl = document.getElementById('links');
|
|
const earningsEl = document.getElementById('earnings');
|
|
const primaryLinkEl = document.getElementById('primary-link');
|
|
const totalEl = document.getElementById('total-earnings');
|
|
const copyBtn = document.getElementById('copy-link');
|
|
const newLinkBtn = document.getElementById('new-link');
|
|
const logoutBtn = document.getElementById('logout');
|
|
let sampleLink = '';
|
|
|
|
async function loadAffiliate() {
|
|
const res = await fetch('/api/affiliates/me');
|
|
if (res.status === 401) {
|
|
window.location.href = '/affiliate-login';
|
|
return;
|
|
}
|
|
const json = await res.json().catch(() => ({}));
|
|
const affiliate = json.affiliate || {};
|
|
sampleLink = json.sampleLink || '';
|
|
primaryLinkEl.textContent = sampleLink || '—';
|
|
totalEl.textContent = `$${Number(affiliate?.earnings?.total || 0).toFixed(2)}`;
|
|
renderLinks(affiliate.trackingLinks || []);
|
|
renderEarnings((affiliate.earnings && affiliate.earnings.records) || []);
|
|
}
|
|
|
|
function renderLinks(links) {
|
|
if (!links.length) {
|
|
linksEl.innerHTML = '<p class="text-gray-500 text-sm">No links yet. Create your first one.</p>';
|
|
return;
|
|
}
|
|
const origin = window.location.origin;
|
|
linksEl.innerHTML = links.map((l) => {
|
|
const path = l.targetPath || '/pricing';
|
|
const url = `${origin}${path}${path.includes('?') ? '&' : '?'}aff=${l.code}`;
|
|
return `<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-2 border border-amber-200 rounded-xl p-3">
|
|
<div>
|
|
<p class="font-semibold">${l.label || 'Tracking link'}</p>
|
|
<p class="text-gray-600">${url}</p>
|
|
</div>
|
|
<button class="px-3 py-2 rounded-lg border border-gray-300 text-sm hover:bg-amber-50" data-copy="${url}">Copy</button>
|
|
</div>`;
|
|
}).join('');
|
|
linksEl.querySelectorAll('button[data-copy]').forEach((btn) => {
|
|
btn.addEventListener('click', () => {
|
|
navigator.clipboard.writeText(btn.dataset.copy);
|
|
btn.textContent = 'Copied';
|
|
setTimeout(() => (btn.textContent = 'Copy'), 1200);
|
|
});
|
|
});
|
|
}
|
|
|
|
function renderEarnings(records) {
|
|
if (!records.length) {
|
|
earningsEl.innerHTML = '<p class="text-gray-500 text-sm">No earnings yet. Share your links to start earning 7.5%.</p>';
|
|
return;
|
|
}
|
|
earningsEl.innerHTML = records.slice().reverse().map((r) => `
|
|
<div class="flex items-center justify-between border border-amber-200 rounded-xl px-3 py-2">
|
|
<div>
|
|
<p class="font-semibold capitalize">${r.plan} plan</p>
|
|
<p class="text-gray-600 text-xs">User ${r.userId || ''}</p>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="font-bold">$${Number(r.amount || 0).toFixed(2)}</p>
|
|
<p class="text-gray-500 text-xs">${new Date(r.createdAt).toLocaleDateString()}</p>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
copyBtn.addEventListener('click', () => {
|
|
if (!sampleLink) return;
|
|
navigator.clipboard.writeText(sampleLink);
|
|
copyBtn.textContent = 'Copied';
|
|
setTimeout(() => (copyBtn.textContent = 'Copy'), 1200);
|
|
});
|
|
|
|
newLinkBtn.addEventListener('click', async () => {
|
|
const label = prompt('Label for this link (campaign, channel, etc.)') || 'New link';
|
|
const targetPath = prompt('Target path (e.g. /pricing, /features, /)', '/pricing') || '/pricing';
|
|
const res = await fetch('/api/affiliates/links', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ label, targetPath })
|
|
});
|
|
const json = await res.json().catch(() => ({}));
|
|
if (res.ok) {
|
|
renderLinks(json.links || []);
|
|
} else {
|
|
alert(json.error || 'Unable to create link');
|
|
}
|
|
});
|
|
|
|
const withdrawalBtn = document.getElementById('request-withdrawal');
|
|
withdrawalBtn.addEventListener('click', () => {
|
|
window.location.href = '/affiliate-withdrawal';
|
|
});
|
|
|
|
logoutBtn.addEventListener('click', async () => {
|
|
await fetch('/api/affiliates/logout', { method: 'POST' });
|
|
localStorage.removeItem('plugin_compass_onboarding_completed');
|
|
window.location.href = '/affiliate-login';
|
|
});
|
|
|
|
loadAffiliate();
|
|
</script>
|
|
</body>
|
|
</html>
|