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(
"/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.",
},
];

View file

@ -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>

View file

@ -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;