/** * Member Status Management Composable * Handles member status constants, helpers, and UI state */ export const MEMBER_STATUSES = { PENDING_PAYMENT: 'pending_payment', ACTIVE: 'active', SUSPENDED: 'suspended', CANCELLED: 'cancelled', } export const MEMBER_STATUS_CONFIG = { pending_payment: { label: 'Payment Pending', color: 'orange', bgColor: 'bg-orange-500/10', borderColor: 'border-orange-500/30', textColor: 'text-orange-300', icon: 'heroicons:exclamation-triangle', severity: 'warning', canRSVP: false, canAccessMembers: true, canPeerSupport: false, }, active: { label: 'Active Member', color: 'green', bgColor: 'bg-green-500/10', borderColor: 'border-green-500/30', textColor: 'text-green-300', icon: 'heroicons:check-circle', severity: 'success', canRSVP: true, canAccessMembers: true, canPeerSupport: true, }, suspended: { label: 'Membership Suspended', color: 'red', bgColor: 'bg-red-500/10', borderColor: 'border-red-500/30', textColor: 'text-red-300', icon: 'heroicons:no-symbol', severity: 'error', canRSVP: false, canAccessMembers: false, canPeerSupport: false, }, cancelled: { label: 'Membership Cancelled', color: 'gray', bgColor: 'bg-gray-500/10', borderColor: 'border-gray-500/30', textColor: 'text-gray-300', icon: 'heroicons:x-circle', severity: 'error', canRSVP: false, canAccessMembers: false, canPeerSupport: false, }, } export const useMemberStatus = () => { const { memberData } = useAuth() // Get current member status const status = computed(() => memberData.value?.status || MEMBER_STATUSES.PENDING_PAYMENT) // Get status configuration const statusConfig = computed(() => MEMBER_STATUS_CONFIG[status.value] || MEMBER_STATUS_CONFIG.pending_payment) // Helper methods const isActive = computed(() => status.value === MEMBER_STATUSES.ACTIVE) const isPendingPayment = computed(() => status.value === MEMBER_STATUSES.PENDING_PAYMENT) const isSuspended = computed(() => status.value === MEMBER_STATUSES.SUSPENDED) const isCancelled = computed(() => status.value === MEMBER_STATUSES.CANCELLED) const isInactive = computed(() => !isActive.value) // Check if member can perform action const canRSVP = computed(() => statusConfig.value.canRSVP) const canAccessMembers = computed(() => statusConfig.value.canAccessMembers) const canPeerSupport = computed(() => statusConfig.value.canPeerSupport) // Get action button text and link based on status const getNextAction = () => { if (isPendingPayment.value) { return { label: 'Complete Payment', link: '/member/profile#account', icon: 'heroicons:credit-card', color: 'orange', } } if (isCancelled.value) { return { label: 'Reactivate Membership', link: '/member/profile#account', icon: 'heroicons:arrow-path', color: 'blue', } } if (isSuspended.value) { return { label: 'Contact Support', link: 'mailto:support@ghostguild.org', icon: 'heroicons:envelope', color: 'gray', } } return null } // 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.' } if (isSuspended.value) { return 'Your membership has been suspended. Please contact support to reactivate your account.' } if (isCancelled.value) { return 'Your membership has been cancelled. Would you like to reactivate?' } 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 null } return { status, statusConfig, isActive, isPendingPayment, isSuspended, isCancelled, isInactive, canRSVP, canAccessMembers, canPeerSupport, getNextAction, getBannerMessage, getRSVPMessage, MEMBER_STATUSES, } }