E2e tests
Some checks failed
Test / vitest (push) Successful in 12m20s
Test / playwright (push) Failing after 9m52s
Test / visual (push) Failing after 9m22s
Test / Notify on failure (push) Successful in 2s

This commit is contained in:
Jennie Robinson Faber 2026-04-27 10:28:21 +01:00
parent edef1b86be
commit 00073ec52c
3 changed files with 56 additions and 42 deletions

View file

@ -131,12 +131,10 @@ const DEFAULT_WIKI_FEATURE_TITLE = "What is a cooperative studio?";
const { data: wikiFeature } = await useFetch( const { data: wikiFeature } = await useFetch(
"/api/site-content/homepage.wiki_feature", "/api/site-content/homepage.wiki_feature",
{ default: () => ({ title: "", body: "" }) } { default: () => ({ title: "", body: "" }) },
); );
const hasCustomWikiFeature = computed( const hasCustomWikiFeature = computed(() => !!wikiFeature.value?.body?.trim());
() => !!wikiFeature.value?.body?.trim()
);
const customWikiParagraphs = computed(() => { const customWikiParagraphs = computed(() => {
const body = wikiFeature.value?.body?.trim() || ""; const body = wikiFeature.value?.body?.trim() || "";
@ -166,7 +164,7 @@ const circleData = [
label: "Practitioner", label: "Practitioner",
metaphor: "The alcove", metaphor: "The alcove",
blurb: 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.",
}, },
]; ];

View file

@ -64,26 +64,37 @@
<!-- Left: Monthly Contribution --> <!-- Left: Monthly Contribution -->
<div class="join-col"> <div class="join-col">
<div class="section-label" style="margin-bottom: 12px"> <div class="section-label" style="margin-bottom: 12px">
{{ cadence === 'annual' ? 'Annual Contribution' : 'Monthly Contribution' }} {{
cadence === "annual"
? "Annual Contribution"
: "Monthly Contribution"
}}
</div> </div>
<h2>Pay what you can</h2> <h2>Pay what you can</h2>
<ul class="tier-list"> <ul class="tier-list">
<li><span class="tier-amt">$0</span> I need support right now</li> <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> <li>
<span class="tier-amt">{{ formatContributionAmount(15) }}</span> I can sustain the community <span class="tier-amt">{{ formatContributionAmount(5) }}</span> I
(suggested) can contribute
</li> </li>
<li><span class="tier-amt">{{ formatContributionAmount(30) }}</span> I can support others too</li>
<li> <li>
<span class="tier-amt">{{ formatContributionAmount(50) }}</span> I want to sponsor multiple <span class="tier-amt">{{ formatContributionAmount(15) }}</span> I
members 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> </li>
</ul> </ul>
<p class="charity-note"> <p class="charity-note">
Baby Ghosts Studio Development Fund is a registered Canadian charity. Baby Ghosts Studio Development Fund is a registered Canadian
Members who file Canadian taxes can claim their contributions. charity. Members who file Canadian taxes can claim their
We'll help you set up tax receipts once you've joined. contributions. We'll help you set up tax receipts once you've
joined.
</p> </p>
<p class="solidarity-note"> <p class="solidarity-note">
Pay what you can. If you can pay more, you're making room for Pay what you can. If you can pay more, you're making room for
@ -118,7 +129,7 @@
type="text" type="text"
placeholder="Your name" placeholder="Your name"
required required
> />
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="form-label" for="join-email">Email Address</label> <label class="form-label" for="join-email">Email Address</label>
@ -129,7 +140,7 @@
type="email" type="email"
placeholder="you@example.com" placeholder="you@example.com"
required required
> />
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="form-label">Circle</label> <label class="form-label">Circle</label>
@ -141,7 +152,7 @@
type="radio" type="radio"
name="circle" name="circle"
value="community" value="community"
> />
<label for="circle-community"> <label for="circle-community">
<span <span
class="circle-label-name" class="circle-label-name"
@ -158,7 +169,7 @@
type="radio" type="radio"
name="circle" name="circle"
value="founder" value="founder"
> />
<label for="circle-founder"> <label for="circle-founder">
<span <span
class="circle-label-name" class="circle-label-name"
@ -175,7 +186,7 @@
type="radio" type="radio"
name="circle" name="circle"
value="practitioner" value="practitioner"
> />
<label for="circle-practitioner"> <label for="circle-practitioner">
<span <span
class="circle-label-name" class="circle-label-name"
@ -197,7 +208,7 @@
type="radio" type="radio"
name="cadence" name="cadence"
value="monthly" value="monthly"
> />
<label for="cadence-monthly"> <label for="cadence-monthly">
<span class="circle-label-name">Per Month</span> <span class="circle-label-name">Per Month</span>
</label> </label>
@ -209,7 +220,7 @@
type="radio" type="radio"
name="cadence" name="cadence"
value="annual" value="annual"
> />
<label for="cadence-annual"> <label for="cadence-annual">
<span class="circle-label-name">Per Year</span> <span class="circle-label-name">Per Year</span>
</label> </label>
@ -230,9 +241,13 @@
step="1" step="1"
inputmode="numeric" inputmode="numeric"
class="contribution-input" class="contribution-input"
> />
</div> </div>
<div class="contribution-presets" role="group" aria-label="Suggested amounts"> <div
class="contribution-presets"
role="group"
aria-label="Suggested amounts"
>
<button <button
v-for="preset in CONTRIBUTION_PRESETS" v-for="preset in CONTRIBUTION_PRESETS"
:key="preset.amount" :key="preset.amount"
@ -243,24 +258,30 @@
${{ preset.amount }} ${{ preset.amount }}
</button> </button>
</div> </div>
<p v-if="guidanceLabel" class="contribution-guidance">{{ guidanceLabel }}</p> <p v-if="guidanceLabel" class="contribution-guidance">
{{ guidanceLabel }}
</p>
</div> </div>
<div v-if="form.contributionAmount > 0" class="form-group"> <div v-if="form.contributionAmount > 0" class="form-group">
<div class="billing-summary"> <div class="billing-summary">
<p class="billing-summary-line"> <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>
<p class="billing-summary-line"> <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> </p>
</div> </div>
</div> </div>
<div class="form-group full-width"> <div class="form-group full-width">
<label class="checkbox-label"> <label class="checkbox-label">
<input <input v-model="form.agreedToGuidelines" type="checkbox" />
v-model="form.agreedToGuidelines"
type="checkbox"
>
<span> <span>
I agree to the Ghost Guild I agree to the Ghost Guild
<NuxtLink to="/community-guidelines" target="_blank" <NuxtLink to="/community-guidelines" target="_blank"
@ -338,12 +359,11 @@
<h2>Practicing</h2> <h2>Practicing</h2>
<p> <p>
For those already running cooperative studios or with deep For those already running cooperative studios or with deep
experience in cooperative practice. You are here to teach, advise, experience in cooperative practice. You're here to support newcomers
mentor, and help shape the program itself. Alumni. and help shape the Cooperative Foundations program.
</p> </p>
</div> </div>
</div> </div>
</template> </template>
<!-- Flow overlay: covers the page from form submit through redirect. <!-- Flow overlay: covers the page from form submit through redirect.
@ -434,7 +454,8 @@ const isFormValid = computed(() => {
form.name && form.name &&
form.email && form.email &&
form.circle && form.circle &&
Number.isInteger(form.contributionAmount) && form.contributionAmount >= 0 && Number.isInteger(form.contributionAmount) &&
form.contributionAmount >= 0 &&
form.agreedToGuidelines form.agreedToGuidelines
); );
}); });
@ -830,7 +851,7 @@ onUnmounted(() => {
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
background: var(--input-bg); background: var(--input-bg);
border: 1px solid var(--parch); border: 1px solid var(--parch);
font-family: 'Commit Mono', monospace; font-family: "Commit Mono", monospace;
font-size: 1rem; font-size: 1rem;
} }
.contribution-input:focus { .contribution-input:focus {
@ -847,7 +868,7 @@ onUnmounted(() => {
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
background: transparent; background: transparent;
border: 1px dashed var(--parch); border: 1px dashed var(--parch);
font-family: 'Commit Mono', monospace; font-family: "Commit Mono", monospace;
font-size: 0.875rem; font-size: 0.875rem;
cursor: pointer; cursor: pointer;
} }
@ -1127,5 +1148,4 @@ onUnmounted(() => {
align-items: stretch; align-items: stretch;
} }
} }
</style> </style>

View file

@ -715,10 +715,6 @@ useHead({
text-decoration: underline; text-decoration: underline;
} }
.timezone-select :deep([data-slot="placeholder"]) {
color: var(--text-dim);
}
.posts-list { .posts-list {
list-style: none; list-style: none;
margin: 0; margin: 0;