ico
/
pingql
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add: 4x pro plan

This commit is contained in:
nate 2026-03-22 05:33:39 +04:00
parent 014976027b
commit 1049677f19
7 changed files with 86 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/api/src/utils/plans.ts
View File

@ -1,4 +1,4 @@
export type Plan = "free" | "pro" | "lifetime";
export type Plan = "free" | "pro" | "pro4x" | "lifetime";
export interface PlanLimits {
maxMonitors: number;
@ -17,6 +17,11 @@ const PLANS: Record<Plan, PlanLimits> = {
minIntervalS: 2,
maxRegions: 99,
},
pro4x: {
maxMonitors: 800,
minIntervalS: 2,
maxRegions: 99,
},
lifetime: {
maxMonitors: 200,
minIntervalS: 2,

5
apps/pay/src/monitor.ts
View File

@ -219,10 +219,11 @@ async function applyPlan(payment: any) {
const [acc] = await sql`SELECT plan, plan_expires_at FROM accounts WHERE id = ${payment.account_id}`;
const now = new Date();
const expiry = acc.plan_expires_at ? new Date(acc.plan_expires_at) : null;
const base = (acc.plan === "pro" && expiry && expiry > now) ? expiry : now;
const samePlan = acc.plan === payment.plan && expiry && expiry > now;
const base = samePlan ? expiry : now;
const newExpiry = new Date(base);
newExpiry.setMonth(newExpiry.getMonth() + payment.months);
await sql`UPDATE accounts SET plan = 'pro', plan_expires_at = ${newExpiry.toISOString()} WHERE id = ${payment.account_id}`;
await sql`UPDATE accounts SET plan = ${payment.plan}, plan_expires_at = ${newExpiry.toISOString()} WHERE id = ${payment.account_id}`;
}
console.log(`Payment ${payment.id} activated: ${payment.plan} for account ${payment.account_id}`);
}

4
apps/pay/src/plans.ts
View File

@ -3,6 +3,10 @@ export const PLANS = {
label: "Pro",
monthlyUsd: 12,
},
pro4x: {
label: "Pro 4x",
monthlyUsd: 48,
},
lifetime: {
label: "Lifetime",
priceUsd: 140,

3
apps/pay/src/routes.ts
View File

@ -72,7 +72,8 @@ export const routes = new Elysia()
if (!available.includes(coin)) { set.status = 400; return { error: `${coin} is temporarily unavailable` }; }
// Calculate amount
const amountUsd = plan === "lifetime" ? PLANS.lifetime.priceUsd : PLANS.pro.monthlyUsd * (months ?? 1);
const planPricing = plan === "lifetime" ? null : (plan === "pro4x" ? PLANS.pro4x : PLANS.pro);
const amountUsd = plan === "lifetime" ? PLANS.lifetime.priceUsd : planPricing!.monthlyUsd * (months ?? 1);
const rates = await getExchangeRates();
const rate = rates[coin];
if (!rate) { set.status = 500; return { error: "Could not fetch exchange rate" }; }

34
apps/web/src/views/checkout.ejs
View File

@ -9,10 +9,12 @@
%>
<style>
/* Show months section only when pro is selected */
/* Show months section when pro or pro4x is selected */
#plan-pro:checked ~ #months-section { display: block; }
#plan-pro4x:checked ~ #months-section { display: block; }
/* Highlight selected plan */
#plan-pro:checked ~ .plan-labels label[for="plan-pro"] { border-color: rgb(59 130 246 / 0.5); }
#plan-pro4x:checked ~ .plan-labels label[for="plan-pro4x"] { border-color: rgb(59 130 246 / 0.5); }
#plan-lifetime:checked ~ .plan-labels label[for="plan-lifetime"] { border-color: rgb(234 179 8 / 0.5); }
/* Highlight selected coin */
.coin-radio:checked + label { border-color: rgb(59 130 246); }
@ -30,15 +32,22 @@
<!-- Hidden radios for plan (CSS uses :checked) -->
<input type="radio" name="plan" value="pro" id="plan-pro" class="hidden peer/pro" checked>
<input type="radio" name="plan" value="pro4x" id="plan-pro4x" class="hidden peer/pro4x">
<input type="radio" name="plan" value="lifetime" id="plan-lifetime" class="hidden peer/lifetime">
<div class="plan-labels grid grid-cols-2 gap-4">
<div class="plan-labels grid grid-cols-3 gap-4">
<label for="plan-pro"
class="cursor-pointer text-left bg-surface border-2 border-border-subtle hover:border-blue-500/40 rounded-xl p-5 transition-colors">
<div class="text-xs text-gray-500 uppercase tracking-wider font-mono mb-1">Pro</div>
<div class="text-2xl font-bold text-gray-100">$12<span class="text-sm font-normal text-gray-500">/mo</span></div>
<div class="text-xs text-gray-500 mt-2">200 monitors, 2s intervals</div>
</label>
<label for="plan-pro4x"
class="cursor-pointer text-left bg-surface border-2 border-border-subtle hover:border-blue-500/40 rounded-xl p-5 transition-colors">
<div class="text-xs text-gray-500 uppercase tracking-wider font-mono mb-1">Pro 4x</div>
<div class="text-2xl font-bold text-gray-100">$48<span class="text-sm font-normal text-gray-500">/mo</span></div>
<div class="text-xs text-gray-500 mt-2">800 monitors, 2s intervals</div>
</label>
<label for="plan-lifetime"
class="cursor-pointer text-left bg-surface border-2 border-border-subtle hover:border-yellow-500/40 rounded-xl p-5 transition-colors relative">
<span class="absolute top-3 right-3 text-[10px] font-semibold px-2 py-0.5 rounded-full bg-yellow-500/15 text-yellow-500 border border-yellow-500/20">Launch Deal</span>
@ -48,12 +57,12 @@
</label>
</div>
<!-- Months (visible only when pro selected, via CSS) -->
<!-- Months (visible only when pro/pro4x selected, via CSS) -->
<div id="months-section" class="hidden">
<label class="block text-sm text-gray-400 mb-2">How many months?</label>
<select name="months" class="input-base px-4 py-2.5 text-gray-100">
<select id="months-select" name="months" class="input-base px-4 py-2.5 text-gray-100">
<% for (let i = 1; i <= 12; i++) { %>
<option value="<%= i %>"><%= i %> month<%= i > 1 ? 's' : '' %> — $<%= i * 12 %></option>
<option value="<%= i %>" data-pro="$<%= i * 12 %>" data-pro4x="$<%= i * 48 %>"><%= i %> month<%= i > 1 ? 's' : '' %> — $<%= i * 12 %></option>
<% } %>
</select>
</div>
@ -194,4 +203,19 @@
</main>
<script>
// Update month pricing when switching between pro and pro4x
document.querySelectorAll('input[name="plan"]').forEach(radio => {
radio.addEventListener('change', () => {
const sel = document.getElementById('months-select');
if (!sel) return;
const plan = radio.value;
for (const opt of sel.options) {
const price = opt.dataset[plan] || opt.dataset.pro;
if (price) opt.textContent = opt.value + ' month' + (opt.value > 1 ? 's' : '') + ' — ' + price;
}
});
});
</script>
<%~ include('./partials/foot') %>

57
apps/web/src/views/landing.ejs
View File

@ -482,13 +482,13 @@
<h2 class="text-3xl sm:text-4xl font-bold tracking-tight mb-4">Simple pricing</h2>
<p class="text-gray-400 text-lg mb-12">Start for free. No credit card required.</p>
<div class="grid sm:grid-cols-3 gap-6 max-w-4xl mx-auto">
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-5 max-w-5xl mx-auto">
<!-- Free -->
<div class="pricing-free rounded-xl p-8 text-left">
<div class="pricing-free rounded-xl p-7 text-left">
<div class="text-xs text-gray-500 uppercase tracking-wider font-mono mb-2">Free</div>
<div class="text-4xl font-bold mb-1">$0</div>
<div class="text-sm text-gray-500 mb-6">forever</div>
<ul class="space-y-3 text-sm text-gray-400">
<div class="text-3xl font-bold mb-1">$0</div>
<div class="text-sm text-gray-500 mb-5">forever</div>
<ul class="space-y-2.5 text-sm text-gray-400">
<li class="flex items-center gap-2">
<svg class="w-4 h-4 text-green-400 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
10 monitors
@ -499,21 +499,17 @@
</li>
<li class="flex items-center gap-2">
<svg class="w-4 h-4 text-green-400 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
Full query language
</li>
<li class="flex items-center gap-2">
<svg class="w-4 h-4 text-green-400 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
Single region monitors
Single region
</li>
</ul>
</div>
<!-- Pro -->
<div class="pricing-pro rounded-xl p-8 text-left relative">
<div class="pricing-pro rounded-xl p-7 text-left">
<div class="text-xs text-blue-400 uppercase tracking-wider font-mono mb-2">Pro</div>
<div class="text-4xl font-bold mb-1">$12</div>
<div class="text-sm text-gray-500 mb-6">per month</div>
<ul class="space-y-3 text-sm text-gray-400">
<div class="text-3xl font-bold mb-1">$12</div>
<div class="text-sm text-gray-500 mb-5">per month</div>
<ul class="space-y-2.5 text-sm text-gray-400">
<li class="flex items-center gap-2">
<svg class="w-4 h-4 text-blue-400 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
200 monitors
@ -524,25 +520,46 @@
</li>
<li class="flex items-center gap-2">
<svg class="w-4 h-4 text-blue-400 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
Multi-region monitors
Multi-region
</li>
</ul>
</div>
<!-- Pro 4x -->
<div class="pricing-pro rounded-xl p-7 text-left">
<div class="text-xs text-blue-400 uppercase tracking-wider font-mono mb-2">Pro 4x</div>
<div class="text-3xl font-bold mb-1">$48</div>
<div class="text-sm text-gray-500 mb-5">per month</div>
<ul class="space-y-2.5 text-sm text-gray-400">
<li class="flex items-center gap-2">
<svg class="w-4 h-4 text-blue-400 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
800 monitors
</li>
<li class="flex items-center gap-2">
<svg class="w-4 h-4 text-blue-400 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
2s check interval
</li>
<li class="flex items-center gap-2">
<svg class="w-4 h-4 text-blue-400 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
Multi-region
</li>
</ul>
</div>
<!-- Lifetime -->
<div class="pricing-lifetime rounded-xl p-8 text-left relative">
<div class="pricing-lifetime rounded-xl p-7 text-left relative">
<span class="absolute top-3 right-3 text-[10px] font-semibold px-2 py-0.5 rounded-full bg-yellow-500/15 text-yellow-500 border border-yellow-500/20">Launch Deal</span>
<div class="text-xs text-yellow-500 uppercase tracking-wider font-mono mb-2">Lifetime</div>
<div class="text-4xl font-bold mb-1">$140</div>
<div class="text-sm text-gray-500 mb-6">one-time</div>
<ul class="space-y-3 text-sm text-gray-400">
<div class="text-3xl font-bold mb-1">$140</div>
<div class="text-sm text-gray-500 mb-5">one-time</div>
<ul class="space-y-2.5 text-sm text-gray-400">
<li class="flex items-center gap-2">
<svg class="w-4 h-4 text-yellow-500 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
Everything in Pro
</li>
<li class="flex items-center gap-2">
<svg class="w-4 h-4 text-yellow-500 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
Pay once, use forever
Pay once, forever
</li>
<li class="flex items-center gap-2">
<svg class="w-4 h-4 text-yellow-500 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>

10
apps/web/src/views/settings.ejs
View File

@ -5,8 +5,8 @@
const hasEmail = !!it.account.email_hash;
const createdDate = new Date(it.account.created_at).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
const plan = it.account.plan || 'free';
const planLabel = { free: 'Free', pro: 'Pro', lifetime: 'Lifetime' }[plan] || plan;
const limits = { free: { monitors: 10, interval: '30s', regions: 1 }, pro: { monitors: 200, interval: '2s', regions: 'All' }, lifetime: { monitors: 200, interval: '2s', regions: 'All' } }[plan] || { monitors: 10, interval: '30s', regions: 1 };
const planLabel = { free: 'Free', pro: 'Pro', pro4x: 'Pro 4x', lifetime: 'Lifetime' }[plan] || plan;
const limits = { free: { monitors: 10, interval: '30s', regions: 1 }, pro: { monitors: 200, interval: '2s', regions: 'All' }, pro4x: { monitors: 800, interval: '2s', regions: 'All' }, lifetime: { monitors: 200, interval: '2s', regions: 'All' } }[plan] || { monitors: 10, interval: '30s', regions: 1 };
%>
<main class="max-w-3xl mx-auto px-8 py-10 space-y-8">
@ -19,8 +19,8 @@
<h2 class="text-sm font-semibold text-gray-300">Plan</h2>
<% if (plan === 'free') { %>
<span class="text-xs font-medium px-2.5 py-1 rounded-full bg-gray-800/50 border border-border-subtle text-gray-400">Free</span>
<% } else if (plan === 'pro') { %>
<span class="text-xs font-medium px-2.5 py-1 rounded-full bg-gradient-to-r from-blue-600/20 to-blue-500/10 border border-blue-500/30 text-blue-400">Pro</span>
<% } else if (plan === 'pro' || plan === 'pro4x') { %>
<span class="text-xs font-medium px-2.5 py-1 rounded-full bg-gradient-to-r from-blue-600/20 to-blue-500/10 border border-blue-500/30 text-blue-400"><%= planLabel %></span>
<% } else if (plan === 'lifetime') { %>
<span class="text-xs font-medium px-2.5 py-1 rounded-full bg-gradient-to-r from-yellow-600/20 to-yellow-500/10 border border-yellow-500/30 text-yellow-400">Lifetime</span>
<% } %>
@ -43,7 +43,7 @@
<div class="mt-4 pt-4 border-t divider">
<a href="/dashboard/checkout" class="btn-primary inline-flex items-center gap-2 px-4 py-2 text-sm">Upgrade to Pro</a>
</div>
<% } else if (plan === 'pro' && it.account.plan_expires_at) { %>
<% } else if ((plan === 'pro' || plan === 'pro4x') && it.account.plan_expires_at) { %>
<div class="mt-4 pt-4 border-t divider text-xs text-gray-500">
Pro plan expires <%= new Date(it.account.plan_expires_at).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }) %>.
<a href="/dashboard/checkout" class="text-blue-400 hover:text-blue-300 ml-1">Extend or upgrade to Lifetime</a>