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