From 00073ec52cc1b9a5e2f39551bbf634172b9af5a9 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Mon, 27 Apr 2026 10:28:21 +0100
Subject: [PATCH] E2e tests

---
 app/pages/index.vue          |  8 ++--
 app/pages/join.vue           | 86 ++++++++++++++++++++++--------------
 app/pages/member/profile.vue |  4 --
 3 files changed, 56 insertions(+), 42 deletions(-)

diff --git a/app/pages/index.vue b/app/pages/index.vue
index d813d33..de89b01 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -131,12 +131,10 @@ const DEFAULT_WIKI_FEATURE_TITLE = "What is a cooperative studio?";
 
 const { data: wikiFeature } = await useFetch(
   "/api/site-content/homepage.wiki_feature",
-  { default: () => ({ title: "", body: "" }) }
+  { default: () => ({ title: "", body: "" }) },
 );
 
-const hasCustomWikiFeature = computed(
-  () => !!wikiFeature.value?.body?.trim()
-);
+const hasCustomWikiFeature = computed(() => !!wikiFeature.value?.body?.trim());
 
 const customWikiParagraphs = computed(() => {
   const body = wikiFeature.value?.body?.trim() || "";
@@ -166,7 +164,7 @@ const circleData = [
     label: "Practitioner",
     metaphor: "The alcove",
     blurb:
-      "Where experience is shared and knowledge given back. You're here to teach, advise, mentor, and help shape the program itself. Alumni welcome.",
+      "Where experience is shared and knowledge given back. You're here to support newcomers, help shape the Cooperative Foundations program, and find peers.",
   },
 ];
 
diff --git a/app/pages/join.vue b/app/pages/join.vue
index 5a256e8..1a88b43 100644
--- a/app/pages/join.vue
+++ b/app/pages/join.vue
@@ -64,26 +64,37 @@
         <!-- Left: Monthly Contribution -->
         <div class="join-col">
           <div class="section-label" style="margin-bottom: 12px">
-            {{ cadence === 'annual' ? 'Annual Contribution' : 'Monthly Contribution' }}
+            {{
+              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)
+              <span class="tier-amt">{{ formatContributionAmount(5) }}</span> I
+              can contribute
             </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
+              <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.
+            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
@@ -118,7 +129,7 @@
                   type="text"
                   placeholder="Your name"
                   required
-                >
+                />
               </div>
               <div class="form-group">
                 <label class="form-label" for="join-email">Email Address</label>
@@ -129,7 +140,7 @@
                   type="email"
                   placeholder="you@example.com"
                   required
-                >
+                />
               </div>
               <div class="form-group">
                 <label class="form-label">Circle</label>
@@ -141,7 +152,7 @@
                       type="radio"
                       name="circle"
                       value="community"
-                    >
+                    />
                     <label for="circle-community">
                       <span
                         class="circle-label-name"
@@ -158,7 +169,7 @@
                       type="radio"
                       name="circle"
                       value="founder"
-                    >
+                    />
                     <label for="circle-founder">
                       <span
                         class="circle-label-name"
@@ -175,7 +186,7 @@
                       type="radio"
                       name="circle"
                       value="practitioner"
-                    >
+                    />
                     <label for="circle-practitioner">
                       <span
                         class="circle-label-name"
@@ -197,7 +208,7 @@
                       type="radio"
                       name="cadence"
                       value="monthly"
-                    >
+                    />
                     <label for="cadence-monthly">
                       <span class="circle-label-name">Per Month</span>
                     </label>
@@ -209,7 +220,7 @@
                       type="radio"
                       name="cadence"
                       value="annual"
-                    >
+                    />
                     <label for="cadence-annual">
                       <span class="circle-label-name">Per Year</span>
                     </label>
@@ -230,9 +241,13 @@
                     step="1"
                     inputmode="numeric"
                     class="contribution-input"
-                  >
+                  />
                 </div>
-                <div class="contribution-presets" role="group" aria-label="Suggested amounts">
+                <div
+                  class="contribution-presets"
+                  role="group"
+                  aria-label="Suggested amounts"
+                >
                   <button
                     v-for="preset in CONTRIBUTION_PRESETS"
                     :key="preset.amount"
@@ -243,24 +258,30 @@
                     ${{ preset.amount }}
                   </button>
                 </div>
-                <p v-if="guidanceLabel" class="contribution-guidance">{{ guidanceLabel }}</p>
+                <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>.
+                    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.
+                    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
-                    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"
@@ -338,12 +359,11 @@
           <h2>Practicing</h2>
           <p>
             For those already running cooperative studios or with deep
-            experience in cooperative practice. You are here to teach, advise,
-            mentor, and help shape the program itself. Alumni.
+            experience in cooperative practice. You're here to support newcomers
+            and help shape the Cooperative Foundations program.
           </p>
         </div>
       </div>
-
     </template>
 
     <!-- Flow overlay: covers the page from form submit through redirect.
@@ -434,7 +454,8 @@ const isFormValid = computed(() => {
     form.name &&
     form.email &&
     form.circle &&
-    Number.isInteger(form.contributionAmount) && form.contributionAmount >= 0 &&
+    Number.isInteger(form.contributionAmount) &&
+    form.contributionAmount >= 0 &&
     form.agreedToGuidelines
   );
 });
@@ -830,7 +851,7 @@ onUnmounted(() => {
   padding: 0.5rem 0.75rem;
   background: var(--input-bg);
   border: 1px solid var(--parch);
-  font-family: 'Commit Mono', monospace;
+  font-family: "Commit Mono", monospace;
   font-size: 1rem;
 }
 .contribution-input:focus {
@@ -847,7 +868,7 @@ onUnmounted(() => {
   padding: 0.25rem 0.75rem;
   background: transparent;
   border: 1px dashed var(--parch);
-  font-family: 'Commit Mono', monospace;
+  font-family: "Commit Mono", monospace;
   font-size: 0.875rem;
   cursor: pointer;
 }
@@ -1127,5 +1148,4 @@ onUnmounted(() => {
     align-items: stretch;
   }
 }
-
 </style>
diff --git a/app/pages/member/profile.vue b/app/pages/member/profile.vue
index 2f7f54f..b305dc0 100644
--- a/app/pages/member/profile.vue
+++ b/app/pages/member/profile.vue
@@ -715,10 +715,6 @@ useHead({
   text-decoration: underline;
 }
 
-.timezone-select :deep([data-slot="placeholder"]) {
-  color: var(--text-dim);
-}
-
 .posts-list {
   list-style: none;
   margin: 0;