update: lifetime discounts based on spent

apps/web/src/views/checkout.ejs

@@ -6,6 +6,10 @@
   const coins = it.coins || [];
   const invoice = it.invoice;
   const payApi = it.payApi || '';
+  const totalSpent = it.totalSpent || 0;
+  const lifetimeBase = 140;
+  const lifetimeDiscount = Math.min(totalSpent, lifetimeBase * 0.5);
+  const lifetimePrice = lifetimeBase - lifetimeDiscount;
 %>
 
 <style>
@@ -44,9 +48,18 @@
       </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">
+        <% if (lifetimeDiscount > 0) { %>
+        <span class="absolute top-3 right-3 text-[10px] font-semibold px-2 py-0.5 rounded-full bg-green-500/15 text-green-400 border border-green-500/20">Loyalty Discount</span>
+        <% } else { %>
         <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/70 uppercase tracking-wider font-mono mb-1">Lifetime</div>
-        <div class="text-2xl font-bold text-gray-100">$140</div>
+        <% if (lifetimeDiscount > 0) { %>
+        <div class="text-2xl font-bold text-gray-100">$<%= lifetimePrice.toFixed(0) %> <span class="text-sm font-normal text-gray-600 line-through">$<%= lifetimeBase %></span></div>
+        <div class="text-xs text-green-400/70 mt-1">You've paid us $<%= totalSpent.toFixed(0) %> — we've credited $<%= lifetimeDiscount.toFixed(0) %> toward lifetime</div>
+        <% } else { %>
+        <div class="text-2xl font-bold text-gray-100">$<%= lifetimeBase %></div>
+        <% } %>
         <div class="text-xs text-gray-500 mt-2">One-time, 200 monitors forever</div>
       </label>
     </div>