fix: apply installation name to sender name preview (#15076)

app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Avatar from 'next/avatar/Avatar.vue';
 import RadioCard from 'dashboard/components-next/radioCard/RadioCard.vue';
+import { useBranding } from 'shared/composables/useBranding';
 
 const props = defineProps({
   senderNameType: {
@@ -22,6 +23,7 @@ const props = defineProps({
 const emit = defineEmits(['update']);
 
 const { t } = useI18n();
+const { replaceInstallationName } = useBranding();
 
 const senderNameKeyOptions = computed(() => [
   {
@@ -30,7 +32,7 @@ const senderNameKeyOptions = computed(() => [
     content: t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.FRIENDLY.SUBTITLE'),
     preview: {
       senderName: 'Smith',
-      businessName: 'Chatwoot',
+      businessName: replaceInstallationName('Chatwoot'),
       email: '<support@yourbusiness.com>',
     },
   },
@@ -40,7 +42,7 @@ const senderNameKeyOptions = computed(() => [
     content: t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.PROFESSIONAL.SUBTITLE'),
     preview: {
       senderName: '',
-      businessName: 'Chatwoot',
+      businessName: replaceInstallationName('Chatwoot'),
       email: '<support@yourbusiness.com>',
     },
   },
@@ -51,7 +53,7 @@ const isKeyOptionFriendly = key => key === 'friendly';
 const userName = keyOption =>
   isKeyOptionFriendly(keyOption.key)
     ? keyOption.preview.senderName
-    : keyOption.preview.businessName;
+    : props.businessName || keyOption.preview.businessName;
 
 const toggleSenderNameType = key => {
   emit('update', key);

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

@@ -73,13 +73,13 @@ describe('useBranding', () => {
       expect(result).toBe('Welcome to our platform');
     });
 
-    it('should be case-sensitive for "Chatwoot"', () => {
+    it('should replace "Chatwoot" regardless of casing', () => {
       const { replaceInstallationName } = useBranding();
       const result = replaceInstallationName(
-        'Welcome to chatwoot and CHATWOOT'
+        'Welcome to chatwoot, Chatwoot and CHATWOOT'
       );
 
-      expect(result).toBe('Welcome to chatwoot and CHATWOOT');
+      expect(result).toBe('Welcome to MyCompany, MyCompany and MyCompany');
     });
 
     it('should handle special characters in installation name', () => {

app/javascript/shared/composables/useBranding.js

@@ -7,7 +7,8 @@ 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
+   * Replaces "Chatwoot" (any casing) 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
    */
@@ -17,7 +18,7 @@ export function useBranding() {
     const installationName = globalConfig.value?.installationName;
     if (!installationName) return text;
 
-    return text.replace(/Chatwoot/g, installationName);
+    return text.replace(/chatwoot/gi, installationName);
   };
 
   return {