southseact-3d/shopify-ai-backup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restore to commit 74e578279624c6045ca440a3459ebfa1f8d54191

Browse Source
This commit is contained in:
southseact-3d
2026-02-07 20:32:41 +00:00
commit ed67b7741b
252 changed files with 99814 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
chat/public/affiliate-dashboard.html Normal file
View File

@@ -0,0 +1,187 @@
<!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>