From fb337a427776242bf9523e7c63006927e09edb99 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sat, 18 Apr 2026 18:08:10 +0100
Subject: [PATCH] feat(account): display cadence and annual pricing in tier
 selector

---
 app/pages/member/account.vue  | 39 ++++++++++++++++++++++++++---------
 server/api/auth/member.get.js |  1 +
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/app/pages/member/account.vue b/app/pages/member/account.vue
index da9f1fd..0fd4c50 100644
--- a/app/pages/member/account.vue
+++ b/app/pages/member/account.vue
@@ -57,9 +57,7 @@
                 </div>
                 <div class="membership-row">
                   <span class="membership-k">Contribution</span>
-                  <span class="membership-v"
-                    >${{ memberData.contributionTier || 0 }} / month</span
-                  >
+                  <span class="membership-v">{{ currentContributionLabel }}</span>
                 </div>
                 <div class="membership-row">
                   <span class="membership-k">Member since</span>
@@ -210,6 +208,8 @@
 </template>
 
 <script setup>
+import { getTierAmount, getContributionTierByValue } from '~/config/contributions';
+
 definePageMeta({
   middleware: "auth",
 });
@@ -229,14 +229,30 @@ const showEmailEdit = ref(false);
 const newEmail = ref("");
 const isUpdatingEmail = ref(false);
 
-const tiers = [
-  { amount: 0, display: "$0", label: "I need support right now" },
-  { amount: 5, display: "$5", label: "I can contribute" },
-  { amount: 15, display: "$15", label: "I can sustain the community" },
-  { amount: 30, display: "$30", label: "I can support others too" },
-  { amount: 50, display: "$50", label: "I want to sponsor multiple members" },
+const BASE_TIERS = [
+  { amount: 0, label: "I need support right now" },
+  { amount: 5, label: "I can contribute" },
+  { amount: 15, label: "I can sustain the community" },
+  { amount: 30, label: "I can support others too" },
+  { amount: 50, label: "I want to sponsor multiple members" },
 ];
 
+const tiers = computed(() => {
+  const cadence = memberData.value?.billingCadence || 'monthly';
+  return BASE_TIERS.map((t) => ({
+    ...t,
+    display: t.amount === 0 ? '$0' : `$${getTierAmount(t, cadence)}`,
+  }));
+});
+
+const currentContributionLabel = computed(() => {
+  const tier = getContributionTierByValue(String(memberData.value?.contributionTier || '0'));
+  const cadence = memberData.value?.billingCadence || 'monthly';
+  if (!tier || tier.amount === 0) return '$0';
+  const amount = getTierAmount(tier, cadence);
+  return cadence === 'annual' ? `$${amount} / year` : `$${amount} / month`;
+});
+
 const circleOptions = [
   {
     value: "community",
@@ -287,7 +303,10 @@ const handleUpdateTier = async () => {
   try {
     await $fetch("/api/members/update-contribution", {
       method: "POST",
-      body: { contributionTier: String(selectedTier.value) },
+      body: {
+        contributionTier: String(selectedTier.value),
+        cadence: memberData.value?.billingCadence || 'monthly',
+      },
     });
     await checkMemberStatus();
     toast.add({ title: "Contribution updated", color: "success" });
diff --git a/server/api/auth/member.get.js b/server/api/auth/member.get.js
index e32522b..7e2810e 100644
--- a/server/api/auth/member.get.js
+++ b/server/api/auth/member.get.js
@@ -12,6 +12,7 @@ export default defineEventHandler(async (event) => {
     role: member.role || 'member',
     circle: member.circle,
     contributionTier: member.contributionTier,
+    billingCadence: member.billingCadence,
     membershipLevel: `${member.circle}-${member.contributionTier}`,
     // Profile fields
     pronouns: member.pronouns,