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

fix(ui): disambiguate annual tier labels

Browse source 
"$50/yr" was ambiguous — could mean the $5 tier in annual mode or the
$50 tier in monthly mode. On /join the dropdown now shows both prices
("$5/mo → $50/yr") in annual mode. On the account page TierPicker
gains a subtitle slot; annual mode shows "$N/mo tier" beneath the
annual price so members recognize which tier they're on.
This commit is contained in:
Jennie Robinson Faber 2026-04-18 22:06:38 +01:00
parent 8ceaebb268
commit fd9ce5bc2c
3 changed files with 28 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

13
app/pages/join.vue
View file

@ -467,14 +467,19 @@ const paymentToken = ref(null);
const circleOptions = getCircleOptions();
// Minimal labels for the dropdown — reactive to cadence.
// In annual mode, show both monthly and annual price so $50/yr (the $5 tier annual)
// is visually distinct from $500/yr (the $50 tier annual).
const contributionItems = computed(() => {
return Object.values(CONTRIBUTION_TIERS).map((tier) => {
const base = tier.amount;
if (base === 0) return { value: tier.value, label: "$0" };
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}` };
const monthlyLabel = `$${base}/mo`;
const priceLabel =
cadence.value === "annual"
? `${monthlyLabel} → $${getTierAmount(tier, "annual")}/yr`
: monthlyLabel;
const hint = tier.value === "15" ? " (suggested)" : "";
return { value: tier.value, label: `${priceLabel}${hint}` };
});
});