From e0e7da5cca2f1cef2b786650173096c3273488fa Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sat, 23 May 2026 15:14:33 +0100
Subject: [PATCH] feat(contribution): port accept-invite.vue to
 ContributionAmountField

Replace cadence radios, contribution input, preset chips, guidance label,
and billing summary block with a single ContributionAmountField usage.
Default contribution updated to 180 to preserve the previous $15/mo
suggested annual default (cadence-unit value now). Updated flowSummary to
format cadence-unit directly. Updated e2e selectors to use the data-testids
the component exposes and new summary copy.
---
 app/pages/accept-invite.vue | 182 +++---------------------------------
 e2e/accept-invite.spec.js   |  28 +++---
 2 files changed, 29 insertions(+), 181 deletions(-)

diff --git a/app/pages/accept-invite.vue b/app/pages/accept-invite.vue
index 0a28074..7f88eb3 100644
--- a/app/pages/accept-invite.vue
+++ b/app/pages/accept-invite.vue
@@ -124,77 +124,13 @@
           </div>
 
           <div class="form-group full-width">
-            <label class="form-label">Billing Cadence</label>
-            <div class="cadence-radios">
-              <div class="circle-radio">
-                <input
-                  id="accept-cadence-annual"
-                  v-model="cadence"
-                  type="radio"
-                  name="cadence"
-                  value="annual"
-                >
-                <label for="accept-cadence-annual">
-                  <span class="circle-label-name">Per Year</span>
-                </label>
-              </div>
-              <div class="circle-radio">
-                <input
-                  id="accept-cadence-monthly"
-                  v-model="cadence"
-                  type="radio"
-                  name="cadence"
-                  value="monthly"
-                >
-                <label for="accept-cadence-monthly">
-                  <span class="circle-label-name">Per Month</span>
-                </label>
-              </div>
-            </div>
-          </div>
-
-          <div class="form-group full-width">
-            <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>
+            <ContributionAmountField
+              v-model="form.contributionAmount"
+              v-model:cadence="cadence"
+            />
             <p class="field-note">Pay what you can. If you can pay more, you're making room for someone who can't.</p>
           </div>
 
-          <div v-if="form.contributionAmount > 0" class="form-group full-width">
-            <div class="billing-summary">
-              <p class="billing-summary-line">
-                You'll be charged <strong>${{ firstCharge }} today</strong><span v-if="cadence === 'annual'"> (${{ form.contributionAmount }}/month &times; 12)</span>.
-              </p>
-              <p class="billing-summary-line">
-                Then <strong>${{ firstCharge }} every {{ cadence === 'annual' ? 'year' : 'month' }}</strong>, until you cancel.
-              </p>
-            </div>
-          </div>
-
           <div class="form-group full-width">
             <label class="checkbox-label">
               <input
@@ -236,11 +172,7 @@
 </template>
 
 <script setup>
-import {
-  requiresPayment,
-  CONTRIBUTION_PRESETS,
-  getGuidanceLabel,
-} from "~/config/contributions";
+import { requiresPayment } from "~/config/contributions";
 
 definePageMeta({ layout: false });
 useSiteMeta({ title: "Accept Invitation", noindex: true });
@@ -265,7 +197,7 @@ const form = reactive({
   location: "",
   circle: "community",
   motivation: "",
-  contributionAmount: 15,
+  contributionAmount: 180,
   agreedToGuidelines: false,
 });
 
@@ -283,26 +215,16 @@ const needsPayment = computed(() => {
   return requiresPayment(form.contributionAmount);
 });
 
-const guidanceLabel = computed(() => getGuidanceLabel(form.contributionAmount));
-
-const firstCharge = computed(() => {
+const flowSummary = computed(() => {
   const amount = form.contributionAmount || 0;
-  return cadence.value === "annual" ? amount * 12 : amount;
-});
-
-const formatContributionAmount = (amount) => {
-  if (!amount || amount === 0) return "$0";
-  const display = cadence.value === "annual" ? amount * 12 : amount;
   const suffix = cadence.value === "annual" ? "/yr" : "/mo";
-  return `$${display}${suffix}`;
-};
-
-const flowSummary = computed(() => ({
-  name: form.name,
-  email: preRegEmail.value,
-  circle: form.circle,
-  contribution: formatContributionAmount(form.contributionAmount),
-}));
+  return {
+    name: form.name,
+    email: preRegEmail.value,
+    circle: form.circle,
+    contribution: amount > 0 ? `$${amount}${suffix}` : "$0",
+  };
+});
 
 const closeFlowOverlay = () => {
   flowState.value = "idle";
@@ -525,72 +447,6 @@ 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);
-}
-
-/* ---- BILLING SUMMARY ---- */
-.billing-summary {
-  padding: 12px 16px;
-  border: 1px dashed var(--border);
-  background: var(--surface);
-}
-.billing-summary-line {
-  font-size: 13px;
-  color: var(--text);
-  line-height: 1.5;
-  margin: 0;
-}
-.billing-summary-line + .billing-summary-line {
-  margin-top: 4px;
-}
-.billing-summary-line strong {
-  color: var(--text-bright);
-  font-weight: 600;
-}
-
 /* ---- CIRCLE RADIOS ---- */
 .circle-radios {
   display: grid;
@@ -598,12 +454,6 @@ textarea.form-input {
   gap: 8px;
 }
 
-.cadence-radios {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 10px;
-}
-
 .circle-radio {
   position: relative;
 }
@@ -721,9 +571,5 @@ textarea.form-input {
   .circle-radios {
     grid-template-columns: 1fr;
   }
-
-  .cadence-radios {
-    grid-template-columns: 1fr;
-  }
 }
 </style>
diff --git a/e2e/accept-invite.spec.js b/e2e/accept-invite.spec.js
index c834a70..61dd195 100644
--- a/e2e/accept-invite.spec.js
+++ b/e2e/accept-invite.spec.js
@@ -66,9 +66,9 @@ test.describe('Accept Invite — pre-registrant signup', () => {
     await expect(page.locator('#circle-community')).toBeAttached()
     await expect(page.locator('#circle-founder')).toBeAttached()
     await expect(page.locator('#circle-practitioner')).toBeAttached()
-    await expect(page.locator('#accept-cadence-monthly')).toBeAttached()
-    await expect(page.locator('#accept-cadence-annual')).toBeAttached()
-    await expect(page.locator('#accept-contribution')).toBeVisible()
+    await expect(page.getByTestId('cadence-monthly')).toBeVisible()
+    await expect(page.getByTestId('cadence-annual')).toBeVisible()
+    await expect(page.getByTestId('contribution-amount')).toBeVisible()
     await expect(page.locator('.contribution-preset-chip').first()).toBeVisible()
     await expect(page.locator('.form-submit')).toBeVisible()
   })
@@ -110,15 +110,17 @@ test.describe('Accept Invite — pre-registrant signup', () => {
     await mockVerifyOk(page)
     await gotoAcceptInvite(page)
 
-    await expect(page.locator('#accept-contribution')).toBeVisible()
-    await page.locator('#accept-contribution').fill('10')
+    await expect(page.getByTestId('contribution-amount')).toBeVisible()
+    await page.getByTestId('cadence-monthly').click()
+    await page.getByTestId('contribution-amount').fill('10')
 
-    await page.locator('label[for="accept-cadence-monthly"]').click()
-    await expect(page.locator('.billing-summary')).toContainText('$10 today')
+    const summary = page.locator('.billing-summary')
+    await expect(summary).toContainText('$10 today')
+    await expect(summary).toContainText('each month')
 
-    await page.locator('label[for="accept-cadence-annual"]').click()
-    await expect(page.locator('.billing-summary')).toContainText('$120 today')
-    await expect(page.locator('.billing-summary')).toContainText('$10/month')
+    await page.getByTestId('cadence-annual').click()
+    await expect(summary).toContainText('$120 today')
+    await expect(summary).toContainText('at each annual renewal')
   })
 
   test('preset chip sets contribution amount', async ({ page }) => {
@@ -131,7 +133,7 @@ test.describe('Accept Invite — pre-registrant signup', () => {
     const expected = chipText.replace(/[^0-9]/g, '')
 
     await chip.click()
-    await expect(page.locator('#accept-contribution')).toHaveValue(expected)
+    await expect(page.getByTestId('contribution-amount')).toHaveValue(expected)
   })
 
   test('free tier happy path shows welcome state', async ({ page }) => {
@@ -141,7 +143,7 @@ test.describe('Accept Invite — pre-registrant signup', () => {
 
     await expect(page.locator('#accept-name')).toHaveValue('Free Tester')
     await page.locator('#circle-community').check({ force: true })
-    await page.locator('#accept-contribution').fill('0')
+    await page.getByTestId('contribution-amount').fill('0')
     await page.getByRole('checkbox', { name: /Community Guidelines/ }).check()
 
     await expect(page.locator('.form-submit')).toBeEnabled()
@@ -158,7 +160,7 @@ test.describe('Accept Invite — pre-registrant signup', () => {
     await mockVerifyOk(page)
     await gotoAcceptInvite(page)
 
-    await page.locator('#accept-contribution').fill('10')
+    await page.getByTestId('contribution-amount').fill('10')
     await page.getByRole('checkbox', { name: /Community Guidelines/ }).check()
     await expect(page.locator('.form-submit')).toContainText(/Continue to Payment/)
   })