feat: Rewrite accountMixin to a composable (#9914)

app/javascript/dashboard/components/app/PaymentPendingBanner.vue

@@ -1,8 +1,8 @@
 <script>
 import { mapGetters } from 'vuex';
 import { useAdmin } from 'dashboard/composables/useAdmin';
+import { useAccount } from 'dashboard/composables/useAccount';
 import Banner from 'dashboard/components/ui/Banner.vue';
-import accountMixin from 'dashboard/mixins/account';
 
 const EMPTY_SUBSCRIPTION_INFO = {
   status: null,
@@ -11,10 +11,13 @@ const EMPTY_SUBSCRIPTION_INFO = {
 
 export default {
   components: { Banner },
-  mixins: [accountMixin],
   setup() {
     const { isAdmin } = useAdmin();
+
+    const { accountId } = useAccount();
+
     return {
+      accountId,
       isAdmin,
     };
   },

app/javascript/dashboard/components/app/PendingEmailVerificationBanner.vue

@@ -1,12 +1,10 @@
 <script>
 import Banner from 'dashboard/components/ui/Banner.vue';
 import { mapGetters } from 'vuex';
-import accountMixin from 'dashboard/mixins/account';
 import { useAlert } from 'dashboard/composables';
 
 export default {
   components: { Banner },
-  mixins: [accountMixin],
   computed: {
     ...mapGetters({
       currentUser: 'getCurrentUser',

app/javascript/dashboard/components/app/UpgradeBanner.vue

@@ -1,12 +1,17 @@
 <script>
 import Banner from 'dashboard/components/ui/Banner.vue';
 import { mapGetters } from 'vuex';
-import accountMixin from 'dashboard/mixins/account';
+import { useAccount } from 'dashboard/composables/useAccount';
 import { differenceInDays } from 'date-fns';
 
 export default {
   components: { Banner },
-  mixins: [accountMixin],
+  setup() {
+    const { accountId } = useAccount();
+    return {
+      accountId,
+    };
+  },
   data() {
     return { conversationMeta: {} };
   },

app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyState.vue

@@ -1,7 +1,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import { useAdmin } from 'dashboard/composables/useAdmin';
-import accountMixin from 'dashboard/mixins/account';
+import { useAccount } from 'dashboard/composables/useAccount';
 import OnboardingView from '../OnboardingView.vue';
 import EmptyStateMessage from './EmptyStateMessage.vue';
 
@@ -10,7 +10,6 @@ export default {
     OnboardingView,
     EmptyStateMessage,
   },
-  mixins: [accountMixin],
   props: {
     isOnExpandedLayout: {
       type: Boolean,
@@ -19,8 +18,12 @@ export default {
   },
   setup() {
     const { isAdmin } = useAdmin();
+
+    const { accountScopedUrl } = useAccount();
+
     return {
       isAdmin,
+      accountScopedUrl,
     };
   },
   computed: {
@@ -44,7 +47,7 @@ export default {
       return this.$t('CONVERSATION.404');
     },
     newInboxURL() {
-      return this.addAccountScoping('settings/inboxes/new');
+      return this.accountScopedUrl('settings/inboxes/new');
     },
     emptyClassName() {
       if (

app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue

@@ -1,19 +1,24 @@
 <script>
 import { mapGetters } from 'vuex';
-import accountMixin from '../../../mixins/account';
+import { useAccount } from 'dashboard/composables/useAccount';
 
 export default {
-  mixins: [accountMixin],
+  setup() {
+    const { accountScopedUrl } = useAccount();
+    return {
+      accountScopedUrl,
+    };
+  },
   computed: {
     ...mapGetters({ globalConfig: 'globalConfig/get' }),
     newInboxURL() {
-      return this.addAccountScoping('settings/inboxes/new');
+      return this.accountScopedUrl('settings/inboxes/new');
     },
     newAgentURL() {
-      return this.addAccountScoping('settings/agents/list');
+      return this.accountScopedUrl('settings/agents/list');
     },
     newLabelsURL() {
-      return this.addAccountScoping('settings/labels/list');
+      return this.accountScopedUrl('settings/labels/list');
     },
   },
 };