Member/Ecology revamp.

app/composables/useMemberStatus.js

@@ -4,137 +4,149 @@
  */
 
 export const MEMBER_STATUSES = {
-  PENDING_PAYMENT: 'pending_payment',
-  ACTIVE: 'active',
-  SUSPENDED: 'suspended',
-  CANCELLED: 'cancelled',
-}
+  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',
+    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',
+    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',
+    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',
+    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()
+  const { memberData } = useAuth();
 
   // Get current member status
-  const status = computed(() => memberData.value?.status || MEMBER_STATUSES.PENDING_PAYMENT)
+  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)
+  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)
+  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)
+  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',
-      }
+        label: "Complete Payment",
+        link: "/member/account",
+        icon: "heroicons:credit-card",
+        color: "orange",
+      };
     }
     if (isCancelled.value) {
       return {
-        label: 'Reactivate Membership',
-        link: '/member/profile#account',
-        icon: 'heroicons:arrow-path',
-        color: 'blue',
-      }
+        label: "Reactivate Membership",
+        link: "/member/account",
+        icon: "heroicons:arrow-path",
+        color: "blue",
+      };
     }
     if (isSuspended.value) {
       return {
-        label: 'Contact Support',
-        link: 'mailto:support@ghostguild.org',
-        icon: 'heroicons:envelope',
-        color: 'gray',
-      }
+        label: "Contact Support",
+        link: "mailto:support@ghostguild.org",
+        icon: "heroicons:envelope",
+        color: "gray",
+      };
     }
-    return null
-  }
+    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.'
+      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.'
+      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 "Your membership has been cancelled. Would you like to reactivate?";
     }
-    return null
-  }
+    return null;
+  };
 
   // Get RSVP restriction message
   const getRSVPMessage = () => {
     if (isPendingPayment.value) {
-      return 'Complete your payment to register for events'
+      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 membership status prevents RSVP. Please reactivate your account.";
     }
-    return null
-  }
+    return null;
+  };
 
   return {
     status,
@@ -151,5 +163,5 @@ export const useMemberStatus = () => {
     getBannerMessage,
     getRSVPMessage,
     MEMBER_STATUSES,
-  }
-}
+  };
+};