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');
     },
   },
 };

app/javascript/dashboard/composables/spec/useAccount.spec.js

@@ -0,0 +1,37 @@
+import { ref } from 'vue';
+import { describe, it, expect, vi } from 'vitest';
+import { useAccount } from '../useAccount';
+import { useStoreGetters } from 'dashboard/composables/store';
+
+vi.mock('dashboard/composables/store');
+
+describe('useAccount', () => {
+  beforeEach(() => {
+    useStoreGetters.mockReturnValue({
+      getCurrentAccountId: ref(123),
+    });
+  });
+
+  it('returns accountId as a computed property', () => {
+    const { accountId } = useAccount();
+    expect(accountId.value).toBe(123);
+  });
+
+  it('generates account-scoped URLs correctly', () => {
+    const { accountScopedUrl } = useAccount();
+    const result = accountScopedUrl('settings/inbox/new');
+    expect(result).toBe('/app/accounts/123/settings/inbox/new');
+  });
+
+  it('handles URLs with leading slash', () => {
+    const { accountScopedUrl } = useAccount();
+    const result = accountScopedUrl('users');
+    expect(result).toBe('/app/accounts/123/users');
+  });
+
+  it('handles empty URL', () => {
+    const { accountScopedUrl } = useAccount();
+    const result = accountScopedUrl('');
+    expect(result).toBe('/app/accounts/123/');
+  });
+});

app/javascript/dashboard/composables/useAccount.js

@@ -0,0 +1,30 @@
+import { computed } from 'vue';
+import { useStoreGetters } from 'dashboard/composables/store';
+
+/**
+ * Composable for account-related operations.
+ * @returns {Object} An object containing account-related properties and methods.
+ */
+export function useAccount() {
+  const getters = useStoreGetters();
+
+  /**
+   * Computed property for the current account ID.
+   * @type {import('vue').ComputedRef<number>}
+   */
+  const accountId = computed(() => getters.getCurrentAccountId.value);
+
+  /**
+   * Generates an account-scoped URL.
+   * @param {string} url - The URL to be scoped to the account.
+   * @returns {string} The account-scoped URL.
+   */
+  const accountScopedUrl = url => {
+    return `/app/accounts/${accountId.value}/${url}`;
+  };
+
+  return {
+    accountId,
+    accountScopedUrl,
+  };
+}

app/javascript/dashboard/mixins/account.js

@@ -1,14 +0,0 @@
-import { mapGetters } from 'vuex';
-
-export default {
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-    }),
-  },
-  methods: {
-    addAccountScoping(url) {
-      return `/app/accounts/${this.accountId}/${url}`;
-    },
-  },
-};

app/javascript/dashboard/mixins/specs/account.spec.js

@@ -1,42 +0,0 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import accountMixin from '../account';
-import Vuex from 'vuex';
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-describe('accountMixin', () => {
-  let getters;
-  let store;
-
-  beforeEach(() => {
-    getters = {
-      getCurrentAccountId: () => 1,
-    };
-
-    store = new Vuex.Store({ getters });
-  });
-
-  it('set accountId properly', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [accountMixin],
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.accountId).toBe(1);
-  });
-
-  it('returns current url', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [accountMixin],
-    };
-
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(wrapper.vm.addAccountScoping('settings/inboxes/new')).toBe(
-      '/app/accounts/1/settings/inboxes/new'
-    );
-  });
-});

app/javascript/dashboard/routes/dashboard/conversation/Macros/List.vue

@@ -1,19 +1,25 @@
 <script>
 import { mapGetters } from 'vuex';
+import { useAccount } from 'dashboard/composables/useAccount';
 import MacroItem from './MacroItem.vue';
-import accountMixin from 'dashboard/mixins/account.js';
 
 export default {
   components: {
     MacroItem,
   },
-  mixins: [accountMixin],
   props: {
     conversationId: {
       type: [Number, String],
       required: true,
     },
   },
+  setup() {
+    const { accountScopedUrl } = useAccount();
+
+    return {
+      accountScopedUrl,
+    };
+  },
   computed: {
     ...mapGetters({
       macros: ['macros/getMacros'],
@@ -32,10 +38,10 @@ export default {
       v-if="!uiFlags.isFetching && !macros.length"
       class="macros_list--empty-state"
     >
-      <p class="flex h-full items-center flex-col justify-center">
+      <p class="flex flex-col items-center justify-center h-full">
         {{ $t('MACROS.LIST.404') }}
       </p>
-      <router-link :to="addAccountScoping('settings/macros')">
+      <router-link :to="accountScopedUrl('settings/macros')">
         <woot-button
           variant="smooth"
           icon="add"

app/javascript/dashboard/routes/dashboard/settings/account/Index.vue

@@ -5,13 +5,12 @@ import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import configMixin from 'shared/mixins/configMixin';
-import accountMixin from '../../../../mixins/account';
 import { FEATURE_FLAGS } from '../../../../featureFlags';
 import semver from 'semver';
 import { getLanguageDirection } from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
 
 export default {
-  mixins: [accountMixin, configMixin],
+  mixins: [configMixin],
   setup() {
     const { updateUISettings } = useUISettings();
     const v$ = useVuelidate();

app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue

@@ -2,12 +2,19 @@
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 
 import { mapGetters } from 'vuex';
-import accountMixin from '../../../../mixins/account';
+import { useAccount } from 'dashboard/composables/useAccount';
 import BillingItem from './components/BillingItem.vue';
-// sdds
+
 export default {
   components: { BillingItem },
-  mixins: [accountMixin, messageFormatterMixin],
+  mixins: [messageFormatterMixin],
+  setup() {
+    const { accountId } = useAccount();
+
+    return {
+      accountId,
+    };
+  },
   computed: {
     ...mapGetters({
       getAccount: 'accounts/getAccount',

app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue

@@ -2,19 +2,21 @@
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import { useAdmin } from 'dashboard/composables/useAdmin';
+import { useAccount } from 'dashboard/composables/useAccount';
 import Settings from './Settings.vue';
-import accountMixin from '../../../../mixins/account';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 
 export default {
   components: {
     Settings,
   },
-  mixins: [accountMixin, globalConfigMixin],
+  mixins: [globalConfigMixin],
   setup() {
     const { isAdmin } = useAdmin();
+    const { accountScopedUrl } = useAccount();
     return {
       isAdmin,
+      accountScopedUrl,
     };
   },
   data() {
@@ -102,7 +104,7 @@ export default {
           {{ $t('INBOX_MGMT.LIST.404') }}
           <router-link
             v-if="isAdmin"
-            :to="addAccountScoping('settings/inboxes/new')"
+            :to="accountScopedUrl('settings/inboxes/new')"
           >
             {{ $t('SETTINGS.INBOXES.NEW_INBOX') }}
           </router-link>
@@ -164,7 +166,7 @@ export default {
               <td>
                 <div class="button-wrapper">
                   <router-link
-                    :to="addAccountScoping(`settings/inboxes/${item.id}`)"
+                    :to="accountScopedUrl(`settings/inboxes/${item.id}`)"
                   >
                     <woot-button
                       v-if="isAdmin"

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue

@@ -3,6 +3,7 @@
 /* global FB */
 import { useVuelidate } from '@vuelidate/core';
 import { useAlert } from 'dashboard/composables';
+import { useAccount } from 'dashboard/composables/useAccount';
 import { required } from '@vuelidate/validators';
 import LoadingState from 'dashboard/components/widgets/LoadingState.vue';
 import { mapGetters } from 'vuex';
@@ -10,7 +11,6 @@ import ChannelApi from '../../../../../api/channels';
 import PageHeader from '../../SettingsSubPageHeader.vue';
 import router from '../../../../index';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import accountMixin from '../../../../../mixins/account';
 
 import { loadScript } from 'dashboard/helper/DOMHelpers';
 import * as Sentry from '@sentry/browser';
@@ -20,9 +20,13 @@ export default {
     LoadingState,
     PageHeader,
   },
-  mixins: [globalConfigMixin, accountMixin],
+  mixins: [globalConfigMixin],
   setup() {
-    return { v$: useVuelidate() };
+    const { accountId } = useAccount();
+    return {
+      accountId,
+      v$: useVuelidate(),
+    };
   },
   data() {
     return {

app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue

@@ -1,13 +1,18 @@
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
-import accountMixin from 'dashboard/mixins/account.js';
+import { useAccount } from 'dashboard/composables/useAccount';
 import MacrosTableRow from './MacrosTableRow.vue';
 export default {
   components: {
     MacrosTableRow,
   },
-  mixins: [accountMixin],
+  setup() {
+    const { accountScopedUrl } = useAccount();
+    return {
+      accountScopedUrl,
+    };
+  },
   data() {
     return {
       showDeleteConfirmationPopup: false,
@@ -56,7 +61,7 @@ export default {
 <template>
   <div class="flex-1 overflow-auto">
     <router-link
-      :to="addAccountScoping('settings/macros/new')"
+      :to="accountScopedUrl('settings/macros/new')"
       class="button success button--fixed-top button success button--fixed-top px-3.5 py-1 rounded-[5px] flex gap-2"
     >
       <fluent-icon icon="add-circle" />
@@ -67,7 +72,7 @@ export default {
     <div class="flex flex-row gap-4 p-8">
       <div class="w-full lg:w-3/5">
         <div v-if="!uiFlags.isFetching && !records.length" class="p-3">
-          <p class="flex h-full items-center flex-col justify-center">
+          <p class="flex flex-col items-center justify-center h-full">
             {{ $t('MACROS.LIST.404') }}
           </p>
         </div>
@@ -94,7 +99,7 @@ export default {
           </tbody>
         </table>
       </div>
-      <div class="hidden lg:block w-1/3">
+      <div class="hidden w-1/3 lg:block">
         <span v-dompurify-html="$t('MACROS.SIDEBAR_TXT')" />
       </div>
     </div>

app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue

@@ -1,17 +1,23 @@
 <script>
+import { useAccount } from 'dashboard/composables/useAccount';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import accountMixin from 'dashboard/mixins/account.js';
 export default {
   components: {
     Thumbnail,
   },
-  mixins: [accountMixin],
   props: {
     macro: {
       type: Object,
       required: true,
     },
   },
+  setup() {
+    const { accountScopedUrl } = useAccount();
+
+    return {
+      accountScopedUrl,
+    };
+  },
   computed: {
     createdByName() {
       const createdBy = this.macro.created_by;
@@ -47,7 +53,7 @@ export default {
     </td>
     <td>{{ visibilityLabel }}</td>
     <td class="button-wrapper">
-      <router-link :to="addAccountScoping(`settings/macros/${macro.id}/edit`)">
+      <router-link :to="accountScopedUrl(`settings/macros/${macro.id}/edit`)">
         <woot-button
           v-tooltip.top="$t('MACROS.EDIT.TOOLTIP')"
           variant="smooth"