From ad63a37a053bbb8ae49cdb48ec8df34db0985ad6 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sat, 23 May 2026 15:58:53 +0100
Subject: [PATCH] feat(contribution): port account.vue to
 ContributionAmountField
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the inline contribution UI (label, input row, presets, guidance)
with the shared ContributionAmountField component, locking cadence and
suppressing its built-in summary (account.vue has its own change hint).

Fix three computeds that double-applied the cadence conversion now that
Member.contributionAmount is stored in cadence-unit (post-Task 7):
contributionChangeHint, currentContributionLabel, and nextChargeAmount
no longer multiply annual amounts by 12.

Convert form.contributionAmount to a monthly-equivalent before the
payment-setup redirect — that page is monthly-only and would otherwise
attempt an annual-sized monthly charge for annual members.

Drop the now-unused guidanceLabel computed, the CONTRIBUTION_PRESETS and
getGuidanceLabel imports, and the dead contribution-* CSS rules.
---
 app/pages/member/account.vue | 101 +++++++----------------------------
 1 file changed, 18 insertions(+), 83 deletions(-)

diff --git a/app/pages/member/account.vue b/app/pages/member/account.vue
index 89c6729..370f622 100644
--- a/app/pages/member/account.vue
+++ b/app/pages/member/account.vue
@@ -245,35 +245,13 @@
             <PageSection>
               <div class="section-label">Change Contribution</div>
 
-              <div class="form-group">
-                <label class="form-label" for="account-contribution">
-                  Monthly Contribution
-                </label>
-                <div class="contribution-input-row">
-                  <span class="contribution-currency">$</span>
-                  <input
-                    id="account-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>
-              </div>
+              <ContributionAmountField
+                v-model="form.contributionAmount"
+                :cadence="cadence"
+                :allow-cadence-change="false"
+                :show-summary="false"
+              />
+
               <div v-if="contributionChangeHint" class="tier-hint">
                 {{ contributionChangeHint }}
               </div>
@@ -314,7 +292,7 @@
 </template>
 
 <script setup>
-import { CONTRIBUTION_PRESETS, getGuidanceLabel, requiresPayment } from '~/config/contributions';
+import { requiresPayment } from '~/config/contributions';
 import { STATUS_LABELS } from '~/config/memberStatus';
 
 useSiteMeta({ title: 'Account', noindex: true });
@@ -373,14 +351,12 @@ const canChangeCard = computed(() => {
 
 const cadence = computed(() => memberData.value?.billingCadence || 'monthly');
 
-const guidanceLabel = computed(() => getGuidanceLabel(form.contributionAmount));
-
 const contributionChangeHint = computed(() => {
   const current = Number(memberData.value?.contributionAmount || 0);
   const next = Number(form.contributionAmount || 0);
   if (current === next) return "";
   if (current === 0 && next > 0) {
-    const firstCharge = cadence.value === "annual" ? next * 12 : next;
+    const firstCharge = next;
     return `You'll be charged $${firstCharge} today to start your subscription.`;
   }
   if (current > 0 && next === 0) {
@@ -392,14 +368,13 @@ const contributionChangeHint = computed(() => {
 const currentContributionLabel = computed(() => {
   const amount = Number(memberData.value?.contributionAmount || 0);
   if (!amount) return '$0';
-  const displayAmount = cadence.value === 'annual' ? amount * 12 : amount;
-  return cadence.value === 'annual' ? `$${displayAmount} / year` : `$${displayAmount} / month`;
+  return cadence.value === 'annual' ? `$${amount} / year` : `$${amount} / month`;
 });
 
 const nextChargeAmount = computed(() => {
   const amount = Number(memberData.value?.contributionAmount || 0);
   if (!amount) return null;
-  return cadence.value === 'annual' ? amount * 12 : amount;
+  return amount;
 });
 
 const circleOptions = [
@@ -493,8 +468,14 @@ const handleUpdateContribution = async () => {
   } catch (err) {
     // Paid upgrade without a saved card — route to payment setup instead of erroring.
     if (err.data?.data?.requiresPaymentSetup) {
+      // payment-setup.vue is monthly-only (always sends cadence: 'monthly') and
+      // form.contributionAmount is in cadence-unit. For annual members, convert
+      // to monthly-equivalent so we don't trigger an annual-sized monthly charge.
+      const monthlyTier = cadence.value === "annual"
+        ? Math.floor(form.contributionAmount / 12)
+        : form.contributionAmount;
       await navigateTo(
-        `/member/payment-setup?tier=${form.contributionAmount}&circle=${
+        `/member/payment-setup?tier=${monthlyTier}&circle=${
           selectedCircle.value || memberData.value?.circle || 'community'
         }`,
       );
@@ -890,52 +871,6 @@ const confirmCancelMembership = async () => {
   margin-bottom: 12px;
 }
 
-/* ---- 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);
-}
-
 .btn-section {
   width: 100%;
   text-align: center;