From 81783866d1326b1862fd5e4a68d396a2222af050 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sat, 23 May 2026 14:53:47 +0100
Subject: [PATCH 01/21] feat(contribution): extract ContributionAmountField
 component

---
 app/components/ContributionAmountField.vue | 297 +++++++++++++++++++++
 1 file changed, 297 insertions(+)
 create mode 100644 app/components/ContributionAmountField.vue

diff --git a/app/components/ContributionAmountField.vue b/app/components/ContributionAmountField.vue
new file mode 100644
index 0000000..64485d6
--- /dev/null
+++ b/app/components/ContributionAmountField.vue
@@ -0,0 +1,297 @@
+<template>
+  <div class="contribution-amount-field">
+    <div v-if="allowCadenceChange" class="form-group">
+      <label class="form-label">How often</label>
+      <div class="cadence-radios">
+        <div class="circle-radio">
+          <input
+            :id="`${uid}-cadence-monthly`"
+            type="radio"
+            :name="`${uid}-cadence`"
+            value="monthly"
+            :checked="cadence === 'monthly'"
+            @change="onCadenceChange('monthly')"
+          >
+          <label :for="`${uid}-cadence-monthly`">
+            <span class="circle-label-name">Per Month</span>
+          </label>
+        </div>
+        <div class="circle-radio">
+          <input
+            :id="`${uid}-cadence-annual`"
+            type="radio"
+            :name="`${uid}-cadence`"
+            value="annual"
+            :checked="cadence === 'annual'"
+            @change="onCadenceChange('annual')"
+          >
+          <label :for="`${uid}-cadence-annual`">
+            <span class="circle-label-name">Per Year</span>
+          </label>
+        </div>
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label class="form-label" :for="`${uid}-amount`">Contribution</label>
+      <div class="contribution-input-row">
+        <span class="contribution-currency">$</span>
+        <input
+          :id="`${uid}-amount`"
+          :value="modelValue"
+          type="number"
+          min="0"
+          step="1"
+          inputmode="numeric"
+          class="contribution-input"
+          @input="onAmountInput"
+        >
+      </div>
+      <div
+        class="contribution-presets"
+        role="group"
+        aria-label="Suggested amounts"
+      >
+        <button
+          v-for="preset in presetChips"
+          :key="preset.amount"
+          type="button"
+          class="contribution-preset-chip"
+          :class="{ active: numericAmount === preset.amount }"
+          @click="selectPreset(preset.amount)"
+        >
+          ${{ preset.amount }}
+        </button>
+      </div>
+      <p v-if="guidanceLabel" class="contribution-guidance">
+        {{ guidanceLabel }}
+      </p>
+      <p v-if="showSoftMax" class="contribution-soft-max">
+        Whoa, that's a lot. Are you sure that's the amount you meant?
+      </p>
+    </div>
+
+    <div v-if="showSummary && numericAmount > 0" class="form-group">
+      <div class="billing-summary">
+        <p class="billing-summary-line">
+          You'll be charged <strong>${{ numericAmount }} today</strong>.
+        </p>
+        <p class="billing-summary-line">
+          Then <strong>${{ numericAmount }}</strong>
+          {{ cadence === 'annual' ? 'at each annual renewal.' : 'each month.' }}
+        </p>
+        <p v-if="summaryNote" class="billing-summary-line billing-summary-note">
+          {{ summaryNote }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, useId } from 'vue'
+import {
+  CONTRIBUTION_PRESETS,
+  getGuidanceLabel,
+} from '~/config/contributions.js'
+
+const props = defineProps({
+  modelValue: { type: Number, required: true },
+  cadence: { type: String, required: true },
+  allowCadenceChange: { type: Boolean, default: true },
+  showSummary: { type: Boolean, default: true },
+  summaryNote: { type: String, default: '' },
+})
+
+const emit = defineEmits(['update:modelValue', 'update:cadence'])
+
+const uid = useId()
+
+const numericAmount = computed(() => {
+  const n = Number(props.modelValue)
+  return Number.isFinite(n) ? n : 0
+})
+
+const monthlyEquivalent = computed(() =>
+  props.cadence === 'annual' ? numericAmount.value / 12 : numericAmount.value,
+)
+
+const presetChips = computed(() =>
+  CONTRIBUTION_PRESETS.map((p) => ({
+    amount: props.cadence === 'annual' ? p.amount * 12 : p.amount,
+    label: p.label,
+  })),
+)
+
+const guidanceLabel = computed(() => getGuidanceLabel(monthlyEquivalent.value))
+
+const showSoftMax = computed(() => monthlyEquivalent.value > 500)
+
+const onAmountInput = (event) => {
+  const raw = event.target.value
+  if (raw === '') {
+    emit('update:modelValue', 0)
+    return
+  }
+  const n = Number(raw)
+  emit('update:modelValue', Number.isFinite(n) ? n : 0)
+}
+
+const selectPreset = (amount) => {
+  emit('update:modelValue', amount)
+}
+
+// Annual→monthly snap: floor(annual/12)*12 keeps the amount cleanly divisible
+// before we divide, so toggling cadences never leaves fractional dollars.
+const onCadenceChange = (newCadence) => {
+  if (newCadence === props.cadence) return
+  const current = numericAmount.value
+  let next = current
+  if (newCadence === 'annual') {
+    next = current * 12
+  } else {
+    next = Math.floor(current / 12)
+  }
+  emit('update:cadence', newCadence)
+  emit('update:modelValue', next)
+}
+</script>
+
+<style scoped>
+.form-group {
+  margin-bottom: 16px;
+}
+.form-group:last-child {
+  margin-bottom: 0;
+}
+.form-label {
+  display: block;
+  margin-bottom: 6px;
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+}
+
+.cadence-radios {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+}
+.circle-radio {
+  position: relative;
+}
+.circle-radio input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.circle-radio label {
+  display: block;
+  border: 1px dashed var(--border);
+  padding: 14px 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+  text-align: center;
+}
+.circle-radio label:hover {
+  border-color: var(--candle-faint);
+}
+.circle-radio input:checked + label {
+  border-style: solid;
+  border-color: var(--candle);
+}
+.circle-radio input:checked + label .circle-label-name {
+  color: var(--text-bright);
+}
+.circle-label-name {
+  font-size: 12px;
+  color: var(--text-dim);
+  display: block;
+}
+
+.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;
+  color: var(--text-bright);
+}
+.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;
+  color: var(--text);
+}
+.contribution-preset-chip:hover {
+  border-style: solid;
+  border-color: var(--candle);
+}
+.contribution-preset-chip.active {
+  border-style: solid;
+  border-color: var(--candle);
+  background: var(--parch);
+  color: var(--text-bright);
+}
+
+.contribution-guidance {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  font-style: italic;
+  color: var(--text);
+}
+.contribution-soft-max {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  font-style: italic;
+  color: var(--ember);
+}
+
+.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;
+}
+.billing-summary-note {
+  color: var(--text-dim);
+  font-style: italic;
+}
+</style>

From f28558a4335f474473110e457c3120807479ba1a Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sat, 23 May 2026 14:58:39 +0100
Subject: [PATCH 02/21] fix(contribution): sanitize amount input and a11y
 polish

---
 app/components/ContributionAmountField.vue | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/app/components/ContributionAmountField.vue b/app/components/ContributionAmountField.vue
index 64485d6..2f564f1 100644
--- a/app/components/ContributionAmountField.vue
+++ b/app/components/ContributionAmountField.vue
@@ -58,6 +58,7 @@
           type="button"
           class="contribution-preset-chip"
           :class="{ active: numericAmount === preset.amount }"
+          :aria-pressed="numericAmount === preset.amount"
           @click="selectPreset(preset.amount)"
         >
           ${{ preset.amount }}
@@ -97,7 +98,11 @@ import {
 
 const props = defineProps({
   modelValue: { type: Number, required: true },
-  cadence: { type: String, required: true },
+  cadence: {
+    type: String,
+    required: true,
+    validator: (v) => v === 'monthly' || v === 'annual',
+  },
   allowCadenceChange: { type: Boolean, default: true },
   showSummary: { type: Boolean, default: true },
   summaryNote: { type: String, default: '' },
@@ -134,15 +139,14 @@ const onAmountInput = (event) => {
     return
   }
   const n = Number(raw)
-  emit('update:modelValue', Number.isFinite(n) ? n : 0)
+  const sanitized = Number.isFinite(n) ? Math.max(0, Math.trunc(n)) : 0
+  emit('update:modelValue', sanitized)
 }
 
 const selectPreset = (amount) => {
   emit('update:modelValue', amount)
 }
 
-// Annual→monthly snap: floor(annual/12)*12 keeps the amount cleanly divisible
-// before we divide, so toggling cadences never leaves fractional dollars.
 const onCadenceChange = (newCadence) => {
   if (newCadence === props.cadence) return
   const current = numericAmount.value

From 26ee1ca60d73ffd78d55642edb268758ce300d4a Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sat, 23 May 2026 15:01:54 +0100
Subject: [PATCH 03/21] feat(contribution): port join.vue to
 ContributionAmountField

Replace inline cadence radios, contribution input + presets, guidance
label, and billing summary with the shared ContributionAmountField
component. Removes duplicated state (guidanceLabel, firstCharge),
unused imports (CONTRIBUTION_PRESETS, getGuidanceLabel), and the
matching CSS rules. The parent retains the cadence ref because
formatContributionAmount (left-column tier list) reads it.
---
 app/pages/join.vue | 183 +++------------------------------------------
 1 file changed, 11 insertions(+), 172 deletions(-)

diff --git a/app/pages/join.vue b/app/pages/join.vue
index 26a2621..cae35fe 100644
--- a/app/pages/join.vue
+++ b/app/pages/join.vue
@@ -129,7 +129,7 @@
                   type="text"
                   placeholder="Your name"
                   required
-                />
+                >
               </div>
               <div class="form-group">
                 <label class="form-label" for="join-email">Email Address</label>
@@ -140,7 +140,7 @@
                   type="email"
                   placeholder="you@example.com"
                   required
-                />
+                >
               </div>
               <div class="form-group">
                 <label class="form-label">Circle</label>
@@ -152,7 +152,7 @@
                       type="radio"
                       name="circle"
                       value="community"
-                    />
+                    >
                     <label for="circle-community">
                       <span
                         class="circle-label-name"
@@ -169,7 +169,7 @@
                       type="radio"
                       name="circle"
                       value="founder"
-                    />
+                    >
                     <label for="circle-founder">
                       <span
                         class="circle-label-name"
@@ -186,7 +186,7 @@
                       type="radio"
                       name="circle"
                       value="practitioner"
-                    />
+                    >
                     <label for="circle-practitioner">
                       <span
                         class="circle-label-name"
@@ -198,90 +198,13 @@
                   </div>
                 </div>
               </div>
-              <div class="form-group">
-                <label class="form-label">Billing Cadence</label>
-                <div class="cadence-radios">
-                  <div class="circle-radio">
-                    <input
-                      id="cadence-monthly"
-                      v-model="cadence"
-                      type="radio"
-                      name="cadence"
-                      value="monthly"
-                    />
-                    <label for="cadence-monthly">
-                      <span class="circle-label-name">Per Month</span>
-                    </label>
-                  </div>
-                  <div class="circle-radio">
-                    <input
-                      id="cadence-annual"
-                      v-model="cadence"
-                      type="radio"
-                      name="cadence"
-                      value="annual"
-                    />
-                    <label for="cadence-annual">
-                      <span class="circle-label-name">Per Year</span>
-                    </label>
-                  </div>
-                </div>
-              </div>
-              <div class="form-group">
-                <label class="form-label" for="join-contribution">
-                  Monthly Contribution
-                </label>
-                <div class="contribution-input-row">
-                  <span class="contribution-currency">$</span>
-                  <input
-                    id="join-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>
-              <div v-if="form.contributionAmount > 0" class="form-group">
-                <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>
+              <ContributionAmountField
+                v-model="form.contributionAmount"
+                v-model:cadence="cadence"
+              />
               <div class="form-group full-width">
                 <label class="checkbox-label">
-                  <input v-model="form.agreedToGuidelines" type="checkbox" />
+                  <input v-model="form.agreedToGuidelines" type="checkbox" >
                   <span>
                     I agree to the Ghost Guild
                     <NuxtLink to="/community-guidelines" target="_blank"
@@ -385,11 +308,7 @@
 <script setup>
 import { reactive, ref, computed, onMounted, onUnmounted } from "vue";
 import { getCircleOptions } from "~/config/circles";
-import {
-  requiresPayment,
-  CONTRIBUTION_PRESETS,
-  getGuidanceLabel,
-} from "~/config/contributions";
+import { requiresPayment } from "~/config/contributions";
 
 useSiteMeta({
   title: "Join",
@@ -475,13 +394,6 @@ const needsPayment = computed(() => {
   return requiresPayment(form.contributionAmount);
 });
 
-const guidanceLabel = computed(() => getGuidanceLabel(form.contributionAmount));
-
-const firstCharge = computed(() => {
-  const amount = form.contributionAmount || 0;
-  return cadence.value === "annual" ? amount * 12 : amount;
-});
-
 const flowSummary = computed(() => ({
   name: form.name,
   email: form.email,
@@ -840,79 +752,6 @@ onUnmounted(() => {
   color: var(--text-faint);
 }
 
-/* ---- CADENCE RADIOS ---- */
-.cadence-radios {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 10px;
-}
-
-/* ---- 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;

From 2f229cbfa01ea7fd06d31df49f1abf450b512d58 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sat, 23 May 2026 15:08:03 +0100
Subject: [PATCH 04/21] test(join): align e2e with new ContributionAmountField

Add data-testid hooks for the contribution amount input and cadence
toggle labels so playwright can target them through useId-generated
ids. Update join-flow.spec.js to use the new selectors and to assert
the new billing-summary copy ('at each annual renewal' / 'each month'),
dropping the obsolete '/month x 12' parenthetical.
---
 app/components/ContributionAmountField.vue |  5 +++--
 e2e/join-flow.spec.js                      | 23 +++++++++++-----------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/app/components/ContributionAmountField.vue b/app/components/ContributionAmountField.vue
index 2f564f1..b8a331a 100644
--- a/app/components/ContributionAmountField.vue
+++ b/app/components/ContributionAmountField.vue
@@ -12,7 +12,7 @@
             :checked="cadence === 'monthly'"
             @change="onCadenceChange('monthly')"
           >
-          <label :for="`${uid}-cadence-monthly`">
+          <label :for="`${uid}-cadence-monthly`" data-testid="cadence-monthly">
             <span class="circle-label-name">Per Month</span>
           </label>
         </div>
@@ -25,7 +25,7 @@
             :checked="cadence === 'annual'"
             @change="onCadenceChange('annual')"
           >
-          <label :for="`${uid}-cadence-annual`">
+          <label :for="`${uid}-cadence-annual`" data-testid="cadence-annual">
             <span class="circle-label-name">Per Year</span>
           </label>
         </div>
@@ -44,6 +44,7 @@
           step="1"
           inputmode="numeric"
           class="contribution-input"
+          data-testid="contribution-amount"
           @input="onAmountInput"
         >
       </div>
diff --git a/e2e/join-flow.spec.js b/e2e/join-flow.spec.js
index 6369d1a..bb7de07 100644
--- a/e2e/join-flow.spec.js
+++ b/e2e/join-flow.spec.js
@@ -49,7 +49,7 @@ test.describe('Join page — member signup flow', () => {
     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('#join-contribution')).toBeVisible()
+    await expect(page.getByTestId('contribution-amount')).toBeVisible()
     await expect(page.locator('.form-submit')).toBeVisible()
   })
 
@@ -88,7 +88,7 @@ test.describe('Join page — member signup flow', () => {
     await page.locator('#join-email').fill(uniqueEmail)
     await page.locator('#circle-community').check({ force: true })
     // Contribution is now a numeric input with preset chips, not a select
-    await page.locator('#join-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()
@@ -108,18 +108,17 @@ test.describe('Join page — member signup flow', () => {
     await page.goto('/join')
     await page.waitForLoadState('networkidle')
 
-    await page.locator('#join-contribution').fill('10')
-    await page.locator('label[for="cadence-annual"]').click()
+    await page.getByTestId('contribution-amount').fill('10')
+    await page.getByTestId('cadence-annual').click()
 
     const summary = page.locator('.billing-summary')
     await expect(summary).toBeVisible()
     await expect(summary).toContainText('$120 today')
-    await expect(summary).toContainText('$10/month × 12')
-    await expect(summary).toContainText('$120 every year')
+    await expect(summary).toContainText('at each annual renewal')
 
-    await page.locator('label[for="cadence-monthly"]').click()
+    await page.getByTestId('cadence-monthly').click()
     await expect(summary).toContainText('$10 today')
-    await expect(summary).toContainText('$10 every month')
+    await expect(summary).toContainText('each month')
   })
 
   test('contribution guidance label changes with amount tier', async ({ page }) => {
@@ -128,10 +127,10 @@ test.describe('Join page — member signup flow', () => {
 
     const guidance = page.locator('.contribution-guidance')
 
-    await page.locator('#join-contribution').fill('5')
+    await page.getByTestId('contribution-amount').fill('5')
     await expect(guidance).toHaveText(/I can contribute/)
 
-    await page.locator('#join-contribution').fill('30')
+    await page.getByTestId('contribution-amount').fill('30')
     await expect(guidance).toHaveText(/I can support others too/)
   })
 
@@ -191,7 +190,7 @@ test.describe('Join page — member signup flow', () => {
     await page.locator('#join-name').fill('Paid E2E User')
     await page.locator('#join-email').fill(uniqueEmail)
     await page.locator('#circle-community').check({ force: true })
-    await page.locator('#join-contribution').fill('15')
+    await page.getByTestId('contribution-amount').fill('15')
     await page.getByRole('checkbox', { name: /Community Guidelines/ }).check()
 
     await expect(page.locator('.form-submit')).toBeEnabled()
@@ -214,7 +213,7 @@ test.describe('Join page — member signup flow', () => {
     await page.locator('#join-name').fill('Dup Test User')
     await page.locator('#join-email').fill(duplicateEmail)
     await page.locator('#circle-community').check({ force: true })
-    await page.locator('#join-contribution').fill('0')
+    await page.getByTestId('contribution-amount').fill('0')
     await page.getByRole('checkbox', { name: /Community Guidelines/ }).check()
     await page.locator('.form-submit').click()
 

From 3126ddb8ea67d8f341440c755f14b16bad49bda0 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sat, 23 May 2026 15:10:48 +0100
Subject: [PATCH 05/21] fix(join): format flowSummary contribution in cadence
 units

---
 app/pages/join.vue | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/pages/join.vue b/app/pages/join.vue
index cae35fe..8fbcd75 100644
--- a/app/pages/join.vue
+++ b/app/pages/join.vue
@@ -394,12 +394,16 @@ const needsPayment = computed(() => {
   return requiresPayment(form.contributionAmount);
 });
 
-const flowSummary = computed(() => ({
-  name: form.name,
-  email: form.email,
-  circle: form.circle,
-  contribution: formatContributionAmount(form.contributionAmount),
-}));
+const flowSummary = computed(() => {
+  const amount = form.contributionAmount || 0;
+  const suffix = cadence.value === "annual" ? "/yr" : "/mo";
+  return {
+    name: form.name,
+    email: form.email,
+    circle: form.circle,
+    contribution: amount > 0 ? `$${amount}${suffix}` : "$0",
+  };
+});
 
 const handleSubmit = async () => {
   if (isSubmitting.value || !isFormValid.value) return;

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 06/21] 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/)
   })

From 5023fb14adfc8d4f166a588defffc05f0f1f803d Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sat, 23 May 2026 15:37:52 +0100
Subject: [PATCH 07/21] =?UTF-8?q?fix(server):=20treat=20contributionAmount?=
 =?UTF-8?q?=20as=20cadence-unit=20(drop=20=C3=9712)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ContributionAmountField now emits cadence-unit values (180 for $180/yr,
15 for $15/mo). Server endpoints were still multiplying annual by 12,
which would have charged $2160/yr instead of $180/yr after the form
ports in Tasks 2–3.

- helcim/subscription.post.js: recurringAmount = contributionAmount
  (no more × 12 for annual)
- members/update-contribution.post.js: same drop in both Case 1
  (free→paid) and Case 3 (paid→paid)
- slack.ts notifyNewMember: new positional `cadence` param so the
  Slack notification suffix renders /yr or /mo instead of hardcoded
  /month; all three call sites updated to pass member.billingCadence
- tests updated to match the new contract:
  - helcim-subscription.test.js: annual tests now send the cadence-
    unit amount (180, 600) and expect the same recurringAmount
  - update-contribution.test.js: annual Case 1 and Case 3 tests
    updated likewise
---
 server/api/helcim/subscription.post.js         |  6 +++---
 server/api/members/create.post.js              |  1 +
 server/api/members/update-contribution.post.js |  4 ++--
 server/utils/slack.ts                          |  3 ++-
 tests/server/api/helcim-subscription.test.js   | 14 +++++++-------
 tests/server/api/update-contribution.test.js   | 18 +++++++++---------
 6 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/server/api/helcim/subscription.post.js b/server/api/helcim/subscription.post.js
index d02846f..63d9b6c 100644
--- a/server/api/helcim/subscription.post.js
+++ b/server/api/helcim/subscription.post.js
@@ -47,6 +47,7 @@ export default defineEventHandler(async (event) => {
             member.email,
             member.circle,
             member.contributionAmount,
+            member.billingCadence,
             'manual_invitation_required'
           )
         }
@@ -79,9 +80,7 @@ export default defineEventHandler(async (event) => {
 
     const cadence = body.cadence
     const paymentPlanId = getHelcimPlanId(cadence)
-    const recurringAmount = cadence === 'annual'
-      ? body.contributionAmount * 12
-      : body.contributionAmount
+    const recurringAmount = body.contributionAmount
 
     if (!paymentPlanId) {
       throw createError({
@@ -159,6 +158,7 @@ export default defineEventHandler(async (event) => {
           member.email,
           member.circle,
           member.contributionAmount,
+          member.billingCadence,
           'manual_invitation_required'
         )
       }
diff --git a/server/api/members/create.post.js b/server/api/members/create.post.js
index 9b78831..ee85350 100644
--- a/server/api/members/create.post.js
+++ b/server/api/members/create.post.js
@@ -43,6 +43,7 @@ export default defineEventHandler(async (event) => {
           member.email,
           member.circle,
           member.contributionAmount,
+          member.billingCadence,
           'manual_invitation_required'
         )
       }
diff --git a/server/api/members/update-contribution.post.js b/server/api/members/update-contribution.post.js
index 3e2c071..bc2bf4c 100644
--- a/server/api/members/update-contribution.post.js
+++ b/server/api/members/update-contribution.post.js
@@ -88,7 +88,7 @@ export default defineEventHandler(async (event) => {
             dateActivated: new Date().toISOString().split("T")[0],
             paymentPlanId: parseInt(paymentPlanId),
             customerCode,
-            recurringAmount: cadence === 'annual' ? newAmount * 12 : newAmount,
+            recurringAmount: newAmount,
             paymentMethod: "card",
           },
           idempotencyKey,
@@ -217,7 +217,7 @@ export default defineEventHandler(async (event) => {
       try {
         const subscriptionData = await updateHelcimSubscription(
           member.helcimSubscriptionId,
-          { recurringAmount: memberCadence === 'annual' ? newAmount * 12 : newAmount }
+          { recurringAmount: newAmount }
         );
 
         await Member.findByIdAndUpdate(
diff --git a/server/utils/slack.ts b/server/utils/slack.ts
index 2216e21..0211837 100644
--- a/server/utils/slack.ts
+++ b/server/utils/slack.ts
@@ -90,6 +90,7 @@ export class SlackService {
     memberEmail: string,
     circle: string,
     contributionAmount: number,
+    cadence: string = 'monthly',
     invitationStatus: string = "manual_invitation_required",
   ): Promise<void> {
     try {
@@ -148,7 +149,7 @@ export class SlackService {
               },
               {
                 type: "mrkdwn",
-                text: `*Contribution:*\n$${contributionAmount}/month`,
+                text: `*Contribution:*\n$${contributionAmount}/${cadence === 'annual' ? 'yr' : 'mo'}`,
               },
             ],
           },
diff --git a/tests/server/api/helcim-subscription.test.js b/tests/server/api/helcim-subscription.test.js
index 6845cd4..f755297 100644
--- a/tests/server/api/helcim-subscription.test.js
+++ b/tests/server/api/helcim-subscription.test.js
@@ -201,7 +201,7 @@ describe('helcim subscription endpoint', () => {
     expect(result.subscription.nextBillingDate).toBe('2026-06-01')
   })
 
-  it('annual $15 tier creates subscription with correct paymentPlanId and recurringAmount', async () => {
+  it('annual $180 tier creates subscription with correct paymentPlanId and recurringAmount', async () => {
     requireAuth.mockResolvedValue(undefined)
     requiresPayment.mockReturnValue(true)
     getHelcimPlanId.mockReturnValue('88888')
@@ -211,7 +211,7 @@ describe('helcim subscription endpoint', () => {
       email: 'annual@example.com',
       name: 'Annual User',
       circle: 'founder',
-      contributionAmount: 15,
+      contributionAmount: 180,
       status: 'active',
     }
     Member.findOneAndUpdate.mockResolvedValue({ _id: 'member-3', status: 'pending_payment' })
@@ -223,7 +223,7 @@ describe('helcim subscription endpoint', () => {
     const event = createMockEvent({
       method: 'POST',
       path: '/api/helcim/subscription',
-      body: { customerId: 'cust-1', contributionAmount: 15, customerCode: 'code-1', cardToken: 'tok-123', cadence: 'annual' }
+      body: { customerId: 'cust-1', contributionAmount: 180, customerCode: 'code-1', cardToken: 'tok-123', cadence: 'annual' }
     })
 
     const result = await subscriptionHandler(event)
@@ -235,13 +235,13 @@ describe('helcim subscription endpoint', () => {
     )
     expect(Member.findOneAndUpdate).toHaveBeenCalledWith(
       { helcimCustomerId: 'cust-1' },
-      { $set: expect.objectContaining({ billingCadence: 'annual', contributionAmount: 15, status: 'active' }) },
+      { $set: expect.objectContaining({ billingCadence: 'annual', contributionAmount: 180, status: 'active' }) },
       { new: false, runValidators: false, projection: { status: 1 } }
     )
     expect(Member.findById).toHaveBeenCalledWith('member-3')
   })
 
-  it('annual $50 tier recurringAmount is 600', async () => {
+  it('annual $600 tier recurringAmount is 600', async () => {
     requireAuth.mockResolvedValue(undefined)
     requiresPayment.mockReturnValue(true)
     getHelcimPlanId.mockReturnValue('88888')
@@ -251,7 +251,7 @@ describe('helcim subscription endpoint', () => {
       email: 'top@example.com',
       name: 'Top Tier',
       circle: 'practitioner',
-      contributionAmount: 50,
+      contributionAmount: 600,
       status: 'active',
     }
     Member.findOneAndUpdate.mockResolvedValue({ _id: 'member-4', status: 'pending_payment' })
@@ -263,7 +263,7 @@ describe('helcim subscription endpoint', () => {
     const event = createMockEvent({
       method: 'POST',
       path: '/api/helcim/subscription',
-      body: { customerId: 'cust-2', contributionAmount: 50, customerCode: 'code-2', cardToken: 'tok-456', cadence: 'annual' }
+      body: { customerId: 'cust-2', contributionAmount: 600, customerCode: 'code-2', cardToken: 'tok-456', cadence: 'annual' }
     })
 
     await subscriptionHandler(event)
diff --git a/tests/server/api/update-contribution.test.js b/tests/server/api/update-contribution.test.js
index 0519c44..c71e039 100644
--- a/tests/server/api/update-contribution.test.js
+++ b/tests/server/api/update-contribution.test.js
@@ -83,10 +83,10 @@ describe('update-contribution endpoint — Case 3 (paid→paid)', () => {
     expect(result.message).toBe('Successfully updated contribution level')
   })
 
-  it('annual $5 → $15: calls updateHelcimSubscription with recurringAmount 180', async () => {
+  it('annual $60 → $180: calls updateHelcimSubscription with recurringAmount 180', async () => {
     const mockMember = {
       _id: 'member-2',
-      contributionAmount: 5,
+      contributionAmount: 60,
       helcimSubscriptionId: 'sub-2',
       billingCadence: 'annual',
     }
@@ -97,7 +97,7 @@ describe('update-contribution endpoint — Case 3 (paid→paid)', () => {
     const event = createMockEvent({
       method: 'POST',
       path: '/api/members/update-contribution',
-      body: { contributionAmount: 15, cadence: 'annual' },
+      body: { contributionAmount: 180, cadence: 'annual' },
     })
 
     const result = await handler(event)
@@ -105,16 +105,16 @@ describe('update-contribution endpoint — Case 3 (paid→paid)', () => {
     expect(updateHelcimSubscription).toHaveBeenCalledWith('sub-2', { recurringAmount: 180 })
     expect(Member.findByIdAndUpdate).toHaveBeenCalledWith(
       'member-2',
-      { $set: { contributionAmount: 15 } },
+      { $set: { contributionAmount: 180 } },
       { runValidators: false }
     )
     expect(result.success).toBe(true)
   })
 
-  it('annual $15 → $50: calls updateHelcimSubscription with recurringAmount 600', async () => {
+  it('annual $180 → $600: calls updateHelcimSubscription with recurringAmount 600', async () => {
     const mockMember = {
       _id: 'member-3',
-      contributionAmount: 15,
+      contributionAmount: 180,
       helcimSubscriptionId: 'sub-3',
       billingCadence: 'annual',
     }
@@ -125,7 +125,7 @@ describe('update-contribution endpoint — Case 3 (paid→paid)', () => {
     const event = createMockEvent({
       method: 'POST',
       path: '/api/members/update-contribution',
-      body: { contributionAmount: 50, cadence: 'annual' },
+      body: { contributionAmount: 600, cadence: 'annual' },
     })
 
     await handler(event)
@@ -296,7 +296,7 @@ describe('update-contribution endpoint — Case 1 (free→paid)', () => {
     const event = createMockEvent({
       method: 'POST',
       path: '/api/members/update-contribution',
-      body: { contributionAmount: 15, cadence: 'annual' },
+      body: { contributionAmount: 180, cadence: 'annual' },
     })
 
     const result = await handler(event)
@@ -307,7 +307,7 @@ describe('update-contribution endpoint — Case 1 (free→paid)', () => {
     )
     expect(Member.findByIdAndUpdate).toHaveBeenCalledWith(
       'member-c1',
-      { $set: expect.objectContaining({ billingCadence: 'annual', contributionAmount: 15, helcimSubscriptionId: 'sub-annual' }) },
+      { $set: expect.objectContaining({ billingCadence: 'annual', contributionAmount: 180, helcimSubscriptionId: 'sub-annual' }) },
       { runValidators: false }
     )
     expect(result.success).toBe(true)

From 0dd68ff1aa3e2ef73b871cd97c102f7b9dd0a43c Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sat, 23 May 2026 15:47:10 +0100
Subject: [PATCH 08/21] fix(display): cadence-aware contribution suffix across
 UI + admin dashboard

Add formatContribution helper in app/config/contributions.js and route
all member-facing and admin contribution displays through cadence-aware
expressions so annual members see /yr instead of /mo. Normalize annual
amounts to monthly equivalents in the admin dashboard revenue
aggregate now that contributionAmount is stored in cadence units.
---
 app/config/contributions.js       |  9 +++++++++
 app/pages/admin/members/[id].vue  |  2 +-
 app/pages/admin/members/index.vue | 10 ++++++----
 app/pages/join.vue                |  4 ++--
 app/pages/member/dashboard.vue    |  6 ++++--
 server/api/admin/dashboard.get.js | 10 +++++++---
 6 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/app/config/contributions.js b/app/config/contributions.js
index 73005f1..ea60f98 100644
--- a/app/config/contributions.js
+++ b/app/config/contributions.js
@@ -20,3 +20,12 @@ export const getGuidanceLabel = (amount) => {
   const match = CONTRIBUTION_PRESETS.findLast(p => p.amount <= n)
   return match?.label ?? null
 }
+
+// Format a contribution amount with cadence-aware suffix.
+// amount is interpreted in cadence units (e.g. 180 + 'annual' → "$180/yr").
+export const formatContribution = (amount, cadence) => {
+  const n = Number(amount) || 0
+  if (n === 0) return '$0'
+  const suffix = cadence === 'annual' ? '/yr' : '/mo'
+  return `$${n}${suffix}`
+}
diff --git a/app/pages/admin/members/[id].vue b/app/pages/admin/members/[id].vue
index e082be7..76d650b 100644
--- a/app/pages/admin/members/[id].vue
+++ b/app/pages/admin/members/[id].vue
@@ -54,7 +54,7 @@
                 </select>
               </div>
               <div class="field">
-                <label>Contribution ($/mo)</label>
+                <label>Contribution ({{ member.billingCadence === 'annual' ? '$/yr' : '$/mo' }})</label>
                 <input v-model.number="form.contributionAmount" type="number" min="0" step="1">
                 <p class="field-hint field-hint--warn">
                   Writes to our database only. If the member is on a paid plan, also update <code>recurringAmount</code> in the Helcim dashboard — this form does not sync.
diff --git a/app/pages/admin/members/index.vue b/app/pages/admin/members/index.vue
index d602447..eefc723 100644
--- a/app/pages/admin/members/index.vue
+++ b/app/pages/admin/members/index.vue
@@ -111,7 +111,7 @@
             <td>
               <CircleBadge :circle="member.circle" />
             </td>
-            <td class="col-mono">${{ member.contributionAmount ?? 0 }}/mo</td>
+            <td class="col-mono">${{ member.contributionAmount ?? 0 }}{{ member.billingCadence === 'annual' ? '/yr' : '/mo' }}</td>
             <td>
               <span class="badge status" :class="`status-${member.status || 'pending_payment'}`">{{ statusLabel(member.status) }}</span>
             </td>
@@ -192,7 +192,7 @@
             </select>
           </div>
           <div class="field">
-            <label>Contribution ($/mo)</label>
+            <label>Contribution ({{ newMember.billingCadence === 'annual' ? '$/yr' : '$/mo' }})</label>
             <input v-model.number="newMember.contributionAmount" type="number" min="0" step="1">
           </div>
           <div class="modal-actions">
@@ -286,7 +286,7 @@
                     <td>{{ row.name }}</td>
                     <td class="col-email">{{ row.email }}</td>
                     <td>{{ row.circle }}</td>
-                    <td>${{ row.contributionAmount }}/mo</td>
+                    <td>${{ row.contributionAmount }}{{ row.billingCadence === 'annual' ? '/yr' : '/mo' }}</td>
                   </tr>
                 </tbody>
               </table>
@@ -366,7 +366,7 @@
             </select>
           </div>
           <div class="field">
-            <label>Contribution ($/mo)</label>
+            <label>Contribution ({{ editingMember.billingCadence === 'annual' ? '$/yr' : '$/mo' }})</label>
             <input v-model.number="editingMember.contributionAmount" type="number" min="0" step="1">
           </div>
           <div class="field">
@@ -860,6 +860,7 @@ const editingMember = reactive({
   email: "",
   circle: "community",
   contributionAmount: 0,
+  billingCadence: "monthly",
   status: "pending_payment",
 });
 
@@ -870,6 +871,7 @@ const editMember = (member) => {
     email: member.email,
     circle: member.circle,
     contributionAmount: member.contributionAmount ?? 0,
+    billingCadence: member.billingCadence || "monthly",
     status: member.status || "pending_payment",
   });
   showEditModal.value = true;
diff --git a/app/pages/join.vue b/app/pages/join.vue
index 8fbcd75..51d5eab 100644
--- a/app/pages/join.vue
+++ b/app/pages/join.vue
@@ -32,7 +32,7 @@
           <DashedBox :hoverable="false">
             <div class="section-label">Contribution</div>
             <div class="info-value">
-              ${{ memberData?.contributionAmount ?? 0 }} CAD/month
+              {{ formatContribution(memberData?.contributionAmount ?? 0, memberData?.billingCadence) }} CAD
             </div>
           </DashedBox>
         </div>
@@ -308,7 +308,7 @@
 <script setup>
 import { reactive, ref, computed, onMounted, onUnmounted } from "vue";
 import { getCircleOptions } from "~/config/circles";
-import { requiresPayment } from "~/config/contributions";
+import { requiresPayment, formatContribution } from "~/config/contributions";
 
 useSiteMeta({
   title: "Join",
diff --git a/app/pages/member/dashboard.vue b/app/pages/member/dashboard.vue
index a1f45e5..4fad78a 100644
--- a/app/pages/member/dashboard.vue
+++ b/app/pages/member/dashboard.vue
@@ -36,7 +36,7 @@
           <PageHeader :title="welcomeTitle">
             <div class="dashboard-meta">
               <CircleBadge :circle="memberData?.circle || 'community'" />
-              <span>${{ memberData?.contributionAmount ?? 0 }} CAD/mo</span>
+              <span>{{ formatContribution(memberData?.contributionAmount ?? 0, memberData?.billingCadence) }} CAD</span>
             </div>
             <p v-if="showSlackComingNote" class="slack-coming-note">
               Slack workspace access is part of your membership. Invitations are
@@ -171,7 +171,7 @@
               <div class="membership-row">
                 <span class="key">Contribution</span>
                 <span class="val"
-                  >${{ memberData?.contributionAmount ?? 0 }} CAD/month</span
+                  >{{ formatContribution(memberData?.contributionAmount ?? 0, memberData?.billingCadence) }} CAD</span
                 >
               </div>
               <div class="membership-row">
@@ -220,6 +220,8 @@
 </template>
 
 <script setup>
+import { formatContribution } from '~/config/contributions';
+
 useSiteMeta({ title: 'Dashboard', noindex: true });
 
 const { memberData, checkMemberStatus } = useAuth();
diff --git a/server/api/admin/dashboard.get.js b/server/api/admin/dashboard.get.js
index 41fe694..5e392b7 100644
--- a/server/api/admin/dashboard.get.js
+++ b/server/api/admin/dashboard.get.js
@@ -16,10 +16,14 @@ export default defineEventHandler(async (event) => {
       endDate: { $gte: now }
     })
 
-    // Calculate monthly revenue from member contributions
-    const members = await Member.find({}, 'contributionAmount').lean()
+    // Calculate monthly revenue from member contributions.
+    // contributionAmount is stored in cadence units (monthly = $/mo, annual = $/yr),
+    // so normalize annual amounts to monthly equivalents before summing.
+    const members = await Member.find({}, 'contributionAmount billingCadence').lean()
     const monthlyRevenue = members.reduce((total, member) => {
-      return total + (member.contributionAmount || 0)
+      const amt = member.contributionAmount || 0
+      const monthlyEquivalent = member.billingCadence === 'annual' ? amt / 12 : amt
+      return total + monthlyEquivalent
     }, 0)
 
     const pendingSlackInvites = await Member.countDocuments({ slackInvited: false })

From f8487738878b34993ce3f26994627e5e5c11b828 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sat, 23 May 2026 15:52:26 +0100
Subject: [PATCH 09/21] fix(admin): round monthlyRevenue and drop dead cadence
 ternaries

---
 app/pages/admin/members/index.vue | 4 ++--
 server/api/admin/dashboard.get.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/pages/admin/members/index.vue b/app/pages/admin/members/index.vue
index eefc723..95e2066 100644
--- a/app/pages/admin/members/index.vue
+++ b/app/pages/admin/members/index.vue
@@ -192,7 +192,7 @@
             </select>
           </div>
           <div class="field">
-            <label>Contribution ({{ newMember.billingCadence === 'annual' ? '$/yr' : '$/mo' }})</label>
+            <label>Contribution ($/mo)</label>
             <input v-model.number="newMember.contributionAmount" type="number" min="0" step="1">
           </div>
           <div class="modal-actions">
@@ -286,7 +286,7 @@
                     <td>{{ row.name }}</td>
                     <td class="col-email">{{ row.email }}</td>
                     <td>{{ row.circle }}</td>
-                    <td>${{ row.contributionAmount }}{{ row.billingCadence === 'annual' ? '/yr' : '/mo' }}</td>
+                    <td>${{ row.contributionAmount }}/mo</td>
                   </tr>
                 </tbody>
               </table>
diff --git a/server/api/admin/dashboard.get.js b/server/api/admin/dashboard.get.js
index 5e392b7..4d62c85 100644
--- a/server/api/admin/dashboard.get.js
+++ b/server/api/admin/dashboard.get.js
@@ -46,7 +46,7 @@ export default defineEventHandler(async (event) => {
       stats: {
         totalMembers,
         activeEvents,
-        monthlyRevenue,
+        monthlyRevenue: Math.round(monthlyRevenue),
         pendingSlackInvites
       },
       recentMembers,

From aa6a176fb93b63ca5d682d56c103b87ae9b5fdf9 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sat, 23 May 2026 15:54:51 +0100
Subject: [PATCH 10/21] feat(migration): convert annual contributionAmount to
 cadence-unit
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

One-time script to convert existing annual Member records from the legacy
monthly-equivalent interpretation to cadence-unit. Multiplies
contributionAmount by 12 for billingCadence='annual' members.

Companion to commit 5023fb1 which dropped the server's ×12 on annual
recurringAmount. Must run after deploy, before annual members renew.

Idempotent via a transient `contributionAmountConverted: true` marker
field on each migrated doc — re-runs are safe. Dry-run by default;
`--apply` to write. Skips null/undefined contributionAmount, logs $0
amounts as no-ops.
---
 ...te-annual-contribution-to-cadence-unit.cjs | 112 ++++++++++++++++++
 1 file changed, 112 insertions(+)
 create mode 100644 scripts/migrate-annual-contribution-to-cadence-unit.cjs

diff --git a/scripts/migrate-annual-contribution-to-cadence-unit.cjs b/scripts/migrate-annual-contribution-to-cadence-unit.cjs
new file mode 100644
index 0000000..ed3d02a
--- /dev/null
+++ b/scripts/migrate-annual-contribution-to-cadence-unit.cjs
@@ -0,0 +1,112 @@
+/**
+ * One-time migration: convert Member.contributionAmount from monthly-equivalent
+ * to cadence-unit for billingCadence='annual' members. After this migration,
+ * an annual member with contributionAmount=180 means "$180/year" (vs the old
+ * interpretation "$15/month × 12 = $180/year").
+ *
+ * Companion to commit 5023fb1 which dropped × 12 from the server's recurringAmount
+ * computation. Run AFTER deploying the new server code, BEFORE annual members
+ * try to renew or update.
+ *
+ * IDEMPOTENT via a transient marker field (`contributionAmountConverted: true`).
+ * The script only acts on rows where this flag is not set, so re-running is
+ * safe — the second run will find 0 unconverted rows.
+ *
+ * Trade-off: this pollutes the schema with a transient field. A follow-up
+ * migration can $unset `contributionAmountConverted` from all docs once every
+ * environment is confirmed migrated. The field is harmless if left in place.
+ * (Option A from Task 9's plan — chosen because no migration-tracking
+ * collection exists in this codebase.)
+ *
+ * Usage:
+ *   node scripts/migrate-annual-contribution-to-cadence-unit.cjs            # dry-run
+ *   node scripts/migrate-annual-contribution-to-cadence-unit.cjs --apply    # writes
+ */
+require('dotenv').config()
+const mongoose = require('mongoose')
+
+async function run() {
+  const apply = process.argv.includes('--apply')
+  if (!process.env.MONGODB_URI) {
+    console.error('MONGODB_URI not set in environment')
+    process.exit(1)
+  }
+
+  await mongoose.connect(process.env.MONGODB_URI)
+  const db = mongoose.connection.db
+  const col = db.collection('members')
+
+  // Find annual members that haven't been converted yet.
+  const filter = {
+    billingCadence: 'annual',
+    contributionAmountConverted: { $ne: true },
+  }
+  const legacyCount = await col.countDocuments(filter)
+  console.log(`Found ${legacyCount} annual members not yet converted`)
+
+  if (legacyCount === 0) {
+    console.log('Nothing to migrate.')
+    await mongoose.disconnect()
+    return
+  }
+
+  const cursor = col.find(filter)
+  let updated = 0
+  let skipped = 0
+
+  while (await cursor.hasNext()) {
+    const doc = await cursor.next()
+    const current = doc.contributionAmount
+
+    if (current === null || current === undefined) {
+      console.warn(`  SKIP ${doc._id}: contributionAmount is ${current}`)
+      skipped++
+      continue
+    }
+
+    if (!Number.isInteger(current) || current < 0) {
+      console.warn(
+        `  SKIP ${doc._id}: contributionAmount=${JSON.stringify(current)} is not a non-negative integer`,
+      )
+      skipped++
+      continue
+    }
+
+    const next = current * 12
+
+    if (current === 0) {
+      console.log(`  ${doc._id}: contributionAmount=0, no change (still 0 after ×12)`)
+    } else {
+      console.log(
+        `  ${apply ? 'Update' : 'Would update'} ${doc._id}: contributionAmount ${current} → ${next}`,
+      )
+    }
+
+    if (apply) {
+      await col.updateOne(
+        { _id: doc._id },
+        {
+          $set: {
+            contributionAmount: next,
+            contributionAmountConverted: true,
+          },
+        },
+      )
+    }
+    updated++
+  }
+
+  console.log(
+    `\n${apply ? 'Updated' : 'Would update'} ${updated} documents, skipped ${skipped}`,
+  )
+  if (!apply) console.log('Dry-run complete. Re-run with --apply to write changes.')
+  await mongoose.disconnect()
+}
+
+run().catch(async (err) => {
+  console.error(err)
+  try {
+    await mongoose.disconnect()
+  } catch {}
+  process.exit(1)
+})

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 11/21] 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;

From 1079e8212fad10f43acb8d772fdf629e9e6adf15 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sat, 23 May 2026 16:05:15 +0100
Subject: [PATCH 12/21] feat(forms): tighten labels and add Circle helper text

- join.vue: "Full Name" -> "Name", "Email Address" -> "Email", drop redundant "Your name" placeholder
- join.vue + accept-invite.vue: unify Circle helper copy to "Where you are in your co-op journey. You can change this anytime."
- join.vue: add .field-note style rule for the new helper paragraph
---
 app/pages/accept-invite.vue |  2 +-
 app/pages/join.vue          | 13 ++++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/app/pages/accept-invite.vue b/app/pages/accept-invite.vue
index 7f88eb3..e5e0f04 100644
--- a/app/pages/accept-invite.vue
+++ b/app/pages/accept-invite.vue
@@ -68,7 +68,7 @@
 
           <div class="form-group full-width">
             <label class="form-label">Circle</label>
-            <p class="field-note" style="margin-bottom: 8px">Which circle fits where you are right now?</p>
+            <p class="field-note" style="margin-bottom: 8px">Where you are in your co-op journey. You can change this anytime.</p>
             <div class="circle-radios">
               <div class="circle-radio community">
                 <input
diff --git a/app/pages/join.vue b/app/pages/join.vue
index 51d5eab..eb33733 100644
--- a/app/pages/join.vue
+++ b/app/pages/join.vue
@@ -121,18 +121,17 @@
           <form @submit.prevent="handleSubmit">
             <div class="form-stack">
               <div class="form-group">
-                <label class="form-label" for="join-name">Full Name</label>
+                <label class="form-label" for="join-name">Name</label>
                 <input
                   id="join-name"
                   v-model="form.name"
                   class="form-input"
                   type="text"
-                  placeholder="Your name"
                   required
                 >
               </div>
               <div class="form-group">
-                <label class="form-label" for="join-email">Email Address</label>
+                <label class="form-label" for="join-email">Email</label>
                 <input
                   id="join-email"
                   v-model="form.email"
@@ -144,6 +143,7 @@
               </div>
               <div class="form-group">
                 <label class="form-label">Circle</label>
+                <p class="field-note">Where you are in your co-op journey. You can change this anytime.</p>
                 <div class="circle-radios">
                   <div class="circle-radio community">
                     <input
@@ -627,6 +627,13 @@ onUnmounted(() => {
   margin-top: 10px;
   line-height: 1.6;
 }
+.field-note {
+  font-size: 10px;
+  color: var(--text-faint);
+  margin-top: 4px;
+  margin-bottom: 8px;
+  line-height: 1.4;
+}
 
 /* ---- TWO-COLUMN JOIN LAYOUT ---- */
 .join-two-col {

From 10f8cab6e3c2c2f2d5fc14890d06cddf07dc81c8 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sat, 23 May 2026 16:09:36 +0100
Subject: [PATCH 13/21] feat(forms): add inline blur validation for name and
 email

---
 app/pages/accept-invite.vue  | 16 ++++++++++++++++
 app/pages/join.vue           | 28 ++++++++++++++++++++++++++++
 app/pages/member/account.vue | 22 ++++++++++++++++++++++
 3 files changed, 66 insertions(+)

diff --git a/app/pages/accept-invite.vue b/app/pages/accept-invite.vue
index e5e0f04..ba6b655 100644
--- a/app/pages/accept-invite.vue
+++ b/app/pages/accept-invite.vue
@@ -32,7 +32,10 @@
               class="form-input"
               type="text"
               required
+              @blur="validateName"
+              @input="if (fieldErrors.name) fieldErrors.name = ''"
             >
+            <p v-if="fieldErrors.name" class="field-error">{{ fieldErrors.name }}</p>
           </div>
           <div class="form-group">
             <label class="form-label" for="accept-email">Email</label>
@@ -201,6 +204,13 @@ const form = reactive({
   agreedToGuidelines: false,
 });
 
+// Inline blur validation (UI feedback only — does not block submission)
+const fieldErrors = reactive({ name: "" });
+
+const validateName = () => {
+  fieldErrors.name = form.name.trim() ? "" : "Please enter your name.";
+};
+
 const isFormValid = computed(() => {
   return (
     form.name &&
@@ -447,6 +457,12 @@ textarea.form-input {
   line-height: 1.4;
 }
 
+.field-error {
+  font-size: 11px;
+  color: var(--ember);
+  margin-top: 4px;
+}
+
 /* ---- CIRCLE RADIOS ---- */
 .circle-radios {
   display: grid;
diff --git a/app/pages/join.vue b/app/pages/join.vue
index eb33733..6a1df14 100644
--- a/app/pages/join.vue
+++ b/app/pages/join.vue
@@ -128,7 +128,10 @@
                   class="form-input"
                   type="text"
                   required
+                  @blur="validateName"
+                  @input="if (fieldErrors.name) fieldErrors.name = ''"
                 >
+                <p v-if="fieldErrors.name" class="field-error">{{ fieldErrors.name }}</p>
               </div>
               <div class="form-group">
                 <label class="form-label" for="join-email">Email</label>
@@ -139,7 +142,10 @@
                   type="email"
                   placeholder="you@example.com"
                   required
+                  @blur="validateEmail"
+                  @input="if (fieldErrors.email) fieldErrors.email = ''"
                 >
+                <p v-if="fieldErrors.email" class="field-error">{{ fieldErrors.email }}</p>
               </div>
               <div class="form-group">
                 <label class="form-label">Circle</label>
@@ -346,6 +352,23 @@ const errorMessage = ref("");
 const successMessage = ref("");
 const cadence = ref("monthly"); // 'monthly' | 'annual'
 
+// Inline blur validation (UI feedback only — does not block submission)
+const fieldErrors = reactive({ name: "", email: "" });
+
+const validateName = () => {
+  fieldErrors.name = form.name.trim() ? "" : "Please enter your name.";
+};
+
+const validateEmail = () => {
+  const value = form.email.trim();
+  if (!value) {
+    fieldErrors.email = "";
+    return;
+  }
+  const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+  fieldErrors.email = ok ? "" : "Please enter a valid email address.";
+};
+
 // Flow overlay state — drives the post-submit full-viewport UI.
 // 'idle' = overlay hidden; user is editing the form.
 // 'creating-customer' | 'opening-payment' | 'processing-payment'
@@ -762,6 +785,11 @@ onUnmounted(() => {
 .form-input::placeholder {
   color: var(--text-faint);
 }
+.field-error {
+  font-size: 11px;
+  color: var(--ember);
+  margin-top: 4px;
+}
 
 /* ---- CIRCLE RADIOS ---- */
 .circle-radios {
diff --git a/app/pages/member/account.vue b/app/pages/member/account.vue
index 370f622..048fed9 100644
--- a/app/pages/member/account.vue
+++ b/app/pages/member/account.vue
@@ -173,9 +173,12 @@
                     type="email"
                     placeholder="you@example.com"
                     autofocus
+                    @blur="validateNewEmail"
+                    @input="if (fieldErrors.email) fieldErrors.email = ''"
                     @keydown.enter="handleUpdateEmail"
                     @keydown.escape="cancelEmailEdit"
                   >
+                  <p v-if="fieldErrors.email" class="field-error">{{ fieldErrors.email }}</p>
                 </div>
                 <div class="email-edit-actions">
                   <button
@@ -317,6 +320,19 @@ const showEmailEdit = ref(false);
 const newEmail = ref("");
 const isUpdatingEmail = ref(false);
 
+// Inline blur validation (UI feedback only — does not block submission)
+const fieldErrors = reactive({ email: "" });
+
+const validateNewEmail = () => {
+  const value = newEmail.value.trim();
+  if (!value) {
+    fieldErrors.email = "";
+    return;
+  }
+  const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+  fieldErrors.email = ok ? "" : "Please enter a valid email address.";
+};
+
 // Payment history state
 const paymentHistory = ref([]);
 const paymentHistoryLoading = ref(false);
@@ -516,6 +532,7 @@ const handleUpdateCircle = async () => {
 const cancelEmailEdit = () => {
   showEmailEdit.value = false;
   newEmail.value = "";
+  fieldErrors.email = "";
 };
 
 const handleUpdateEmail = async () => {
@@ -823,6 +840,11 @@ const confirmCancelMembership = async () => {
 .email-edit .field input:focus {
   border-color: var(--candle);
 }
+.email-edit .field .field-error {
+  font-size: 11px;
+  color: var(--ember);
+  margin-top: 4px;
+}
 .email-edit-actions {
   display: flex;
   gap: 8px;

From e5f1e9f95e10a2d756d0078ce5f95ce440cfddf3 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sat, 23 May 2026 16:18:32 +0100
Subject: [PATCH 14/21] fix(activity): cadence-aware suffixes on contribution
 log entries

---
 app/utils/activityText.js                     | 22 ++++++++++++-------
 server/api/helcim/subscription.post.js        |  4 ++--
 .../api/members/update-contribution.post.js   |  2 +-
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/app/utils/activityText.js b/app/utils/activityText.js
index a2d9ac1..3f368cd 100644
--- a/app/utils/activityText.js
+++ b/app/utils/activityText.js
@@ -27,10 +27,13 @@ const formatters = {
     text: `Changed circle from ${circleLabel(m.from)} to ${circleLabel(m.to)}`,
     icon: 'i-lucide-refresh-cw'
   }),
-  contribution_changed: (m) => ({
-    text: `Changed contribution from $${m.from}/mo to $${m.to}/mo`,
-    icon: 'i-lucide-coins'
-  }),
+  contribution_changed: (m) => {
+    const suffix = m.cadence === 'annual' ? '/yr' : '/mo'
+    return {
+      text: `Changed contribution from $${m.from}${suffix} to $${m.to}${suffix}`,
+      icon: 'i-lucide-coins'
+    }
+  },
   email_changed: (m) => ({
     text: `Changed email address`,
     icon: 'i-lucide-mail'
@@ -41,10 +44,13 @@ const formatters = {
       : 'Updated profile',
     icon: 'i-lucide-user-pen'
   }),
-  subscription_created: (m) => ({
-    text: m.amount != null ? `Started $${m.amount}/mo subscription` : 'Started subscription',
-    icon: 'i-lucide-credit-card'
-  }),
+  subscription_created: (m) => {
+    const suffix = m.cadence === 'annual' ? '/yr' : '/mo'
+    return {
+      text: m.amount != null ? `Started $${m.amount}${suffix} subscription` : 'Started subscription',
+      icon: 'i-lucide-credit-card'
+    }
+  },
   subscription_cancelled: () => ({
     text: 'Cancelled subscription',
     icon: 'i-lucide-credit-card'
diff --git a/server/api/helcim/subscription.post.js b/server/api/helcim/subscription.post.js
index 63d9b6c..b669b23 100644
--- a/server/api/helcim/subscription.post.js
+++ b/server/api/helcim/subscription.post.js
@@ -36,7 +36,7 @@ export default defineEventHandler(async (event) => {
       const isFirstActivation = preMember?.status === 'pending_payment'
       const member = await Member.findById(preMember._id)
 
-      logActivity(member._id, 'subscription_created', { amount: body.contributionAmount })
+      logActivity(member._id, 'subscription_created', { amount: body.contributionAmount, cadence: body.cadence })
 
       await autoFlagPreExistingSlackAccess(member)
       try {
@@ -134,7 +134,7 @@ export default defineEventHandler(async (event) => {
     const isFirstActivation = preMember?.status === 'pending_payment'
     const member = await Member.findById(preMember._id)
 
-    logActivity(member._id, 'subscription_created', { amount: body.contributionAmount })
+    logActivity(member._id, 'subscription_created', { amount: body.contributionAmount, cadence: body.cadence })
 
     try {
       const txs = await listHelcimCustomerTransactions(body.customerCode)
diff --git a/server/api/members/update-contribution.post.js b/server/api/members/update-contribution.post.js
index bc2bf4c..79f4542 100644
--- a/server/api/members/update-contribution.post.js
+++ b/server/api/members/update-contribution.post.js
@@ -35,7 +35,7 @@ export default defineEventHandler(async (event) => {
 
     // Log contribution change (fire-and-forget, at the top so it logs regardless of which case path executes)
     const logContributionChange = () => {
-      logActivity(member._id, 'contribution_changed', { from: oldAmount, to: newAmount })
+      logActivity(member._id, 'contribution_changed', { from: oldAmount, to: newAmount, cadence: body.cadence })
     }
 
     const oldRequiresPayment = requiresPayment(oldAmount);

From 5d4321612fe6bad91ea94953396e0db88adcd35e Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sat, 23 May 2026 18:49:22 +0100
Subject: [PATCH 15/21] fix(forms): use expression form for conditional
 fieldError reset

Vue template attribute expressions don't allow if-statements; the
short-circuit form (`x && (x = '')`) is the idiomatic equivalent and
runs without a template compiler warning.
---
 app/pages/accept-invite.vue  | 2 +-
 app/pages/join.vue           | 4 ++--
 app/pages/member/account.vue | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/pages/accept-invite.vue b/app/pages/accept-invite.vue
index ba6b655..080ee0d 100644
--- a/app/pages/accept-invite.vue
+++ b/app/pages/accept-invite.vue
@@ -33,7 +33,7 @@
               type="text"
               required
               @blur="validateName"
-              @input="if (fieldErrors.name) fieldErrors.name = ''"
+              @input="fieldErrors.name && (fieldErrors.name = '')"
             >
             <p v-if="fieldErrors.name" class="field-error">{{ fieldErrors.name }}</p>
           </div>
diff --git a/app/pages/join.vue b/app/pages/join.vue
index 6a1df14..a84912b 100644
--- a/app/pages/join.vue
+++ b/app/pages/join.vue
@@ -129,7 +129,7 @@
                   type="text"
                   required
                   @blur="validateName"
-                  @input="if (fieldErrors.name) fieldErrors.name = ''"
+                  @input="fieldErrors.name && (fieldErrors.name = '')"
                 >
                 <p v-if="fieldErrors.name" class="field-error">{{ fieldErrors.name }}</p>
               </div>
@@ -143,7 +143,7 @@
                   placeholder="you@example.com"
                   required
                   @blur="validateEmail"
-                  @input="if (fieldErrors.email) fieldErrors.email = ''"
+                  @input="fieldErrors.email && (fieldErrors.email = '')"
                 >
                 <p v-if="fieldErrors.email" class="field-error">{{ fieldErrors.email }}</p>
               </div>
diff --git a/app/pages/member/account.vue b/app/pages/member/account.vue
index 048fed9..3dd4642 100644
--- a/app/pages/member/account.vue
+++ b/app/pages/member/account.vue
@@ -174,7 +174,7 @@
                     placeholder="you@example.com"
                     autofocus
                     @blur="validateNewEmail"
-                    @input="if (fieldErrors.email) fieldErrors.email = ''"
+                    @input="fieldErrors.email && (fieldErrors.email = '')"
                     @keydown.enter="handleUpdateEmail"
                     @keydown.escape="cancelEmailEdit"
                   >

From c85b2ae3d993b713ca00e4f1ce163f831b80e4ab Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sat, 23 May 2026 18:49:55 +0100
Subject: [PATCH 16/21] feat(api): default helcim customer circle to community
 when omitted

Lets the join form omit circle from the signup payload (circle picker
moves to a post-signup prompt per docs/specs/join-form-redesign.md).
Mongoose Member.circle is required with no default, so the Zod
default fills it in before reaching the model.
---
 server/utils/schemas.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/utils/schemas.js b/server/utils/schemas.js
index 322bbd4..84ccf96 100644
--- a/server/utils/schemas.js
+++ b/server/utils/schemas.js
@@ -61,7 +61,7 @@ export const helcimCreatePlanSchema = z.object({
 export const helcimCustomerSchema = z.object({
   name: z.string().min(1).max(200),
   email: z.string().trim().toLowerCase().email(),
-  circle: z.enum(['community', 'founder', 'practitioner']).optional(),
+  circle: z.enum(['community', 'founder', 'practitioner']).optional().default('community'),
   contributionAmount: z.number().int().min(0).optional(),
   agreedToGuidelines: z.literal(true)
 })

From fee595981853d4d92396b4eb927c5aabd9ff969d Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sat, 23 May 2026 18:57:11 +0100
Subject: [PATCH 17/21] feat(join): redesign /join page with split hero and
 unified contribution list
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Restructures /join.vue per docs/specs/join-form-redesign.md:

- Split hero (1fr 1fr) matching about.vue rhythm: H1 + tagline on left,
  "What you get" benefits on right (including "Pick your circle anytime
  after signup")
- Form section (1fr 1fr): form on left, "About the money" trust copy on
  right
- Inline PWYC editorial list with visually-hidden radio inputs for
  keyboard accessibility; cadence-aware preset amounts ($0/$5/$15/$30/$50
  monthly, ×12 annual); $15 row tagged "Suggested"
- Custom-amount row commits on blur and snaps to matching preset
- Cadence toggle (Monthly · Annual) in the section header; switching
  multiplies/floor-divides both form.contributionAmount and the custom
  amount display
- Removed: circle radio picker (defers to post-signup), ParchmentInset
  "How membership works", bottom three-circle row
- Submit row: bare agreement checkbox + auto-width button, wraps at 480px
- form.circle stays initialized to "community" and submits unchanged

Tests updated for new markup (radio ids #pwyc-N, .submit-btn class).
Cadence/billing-summary and contribution-guidance tests retired with
the ContributionAmountField usage on this page.
---
 app/pages/join.vue    | 1382 +++++++++++++++++++++--------------------
 e2e/join-flow.spec.js |   82 +--
 2 files changed, 742 insertions(+), 722 deletions(-)

diff --git a/app/pages/join.vue b/app/pages/join.vue
index a84912b..2ba29de 100644
--- a/app/pages/join.vue
+++ b/app/pages/join.vue
@@ -1,14 +1,5 @@
 <template>
   <div>
-    <!-- HERO -->
-    <div class="hero">
-      <h1>Join Ghost Guild</h1>
-      <p>
-        Resources, events, and a community of people figuring it out. Everyone
-        gets everything. Pay what you can.
-      </p>
-    </div>
-
     <!-- Already a member -->
     <template v-if="isAuthenticated">
       <div class="full-section">
@@ -57,160 +48,169 @@
       </ParchmentInset>
     </template>
 
-    <!-- Not authenticated: show full join page -->
+    <!-- Not authenticated: new layout -->
     <template v-else>
-      <!-- CONTRIBUTION + SIGN UP (two columns) -->
-      <div class="join-two-col">
-        <!-- Left: Monthly Contribution -->
-        <div class="join-col">
-          <div class="section-label" style="margin-bottom: 12px">
-            {{
-              cadence === "annual"
-                ? "Annual Contribution"
-                : "Monthly Contribution"
-            }}
-          </div>
-          <h2>Pay what you can</h2>
-          <ul class="tier-list">
-            <li><span class="tier-amt">$0</span> I need support right now</li>
-            <li>
-              <span class="tier-amt">{{ formatContributionAmount(5) }}</span> I
-              can contribute
-            </li>
-            <li>
-              <span class="tier-amt">{{ formatContributionAmount(15) }}</span> I
-              can sustain the community (suggested)
-            </li>
-            <li>
-              <span class="tier-amt">{{ formatContributionAmount(30) }}</span> I
-              can support others too
-            </li>
-            <li>
-              <span class="tier-amt">{{ formatContributionAmount(50) }}</span> I
-              want to sponsor multiple members
-            </li>
-          </ul>
-          <p class="charity-note">
-            Baby Ghosts Studio Development Fund is a registered Canadian
-            charity. Members who file Canadian taxes can claim their
-            contributions. We'll help you set up tax receipts once you've
-            joined.
-          </p>
-          <p class="solidarity-note">
-            Pay what you can. If you can pay more, you're making room for
-            someone who can't.
-          </p>
-          <p class="circle-not-sure">
-            Not sure where you fit? Start with Community. You can always move
-            later.
+      <!-- HERO (split, matches about.vue) -->
+      <div class="join-hero">
+        <div class="join-hero-left">
+          <h1>Join Ghost Guild</h1>
+          <p>
+            Resources, events, and a community of people figuring it out.
+            Everyone gets everything. Pay what you can.
           </p>
         </div>
+        <div class="join-hero-right">
+          <div class="section-label">What you get</div>
+          <ul>
+            <li>Full access to the knowledge commons</li>
+            <li>Free entry to all events and workshops</li>
+            <li>Slack invite in the next monthly onboarding wave</li>
+            <li>Equal access regardless of contribution</li>
+            <li>Pick your circle anytime after signup</li>
+          </ul>
+        </div>
+      </div>
 
-        <!-- Right: Become a member -->
-        <div class="join-col">
-          <h2>Become a member</h2>
-          <p class="form-intro">
-            You'll get a magic link to confirm your email. No passwords.
-          </p>
+      <!-- FORM + ASIDE -->
+      <div class="join-grid">
+        <div class="join-main">
+          <div class="join-main-inner">
+            <div v-if="errorMessage" class="error-box">{{ errorMessage }}</div>
 
-          <!-- Error Message -->
-          <div v-if="errorMessage" class="error-box">
-            {{ errorMessage }}
-          </div>
-
-          <form @submit.prevent="handleSubmit">
-            <div class="form-stack">
-              <div class="form-group">
-                <label class="form-label" for="join-name">Name</label>
-                <input
-                  id="join-name"
-                  v-model="form.name"
-                  class="form-input"
-                  type="text"
-                  required
-                  @blur="validateName"
-                  @input="fieldErrors.name && (fieldErrors.name = '')"
-                >
-                <p v-if="fieldErrors.name" class="field-error">{{ fieldErrors.name }}</p>
-              </div>
-              <div class="form-group">
-                <label class="form-label" for="join-email">Email</label>
-                <input
-                  id="join-email"
-                  v-model="form.email"
-                  class="form-input"
-                  type="email"
-                  placeholder="you@example.com"
-                  required
-                  @blur="validateEmail"
-                  @input="fieldErrors.email && (fieldErrors.email = '')"
-                >
-                <p v-if="fieldErrors.email" class="field-error">{{ fieldErrors.email }}</p>
-              </div>
-              <div class="form-group">
-                <label class="form-label">Circle</label>
-                <p class="field-note">Where you are in your co-op journey. You can change this anytime.</p>
-                <div class="circle-radios">
-                  <div class="circle-radio community">
+            <form @submit.prevent="handleSubmit">
+              <!-- About you -->
+              <div class="form-block">
+                <h2>About you</h2>
+                <p class="form-block-intro">
+                  We'll send a magic link to confirm your email. No passwords.
+                </p>
+                <div class="identity-grid">
+                  <div class="field-row">
+                    <label for="join-name">Name</label>
                     <input
-                      id="circle-community"
-                      v-model="form.circle"
-                      type="radio"
-                      name="circle"
-                      value="community"
+                      id="join-name"
+                      v-model="form.name"
+                      class="form-input"
+                      type="text"
+                      required
+                      @blur="validateName"
+                      @input="fieldErrors.name && (fieldErrors.name = '')"
                     >
-                    <label for="circle-community">
-                      <span
-                        class="circle-label-name"
-                        style="color: var(--c-community)"
-                        >Community</span
-                      >
-                      <span class="circle-label-desc">Exploring</span>
-                    </label>
+                    <p v-if="fieldErrors.name" class="field-error">
+                      {{ fieldErrors.name }}
+                    </p>
                   </div>
-                  <div class="circle-radio founder">
+                  <div class="field-row">
+                    <label for="join-email">Email</label>
                     <input
-                      id="circle-founder"
-                      v-model="form.circle"
-                      type="radio"
-                      name="circle"
-                      value="founder"
+                      id="join-email"
+                      v-model="form.email"
+                      class="form-input"
+                      type="email"
+                      placeholder="you@example.com"
+                      required
+                      @blur="validateEmail"
+                      @input="fieldErrors.email && (fieldErrors.email = '')"
                     >
-                    <label for="circle-founder">
-                      <span
-                        class="circle-label-name"
-                        style="color: var(--c-founder)"
-                        >Founder</span
-                      >
-                      <span class="circle-label-desc">Building</span>
-                    </label>
-                  </div>
-                  <div class="circle-radio practitioner">
-                    <input
-                      id="circle-practitioner"
-                      v-model="form.circle"
-                      type="radio"
-                      name="circle"
-                      value="practitioner"
-                    >
-                    <label for="circle-practitioner">
-                      <span
-                        class="circle-label-name"
-                        style="color: var(--c-practitioner)"
-                        >Practitioner</span
-                      >
-                      <span class="circle-label-desc">Practicing</span>
-                    </label>
+                    <p v-if="fieldErrors.email" class="field-error">
+                      {{ fieldErrors.email }}
+                    </p>
                   </div>
                 </div>
               </div>
-              <ContributionAmountField
-                v-model="form.contributionAmount"
-                v-model:cadence="cadence"
-              />
-              <div class="form-group full-width">
-                <label class="checkbox-label">
-                  <input v-model="form.agreedToGuidelines" type="checkbox" >
+
+              <!-- Pay what you can -->
+              <div class="form-block">
+                <div class="pwyc-header">
+                  <h2>Pay what you can</h2>
+                  <div
+                    class="cadence-toggle"
+                    role="group"
+                    aria-label="Billing cadence"
+                  >
+                    <button
+                      type="button"
+                      data-testid="cadence-monthly"
+                      :class="{ active: cadence === 'monthly' }"
+                      @click="onCadenceChange('monthly')"
+                    >
+                      Monthly
+                    </button>
+                    <button
+                      type="button"
+                      data-testid="cadence-annual"
+                      :class="{ active: cadence === 'annual' }"
+                      @click="onCadenceChange('annual')"
+                    >
+                      Annual
+                    </button>
+                  </div>
+                </div>
+                <p class="form-block-intro">
+                  Equal access for everyone. Pick what fits &mdash; these aren't
+                  tiers.
+                </p>
+
+                <ul
+                  class="pwyc-list"
+                  role="radiogroup"
+                  aria-label="Contribution amount"
+                >
+                  <li
+                    v-for="preset in presetRows"
+                    :key="preset.baseAmount"
+                    :class="[
+                      'pwyc-row',
+                      { selected: isPresetSelected(preset) },
+                    ]"
+                  >
+                    <input
+                      :id="`pwyc-${preset.baseAmount}`"
+                      v-model.number="form.contributionAmount"
+                      class="pwyc-radio"
+                      type="radio"
+                      name="pwyc-amount"
+                      :value="preset.cadenceAmount"
+                      @change="customAmount = ''"
+                    >
+                    <label
+                      :for="`pwyc-${preset.baseAmount}`"
+                      class="pwyc-row-content"
+                    >
+                      <span class="pwyc-amt">${{ preset.cadenceAmount }}</span>
+                      <span class="pwyc-label">{{ preset.label }}</span>
+                      <span v-if="preset.suggested" class="pwyc-tag"
+                        >Suggested</span
+                      >
+                    </label>
+                  </li>
+                  <li :class="['pwyc-row', 'pwyc-custom', { selected: isCustomSelected }]">
+                    <div class="pwyc-custom-input-wrap">
+                      <span class="currency">$</span>
+                      <input
+                        v-model="customAmount"
+                        class="pwyc-custom-input"
+                        type="number"
+                        min="0"
+                        placeholder="100"
+                        aria-label="Custom contribution amount"
+                        @blur="commitCustomAmount"
+                      >
+                    </div>
+                    <span class="pwyc-label"
+                      >A different amount works for me</span
+                    >
+                  </li>
+                </ul>
+              </div>
+
+              <!-- Submit row -->
+              <div class="submit-row">
+                <label class="agreement-label">
+                  <input
+                    v-model="form.agreedToGuidelines"
+                    type="checkbox"
+                  >
                   <span>
                     I agree to the Ghost Guild
                     <NuxtLink to="/community-guidelines" target="_blank"
@@ -218,10 +218,8 @@
                     >.
                   </span>
                 </label>
-              </div>
-              <div class="form-group">
                 <button
-                  class="form-submit"
+                  class="submit-btn"
                   type="submit"
                   :disabled="!isFormValid || isSubmitting"
                 >
@@ -230,72 +228,35 @@
                   <span v-else>Become a Member</span>
                 </button>
               </div>
-            </div>
-            <p class="form-note">
-              You can change your circle or contribution at any time from your
-              dashboard. Payment is handled securely through
-              <a href="https://www.helcim.com" target="_blank" rel="noopener"
-                >Helcim</a
-              >.
-            </p>
-          </form>
+            </form>
+          </div>
         </div>
-      </div>
 
-      <!-- HOW MEMBERSHIP WORKS -->
-      <ParchmentInset>
-        <h2>How membership works</h2>
-        <ul>
-          <li>Full access to the knowledge commons, events and workshops, and community</li>
-          <li>Free access to all Ghost Guild events</li>
-          <li>Equal access for every member, regardless of contribution</li>
-          <li>Your circle reflects where you are, not rank</li>
-          <li>Pay what you can ($0&ndash;$50+/month, separate from circle)</li>
-          <li>Higher contributions create solidarity spots for others</li>
-        </ul>
-        <p>
-          Community connection happens in our Slack workspace, joined in monthly
-          onboarding waves &mdash; there may be a short wait after you join.
-        </p>
-      </ParchmentInset>
-
-      <!-- THREE CIRCLES -->
-      <div class="content-row">
-        <div class="content-block">
-          <div class="section-label" style="color: var(--c-community)">
-            Community
+        <aside class="join-aside">
+          <div class="join-aside-inner">
+            <div class="section-label">About the money</div>
+            <ul class="trust-list">
+              <li>
+                <strong>Pay what you can.</strong> Equal access for everyone, no
+                matter the amount. If you can pay more, you're making room for
+                someone who can't.
+              </li>
+              <li>
+                <strong>Canadian charity.</strong> Baby Ghosts Studio
+                Development Fund is a registered Canadian charity. We'll help
+                you set up tax receipts after you join.
+              </li>
+              <li>
+                <strong>Secure payment.</strong> Card entry handled by Helcim
+                &mdash; we never see your card details.
+              </li>
+              <li>
+                <strong>Change anytime.</strong> Adjust your contribution or
+                cancel from your dashboard.
+              </li>
+            </ul>
           </div>
-          <h2>Exploring</h2>
-          <p>
-            For game workers curious about cooperatives and people exploring
-            alternative work models. You might be a solo developer, a student, a
-            researcher, or just someone who heard about this and wants to know
-            more. Start here.
-          </p>
-        </div>
-        <div class="content-block">
-          <div class="section-label" style="color: var(--c-founder)">
-            Founder
-          </div>
-          <h2>Building</h2>
-          <p>
-            For people actively building cooperative studios. You have a team,
-            or you are forming one. You are working through governance, legal
-            structure, revenue sharing, and all the hard parts. You want
-            structured support and peers doing the same thing.
-          </p>
-        </div>
-        <div class="content-block">
-          <div class="section-label" style="color: var(--c-practitioner)">
-            Practitioner
-          </div>
-          <h2>Practicing</h2>
-          <p>
-            For those already running cooperative studios or with deep
-            experience in cooperative practice. You're here to support newcomers
-            and help shape the Cooperative Foundations program.
-          </p>
-        </div>
+        </aside>
       </div>
     </template>
 
@@ -313,8 +274,11 @@
 
 <script setup>
 import { reactive, ref, computed, onMounted, onUnmounted } from "vue";
-import { getCircleOptions } from "~/config/circles";
-import { requiresPayment, formatContribution } from "~/config/contributions";
+import {
+  requiresPayment,
+  formatContribution,
+  CONTRIBUTION_PRESETS,
+} from "~/config/contributions";
 
 useSiteMeta({
   title: "Join",
@@ -325,12 +289,12 @@ useSiteMeta({
 // Auth state
 const { isAuthenticated, memberData, checkMemberStatus } = useAuth();
 
-// Check authentication status on mount
 onMounted(async () => {
   await checkMemberStatus();
 });
 
-// Form state
+// Form state — circle stays "community" and is submitted to the API unchanged.
+// Picker is removed from the template; selection moves to a post-signup prompt.
 const form = reactive({
   email: "",
   name: "",
@@ -346,13 +310,12 @@ const form = reactive({
   },
 });
 
-// UI state
 const isSubmitting = ref(false);
 const errorMessage = ref("");
 const successMessage = ref("");
 const cadence = ref("monthly"); // 'monthly' | 'annual'
+const customAmount = ref(""); // string; the raw <input type=number> value
 
-// Inline blur validation (UI feedback only — does not block submission)
 const fieldErrors = reactive({ name: "", email: "" });
 
 const validateName = () => {
@@ -369,38 +332,67 @@ const validateEmail = () => {
   fieldErrors.email = ok ? "" : "Please enter a valid email address.";
 };
 
-// Flow overlay state — drives the post-submit full-viewport UI.
-// 'idle' = overlay hidden; user is editing the form.
-// 'creating-customer' | 'opening-payment' | 'processing-payment'
-//   | 'creating-subscription' = progress states, overlay shows a spinner + label.
-// 'success' = overlay shows confirmation, auto-redirect is queued.
-// 'error' = overlay shows error + Retry/Back buttons.
 const flowState = ref("idle");
 
-// Helcim state
 const customerId = ref(null);
 const customerCode = ref(null);
 const subscriptionData = ref(null);
 const paymentToken = ref(null);
 
-// Circle options from central config
-const circleOptions = getCircleOptions();
+// Preset rows with cadence-adjusted display amounts.
+const presetRows = computed(() =>
+  CONTRIBUTION_PRESETS.map((p) => ({
+    baseAmount: p.amount,
+    cadenceAmount: cadence.value === "annual" ? p.amount * 12 : p.amount,
+    label: p.label,
+    suggested: p.amount === 15,
+  })),
+);
 
-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 isCustomSelected = computed(() => customAmount.value !== "");
+
+const isPresetSelected = (preset) =>
+  !isCustomSelected.value && form.contributionAmount === preset.cadenceAmount;
+
+const onCadenceChange = (newCadence) => {
+  if (newCadence === cadence.value) return;
+  const next =
+    newCadence === "annual"
+      ? form.contributionAmount * 12
+      : Math.floor(form.contributionAmount / 12);
+  form.contributionAmount = next;
+  if (customAmount.value !== "") {
+    customAmount.value = String(next);
+  }
+  cadence.value = newCadence;
+};
+
+// On blur of the custom-amount input: commit to form.contributionAmount.
+// If the typed value matches a preset, snap the radio selection to that
+// preset row and clear the custom input.
+const commitCustomAmount = () => {
+  const raw = customAmount.value;
+  if (raw === "" || raw === null || raw === undefined) return;
+  const n = Math.max(0, Math.floor(Number(raw)));
+  if (!Number.isFinite(n)) {
+    customAmount.value = "";
+    return;
+  }
+  const matched = presetRows.value.find((p) => p.cadenceAmount === n);
+  if (matched) {
+    form.contributionAmount = matched.cadenceAmount;
+    customAmount.value = "";
+  } else {
+    form.contributionAmount = n;
+  }
 };
 
-// Initialize composables
 const {
   initializeHelcimPay,
   verifyPayment,
   cleanup: cleanupHelcimPay,
 } = useHelcimPay();
 
-// Form validation
 const isFormValid = computed(() => {
   return (
     form.name &&
@@ -412,19 +404,17 @@ const isFormValid = computed(() => {
   );
 });
 
-// Check if payment is required
 const needsPayment = computed(() => {
   return requiresPayment(form.contributionAmount);
 });
 
 const flowSummary = computed(() => {
   const amount = form.contributionAmount || 0;
-  const suffix = cadence.value === "annual" ? "/yr" : "/mo";
   return {
     name: form.name,
     email: form.email,
     circle: form.circle,
-    contribution: amount > 0 ? `$${amount}${suffix}` : "$0",
+    contribution: amount > 0 ? formatContribution(amount, cadence.value) : "$0",
   };
 });
 
@@ -436,7 +426,6 @@ const handleSubmit = async () => {
   flowState.value = "creating-customer";
 
   try {
-    // Create customer
     const response = await $fetch("/api/helcim/customer", {
       method: "POST",
       body: {
@@ -456,14 +445,12 @@ const handleSubmit = async () => {
     customerId.value = response.customerId;
     customerCode.value = response.customerCode;
 
-    // Free tier: no Helcim modal, go straight to subscription.
     if (!needsPayment.value) {
       flowState.value = "creating-subscription";
       await createSubscription();
       return;
     }
 
-    // Paid tier: initialize HelcimPay session, then auto-open modal.
     flowState.value = "opening-payment";
     await initializeHelcimPay(customerId.value, customerCode.value, 0);
 
@@ -488,8 +475,6 @@ const handleSubmit = async () => {
     );
 
     if (!subscriptionResult || subscriptionResult.success === false) {
-      // Payment succeeded but subscription couldn't be created.
-      // Keep overlay in success state; admin follow-up will reconcile.
       successMessage.value =
         "Payment successful. Subscription setup may need manual completion.";
       flowState.value = "success";
@@ -506,7 +491,6 @@ const handleSubmit = async () => {
   }
 };
 
-// Create subscription
 const createSubscription = async (cardToken = null) => {
   try {
     const response = await $fetch("/api/helcim/subscription", {
@@ -524,10 +508,6 @@ const createSubscription = async (cardToken = null) => {
       subscriptionData.value = response.subscription;
       flowState.value = "success";
       successMessage.value = "Your membership is active.";
-
-      // Sign-in cookie is now issued by the email-verify magic link
-      // (see /api/helcim/customer). Don't auto-navigate to a gated page —
-      // the success state instructs the user to check their inbox.
     } else {
       throw new Error("Subscription creation failed - response not successful");
     }
@@ -542,7 +522,6 @@ const createSubscription = async (cardToken = null) => {
     console.error(
       "Subscription creation completely failed, but payment was successful",
     );
-    // Don't throw error - let the calling function handle progression
     return {
       success: false,
       error:
@@ -556,35 +535,475 @@ const closeFlowOverlay = () => {
   errorMessage.value = "";
 };
 
-// Cleanup on unmount
 onUnmounted(() => {
   cleanupHelcimPay();
 });
 </script>
 
 <style scoped>
-/* ---- HERO ---- */
-.hero {
-  padding: 48px 32px;
+/* ---- HERO (split, matches about.vue) ---- */
+.join-hero {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0;
+  align-items: stretch;
   border-bottom: 1px dashed var(--border);
 }
-.hero h1 {
+.join-hero-left {
+  padding: 32px 32px 28px;
+  border-right: 1px dashed var(--border);
+  align-self: stretch;
+}
+.join-hero-left h1 {
   font-family: "Brygada 1918", serif;
-  font-size: 36px;
+  font-size: 28px;
   font-weight: 600;
   color: var(--text-bright);
   line-height: 1.15;
   letter-spacing: -0.01em;
-  margin-bottom: 16px;
-  max-width: 540px;
+  margin: 0 0 12px;
 }
-.hero p {
+.join-hero-left p {
   color: var(--text-dim);
-  max-width: 460px;
   line-height: 1.7;
+  font-size: 13px;
+  margin: 0;
+  max-width: 460px;
+}
+.join-hero-right {
+  padding: 32px;
+  align-self: stretch;
+}
+.join-hero-right .section-label {
+  margin-bottom: 10px;
+}
+.join-hero-right ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.join-hero-right li {
+  font-size: 12px;
+  color: var(--text-dim);
+  line-height: 1.7;
+  padding: 2px 0 2px 14px;
+  position: relative;
+}
+.join-hero-right li::before {
+  content: "›";
+  position: absolute;
+  left: 0;
+  color: var(--candle-faint);
 }
 
-/* ---- PARCHMENT LIST STYLES ---- */
+/* ---- TWO-COL GRID ---- */
+.join-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: stretch;
+  border-bottom: 1px dashed var(--border);
+}
+.join-main {
+  border-right: 1px dashed var(--border);
+  padding: 32px;
+  min-width: 0;
+}
+.join-aside {
+  padding: 32px;
+  min-width: 0;
+  position: relative;
+}
+.join-main-inner {
+  max-width: 560px;
+}
+.join-aside-inner {
+  max-width: 460px;
+}
+
+/* ---- SECTION LABEL (hero + aside + auth'd branch DashedBox) ---- */
+.section-label {
+  font-size: 10px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  display: block;
+  margin-bottom: 8px;
+}
+
+/* ---- FORM BLOCKS ---- */
+.form-block {
+  margin-bottom: 32px;
+}
+.form-block:last-of-type {
+  margin-bottom: 0;
+}
+.form-block h2 {
+  font-family: "Brygada 1918", serif;
+  font-size: 18px;
+  font-weight: 500;
+  color: var(--text-bright);
+  margin: 0 0 4px;
+}
+.form-block-intro {
+  font-size: 12px;
+  color: var(--text-dim);
+  margin: 0 0 14px;
+  line-height: 1.6;
+}
+
+/* ---- IDENTITY GRID ---- */
+.identity-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+}
+.field-row {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.field-row label {
+  font-size: 10px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+}
+.form-input {
+  background: var(--input-bg);
+  border: 1px dashed var(--border);
+  color: var(--text-bright);
+  font-family: "Commit Mono", monospace;
+  font-size: 13px;
+  padding: 10px 14px;
+  width: 100%;
+  outline: none;
+  transition: border-color 0.15s;
+}
+.form-input:focus {
+  border-color: var(--candle);
+  border-style: solid;
+}
+.form-input::placeholder {
+  color: var(--text-faint);
+}
+.field-error {
+  font-size: 11px;
+  color: var(--ember);
+  margin: 0;
+}
+
+/* ---- PWYC ---- */
+.pwyc-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: 4px;
+  gap: 12px;
+}
+.cadence-toggle {
+  display: inline-flex;
+  border: 1px dashed var(--border);
+}
+.cadence-toggle button {
+  background: transparent;
+  border: none;
+  padding: 5px 12px;
+  font-family: "Commit Mono", monospace;
+  font-size: 10px;
+  color: var(--text-faint);
+  cursor: pointer;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+.cadence-toggle button.active {
+  background: var(--parch);
+  color: var(--parch-text);
+}
+
+.pwyc-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  border-top: 1px dashed var(--border);
+  border-bottom: 1px dashed var(--border);
+}
+.pwyc-row {
+  position: relative;
+  border-bottom: 1px dashed var(--border);
+  transition: background 0.12s;
+}
+.pwyc-row:last-of-type {
+  border-bottom: none;
+}
+.pwyc-row:hover {
+  background: var(--surface);
+}
+.pwyc-row.selected {
+  background: var(--input-bg);
+}
+.pwyc-row.selected::before {
+  content: "›";
+  position: absolute;
+  left: 12px;
+  color: var(--candle);
+  font-size: 14px;
+  top: 50%;
+  transform: translateY(-50%);
+  line-height: 1;
+}
+.pwyc-radio {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+.pwyc-radio:focus-visible + .pwyc-row-content {
+  outline: 1px solid var(--candle);
+  outline-offset: -2px;
+}
+.pwyc-row-content {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  padding: 8px 14px 8px 28px;
+  cursor: pointer;
+}
+.pwyc-amt {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-bright);
+  min-width: 36px;
+  flex-shrink: 0;
+}
+.pwyc-row.selected .pwyc-amt {
+  color: var(--candle);
+}
+.pwyc-label {
+  font-size: 12px;
+  color: var(--text-dim);
+  line-height: 1.5;
+  flex: 1;
+}
+.pwyc-row.selected .pwyc-label {
+  color: var(--text-bright);
+}
+.pwyc-tag {
+  font-size: 9px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--candle);
+  border: 1px dashed var(--candle-faint);
+  padding: 1px 6px;
+  flex-shrink: 0;
+}
+
+/* Custom row */
+.pwyc-custom {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  padding: 6px 14px 6px 28px;
+  cursor: default;
+}
+.pwyc-custom:hover {
+  background: transparent;
+}
+.pwyc-custom.selected {
+  background: var(--input-bg);
+}
+.pwyc-custom-input-wrap {
+  display: flex;
+  align-items: center;
+  border: 1px dashed var(--border);
+  background: var(--input-bg);
+  height: 26px;
+  flex-shrink: 0;
+}
+.pwyc-custom-input-wrap .currency {
+  padding: 0 2px 0 6px;
+  color: var(--text-faint);
+  font-weight: 600;
+  font-size: 12px;
+}
+.pwyc-custom-input {
+  border: none;
+  background: transparent;
+  font-family: "Commit Mono", monospace;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-bright);
+  padding: 0 6px 0 0;
+  width: 56px;
+  outline: none;
+  -moz-appearance: textfield;
+}
+.pwyc-custom-input::-webkit-outer-spin-button,
+.pwyc-custom-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* ---- SUBMIT ROW ---- */
+.submit-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-top: 20px;
+  flex-wrap: wrap;
+}
+.agreement-label {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  font-size: 12px;
+  color: var(--text);
+  line-height: 1.55;
+  cursor: pointer;
+  flex: 1;
+  min-width: 240px;
+}
+.agreement-label input {
+  margin-top: 3px;
+  flex-shrink: 0;
+}
+.agreement-label :deep(a) {
+  color: var(--candle);
+  text-decoration: underline;
+}
+.submit-btn {
+  display: inline-block;
+  background: var(--parch);
+  color: var(--parch-accent);
+  font-family: "Commit Mono", monospace;
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  border: 1px solid var(--parch);
+  padding: 12px 24px;
+  cursor: pointer;
+  transition: all 0.15s;
+  flex-shrink: 0;
+}
+.submit-btn:hover {
+  background: var(--parch-hover);
+  color: var(--parch-text);
+}
+.submit-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ---- TRUST LIST (aside) ---- */
+.trust-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.trust-list li {
+  font-size: 12px;
+  color: var(--text-dim);
+  line-height: 1.65;
+  padding: 0 0 14px 14px;
+  position: relative;
+}
+.trust-list li:last-child {
+  padding-bottom: 0;
+}
+.trust-list li::before {
+  content: "›";
+  position: absolute;
+  left: 0;
+  top: 0;
+  color: var(--candle-faint);
+}
+.trust-list li :deep(strong) {
+  color: var(--text-bright);
+  font-weight: 600;
+}
+
+/* ---- ERROR BOX ---- */
+.error-box {
+  border: 1px dashed var(--ember);
+  color: var(--ember);
+  padding: 12px 16px;
+  font-size: 12px;
+  margin-bottom: 20px;
+  max-width: 560px;
+}
+
+/* ---- AUTH'D MEMBER BRANCH ---- */
+.full-section {
+  padding: 32px;
+  border-bottom: 1px dashed var(--border);
+}
+.full-section h2 {
+  font-family: "Brygada 1918", serif;
+  font-size: 20px;
+  font-weight: 500;
+  color: var(--text-bright);
+  margin-bottom: 16px;
+}
+.section-intro {
+  font-size: 13px;
+  color: var(--text-dim);
+  line-height: 1.65;
+  margin-bottom: 20px;
+}
+.member-info-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  max-width: 500px;
+  margin-bottom: 8px;
+}
+.info-value {
+  font-family: "Brygada 1918", serif;
+  font-size: 18px;
+  font-weight: 500;
+  color: var(--text-bright);
+  margin-top: 4px;
+}
+.button-row {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  margin-top: 20px;
+}
+.form-submit {
+  display: inline-block;
+  background: var(--parch);
+  color: var(--parch-accent);
+  font-family: "Commit Mono", monospace;
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  border: 1px solid var(--parch);
+  padding: 12px 28px;
+  cursor: pointer;
+  transition: all 0.2s;
+  text-decoration: none;
+  text-align: center;
+}
+.form-submit:hover {
+  background: var(--parch-hover);
+  border-color: var(--parch-hover);
+  color: var(--parch-text);
+  text-decoration: none;
+}
+.parchment-link {
+  color: var(--candle-faint);
+  font-size: 12px;
+}
+.parchment-link:hover {
+  color: var(--candle-dim);
+}
+.capitalize {
+  text-transform: capitalize;
+}
+
+/* ---- PARCHMENT LIST (only used in auth'd branch ParchmentInset) ---- */
 :deep(.parchment-inset ul) {
   list-style: none;
   max-width: 560px;
@@ -607,430 +1026,53 @@ onUnmounted(() => {
   line-height: 1.4;
 }
 
-.parchment-link {
-  color: var(--candle-faint);
-  font-size: 12px;
-}
-.parchment-link:hover {
-  color: var(--candle-dim);
-}
-
-/* ---- CONTENT ROW (three circles) ---- */
-.content-row {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  align-items: stretch;
-  border-bottom: 1px dashed var(--border);
-}
-.content-block {
-  padding: 24px 28px;
-  border-right: 1px dashed var(--border);
-  min-width: 0;
-  overflow-wrap: break-word;
-  align-self: stretch;
-}
-.content-block:last-child {
-  border-right: none;
-}
-.content-block h2 {
-  font-family: "Brygada 1918", serif;
-  font-size: 18px;
-  font-weight: 500;
-  color: var(--text-bright);
-  margin-bottom: 8px;
-}
-.content-block p {
-  color: var(--text-dim);
-  font-size: 12px;
-  line-height: 1.65;
-}
-.circle-not-sure {
-  font-size: 11px;
-  color: var(--text-faint);
-  margin-top: 10px;
-  line-height: 1.6;
-}
-.field-note {
-  font-size: 10px;
-  color: var(--text-faint);
-  margin-top: 4px;
-  margin-bottom: 8px;
-  line-height: 1.4;
-}
-
-/* ---- TWO-COLUMN JOIN LAYOUT ---- */
-.join-two-col {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  border-bottom: 1px dashed var(--border);
-}
-.join-col {
-  padding: 32px;
-}
-.join-col:first-child {
-  border-right: 1px dashed var(--border);
-}
-.join-col h2 {
-  font-family: "Brygada 1918", serif;
-  font-size: 20px;
-  font-weight: 500;
-  color: var(--text-bright);
-  margin-bottom: 16px;
-}
-
-/* ---- FULL-WIDTH SECTION ---- */
-.full-section {
-  padding: 32px;
-  border-bottom: 1px dashed var(--border);
-}
-.full-section h2 {
-  font-family: "Brygada 1918", serif;
-  font-size: 20px;
-  font-weight: 500;
-  color: var(--text-bright);
-  margin-bottom: 16px;
-}
-.section-intro {
-  font-size: 13px;
-  color: var(--text-dim);
-  line-height: 1.65;
-  margin-bottom: 20px;
-}
-
-/* ---- TIER LIST (matches about page) ---- */
-.tier-list {
-  list-style: none;
-  padding: 0;
-}
-.tier-list li {
-  padding: 4px 0;
-  font-size: 12px;
-  color: var(--text-dim);
-  border-bottom: 1px dashed var(--border);
-  display: flex;
-  gap: 12px;
-}
-.tier-list li:last-child {
-  border-bottom: none;
-}
-.tier-amt {
-  color: var(--text-bright);
-  font-weight: 600;
-  min-width: 36px;
-}
-.solidarity-note {
-  font-size: 12px;
-  color: var(--text-dim);
-  line-height: 1.65;
-  margin-top: 16px;
-}
-
-.charity-note {
-  font-size: 12px;
-  color: var(--text-dim);
-  line-height: 1.65;
-  margin-top: 16px;
-}
-
-/* ---- FORM SECTION ---- */
-.form-section {
-  padding: 32px;
-  border-bottom: 1px dashed var(--border);
-}
-.form-section h2 {
-  font-family: "Brygada 1918", serif;
-  font-size: 20px;
-  font-weight: 500;
-  color: var(--text-bright);
-  margin-bottom: 4px;
-}
-.form-intro {
-  font-size: 12px;
-  color: var(--text-dim);
-  margin-bottom: 24px;
-  line-height: 1.65;
-}
-.form-stack {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  max-width: 600px;
-}
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-.form-label {
-  font-size: 10px;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: var(--text-faint);
-}
-.form-input {
-  background: var(--surface);
-  border: 1px dashed var(--border);
-  color: var(--text-bright);
-  font-family: "Commit Mono", monospace;
-  font-size: 13px;
-  padding: 10px 14px;
-  transition: border-color 0.2s;
-  outline: none;
-  width: 100%;
-}
-.form-input:focus {
-  border-color: var(--candle-dim);
-  border-style: solid;
-}
-.form-input::placeholder {
-  color: var(--text-faint);
-}
-.field-error {
-  font-size: 11px;
-  color: var(--ember);
-  margin-top: 4px;
-}
-
-/* ---- CIRCLE RADIOS ---- */
-.circle-radios {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 10px;
-}
-.circle-radio {
-  position: relative;
-}
-.circle-radio input {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-.circle-radio label {
-  display: block;
-  border: 1px dashed var(--border);
-  padding: 14px 12px;
-  cursor: pointer;
-  transition: all 0.2s;
-  text-align: center;
-}
-.circle-radio label:hover {
-  border-color: var(--candle-faint);
-}
-.circle-radio input:checked + label {
-  border-style: solid;
-}
-.circle-radio input:checked + label .circle-label-name {
-  color: var(--text-bright);
-}
-.circle-radio.community input:checked + label {
-  border-color: var(--c-community);
-}
-.circle-radio.founder input:checked + label {
-  border-color: var(--c-founder);
-}
-.circle-radio.practitioner input:checked + label {
-  border-color: var(--c-practitioner);
-}
-.circle-label-name {
-  font-size: 12px;
-  color: var(--text-dim);
-  display: block;
-  margin-bottom: 2px;
-}
-.circle-label-desc {
-  font-size: 10px;
-  color: var(--text-faint);
-}
-
-/* ---- CONTRIBUTION SELECT ---- */
-.form-select {
-  background: var(--surface);
-  border: 1px dashed var(--border);
-  color: var(--text-bright);
-  font-family: "Commit Mono", monospace;
-  font-size: 13px;
-  padding: 10px 14px;
-  transition: border-color 0.2s;
-  outline: none;
-  width: 100%;
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238a7e6a' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 12px center;
-  cursor: pointer;
-}
-.form-select:focus {
-  border-color: var(--candle-dim);
-  border-style: solid;
-}
-.form-select option {
-  background: var(--surface);
-  color: var(--text-bright);
-}
-
-/* ---- SUBMIT BUTTON ---- */
-.form-submit {
-  display: inline-block;
-  background: var(--parch);
-  color: var(--parch-accent);
-  font-family: "Commit Mono", monospace;
-  font-size: 13px;
-  font-weight: 600;
-  letter-spacing: 0.02em;
-  border: 1px solid var(--parch);
-  padding: 12px 28px;
-  cursor: pointer;
-  transition: all 0.2s;
-  text-decoration: none;
-  text-align: center;
-}
-.form-submit:hover {
-  background: var(--parch-hover);
-  border-color: var(--parch-hover);
-  color: var(--parch-text);
-  text-decoration: none;
-}
-.form-submit:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* ---- FORM NOTE ---- */
-.form-note {
-  font-size: 11px;
-  color: var(--text-faint);
-  line-height: 1.6;
-  margin-top: 16px;
-  max-width: 460px;
-}
-.form-note a,
-.form-note :deep(a) {
-  color: var(--candle-dim);
-}
-
-/* ---- CHECKBOX ---- */
-.checkbox-label {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  cursor: pointer;
-  font-size: 12px;
-  color: var(--text-dim);
-  line-height: 1.5;
-}
-.checkbox-label input {
-  margin-top: 3px;
-  flex-shrink: 0;
-}
-.checkbox-label a,
-.checkbox-label :deep(a) {
-  color: var(--candle);
-  text-decoration: underline;
-}
-
-/* ---- ERROR & SUCCESS BOXES ---- */
-.error-box {
-  border: 1px dashed var(--ember);
-  color: var(--ember);
-  padding: 12px 16px;
-  font-size: 12px;
-  margin-bottom: 20px;
-  max-width: 600px;
-}
-.success-box {
-  border: 1px dashed var(--green, var(--candle));
-  color: var(--green, var(--candle));
-  padding: 12px 16px;
-  font-size: 12px;
-  margin-bottom: 20px;
-  max-width: 600px;
-}
-
-/* ---- PAYMENT INSTRUCTION ---- */
-.payment-instruction {
-  font-size: 13px;
-  color: var(--text-dim);
-  line-height: 1.65;
-}
-
-/* ---- REDIRECT NOTE ---- */
-.redirect-note {
-  font-size: 12px;
-  color: var(--text-dim);
-  text-align: center;
-}
-
-/* ---- BUTTON ROW ---- */
-.button-row {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  margin-top: 20px;
-}
-
-/* ---- MEMBER INFO GRID ---- */
-.member-info-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px;
-  max-width: 500px;
-  margin-bottom: 8px;
-}
-.info-value {
-  font-family: "Brygada 1918", serif;
-  font-size: 18px;
-  font-weight: 500;
-  color: var(--text-bright);
-  margin-top: 4px;
-}
-
-/* ---- UTILITY ---- */
-.capitalize {
-  text-transform: capitalize;
-}
-
 /* ---- RESPONSIVE ---- */
+@media (max-width: 1024px) {
+  .join-grid {
+    grid-template-columns: 1fr;
+  }
+  .join-main {
+    border-right: none;
+    border-bottom: 1px dashed var(--border);
+  }
+}
 @media (max-width: 768px) {
-  .content-row {
+  .join-hero {
     grid-template-columns: 1fr;
   }
-  .content-block {
+  .join-hero-left {
     border-right: none;
     border-bottom: 1px dashed var(--border);
+    padding: 24px 20px 20px;
   }
-  .content-block:last-child {
-    border-bottom: none;
+  .join-hero-right {
+    padding: 24px 20px;
   }
-  .join-two-col {
+  .join-hero-left h1 {
+    font-size: 26px;
+  }
+  .identity-grid {
     grid-template-columns: 1fr;
   }
-  .join-col:first-child {
-    border-right: none;
-    border-bottom: 1px dashed var(--border);
+  .join-main,
+  .join-aside {
+    padding: 24px 20px;
   }
-  .circle-radios {
-    grid-template-columns: 1fr;
+  .full-section {
+    padding: 24px 20px;
   }
   .member-info-grid {
     grid-template-columns: 1fr;
   }
-  .hero {
-    padding: 32px 20px;
-  }
-  .hero h1 {
-    font-size: 28px;
-  }
-  .full-section,
-  .form-section {
-    padding: 24px 20px;
-  }
-  .content-block {
-    padding: 20px;
-  }
 }
-
 @media (max-width: 480px) {
+  .submit-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .submit-btn {
+    width: 100%;
+  }
   .button-row {
     flex-direction: column;
     align-items: stretch;
diff --git a/e2e/join-flow.spec.js b/e2e/join-flow.spec.js
index bb7de07..3af8ea1 100644
--- a/e2e/join-flow.spec.js
+++ b/e2e/join-flow.spec.js
@@ -2,7 +2,6 @@ import { test, expect } from '@playwright/test'
 
 // Mock Helcim API responses for join flow (avoids dependency on external API)
 function mockHelcimAPIs(page, { failCustomer = false } = {}) {
-  // Mock Helcim customer creation
   page.route('**/api/helcim/customer', async (route) => {
     if (failCustomer) {
       return route.fulfill({
@@ -26,7 +25,6 @@ function mockHelcimAPIs(page, { failCustomer = false } = {}) {
     })
   })
 
-  // Mock subscription creation
   page.route('**/api/helcim/subscription', async (route) => {
     return route.fulfill({
       status: 200,
@@ -46,35 +44,35 @@ test.describe('Join page — member signup flow', () => {
 
     await expect(page.locator('#join-name')).toBeVisible()
     await expect(page.locator('#join-email')).toBeVisible()
-    await expect(page.locator('#circle-community')).toBeAttached()
-    await expect(page.locator('#circle-founder')).toBeAttached()
-    await expect(page.locator('#circle-practitioner')).toBeAttached()
-    await expect(page.getByTestId('contribution-amount')).toBeVisible()
-    await expect(page.locator('.form-submit')).toBeVisible()
+    await expect(page.locator('#pwyc-0')).toBeAttached()
+    await expect(page.locator('#pwyc-15')).toBeAttached()
+    await expect(page.locator('#pwyc-50')).toBeAttached()
+    await expect(page.getByTestId('cadence-monthly')).toBeVisible()
+    await expect(page.getByTestId('cadence-annual')).toBeVisible()
+    await expect(page.locator('.submit-btn')).toBeVisible()
   })
 
   test('submit button disabled when form incomplete', async ({ page }) => {
     await page.goto('/join')
     await page.waitForLoadState('networkidle')
 
-    // Clear name and email — circle defaults to community, contribution defaults to $15
+    // Clear name and email — contribution defaults to $15
     await page.locator('#join-name').fill('')
     await page.locator('#join-email').fill('')
 
-    // Button should be disabled with empty required fields
-    await expect(page.locator('.form-submit')).toBeDisabled()
+    await expect(page.locator('.submit-btn')).toBeDisabled()
 
     // Fill only name — still incomplete
     await page.locator('#join-name').fill('Test User')
-    await expect(page.locator('.form-submit')).toBeDisabled()
+    await expect(page.locator('.submit-btn')).toBeDisabled()
 
     // Fill email — agreement still unchecked, so still disabled
     await page.locator('#join-email').fill('incomplete-test@example.com')
-    await expect(page.locator('.form-submit')).toBeDisabled()
+    await expect(page.locator('.submit-btn')).toBeDisabled()
 
     // Check the Community Guidelines agreement — now all required fields satisfied
     await page.getByRole('checkbox', { name: /Community Guidelines/ }).check()
-    await expect(page.locator('.form-submit')).toBeEnabled()
+    await expect(page.locator('.submit-btn')).toBeEnabled()
   })
 
   test('fill and submit free tier', async ({ page }) => {
@@ -83,20 +81,17 @@ test.describe('Join page — member signup flow', () => {
     await page.goto('/join')
     await page.waitForLoadState('networkidle')
 
-    // Fill in the form
     await page.locator('#join-name').fill('E2E Test User')
     await page.locator('#join-email').fill(uniqueEmail)
-    await page.locator('#circle-community').check({ force: true })
-    // Contribution is now a numeric input with preset chips, not a select
-    await page.getByTestId('contribution-amount').fill('0')
+    // Pick the $0 preset
+    await page.locator('#pwyc-0').check({ force: true })
     await page.getByRole('checkbox', { name: /Community Guidelines/ }).check()
 
-    await expect(page.locator('.form-submit')).toBeEnabled()
+    await expect(page.locator('.submit-btn')).toBeEnabled()
 
-    // Mock Helcim APIs before submitting
     await mockHelcimAPIs(page)
 
-    await page.locator('.form-submit').click()
+    await page.locator('.submit-btn').click()
 
     // Free tier flips the SignupFlowOverlay into its success state
     await expect(
@@ -104,41 +99,26 @@ test.describe('Join page — member signup flow', () => {
     ).toBeVisible({ timeout: 15000 })
   })
 
-  test('cadence toggle updates billing summary to annual ×12', async ({ page }) => {
+  test('cadence toggle multiplies preset row amounts by 12', async ({ page }) => {
     await page.goto('/join')
     await page.waitForLoadState('networkidle')
 
-    await page.getByTestId('contribution-amount').fill('10')
+    // Default is Monthly: the $15 row reads "$15"
+    const suggestedRow = page.locator('#pwyc-15 + .pwyc-row-content .pwyc-amt')
+    await expect(suggestedRow).toHaveText('$15')
+
+    // Switch to Annual: same row now reads "$180"
     await page.getByTestId('cadence-annual').click()
+    await expect(suggestedRow).toHaveText('$180')
 
-    const summary = page.locator('.billing-summary')
-    await expect(summary).toBeVisible()
-    await expect(summary).toContainText('$120 today')
-    await expect(summary).toContainText('at each annual renewal')
-
+    // Switch back to Monthly: returns to "$15"
     await page.getByTestId('cadence-monthly').click()
-    await expect(summary).toContainText('$10 today')
-    await expect(summary).toContainText('each month')
-  })
-
-  test('contribution guidance label changes with amount tier', async ({ page }) => {
-    await page.goto('/join')
-    await page.waitForLoadState('networkidle')
-
-    const guidance = page.locator('.contribution-guidance')
-
-    await page.getByTestId('contribution-amount').fill('5')
-    await expect(guidance).toHaveText(/I can contribute/)
-
-    await page.getByTestId('contribution-amount').fill('30')
-    await expect(guidance).toHaveText(/I can support others too/)
+    await expect(suggestedRow).toHaveText('$15')
   })
 
   test('paid tier flow reaches success state with HelcimPay stubbed', async ({ page }) => {
     const uniqueEmail = `test-e2e-paid-${Date.now()}@example.com`
 
-    // Stub HelcimPay window globals before the page loads so the composable's
-    // script-load path is bypassed and we resolve verifyPayment synchronously.
     await page.addInitScript(() => {
       window.appendHelcimPayIframe = (checkoutToken) => {
         const eventName = 'helcim-pay-js-' + checkoutToken
@@ -189,12 +169,12 @@ test.describe('Join page — member signup flow', () => {
 
     await page.locator('#join-name').fill('Paid E2E User')
     await page.locator('#join-email').fill(uniqueEmail)
-    await page.locator('#circle-community').check({ force: true })
-    await page.getByTestId('contribution-amount').fill('15')
+    // $15 preset is selected by default — verify and submit
+    await page.locator('#pwyc-15').check({ force: true })
     await page.getByRole('checkbox', { name: /Community Guidelines/ }).check()
 
-    await expect(page.locator('.form-submit')).toBeEnabled()
-    await page.locator('.form-submit').click()
+    await expect(page.locator('.submit-btn')).toBeEnabled()
+    await page.locator('.submit-btn').click()
 
     await expect(
       page.getByRole('heading', { name: 'Welcome to Ghost Guild!' })
@@ -207,15 +187,13 @@ test.describe('Join page — member signup flow', () => {
     await page.goto('/join')
     await page.waitForLoadState('networkidle')
 
-    // Mock customer endpoint to return 409 (email already exists)
     await mockHelcimAPIs(page, { failCustomer: true })
 
     await page.locator('#join-name').fill('Dup Test User')
     await page.locator('#join-email').fill(duplicateEmail)
-    await page.locator('#circle-community').check({ force: true })
-    await page.getByTestId('contribution-amount').fill('0')
+    await page.locator('#pwyc-0').check({ force: true })
     await page.getByRole('checkbox', { name: /Community Guidelines/ }).check()
-    await page.locator('.form-submit').click()
+    await page.locator('.submit-btn').click()
 
     // Helcim 409 puts SignupFlowOverlay into its error state
     const overlayError = page.locator('.signup-flow-overlay .error-box')

From 039a6802e34cfdbc546f3a7dfa9440ddbd7dab95 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sun, 24 May 2026 00:43:54 +0100
Subject: [PATCH 18/21] =?UTF-8?q?fix(e2e):=20repair=20failing=20suite=20?=
 =?UTF-8?q?=E2=80=94=20a11y=20fixes=20and=20stale=20assertions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three product a11y defects: drop role="radiogroup" from the /join PWYC
<ul> (it stripped the list role; native radios already group), use
--parch-text on the active contribution chip (was --text-bright, 1.17:1
on --parch), and label the New tag pool USelect on event create.

Three stale tests: real event-type filter labels, updated location
placeholder, and click the label instead of the hidden 0×0 radio.
---
 app/components/ContributionAmountField.vue | 2 +-
 app/pages/admin/events/create.vue          | 1 +
 app/pages/join.vue                         | 1 -
 e2e/admin-events.spec.js                   | 2 +-
 e2e/events.spec.js                         | 4 ++--
 e2e/join-flow.spec.js                      | 4 ++--
 6 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/components/ContributionAmountField.vue b/app/components/ContributionAmountField.vue
index b8a331a..ffc596c 100644
--- a/app/components/ContributionAmountField.vue
+++ b/app/components/ContributionAmountField.vue
@@ -261,7 +261,7 @@ const onCadenceChange = (newCadence) => {
   border-style: solid;
   border-color: var(--candle);
   background: var(--parch);
-  color: var(--text-bright);
+  color: var(--parch-text);
 }
 
 .contribution-guidance {
diff --git a/app/pages/admin/events/create.vue b/app/pages/admin/events/create.vue
index b388e9b..d5625a2 100644
--- a/app/pages/admin/events/create.vue
+++ b/app/pages/admin/events/create.vue
@@ -350,6 +350,7 @@
               <label>New tag pool</label>
               <USelect
                 v-model="newTagPool"
+                aria-label="New tag pool"
                 :items="[
                   { label: 'Cooperative', value: 'cooperative' },
                   { label: 'Craft', value: 'craft' },
diff --git a/app/pages/join.vue b/app/pages/join.vue
index 2ba29de..e2032f0 100644
--- a/app/pages/join.vue
+++ b/app/pages/join.vue
@@ -153,7 +153,6 @@
 
                 <ul
                   class="pwyc-list"
-                  role="radiogroup"
                   aria-label="Contribution amount"
                 >
                   <li
diff --git a/e2e/admin-events.spec.js b/e2e/admin-events.spec.js
index 4acd617..23de796 100644
--- a/e2e/admin-events.spec.js
+++ b/e2e/admin-events.spec.js
@@ -88,7 +88,7 @@ test.describe('Admin events CRUD', () => {
       .fill('e2e test event description')
 
     await adminPage
-      .getByPlaceholder('e.g., https://zoom.us/j/123... or #channel-name')
+      .getByPlaceholder('e.g., https://zoom.us/j/123..., #channel-name, or TBD')
       .fill('https://example.com/zoom')
 
     const startInput = adminPage.getByPlaceholder(
diff --git a/e2e/events.spec.js b/e2e/events.spec.js
index 3453fdd..a1a11fe 100644
--- a/e2e/events.spec.js
+++ b/e2e/events.spec.js
@@ -11,7 +11,7 @@ test.describe('Events list page', () => {
     const filterBar = page.locator('.filter-bar')
     await expect(filterBar).toBeVisible()
 
-    for (const label of ['All', 'Workshops', 'Community', 'Social', 'Showcase']) {
+    for (const label of ['All', 'Talk / Presentation', 'Workshop', 'Community Meetup', 'Co-working Session', 'Peer Session', 'Skills Share', 'Info Session']) {
       await expect(filterBar.locator('button', { hasText: label })).toBeVisible()
     }
   })
@@ -36,7 +36,7 @@ test.describe('Events list page', () => {
     // Wait for Vue hydration — the "All" filter should have the active class once reactive
     const allBtn = page.locator('.filter-btn', { hasText: 'All' })
     await expect(allBtn).toHaveClass(/active/, { timeout: 10000 })
-    const workshopsBtn = page.locator('.filter-bar button', { hasText: 'Workshops' })
+    const workshopsBtn = page.locator('.filter-bar button', { hasText: 'Workshop' })
     await workshopsBtn.click()
     await expect(workshopsBtn).toHaveClass(/active/, { timeout: 5000 })
   })
diff --git a/e2e/join-flow.spec.js b/e2e/join-flow.spec.js
index 3af8ea1..ba4713d 100644
--- a/e2e/join-flow.spec.js
+++ b/e2e/join-flow.spec.js
@@ -84,7 +84,7 @@ test.describe('Join page — member signup flow', () => {
     await page.locator('#join-name').fill('E2E Test User')
     await page.locator('#join-email').fill(uniqueEmail)
     // Pick the $0 preset
-    await page.locator('#pwyc-0').check({ force: true })
+    await page.locator('label[for="pwyc-0"]').click()
     await page.getByRole('checkbox', { name: /Community Guidelines/ }).check()
 
     await expect(page.locator('.submit-btn')).toBeEnabled()
@@ -191,7 +191,7 @@ test.describe('Join page — member signup flow', () => {
 
     await page.locator('#join-name').fill('Dup Test User')
     await page.locator('#join-email').fill(duplicateEmail)
-    await page.locator('#pwyc-0').check({ force: true })
+    await page.locator('label[for="pwyc-0"]').click()
     await page.getByRole('checkbox', { name: /Community Guidelines/ }).check()
     await page.locator('.submit-btn').click()
 

From 7beb86b4306352f7edba5002ee6d72e7c41f61b9 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sun, 24 May 2026 00:44:01 +0100
Subject: [PATCH 19/21] fix(activity): allow board_post_created in ActivityLog
 enum

The model enum array had drifted from the canonical type list in
utils/activityLog.js, so logging board-post activity failed validation.
---
 server/models/activityLog.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/server/models/activityLog.js b/server/models/activityLog.js
index 47a66c6..914a94b 100644
--- a/server/models/activityLog.js
+++ b/server/models/activityLog.js
@@ -18,6 +18,7 @@ const ACTIVITY_TYPES = [
   'email_sent',
   'community_connections_updated',
   'board_updated',
+  'board_post_created',
   'connection_requested',
   'connection_confirmed',
   'tag_suggested',

From 151481f1ec5add5eaf98e41e108ef781731e658b Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sun, 24 May 2026 00:44:14 +0100
Subject: [PATCH 20/21] feat(admin): rename series route and add tags review
 page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rename /admin/series-management to /admin/series so it follows the
/admin/<section> convention; the breadcrumb's auto-derived parent link
is now a real route (was a dead /admin/series link).

Add an /admin/tags page to review pending TagSuggestions — list,
approve (creates the Tag), reject — backed by new admin endpoints and a
tagSuggestionReviewSchema. Resolves the dead /admin/tags alert link.
---
 app/layouts/admin.vue                         |  21 +-
 app/pages/admin/series/create.vue             |   6 +-
 .../index.vue}                                |   0
 app/pages/admin/tags/index.vue                | 205 ++++++++++++++++++
 e2e/admin-series.spec.js                      |   8 +-
 e2e/admin-tags.spec.js                        |  57 +++++
 .../api/admin/tag-suggestions/[id].patch.js   |  43 ++++
 server/api/admin/tag-suggestions/index.get.js |  23 ++
 server/utils/schemas.js                       |   4 +
 9 files changed, 358 insertions(+), 9 deletions(-)
 rename app/pages/admin/{series-management.vue => series/index.vue} (100%)
 create mode 100644 app/pages/admin/tags/index.vue
 create mode 100644 e2e/admin-tags.spec.js
 create mode 100644 server/api/admin/tag-suggestions/[id].patch.js
 create mode 100644 server/api/admin/tag-suggestions/index.get.js

diff --git a/app/layouts/admin.vue b/app/layouts/admin.vue
index 0c0d201..839fc3b 100644
--- a/app/layouts/admin.vue
+++ b/app/layouts/admin.vue
@@ -44,7 +44,7 @@
           </li>
           <li>
             <NuxtLink
-              to="/admin/series-management"
+              to="/admin/series"
               :class="{ active: route.path.includes('/admin/series') }"
             >
               Series
@@ -66,6 +66,14 @@
               Board Channels
             </NuxtLink>
           </li>
+          <li>
+            <NuxtLink
+              to="/admin/tags"
+              :class="{ active: route.path.startsWith('/admin/tags') }"
+            >
+              Tags
+            </NuxtLink>
+          </li>
           <li>
             <NuxtLink
               to="/admin/site-content"
@@ -153,7 +161,7 @@
               </li>
               <li>
                 <NuxtLink
-                  to="/admin/series-management"
+                  to="/admin/series"
                   :class="{ active: route.path.includes('/admin/series') }"
                   @click="isMobileMenuOpen = false"
                 >
@@ -178,6 +186,15 @@
                   Board Channels
                 </NuxtLink>
               </li>
+              <li>
+                <NuxtLink
+                  to="/admin/tags"
+                  :class="{ active: route.path.startsWith('/admin/tags') }"
+                  @click="isMobileMenuOpen = false"
+                >
+                  Tags
+                </NuxtLink>
+              </li>
               <li>
                 <NuxtLink
                   to="/admin/site-content"
diff --git a/app/pages/admin/series/create.vue b/app/pages/admin/series/create.vue
index 1f8f48d..28cb5ff 100644
--- a/app/pages/admin/series/create.vue
+++ b/app/pages/admin/series/create.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="create-form">
     <div class="page-header">
-      <NuxtLink to="/admin/series-management" class="back-link">&larr; Series</NuxtLink>
+      <NuxtLink to="/admin/series" class="back-link">&larr; Series</NuxtLink>
       <h1>Create New Series</h1>
       <p>Create a new event series to group related events together</p>
     </div>
@@ -98,7 +98,7 @@
         <!-- Form Actions -->
         <div class="form-actions">
           <NuxtLink
-            to="/admin/series-management"
+            to="/admin/series"
             class="btn"
           >
             Cancel
@@ -211,7 +211,7 @@ const createSeries = async (redirectAfter = true) => {
 
     if (redirectAfter) {
       setTimeout(() => {
-        router.push('/admin/series-management')
+        router.push('/admin/series')
       }, 1500)
     }
 
diff --git a/app/pages/admin/series-management.vue b/app/pages/admin/series/index.vue
similarity index 100%
rename from app/pages/admin/series-management.vue
rename to app/pages/admin/series/index.vue
diff --git a/app/pages/admin/tags/index.vue b/app/pages/admin/tags/index.vue
new file mode 100644
index 0000000..79ab0cf
--- /dev/null
+++ b/app/pages/admin/tags/index.vue
@@ -0,0 +1,205 @@
+<template>
+  <div class="admin-tags">
+    <div class="page-header">
+      <h1>Tags</h1>
+      <p>Review tag suggestions submitted by members. Approving a suggestion creates a tag in its pool.</p>
+    </div>
+
+    <div class="suggestions-list">
+      <div v-if="!suggestions.length" class="empty-state">
+        <p>No pending tag suggestions.</p>
+        <p class="empty-hint">New suggestions from members will appear here for review.</p>
+      </div>
+
+      <table v-else class="suggestions-table">
+        <thead>
+          <tr>
+            <th>Tag</th>
+            <th>Pool</th>
+            <th>Suggested by</th>
+            <th>Suggested</th>
+            <th class="actions-col">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="suggestion in suggestions" :key="suggestion.id">
+            <td class="label-cell">{{ suggestion.label }}</td>
+            <td>
+              <span class="tag-pill">{{ poolLabel(suggestion.pool) }}</span>
+            </td>
+            <td>{{ suggestion.suggestedBy }}</td>
+            <td class="date-cell">{{ formatDate(suggestion.createdAt) }}</td>
+            <td class="actions-cell">
+              <button
+                class="link-btn"
+                :disabled="processingId === suggestion.id"
+                @click="review(suggestion, 'approve')"
+              >
+                Approve
+              </button>
+              <button
+                class="link-btn link-btn-danger"
+                :disabled="processingId === suggestion.id"
+                @click="review(suggestion, 'reject')"
+              >
+                Reject
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  layout: 'admin',
+  middleware: 'admin',
+})
+
+const toast = useToast()
+
+const { data, refresh } = await useFetch('/api/admin/tag-suggestions')
+
+const suggestions = computed(() => data.value?.suggestions || [])
+
+const poolLabel = (pool) => (pool === 'cooperative' ? 'Cooperative' : 'Craft')
+
+const formatDate = (value) =>
+  new Date(value).toLocaleDateString(undefined, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  })
+
+const processingId = ref(null)
+
+const review = async (suggestion, action) => {
+  processingId.value = suggestion.id
+  try {
+    await $fetch(`/api/admin/tag-suggestions/${suggestion.id}`, {
+      method: 'PATCH',
+      body: { action },
+    })
+    toast.add({
+      title: action === 'approve' ? 'Tag approved' : 'Suggestion rejected',
+      description:
+        action === 'approve'
+          ? `"${suggestion.label}" was added to the ${poolLabel(suggestion.pool)} pool.`
+          : `"${suggestion.label}" was rejected.`,
+    })
+    await refresh()
+  } catch (error) {
+    toast.add({
+      title: 'Action failed',
+      description: error.data?.statusMessage || error.message,
+      color: 'red',
+    })
+  } finally {
+    processingId.value = null
+  }
+}
+</script>
+
+<style scoped>
+.page-header {
+  margin-bottom: 24px;
+}
+.page-header h1 {
+  font-family: 'Brygada 1918', serif;
+  font-size: 28px;
+  margin-bottom: 4px;
+}
+.page-header p {
+  color: var(--text-dim);
+  font-size: 13px;
+}
+
+.suggestions-list {
+  border: 1px dashed var(--border);
+  background: var(--bg);
+}
+
+.suggestions-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+.suggestions-table th,
+.suggestions-table td {
+  padding: 10px 14px;
+  text-align: left;
+  border-bottom: 1px dashed var(--border);
+  vertical-align: top;
+}
+.suggestions-table thead th {
+  font-size: 10px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  font-weight: normal;
+  background: var(--surface);
+}
+.suggestions-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.label-cell {
+  font-weight: 600;
+}
+.date-cell {
+  color: var(--text-faint);
+  white-space: nowrap;
+}
+
+.tag-pill {
+  display: inline-block;
+  padding: 2px 9px;
+  font-size: 11px;
+  font-family: 'Commit Mono', monospace;
+  background: transparent;
+  border: 1px dashed var(--border);
+  color: var(--text-dim);
+}
+
+.actions-col {
+  width: 160px;
+}
+.actions-cell {
+  white-space: nowrap;
+}
+.link-btn {
+  background: none;
+  border: none;
+  color: var(--candle-dim);
+  font-size: 12px;
+  cursor: pointer;
+  padding: 2px 6px;
+  text-decoration: underline;
+}
+.link-btn:hover {
+  color: var(--candle);
+}
+.link-btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.link-btn-danger {
+  color: var(--ember);
+}
+.link-btn-danger:hover {
+  color: var(--ember);
+}
+
+.empty-state {
+  padding: 40px 20px;
+  text-align: center;
+  color: var(--text-dim);
+}
+.empty-hint {
+  font-size: 12px;
+  color: var(--text-faint);
+  margin-top: 4px;
+}
+</style>
diff --git a/e2e/admin-series.spec.js b/e2e/admin-series.spec.js
index 897bdb0..ed0f6d8 100644
--- a/e2e/admin-series.spec.js
+++ b/e2e/admin-series.spec.js
@@ -2,7 +2,7 @@ import { test, expect } from './helpers/fixtures.js'
 
 test.describe('Admin series management page', () => {
   test('series list loads for admin', async ({ adminPage }) => {
-    await adminPage.goto('/admin/series-management')
+    await adminPage.goto('/admin/series')
     await expect(adminPage.getByRole('heading', { name: 'Series', level: 1 })).toBeVisible({
       timeout: 15000,
     })
@@ -12,9 +12,9 @@ test.describe('Admin series management page', () => {
 
 test.describe('Admin series access control', () => {
   test('non-admin redirect', async ({ page }) => {
-    await page.goto('/admin/series-management')
+    await page.goto('/admin/series')
     await page.waitForURL((url) => !url.pathname.startsWith('/admin'))
-    expect(page.url()).not.toContain('/admin/series-management')
+    expect(page.url()).not.toContain('/admin/series')
   })
 })
 
@@ -39,7 +39,7 @@ test.describe('Admin series CRUD', () => {
 
     await adminPage.getByRole('button', { name: 'Create Series' }).click()
 
-    await adminPage.waitForURL('**/admin/series-management', { timeout: 15000 })
+    await adminPage.waitForURL('**/admin/series', { timeout: 15000 })
 
     const card = adminPage.locator('.series-card', { hasText: title })
     await expect(card).toBeVisible({ timeout: 10000 })
diff --git a/e2e/admin-tags.spec.js b/e2e/admin-tags.spec.js
new file mode 100644
index 0000000..58f47c2
--- /dev/null
+++ b/e2e/admin-tags.spec.js
@@ -0,0 +1,57 @@
+import { test, expect } from './helpers/fixtures.js'
+
+test.describe('Admin tags page', () => {
+  test('page loads for admin', async ({ adminPage }) => {
+    await adminPage.goto('/admin/tags')
+    await expect(adminPage.getByRole('heading', { name: 'Tags', level: 1 })).toBeVisible({
+      timeout: 15000,
+    })
+  })
+
+  test('approve and reject pending suggestions', async ({ adminPage }) => {
+    const suffix = Date.now().toString().slice(-6)
+    const approveLabel = `e2e-tag-approve-${suffix}`
+    const rejectLabel = `e2e-tag-reject-${suffix}`
+
+    // Load the page first so the csrf-token cookie is set, then seed two
+    // pending suggestions via the authed member endpoint (state-changing
+    // requests require the double-submit CSRF header — see middleware/01.csrf.js).
+    await adminPage.goto('/admin/tags')
+    const cookies = await adminPage.context().cookies()
+    const csrf = cookies.find((c) => c.name === 'csrf-token')?.value
+
+    await adminPage.request.post('/api/tags/suggest', {
+      headers: { 'x-csrf-token': csrf },
+      data: { label: approveLabel, pool: 'craft' },
+    })
+    await adminPage.request.post('/api/tags/suggest', {
+      headers: { 'x-csrf-token': csrf },
+      data: { label: rejectLabel, pool: 'cooperative' },
+    })
+
+    await adminPage.reload()
+    await adminPage.waitForLoadState('networkidle')
+
+    const approveRow = adminPage.locator('tr', { hasText: approveLabel })
+    await expect(approveRow).toBeVisible({ timeout: 10000 })
+    await approveRow.getByRole('button', { name: 'Approve' }).click()
+    await expect(adminPage.locator('tr', { hasText: approveLabel })).toHaveCount(0, {
+      timeout: 10000,
+    })
+
+    const rejectRow = adminPage.locator('tr', { hasText: rejectLabel })
+    await expect(rejectRow).toBeVisible()
+    await rejectRow.getByRole('button', { name: 'Reject' }).click()
+    await expect(adminPage.locator('tr', { hasText: rejectLabel })).toHaveCount(0, {
+      timeout: 10000,
+    })
+  })
+})
+
+test.describe('Admin tags access control', () => {
+  test('non-admin redirect', async ({ page }) => {
+    await page.goto('/admin/tags')
+    await page.waitForURL((url) => !url.pathname.startsWith('/admin'))
+    expect(page.url()).not.toContain('/admin/tags')
+  })
+})
diff --git a/server/api/admin/tag-suggestions/[id].patch.js b/server/api/admin/tag-suggestions/[id].patch.js
new file mode 100644
index 0000000..4ce0570
--- /dev/null
+++ b/server/api/admin/tag-suggestions/[id].patch.js
@@ -0,0 +1,43 @@
+import TagSuggestion from '../../../models/tagSuggestion.js'
+import Tag from '../../../models/tag.js'
+import { connectDB } from '../../../utils/mongoose.js'
+import { requireAdmin } from '../../../utils/auth.js'
+import { validateBody } from '../../../utils/validateBody.js'
+import { tagSuggestionReviewSchema } from '../../../utils/schemas.js'
+
+const slugify = (s) =>
+  s
+    .toLowerCase()
+    .trim()
+    .replace(/\s+/g, '-')
+    .replace(/[^a-z0-9-]/g, '')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '')
+
+export default defineEventHandler(async (event) => {
+  await requireAdmin(event)
+  await connectDB()
+
+  const id = getRouterParam(event, 'id')
+  const { action } = await validateBody(event, tagSuggestionReviewSchema)
+
+  const suggestion = await TagSuggestion.findById(id).lean()
+  if (!suggestion) {
+    throw createError({ statusCode: 404, statusMessage: 'Tag suggestion not found' })
+  }
+  if (suggestion.status !== 'pending') {
+    throw createError({ statusCode: 409, statusMessage: 'Tag suggestion already reviewed' })
+  }
+
+  if (action === 'approve') {
+    const slug = slugify(suggestion.label)
+    if (slug && !(await Tag.findOne({ slug }))) {
+      await Tag.create({ slug, label: suggestion.label, pool: suggestion.pool, active: true })
+    }
+  }
+
+  const status = action === 'approve' ? 'approved' : 'rejected'
+  await TagSuggestion.findByIdAndUpdate(id, { status }, { runValidators: false })
+
+  return { suggestion: { id, status } }
+})
diff --git a/server/api/admin/tag-suggestions/index.get.js b/server/api/admin/tag-suggestions/index.get.js
new file mode 100644
index 0000000..1ba049a
--- /dev/null
+++ b/server/api/admin/tag-suggestions/index.get.js
@@ -0,0 +1,23 @@
+import TagSuggestion from '../../../models/tagSuggestion.js'
+import { connectDB } from '../../../utils/mongoose.js'
+import { requireAdmin } from '../../../utils/auth.js'
+
+export default defineEventHandler(async (event) => {
+  await requireAdmin(event)
+  await connectDB()
+
+  const suggestions = await TagSuggestion.find({ status: 'pending' })
+    .sort({ createdAt: 1 })
+    .populate('suggestedBy', 'name')
+    .lean()
+
+  return {
+    suggestions: suggestions.map((s) => ({
+      id: String(s._id),
+      label: s.label,
+      pool: s.pool,
+      suggestedBy: s.suggestedBy?.name || 'Unknown',
+      createdAt: s.createdAt
+    }))
+  }
+})
diff --git a/server/utils/schemas.js b/server/utils/schemas.js
index 84ccf96..8504534 100644
--- a/server/utils/schemas.js
+++ b/server/utils/schemas.js
@@ -388,6 +388,10 @@ export const adminTagCreateSchema = z.object({
   pool: z.enum(['craft', 'cooperative'])
 })
 
+export const tagSuggestionReviewSchema = z.object({
+  action: z.enum(['approve', 'reject'])
+})
+
 // --- Board post / channel schemas ---
 
 export const boardPostCreateSchema = z.object({

From 10a28ac5ef00b432fb2cb77a5089c108cd60fb52 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sun, 24 May 2026 14:01:02 +0100
Subject: [PATCH 21/21] feat(helcim): accept signup-bridge cookie in
 verify-payment

Membership signup verifies the card before email verification, so the
signup-bridge cookie set by /api/helcim/customer now satisfies auth in
verify-payment when no session exists. Adds a cloudflared tunnel script
for testing the Helcim flow locally against a production build.
---
 scripts/helcim-tunnel.sh                 | 74 ++++++++++++++++++++++++
 server/api/helcim/verify-payment.post.js |  9 ++-
 tests/server/api/helcim-payment.test.js  | 28 ++++++++-
 3 files changed, 107 insertions(+), 4 deletions(-)
 create mode 100755 scripts/helcim-tunnel.sh

diff --git a/scripts/helcim-tunnel.sh b/scripts/helcim-tunnel.sh
new file mode 100755
index 0000000..8597a1a
--- /dev/null
+++ b/scripts/helcim-tunnel.sh
@@ -0,0 +1,74 @@
+#!/usr/bin/env bash
+# Public tunnel for testing the Helcim payment flow locally.
+#
+# Why a production build (not `nuxt dev`): dev mode serves the client as 100+
+# individual ESM modules, which a cloudflared quick tunnel delivers unreliably
+# (sporadic 503s on the page-load burst abort hydration — the page renders but
+# is dead to clicks). A production bundle is a handful of hashed assets, served
+# rock-solid through the tunnel.
+#
+# BASE_URL + NUXT_PUBLIC_APP_URL are set to the tunnel URL at launch — the Helcim
+# signup route requires the request Origin to exactly match BASE_URL. All other
+# secrets load from .env via Node's --env-file (shell-set vars take precedence,
+# so the tunnel URL wins). .env itself is never modified.
+#
+# Trade-off: no HMR. Re-run this script after code changes to rebuild.
+#
+# Usage: ./scripts/helcim-tunnel.sh   (Ctrl-C stops the server and the tunnel)
+
+set -euo pipefail
+cd "$(dirname "$0")/.."
+
+if [ ! -f .env ]; then
+  echo "ERROR: .env not found in $(pwd)" >&2
+  exit 1
+fi
+
+LOG="$(mktemp)"
+CF_PID=""
+SRV_PID=""
+
+cleanup() {
+  echo ""
+  echo "Stopping server and tunnel..."
+  [ -n "$SRV_PID" ] && kill "$SRV_PID" 2>/dev/null || true
+  [ -n "$CF_PID" ] && kill "$CF_PID" 2>/dev/null || true
+  rm -f "$LOG"
+}
+trap cleanup EXIT
+trap 'exit 130' INT TERM
+
+echo "Starting cloudflared quick tunnel -> http://localhost:3000 ..."
+cloudflared tunnel --url http://localhost:3000 >"$LOG" 2>&1 &
+CF_PID=$!
+
+TUNNEL_URL=""
+for _ in $(seq 1 30); do
+  TUNNEL_URL="$(grep -oE 'https://[a-zA-Z0-9.-]+\.trycloudflare\.com' "$LOG" | head -1 || true)"
+  [ -n "$TUNNEL_URL" ] && break
+  sleep 1
+done
+
+if [ -z "$TUNNEL_URL" ]; then
+  echo "ERROR: could not obtain a tunnel URL. cloudflared output:" >&2
+  cat "$LOG" >&2
+  exit 1
+fi
+echo "Tunnel live: $TUNNEL_URL"
+
+echo "Building production bundle (npm run build)..."
+npm run build
+
+echo ""
+echo "  Serving .output through the tunnel."
+echo "  Open the app at: $TUNNEL_URL   (NOT localhost — Helcim origin check requires it)"
+echo "  Ctrl-C stops the server and the tunnel."
+echo ""
+
+PORT=3000 \
+HOST=127.0.0.1 \
+BASE_URL="$TUNNEL_URL" \
+NUXT_PUBLIC_APP_URL="$TUNNEL_URL" \
+  node --env-file=.env .output/server/index.mjs &
+SRV_PID=$!
+wait "$SRV_PID"
diff --git a/server/api/helcim/verify-payment.post.js b/server/api/helcim/verify-payment.post.js
index e00d28d..8359565 100644
--- a/server/api/helcim/verify-payment.post.js
+++ b/server/api/helcim/verify-payment.post.js
@@ -1,12 +1,17 @@
 // Verify payment token from HelcimPay.js
-import { requireAuth } from '../../utils/auth.js'
+import { requireAuth, getSignupBridgeMember } from '../../utils/auth.js'
 import { validateBody } from '../../utils/validateBody.js'
 import { paymentVerifySchema } from '../../utils/schemas.js'
 import { listHelcimCustomerCards } from '../../utils/helcim.js'
 
 export default defineEventHandler(async (event) => {
   try {
-    await requireAuth(event)
+    // Membership signup verifies the card before email verify; allow the
+    // signup-bridge cookie set by /api/helcim/customer to satisfy auth here.
+    const bridgeMember = await getSignupBridgeMember(event)
+    if (!bridgeMember) {
+      await requireAuth(event)
+    }
     const body = await validateBody(event, paymentVerifySchema)
 
     // Verify the card token by fetching the customer's cards from Helcim
diff --git a/tests/server/api/helcim-payment.test.js b/tests/server/api/helcim-payment.test.js
index d5df7f6..5ae55ae 100644
--- a/tests/server/api/helcim-payment.test.js
+++ b/tests/server/api/helcim-payment.test.js
@@ -1,6 +1,6 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 
-import { requireAuth, getOptionalMember } from '../../../server/utils/auth.js'
+import { requireAuth, getOptionalMember, getSignupBridgeMember } from '../../../server/utils/auth.js'
 import { validateBody as importedValidateBody } from '../../../server/utils/validateBody.js'
 import { loadPublicEvent } from '../../../server/utils/loadEvent.js'
 import { loadPublicSeries } from '../../../server/utils/loadSeries.js'
@@ -12,7 +12,8 @@ import { createMockEvent } from '../helpers/createMockEvent.js'
 
 vi.mock('../../../server/utils/auth.js', () => ({
   requireAuth: vi.fn(),
-  getOptionalMember: vi.fn()
+  getOptionalMember: vi.fn(),
+  getSignupBridgeMember: vi.fn()
 }))
 vi.mock('../../../server/utils/validateBody.js', () => ({ validateBody: vi.fn() }))
 vi.mock('../../../server/utils/schemas.js', () => ({ paymentVerifySchema: {} }))
@@ -367,4 +368,27 @@ describe('verify-payment endpoint', () => {
       statusMessage: 'Payment method not found or does not belong to this customer'
     })
   })
+
+  it('accepts the signup-bridge cookie without requiring auth', async () => {
+    const body = { customerId: 'cust-1', cardToken: 'tok-match' }
+    getSignupBridgeMember.mockResolvedValue({ _id: 'm1' })
+    importedValidateBody.mockResolvedValue(body)
+
+    mockFetch.mockResolvedValue({
+      ok: true,
+      text: async () => JSON.stringify([{ cardToken: 'tok-match' }])
+    })
+
+    const event = createMockEvent({
+      method: 'POST',
+      path: '/api/helcim/verify-payment',
+      body
+    })
+
+    const result = await verifyPaymentHandler(event)
+
+    expect(result.success).toBe(true)
+    expect(getSignupBridgeMember).toHaveBeenCalledWith(event)
+    expect(requireAuth).not.toHaveBeenCalled()
+  })
 })