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