diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue index 4849628e6..bbd0d9000 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue @@ -115,7 +115,7 @@ export default { tabs() { let visibleToAllChannelTabs = [ { - key: 'inbox_settings', + key: 'inbox-settings', name: this.$t('INBOX_MGMT.TABS.SETTINGS'), }, { @@ -128,7 +128,7 @@ export default { visibleToAllChannelTabs = [ ...visibleToAllChannelTabs, { - key: 'businesshours', + key: 'business-hours', name: this.$t('INBOX_MGMT.TABS.BUSINESS_HOURS'), }, { @@ -142,11 +142,11 @@ export default { visibleToAllChannelTabs = [ ...visibleToAllChannelTabs, { - key: 'preChatForm', + key: 'pre-chat-form', name: this.$t('INBOX_MGMT.TABS.PRE_CHAT_FORM'), }, { - key: 'widgetBuilder', + key: 'widget-builder', name: this.$t('INBOX_MGMT.TABS.WIDGET_BUILDER'), }, ]; @@ -176,7 +176,7 @@ export default { visibleToAllChannelTabs = [ ...visibleToAllChannelTabs, { - key: 'botConfiguration', + key: 'bot-configuration', name: this.$t('INBOX_MGMT.TABS.BOT_CONFIGURATION'), }, ]; @@ -185,7 +185,7 @@ export default { visibleToAllChannelTabs = [ ...visibleToAllChannelTabs, { - key: 'whatsappHealth', + key: 'whatsapp-health', name: this.$t('INBOX_MGMT.TABS.ACCOUNT_HEALTH'), }, ]; @@ -355,19 +355,39 @@ export default { return [...selected, current]; }, refreshAvatarUrlOnTabChange(index) { - // Refresh avatar URL on tab change from inbox_settings and widgetBuilder tabs, to ensure real-time updates + // Refresh avatar URL on tab change from inbox-settings and widget-builder tabs, to ensure real-time updates if ( this.inbox && - ['inbox_settings', 'widgetBuilder'].includes(this.tabs[index].key) + ['inbox-settings', 'widget-builder'].includes(this.tabs[index].key) ) this.avatarUrl = this.inbox.avatar_url; }, onTabChange(selectedTabIndex) { this.selectedTabIndex = selectedTabIndex; this.refreshAvatarUrlOnTabChange(selectedTabIndex); + this.updateRouteWithoutRefresh(selectedTabIndex); + }, + updateRouteWithoutRefresh(selectedTabIndex) { + const tab = this.tabs[selectedTabIndex]; + if (!tab) return; + + const { accountId, inboxId } = this.$route.params; + const baseUrl = `/app/accounts/${accountId}/settings/inboxes/${inboxId}`; + + // Append the tab key only if it's not the default. + const newUrl = + tab.key === 'inbox-settings' ? baseUrl : `${baseUrl}/${tab.key}`; + // Update URL without triggering route watcher + window.history.replaceState(null, '', newUrl); + }, + setTabFromRouteParam() { + const { tab: tabParam } = this.$route.params; + if (!tabParam) return; + const tabIndex = this.tabs.findIndex(tab => tab.key === tabParam); + + this.selectedTabIndex = tabIndex === -1 ? 0 : tabIndex; }, fetchInboxSettings() { - this.selectedTabIndex = 0; this.selectedAgents = []; this.$store.dispatch('agents/get'); this.$store.dispatch('teams/get'); @@ -393,6 +413,9 @@ export default { this.selectedPortalSlug = this.inbox.help_center ? this.inbox.help_center.slug : ''; + + // Set initial tab after inbox data is loaded + this.setTabFromRouteParam(); }); }, async updateInbox() { @@ -513,7 +536,7 @@ export default { :content="$t('INBOX_MGMT.ADD.INSTAGRAM.DUPLICATE_INBOX_BANNER')" class="mx-8 mt-5" /> -