fix: Installation name not showing (#12096)

app/javascript/shared/components/Branding.vue

@@ -1,5 +1,5 @@
 <script>
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import { useBranding } from 'shared/composables/useBranding';
 
 const {
   LOGO_THUMBNAIL: logoThumbnail,
@@ -8,13 +8,18 @@ const {
 } = window.globalConfig || {};
 
 export default {
-  mixins: [globalConfigMixin],
   props: {
     disableBranding: {
       type: Boolean,
       default: false,
     },
   },
+  setup() {
+    const { replaceInstallationName } = useBranding();
+    return {
+      replaceInstallationName,
+    };
+  },
   data() {
     return {
       globalConfig: {
@@ -61,7 +66,7 @@ export default {
         :src="globalConfig.logoThumbnail"
       />
       <span>
-        {{ useInstallationName($t('POWERED_BY'), globalConfig.brandName) }}
+        {{ replaceInstallationName($t('POWERED_BY')) }}
       </span>
     </a>
   </div>

app/javascript/shared/composables/specs/useBranding.spec.js

@@ -0,0 +1,96 @@
+import { useBranding } from '../useBranding';
+import { useMapGetter } from 'dashboard/composables/store.js';
+
+// Mock the store composable
+vi.mock('dashboard/composables/store.js', () => ({
+  useMapGetter: vi.fn(),
+}));
+
+describe('useBranding', () => {
+  let mockGlobalConfig;
+
+  beforeEach(() => {
+    mockGlobalConfig = {
+      value: {
+        installationName: 'MyCompany',
+      },
+    };
+
+    useMapGetter.mockReturnValue(mockGlobalConfig);
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('replaceInstallationName', () => {
+    it('should replace "Chatwoot" with installation name when both text and installation name are provided', () => {
+      const { replaceInstallationName } = useBranding();
+      const result = replaceInstallationName('Welcome to Chatwoot');
+
+      expect(result).toBe('Welcome to MyCompany');
+    });
+
+    it('should replace multiple occurrences of "Chatwoot"', () => {
+      const { replaceInstallationName } = useBranding();
+      const result = replaceInstallationName(
+        'Chatwoot is great! Use Chatwoot today.'
+      );
+
+      expect(result).toBe('MyCompany is great! Use MyCompany today.');
+    });
+
+    it('should return original text when installation name is not provided', () => {
+      mockGlobalConfig.value = {};
+
+      const { replaceInstallationName } = useBranding();
+      const result = replaceInstallationName('Welcome to Chatwoot');
+
+      expect(result).toBe('Welcome to Chatwoot');
+    });
+
+    it('should return original text when globalConfig is not available', () => {
+      mockGlobalConfig.value = undefined;
+
+      const { replaceInstallationName } = useBranding();
+      const result = replaceInstallationName('Welcome to Chatwoot');
+
+      expect(result).toBe('Welcome to Chatwoot');
+    });
+
+    it('should return original text when text is empty or null', () => {
+      const { replaceInstallationName } = useBranding();
+
+      expect(replaceInstallationName('')).toBe('');
+      expect(replaceInstallationName(null)).toBe(null);
+      expect(replaceInstallationName(undefined)).toBe(undefined);
+    });
+
+    it('should handle text without "Chatwoot" gracefully', () => {
+      const { replaceInstallationName } = useBranding();
+      const result = replaceInstallationName('Welcome to our platform');
+
+      expect(result).toBe('Welcome to our platform');
+    });
+
+    it('should be case-sensitive for "Chatwoot"', () => {
+      const { replaceInstallationName } = useBranding();
+      const result = replaceInstallationName(
+        'Welcome to chatwoot and CHATWOOT'
+      );
+
+      expect(result).toBe('Welcome to chatwoot and CHATWOOT');
+    });
+
+    it('should handle special characters in installation name', () => {
+      mockGlobalConfig.value = {
+        installationName: 'My-Company & Co.',
+      };
+
+      const { replaceInstallationName } = useBranding();
+      const result = replaceInstallationName('Welcome to Chatwoot');
+
+      expect(result).toBe('Welcome to My-Company & Co.');
+    });
+  });
+});

app/javascript/shared/composables/useBranding.js

@@ -0,0 +1,26 @@
+/**
+ * Composable for branding-related utilities
+ * Provides methods to customize text with installation-specific branding
+ */
+import { useMapGetter } from 'dashboard/composables/store.js';
+
+export function useBranding() {
+  const globalConfig = useMapGetter('globalConfig/get');
+  /**
+   * Replaces "Chatwoot" in text with the installation name from global config
+   * @param {string} text - The text to process
+   * @returns {string} - Text with "Chatwoot" replaced by installation name
+   */
+  const replaceInstallationName = text => {
+    if (!text) return text;
+
+    const installationName = globalConfig.value?.installationName;
+    if (!installationName) return text;
+
+    return text.replace(/Chatwoot/g, installationName);
+  };
+
+  return {
+    replaceInstallationName,
+  };
+}

app/javascript/shared/mixins/globalConfigMixin.js

@@ -1,12 +0,0 @@
-export const useInstallationName = (str, installationName) => {
-  if (str && installationName) {
-    return str.replace(/Chatwoot/g, installationName);
-  }
-  return str;
-};
-
-export default {
-  methods: {
-    useInstallationName,
-  },
-};