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] 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>