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/member/account.vue
View file

@ -239,10 +239,15 @@ const BASE_TIERS = [
const tiers = computed(() => {
const cadence = memberData.value?.billingCadence || 'monthly';
return BASE_TIERS.map((t) => ({
...t,
display: t.amount === 0 ? '$0' : `$${getTierAmount(t, cadence)}`,
}));
return BASE_TIERS.map((t) => {
if (t.amount === 0) return { ...t, display: '$0' };
const suffix = cadence === 'annual' ? '/yr' : '/mo';
return {
...t,
display: `$${getTierAmount(t, cadence)}${suffix}`,
subtitle: cadence === 'annual' ? `$${t.amount}/mo tier` : null,
};
});
});
const currentContributionLabel = computed(() => {