From cd0d3f7167bc55b18451a93a0b057f268f9fde61 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sat, 18 Apr 2026 17:59:10 +0100
Subject: [PATCH] =?UTF-8?q?feat(join):=20cadence=20selector=20with=20annua?=
 =?UTF-8?q?l=20pricing=20(monthly=C3=9710)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Radio-pair cadence selector (Monthly / Annual) added to the join form,
reusing the existing .circle-radio styling. contributionItems computed
reactively; all tier labels and the left-column price list update on
toggle. cadence submitted with the subscription payload. payment-setup
hardcoded to monthly (annual upgrades go through /join).
---
 app/pages/join.vue                 | 73 ++++++++++++++++++++++++------
 app/pages/member/payment-setup.vue |  3 +-
 2 files changed, 61 insertions(+), 15 deletions(-)

diff --git a/app/pages/join.vue b/app/pages/join.vue
index fc1ae21..80bd80f 100644
--- a/app/pages/join.vue
+++ b/app/pages/join.vue
@@ -116,19 +116,19 @@
         <!-- Left: Monthly Contribution -->
         <div class="join-col">
           <div class="section-label" style="margin-bottom: 12px">
-            Monthly Contribution
+            {{ cadence === 'annual' ? 'Annual Contribution' : 'Monthly Contribution' }}
           </div>
           <h2>Pay what you can</h2>
           <ul class="tier-list">
             <li><span class="tier-amt">$0</span> I need support right now</li>
-            <li><span class="tier-amt">$5</span> I can contribute</li>
+            <li><span class="tier-amt">{{ cadence === 'annual' ? '$50/yr' : '$5/mo' }}</span> I can contribute</li>
             <li>
-              <span class="tier-amt">$15</span> I can sustain the community
+              <span class="tier-amt">{{ cadence === 'annual' ? '$150/yr' : '$15/mo' }}</span> I can sustain the community
               (suggested)
             </li>
-            <li><span class="tier-amt">$30</span> I can support others too</li>
+            <li><span class="tier-amt">{{ cadence === 'annual' ? '$300/yr' : '$30/mo' }}</span> I can support others too</li>
             <li>
-              <span class="tier-amt">$50</span> I want to sponsor multiple
+              <span class="tier-amt">{{ cadence === 'annual' ? '$500/yr' : '$50/mo' }}</span> I want to sponsor multiple
               members
             </li>
           </ul>
@@ -234,9 +234,39 @@
                   </div>
                 </div>
               </div>
+              <div class="form-group">
+                <label class="form-label">Billing Cadence</label>
+                <div class="cadence-radios">
+                  <div class="circle-radio">
+                    <input
+                      id="cadence-monthly"
+                      v-model="cadence"
+                      type="radio"
+                      name="cadence"
+                      value="monthly"
+                    >
+                    <label for="cadence-monthly">
+                      <span class="circle-label-name">Monthly</span>
+                    </label>
+                  </div>
+                  <div class="circle-radio">
+                    <input
+                      id="cadence-annual"
+                      v-model="cadence"
+                      type="radio"
+                      name="cadence"
+                      value="annual"
+                    >
+                    <label for="cadence-annual">
+                      <span class="circle-label-name">Annual</span>
+                      <span class="circle-label-desc">2 months free</span>
+                    </label>
+                  </div>
+                </div>
+              </div>
               <div class="form-group">
                 <label class="form-label" for="join-contribution"
-                  >Monthly Contribution</label
+                  >{{ cadence === 'annual' ? 'Annual' : 'Monthly' }} Contribution</label
                 >
                 <USelectMenu
                   id="join-contribution"
@@ -393,6 +423,8 @@ import {
   getContributionOptions,
   requiresPayment,
   getContributionTierByValue,
+  getTierAmount,
+  CONTRIBUTION_TIERS,
 } from "~/config/contributions";
 
 // Auth state
@@ -424,6 +456,7 @@ const isSubmitting = ref(false);
 const currentStep = ref(1); // 1: Info, 2: Billing (paid only), 3: Payment, 4: Confirmation
 const errorMessage = ref("");
 const successMessage = ref("");
+const cadence = ref("monthly"); // 'monthly' | 'annual'
 
 // Helcim state
 const customerId = ref(null);
@@ -437,14 +470,18 @@ const circleOptions = getCircleOptions();
 // Contribution options from central config
 const contributionOptions = getContributionOptions();
 
-// Minimal labels for the dropdown (tier descriptions live in the left column).
-const contributionItems = [
-  { value: "0", label: "$0/mo" },
-  { value: "5", label: "$5/mo" },
-  { value: "15", label: "$15/mo (suggested)" },
-  { value: "30", label: "$30/mo" },
-  { value: "50", label: "$50/mo" },
-];
+// Minimal labels for the dropdown — reactive to cadence.
+const contributionItems = computed(() => {
+  const isAnnual = cadence.value === "annual";
+  return Object.values(CONTRIBUTION_TIERS).map((tier) => {
+    const base = tier.amount;
+    if (base === 0) return { value: tier.value, label: "$0" };
+    const amt = isAnnual ? base * 10 : base;
+    const suffix = isAnnual ? "/yr" : "/mo";
+    const hint = tier.value === "15" && !isAnnual ? " (suggested)" : "";
+    return { value: tier.value, label: `$${amt}${suffix}${hint}` };
+  });
+});
 
 // Initialize composables
 const {
@@ -585,6 +622,7 @@ const createSubscription = async (cardToken = null) => {
         customerId: customerId.value,
         customerCode: customerCode.value,
         contributionTier: form.contributionTier,
+        cadence: cadence.value,
         cardToken: cardToken,
       },
     });
@@ -863,6 +901,13 @@ onUnmounted(() => {
   color: var(--text-faint);
 }
 
+/* ---- CADENCE RADIOS ---- */
+.cadence-radios {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+}
+
 /* ---- CIRCLE RADIOS ---- */
 .circle-radios {
   display: grid;
diff --git a/app/pages/member/payment-setup.vue b/app/pages/member/payment-setup.vue
index b604e17..584a5be 100644
--- a/app/pages/member/payment-setup.vue
+++ b/app/pages/member/payment-setup.vue
@@ -128,7 +128,8 @@ const openModal = async () => {
 
     await $fetch('/api/members/update-contribution', {
       method: 'POST',
-      body: { contributionTier: targetTier.value },
+      // cadence: annual upgrades go through /join; this page is monthly-only
+      body: { contributionTier: targetTier.value, cadence: 'monthly' },
     });
 
     await checkMemberStatus();