chore: Repalce message formatter mixin with useMessageFormatter [CW-3470] (#9986)

# Pull Request Template

## Description

Replaced the old messageFormatterMixin with a useMessageFormatter
composable

app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue

@@ -1,6 +1,5 @@
 <script>
 import { mapGetters } from 'vuex';
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import SwitchLayout from './SwitchLayout.vue';
 import { frontendURL } from 'dashboard/helper/URLHelper';
 export default {
@@ -14,7 +13,6 @@ export default {
       },
     },
   },
-  mixins: [messageFormatterMixin],
   props: {
     isOnExpandedLayout: {
       type: Boolean,

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

@@ -1,5 +1,5 @@
 <script>
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 
 import { mapGetters } from 'vuex';
 import { useAccount } from 'dashboard/composables/useAccount';
@@ -7,12 +7,12 @@ import BillingItem from './components/BillingItem.vue';
 
 export default {
   components: { BillingItem },
-  mixins: [messageFormatterMixin],
   setup() {
     const { accountId } = useAccount();
-
+    const { formatMessage } = useMessageFormatter();
     return {
       accountId,
+      formatMessage,
     };
   },
   computed: {

app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue

@@ -1,7 +1,7 @@
 <script>
 import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.vue';
 import InboxName from 'dashboard/components/widgets/InboxName.vue';
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import { messageStamp } from 'shared/helpers/timeHelper';
 
 export default {
@@ -9,7 +9,6 @@ export default {
     UserAvatarWithName,
     InboxName,
   },
-  mixins: [messageFormatterMixin],
   props: {
     campaign: {
       type: Object,
@@ -20,7 +19,12 @@ export default {
       default: true,
     },
   },
-
+  setup() {
+    const { formatMessage } = useMessageFormatter();
+    return {
+      formatMessage,
+    };
+  },
   computed: {
     campaignStatus() {
       if (this.isOngoingType) {

app/javascript/dashboard/routes/dashboard/settings/integrations/Slack.vue

@@ -2,7 +2,6 @@
 import { mapGetters } from 'vuex';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import Integration from './Integration.vue';
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import SelectChannelWarning from './Slack/SelectChannelWarning.vue';
 import SlackIntegrationHelpText from './Slack/SlackIntegrationHelpText.vue';
 import Spinner from 'shared/components/Spinner.vue';
@@ -13,7 +12,7 @@ export default {
     SelectChannelWarning,
     SlackIntegrationHelpText,
   },
-  mixins: [globalConfigMixin, messageFormatterMixin],
+  mixins: [globalConfigMixin],
   props: {
     code: { type: String, default: '' },
   },

app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue

@@ -2,16 +2,22 @@
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 
 export default {
-  mixins: [globalConfigMixin, messageFormatterMixin],
+  mixins: [globalConfigMixin],
   props: {
     hasConnectedAChannel: {
       type: Boolean,
       default: true,
     },
   },
+  setup() {
+    const { formatMessage } = useMessageFormatter();
+    return {
+      formatMessage,
+    };
+  },
   data() {
     return { selectedChannelId: '', availableChannels: [] };
   },

app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SlackIntegrationHelpText.vue

@@ -1,13 +1,18 @@
 <script>
-import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 export default {
-  mixins: [messageFormatterMixin],
   props: {
     selectedChannelName: {
       type: String,
       required: true,
     },
   },
+  setup() {
+    const { formatMessage } = useMessageFormatter();
+    return {
+      formatMessage,
+    };
+  },
 };
 </script>