feat(member): pending_payment retains access, soften status copy

pending_payment now grants the same RSVP/peer-support capabilities as active,
and status banner/label copy is rewritten to be non-threatening ("Setting up
payment", "Paused", "Closed"). Aligns member-facing copy across the account
page with the capability model.
This commit is contained in:
Jennie Robinson Faber 2026-04-18 17:06:22 +01:00
parent 15329e3e84
commit 37a58cb0eb
3 changed files with 43 additions and 43 deletions

View file

@ -12,16 +12,16 @@ export const MEMBER_STATUSES = {
export const MEMBER_STATUS_CONFIG = {
pending_payment: {
label: "Payment Pending",
label: "Setting up payment",
color: "orange",
bgColor: "bg-orange-500/10",
borderColor: "border-orange-500/30",
textColor: "text-orange-300",
icon: "heroicons:exclamation-triangle",
severity: "warning",
canRSVP: false,
canRSVP: true,
canAccessMembers: true,
canPeerSupport: false,
canPeerSupport: true,
},
active: {
label: "Active Member",
@ -126,24 +126,21 @@ export const useMemberStatus = () => {
// Get banner message based on status
const getBannerMessage = () => {
if (isPendingPayment.value) {
return "Your membership is pending payment. Please complete your payment to unlock full features.";
return "Your payment setup isn't finished yet. Your membership and access aren't affected — finish whenever you're ready, or reach out if there's a snag.";
}
if (isSuspended.value) {
return "Your membership has been suspended. Please contact support to reactivate your account.";
return "Your account is paused while we work through a community issue. We'll be in touch.";
}
if (isCancelled.value) {
return "Your membership has been cancelled. Would you like to reactivate?";
return "Your account is closed. Reach out if you'd like to come back.";
}
return null;
};
// Get RSVP restriction message
const getRSVPMessage = () => {
if (isPendingPayment.value) {
return "Complete your payment to register for events";
}
if (isSuspended.value || isCancelled.value) {
return "Your membership status prevents RSVP. Please reactivate your account.";
return "Your account isn't active right now. Reach out if you have questions.";
}
return null;
};

View file

@ -34,7 +34,7 @@
<span
class="status-dot"
:class="memberData.status || 'active'"
></span>
/>
<span>{{
formatStatus(memberData.status || "active")
}}</span>
@ -93,26 +93,26 @@
<div class="field">
<label>New email address</label>
<input
type="email"
v-model="newEmail"
type="email"
placeholder="you@example.com"
autofocus
@keydown.enter="handleUpdateEmail"
@keydown.escape="cancelEmailEdit"
autofocus
/>
>
</div>
<div class="email-edit-actions">
<button
class="btn btn-primary"
@click="handleUpdateEmail"
:disabled="isUpdatingEmail || !newEmail.trim()"
@click="handleUpdateEmail"
>
{{ isUpdatingEmail ? "Saving…" : "Save" }}
</button>
<button
class="btn"
@click="cancelEmailEdit"
:disabled="isUpdatingEmail"
@click="cancelEmailEdit"
>
Cancel
</button>
@ -128,9 +128,12 @@
<div class="section-label danger">Danger Zone</div>
<div class="danger-zone">
<p>
Cancelling your membership will immediately revoke access to
member-only resources, events, and the Slack workspace.
<strong>This action cannot be easily undone.</strong>
Cancelling closes your account and ends access to member-only
spaces, including Slack. If you're cancelling because of a
money issue, the
<NuxtLink to="/community-guidelines">Solidarity Fund</NuxtLink>
and the $0 tier are always available reach out before you
go.
</p>
<div v-if="showCancelConfirm" class="cancel-confirm">
<p class="cancel-confirm-prompt">
@ -139,8 +142,8 @@
<div class="cancel-confirm-actions">
<button
class="btn btn-danger"
@click="confirmCancelMembership"
:disabled="isCancelling"
@click="confirmCancelMembership"
>
{{ isCancelling ? "Cancelling…" : "Yes, Cancel" }}
</button>
@ -152,8 +155,8 @@
<button
v-else
class="btn btn-danger"
@click="handleCancelMembership"
:disabled="isCancelling"
@click="handleCancelMembership"
>
Cancel Membership
</button>
@ -172,11 +175,11 @@
</div>
<button
class="btn btn-primary btn-section"
@click="handleUpdateTier"
:disabled="
selectedTier === Number(memberData.contributionTier || 0) ||
isUpdating
"
@click="handleUpdateTier"
>
{{ isUpdating ? "Updating…" : "Update Contribution" }}
</button>
@ -192,8 +195,8 @@
/>
<button
class="btn btn-primary btn-section"
@click="handleUpdateCircle"
:disabled="selectedCircle === memberData.circle || isUpdating"
@click="handleUpdateCircle"
>
{{ isUpdating ? "Updating…" : "Update Circle" }}
</button>
@ -254,9 +257,9 @@ const circleOptions = [
const STATUS_LABELS = {
active: "Active",
pending_payment: "Pending",
suspended: "Suspended",
cancelled: "Cancelled",
pending_payment: "Setting up payment",
suspended: "Paused",
cancelled: "Closed",
};
const formatStatus = (s) => STATUS_LABELS[s] || s;