From eed1825d5a3b21d9a2e1b0e829a93a10e2d974e0 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 13 Nov 2025 22:16:25 +0530
Subject: [PATCH] fix: Brand installation name not showing (#12861)

# Pull Request Template

## Description

Fixes
https://linear.app/chatwoot/issue/CW-5946/fix-brand-installation-name-issue-in-dyte

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
---
 .../routes/dashboard/settings/integrations/NewHook.vue      | 6 ++++--
 .../settings/integrations/SingleIntegrationHooks.vue        | 5 ++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue
index 5fe350215..1a4d36fee 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue
@@ -4,6 +4,7 @@ import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import { useIntegrationHook } from 'dashboard/composables/useIntegrationHook';
 import { FormKit } from '@formkit/vue';
+import { useBranding } from 'shared/composables/useBranding';
 
 import NextButton from 'dashboard/components-next/button/Button.vue';
 
@@ -23,8 +24,9 @@ export default {
     const { integration, isHookTypeInbox } = useIntegrationHook(
       props.integrationId
     );
+    const { replaceInstallationName } = useBranding();
 
-    return { integration, isHookTypeInbox };
+    return { integration, isHookTypeInbox, replaceInstallationName };
   },
   data() {
     return {
@@ -117,7 +119,7 @@ export default {
   <div class="flex flex-col h-auto overflow-auto integration-hooks">
     <woot-modal-header
       :header-title="integration.name"
-      :header-content="integration.short_description"
+      :header-content="replaceInstallationName(integration.short_description)"
     />
     <FormKit
       v-model="values"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
index a1bd609cd..f32926d79 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { defineProps, defineEmits } from 'vue';
 import { useIntegrationHook } from 'dashboard/composables/useIntegrationHook';
+import { useBranding } from 'shared/composables/useBranding';
 import Button from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
@@ -15,6 +16,8 @@ defineEmits(['add', 'delete']);
 const { integration, hasConnectedHooks } = useIntegrationHook(
   props.integrationId
 );
+
+const { replaceInstallationName } = useBranding();
 </script>
 
 <template>
@@ -37,7 +40,7 @@ const { integration, hasConnectedHooks } = useIntegrationHook(
           {{ integration.name }}
         </h3>
         <p class="text-n-slate-11 text-sm leading-6">
-          {{ integration.description }}
+          {{ replaceInstallationName(integration.description) }}
         </p>
       </div>
       <div class="flex justify-center items-center mb-0 w-[15%]">