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(
|
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.",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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 × 12)</span>.
|
You'll be charged <strong>${{ firstCharge }} today</strong
|
||||||
|
><span v-if="cadence === 'annual'">
|
||||||
|
(${{ form.contributionAmount }}/month × 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>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue