From 80c94340698d7465bd27897616359d5eff3162f3 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Sat, 26 Oct 2024 01:31:29 +0530
Subject: [PATCH] feat(v4): Auto-navigate to first menu item on group menu
 open(#10350)

Ensures users are seamlessly directed to the first available menu item upon opening a group, improving UX by reducing unnecessary clicks. This change enhances navigation flow within groups.

Co-authored-by: Pranav <pranavrajs@gmail.com>
---
 .../components-next/sidebar/SidebarGroup.vue  | 26 +++++++++++++------
 .../dashboard/modules/search/search.routes.js |  2 +-
 .../routes/dashboard/contacts/routes.js       |  4 +--
 .../conversation/conversation.routes.js       |  2 +-
 .../routes/dashboard/dashboard.routes.js      |  6 ++---
 .../dashboard/helpcenter/helpcenter.routes.js |  4 +--
 .../routes/dashboard/inbox/routes.js          |  6 ++---
 .../routes/dashboard/notifications/routes.js  |  4 +--
 .../settings/account/account.routes.js        |  4 +--
 .../settings/agentBots/agentBot.routes.js     |  8 +++---
 .../dashboard/settings/agents/agent.routes.js |  4 +--
 .../settings/attributes/attributes.routes.js  |  4 +--
 .../settings/auditlogs/audit.routes.js        |  4 +--
 .../settings/automation/automation.routes.js  |  4 +--
 .../settings/billing/billing.routes.js        |  4 +--
 .../settings/campaigns/campaigns.routes.js    |  4 +--
 .../settings/canned/canned.routes.js          |  4 +--
 .../settings/customRoles/customRole.routes.js |  4 +--
 .../dashboard/settings/inbox/inbox.routes.js  | 16 ++++++------
 .../integrations/integrations.routes.js       | 14 +++++-----
 .../settings/labels/labels.routes.js          |  4 +--
 .../settings/macros/macros.routes.js          |  8 +++---
 .../settings/profile/profile.routes.js        |  4 +--
 .../settings/reports/reports.routes.js        | 20 +++++++-------
 .../dashboard/settings/sla/sla.routes.js      |  4 +--
 .../dashboard/settings/teams/teams.routes.js  | 20 +++++++-------
 app/javascript/entrypoints/widget.js          |  6 -----
 app/javascript/v3/views/routes.js             | 10 +++----
 28 files changed, 104 insertions(+), 100 deletions(-)

diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue b/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
index ecc189bea..3736b9d70 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { computed, watch, ref } from 'vue';
 import { useSidebarContext } from './provider';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import Policy from 'dashboard/components/policy.vue';
 import SidebarGroupHeader from './SidebarGroupHeader.vue';
 import SidebarGroupLeaf from './SidebarGroupLeaf.vue';
@@ -41,7 +41,7 @@ const navigableChildren = computed(() => {
 });
 
 const route = useRoute();
-
+const router = useRouter();
 const isExpanded = computed(() => expandedItem.value === props.name);
 const isExpandable = computed(() => props.children);
 const hasChildren = computed(
@@ -53,10 +53,7 @@ const accessibleItems = computed(() => {
   return props.children.filter(child => isAllowed(child.to));
 });
 
-const hasAccessibleItems = computed(() => {
-  // default true so that rendering is not blocked
-  if (!hasChildren.value) return true;
-
+const hasAccessibleChildren = computed(() => {
   return accessibleItems.value.length > 0;
 });
 
@@ -93,6 +90,19 @@ const hasActiveChild = computed(() => {
   return activeChild.value !== undefined;
 });
 
+const toggleTrigger = () => {
+  if (
+    hasAccessibleChildren.value &&
+    !isExpanded.value &&
+    !hasActiveChild.value
+  ) {
+    // if not already expanded, navigate to the first child
+    const firstItem = accessibleItems.value[0];
+    router.push(firstItem.to);
+  }
+  setExpandedItem(props.name);
+};
+
 watch(expandedItem, locateLastChild, {
   immediate: true,
 });
@@ -101,7 +111,7 @@ watch(expandedItem, locateLastChild, {
 <!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <Policy
-    v-if="hasAccessibleItems"
+    v-if="!hasChildren || hasAccessibleChildren"
     :permissions="resolvePermissions(to)"
     :feature-flag="resolveFeatureFlag(to)"
     as="li"
@@ -116,7 +126,7 @@ watch(expandedItem, locateLastChild, {
       :has-active-child="hasActiveChild"
       :expandable="hasChildren"
       :is-expanded="isExpanded"
-      @toggle="setExpandedItem(name)"
+      @toggle="toggleTrigger"
     />
     <ul
       v-if="hasChildren"
diff --git a/app/javascript/dashboard/modules/search/search.routes.js b/app/javascript/dashboard/modules/search/search.routes.js
index d59df5e79..e9261dbd9 100644
--- a/app/javascript/dashboard/modules/search/search.routes.js
+++ b/app/javascript/dashboard/modules/search/search.routes.js
@@ -5,7 +5,7 @@ import {
   CONTACT_PERMISSIONS,
 } from 'dashboard/constants/permissions.js';
 
-const SearchView = () => import('./components/SearchView.vue');
+import SearchView from './components/SearchView.vue';
 
 export const routes = [
   {
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/routes.js b/app/javascript/dashboard/routes/dashboard/contacts/routes.js
index d28718c9e..d9abe796e 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/routes.js
+++ b/app/javascript/dashboard/routes/dashboard/contacts/routes.js
@@ -1,7 +1,7 @@
 /* eslint arrow-body-style: 0 */
 import { frontendURL } from '../../../helper/URLHelper';
-const ContactsView = () => import('./components/ContactsView.vue');
-const ContactManageView = () => import('./pages/ContactManageView.vue');
+import ContactsView from './components/ContactsView.vue';
+import ContactManageView from './pages/ContactManageView.vue';
 
 export const routes = [
   {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js b/app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js
index 019d659ac..241c70f45 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js
@@ -1,6 +1,6 @@
 /* eslint arrow-body-style: 0 */
 import { frontendURL } from '../../../helper/URLHelper';
-const ConversationView = () => import('./ConversationView.vue');
+import ConversationView from './ConversationView.vue';
 
 const CONVERSATION_PERMISSIONS = [
   'administrator',
diff --git a/app/javascript/dashboard/routes/dashboard/dashboard.routes.js b/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
index 89d1dfb15..8bb11b9be 100644
--- a/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
@@ -9,9 +9,9 @@ import helpcenterRoutes from './helpcenter/helpcenter.routes';
 
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
-const AppContainer = () => import('./Dashboard.vue');
-const Captain = () => import('./Captain.vue');
-const Suspended = () => import('./suspended/Index.vue');
+import AppContainer from './Dashboard.vue';
+import Captain from './Captain.vue';
+import Suspended from './suspended/Index.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js b/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js
index 6adc3cb2a..b0758aa9c 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js
@@ -2,8 +2,8 @@ import { getPortalRoute } from './helpers/routeHelper';
 
 import HelpCenterPageRouteView from './pages/HelpCenterPageRouteView.vue';
 
-const PortalsIndex = () => import('./pages/PortalsIndexPage.vue');
-const PortalsNew = () => import('./pages/PortalsNewPage.vue');
+import PortalsIndex from './pages/PortalsIndexPage.vue';
+import PortalsNew from './pages/PortalsNewPage.vue';
 
 const PortalsArticlesIndexPage = () =>
   import('./pages/PortalsArticlesIndexPage.vue');
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/routes.js b/app/javascript/dashboard/routes/dashboard/inbox/routes.js
index 44b265c5c..b11c09ea6 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/routes.js
+++ b/app/javascript/dashboard/routes/dashboard/inbox/routes.js
@@ -1,7 +1,7 @@
 import { frontendURL } from 'dashboard/helper/URLHelper';
-const InboxListView = () => import('./InboxList.vue');
-const InboxDetailView = () => import('./InboxView.vue');
-const InboxEmptyStateView = () => import('./InboxEmptyState.vue');
+import InboxListView from './InboxList.vue';
+import InboxDetailView from './InboxView.vue';
+import InboxEmptyStateView from './InboxEmptyState.vue';
 import {
   ROLES,
   CONVERSATION_PERMISSIONS,
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/routes.js b/app/javascript/dashboard/routes/dashboard/notifications/routes.js
index f3d32ba1e..e5125f2cf 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/routes.js
+++ b/app/javascript/dashboard/routes/dashboard/notifications/routes.js
@@ -1,7 +1,7 @@
 /* eslint arrow-body-style: 0 */
 import { frontendURL } from '../../../helper/URLHelper';
-const SettingsWrapper = () => import('../settings/Wrapper.vue');
-const NotificationsView = () => import('./components/NotificationsView.vue');
+import SettingsWrapper from '../settings/Wrapper.vue';
+import NotificationsView from './components/NotificationsView.vue';
 
 export const routes = [
   {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/account/account.routes.js b/app/javascript/dashboard/routes/dashboard/settings/account/account.routes.js
index 2742621e9..ea25fd6dc 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/account/account.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/account/account.routes.js
@@ -1,6 +1,6 @@
 import { frontendURL } from '../../../../helper/URLHelper';
-const SettingsContent = () => import('../Wrapper.vue');
-const Index = () => import('./Index.vue');
+import SettingsContent from '../Wrapper.vue';
+import Index from './Index.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agentBots/agentBot.routes.js b/app/javascript/dashboard/routes/dashboard/settings/agentBots/agentBot.routes.js
index 55210397f..5d93ea01d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/agentBot.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/agentBot.routes.js
@@ -1,8 +1,8 @@
-const Bot = () => import('./Index.vue');
-const CsmlEditBot = () => import('./csml/Edit.vue');
-const CsmlNewBot = () => import('./csml/New.vue');
+import Bot from './Index.vue';
+import CsmlEditBot from './csml/Edit.vue';
+import CsmlNewBot from './csml/New.vue';
 import { frontendURL } from '../../../../helper/URLHelper';
-const SettingsContent = () => import('../Wrapper.vue');
+import SettingsContent from '../Wrapper.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/agent.routes.js b/app/javascript/dashboard/routes/dashboard/settings/agents/agent.routes.js
index ed5322e9e..0e649fabe 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/agent.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/agent.routes.js
@@ -1,6 +1,6 @@
 import { frontendURL } from '../../../../helper/URLHelper';
-const SettingsWrapper = () => import('../SettingsWrapper.vue');
-const AgentHome = () => import('./Index.vue');
+import SettingsWrapper from '../SettingsWrapper.vue';
+import AgentHome from './Index.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/attributes.routes.js b/app/javascript/dashboard/routes/dashboard/settings/attributes/attributes.routes.js
index 2ea1b793d..f74727059 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/attributes.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/attributes.routes.js
@@ -1,6 +1,6 @@
 import { frontendURL } from '../../../../helper/URLHelper';
-const SettingsWrapper = () => import('../SettingsWrapper.vue');
-const AttributesHome = () => import('./Index.vue');
+import SettingsWrapper from '../SettingsWrapper.vue';
+import AttributesHome from './Index.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/audit.routes.js b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/audit.routes.js
index b8a288517..4d9e5d9ce 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/audit.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/audit.routes.js
@@ -1,7 +1,7 @@
 import { frontendURL } from '../../../../helper/URLHelper';
 
-const SettingsWrapper = () => import('../SettingsWrapper.vue');
-const AuditLogsHome = () => import('./Index.vue');
+import SettingsWrapper from '../SettingsWrapper.vue';
+import AuditLogsHome from './Index.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/automation.routes.js b/app/javascript/dashboard/routes/dashboard/settings/automation/automation.routes.js
index aaa458e90..302e476bb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/automation.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/automation.routes.js
@@ -1,6 +1,6 @@
 import { frontendURL } from '../../../../helper/URLHelper';
-const SettingsWrapper = () => import('../SettingsWrapper.vue');
-const Automation = () => import('./Index.vue');
+import SettingsWrapper from '../SettingsWrapper.vue';
+import Automation from './Index.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/billing/billing.routes.js b/app/javascript/dashboard/routes/dashboard/settings/billing/billing.routes.js
index f1042e81a..9fc09a00a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/billing/billing.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/billing/billing.routes.js
@@ -1,6 +1,6 @@
 import { frontendURL } from '../../../../helper/URLHelper';
-const SettingsContent = () => import('../Wrapper.vue');
-const Index = () => import('./Index.vue');
+import SettingsContent from '../Wrapper.vue';
+import Index from './Index.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/campaigns.routes.js b/app/javascript/dashboard/routes/dashboard/settings/campaigns/campaigns.routes.js
index b7f066224..22268d11a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/campaigns.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/campaigns.routes.js
@@ -1,6 +1,6 @@
 import { frontendURL } from '../../../../helper/URLHelper';
-const SettingsContent = () => import('../Wrapper.vue');
-const Index = () => import('./Index.vue');
+import SettingsContent from '../Wrapper.vue';
+import Index from './Index.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/canned.routes.js b/app/javascript/dashboard/routes/dashboard/settings/canned/canned.routes.js
index 63a2d72f8..600d2664b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/canned.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/canned.routes.js
@@ -3,8 +3,8 @@ import {
   ROLES,
   CONVERSATION_PERMISSIONS,
 } from 'dashboard/constants/permissions.js';
-const SettingsWrapper = () => import('../SettingsWrapper.vue');
-const CannedHome = () => import('./Index.vue');
+import SettingsWrapper from '../SettingsWrapper.vue';
+import CannedHome from './Index.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/customRoles/customRole.routes.js b/app/javascript/dashboard/routes/dashboard/settings/customRoles/customRole.routes.js
index 623a0081a..af2fc43ae 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/customRoles/customRole.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/customRoles/customRole.routes.js
@@ -1,7 +1,7 @@
 import { frontendURL } from 'dashboard/helper/URLHelper';
 
-const SettingsWrapper = () => import('../SettingsWrapper.vue');
-const CustomRolesHome = () => import('./Index.vue');
+import SettingsWrapper from '../SettingsWrapper.vue';
+import CustomRolesHome from './Index.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js b/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js
index d0a932742..aa1115a06 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js
@@ -1,14 +1,14 @@
 import { frontendURL } from '../../../../helper/URLHelper';
 import ChannelFactory from './ChannelFactory.vue';
 
-const SettingsContent = () => import('../Wrapper.vue');
-const SettingWrapper = () => import('../SettingsWrapper.vue');
-const InboxHome = () => import('./Index.vue');
-const Settings = () => import('./Settings.vue');
-const InboxChannel = () => import('./InboxChannels.vue');
-const ChannelList = () => import('./ChannelList.vue');
-const AddAgents = () => import('./AddAgents.vue');
-const FinishSetup = () => import('./FinishSetup.vue');
+import SettingsContent from '../Wrapper.vue';
+import SettingWrapper from '../SettingsWrapper.vue';
+import InboxHome from './Index.vue';
+import Settings from './Settings.vue';
+import InboxChannel from './InboxChannels.vue';
+import ChannelList from './ChannelList.vue';
+import AddAgents from './AddAgents.vue';
+import FinishSetup from './FinishSetup.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js b/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js
index 8a4937dd4..3bb3e4708 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js
@@ -1,11 +1,11 @@
 import { frontendURL } from '../../../../helper/URLHelper';
-const SettingsWrapper = () => import('../SettingsWrapper.vue');
-const IntegrationHooks = () => import('./IntegrationHooks.vue');
-const Index = () => import('./Index.vue');
-const Webhook = () => import('./Webhooks/Index.vue');
-const DashboardApps = () => import('./DashboardApps/Index.vue');
-const Slack = () => import('./Slack.vue');
-const SettingsContent = () => import('../Wrapper.vue');
+import SettingsWrapper from '../SettingsWrapper.vue';
+import IntegrationHooks from './IntegrationHooks.vue';
+import Index from './Index.vue';
+import Webhook from './Webhooks/Index.vue';
+import DashboardApps from './DashboardApps/Index.vue';
+import Slack from './Slack.vue';
+import SettingsContent from '../Wrapper.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/labels.routes.js b/app/javascript/dashboard/routes/dashboard/settings/labels/labels.routes.js
index ff149960e..ed5a504ab 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/labels.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/labels.routes.js
@@ -1,7 +1,7 @@
 import { frontendURL } from '../../../../helper/URLHelper';
 
-const SettingsWrapper = () => import('../SettingsWrapper.vue');
-const Index = () => import('./Index.vue');
+import SettingsWrapper from '../SettingsWrapper.vue';
+import Index from './Index.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/macros.routes.js b/app/javascript/dashboard/routes/dashboard/settings/macros/macros.routes.js
index 24559dffd..e1d4729e6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/macros.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/macros.routes.js
@@ -4,10 +4,10 @@ import {
   ROLES,
   CONVERSATION_PERMISSIONS,
 } from 'dashboard/constants/permissions.js';
-const SettingsContent = () => import('../Wrapper.vue');
-const SettingsWrapper = () => import('../SettingsWrapper.vue');
-const Macros = () => import('./Index.vue');
-const MacroEditor = () => import('./MacroEditor.vue');
+import SettingsContent from '../Wrapper.vue';
+import SettingsWrapper from '../SettingsWrapper.vue';
+import Macros from './Index.vue';
+import MacroEditor from './MacroEditor.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js b/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js
index a6cc13997..b99031047 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js
@@ -1,7 +1,7 @@
 import { frontendURL } from '../../../../helper/URLHelper';
 
-const SettingsContent = () => import('./Wrapper.vue');
-const Index = () => import('./Index.vue');
+import SettingsContent from './Wrapper.vue';
+import Index from './Index.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js b/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
index 3949bf7a5..d19c081d1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
@@ -1,16 +1,16 @@
 import { frontendURL } from '../../../../helper/URLHelper';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
-const SettingsContent = () => import('../Wrapper.vue');
-const Index = () => import('./Index.vue');
-const AgentReports = () => import('./AgentReports.vue');
-const LabelReports = () => import('./LabelReports.vue');
-const InboxReports = () => import('./InboxReports.vue');
-const TeamReports = () => import('./TeamReports.vue');
-const CsatResponses = () => import('./CsatResponses.vue');
-const BotReports = () => import('./BotReports.vue');
-const LiveReports = () => import('./LiveReports.vue');
-const SLAReports = () => import('./SLAReports.vue');
+import SettingsContent from '../Wrapper.vue';
+import Index from './Index.vue';
+import AgentReports from './AgentReports.vue';
+import LabelReports from './LabelReports.vue';
+import InboxReports from './InboxReports.vue';
+import TeamReports from './TeamReports.vue';
+import CsatResponses from './CsatResponses.vue';
+import BotReports from './BotReports.vue';
+import LiveReports from './LiveReports.vue';
+import SLAReports from './SLAReports.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/sla.routes.js b/app/javascript/dashboard/routes/dashboard/settings/sla/sla.routes.js
index 857d69ad2..6955775b9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/sla.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/sla.routes.js
@@ -1,7 +1,7 @@
 import { frontendURL } from '../../../../helper/URLHelper';
 
-const SettingsWrapper = () => import('../SettingsWrapper.vue');
-const Index = () => import('./Index.vue');
+import SettingsWrapper from '../SettingsWrapper.vue';
+import Index from './Index.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js b/app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js
index 943c491d2..25223a864 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js
@@ -1,15 +1,15 @@
 import { frontendURL } from '../../../../helper/URLHelper';
 
-const TeamsIndex = () => import('./Index.vue');
-const CreateStepWrap = () => import('./Create/Index.vue');
-const EditStepWrap = () => import('./Edit/Index.vue');
-const CreateTeam = () => import('./Create/CreateTeam.vue');
-const EditTeam = () => import('./Edit/EditTeam.vue');
-const AddAgents = () => import('./Create/AddAgents.vue');
-const EditAgents = () => import('./Edit/EditAgents.vue');
-const FinishSetup = () => import('./FinishSetup.vue');
-const SettingsContent = () => import('../Wrapper.vue');
-const SettingsWrapper = () => import('../SettingsWrapper.vue');
+import TeamsIndex from './Index.vue';
+import CreateStepWrap from './Create/Index.vue';
+import EditStepWrap from './Edit/Index.vue';
+import CreateTeam from './Create/CreateTeam.vue';
+import EditTeam from './Edit/EditTeam.vue';
+import AddAgents from './Create/AddAgents.vue';
+import EditAgents from './Edit/EditAgents.vue';
+import FinishSetup from './FinishSetup.vue';
+import SettingsContent from '../Wrapper.vue';
+import SettingsWrapper from '../SettingsWrapper.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/entrypoints/widget.js b/app/javascript/entrypoints/widget.js
index d62ac1c1e..5c1fac7a9 100644
--- a/app/javascript/entrypoints/widget.js
+++ b/app/javascript/entrypoints/widget.js
@@ -11,16 +11,10 @@ import { directive as onClickaway } from 'vue3-click-away';
 import { domPurifyConfig } from '../shared/helpers/HTMLSanitizer';
 import { plugin, defaultConfig } from '@formkit/vue';
 
-// import { emitter } from 'shared/helpers/mitt';
-
-// https://github.com/wearebraid/vue-formulate/issues/198
-// [VITE] [TODO] Re-enable this later
-// import VueFormulate from '@braid/vue-formulate';
 import {
   startsWithPlus,
   isPhoneNumberValidWithDialCode,
 } from 'shared/helpers/Validators';
-// const PhoneInput = () => import('../widget/components/Form/PhoneInput.vue');
 
 const i18n = createI18n({
   legacy: false, // https://github.com/intlify/vue-i18n/issues/1902
diff --git a/app/javascript/v3/views/routes.js b/app/javascript/v3/views/routes.js
index 6049530be..e1f14c78e 100644
--- a/app/javascript/v3/views/routes.js
+++ b/app/javascript/v3/views/routes.js
@@ -1,10 +1,10 @@
 import { frontendURL } from 'dashboard/helper/URLHelper';
 
-const Login = () => import('./login/Index.vue');
-const Signup = () => import('./auth/signup/Index.vue');
-const ResetPassword = () => import('./auth/reset/password/Index.vue');
-const Confirmation = () => import('./auth/confirmation/Index.vue');
-const PasswordEdit = () => import('./auth/password/Edit.vue');
+import Login from './login/Index.vue';
+import Signup from './auth/signup/Index.vue';
+import ResetPassword from './auth/reset/password/Index.vue';
+import Confirmation from './auth/confirmation/Index.vue';
+import PasswordEdit from './auth/password/Edit.vue';
 
 export default [
   {