feat(frontend): rename contributionTier → contributionAmount across remaining pages

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;