chore: Add tab params for inbox configuration (#12665)

# Pull Request Template

## Description

This PR enables active tabs in inbox settings to persist in the URL for
easy sharing.

## Type of change

- [x] New feature (non-breaking change which adds functionality)

## How Has This Been Tested?

### Loom video

https://www.loom.com/share/63820ecb17ea491a9082339f8bb457b6?sid=4fef1acd-b4fd-431f-855c-7647015a330f


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] 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

---------

Co-authored-by: Muhsin <muhsinkeramam@gmail.com>

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"
       />
-      <div v-if="selectedTabKey === 'inbox_settings'" class="mx-8">
+      <div v-if="selectedTabKey === 'inbox-settings'" class="mx-8">
         <SettingsSection
           :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_TITLE')"
           :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_SUB_TEXT')"
@@ -905,19 +928,19 @@ export default {
       <div v-if="selectedTabKey === 'csat'">
         <CustomerSatisfactionPage :inbox="inbox" />
       </div>
-      <div v-if="selectedTabKey === 'preChatForm'">
+      <div v-if="selectedTabKey === 'pre-chat-form'">
         <PreChatFormSettings :inbox="inbox" />
       </div>
-      <div v-if="selectedTabKey === 'businesshours'">
+      <div v-if="selectedTabKey === 'business-hours'">
         <WeeklyAvailability :inbox="inbox" />
       </div>
-      <div v-if="selectedTabKey === 'widgetBuilder'">
+      <div v-if="selectedTabKey === 'widget-builder'">
         <WidgetBuilder :inbox="inbox" />
       </div>
-      <div v-if="selectedTabKey === 'botConfiguration'">
+      <div v-if="selectedTabKey === 'bot-configuration'">
         <BotConfiguration :inbox="inbox" />
       </div>
-      <div v-if="selectedTabKey === 'whatsappHealth'">
+      <div v-if="selectedTabKey === 'whatsapp-health'">
         <AccountHealth :health-data="healthData" />
       </div>
     </section>

app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js

@@ -94,7 +94,7 @@ export default {
           ],
         },
         {
-          path: ':inboxId',
+          path: ':inboxId/:tab?',
           name: 'settings_inbox_show',
           component: Settings,
           meta: {