From 867bcaf744cd1a63730bdb2f085f9a24a2688f75 Mon Sep 17 00:00:00 2001
From: Tanmay Deep Sharma <tanmaydeepsharma21@gmail.com>
Date: Wed, 22 Apr 2026 11:25:43 +0700
Subject: [PATCH] refactor(mfa): address review feedback on low-backup-codes
 banner

- use useMapGetter for current account id
- drop onBeforeUnmount cleanup; banner lives in the persistent app shell
- switch pluralization to the {n} convention used across en.json
---
 .../components/app/LowBackupCodesBanner.vue     | 17 ++++-------------
 .../dashboard/i18n/locale/en/mfa.json           |  2 +-
 2 files changed, 5 insertions(+), 14 deletions(-)

diff --git a/app/javascript/dashboard/components/app/LowBackupCodesBanner.vue b/app/javascript/dashboard/components/app/LowBackupCodesBanner.vue
index 5c84153d5..a51024abd 100644
--- a/app/javascript/dashboard/components/app/LowBackupCodesBanner.vue
+++ b/app/javascript/dashboard/components/app/LowBackupCodesBanner.vue
@@ -1,24 +1,23 @@
 <script setup>
-import { computed, onMounted, onBeforeUnmount, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';
 import { useRouter } from 'vue-router';
 import { parseBoolean } from '@chatwoot/utils';
 import Banner from 'dashboard/components/ui/Banner.vue';
 import mfaAPI from 'dashboard/api/mfa';
+import { useMapGetter } from 'dashboard/composables/store';
 import { emitter } from 'shared/helpers/mitt';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 
 const LOW_BACKUP_CODES_THRESHOLD = 3;
 
 const { t } = useI18n();
-const store = useStore();
 const router = useRouter();
 
 const mfaEnabled = ref(false);
 const remainingBackupCodes = ref(null);
 
-const currentAccountId = computed(() => store.getters.getCurrentAccountId);
+const currentAccountId = useMapGetter('getCurrentAccountId');
 
 const shouldShowBanner = computed(() => {
   if (!mfaEnabled.value) return false;
@@ -34,11 +33,7 @@ const bannerMessage = computed(() => {
   if (remainingBackupCodes.value === 0) {
     return t('MFA_SETTINGS.LOW_BACKUP_CODES.NONE_LEFT');
   }
-  return t(
-    'MFA_SETTINGS.LOW_BACKUP_CODES.MESSAGE',
-    { count: remainingBackupCodes.value },
-    remainingBackupCodes.value
-  );
+  return t('MFA_SETTINGS.LOW_BACKUP_CODES.MESSAGE', remainingBackupCodes.value);
 });
 
 const fetchMfaStatus = async () => {
@@ -64,10 +59,6 @@ onMounted(() => {
   fetchMfaStatus();
   emitter.on(BUS_EVENTS.MFA_STATE_CHANGED, fetchMfaStatus);
 });
-
-onBeforeUnmount(() => {
-  emitter.off(BUS_EVENTS.MFA_STATE_CHANGED, fetchMfaStatus);
-});
 </script>
 
 <!-- eslint-disable-next-line vue/no-root-v-if -->
diff --git a/app/javascript/dashboard/i18n/locale/en/mfa.json b/app/javascript/dashboard/i18n/locale/en/mfa.json
index aff04db85..f6091891c 100644
--- a/app/javascript/dashboard/i18n/locale/en/mfa.json
+++ b/app/javascript/dashboard/i18n/locale/en/mfa.json
@@ -50,7 +50,7 @@
       "DISABLE_BUTTON": "Disable Two-Factor Authentication"
     },
     "LOW_BACKUP_CODES": {
-      "MESSAGE": "You have {count} backup code remaining. Generate new codes to avoid getting locked out if you lose access to your authenticator. | You have {count} backup codes remaining. Generate new codes to avoid getting locked out if you lose access to your authenticator.",
+      "MESSAGE": "You have {n} backup code remaining. Generate new codes to avoid getting locked out if you lose access to your authenticator. | You have {n} backup codes remaining. Generate new codes to avoid getting locked out if you lose access to your authenticator.",
       "NONE_LEFT": "You have no backup codes remaining. Generate new codes now to avoid getting locked out if you lose access to your authenticator.",
       "ACTION": "Generate codes"
     },