From c798474f2b1050673ebae319056d9db286d5d02f Mon Sep 17 00:00:00 2001
From: Fayaz Ahmed <fayazara@gmail.com>
Date: Tue, 20 Aug 2024 07:53:21 +0530
Subject: [PATCH] chore: Replace globalConfig Mixin with useGlobalConfig
 Composable

---
 .../widget-preview/components/Widget.vue      |  9 ++++-
 .../helpcenter/pages/portals/NewPortal.vue    |  9 ++++-
 .../dashboard/settings/inbox/ChannelList.vue  |  9 ++++-
 .../settings/inbox/InboxChannels.vue          |  9 ++++-
 .../routes/dashboard/settings/inbox/Index.vue |  5 ++-
 .../settings/inbox/channels/Facebook.vue      |  5 ++-
 .../settings/integrations/Integration.vue     |  9 ++++-
 .../settings/integrations/IntegrationItem.vue |  3 +-
 .../Slack/SelectChannelWarning.vue            | 10 ++++-
 .../settings/integrations/Webhooks/Index.vue  |  9 ++++-
 .../integrations/Webhooks/NewWebHook.vue      |  9 ++++-
 .../dashboard/settings/profile/Index.vue      |  5 ++-
 app/javascript/shared/components/Branding.vue |  9 ++++-
 .../composables/specs/useGlobalConfig.spec.js | 39 +++++++++++++++++++
 .../shared/composables/useGlobalConfig.js     | 18 +++++++++
 .../shared/mixins/globalConfigMixin.js        | 12 ------
 .../v3/views/auth/reset/password/Index.vue    |  6 +--
 app/javascript/v3/views/auth/signup/Index.vue |  9 ++++-
 18 files changed, 142 insertions(+), 42 deletions(-)
 create mode 100644 app/javascript/shared/composables/specs/useGlobalConfig.spec.js
 create mode 100644 app/javascript/shared/composables/useGlobalConfig.js
 delete mode 100644 app/javascript/shared/mixins/globalConfigMixin.js

diff --git a/app/javascript/dashboard/modules/widget-preview/components/Widget.vue b/app/javascript/dashboard/modules/widget-preview/components/Widget.vue
index ce1277c85..81f44a5eb 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/Widget.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/Widget.vue
@@ -3,7 +3,7 @@ import WidgetHead from './WidgetHead.vue';
 import WidgetBody from './WidgetBody.vue';
 import WidgetFooter from './WidgetFooter.vue';
 import InputRadioGroup from 'dashboard/routes/dashboard/settings/inbox/components/InputRadioGroup.vue';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import { useGlobalConfig } from 'shared/composables/useGlobalConfig';
 import { mapGetters } from 'vuex';
 
 export default {
@@ -14,7 +14,6 @@ export default {
     WidgetFooter,
     InputRadioGroup,
   },
-  mixins: [globalConfigMixin],
   props: {
     welcomeHeading: {
       type: String,
@@ -57,6 +56,12 @@ export default {
       default: '',
     },
   },
+  setup() {
+    const { useInstallationName } = useGlobalConfig();
+    return {
+      useInstallationName,
+    };
+  },
   data() {
     return {
       widgetScreens: [
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue
index b656dabb1..7c16a8625 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue
@@ -1,12 +1,17 @@
 <script>
 import { mapGetters } from 'vuex';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import { useGlobalConfig } from 'shared/composables/useGlobalConfig';
 import SettingsHeader from 'dashboard/routes/dashboard/settings/SettingsHeader.vue';
 export default {
   components: {
     SettingsHeader,
   },
-  mixins: [globalConfigMixin],
+  setup() {
+    const { useInstallationName } = useGlobalConfig();
+    return {
+      useInstallationName,
+    };
+  },
   computed: {
     ...mapGetters({
       globalConfig: 'globalConfig/get',
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
index 0cbcc554b..d603f3e16 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
@@ -3,14 +3,19 @@ import ChannelItem from 'dashboard/components/widgets/ChannelItem.vue';
 import router from '../../../index';
 import PageHeader from '../SettingsSubPageHeader.vue';
 import { mapGetters } from 'vuex';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import { useGlobalConfig } from 'shared/composables/useGlobalConfig';
 
 export default {
   components: {
     ChannelItem,
     PageHeader,
   },
-  mixins: [globalConfigMixin],
+  setup() {
+    const { useInstallationName } = useGlobalConfig();
+    return {
+      useInstallationName,
+    };
+  },
   data() {
     return {
       enabledFeatures: {},
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
index bab39f686..f58708826 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
@@ -1,9 +1,14 @@
 <script>
 import { mapGetters } from 'vuex';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import { useGlobalConfig } from 'shared/composables/useGlobalConfig';
 
 export default {
-  mixins: [globalConfigMixin],
+  setup() {
+    const { useInstallationName } = useGlobalConfig();
+    return {
+      useInstallationName,
+    };
+  },
   computed: {
     ...mapGetters({
       globalConfig: 'globalConfig/get',
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
index c7c7a2a44..a21a54e44 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
@@ -4,19 +4,20 @@ import { useAlert } from 'dashboard/composables';
 import { useAdmin } from 'dashboard/composables/useAdmin';
 import { useAccount } from 'dashboard/composables/useAccount';
 import Settings from './Settings.vue';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import { useGlobalConfig } from 'shared/composables/useGlobalConfig';
 
 export default {
   components: {
     Settings,
   },
-  mixins: [globalConfigMixin],
   setup() {
     const { isAdmin } = useAdmin();
     const { accountScopedUrl } = useAccount();
+    const { useInstallationName } = useGlobalConfig();
     return {
       isAdmin,
       accountScopedUrl,
+      useInstallationName,
     };
   },
   data() {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
index 8d3406715..f813f1727 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
@@ -10,7 +10,7 @@ import { mapGetters } from 'vuex';
 import ChannelApi from '../../../../../api/channels';
 import PageHeader from '../../SettingsSubPageHeader.vue';
 import router from '../../../../index';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import { useGlobalConfig } from 'shared/composables/useGlobalConfig';
 
 import { loadScript } from 'dashboard/helper/DOMHelpers';
 import * as Sentry from '@sentry/browser';
@@ -20,10 +20,11 @@ export default {
     LoadingState,
     PageHeader,
   },
-  mixins: [globalConfigMixin],
   setup() {
+    const { useInstallationName } = useGlobalConfig();
     const { accountId } = useAccount();
     return {
+      useInstallationName,
       accountId,
       v$: useVuelidate(),
     };
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
index 6c6f5f5be..6bb55596a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
@@ -2,10 +2,9 @@
 import { mapGetters } from 'vuex';
 import { frontendURL } from '../../../../helper/URLHelper';
 import { useAlert } from 'dashboard/composables';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import { useGlobalConfig } from 'shared/composables/useGlobalConfig';
 
 export default {
-  mixins: [globalConfigMixin],
   props: {
     integrationId: {
       type: [String, Number],
@@ -18,6 +17,12 @@ export default {
     actionButtonText: { type: String, default: '' },
     deleteConfirmationText: { type: Object, default: () => ({}) },
   },
+  setup() {
+    const { useInstallationName } = useGlobalConfig();
+    return {
+      useInstallationName,
+    };
+  },
   data() {
     return {
       showDeleteConfirmationPopup: false,
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationItem.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationItem.vue
index 7162596a2..0cd9189d6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationItem.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { useStoreGetters } from 'dashboard/composables/store';
 import { useI18n } from 'dashboard/composables/useI18n';
 import { frontendURL } from 'dashboard/helper/URLHelper';
-import { useInstallationName } from 'shared/mixins/globalConfigMixin';
+import { useGlobalConfig } from 'shared/composables/useGlobalConfig';
 
 const props = defineProps({
   id: {
@@ -24,6 +24,7 @@ const props = defineProps({
   },
 });
 
+const { useInstallationName } = useGlobalConfig();
 const getters = useStoreGetters();
 const accountId = getters.getCurrentAccountId;
 const globalConfig = getters['globalConfig/get'];
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue
index 00ad15bbf..d3cc2ef62 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Slack/SelectChannelWarning.vue
@@ -1,17 +1,23 @@
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import { useGlobalConfig } from 'shared/composables/useGlobalConfig';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 
 export default {
-  mixins: [globalConfigMixin, messageFormatterMixin],
+  mixins: [messageFormatterMixin],
   props: {
     hasConnectedAChannel: {
       type: Boolean,
       default: true,
     },
   },
+  setup() {
+    const { useInstallationName } = useGlobalConfig();
+    return {
+      useInstallationName,
+    };
+  },
   data() {
     return { selectedChannelId: '', availableChannels: [] };
   },
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
index e9ec855dc..6c589cc4d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
@@ -3,7 +3,7 @@ import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import NewWebhook from './NewWebHook.vue';
 import EditWebhook from './EditWebHook.vue';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import { useGlobalConfig } from 'shared/composables/useGlobalConfig';
 import WebhookRow from './WebhookRow.vue';
 
 export default {
@@ -12,7 +12,12 @@ export default {
     EditWebhook,
     WebhookRow,
   },
-  mixins: [globalConfigMixin],
+  setup() {
+    const { useInstallationName } = useGlobalConfig();
+    return {
+      useInstallationName,
+    };
+  },
   data() {
     return {
       loading: {},
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/NewWebHook.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/NewWebHook.vue
index 43b1d2843..483bbec29 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/NewWebHook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/NewWebHook.vue
@@ -1,18 +1,23 @@
 <script>
 import { useAlert } from 'dashboard/composables';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import { useGlobalConfig } from 'shared/composables/useGlobalConfig';
 import { mapGetters } from 'vuex';
 import WebhookForm from './WebhookForm.vue';
 
 export default {
   components: { WebhookForm },
-  mixins: [globalConfigMixin],
   props: {
     onClose: {
       type: Function,
       required: true,
     },
   },
+  setup() {
+    const { useInstallationName } = useGlobalConfig();
+    return {
+      useInstallationName,
+    };
+  },
   computed: {
     ...mapGetters({
       globalConfig: 'globalConfig/get',
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
index 1f37a1355..67cfd9fb5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
@@ -4,7 +4,7 @@ import { useAlert } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { clearCookiesOnLogout } from 'dashboard/store/utils/api.js';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import { useGlobalConfig } from 'shared/composables/useGlobalConfig';
 import UserProfilePicture from './UserProfilePicture.vue';
 import UserBasicDetails from './UserBasicDetails.vue';
 import MessageSignature from './MessageSignature.vue';
@@ -27,8 +27,8 @@ export default {
     AudioNotifications,
     AccessToken,
   },
-  mixins: [globalConfigMixin],
   setup() {
+    const { useInstallationName } = useGlobalConfig();
     const { uiSettings, updateUISettings, isEditorHotKeyEnabled } =
       useUISettings();
 
@@ -36,6 +36,7 @@ export default {
       uiSettings,
       updateUISettings,
       isEditorHotKeyEnabled,
+      useInstallationName,
     };
   },
   data() {
diff --git a/app/javascript/shared/components/Branding.vue b/app/javascript/shared/components/Branding.vue
index 8034e3506..b0160f484 100644
--- a/app/javascript/shared/components/Branding.vue
+++ b/app/javascript/shared/components/Branding.vue
@@ -1,5 +1,5 @@
 <script>
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import { useGlobalConfig } from 'shared/composables/useGlobalConfig';
 
 const {
   LOGO_THUMBNAIL: logoThumbnail,
@@ -8,13 +8,18 @@ const {
 } = window.globalConfig || {};
 
 export default {
-  mixins: [globalConfigMixin],
   props: {
     disableBranding: {
       type: Boolean,
       default: false,
     },
   },
+  setup() {
+    const { useInstallationName } = useGlobalConfig();
+    return {
+      useInstallationName,
+    };
+  },
   data() {
     return {
       globalConfig: {
diff --git a/app/javascript/shared/composables/specs/useGlobalConfig.spec.js b/app/javascript/shared/composables/specs/useGlobalConfig.spec.js
new file mode 100644
index 000000000..304db96a4
--- /dev/null
+++ b/app/javascript/shared/composables/specs/useGlobalConfig.spec.js
@@ -0,0 +1,39 @@
+import { useGlobalConfig } from '../useGlobalConfig';
+
+describe('useGlobalConfig', () => {
+  it('should return the string with the installation name', () => {
+    const str = 'Chatwoot is awesome';
+    const installationName = 'Acme Inc';
+    const { useInstallationName } = useGlobalConfig();
+    expect(useInstallationName(str, installationName)).toBe(
+      'Acme Inc is awesome'
+    );
+  });
+
+  it('should return the string without the installation name', () => {
+    const str = 'Chatwoot is awesome';
+    const installationName = '';
+    const { useInstallationName } = useGlobalConfig();
+    expect(useInstallationName(str, installationName)).toBe(
+      'Chatwoot is awesome'
+    );
+  });
+
+  it('should handle null installation name properly', () => {
+    const str = 'Chatwoot is super cool';
+    const installationName = null;
+    const { useInstallationName } = useGlobalConfig();
+    expect(useInstallationName(str, installationName)).toBe(
+      'Chatwoot is super cool'
+    );
+  });
+
+  it('should handle undefined installation name properly', () => {
+    const str = 'Chatwoot is super cool';
+    const installationName = undefined;
+    const { useInstallationName } = useGlobalConfig();
+    expect(useInstallationName(str, installationName)).toBe(
+      'Chatwoot is super cool'
+    );
+  });
+});
diff --git a/app/javascript/shared/composables/useGlobalConfig.js b/app/javascript/shared/composables/useGlobalConfig.js
new file mode 100644
index 000000000..7869437a2
--- /dev/null
+++ b/app/javascript/shared/composables/useGlobalConfig.js
@@ -0,0 +1,18 @@
+/*
+ * Composable for  using the installation name in the application.
+ * @param {string} str - The string to be processed.
+ * @param {string} installationName - The installation name.
+ * @returns {string} The processed string with the installation name.
+ */
+
+export const useGlobalConfig = () => {
+  const useInstallationName = (str, installationName) => {
+    if (str && installationName) {
+      return str.replace(/Chatwoot/g, installationName);
+    }
+    return str;
+  };
+  return {
+    useInstallationName,
+  };
+};
diff --git a/app/javascript/shared/mixins/globalConfigMixin.js b/app/javascript/shared/mixins/globalConfigMixin.js
deleted file mode 100644
index 3f0796b59..000000000
--- a/app/javascript/shared/mixins/globalConfigMixin.js
+++ /dev/null
@@ -1,12 +0,0 @@
-export const useInstallationName = (str, installationName) => {
-  if (str && installationName) {
-    return str.replace(/Chatwoot/g, installationName);
-  }
-  return str;
-};
-
-export default {
-  methods: {
-    useInstallationName,
-  },
-};
diff --git a/app/javascript/v3/views/auth/reset/password/Index.vue b/app/javascript/v3/views/auth/reset/password/Index.vue
index c703f3f58..a07f46f5b 100644
--- a/app/javascript/v3/views/auth/reset/password/Index.vue
+++ b/app/javascript/v3/views/auth/reset/password/Index.vue
@@ -3,16 +3,16 @@ import { useVuelidate } from '@vuelidate/core';
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import { required, minLength, email } from '@vuelidate/validators';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import { useGlobalConfig } from 'shared/composables/useGlobalConfig';
 import FormInput from '../../../../components/Form/Input.vue';
 import { resetPassword } from '../../../../api/auth';
 import SubmitButton from '../../../../components/Button/SubmitButton.vue';
 
 export default {
   components: { FormInput, SubmitButton },
-  mixins: [globalConfigMixin],
   setup() {
-    return { v$: useVuelidate() };
+    const { useInstallationName } = useGlobalConfig();
+    return { v$: useVuelidate(), useInstallationName };
   },
   data() {
     return {
diff --git a/app/javascript/v3/views/auth/signup/Index.vue b/app/javascript/v3/views/auth/signup/Index.vue
index 75ae10e9a..09898765d 100644
--- a/app/javascript/v3/views/auth/signup/Index.vue
+++ b/app/javascript/v3/views/auth/signup/Index.vue
@@ -1,6 +1,6 @@
 <script>
 import { mapGetters } from 'vuex';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import { useGlobalConfig } from 'shared/composables/useGlobalConfig';
 import SignupForm from './components/Signup/Form.vue';
 import Testimonials from './components/Testimonials/Index.vue';
 import Spinner from 'shared/components/Spinner.vue';
@@ -11,7 +11,12 @@ export default {
     Spinner,
     Testimonials,
   },
-  mixins: [globalConfigMixin],
+  setup() {
+    const { useInstallationName } = useGlobalConfig();
+    return {
+      useInstallationName,
+    };
+  },
   data() {
     return { isLoading: false };
   },