Compare commits

...
Sign in to create a new pull request.

1 commit

Author SHA1 Message Date
45a365035a E2e tests 2026-04-27 10:28:21 +01:00
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;