E2e tests
This commit is contained in:
parent
edef1b86be
commit
00073ec52c
3 changed files with 56 additions and 42 deletions
|
|
@ -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.",
|
||||
},
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -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 × 12)</span>.
|
||||
You'll be charged <strong>${{ firstCharge }} today</strong
|
||||
><span v-if="cadence === 'annual'">
|
||||
(${{ form.contributionAmount }}/month × 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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue