From 6a6f036877484b0d36dc7b1841ecacf3fe20e3b0 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Thu, 30 Apr 2026 22:25:49 +0100
Subject: [PATCH] refactor(admin/members): dedupe STATUS_LABELS + reactive row
 update
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Promote inline STATUS_LABELS copies (admin/members/index.vue,
member/account.vue) into app/config/memberStatus.js, matching the
app/config/circles.js pattern. Drive admin/members/[id].vue status
select from the same constant — completes the alignment started in
441a5f5.

Use the softer member-facing copy as canonical: "Paused" / "Closed"
instead of "Suspended" / "Cancelled".

Also fix markSlackInvited's non-reactive Object.assign on a plain
object inside a useFetch array — replace with index-find + element
reassignment so the row UI refreshes without a manual reload.
---
 app/config/memberStatus.js        |  8 ++++++++
 app/pages/admin/members/[id].vue  | 10 ++++++----
 app/pages/admin/members/index.vue | 13 ++++---------
 app/pages/member/account.vue      |  8 +-------
 4 files changed, 19 insertions(+), 20 deletions(-)
 create mode 100644 app/config/memberStatus.js

diff --git a/app/config/memberStatus.js b/app/config/memberStatus.js
new file mode 100644
index 0000000..04850e8
--- /dev/null
+++ b/app/config/memberStatus.js
@@ -0,0 +1,8 @@
+export const STATUS_LABELS = {
+  active: "Active",
+  pending_payment: "Payment setup incomplete",
+  suspended: "Paused",
+  cancelled: "Closed",
+};
+
+export const statusLabel = (s) => STATUS_LABELS[s] || "Pending";
diff --git a/app/pages/admin/members/[id].vue b/app/pages/admin/members/[id].vue
index 567caf9..e082be7 100644
--- a/app/pages/admin/members/[id].vue
+++ b/app/pages/admin/members/[id].vue
@@ -63,10 +63,11 @@
               <div class="field">
                 <label>Status</label>
                 <select v-model="form.status">
-                  <option value="pending_payment">pending_payment</option>
-                  <option value="active">active</option>
-                  <option value="suspended">suspended</option>
-                  <option value="cancelled">cancelled</option>
+                  <option
+                    v-for="(label, value) in STATUS_LABELS"
+                    :key="value"
+                    :value="value"
+                  >{{ label }}</option>
                 </select>
               </div>
               <div class="field">
@@ -242,6 +243,7 @@
 
 <script setup>
 import { formatActivity } from '~/utils/activityText'
+import { STATUS_LABELS } from '~/config/memberStatus'
 
 definePageMeta({
   layout: "admin",
diff --git a/app/pages/admin/members/index.vue b/app/pages/admin/members/index.vue
index 88f28b5..d602447 100644
--- a/app/pages/admin/members/index.vue
+++ b/app/pages/admin/members/index.vue
@@ -468,6 +468,8 @@
 </template>
 
 <script setup>
+import { STATUS_LABELS, statusLabel } from "~/config/memberStatus";
+
 definePageMeta({
   layout: "admin",
   middleware: "admin",
@@ -488,14 +490,6 @@ const statusFilter = ref("");
 const sortKey = ref("createdAt");
 const sortDir = ref("desc");
 
-const STATUS_LABELS = {
-  active: "Active",
-  pending_payment: "Payment setup incomplete",
-  suspended: "Suspended",
-  cancelled: "Cancelled",
-};
-const statusLabel = (s) => STATUS_LABELS[s] || "Pending";
-
 const toggleSort = (key) => {
   if (sortKey.value === key) {
     sortDir.value = sortDir.value === "asc" ? "desc" : "asc";
@@ -845,7 +839,8 @@ const markSlackInvited = async (member) => {
         body: { slackInvited: true },
       },
     );
-    Object.assign(member, res.member);
+    const idx = members.value.findIndex((m) => m._id === member._id);
+    if (idx !== -1) members.value[idx] = { ...members.value[idx], ...res.member };
     toast.add({ title: "Marked as Slack invited", color: "success" });
   } catch (err) {
     toast.add({
diff --git a/app/pages/member/account.vue b/app/pages/member/account.vue
index 93e0e78..5f22673 100644
--- a/app/pages/member/account.vue
+++ b/app/pages/member/account.vue
@@ -315,6 +315,7 @@
 
 <script setup>
 import { CONTRIBUTION_PRESETS, getGuidanceLabel, requiresPayment } from '~/config/contributions';
+import { STATUS_LABELS } from '~/config/memberStatus';
 
 definePageMeta({
   middleware: "auth",
@@ -417,13 +418,6 @@ const circleOptions = [
   },
 ];
 
-const STATUS_LABELS = {
-  active: "Active",
-  pending_payment: "Setting up payment",
-  suspended: "Paused",
-  cancelled: "Closed",
-};
-
 const formatStatus = (s) => STATUS_LABELS[s] || s;
 
 const capitalise = (s) => (s ? s.charAt(0).toUpperCase() + s.slice(1) : s);