From 7eda7ab4d77f45e962856ce7f183557df9508194 Mon Sep 17 00:00:00 2001
From: Jaimyn Mayer <hello@jaimyn.dev>
Date: Sat, 15 Jun 2024 15:59:23 +1000
Subject: [PATCH 01/15] refactored/combined the two redundant ManageMemberTier
 views

---
 memberportal/api_admin_tools/urls.py  |  2 +-
 memberportal/api_admin_tools/views.py | 86 ++++++++++-----------------
 2 files changed, 33 insertions(+), 55 deletions(-)

diff --git a/memberportal/api_admin_tools/urls.py b/memberportal/api_admin_tools/urls.py
index 9bdd7007..d818ce1f 100644
--- a/memberportal/api_admin_tools/urls.py
+++ b/memberportal/api_admin_tools/urls.py
@@ -63,7 +63,7 @@
         views.MemberbucksDevices.as_view(),
         name="MemberbucksDevices",
     ),
-    path("api/admin/tiers/", views.MemberTiers.as_view(), name="ManageMemberTiers"),
+    path("api/admin/tiers/", views.ManageMemberTier.as_view(), name="ManageMemberTier"),
     path(
         "api/admin/tiers/<int:tier_id>/",
         views.ManageMemberTier.as_view(),
diff --git a/memberportal/api_admin_tools/views.py b/memberportal/api_admin_tools/views.py
index 4540542b..5ccdfe97 100644
--- a/memberportal/api_admin_tools/views.py
+++ b/memberportal/api_admin_tools/views.py
@@ -587,32 +587,42 @@ def put(self, request, member_id):
         return Response()
 
 
-class MemberTiers(StripeAPIView):
+class ManageMemberTier(StripeAPIView):
     """
-    get: gets a list of all membership plans.
-    post: creates a new membership plan.
-    put: updates a new membership plan.
-    delete: a membership plan.
+    get: gets a member tier.
+    put: updates a member tier.
+    delete: deletes a member tier.
     """
 
     permission_classes = (permissions.IsAdminUser,)
 
-    def get(self, request):
-        tiers = MemberTier.objects.all()
-        formatted_tiers = []
+    def get_tier(self, tier: MemberTier):
+        return {
+            "id": tier.id,
+            "name": tier.name,
+            "description": tier.description,
+            "visible": tier.visible,
+            "featured": tier.featured,
+            "stripeId": tier.stripe_id,
+        }
 
-        for tier in tiers:
-            formatted_tiers.append(
-                {
-                    "id": tier.id,
-                    "name": tier.name,
-                    "description": tier.description,
-                    "visible": tier.visible,
-                    "featured": tier.featured,
-                }
-            )
+    def get(self, request, tier_id=None):
+
+        if tier_id:
+            try:
+                tier = MemberTier.objects.get(pk=tier_id)
+                return Response(self.get_tier(tier))
+
+            except MemberTier.DoesNotExist as e:
+                return Response(status=status.HTTP_404_NOT_FOUND)
+
+        else:
+            formatted_tiers = []
 
-        return Response(formatted_tiers)
+            for tier in MemberTier.objects.all():
+                formatted_tiers.append(self.get_tier(tier))
+
+            return Response(formatted_tiers)
 
     def post(self, request):
         body = request.data
@@ -629,46 +639,14 @@ def post(self, request):
                 stripe_id=product.id,
             )
 
-            return Response()
+            return Response(self.get_tier(tier))
 
         except stripe.error.AuthenticationError:
             return Response(
                 {"success": False, "message": "error.stripeNotConfigured"},
-                status=status.HTTP_502_BAD_GATEWAY,
+                status=status.HTTP_500_INTERNAL_SERVER_ERROR,
             )
 
-    def delete(self, request):
-        return Response()
-
-
-class ManageMemberTier(StripeAPIView):
-    """
-    get: gets a member tier.
-    put: updates a member tier.
-    delete: deletes a member tier.
-    """
-
-    permission_classes = (permissions.IsAdminUser,)
-
-    def get(self, request, tier_id):
-        body = request.data
-
-        try:
-            tier = MemberTier.objects.get(pk=tier_id)
-
-        except MemberTier.DoesNotExist as e:
-            return Response(status=status.HTTP_404_NOT_FOUND)
-
-        formatted_tier = {
-            "id": tier.id,
-            "name": tier.name,
-            "description": tier.description,
-            "visible": tier.visible,
-            "featured": tier.featured,
-        }
-
-        return Response(formatted_tier)
-
     def put(self, request, tier_id):
         body = request.data
 
@@ -680,7 +658,7 @@ def put(self, request, tier_id):
         tier.featured = body["featured"]
         tier.save()
 
-        return Response()
+        return Response(self.get_tier(tier))
 
     def delete(self, request, tier_id):
         tier = MemberTier.objects.get(pk=tier_id)

From 8c188ba54e6901c72c0215d3afe4eca5903088d7 Mon Sep 17 00:00:00 2001
From: Jaimyn Mayer <hello@jaimyn.dev>
Date: Sat, 15 Jun 2024 17:54:43 +1000
Subject: [PATCH 02/15] made membership and payment plan names useful in admin
 interface

---
 memberportal/api_admin_tools/models.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/memberportal/api_admin_tools/models.py b/memberportal/api_admin_tools/models.py
index 01e5d5d3..15df9b84 100644
--- a/memberportal/api_admin_tools/models.py
+++ b/memberportal/api_admin_tools/models.py
@@ -14,7 +14,7 @@ class MemberTier(ExportModelOperationsMixin("kiosk"), models.Model):
     featured = models.BooleanField("Is this plan featured?", default=False)
 
     def __str__(self):
-        return self.name
+        return f"{self.name}{' (hidden)' if not self.visible else ''}{' (featured)' if self.featured else ''} - Stripe ID: {self.stripe_id}"
 
     def get_object(self):
         plans = []
@@ -54,7 +54,7 @@ class PaymentPlan(ExportModelOperationsMixin("payment-plan"), models.Model):
     interval = models.CharField(choices=BILLING_PERIODS, max_length=10)
 
     def __str__(self):
-        return self.name
+        return f"{self.name} {self.member_tier.name}{' (hidden)' if not self.visible else ''} - Stripe ID: {self.stripe_id}"
 
     def get_object(self):
         return {

From d98b91a776e450e2cbe9e820a469102a79f76aed Mon Sep 17 00:00:00 2001
From: Jaimyn Mayer <hello@jaimyn.dev>
Date: Sat, 15 Jun 2024 17:55:12 +1000
Subject: [PATCH 03/15] refactored and fixed payment plan api

---
 memberportal/api_admin_tools/urls.py  |  22 ++--
 memberportal/api_admin_tools/views.py | 141 +++++++++++++-------------
 memberportal/api_billing/views.py     |   6 +-
 3 files changed, 85 insertions(+), 84 deletions(-)

diff --git a/memberportal/api_admin_tools/urls.py b/memberportal/api_admin_tools/urls.py
index d818ce1f..c1fb0e8e 100644
--- a/memberportal/api_admin_tools/urls.py
+++ b/memberportal/api_admin_tools/urls.py
@@ -63,25 +63,29 @@
         views.MemberbucksDevices.as_view(),
         name="MemberbucksDevices",
     ),
-    path("api/admin/tiers/", views.ManageMemberTier.as_view(), name="ManageMemberTier"),
+    path(
+        "api/admin/tiers/",
+        views.ManageMembershipTier.as_view(),
+        name="ManageMembershipTier",
+    ),
     path(
         "api/admin/tiers/<int:tier_id>/",
-        views.ManageMemberTier.as_view(),
-        name="ManageMemberTier",
+        views.ManageMembershipTier.as_view(),
+        name="ManageMembershipTier",
     ),
     path(
         "api/admin/tiers/<int:tier_id>/plans/",
-        views.ManageMemberTierPlans.as_view(),
-        name="GetPlans",
+        views.ManageMembershipTierPlan.as_view(),
+        name="ManageMembershipTierPlan",
     ),
     path(
         "api/admin/plans/",
-        views.ManageMemberTierPlans.as_view(),
-        name="ManagePlans",
+        views.ManageMembershipTierPlan.as_view(),
+        name="ManageMembershipTierPlan",
     ),
     path(
         "api/admin/plans/<int:plan_id>/",
-        views.ManageMemberTierPlans.as_view(),
-        name="ManagePlan",
+        views.ManageMembershipTierPlan.as_view(),
+        name="ManageMembershipTierPlan",
     ),
 ]
diff --git a/memberportal/api_admin_tools/views.py b/memberportal/api_admin_tools/views.py
index 5ccdfe97..20f85bb0 100644
--- a/memberportal/api_admin_tools/views.py
+++ b/memberportal/api_admin_tools/views.py
@@ -1,29 +1,30 @@
+import json
+
+import stripe
 from asgiref.sync import async_to_sync
 from channels.layers import get_channel_layer
+from constance import config
+from django.db.models import F, Sum, Value, CharField, Count, Max
+from django.db.models.functions import Concat
+from django.db.utils import OperationalError
+from rest_framework import permissions
+from rest_framework import status
+from rest_framework.response import Response
+from rest_framework.views import APIView
+from rest_framework_api_key.permissions import HasAPIKey
+from sentry_sdk import capture_exception
+from sentry_sdk import capture_message
 
-from profile.models import User, UserEventLog
-from access.models import DoorLog, InterlockLog
 from access import models
-from .models import MemberTier, PaymentPlan
+from access.models import DoorLog, InterlockLog
 from memberbucks.models import (
     MemberBucks,
     MemberbucksProductPurchaseLog,
 )
-from constance import config
-from services.emails import send_email_to_admin
+from profile.models import User, UserEventLog
 from services import sms
-import json
-import stripe
-from sentry_sdk import capture_message
-from rest_framework_api_key.permissions import HasAPIKey
-from rest_framework import permissions
-from rest_framework.response import Response
-from rest_framework import status
-from rest_framework.views import APIView
-from django.db.models import F, Count, Sum, Value, CharField, Count, Max
-from django.db.models.functions import Concat
-from django.db.utils import OperationalError
-from sentry_sdk import capture_exception
+from services.emails import send_email_to_admin
+from .models import MemberTier, PaymentPlan
 
 
 class StripeAPIView(APIView):
@@ -587,11 +588,12 @@ def put(self, request, member_id):
         return Response()
 
 
-class ManageMemberTier(StripeAPIView):
+class ManageMembershipTier(StripeAPIView):
     """
-    get: gets a member tier.
-    put: updates a member tier.
-    delete: deletes a member tier.
+    get: gets a membership tier.
+    post: creates a new membership tier.
+    put: updates a membership tier.
+    delete: deletes a membership tier.
     """
 
     permission_classes = (permissions.IsAdminUser,)
@@ -607,7 +609,6 @@ def get_tier(self, tier: MemberTier):
         }
 
     def get(self, request, tier_id=None):
-
         if tier_id:
             try:
                 tier = MemberTier.objects.get(pk=tier_id)
@@ -667,33 +668,56 @@ def delete(self, request, tier_id):
         return Response()
 
 
-class ManageMemberTierPlans(StripeAPIView):
+class ManageMembershipTierPlan(StripeAPIView):
     """
-    post: creates a new member tier plan.
+    get: gets an individual or a list of payment plans.
+    post: creates a new payment plan.
+
     """
 
     permission_classes = (permissions.IsAdminUser,)
 
-    def get(self, request, tier_id):
-        plans = PaymentPlan.objects.filter(member_tier=tier_id)
-        formatted_plans = []
+    def get_plan(self, plan: PaymentPlan):
+        return {
+            "id": plan.id,
+            "name": plan.name,
+            "stripeId": plan.stripe_id,
+            "memberTier": plan.member_tier.id,
+            "visible": plan.visible,
+            "currency": plan.currency,
+            "cost": plan.cost / 100,  # convert to dollars
+            "intervalCount": plan.interval_count,
+            "interval": plan.interval,
+        }
+
+    def get(self, request, plan_id=None, tier_id=None):
+        if plan_id:
+            try:
+                plan = PaymentPlan.objects.get(pk=plan_id)
+                return Response(self.get_plan(plan))
+
+            except PaymentPlan.DoesNotExist as e:
+                return Response(status=status.HTTP_404_NOT_FOUND)
 
-        for plan in plans:
-            formatted_plans.append(
-                {
-                    "id": plan.id,
-                    "name": plan.name,
-                    "stripeId": plan.stripe_id,
-                    "memberTier": plan.member_tier.id,
-                    "visible": plan.visible,
-                    "currency": plan.currency,
-                    "cost": plan.cost / 100,  # convert to dollars
-                    "intervalCount": plan.interval_count,
-                    "interval": plan.interval,
-                }
-            )
+        if tier_id:
+            try:
+                formatted_plans = []
+
+                for plan in PaymentPlan.objects.filter(member_tier=tier_id):
+                    formatted_plans.append(self.get_plan(plan))
+
+                return Response(formatted_plans)
+
+            except PaymentPlan.DoesNotExist as e:
+                return Response(status=status.HTTP_404_NOT_FOUND)
+
+        else:
+            formatted_plans = []
+
+            for plan in PaymentPlan.objects.all():
+                formatted_plans.append(self.get_plan(plan))
 
-        return Response(formatted_plans)
+            return Response(formatted_plans)
 
     def post(self, request, tier_id=None):
         if tier_id is not None:
@@ -713,7 +737,7 @@ def post(self, request, tier_id=None):
             product=member_tier.stripe_id,
         )
 
-        PaymentPlan.objects.create(
+        plan = PaymentPlan.objects.create(
             name=body["name"],
             stripe_id=stripe_plan.id,
             member_tier_id=body["memberTier"],
@@ -724,34 +748,7 @@ def post(self, request, tier_id=None):
             interval=body["interval"],
         )
 
-        return Response()
-
-
-class ManageMemberTierPlan(StripeAPIView):
-    """
-    get: gets a member tier plan.
-    put: updates a member tier plan.
-    delete: deletes a member tier plan.
-    """
-
-    permission_classes = (permissions.IsAdminUser,)
-
-    def get(self, request, plan_id):
-        body = request.data
-
-        plan = PaymentPlan.objects.get(pk=plan_id)
-
-        formatted_plan = {
-            "id": plan.id,
-            "name": plan.name,
-            "member_tier": plan.member_tier,
-            "visible": plan.visible,
-            "cost": plan.cost,
-            "interval_count": plan.interval_count,
-            "interval": plan.interval,
-        }
-
-        return Response(formatted_plan)
+        return Response(self.get_plan(plan))
 
     def put(self, request, plan_id):
         body = request.data
@@ -763,7 +760,7 @@ def put(self, request, plan_id):
         plan.cost = body["cost"]
         plan.save()
 
-        return Response()
+        return Response(self.get_plan(plan))
 
     def delete(self, request, plan_id):
         plan = PaymentPlan.objects.get(pk=plan_id)
diff --git a/memberportal/api_billing/views.py b/memberportal/api_billing/views.py
index 435c7e03..35f9bc7e 100644
--- a/memberportal/api_billing/views.py
+++ b/memberportal/api_billing/views.py
@@ -184,7 +184,7 @@ def delete(self, request):
 
 class MemberTiers(StripeAPIView):
     """
-    get: gets a list of all membership plans.
+    get: gets a list of all membership tiers.
     """
 
     def get(self, request):
@@ -204,7 +204,7 @@ def get(self, request):
 
 class PaymentPlanSignup(StripeAPIView):
     """
-    post: attempts to sign the member up to a new membership plan.
+    post: attempts to sign the member up to a new payment plan.
     """
 
     def post(self, request, plan_id):
@@ -510,7 +510,7 @@ def get(self, request):
 
 class PaymentPlanResumeCancel(StripeAPIView):
     """
-    post: attempts to cancel a member's membership plan.
+    post: attempts to cancel a member's payment plan.
     """
 
     def post(self, request, resume):

From 8cd5225b97d702dd7a6f69e75075f0009eacbfd5 Mon Sep 17 00:00:00 2001
From: Jaimyn Mayer <hello@jaimyn.dev>
Date: Sat, 15 Jun 2024 18:01:34 +1000
Subject: [PATCH 04/15] fixed can't submit more than one create payment plan
 forms

---
 src-frontend/src/components/AdminTools/ManageTier.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-frontend/src/components/AdminTools/ManageTier.vue b/src-frontend/src/components/AdminTools/ManageTier.vue
index 4de0062d..7e6acf15 100644
--- a/src-frontend/src/components/AdminTools/ManageTier.vue
+++ b/src-frontend/src/components/AdminTools/ManageTier.vue
@@ -445,7 +445,7 @@ export default defineComponent({
         error: false,
         success: false,
         name: '',
-        memberTier: '',
+        memberTier: this.$route.params.planId.toString(),
         stripeId: '',
         visible: true,
         currency: 'aud',

From e19283f52e32e2ed2733913f4af84258c0151f8d Mon Sep 17 00:00:00 2001
From: Jaimyn Mayer <hello@jaimyn.dev>
Date: Sun, 16 Jun 2024 21:34:00 +1000
Subject: [PATCH 05/15] Added settings API

---
 memberportal/api_admin_tools/urls.py          | 10 ++++
 memberportal/api_admin_tools/views.py         | 49 +++++++++++++++++++
 .../membermatters/constance_config.py         |  2 +-
 .../src/components/AdminTools/ManageTier.vue  |  3 +-
 4 files changed, 62 insertions(+), 2 deletions(-)

diff --git a/memberportal/api_admin_tools/urls.py b/memberportal/api_admin_tools/urls.py
index c1fb0e8e..36e5ddff 100644
--- a/memberportal/api_admin_tools/urls.py
+++ b/memberportal/api_admin_tools/urls.py
@@ -88,4 +88,14 @@
         views.ManageMembershipTierPlan.as_view(),
         name="ManageMembershipTierPlan",
     ),
+    path(
+        "api/admin/settings/",
+        views.ManageSettings.as_view(),
+        name="ManageSettings",
+    ),
+    path(
+        "api/admin/settings/<str:setting_key>/",
+        views.ManageSettings.as_view(),
+        name="ManageSettings",
+    ),
 ]
diff --git a/memberportal/api_admin_tools/views.py b/memberportal/api_admin_tools/views.py
index 20f85bb0..56ba5a91 100644
--- a/memberportal/api_admin_tools/views.py
+++ b/memberportal/api_admin_tools/views.py
@@ -4,6 +4,7 @@
 from asgiref.sync import async_to_sync
 from channels.layers import get_channel_layer
 from constance import config
+from constance.backends.database.models import Constance as ConstanceSetting
 from django.db.models import F, Sum, Value, CharField, Count, Max
 from django.db.models.functions import Concat
 from django.db.utils import OperationalError
@@ -887,3 +888,51 @@ def get(self, request, member_id):
         }
 
         return Response(logs)
+
+
+class ManageSettings(APIView):
+    """
+    get: This method gets a constance setting value or values.
+    put: This method updates a constance setting value.
+    """
+
+    permission_classes = (permissions.IsAdminUser,)
+
+    def get_setting(self, setting):
+        return {
+            "key": setting.key,
+            "value": setting.value,
+        }
+
+    def get(self, request, setting_key=None):
+        if setting_key:
+            try:
+                setting = ConstanceSetting.objects.get(key=setting_key)
+                return Response(self.get_setting(setting))
+
+            except ConstanceSetting.DoesNotExist as e:
+                return Response(status=status.HTTP_404_NOT_FOUND)
+
+        else:
+            settings = []
+
+            for setting in ConstanceSetting.objects.all():
+                settings.append(self.get_setting(setting))
+
+            return Response(settings)
+
+    def put(self, request, setting_key=None):
+        if not setting_key:
+            return Response(status=status.HTTP_400_BAD_REQUEST)
+
+        body = request.data
+
+        try:
+            setting = ConstanceSetting.objects.get(key=setting_key)
+            setting.value = body["value"]
+            setting.save()
+
+            return Response(self.get_setting(setting))
+
+        except ConstanceSetting.DoesNotExist as e:
+            return Response(status=status.HTTP_404_NOT_FOUND)
diff --git a/memberportal/membermatters/constance_config.py b/memberportal/membermatters/constance_config.py
index ec22c9ac..407104dc 100644
--- a/memberportal/membermatters/constance_config.py
+++ b/memberportal/membermatters/constance_config.py
@@ -323,7 +323,7 @@
         "The sender ID (either a phone number or alpha numeric sender ID you can send from).",
     ),
     "SMS_FOOTER": (
-        "From Brisbane Makerspace.",
+        "From Example Makerspace.",
         "An optional footer to append to all SMS messages (such as 'from xyz org.'",
     ),
     "SMS_MESSAGES": (
diff --git a/src-frontend/src/components/AdminTools/ManageTier.vue b/src-frontend/src/components/AdminTools/ManageTier.vue
index 7e6acf15..1de030c4 100644
--- a/src-frontend/src/components/AdminTools/ManageTier.vue
+++ b/src-frontend/src/components/AdminTools/ManageTier.vue
@@ -426,7 +426,8 @@ export default defineComponent({
     },
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     managePlan(evt: InputEvent, row: any) {
-      this.$router.push({ name: 'managePlan', params: { planId: row.id } });
+      // TODO: make a MM UI to manage payment plans
+      // this.$router.push({ name: 'managePlan', params: { planId: row.id } });
     },
     resetForm() {
       this.form = {

From 94fae1a805ab23669f69db3cccf4119b4e625940 Mon Sep 17 00:00:00 2001
From: Jaimyn Mayer <hello@jaimyn.dev>
Date: Sun, 16 Jun 2024 21:34:13 +1000
Subject: [PATCH 06/15] Add docs about local Stripe webhooks

---
 memberportal/README.md | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/memberportal/README.md b/memberportal/README.md
index 4c7d31af..f333194c 100644
--- a/memberportal/README.md
+++ b/memberportal/README.md
@@ -111,6 +111,28 @@ Starting development server at http://127.0.0.1:8000/
 
 Now that the backend API is running, you can head over to the [frontend](/frontend) folder and follow those instructions to get the frontend UI running.
 
+## Stripe Webhooks
+If you want to test Stripe webhooks you can use the stripe CLI to forward webhooks to your local dev server.
+To do so, you will need to install the stripe CLI and login to your stripe account.
+Click [here](https://dashboard.stripe.com/test/webhooks/create?endpoint_location=local) for detailed instructions from 
+Stripe.
+
+Once you're set up, run the following command to forward webhooks to your local dev server:
+
+```bash
+stripe listen --skip-verify --events invoice.paid,invoice.payment_failed,customer.subscription.deleted --forward-to localhost:8080/api/billing/stripe-webhook/
+```
+
+Finally, check that you're running the frontend proxy on port 8080 and configure the signing secret in the Constance 
+settings.
+You can find the local signing secret in the command line output after running `stripe listen` above.
+It will start like this `whsec_...`
+
+You can also trigger common events like `invoice.paid` using the CLI like this:
+```bash
+stripe trigger invoice.paid
+```
+
 ## Linter
 
 As explained below, this projects uses a linter (called "Black") to fix common errors, and to enforce consistent code style/standards.

From 6f80f54d29d5ad2c208fe6e757d22cc9244fcd1d Mon Sep 17 00:00:00 2001
From: Jaimyn Mayer <hello@jaimyn.dev>
Date: Sun, 16 Jun 2024 22:33:04 +1000
Subject: [PATCH 07/15] fixed credit card component min width

---
 src-frontend/src/components/CreditCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-frontend/src/components/CreditCard.vue b/src-frontend/src/components/CreditCard.vue
index 2cfbe1d0..f79670e4 100644
--- a/src-frontend/src/components/CreditCard.vue
+++ b/src-frontend/src/components/CreditCard.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     style="
-      min-width: 200px;
+      min-width: 270px;
       border-radius: 10px;
       max-width: 500px;
       margin: 0 auto;

From aebfffa0452e5c3e16699848355e486b709973e4 Mon Sep 17 00:00:00 2001
From: Jaimyn Mayer <hello@jaimyn.dev>
Date: Sun, 16 Jun 2024 23:25:51 +1000
Subject: [PATCH 08/15] Fixed inconsistent translations/plurals and billing tab
 UI improvement

---
 memberportal/api_admin_tools/models.py        |   2 +-
 memberportal/profile/models.py                |   2 +-
 src-frontend/src/components/AccessList.vue    |   4 +-
 .../components/AdminTools/ManageMember.vue    | 322 ++++++++++++------
 .../src/components/AdminTools/MembersList.vue |  17 +-
 .../src/components/Billing/PlanCard.vue       |   4 +-
 .../src/components/Billing/SelectTier.vue     |   6 +-
 .../src/components/Billing/TierCard.vue       |   4 +-
 src-frontend/src/i18n/en-AU/index.ts          |  76 +++--
 src-frontend/src/pages/AdminTools/Devices.vue |   6 +-
 10 files changed, 283 insertions(+), 160 deletions(-)

diff --git a/memberportal/api_admin_tools/models.py b/memberportal/api_admin_tools/models.py
index 15df9b84..d47331df 100644
--- a/memberportal/api_admin_tools/models.py
+++ b/memberportal/api_admin_tools/models.py
@@ -35,7 +35,7 @@ def get_object(self):
 class PaymentPlan(ExportModelOperationsMixin("payment-plan"), models.Model):
     """A Membership Plan that specifies how a member is billed for a member tier."""
 
-    BILLING_PERIODS = [("Months", "month"), ("Weeks", "week"), ("Days", "days")]
+    BILLING_PERIODS = [("Month", "month"), ("Week", "week"), ("Day", "day")]
 
     id = models.AutoField(primary_key=True)
     name = models.CharField("Name", max_length=50)
diff --git a/memberportal/profile/models.py b/memberportal/profile/models.py
index fee4edb1..8b852ada 100644
--- a/memberportal/profile/models.py
+++ b/memberportal/profile/models.py
@@ -526,7 +526,7 @@ def get_basic_profile(self):
                 "full": self.get_full_name(),
             },
             "phone": self.phone,
-            "state": self.get_state_display(),
+            "state": self.state,
             "vehicleRegistrationPlate": self.vehicle_registration_plate,
             "rfid": self.rfid,
             "memberBucks": {
diff --git a/src-frontend/src/components/AccessList.vue b/src-frontend/src/components/AccessList.vue
index f5867bed..5b32da17 100644
--- a/src-frontend/src/components/AccessList.vue
+++ b/src-frontend/src/components/AccessList.vue
@@ -14,7 +14,7 @@
     <div class="row flex content-start items-start">
       <q-list bordered padding class="rounded-borders q-ma-sm access-list">
         <q-item-label header>
-          {{ $t('access.doors') }}
+          {{ $tc('access.door', 2) }}
         </q-item-label>
 
         <div class="q-pa-md" v-if="!doors.length">
@@ -65,7 +65,7 @@
 
       <q-list bordered padding class="rounded-borders q-ma-sm access-list">
         <q-item-label header>
-          {{ $t('access.interlocks') }}
+          {{ $tc('access.interlock', 2) }}
         </q-item-label>
 
         <q-item-label class="q-pa-md" v-if="!interlocks.length">
diff --git a/src-frontend/src/components/AdminTools/ManageMember.vue b/src-frontend/src/components/AdminTools/ManageMember.vue
index 29a69084..0c7c9a20 100644
--- a/src-frontend/src/components/AdminTools/ManageMember.vue
+++ b/src-frontend/src/components/AdminTools/ManageMember.vue
@@ -31,7 +31,7 @@
             :class="{ 'q-px-sm': $q.screen.xs, 'q-px-lg': !$q.screen.xs }"
           >
             <q-btn
-              v-if="selectedMember.state === 'Inactive'"
+              v-if="selectedMember.state === 'inactive'"
               class="q-mr-sm q-mb-sm"
               color="positive"
               :label="$t('adminTools.enableAccess')"
@@ -40,8 +40,8 @@
             />
             <q-btn
               v-else-if="
-                selectedMember.state === 'Needs Induction' ||
-                selectedMember.state === 'Account Only'
+                selectedMember.state === 'noob' ||
+                selectedMember.state === 'accountonly'
               "
               class="q-mr-sm q-mb-sm"
               color="primary"
@@ -59,7 +59,6 @@
             />
 
             <q-btn-dropdown
-              style="min-width: 170px"
               class="q-mr-sm q-mb-sm"
               color="primary"
               :label="$t('adminTools.title')"
@@ -110,7 +109,7 @@
                   @click="openSmsModal"
                 >
                   <q-item-section>
-                    <q-item-label>{{ $t('adminTools.sendSms') }} </q-item-label>
+                    <q-item-label>{{ $t('adminTools.sendSms') }}</q-item-label>
                   </q-item-section>
                 </q-item>
               </q-list>
@@ -278,11 +277,18 @@
                   <q-item-section>
                     <q-item-label
                       :class="{
-                        inactive: selectedMember.state === 'Inactive',
-                        active: selectedMember.state === 'Active',
+                        inactive: selectedMember.state === 'inactive',
+                        active: selectedMember.state === 'active',
+                        cancelling: ['accountonly', 'noob'].includes(
+                          selectedMember.state
+                        ),
                       }"
                     >
-                      {{ selectedMember.state }}
+                      {{
+                        $t(
+                          `adminTools.memberStatusString.${selectedMember.state}`
+                        )
+                      }}
                     </q-item-label>
 
                     <q-item-label caption>
@@ -412,7 +418,7 @@
 
           <access-list
             :member-id="selectedMemberFiltered.id"
-            :inactive-warning="selectedMemberFiltered.state === 'Inactive'"
+            :inactive-warning="selectedMemberFiltered.state === 'inactive'"
           />
         </q-tab-panel>
 
@@ -878,23 +884,79 @@
         </q-tab-panel>
 
         <q-tab-panel name="billing">
-          <div class="row flex content-start items-start">
-            <div class="q-pr-lg">
+          <div class="column flex content-start items-start q-gutter-lg">
+            <div class="">
               <div class="text-h6">
                 {{ $t('adminTools.subscriptionInfo') }}
               </div>
 
+              <q-markup-table
+                v-if="billing?.subscription"
+                bordered
+                padding
+                class="rounded-borders desktop-only"
+              >
+                <thead>
+                  <tr>
+                    <th class="text-left">
+                      {{ $t(`adminTools.billingCycleAnchor`) }}
+                    </th>
+                    <th class="text-left">{{ $t(`adminTools.startDate`) }}</th>
+                    <th class="text-left">
+                      {{ $t(`adminTools.currentPeriodEnd`) }}
+                    </th>
+                    <th v-if="billing.subscription.cancelAt" class="text-left">
+                      {{ $t(`adminTools.cancelAt`) }}
+                    </th>
+                    <th v-if="billing.subscription.cancelAt" class="text-left">
+                      {{ $t(`adminTools.cancelAtPeriodEnd`) }}
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td class="text-left">
+                      {{ formatDate(billing.subscription.billingCycleAnchor) }}
+                    </td>
+                    <td class="text-left">
+                      {{ formatDate(billing.subscription.startDate) }}
+                    </td>
+                    <td class="text-left">
+                      {{ formatDate(billing.subscription.currentPeriodEnd) }}
+                    </td>
+                    <td v-if="billing.subscription.cancelAt" class="text-left">
+                      {{ formatDate(billing.subscription.cancelAt) }}
+                    </td>
+                    <td v-if="billing.subscription.cancelAt" class="text-left">
+                      {{ formatDate(billing.subscription.cancelAtPeriodEnd) }}
+                    </td>
+                  </tr>
+                </tbody>
+              </q-markup-table>
+
               <q-list
                 v-if="billing?.subscription"
                 bordered
                 padding
-                class="rounded-borders"
-                style="max-width: 300px"
+                class="rounded-borders desktop-hide"
+                style="max-width: 350px"
               >
                 <q-item>
                   <q-item-section>
-                    <q-item-label lines="1">
-                      {{ billing.subscription.status }}
+                    <q-item-label
+                      lines="1"
+                      :class="{
+                        inactive: billing.subscription.status === 'inactive',
+                        active: billing.subscription.status === 'active',
+                        cancelling:
+                          billing.subscription.status === 'cancelling',
+                      }"
+                    >
+                      {{
+                        $t(
+                          `adminTools.subscriptionStatusString.${billing.subscription.status}`
+                        )
+                      }}
                     </q-item-label>
                     <q-item-label caption>
                       {{ $t(`adminTools.subscriptionStatus`) }}
@@ -935,7 +997,7 @@
                   </q-item-section>
                 </q-item>
 
-                <q-item>
+                <q-item v-if="billing.subscription.cancelAt">
                   <q-item-section>
                     <q-item-label lines="1">
                       {{ formatDate(billing.subscription.cancelAt) }}
@@ -946,7 +1008,7 @@
                   </q-item-section>
                 </q-item>
 
-                <q-item>
+                <q-item v-if="billing.subscription.cancelAtPeriodEnd">
                   <q-item-section>
                     <q-item-label lines="1">
                       {{ billing.subscription.cancelAtPeriodEnd }}
@@ -968,11 +1030,59 @@
                 {{ $t('adminTools.billingInfo') }}
               </div>
 
+              <q-markup-table
+                v-if="billing?.subscription"
+                bordered
+                padding
+                class="rounded-borders desktop-only"
+              >
+                <thead>
+                  <tr>
+                    <th class="text-left">
+                      {{ $t(`memberbucks.lastPurchase`) }}
+                    </th>
+                    <th class="text-left">
+                      {{ $t(`memberbucks.cardExpiry`) }}
+                    </th>
+                    <th class="text-left">{{ $t(`memberbucks.last4`) }}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td class="text-left">
+                      <div v-if="billing?.memberbucks.lastPurchase">
+                        {{ this.formatWhen(billing?.memberbucks.lastPurchase) }}
+                        <q-tooltip :delay="500">
+                          {{
+                            this.formatDate(billing?.memberbucks.lastPurchase)
+                          }}
+                        </q-tooltip>
+                      </div>
+                      <div v-else>
+                        {{ $t('error.noValue') }}
+                      </div>
+                    </td>
+                    <td class="text-left">
+                      {{
+                        billing?.memberbucks.stripe_card_expiry ||
+                        $t('error.noValue')
+                      }}
+                    </td>
+                    <td class="text-left">
+                      {{
+                        billing?.memberbucks.stripe_card_last_digits ||
+                        $t('error.noValue')
+                      }}
+                    </td>
+                  </tr>
+                </tbody>
+              </q-markup-table>
+
               <q-list
                 bordered
                 padding
-                class="rounded-borders"
-                style="max-width: 300px"
+                class="rounded-borders mobile-only"
+                style="max-width: 350px"
               >
                 <q-item>
                   <q-item-section>
@@ -1024,95 +1134,99 @@
                 </q-item>
               </q-list>
             </div>
-          </div>
-
-          <br />
-          <div class="text-h6">
-            {{ $t('adminTools.memberbucksTransactions') }}
-          </div>
 
-          <q-table
-            :rows="billing?.memberbucks.transactions"
-            :columns="[
-              {
-                name: 'description',
-                label: 'Description',
-                field: 'description',
-                sortable: true,
-              },
-              {
-                name: 'amount',
-                label: 'Amount',
-                field: 'amount',
-                sortable: true,
-              },
-              {
-                name: 'date',
-                label: 'When',
-                field: 'date',
-                sortable: true,
-                format: (val) => formatWhen(val),
-              },
-            ]"
-            row-key="id"
-            :filter="filter"
-            v-model:pagination="pagination"
-            :loading="loading"
-            :grid="$q.screen.xs"
-          >
-            <template v-slot:top-left>
-              <div class="row">
-                <q-input
-                  v-if="$q.screen.xs"
-                  v-model="filter"
-                  outlined
-                  dense
-                  debounce="300"
-                  placeholder="Search"
-                  style="margin-top: -3px"
-                >
-                  <template v-slot:append>
-                    <q-icon :name="icons.search" />
-                  </template>
-                </q-input>
-              </div>
-              <div class="row">
-                {{ $t('memberbucks.currentBalance') }}
-                {{
-                  $n(
-                    billing?.memberbucks.balance || 0,
-                    'currency',
-                    siteLocaleCurrency
-                  )
-                }}
+            <div>
+              <div class="text-h6">
+                {{ $t('adminTools.memberbucksTransactions') }}
               </div>
-            </template>
 
-            <template v-if="$q.screen.gt.xs" v-slot:top-right>
-              <q-input
-                v-model="filter"
-                outlined
-                dense
-                debounce="300"
-                placeholder="Search"
-                style="margin-top: -3px"
+              <q-table
+                :rows="billing?.memberbucks.transactions"
+                :columns="[
+                  {
+                    name: 'description',
+                    label: 'Description',
+                    field: 'description',
+                    sortable: true,
+                  },
+                  {
+                    name: 'amount',
+                    label: 'Amount',
+                    field: 'amount',
+                    sortable: true,
+                  },
+                  {
+                    name: 'date',
+                    label: 'When',
+                    field: 'date',
+                    sortable: true,
+                    format: (val) => formatWhen(val),
+                  },
+                ]"
+                row-key="id"
+                :filter="filter"
+                v-model:pagination="pagination"
+                :loading="loading"
+                :grid="$q.screen.xs"
               >
-                <template v-slot:append>
-                  <q-icon :name="icons.search" />
+                <template v-slot:top-left>
+                  <div class="row">
+                    <q-input
+                      v-if="$q.screen.xs"
+                      v-model="filter"
+                      outlined
+                      dense
+                      debounce="300"
+                      placeholder="Search"
+                      style="margin-top: -3px"
+                    >
+                      <template v-slot:append>
+                        <q-icon :name="icons.search" />
+                      </template>
+                    </q-input>
+                  </div>
+                  <div class="row">
+                    {{ $t('memberbucks.currentBalance') }}
+                    {{
+                      $n(
+                        billing?.memberbucks.balance || 0,
+                        'currency',
+                        siteLocaleCurrency
+                      )
+                    }}
+                  </div>
                 </template>
-              </q-input>
-            </template>
 
-            <template v-slot:body-cell-amount="props">
-              <q-td>
-                <div
-                  :class="{ credit: props.value > 0, debit: props.value < 0 }"
-                >
-                  ${{ props.value }}
-                </div>
-              </q-td>
-            </template>
-          </q-table>
+                <template v-if="$q.screen.gt.xs" v-slot:top-right>
+                  <q-input
+                    v-model="filter"
+                    outlined
+                    dense
+                    debounce="300"
+                    placeholder="Search"
+                    style="margin-top: -3px"
+                  >
+                    <template v-slot:append>
+                      <q-icon :name="icons.search" />
+                    </template>
+                  </q-input>
+                </template>
+
+                <template v-slot:body-cell-amount="props">
+                  <q-td>
+                    <div
+                      :class="{
+                        credit: props.value > 0,
+                        debit: props.value < 0,
+                      }"
+                    >
+                      ${{ props.value }}
+                    </div>
+                  </q-td>
+                </template>
+              </q-table>
+            </div>
+          </div>
         </q-tab-panel>
       </q-tab-panels>
     </q-card>
@@ -1545,6 +1659,10 @@ a:active {
   color: red;
 }
 
+.cancelling {
+  color: orange;
+}
+
 .q-field__after,
 .q-field__append {
   padding-left: 0;
diff --git a/src-frontend/src/components/AdminTools/MembersList.vue b/src-frontend/src/components/AdminTools/MembersList.vue
index c8ecd8a0..166ce942 100644
--- a/src-frontend/src/components/AdminTools/MembersList.vue
+++ b/src-frontend/src/components/AdminTools/MembersList.vue
@@ -256,16 +256,17 @@ export default defineComponent({
         .then(() => {
           this.$q.dialog({
             dark: true,
-            title: this.$t('adminTools.copyEmailListSuccess', {
-              count: this.displayMemberList.length,
-            }),
-            message: this.$t('adminTools.copyEmailListSuccessDescription', {
-              excludedCount:
-                this.displayMemberList.length -
+            title: this.$tc(
+              'adminTools.copyEmailListSuccess',
+              this.displayMemberList.length
+            ),
+            message: this.$tc(
+              'adminTools.copyEmailListSuccessDescription',
+              this.displayMemberList.length -
                 this.displayMemberList.filter(
                   (member: MemberProfile) => !member.excludeFromEmailExport
-                ).length,
-            }),
+                ).length
+            ),
           });
         })
         .catch(() => {
diff --git a/src-frontend/src/components/Billing/PlanCard.vue b/src-frontend/src/components/Billing/PlanCard.vue
index 348fa8fb..cfda5343 100644
--- a/src-frontend/src/components/Billing/PlanCard.vue
+++ b/src-frontend/src/components/Billing/PlanCard.vue
@@ -9,9 +9,9 @@
               $t('paymentPlans.intervalDescription', {
                 currency: plan.currency.toUpperCase(),
                 amount: $n(plan.cost / 100, 'currency', siteLocaleCurrency),
-                intervalCount: plan.intervalAmount,
                 interval: $tc(
-                  `paymentPlans.interval.${plan.interval.toLowerCase()}`
+                  `paymentPlans.interval.${plan.interval.toLowerCase()}`,
+                  plan.intervalAmount
                 ),
               })
             }}
diff --git a/src-frontend/src/components/Billing/SelectTier.vue b/src-frontend/src/components/Billing/SelectTier.vue
index 3583a4e0..da4dd3ef 100644
--- a/src-frontend/src/components/Billing/SelectTier.vue
+++ b/src-frontend/src/components/Billing/SelectTier.vue
@@ -147,7 +147,7 @@
           }}
         </div>
 
-        <p v-if="step > 2" class="q-py-md">
+        <p v-if="step > 2" class="q-py-md" style="max-width: 850px">
           {{
             $t('tiers.confirm', {
               intervalDescription: $t('paymentPlans.intervalDescription', {
@@ -157,9 +157,9 @@
                   'currency',
                   siteLocaleCurrency
                 ),
-                intervalCount: selectedPlan.intervalCount,
                 interval: $tc(
-                  `paymentPlans.interval.${selectedPlan.interval.toLowerCase()}`
+                  `paymentPlans.interval.${selectedPlan.interval.toLowerCase()}`,
+                  selectedPlan.intervalCount
                 ),
               }),
             })
diff --git a/src-frontend/src/components/Billing/TierCard.vue b/src-frontend/src/components/Billing/TierCard.vue
index 04a9830c..bc81a6b7 100644
--- a/src-frontend/src/components/Billing/TierCard.vue
+++ b/src-frontend/src/components/Billing/TierCard.vue
@@ -14,9 +14,9 @@
                     'currency',
                     siteLocaleCurrency
                   ),
-                  intervalCount: minPrice.intervalAmount,
                   interval: $tc(
-                    `paymentPlans.interval.${minPrice.interval.toLowerCase()}`
+                    `paymentPlans.interval.${minPrice.interval.toLowerCase()}`,
+                    minPrice.intervalAmount
                   ),
                 }),
               })
diff --git a/src-frontend/src/i18n/en-AU/index.ts b/src-frontend/src/i18n/en-AU/index.ts
index f0959a5c..9dc5d374 100644
--- a/src-frontend/src/i18n/en-AU/index.ts
+++ b/src-frontend/src/i18n/en-AU/index.ts
@@ -18,7 +18,7 @@ export default {
     verifyEmail: 'Verify your email to continue',
 
     meetings: 'Meetings',
-    members: 'Members',
+    members: 'Members', // for routes
     manageMember: 'Manage Member',
     doors: 'Doors',
     manageDoor: 'Manage Door',
@@ -134,7 +134,7 @@ export default {
     loginToContinue: 'Please login to continue',
     forgottenPassword: 'Forgot your password?',
     forgottenPasswordDescription:
-      'Please enter your email address and click submit. You will ' +
+      'Please enter your email address and tap submit. You will ' +
       'receive an email with further instructions.',
     emailLabel: 'Email address',
     resetSuccess: 'Success. Check your email for further instructions.',
@@ -181,12 +181,9 @@ export default {
     authorised: 'Authorised',
     unauthorised: 'Unauthorised',
     maintenance: 'Maintenance Lockout',
-    door: 'Door',
-    doors: 'Doors',
-    interlock: 'Interlock',
-    interlocks: 'Interlocks',
-    memberbucksDevice: 'Spacebucks',
-    memberbucksDevices: 'Spacebucks',
+    door: 'Door | Doors',
+    interlock: 'Interlock | Interlocks',
+    memberbucksDevice: 'Spacebucks | Spacebucks',
     defaultAccess: 'Members have access by default',
     maintenanceLockout: 'Maintenance lockout is enabled',
     playTheme: 'Play theme on swipe',
@@ -250,7 +247,7 @@ export default {
     interval: 'Interval Period',
     vehicleRegistrationPlate: 'Vehicle Registration Plate Number',
     vehicleRegistrationNote:
-      'Please enter your vehicle registration plate(s) here if you have any. We use this to make sure only members park in our carpark.',
+      'Please enter your vehicle registration plate if you have any. Separate multiple with a space. We use this to help manage parking.',
     excludeFromEmailExport: 'Excluded from email exports',
   },
   digitalId: {
@@ -317,12 +314,12 @@ export default {
       'immediately charge your saved card ending in {savedCard}.',
     noSavedBilling:
       "Sorry, but you don't have any valid billing methods. Please add a new " +
-      'billing method by clicking the button below.',
+      'billing method by tapping the button below.',
     manageBilling: 'Billing Method',
-    selectToContinue: 'Select your billing method to continue.',
+    selectToContinue: 'Confirm your billing method',
     addCard: 'Add Card',
     addCardDescription:
-      'To add a new card please fill out the form. We do not store your credit card information (other than the last 4 digits and expiry) as our payment processor collects this for us.',
+      "Add your card below. We don't store your credit card info other than the last 4 digits and expiry. Our secure payment provider stores your card for us.",
     addCardError:
       'There was an error adding your card. Please try again later.',
     saveCard: 'Save Card',
@@ -336,7 +333,7 @@ export default {
     quickAdd: 'Quick Add',
     totalAmount: 'Total Amount',
     donateFundsDescription:
-      "Enter an amount, then click {'\"'}@:memberbucks.donateFunds{'\"'}.",
+      "Enter an amount, then tap {'\"'}@:memberbucks.donateFunds{'\"'}.",
     donateFundsSuccess: 'Successfully made payment.',
     donateFundsError:
       'There was an error confirming the payment, check your balance or try again later.',
@@ -378,8 +375,7 @@ export default {
     onSite: ' on site right now.',
     memberList: 'Members On Site',
   },
-  members: 'Members',
-  member: 'Member',
+  member: 'member | members',
   actionFailed: 'Action failed',
   actionSuccess: 'Action was successful',
   warning: 'Warning',
@@ -396,13 +392,14 @@ export default {
     'to date.',
   progress: 'Progress: {percent}%',
   adminTools: {
-    title: 'Admin Tools',
+    title: 'Tools',
     optOutEmailExport: 'Opt out of email export',
     optInEmailExport: 'Opt in to email export',
     emailAddresses: 'Copy Email List',
-    copyEmailListSuccess: 'Copied {count} Email Addresses!',
+    copyEmailListSuccess:
+      'Copied {n} Email Address! | Copied {n} Email Addresses!',
     copyEmailListSuccessDescription:
-      'Simply paste them into your email client to use them. We recommend using the BCC field to protect your members privacy. Excluded {excludedCount} members who you have opted out of email exports.',
+      'Simply paste them into your email client to use them. We recommend using the BCC field to protect your members privacy. Excluded {n} @:member who you have opted out of email exports.',
     exportCsv: 'Export CSV',
     exportOptions: 'Export Options',
     filterOptions: 'Filter',
@@ -437,13 +434,13 @@ export default {
 
     access: 'Access',
     accessDescription: "Tap an icon below to change a member's access.",
-    log: 'Log',
+    log: 'log | logs',
     userEvents: 'Event Logs',
     userDoorLogs: 'Door Swipe Logs',
     userInterlockLogs: 'Interlock Session Logs',
     stats: 'Stats',
     mainProfile: 'Main Profile',
-    otherAttributes: 'Other Attributes',
+    otherAttributes: 'Account Info',
     memberDates: 'Important Dates',
     lastInduction: 'Last Induction',
     lastUpdatedProfile: 'Last Updated Profile',
@@ -453,7 +450,18 @@ export default {
     memberState: 'Member State',
     memberbucksTransactions: 'Spacebucks Transactions',
     subscriptionInfo: 'Subscription Info',
-    subscriptionStatus: 'Stripe Subscription Status',
+    subscriptionStatus: 'Subscription Status',
+    subscriptionStatusString: {
+      active: 'Active',
+      inactive: 'Inactive',
+      cancelling: 'Cancelling',
+    },
+    memberStatusString: {
+      noob: 'New Member',
+      active: 'Active',
+      inactive: 'Inactive',
+      accountonly: 'Account Only',
+    },
     billingInfo: 'Billing Info',
     billingCycleAnchor: 'Billing Cycle Anchor',
     cancelAt: 'Cancels At',
@@ -495,21 +503,17 @@ export default {
     success: 'Successfully added a new Membership Payment Plan.',
     fail: 'Failed to add a new Membership Payment Plan.',
     select: 'Payment Plan',
-    selected: 'Selected Membership Payment Plan',
+    selected: 'Selected Payment Plan',
     confirmSelection: 'Confirm',
-    selectToContinue: 'Select a payment plan to continue.',
+    selectToContinue: 'Select a payment plan',
     noPlans: 'There are no payment plans available for this membership plan.',
     dueToday: 'Due Today: {amount}',
-    intervalDescription: '{amount} every {intervalCount} {interval}',
+    intervalDescription: '{amount} every {interval}',
     interval: {
-      day: 'day',
-      week: 'week',
-      month: 'month',
-      year: 'year',
-      days: 'days',
-      weeks: 'weeks',
-      months: 'months',
-      years: 'years',
+      day: 'day | {n} days',
+      week: 'week | {n} weeks',
+      month: 'month | {n} months',
+      year: 'year | {n} years',
     },
     signupFailed: 'Signup failed',
     signupSuccess: 'Signup success',
@@ -525,7 +529,7 @@ export default {
     resumeButton: 'Resume membership',
     cancelling: 'Your membership is about to be cancelled',
     cancellingDescription:
-      "Your membership is scheduled to be cancelled on {date}. If you'd like to resume your plan (listed above), please click below.",
+      "Your membership is scheduled to be cancelled on {date}. If you'd like to resume your plan (listed above), please tap below.",
     renewalDate: 'Renewal Date',
     signupDate: 'Signup Date',
     subscriptionInfo: 'Subscription Info',
@@ -558,7 +562,7 @@ export default {
       'time to finalise your membership.',
     submitted: 'Membership application submitted',
     submittedDescription:
-      "Your membership application has been submitted and you are now a 'member applicant'. Your membership will be officially accepted after 7 days, but we have granted site access immediately. You will receive an email confirming that your access card has been enabled. If for some reason your membership is rejected within this period, you will receive an email with further information.",
+      "Your membership application has been submitted and you are now a 'member applicant'. Your membership will be accepted soon, but we have granted site access immediately. You will receive an email confirming that your access card has been enabled. If for some reason your membership is rejected within this period, you will receive an email with further information.",
     continueToDashboard: 'Continue to dashboard',
     error: 'Error submitting membership application',
     errorDescription:
@@ -574,7 +578,7 @@ export default {
     disabledFeature:
       'WARNING: This feature is turned off. You should enable it before making any changes.',
     select: 'Membership Plan',
-    selectToContinue: 'Select a membership plan to continue.',
+    selectToContinue: 'Select a membership plan',
     noTiers: 'There are no membership plans available right now.',
     selected: 'Selected Membership Plan',
     nodata: 'There are no membership plans in the system.',
@@ -584,7 +588,7 @@ export default {
     add: 'Add a new plan',
     becomeMember: 'Become a member',
     confirm:
-      'Please confirm your selected membership plan and billing plan. By continuing you agree to pay for your selected plan using the provided credit card. Your first payment will be collected today, and future payments of {intervalDescription}.',
+      'Please confirm your selected membership plan and payment plan. By continuing you agree to pay for your selected plan using your credit card. Your first payment will be collected now, and future payments of {intervalDescription}.',
     confirmDelay:
       'Your membership application will be submitted after you complete the next steps.',
     finish: 'Pay & Continue',
diff --git a/src-frontend/src/pages/AdminTools/Devices.vue b/src-frontend/src/pages/AdminTools/Devices.vue
index 9a460f17..1b2c235e 100644
--- a/src-frontend/src/pages/AdminTools/Devices.vue
+++ b/src-frontend/src/pages/AdminTools/Devices.vue
@@ -11,9 +11,9 @@
         narrow-indicator
         class="bg-primary text-white"
       >
-        <q-tab name="doors" :label="$t('access.doors')" />
-        <q-tab name="interlocks" :label="$t('access.interlocks')" />
-        <q-tab name="memberbucks" :label="$t('access.memberbucksDevices')" />
+        <q-tab name="doors" :label="$tc('access.door', 2)" />
+        <q-tab name="interlocks" :label="$tc('access.interlock', 2)" />
+        <q-tab name="memberbucks" :label="$tc('access.memberbucksDevice', 2)" />
       </q-tabs>
       <q-separator />
       <q-tab-panels v-model="tab" animated>

From 5b79b377f75c680524ce44f9dc687c4aad2bdfba Mon Sep 17 00:00:00 2001
From: Jaimyn Mayer <hello@jaimyn.dev>
Date: Sun, 16 Jun 2024 23:26:07 +1000
Subject: [PATCH 09/15] fixed billing dates appearing incorrectly

---
 src-frontend/src/mixins/formatMixin.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src-frontend/src/mixins/formatMixin.ts b/src-frontend/src/mixins/formatMixin.ts
index 1a8e9440..25f840af 100644
--- a/src-frontend/src/mixins/formatMixin.ts
+++ b/src-frontend/src/mixins/formatMixin.ts
@@ -17,9 +17,14 @@ export function formatCsvList(list: Array<string>) {
   });
 }
 
-export function formatDate(date: Date, time = true) {
-  if (time) return dayjs(date).local().format('D MMM YYYY, h:mm a');
-  return dayjs(date).local().format('D MMM YYYY');
+export function formatDate(date: Date | number, time = true) {
+  let parsedDate = date;
+  // if it's earlier than 2000 it's clearly not been scaled to js time which is stored in milliseconds
+  if (typeof date === 'number' && date < 9439200000) {
+    parsedDate = date * 1000;
+  }
+  if (time) return dayjs(parsedDate).local().format('D MMM YYYY, h:mm a');
+  return dayjs(parsedDate).local().format('D MMM YYYY');
 }
 
 export function formatDateSimple(date: Date, time = true) {

From 85f8f15c365db9025a2879663fc7da438c00a68a Mon Sep 17 00:00:00 2001
From: Jaimyn Mayer <hello@jaimyn.dev>
Date: Mon, 17 Jun 2024 00:13:41 +1000
Subject: [PATCH 10/15] Added support for assigning a plan manually and
 allowing a member to resume it

---
 memberportal/api_billing/views.py             | 219 +++++++++++-------
 src-frontend/src/boot/routeGuards.ts          |   1 +
 .../src/components/Billing/SelectTier.vue     |   2 -
 src-frontend/src/pages/MembershipPlan.vue     |  11 +-
 4 files changed, 146 insertions(+), 87 deletions(-)

diff --git a/memberportal/api_billing/views.py b/memberportal/api_billing/views.py
index 35f9bc7e..a3e537de 100644
--- a/memberportal/api_billing/views.py
+++ b/memberportal/api_billing/views.py
@@ -1,4 +1,5 @@
 from asgiref.sync import sync_to_async
+from django.http import HttpRequest
 
 from profile.models import Profile
 from access.models import Doors, Interlock
@@ -207,102 +208,82 @@ class PaymentPlanSignup(StripeAPIView):
     post: attempts to sign the member up to a new payment plan.
     """
 
-    def post(self, request, plan_id):
-        current_plan = request.user.profile.membership_plan
-        new_plan = PaymentPlan.objects.get(pk=plan_id)
+    def create_subscription(
+        self, request: HttpRequest, new_plan: PaymentPlan, attempts: int = 0
+    ):
+        attempts += 1
 
-        if current_plan:
-            return Response({"success": False}, status=status.HTTP_409_CONFLICT)
+        if attempts > 3:
+            request.user.log_event(
+                "Too many attempts while creating subscription.",
+                "stripe",
+                "",
+            )
+            return Response(
+                {
+                    "success": False,
+                    "message": None,
+                },
+                status=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            )
 
-        def create_subscription(attempts=0):
-            attempts += 1
+        try:
+            return stripe.Subscription.create(
+                customer=request.user.profile.stripe_customer_id,
+                items=[
+                    {"price": new_plan.stripe_id},
+                ],
+            )
+
+        except stripe.error.InvalidRequestError as e:
+            capture_exception(e)
+            error = e.json_body.get("error")
 
-            if attempts > 3:
+            if (
+                error["code"] == "resource_missing"
+                and "default payment method" in error["message"]
+            ):
                 request.user.log_event(
-                    "Too many attempts while creating subscription.",
+                    "InvalidRequestError (missing default payment method) from Stripe while creating subscription.",
                     "stripe",
-                    "",
+                    error,
+                )
+
+                # try to set the default and try again
+                stripe.Customer.modify(
+                    request.user.profile.stripe_customer_id,
+                    invoice_settings={
+                        "default_payment_method": request.user.profile.stripe_payment_method_id,
+                    },
                 )
+
+                return self.create_subscription(attempts)
+
+            if (
+                error["code"] == "resource_missing"
+                and "a similar object exists in live mode" in error["message"]
+            ):
+                request.user.log_event(
+                    "InvalidRequestError (used test key with production object) from Stripe while "
+                    "creating subscription.",
+                    "stripe",
+                    error,
+                )
+
                 return Response(
                     {
                         "success": False,
-                        "message": None,
+                        "message": error["message"],
                     },
                     status=status.HTTP_500_INTERNAL_SERVER_ERROR,
                 )
 
-            try:
-                return stripe.Subscription.create(
-                    customer=request.user.profile.stripe_customer_id,
-                    items=[
-                        {"price": new_plan.stripe_id},
-                    ],
-                )
-
-            except stripe.error.InvalidRequestError as e:
-                capture_exception(e)
-                error = e.json_body.get("error")
-
-                if (
-                    error["code"] == "resource_missing"
-                    and "default payment method" in error["message"]
-                ):
-                    request.user.log_event(
-                        "InvalidRequestError (missing default payment method) from Stripe while creating subscription.",
-                        "stripe",
-                        error,
-                    )
-
-                    # try to set the default and try again
-                    stripe.Customer.modify(
-                        request.user.profile.stripe_customer_id,
-                        invoice_settings={
-                            "default_payment_method": request.user.profile.stripe_payment_method_id,
-                        },
-                    )
-
-                    return create_subscription(attempts)
-
-                if (
-                    error["code"] == "resource_missing"
-                    and "a similar object exists in live mode" in error["message"]
-                ):
-                    request.user.log_event(
-                        "InvalidRequestError (used test key with production object) from Stripe while "
-                        "creating subscription.",
-                        "stripe",
-                        error,
-                    )
-
-                    return Response(
-                        {
-                            "success": False,
-                            "message": error["message"],
-                        },
-                        status=status.HTTP_500_INTERNAL_SERVER_ERROR,
-                    )
-
-                else:
-                    request.user.log_event(
-                        "InvalidRequestError from Stripe while creating subscription.",
-                        "stripe",
-                        error,
-                    )
-                    return Response(
-                        {
-                            "success": False,
-                            "message": None,
-                        },
-                        status=status.HTTP_500_INTERNAL_SERVER_ERROR,
-                    )
-
-            except Exception as e:
+            else:
                 request.user.log_event(
                     "InvalidRequestError from Stripe while creating subscription.",
                     "stripe",
-                    e,
+                    error,
                 )
-                capture_exception(e)
                 return Response(
                     {
                         "success": False,
@@ -311,7 +292,29 @@ def create_subscription(attempts=0):
                     status=status.HTTP_500_INTERNAL_SERVER_ERROR,
                 )
 
-        new_subscription = create_subscription()
+        except Exception as e:
+            request.user.log_event(
+                "InvalidRequestError from Stripe while creating subscription.",
+                "stripe",
+                e,
+            )
+            capture_exception(e)
+            return Response(
+                {
+                    "success": False,
+                    "message": None,
+                },
+                status=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            )
+
+    def post(self, request, plan_id):
+        current_plan = request.user.profile.membership_plan
+        new_plan = PaymentPlan.objects.get(pk=plan_id)
+
+        if current_plan:
+            return Response({"success": False}, status=status.HTTP_409_CONFLICT)
+
+        new_subscription = self.create_subscription(request, new_plan)
 
         try:
             if new_subscription.status == "active":
@@ -487,7 +490,7 @@ class SubscriptionInfo(StripeAPIView):
     def get(self, request):
         current_plan = request.user.profile.membership_plan
 
-        if not current_plan:
+        if not current_plan or not request.user.profile.stripe_subscription_id:
             return Response({"success": False})
 
         else:
@@ -527,14 +530,62 @@ def post(self, request, resume):
             )
 
         else:
-            # this will modify the subscription to automatically cancel at the end of the current payment period
-            if resume:
+            if resume and not request.user.profile.stripe_subscription_id:
+                request.user.log_event(
+                    "Member tried to resume a payment plan that doesn't exist - creating it.",
+                    "stripe",
+                )
+                new_subscription = PaymentPlanSignup().create_subscription(
+                    request, current_plan
+                )
+
+                try:
+                    if new_subscription.status == "active":
+                        request.user.profile.stripe_subscription_id = (
+                            new_subscription.id
+                        )
+                        request.user.profile.subscription_status = "active"
+                        request.user.profile.save()
+
+                        request.user.log_event(
+                            "Successfully created subscription in Stripe.",
+                            "stripe",
+                            "",
+                        )
+
+                        return Response({"success": True})
+
+                    elif new_subscription.status == "incomplete":
+                        # if we got here, that means the subscription wasn't successfully created
+                        request.user.log_event(
+                            f"Failed to create subscription in Stripe with status {new_subscription.status}.",
+                            "stripe",
+                            "",
+                        )
+
+                        return Response(
+                            {"success": True, "message": "signup.subscriptionFailed"}
+                        )
+
+                    else:
+                        request.user.log_event(
+                            f"Failed to create subscription in Stripe with status {new_subscription.status}.",
+                            "stripe",
+                            "",
+                        )
+                        return Response({"success": True})
+
+                except KeyError as e:
+                    capture_exception(e)
+                    return new_subscription or e
+
+            elif resume:
                 modified_subscription = stripe.Subscription.modify(
                     request.user.profile.stripe_subscription_id,
                     cancel_at_period_end=False,
                 )
 
-                if modified_subscription.cancel_at_period_end == False:
+                if not modified_subscription.cancel_at_period_end:
                     request.user.profile.subscription_status = "active"
                     request.user.profile.save()
                     subject = f"{request.user.get_full_name()} resumed their cancelling membership plan."
diff --git a/src-frontend/src/boot/routeGuards.ts b/src-frontend/src/boot/routeGuards.ts
index 35a75203..c02667da 100644
--- a/src-frontend/src/boot/routeGuards.ts
+++ b/src-frontend/src/boot/routeGuards.ts
@@ -15,6 +15,7 @@ export default boot(({ router, store }) => {
       store.getters['profile/profile']?.memberStatus === 'Needs Induction' &&
       to.name !== 'membershipPlan' &&
       to.name !== 'webcams' &&
+      to.name !== 'billing' &&
       store.getters['config/features']?.enableMembershipPayments &&
       to.meta.admin !== true
     ) {
diff --git a/src-frontend/src/components/Billing/SelectTier.vue b/src-frontend/src/components/Billing/SelectTier.vue
index da4dd3ef..9e49c4d7 100644
--- a/src-frontend/src/components/Billing/SelectTier.vue
+++ b/src-frontend/src/components/Billing/SelectTier.vue
@@ -332,8 +332,6 @@ export default defineComponent({
     },
     cardExistsHandler(value) {
       this.cardExists = value;
-      console.log('UPDATED CARD SAVED TO');
-      console.log(value);
     },
   },
 });
diff --git a/src-frontend/src/pages/MembershipPlan.vue b/src-frontend/src/pages/MembershipPlan.vue
index ee32472d..347c27b5 100644
--- a/src-frontend/src/pages/MembershipPlan.vue
+++ b/src-frontend/src/pages/MembershipPlan.vue
@@ -39,7 +39,10 @@
         </div>
 
         <div
-          v-if="currentPeriodEnd && subscriptionStatus !== 'cancelling'"
+          v-if="
+            this.subscriptionInfo?.currentPeriodEnd &&
+            subscriptionStatus !== 'cancelling'
+          "
           class="q-mb-md"
         >
           <div class="text-h6 q-py-md">
@@ -75,6 +78,7 @@
           color="error"
           :label="$tc('paymentPlans.cancelButton')"
         />
+        <member-bucks-manage-billing v-else-if="!cardExists" />
         <q-btn
           v-else
           :disable="disableButton"
@@ -94,10 +98,12 @@ import { mapGetters, mapActions } from 'vuex';
 import SelectTier from '@components/Billing/SelectTier.vue';
 import SelectedTier from '@components/Billing/SelectedTier.vue';
 import SignupRequiredSteps from '@components/Billing/SignupRequiredSteps.vue';
+import MemberBucksManageBilling from 'components/MemberBucksManageBilling.vue';
 
 export default defineComponent({
   name: 'MembershipTierPage',
   components: {
+    MemberBucksManageBilling,
     SelectTier,
     SelectedTier,
     SignupRequiredSteps,
@@ -126,6 +132,9 @@ export default defineComponent({
         return false;
       }
     },
+    cardExists() {
+      return this?.profile?.financial?.memberBucks?.savedCard?.last4;
+    },
     currentTier() {
       return this.profile.financial.membershipTier;
     },

From 93dba182df92ef30a5866a3b1d1b97d5cebb2d69 Mon Sep 17 00:00:00 2001
From: Jaimyn Mayer <hello@jaimyn.dev>
Date: Mon, 17 Jun 2024 00:16:49 +1000
Subject: [PATCH 11/15] added migrations

---
 .../0011_alter_paymentplan_interval.py        | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 memberportal/api_admin_tools/migrations/0011_alter_paymentplan_interval.py

diff --git a/memberportal/api_admin_tools/migrations/0011_alter_paymentplan_interval.py b/memberportal/api_admin_tools/migrations/0011_alter_paymentplan_interval.py
new file mode 100644
index 00000000..7a37a1bd
--- /dev/null
+++ b/memberportal/api_admin_tools/migrations/0011_alter_paymentplan_interval.py
@@ -0,0 +1,21 @@
+# Generated by Django 3.2.25 on 2024-06-16 14:16
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("api_admin_tools", "0010_auto_20230729_2031"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="paymentplan",
+            name="interval",
+            field=models.CharField(
+                choices=[("Month", "month"), ("Week", "week"), ("Day", "day")],
+                max_length=10,
+            ),
+        ),
+    ]

From 650aab0a997a905318be532cb669316867b1c808 Mon Sep 17 00:00:00 2001
From: Jaimyn Mayer <hello@jaimyn.dev>
Date: Sat, 22 Jun 2024 11:42:54 +1000
Subject: [PATCH 12/15] made member states consistent

---
 memberportal/api_general/views.py                    |  2 +-
 src-frontend/src/boot/routeGuards.ts                 |  4 ++--
 .../src/components/AdminTools/MembersList.vue        | 12 ++++++------
 src-frontend/src/components/DigitalIdCard.vue        |  2 +-
 src-frontend/src/layouts/MainLayout.vue              |  4 ++--
 src-frontend/src/pages/CheckAccess.vue               |  2 +-
 src-frontend/src/pages/Dashboard.vue                 |  6 +++---
 src-frontend/src/pages/Profile.vue                   |  4 ++--
 8 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/memberportal/api_general/views.py b/memberportal/api_general/views.py
index 39cbccbc..bba878b2 100644
--- a/memberportal/api_general/views.py
+++ b/memberportal/api_general/views.py
@@ -379,7 +379,7 @@ def get(self, request):
             "lastName": p.last_name,
             "screenName": p.screen_name,
             "phone": p.phone,
-            "memberStatus": p.get_state_display(),
+            "memberStatus": p.state,
             "vehicleRegistrationPlate": p.vehicle_registration_plate,
             "lastInduction": p.last_induction,
             "lastSeen": p.last_seen,
diff --git a/src-frontend/src/boot/routeGuards.ts b/src-frontend/src/boot/routeGuards.ts
index c02667da..cc7d7c25 100644
--- a/src-frontend/src/boot/routeGuards.ts
+++ b/src-frontend/src/boot/routeGuards.ts
@@ -12,7 +12,7 @@ export default boot(({ router, store }) => {
     }
 
     if (
-      store.getters['profile/profile']?.memberStatus === 'Needs Induction' &&
+      store.getters['profile/profile']?.memberStatus === 'noob' &&
       to.name !== 'membershipPlan' &&
       to.name !== 'webcams' &&
       to.name !== 'billing' &&
@@ -52,7 +52,7 @@ export default boot(({ router, store }) => {
     if (
       to.meta.memberOnly &&
       to.name !== 'webcams' &&
-      store.getters['profile/profile'].memberStatus !== 'Active'
+      store.getters['profile/profile'].memberStatus !== 'active'
     )
       return next({ name: 'Error403MemberOnly' });
 
diff --git a/src-frontend/src/components/AdminTools/MembersList.vue b/src-frontend/src/components/AdminTools/MembersList.vue
index 166ce942..c0a13e31 100644
--- a/src-frontend/src/components/AdminTools/MembersList.vue
+++ b/src-frontend/src/components/AdminTools/MembersList.vue
@@ -128,7 +128,7 @@ export default defineComponent({
     return {
       members: [],
       filter: '',
-      memberState: 'Active',
+      memberState: 'active',
       loading: false,
       pagination: {
         sortBy: 'date',
@@ -156,11 +156,11 @@ export default defineComponent({
     },
     filterOptions() {
       return [
-        { label: this.$t('adminTools.all'), value: 'All' },
-        { label: this.$t('adminTools.active'), value: 'Active' },
-        { label: this.$t('adminTools.inactive'), value: 'Inactive' },
-        { label: this.$t('adminTools.new'), value: 'Needs Induction' },
-        { label: this.$t('adminTools.accountOnly'), value: 'Account Only' },
+        { label: this.$t('adminTools.all'), value: 'all' },
+        { label: this.$t('adminTools.active'), value: 'active' },
+        { label: this.$t('adminTools.inactive'), value: 'inactive' },
+        { label: this.$t('adminTools.new'), value: 'noob' },
+        { label: this.$t('adminTools.accountOnly'), value: 'accountonly' },
       ];
     },
     columns() {
diff --git a/src-frontend/src/components/DigitalIdCard.vue b/src-frontend/src/components/DigitalIdCard.vue
index a2ddcd03..f2fb6989 100644
--- a/src-frontend/src/components/DigitalIdCard.vue
+++ b/src-frontend/src/components/DigitalIdCard.vue
@@ -8,7 +8,7 @@
     <q-card-section class="column flex items-start justify-start">
       <div class="column flex content-start justify-center">
         <q-banner
-          v-if="profile.memberStatus !== 'Active'"
+          v-if="profile.memberStatus !== 'active'"
           inline-actions
           rounded
           class="bg-orange text-white q-ma-md"
diff --git a/src-frontend/src/layouts/MainLayout.vue b/src-frontend/src/layouts/MainLayout.vue
index e6c81f95..1baea725 100644
--- a/src-frontend/src/layouts/MainLayout.vue
+++ b/src-frontend/src/layouts/MainLayout.vue
@@ -208,7 +208,7 @@ export default defineComponent({
         if (!link.loggedIn) {
           if (this.loggedIn) displayLink = false;
         }
-        if (link.memberOnly && this.profile.memberStatus !== 'Active')
+        if (link.memberOnly && this.profile.memberStatus !== 'active')
           displayLink = false;
         if (this.$q.platform.is.electron && !link.kiosk) displayLink = false;
         if (link.admin && !this.profile?.permissions?.staff) {
@@ -223,7 +223,7 @@ export default defineComponent({
     if (this.loggedIn) {
       await this.getProfile();
       if (
-        this.profile.memberStatus === 'Needs Induction' &&
+        this.profile.memberStatus === 'noob' &&
         this.$route.name !== 'membershipPlan' &&
         this.features.enableMembershipPayments
       ) {
diff --git a/src-frontend/src/pages/CheckAccess.vue b/src-frontend/src/pages/CheckAccess.vue
index b540e38c..8285fbce 100644
--- a/src-frontend/src/pages/CheckAccess.vue
+++ b/src-frontend/src/pages/CheckAccess.vue
@@ -5,7 +5,7 @@
     </p>
     <div class="column flex content-start justify-center">
       <q-banner
-        v-if="profile.memberStatus !== 'Active'"
+        v-if="profile.memberStatus !== 'active'"
         inline-actions
         rounded
         class="bg-orange text-white q-ma-md"
diff --git a/src-frontend/src/pages/Dashboard.vue b/src-frontend/src/pages/Dashboard.vue
index ea12644b..ec3dd00a 100644
--- a/src-frontend/src/pages/Dashboard.vue
+++ b/src-frontend/src/pages/Dashboard.vue
@@ -4,8 +4,8 @@
       <div class="column flex content-start justify-center">
         <q-banner
           v-if="
-            profile.memberStatus !== 'Active' &&
-            profile.memberStatus !== 'Account Only'
+            profile.memberStatus !== 'active' &&
+            profile.memberStatus !== 'accountonly'
           "
           inline-actions
           rounded
@@ -72,7 +72,7 @@ export default {
   async mounted() {
     await this.getProfile();
     if (
-      this.profile.memberStatus === 'Needs Induction' &&
+      this.profile.memberStatus === 'noob' &&
       this.$route.name !== 'membershipPlan' &&
       this.features.enableMembershipPayments
     ) {
diff --git a/src-frontend/src/pages/Profile.vue b/src-frontend/src/pages/Profile.vue
index 2bdbe435..f99d5c21 100644
--- a/src-frontend/src/pages/Profile.vue
+++ b/src-frontend/src/pages/Profile.vue
@@ -3,8 +3,8 @@
     <div class="column flex content-start justify-center">
       <q-banner
         v-if="
-          profile.memberStatus !== 'Active' &&
-          profile.memberStatus !== 'Account Only'
+          profile.memberStatus !== 'active' &&
+          profile.memberStatus !== 'accountonly'
         "
         inline-actions
         rounded

From fcfe3075cbc4ea7a42cfd21c75543c4a04fa4334 Mon Sep 17 00:00:00 2001
From: Jaimyn Mayer <hello@jaimyn.dev>
Date: Sat, 22 Jun 2024 12:40:45 +1000
Subject: [PATCH 13/15] update path aliases in tsconfig for better intellisense

---
 src-frontend/src/types/shims-vue.d.ts |  8 --------
 src-frontend/tsconfig.json            | 10 +++++++++-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src-frontend/src/types/shims-vue.d.ts b/src-frontend/src/types/shims-vue.d.ts
index 3d42aacc..e69de29b 100644
--- a/src-frontend/src/types/shims-vue.d.ts
+++ b/src-frontend/src/types/shims-vue.d.ts
@@ -1,8 +0,0 @@
-/* eslint-disable */
-
-// Mocks all files ending in `.vue` showing them as plain Vue instances
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue';
-  const component: DefineComponent<{}, {}, any>;
-  export default component;
-}
diff --git a/src-frontend/tsconfig.json b/src-frontend/tsconfig.json
index c7a89b92..e1a1e119 100644
--- a/src-frontend/tsconfig.json
+++ b/src-frontend/tsconfig.json
@@ -1,7 +1,15 @@
 {
   "extends": "@quasar/app-vite/tsconfig-preset",
   "compilerOptions": {
-    "baseUrl": "."
+    "baseUrl": ".",
+    "paths": {
+      "@components/*": ["src/components/*"],
+      "@icons/*": ["src/icons/*"],
+      "@store/*": ["src/store/*"],
+      "@mixins/*": ["src/mixins/*"],
+      "@assets/*": ["src/assets/*"],
+      "types/*": ["src/types/*"]
+    }
   },
   "moduleResolution": "node"
 }

From 1a8823927fb78b309139fad84b4520f2ea62a667 Mon Sep 17 00:00:00 2001
From: Jaimyn Mayer <hello@jaimyn.dev>
Date: Sat, 22 Jun 2024 13:14:31 +1000
Subject: [PATCH 14/15] added member tier and plan to manage member screen

---
 memberportal/api_admin_tools/views.py         |  2 +
 memberportal/api_billing/views.py             |  2 +
 .../components/AdminTools/ManageMember.vue    | 82 ++++++++++++++-----
 src-frontend/src/i18n/en-AU/index.ts          |  2 +
 src-frontend/src/types/subscriptions.d.ts     | 19 +++++
 src-frontend/tsconfig.json                    |  3 +-
 6 files changed, 90 insertions(+), 20 deletions(-)

diff --git a/memberportal/api_admin_tools/views.py b/memberportal/api_admin_tools/views.py
index 56ba5a91..21fab742 100644
--- a/memberportal/api_admin_tools/views.py
+++ b/memberportal/api_admin_tools/views.py
@@ -801,6 +801,8 @@ def get(self, request, member_id):
                     "cancelAt": s.cancel_at,
                     "cancelAtPeriodEnd": s.cancel_at_period_end,
                     "startDate": s.start_date,
+                    "membershipTier": member.profile.membership_plan.member_tier.get_object(),
+                    "membershipPlan": member.profile.membership_plan.get_object(),
                 }
             else:
                 billing_info["subscription"] = None
diff --git a/memberportal/api_billing/views.py b/memberportal/api_billing/views.py
index a3e537de..b61c6326 100644
--- a/memberportal/api_billing/views.py
+++ b/memberportal/api_billing/views.py
@@ -505,6 +505,8 @@ def get(self, request):
                     "cancelAt": s.cancel_at,
                     "cancelAtPeriodEnd": s.cancel_at_period_end,
                     "startDate": s.start_date,
+                    "membershipTier": request.user.profile.membership_plan.member_tier.get_object(),
+                    "membershipPlan": request.user.profile.membership_plan.get_object(),
                 }
                 return Response({"success": True, "subscription": subscription})
 
diff --git a/src-frontend/src/components/AdminTools/ManageMember.vue b/src-frontend/src/components/AdminTools/ManageMember.vue
index 0c7c9a20..e3db98c7 100644
--- a/src-frontend/src/components/AdminTools/ManageMember.vue
+++ b/src-frontend/src/components/AdminTools/ManageMember.vue
@@ -898,6 +898,12 @@
               >
                 <thead>
                   <tr>
+                    <th class="text-left">
+                      {{ $t(`adminTools.membershipTier`) }}
+                    </th>
+                    <th class="text-left">
+                      {{ $t(`adminTools.billingPlan`) }}
+                    </th>
                     <th class="text-left">
                       {{ $t(`adminTools.billingCycleAnchor`) }}
                     </th>
@@ -905,16 +911,48 @@
                     <th class="text-left">
                       {{ $t(`adminTools.currentPeriodEnd`) }}
                     </th>
-                    <th v-if="billing.subscription.cancelAt" class="text-left">
-                      {{ $t(`adminTools.cancelAt`) }}
-                    </th>
-                    <th v-if="billing.subscription.cancelAt" class="text-left">
-                      {{ $t(`adminTools.cancelAtPeriodEnd`) }}
-                    </th>
+                    <template v-if="billing.subscription.cancelAt">
+                      <th class="text-left">
+                        {{ $t(`adminTools.cancelAt`) }}
+                      </th>
+                      <th class="text-left">
+                        {{ $t(`adminTools.cancelAtPeriodEnd`) }}
+                      </th>
+                    </template>
                   </tr>
                 </thead>
                 <tbody>
                   <tr>
+                    <td class="text-left">
+                      <router-link
+                        :to="{
+                          name: 'manageTier',
+                          params: {
+                            planId: billing.subscription.membershipPlan.id,
+                          },
+                        }"
+                        >{{
+                          billing.subscription.membershipTier.name
+                        }}</router-link
+                      >
+                    </td>
+                    <td class="text-left">
+                      {{
+                        $t('paymentPlans.intervalDescription', {
+                          currency:
+                            billing.subscription.membershipPlan.currency.toUpperCase(),
+                          amount: $n(
+                            billing.subscription.membershipPlan.cost / 100,
+                            'currency',
+                            siteLocaleCurrency
+                          ),
+                          interval: $tc(
+                            `paymentPlans.interval.${billing.subscription.membershipPlan.interval.toLowerCase()}`,
+                            billing.subscription.membershipPlan.intervalAmount
+                          ),
+                        })
+                      }}
+                    </td>
                     <td class="text-left">
                       {{ formatDate(billing.subscription.billingCycleAnchor) }}
                     </td>
@@ -924,12 +962,18 @@
                     <td class="text-left">
                       {{ formatDate(billing.subscription.currentPeriodEnd) }}
                     </td>
-                    <td v-if="billing.subscription.cancelAt" class="text-left">
-                      {{ formatDate(billing.subscription.cancelAt) }}
-                    </td>
-                    <td v-if="billing.subscription.cancelAt" class="text-left">
-                      {{ formatDate(billing.subscription.cancelAtPeriodEnd) }}
-                    </td>
+                    <template v-if="billing.subscription.cancelAt">
+                      <td class="text-left">
+                        {{ formatDate(billing.subscription.cancelAt) }}
+                      </td>
+                      <td class="text-left">
+                        {{
+                          formatBooleanYesNo(
+                            billing.subscription.cancelAtPeriodEnd
+                          )
+                        }}
+                      </td>
+                    </template>
                   </tr>
                 </tbody>
               </q-markup-table>
@@ -1643,13 +1687,13 @@ export default defineComponent({
   max-width: 100%;
 }
 
-a,
-a:visited,
-a:hover,
-a:active {
-  color: inherit;
-  text-decoration: none;
-}
+//a,
+//a:visited,
+//a:hover,
+//a:active {
+//  color: inherit;
+//  text-decoration: none;
+//}
 
 .active {
   color: green;
diff --git a/src-frontend/src/i18n/en-AU/index.ts b/src-frontend/src/i18n/en-AU/index.ts
index 9dc5d374..18658d88 100644
--- a/src-frontend/src/i18n/en-AU/index.ts
+++ b/src-frontend/src/i18n/en-AU/index.ts
@@ -467,6 +467,8 @@ export default {
     cancelAt: 'Cancels At',
     cancelAtPeriodEnd: 'Cancels At Period End',
     currentPeriodEnd: 'Current Period End',
+    membershipTier: 'Membership Tier',
+    billingPlan: 'Billing Plan',
     startDate: 'Start Date',
     noSubscription: 'No subscription was found for this member.',
     noMembers: 'No members were found that match your filter or search query.',
diff --git a/src-frontend/src/types/subscriptions.d.ts b/src-frontend/src/types/subscriptions.d.ts
index c1b4ccbc..00958656 100644
--- a/src-frontend/src/types/subscriptions.d.ts
+++ b/src-frontend/src/types/subscriptions.d.ts
@@ -1,3 +1,20 @@
+interface MemberPlan {
+  id: number;
+  name: string;
+  currency: string;
+  cost: number;
+  intervalAmount: number;
+  interval: string;
+}
+
+interface MemberTier {
+  id: number;
+  name: string;
+  description: string;
+  featured: boolean;
+  plans: MemberPlan[];
+}
+
 interface MemberSubscription {
   billingCycleAnchor: Date;
   cancelAt: Date;
@@ -5,4 +22,6 @@ interface MemberSubscription {
   currentPeriodEnd: Date;
   startDate: Date;
   status: string;
+  membershipPlan: MemberPlan;
+  membershipTier: MemberTier;
 }
diff --git a/src-frontend/tsconfig.json b/src-frontend/tsconfig.json
index e1a1e119..b0365ac3 100644
--- a/src-frontend/tsconfig.json
+++ b/src-frontend/tsconfig.json
@@ -8,7 +8,8 @@
       "@store/*": ["src/store/*"],
       "@mixins/*": ["src/mixins/*"],
       "@assets/*": ["src/assets/*"],
-      "types/*": ["src/types/*"]
+      "types/*": ["src/types/*"],
+      "boot/*": ["src/boot/*"],
     }
   },
   "moduleResolution": "node"

From 830a425999c7d83472c5530ae03c6edf70bf04a4 Mon Sep 17 00:00:00 2001
From: Jaimyn Mayer <hello@jaimyn.dev>
Date: Mon, 24 Jun 2024 19:30:33 +1000
Subject: [PATCH 15/15] Fixed memberlist filter typo

---
 src-frontend/src/components/AdminTools/MembersList.vue | 2 +-
 src-frontend/tsconfig.json                             | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src-frontend/src/components/AdminTools/MembersList.vue b/src-frontend/src/components/AdminTools/MembersList.vue
index c0a13e31..313d4879 100644
--- a/src-frontend/src/components/AdminTools/MembersList.vue
+++ b/src-frontend/src/components/AdminTools/MembersList.vue
@@ -140,7 +140,7 @@ export default defineComponent({
   computed: {
     ...mapGetters('config', ['features']),
     displayMemberList() {
-      if (this.memberState === 'All') return this.members;
+      if (this.memberState === 'all') return this.members;
       return this.members.filter(
         (member: MemberProfile) => member.state === this.memberState
       );
diff --git a/src-frontend/tsconfig.json b/src-frontend/tsconfig.json
index b0365ac3..24c21789 100644
--- a/src-frontend/tsconfig.json
+++ b/src-frontend/tsconfig.json
@@ -9,7 +9,7 @@
       "@mixins/*": ["src/mixins/*"],
       "@assets/*": ["src/assets/*"],
       "types/*": ["src/types/*"],
-      "boot/*": ["src/boot/*"],
+      "boot/*": ["src/boot/*"]
     }
   },
   "moduleResolution": "node"