From b014cbf98ae137d04f3951acf2dd4d220ce56c48 Mon Sep 17 00:00:00 2001
From: nate <nate@forehead-gate.com>
Date: Sun, 22 Mar 2026 06:04:06 +0400
Subject: [PATCH] update: plans

---
 apps/web/src/views/checkout.ejs | 67 +++++++++++++++------------------
 1 file changed, 31 insertions(+), 36 deletions(-)

diff --git a/apps/web/src/views/checkout.ejs b/apps/web/src/views/checkout.ejs
index 90e8df1..569aa14 100644
--- a/apps/web/src/views/checkout.ejs
+++ b/apps/web/src/views/checkout.ejs
@@ -11,13 +11,9 @@
 <style>
   /* Show pro options when pro is selected */
   #plan-pro:checked ~ #pro-options { display: block; }
-  /* Show months for pro (not lifetime) */
-  #plan-pro:checked ~ #months-section { display: block; }
-  /* Highlight selected plan */
+  /* Highlight selected plan type */
   #plan-pro:checked ~ .plan-labels label[for="plan-pro"] { 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 tier */
-  .tier-radio:checked + label { border-color: rgb(59 130 246 / 0.5); }
   /* Highlight selected coin */
   .coin-radio:checked + label { border-color: rgb(59 130 246); }
 </style>
@@ -32,9 +28,12 @@
   <!-- ─── Step 1: Plan & coin selection (form, works without JS) ─── -->
   <form action="/dashboard/checkout" method="POST" class="space-y-6">
 
-    <!-- Hidden radios for plan type (CSS uses :checked) -->
-    <input type="radio" name="planType" value="pro" id="plan-pro" class="hidden" checked>
-    <input type="radio" name="planType" value="lifetime" id="plan-lifetime" class="hidden">
+    <!-- Single hidden field submitted to server -->
+    <input type="hidden" name="plan" id="plan-value" value="pro">
+
+    <!-- Plan type selector (not submitted, drives UI) -->
+    <input type="radio" name="_planType" value="pro" id="plan-pro" class="hidden" checked>
+    <input type="radio" name="_planType" value="lifetime" id="plan-lifetime" class="hidden">
 
     <div class="plan-labels grid grid-cols-2 gap-4">
       <label for="plan-pro"
@@ -52,31 +51,26 @@
       </label>
     </div>
 
-    <!-- Pro tier selection (visible only when pro selected) -->
+    <!-- Pro tier + months (visible only when pro selected, via CSS) -->
     <div id="pro-options" class="hidden space-y-4">
-      <!-- Tier selector -->
       <div>
         <label class="block text-sm text-gray-400 mb-2">Tier</label>
-        <div class="grid grid-cols-3 gap-2">
-          <input type="radio" name="plan" value="pro" id="tier-1x" class="hidden tier-radio" checked>
-          <label for="tier-1x" class="cursor-pointer text-center bg-surface border-2 border-border-subtle hover:border-blue-500/40 rounded-lg py-2.5 transition-colors">
+        <div id="tier-selector" class="grid grid-cols-3 gap-2">
+          <button type="button" class="tier-btn text-center bg-surface border-2 border-blue-500/50 rounded-lg py-2.5 transition-colors" data-plan="pro">
             <div class="text-sm font-semibold text-gray-200">1x</div>
             <div class="text-xs text-gray-500">200 monitors · 10s · $12/mo</div>
-          </label>
-          <input type="radio" name="plan" value="pro2x" id="tier-2x" class="hidden tier-radio">
-          <label for="tier-2x" class="cursor-pointer text-center bg-surface border-2 border-border-subtle hover:border-blue-500/40 rounded-lg py-2.5 transition-colors">
+          </button>
+          <button type="button" class="tier-btn text-center bg-surface border-2 border-border-subtle hover:border-blue-500/40 rounded-lg py-2.5 transition-colors" data-plan="pro2x">
             <div class="text-sm font-semibold text-gray-200">2x</div>
             <div class="text-xs text-gray-500">400 monitors · 5s · $24/mo</div>
-          </label>
-          <input type="radio" name="plan" value="pro4x" id="tier-4x" class="hidden tier-radio">
-          <label for="tier-4x" class="cursor-pointer text-center bg-surface border-2 border-border-subtle hover:border-blue-500/40 rounded-lg py-2.5 transition-colors">
+          </button>
+          <button type="button" class="tier-btn text-center bg-surface border-2 border-border-subtle hover:border-blue-500/40 rounded-lg py-2.5 transition-colors" data-plan="pro4x">
             <div class="text-sm font-semibold text-gray-200">4x</div>
             <div class="text-xs text-gray-500">800 monitors · 2s · $48/mo</div>
-          </label>
+          </button>
         </div>
       </div>
 
-      <!-- Months -->
       <div>
         <label class="block text-sm text-gray-400 mb-2">How many months?</label>
         <select id="months-select" name="months" class="input-base px-4 py-2.5 text-gray-100">
@@ -87,9 +81,6 @@
       </div>
     </div>
 
-    <!-- Hidden plan field for lifetime (JS sets this) -->
-    <input type="hidden" name="plan" id="plan-value" value="pro">
-
     <!-- Coin selection -->
     <div>
       <label class="block text-sm text-gray-400 mb-2">Pay with</label>
@@ -229,24 +220,28 @@
   <script>
     const multipliers = { pro: 1, pro2x: 2, pro4x: 4 };
     const planValue = document.getElementById('plan-value');
+    let selectedTier = 'pro';
 
     // Plan type toggle (pro vs lifetime)
-    document.querySelectorAll('input[name="planType"]').forEach(radio => {
+    document.querySelectorAll('input[name="_planType"]').forEach(radio => {
       radio.addEventListener('change', () => {
-        if (radio.value === 'lifetime') {
-          planValue.value = 'lifetime';
-        } else {
-          const tier = document.querySelector('.tier-radio:checked');
-          planValue.value = tier ? tier.value : 'pro';
-        }
+        planValue.value = radio.value === 'lifetime' ? 'lifetime' : selectedTier;
       });
     });
 
-    // Tier toggle (1x/2x/4x)
-    document.querySelectorAll('.tier-radio').forEach(radio => {
-      radio.addEventListener('change', () => {
-        planValue.value = radio.value;
-        updateMonthPricing(radio.value);
+    // Tier buttons
+    document.querySelectorAll('.tier-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        selectedTier = btn.dataset.plan;
+        planValue.value = selectedTier;
+        // Update active style
+        document.querySelectorAll('.tier-btn').forEach(b => {
+          b.classList.remove('border-blue-500/50');
+          b.classList.add('border-border-subtle');
+        });
+        btn.classList.remove('border-border-subtle');
+        btn.classList.add('border-blue-500/50');
+        updateMonthPricing(selectedTier);
       });
     });