From b17e006d6510478225986e5614419e2d3796cc8a Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sun, 19 Apr 2026 19:08:57 +0100
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20rename=20contributionTier=20?=
 =?UTF-8?q?=E2=86=92=20contributionAmount=20across=20remaining=20pages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/composables/useMemberPayment.js |   2 +-
 app/pages/accept-invite.vue         | 111 +++++++++++++++++++++++-----
 app/pages/admin/members/[id].vue    |  16 ++--
 app/pages/admin/members/index.vue   |  63 +++++++---------
 app/pages/member/dashboard.vue      |   4 +-
 app/pages/member/payment-setup.vue  |  18 ++---
 6 files changed, 133 insertions(+), 81 deletions(-)

diff --git a/app/composables/useMemberPayment.js b/app/composables/useMemberPayment.js
index 6b49ecd..0064b71 100644
--- a/app/composables/useMemberPayment.js
+++ b/app/composables/useMemberPayment.js
@@ -62,7 +62,7 @@ export const useMemberPayment = () => {
         body: {
           customerId: customerId.value,
           customerCode: customerCode.value,
-          contributionTier: memberData.value?.contributionTier || '5',
+          contributionAmount: memberData.value?.contributionAmount ?? 5,
           cardToken: paymentResult.cardToken,
         },
       })
diff --git a/app/pages/accept-invite.vue b/app/pages/accept-invite.vue
index 6a9aaa8..d29bdbc 100644
--- a/app/pages/accept-invite.vue
+++ b/app/pages/accept-invite.vue
@@ -124,18 +124,31 @@
           </div>
 
           <div class="form-group full-width">
-            <label class="form-label" for="accept-tier">Monthly Contribution</label>
-            <select
-              id="accept-tier"
-              v-model="form.contributionTier"
-              class="form-select"
-            >
-              <option value="0">$0/mo -- I need support right now</option>
-              <option value="5">$5/mo -- I can contribute</option>
-              <option value="15">$15/mo -- I can sustain the community (suggested)</option>
-              <option value="30">$30/mo -- I can support others too</option>
-              <option value="50">$50/mo -- I want to sponsor multiple members</option>
-            </select>
+            <label class="form-label" for="accept-contribution">Monthly Contribution</label>
+            <div class="contribution-input-row">
+              <span class="contribution-currency">$</span>
+              <input
+                id="accept-contribution"
+                v-model.number="form.contributionAmount"
+                type="number"
+                min="0"
+                step="1"
+                inputmode="numeric"
+                class="contribution-input"
+              >
+            </div>
+            <div class="contribution-presets" role="group" aria-label="Suggested amounts">
+              <button
+                v-for="preset in CONTRIBUTION_PRESETS"
+                :key="preset.amount"
+                type="button"
+                class="contribution-preset-chip"
+                @click="form.contributionAmount = preset.amount"
+              >
+                ${{ preset.amount }}
+              </button>
+            </div>
+            <p v-if="guidanceLabel" class="contribution-guidance">{{ guidanceLabel }}</p>
             <p class="field-note">Pay what you can. If you can pay more, you're making room for someone who can't.</p>
           </div>
 
@@ -171,7 +184,7 @@
     <div v-else-if="step === 'payment'" class="form-container">
       <h1>Payment Information</h1>
       <p class="form-intro">
-        You're signing up for ${{ form.contributionTier }} CAD / month.
+        You're signing up for ${{ form.contributionAmount }} CAD / month.
       </p>
 
       <div v-if="errorMessage" class="error-box">{{ errorMessage }}</div>
@@ -199,7 +212,11 @@
 </template>
 
 <script setup>
-import { requiresPayment } from "~/config/contributions";
+import {
+  requiresPayment,
+  CONTRIBUTION_PRESETS,
+  getGuidanceLabel,
+} from "~/config/contributions";
 
 definePageMeta({ layout: false });
 
@@ -218,18 +235,26 @@ const form = reactive({
   location: "",
   circle: "community",
   motivation: "",
-  contributionTier: "15",
+  contributionAmount: 15,
   agreedToGuidelines: false,
 });
 
 const isFormValid = computed(() => {
-  return form.name && form.circle && form.contributionTier && form.agreedToGuidelines;
+  return (
+    form.name &&
+    form.circle &&
+    Number.isInteger(form.contributionAmount) &&
+    form.contributionAmount >= 0 &&
+    form.agreedToGuidelines
+  );
 });
 
 const needsPayment = computed(() => {
-  return requiresPayment(form.contributionTier);
+  return requiresPayment(form.contributionAmount);
 });
 
+const guidanceLabel = computed(() => getGuidanceLabel(form.contributionAmount));
+
 // Helcim state for paid tiers
 const memberId = ref(null);
 const customerId = ref(null);
@@ -280,7 +305,7 @@ const handleAccept = async () => {
         location: form.location || undefined,
         circle: form.circle,
         motivation: form.motivation || undefined,
-        contributionTier: form.contributionTier,
+        contributionAmount: form.contributionAmount,
         agreedToGuidelines: form.agreedToGuidelines,
         token: token.value,
       },
@@ -314,7 +339,7 @@ const setupPayment = async (member) => {
         name: member.name,
         email: member.email,
         circle: member.circle,
-        contributionTier: form.contributionTier,
+        contributionAmount: form.contributionAmount,
       },
     });
 
@@ -358,7 +383,7 @@ const processPayment = async () => {
         body: {
           customerId: customerId.value,
           customerCode: customerCode.value,
-          contributionTier: form.contributionTier,
+          contributionAmount: form.contributionAmount,
           cardToken: paymentResult.cardToken,
         },
       });
@@ -487,6 +512,52 @@ textarea.form-input {
   line-height: 1.4;
 }
 
+/* ---- CONTRIBUTION AMOUNT INPUT + CHIPS ---- */
+.contribution-input-row {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.contribution-currency {
+  font-weight: 600;
+}
+.contribution-input {
+  flex: 1;
+  padding: 0.5rem 0.75rem;
+  background: var(--input-bg);
+  border: 1px solid var(--parch);
+  font-family: 'Commit Mono', monospace;
+  font-size: 1rem;
+}
+.contribution-input:focus {
+  outline: none;
+  border-color: var(--candle);
+}
+.contribution-presets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+.contribution-preset-chip {
+  padding: 0.25rem 0.75rem;
+  background: transparent;
+  border: 1px dashed var(--parch);
+  font-family: 'Commit Mono', monospace;
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+.contribution-preset-chip:hover {
+  border-style: solid;
+  border-color: var(--candle);
+}
+.contribution-guidance {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  font-style: italic;
+  color: var(--ink-soft, currentColor);
+}
+
 /* ---- CIRCLE RADIOS ---- */
 .circle-radios {
   display: grid;
diff --git a/app/pages/admin/members/[id].vue b/app/pages/admin/members/[id].vue
index d81758d..4d8be5d 100644
--- a/app/pages/admin/members/[id].vue
+++ b/app/pages/admin/members/[id].vue
@@ -54,14 +54,8 @@
                 </select>
               </div>
               <div class="field">
-                <label>Contribution tier ($/mo)</label>
-                <select v-model="form.contributionTier">
-                  <option value="0">$0</option>
-                  <option value="5">$5</option>
-                  <option value="15">$15</option>
-                  <option value="30">$30</option>
-                  <option value="50">$50</option>
-                </select>
+                <label>Contribution ($/mo)</label>
+                <input v-model.number="form.contributionAmount" type="number" min="0" step="1">
               </div>
               <div class="field">
                 <label>Status</label>
@@ -270,7 +264,7 @@ const form = reactive({
   name: "",
   email: "",
   circle: "",
-  contributionTier: "",
+  contributionAmount: 0,
   status: "",
   role: "",
 });
@@ -282,7 +276,7 @@ function populateForm(m) {
   form.name = m.name;
   form.email = m.email;
   form.circle = m.circle;
-  form.contributionTier = String(m.contributionTier);
+  form.contributionAmount = m.contributionAmount ?? 0;
   form.status = m.status || "pending_payment";
   form.role = m.role || "member";
 }
@@ -304,7 +298,7 @@ async function submitEdit() {
         name: form.name,
         email: form.email,
         circle: form.circle,
-        contributionTier: form.contributionTier,
+        contributionAmount: form.contributionAmount,
         status: form.status,
       },
     });
diff --git a/app/pages/admin/members/index.vue b/app/pages/admin/members/index.vue
index 5a00503..d5e4677 100644
--- a/app/pages/admin/members/index.vue
+++ b/app/pages/admin/members/index.vue
@@ -77,7 +77,7 @@
             <th class="sortable" @click="toggleSort('name')">Name <span class="sort-ind">{{ sortIndicator('name') }}</span></th>
             <th class="sortable" @click="toggleSort('email')">Email <span class="sort-ind">{{ sortIndicator('email') }}</span></th>
             <th class="sortable" @click="toggleSort('circle')">Circle <span class="sort-ind">{{ sortIndicator('circle') }}</span></th>
-            <th class="sortable" @click="toggleSort('contributionTier')">Tier <span class="sort-ind">{{ sortIndicator('contributionTier') }}</span></th>
+            <th class="sortable" @click="toggleSort('contributionAmount')">Contribution <span class="sort-ind">{{ sortIndicator('contributionAmount') }}</span></th>
             <th class="sortable" @click="toggleSort('status')">Status <span class="sort-ind">{{ sortIndicator('status') }}</span></th>
             <th>Invite</th>
             <th>Slack</th>
@@ -112,7 +112,7 @@
                 member.circle
               }}</span>
             </td>
-            <td class="col-mono">${{ member.contributionTier }}/mo</td>
+            <td class="col-mono">${{ member.contributionAmount ?? 0 }}/mo</td>
             <td>
               <span class="badge status" :class="`status-${member.status || 'pending_payment'}`">{{ statusLabel(member.status) }}</span>
             </td>
@@ -186,14 +186,8 @@
             </select>
           </div>
           <div class="field">
-            <label>Contribution Tier</label>
-            <select v-model="newMember.contributionTier">
-              <option value="0">$0/month</option>
-              <option value="5">$5/month</option>
-              <option value="15">$15/month</option>
-              <option value="30">$30/month</option>
-              <option value="50">$50/month</option>
-            </select>
+            <label>Contribution ($/mo)</label>
+            <input v-model.number="newMember.contributionAmount" type="number" min="0" step="1">
           </div>
           <div class="modal-actions">
             <button type="button" class="btn" @click="showCreateModal = false">
@@ -223,11 +217,10 @@
           <div v-if="!csvRows.length">
             <p class="help-text">
               Upload a CSV with columns:
-              <code>name,email,circle,contributionTier</code>
+              <code>name,email,circle,contributionAmount</code>
             </p>
             <p class="help-text" style="margin-bottom: 12px">
-              Valid circles: community, founder, practitioner. Valid tiers: 0,
-              5, 15, 30, 50.
+              Valid circles: community, founder, practitioner. Contribution: whole number ≥ 0.
             </p>
             <input
               ref="csvFileInput"
@@ -287,7 +280,7 @@
                     <td>{{ row.name }}</td>
                     <td class="col-email">{{ row.email }}</td>
                     <td>{{ row.circle }}</td>
-                    <td>${{ row.contributionTier }}/mo</td>
+                    <td>${{ row.contributionAmount }}/mo</td>
                   </tr>
                 </tbody>
               </table>
@@ -367,14 +360,8 @@
             </select>
           </div>
           <div class="field">
-            <label>Contribution Tier</label>
-            <select v-model="editingMember.contributionTier">
-              <option value="0">$0/month</option>
-              <option value="5">$5/month</option>
-              <option value="15">$15/month</option>
-              <option value="30">$30/month</option>
-              <option value="50">$50/month</option>
-            </select>
+            <label>Contribution ($/mo)</label>
+            <input v-model.number="editingMember.contributionAmount" type="number" min="0" step="1">
           </div>
           <div class="field">
             <label>Status</label>
@@ -550,7 +537,7 @@ const newMember = reactive({
   name: "",
   email: "",
   circle: "community",
-  contributionTier: "0",
+  contributionAmount: 0,
 });
 
 const filteredMembers = computed(() => {
@@ -576,7 +563,7 @@ const filteredMembers = computed(() => {
   return [...filtered].sort((a, b) => {
     let av = a[key];
     let bv = b[key];
-    if (key === "contributionTier") {
+    if (key === "contributionAmount") {
       av = Number(av) || 0;
       bv = Number(bv) || 0;
     } else if (key === "createdAt") {
@@ -668,7 +655,7 @@ const createMember = async () => {
       name: "",
       email: "",
       circle: "community",
-      contributionTier: "0",
+      contributionAmount: 0,
     });
 
     await refresh();
@@ -687,7 +674,6 @@ const createMember = async () => {
 
 // --- CSV Import ---
 const VALID_CIRCLES = ["community", "founder", "practitioner"];
-const VALID_TIERS = ["0", "5", "15", "30", "50"];
 
 const handleCsvFile = (event) => {
   const file = event.target.files[0];
@@ -716,10 +702,10 @@ const parseCsv = (text) => {
   const nameIdx = header.indexOf("name");
   const emailIdx = header.indexOf("email");
   const circleIdx = header.indexOf("circle");
-  const tierIdx = header.indexOf("contributiontier");
+  const amountIdx = header.indexOf("contributionamount");
 
-  if (nameIdx === -1 || emailIdx === -1 || circleIdx === -1 || tierIdx === -1) {
-    csvParseError.value = `Missing required columns. Found: ${header.join(", ")}. Need: name, email, circle, contributionTier`;
+  if (nameIdx === -1 || emailIdx === -1 || circleIdx === -1 || amountIdx === -1) {
+    csvParseError.value = `Missing required columns. Found: ${header.join(", ")}. Need: name, email, circle, contributionAmount`;
     return;
   }
 
@@ -731,20 +717,21 @@ const parseCsv = (text) => {
     const name = cols[nameIdx] || "";
     const email = (cols[emailIdx] || "").toLowerCase();
     const circle = (cols[circleIdx] || "").toLowerCase();
-    const contributionTier = cols[tierIdx] || "";
+    const rawAmount = cols[amountIdx] || "";
+    const contributionAmount = Number(rawAmount);
 
     let error = null;
     if (!name) error = "Missing name";
     else if (!email || !email.includes("@")) error = "Invalid email";
     else if (!VALID_CIRCLES.includes(circle))
       error = `Invalid circle: ${circle}`;
-    else if (!VALID_TIERS.includes(contributionTier))
-      error = `Invalid tier: ${contributionTier}`;
+    else if (!Number.isInteger(contributionAmount) || contributionAmount < 0)
+      error = `Invalid contribution: ${rawAmount}`;
     else if (seenEmails.has(email)) error = "Duplicate email in CSV";
 
     if (!error) seenEmails.add(email);
 
-    rows.push({ name, email, circle, contributionTier, error });
+    rows.push({ name, email, circle, contributionAmount, error });
   }
 
   csvRows.value = rows;
@@ -771,11 +758,11 @@ const submitImport = async () => {
   importing.value = true;
   try {
     const payload = csvValidRows.value.map(
-      ({ name, email, circle, contributionTier }) => ({
+      ({ name, email, circle, contributionAmount }) => ({
         name,
         email,
         circle,
-        contributionTier,
+        contributionAmount,
       }),
     );
 
@@ -854,7 +841,7 @@ const editingMember = reactive({
   name: "",
   email: "",
   circle: "community",
-  contributionTier: "0",
+  contributionAmount: 0,
   status: "pending_payment",
 });
 
@@ -864,7 +851,7 @@ const editMember = (member) => {
     name: member.name,
     email: member.email,
     circle: member.circle,
-    contributionTier: String(member.contributionTier),
+    contributionAmount: member.contributionAmount ?? 0,
     status: member.status || "pending_payment",
   });
   showEditModal.value = true;
@@ -879,7 +866,7 @@ const submitEditMember = async () => {
         name: editingMember.name,
         email: editingMember.email,
         circle: editingMember.circle,
-        contributionTier: editingMember.contributionTier,
+        contributionAmount: editingMember.contributionAmount,
         status: editingMember.status,
       },
     });
diff --git a/app/pages/member/dashboard.vue b/app/pages/member/dashboard.vue
index 243edf5..d2887d2 100644
--- a/app/pages/member/dashboard.vue
+++ b/app/pages/member/dashboard.vue
@@ -36,7 +36,7 @@
           <PageHeader :title="`Welcome back, ${memberData?.name || ''}`">
             <div class="dashboard-meta">
               <CircleBadge :circle="memberData?.circle || 'community'" />
-              <span>${{ memberData?.contributionTier }} CAD/mo</span>
+              <span>${{ memberData?.contributionAmount ?? 0 }} CAD/mo</span>
             </div>
           </PageHeader>
 
@@ -169,7 +169,7 @@
               <div class="membership-row">
                 <span class="key">Contribution</span>
                 <span class="val"
-                  >${{ memberData?.contributionTier }} CAD/month</span
+                  >${{ memberData?.contributionAmount ?? 0 }} CAD/month</span
                 >
               </div>
               <div class="membership-row">
diff --git a/app/pages/member/payment-setup.vue b/app/pages/member/payment-setup.vue
index 584a5be..398be77 100644
--- a/app/pages/member/payment-setup.vue
+++ b/app/pages/member/payment-setup.vue
@@ -3,7 +3,7 @@
     <ClientOnly>
       <PageHeader
         title="Set Up Payment"
-        :subtitle="targetTier ? `Upgrading to $${targetTier}/month` : 'Payment setup'"
+        :subtitle="targetAmount != null ? `Upgrading to $${targetAmount}/month` : 'Payment setup'"
       />
 
       <PageSection>
@@ -21,7 +21,7 @@
 
           <div v-else-if="step === 'ready'" class="status-block">
             <p>
-              To upgrade to <strong>${{ targetTier }}/month</strong>, we need a
+              To upgrade to <strong>${{ targetAmount }}/month</strong>, we need a
               payment method on file. Click below to open the secure payment
               form — we'll verify your card with a $0 authorization and then
               activate your new tier.
@@ -56,12 +56,12 @@ const toast = useToast();
 const { memberData, checkMemberStatus } = useAuth();
 const { initializeHelcimPay, verifyPayment, cleanup: cleanupHelcim } = useHelcimPay();
 
-const VALID_TIERS = ['5', '15', '30', '50'];
+const VALID_AMOUNTS = [5, 15, 30, 50];
 const VALID_CIRCLES = ['community', 'founder', 'practitioner'];
 
-const targetTier = computed(() => {
-  const t = String(route.query.tier || '');
-  return VALID_TIERS.includes(t) ? t : null;
+const targetAmount = computed(() => {
+  const n = Number(route.query.tier);
+  return VALID_AMOUNTS.includes(n) ? n : null;
 });
 const targetCircle = computed(() => {
   const c = String(route.query.circle || '');
@@ -78,8 +78,8 @@ const initialize = async () => {
   errorMessage.value = '';
   step.value = 'loading';
 
-  if (!targetTier.value) {
-    errorMessage.value = 'Missing or invalid target tier.';
+  if (targetAmount.value == null) {
+    errorMessage.value = 'Missing or invalid target amount.';
     step.value = 'error';
     return;
   }
@@ -129,7 +129,7 @@ const openModal = async () => {
     await $fetch('/api/members/update-contribution', {
       method: 'POST',
       // cadence: annual upgrades go through /join; this page is monthly-only
-      body: { contributionTier: targetTier.value, cadence: 'monthly' },
+      body: { contributionAmount: targetAmount.value, cadence: 'monthly' },
     });
 
     await checkMemberStatus();