From 673f881b5432797a1a79652ead938b20058578c0 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sat, 18 Apr 2026 18:02:04 +0100
Subject: [PATCH] refactor(join): use getTierAmount helper for cadence pricing

---
 app/pages/join.vue | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/app/pages/join.vue b/app/pages/join.vue
index 80bd80f..35c4035 100644
--- a/app/pages/join.vue
+++ b/app/pages/join.vue
@@ -121,14 +121,14 @@
           <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">{{ cadence === 'annual' ? '$50/yr' : '$5/mo' }}</span> I can contribute</li>
+            <li><span class="tier-amt">{{ formatTierAmount('5', '') }}</span> I can contribute</li>
             <li>
-              <span class="tier-amt">{{ cadence === 'annual' ? '$150/yr' : '$15/mo' }}</span> I can sustain the community
+              <span class="tier-amt">{{ formatTierAmount('15', '') }}</span> I can sustain the community
               (suggested)
             </li>
-            <li><span class="tier-amt">{{ cadence === 'annual' ? '$300/yr' : '$30/mo' }}</span> I can support others too</li>
+            <li><span class="tier-amt">{{ formatTierAmount('30', '') }}</span> I can support others too</li>
             <li>
-              <span class="tier-amt">{{ cadence === 'annual' ? '$500/yr' : '$50/mo' }}</span> I want to sponsor multiple
+              <span class="tier-amt">{{ formatTierAmount('50', '') }}</span> I want to sponsor multiple
               members
             </li>
           </ul>
@@ -472,17 +472,25 @@ const contributionOptions = getContributionOptions();
 
 // 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)" : "";
+    const amt = getTierAmount(tier, cadence.value);
+    const suffix = cadence.value === "annual" ? "/yr" : "/mo";
+    const hint = tier.value === "15" && cadence.value !== "annual" ? " (suggested)" : "";
     return { value: tier.value, label: `$${amt}${suffix}${hint}` };
   });
 });
 
+// Format tier amount for display in tier list
+const formatTierAmount = (value, label) => {
+  const tier = getContributionTierByValue(value);
+  if (!tier || tier.amount === 0) return "$0";
+  const amt = getTierAmount(tier, cadence.value);
+  const suffix = cadence.value === "annual" ? "/yr" : "/mo";
+  return `$${amt}${suffix}`;
+};
+
 // Initialize composables
 const {
   initializeHelcimPay,