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

1
server/api/auth/member.get.js
View file

@ -12,6 +12,7 @@ export default defineEventHandler(async (event) => {
role: member.role || 'member', role: member.role || 'member',
circle: member.circle, circle: member.circle,
contributionTier: member.contributionTier, contributionTier: member.contributionTier,
billingCadence: member.billingCadence,
membershipLevel: `${member.circle}-${member.contributionTier}`, membershipLevel: `${member.circle}-${member.contributionTier}`,
// Profile fields // Profile fields
pronouns: member.pronouns, pronouns: member.pronouns,