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

feat(account): display cadence and annual pricing in tier selector

Browse source
This commit is contained in:
Jennie Robinson Faber 2026-04-18 18:08:10 +01:00
parent 748a84d001
commit fb337a4277
2 changed files with 30 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

39
app/pages/member/account.vue
View file

@ -57,9 +57,7 @@
</div>
<div class="membership-row">
<span class="membership-k">Contribution</span>
<span class="membership-v"
>${{ memberData.contributionTier || 0 }} / month</span
>
<span class="membership-v">{{ currentContributionLabel }}</span>
</div>
<div class="membership-row">
<span class="membership-k">Member since</span>
@ -210,6 +208,8 @@
</template>
<script setup>
import { getTierAmount, getContributionTierByValue } from '~/config/contributions';
definePageMeta({
middleware: "auth",
});
@ -229,14 +229,30 @@ const showEmailEdit = ref(false);
const newEmail = ref("");
const isUpdatingEmail = ref(false);
const tiers = [
{ amount: 0, display: "$0", label: "I need support right now" },
{ amount: 5, display: "$5", label: "I can contribute" },
{ amount: 15, display: "$15", label: "I can sustain the community" },
{ amount: 30, display: "$30", label: "I can support others too" },
{ amount: 50, display: "$50", label: "I want to sponsor multiple members" },
const BASE_TIERS = [
{ amount: 0, label: "I need support right now" },
{ amount: 5, label: "I can contribute" },
{ amount: 15, label: "I can sustain the community" },
{ amount: 30, label: "I can support others too" },
{ amount: 50, label: "I want to sponsor multiple members" },
];
const tiers = computed(() => {
const cadence = memberData.value?.billingCadence || 'monthly';
return BASE_TIERS.map((t) => ({
...t,
display: t.amount === 0 ? '$0' : `$${getTierAmount(t, cadence)}`,
}));
});
const currentContributionLabel = computed(() => {
const tier = getContributionTierByValue(String(memberData.value?.contributionTier || '0'));
const cadence = memberData.value?.billingCadence || 'monthly';
if (!tier || tier.amount === 0) return '$0';
const amount = getTierAmount(tier, cadence);
return cadence === 'annual' ? `$${amount} / year` : `$${amount} / month`;
});
const circleOptions = [
{
value: "community",
@ -287,7 +303,10 @@ const handleUpdateTier = async () => {
try {
await $fetch("/api/members/update-contribution", {
method: "POST",
body: { contributionTier: String(selectedTier.value) },
body: {
contributionTier: String(selectedTier.value),
cadence: memberData.value?.billingCadence || 'monthly',
},
});
await checkMemberStatus();
toast.add({ title: "Contribution updated", color: "success" });