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

fix(account): show payment history + next-charge for paid-then-$0 members

Browse source 
Three related changes on /member/account:

1. Payment History section now renders when contributionAmount > 0 OR
   past payments exist. Previously a paid member who switched to $0 lost
   visibility of their own past charges.

2. New "Next charge: $X on DATE" row renders above the transaction list
   when nextPaymentDate is available, using --candle dashed border.

3. server/api/helcim/subscription.get.js now reads dateBilling from
   Helcim's GET response and handles data as either object or array.
   Helcim's real shape is {data: {id, dateBilling, ...}} — the old code
   expected {data: [{nextBillingDate}]} and returned empty strings, so
   the Membership-card "Next payment" row never rendered for members
   whose cached date was missing. subscription.post.js and
   update-contribution.post.js have the same wrong field name in their
   CREATE flows; left for a follow-up — the GET refresh masks it.

Manual edit-flow and admin-flow tests also recorded in
docs/LAUNCH_READINESS.md.
This commit is contained in:
Jennie Robinson Faber 2026-04-20 12:36:18 +01:00
parent a80728f0a8
commit 335a4db7cc
3 changed files with 51 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -72,13 +72,18 @@
</div>
</PageSection>
<!-- PAYMENT HISTORY (only when there's actually a paid plan) -->
<!-- PAYMENT HISTORY (shown when a paid plan is active OR past payments exist) -->
<PageSection
v-if="memberData.helcimCustomerId && (memberData.contributionAmount || 0) > 0"
v-if="memberData.helcimCustomerId && ((memberData.contributionAmount || 0) > 0 || paymentHistory.length > 0)"
divider="top"
>
<div class="section-label">Payment history</div>
<div v-if="nextPaymentDate" class="next-charge">
<span class="next-charge-label">Next charge</span>
<span class="next-charge-value">${{ nextChargeAmount }} on {{ formatNextPaymentDate(nextPaymentDate) }}</span>
</div>
<div v-if="paymentHistoryLoading" class="history-card">
<div class="history-row history-state">Loading…</div>
</div>
@ -388,6 +393,12 @@ const currentContributionLabel = computed(() => {
return cadence.value === 'annual' ? `$${displayAmount} / year` : `$${displayAmount} / month`;
});
const nextChargeAmount = computed(() => {
const amount = Number(memberData.value?.contributionAmount || 0);
if (!amount) return null;
return cadence.value === 'annual' ? amount * 12 : amount;
});
const circleOptions = [
{
value: "community",
@ -947,6 +958,27 @@ const confirmCancelMembership = async () => {
text-decoration: underline;
}
/* ---- NEXT CHARGE ---- */
.next-charge {
display: grid;
grid-template-columns: 120px 1fr;
gap: 0 12px;
align-items: center;
padding: 10px 20px;
font-size: 12px;
border: 1px dashed var(--candle);
margin-bottom: 12px;
}
.next-charge-label {
color: var(--text-faint);
letter-spacing: 0.04em;
text-transform: uppercase;
font-size: 11px;
}
.next-charge-value {
color: var(--text);
}
/* ---- PAYMENT HISTORY ---- */
.history-card {
border: 1px dashed var(--border);