jennie/ghostguild-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(join): use getTierAmount helper for cadence pricing

Browse source
This commit is contained in:
Jennie Robinson Faber 2026-04-18 18:02:04 +01:00
parent cd0d3f7167
commit 673f881b54
1 changed files with 16 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

24
app/pages/join.vue
View file

@ -121,14 +121,14 @@
<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">{{ cadence === 'annual' ? '$50/yr' : '$5/mo' }}</span> I can contribute</li>
<li><span class="tier-amt">{{ formatTierAmount('5', '') }}</span> I can contribute</li>
<li>
<span class="tier-amt">{{ cadence === 'annual' ? '$150/yr' : '$15/mo' }}</span> I can sustain the community
<span class="tier-amt">{{ formatTierAmount('15', '') }}</span> I can sustain the community
(suggested)
</li>
<li><span class="tier-amt">{{ cadence === 'annual' ? '$300/yr' : '$30/mo' }}</span> I can support others too</li>
<li><span class="tier-amt">{{ formatTierAmount('30', '') }}</span> I can support others too</li>
<li>
<span class="tier-amt">{{ cadence === 'annual' ? '$500/yr' : '$50/mo' }}</span> I want to sponsor multiple
<span class="tier-amt">{{ formatTierAmount('50', '') }}</span> I want to sponsor multiple
members
</li>
</ul>
@ -472,17 +472,25 @@ const contributionOptions = getContributionOptions();
// Minimal labels for the dropdown — reactive to cadence.
const contributionItems = computed(() => {
const isAnnual = cadence.value === "annual";
return Object.values(CONTRIBUTION_TIERS).map((tier) => {
const base = tier.amount;
if (base === 0) return { value: tier.value, label: "$0" };
const amt = isAnnual ? base * 10 : base;
const suffix = isAnnual ? "/yr" : "/mo";
const hint = tier.value === "15" && !isAnnual ? " (suggested)" : "";
const amt = getTierAmount(tier, cadence.value);
const suffix = cadence.value === "annual" ? "/yr" : "/mo";
const hint = tier.value === "15" && cadence.value !== "annual" ? " (suggested)" : "";
return { value: tier.value, label: `$${amt}${suffix}${hint}` };
});
});
// Format tier amount for display in tier list
const formatTierAmount = (value, label) => {
const tier = getContributionTierByValue(value);
if (!tier || tier.amount === 0) return "$0";
const amt = getTierAmount(tier, cadence.value);
const suffix = cadence.value === "annual" ? "/yr" : "/mo";
return `$${amt}${suffix}`;
};
// Initialize composables
const {
initializeHelcimPay,