Merge branch 'develop' into fix-signup-captcha

app/javascript/dashboard/components/ui/Dropdown/DropdownButton.vue

@@ -23,6 +23,7 @@ defineProps({
     slate
     sm
     class="relative"
+    no-animation
     :icon="icon"
     :trailing-icon="trailingIcon"
   >

app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue

@@ -197,7 +197,7 @@ onMounted(() => {
           v-if="shouldShowWhatsAppWebhookDetails"
           class="w-[50%] max-w-[50%] ml-[25%]"
         >
-          <p class="mt-8 font-medium text-slate-700 dark:text-slate-200">
+          <p class="mt-8 font-medium text-n-slate-11">
             {{ $t('INBOX_MGMT.ADD.WHATSAPP.API_CALLBACK.WEBHOOK_URL') }}
           </p>
           <woot-code lang="html" :script="currentInbox.callback_webhook_url" />

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue

@@ -73,10 +73,10 @@ const handleManualLinkClick = () => {
   <div class="overflow-auto col-span-6 p-6 w-full h-full">
     <div v-if="showProviderSelection">
       <div class="mb-10 text-left">
-        <h1 class="mb-2 text-lg font-medium text-slate-12">
+        <h1 class="mb-2 text-lg font-medium text-n-slate-12">
           {{ $t('INBOX_MGMT.ADD.WHATSAPP.SELECT_PROVIDER.TITLE') }}
         </h1>
-        <p class="text-sm leading-relaxed text-slate-11">
+        <p class="text-sm leading-relaxed text-n-slate-11">
           {{ $t('INBOX_MGMT.ADD.WHATSAPP.SELECT_PROVIDER.DESCRIPTION') }}
         </p>
       </div>

app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue

@@ -322,7 +322,7 @@ export default {
           "
         >
           <div class="flex gap-4 items-center">
-            <p class="text-sm text-slate-600">
+            <p class="text-sm text-n-slate-11">
               {{
                 $t(
                   'INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_EMBEDDED_SIGNUP_DESCRIPTION'

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"

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%]">