fix: show billing setting page on click of banner button

frontend/src/App.vue

@@ -2,21 +2,23 @@
   <Layout v-if="session().isLoggedIn">
     <router-view />
   </Layout>
+  <SettingsModal />
   <Dialogs />
   <Toasts />
 </template>
 
 <script setup>
+import SettingsModal from '@/components/Settings/SettingsModal.vue'
 import { Dialogs } from '@/utils/dialogs'
 import { sessionStore as session } from '@/stores/session'
 import { Toasts } from 'frappe-ui'
 import { computed, defineAsyncComponent } from 'vue'
 
-const MobileLayout = defineAsyncComponent(() =>
-  import('./components/Layouts/MobileLayout.vue')
+const MobileLayout = defineAsyncComponent(
+  () => import('./components/Layouts/MobileLayout.vue'),
 )
-const DesktopLayout = defineAsyncComponent(() =>
-  import('./components/Layouts/DesktopLayout.vue')
+const DesktopLayout = defineAsyncComponent(
+  () => import('./components/Layouts/DesktopLayout.vue'),
 )
 const Layout = computed(() => {
   if (window.innerWidth < 640) {

frontend/src/components/Layouts/AppSidebar.vue

@@ -74,7 +74,10 @@
         </Section>
       </div>
     </div>
-    <TrialBanner :isSidebarCollapsed="isSidebarCollapsed" />
+    <TrialBanner
+      :isSidebarCollapsed="isSidebarCollapsed"
+      @upgradePlan="showBillingSettingPage"
+    />
     <div class="m-2 flex flex-col gap-1">
       <SidebarLink
         :label="isSidebarCollapsed ? __('Expand') : __('Collapse')"
@@ -114,6 +117,7 @@ import SidebarLink from '@/components/SidebarLink.vue'
 import Notifications from '@/components/Notifications.vue'
 import { viewsStore } from '@/stores/views'
 import { notificationsStore } from '@/stores/notifications'
+import { showSettingsModal, activeSettingsPage } from '@/composables/settings'
 import { FeatherIcon, TrialBanner } from 'frappe-ui'
 import { useStorage } from '@vueuse/core'
 import { computed, h } from 'vue'
@@ -227,4 +231,9 @@ function getIcon(routeName, icon) {
       return PinIcon
   }
 }
+
+function showBillingSettingPage() {
+  showSettingsModal.value = true
+  activeSettingsPage.value = 'Billing'
+}
 </script>

frontend/src/components/Settings/SettingsModal.vue

@@ -1,5 +1,9 @@
 <template>
-  <Dialog v-model="show" :options="{ size: '5xl' }">
+  <Dialog
+    v-model="showSettingsModal"
+    :options="{ size: '5xl' }"
+    @close="activeSettingsPage = ''"
+  >
     <template #body>
       <div class="flex h-[calc(100vh_-_8rem)]">
         <div class="flex w-52 shrink-0 flex-col bg-gray-50 p-2">
@@ -49,11 +53,13 @@ import WhatsAppSettings from '@/components/Settings/WhatsAppSettings.vue'
 import ERPNextSettings from '@/components/Settings/ERPNextSettings.vue'
 import TwilioSettings from '@/components/Settings/TwilioSettings.vue'
 import SidebarLink from '@/components/SidebarLink.vue'
-import { isWhatsappInstalled } from '@/composables/settings'
+import {
+  isWhatsappInstalled,
+  showSettingsModal,
+  activeSettingsPage,
+} from '@/composables/settings'
 import { Dialog, Plans, Billing } from 'frappe-ui'
-import { ref, markRaw, computed } from 'vue'
-
-const show = defineModel()
+import { ref, markRaw, computed, watch } from 'vue'
 
 const tabs = computed(() => {
   let _tabs = [
@@ -123,4 +129,16 @@ const tabs = computed(() => {
 })
 
 const activeTab = ref(tabs.value[0].items[0])
+
+function setActiveTab(tabName) {
+  activeTab.value =
+    (tabName &&
+      tabs.value
+        .map((tab) => tab.items)
+        .flat()
+        .find((tab) => tab.label === tabName)) ||
+    tabs.value[0].items[0]
+}
+
+watch(activeSettingsPage, (activePage) => setActiveTab(activePage))
 </script>

frontend/src/components/UserDropdown.vue

@@ -44,15 +44,14 @@
       </button>
     </template>
   </Dropdown>
-  <SettingsModal v-if="showSettingsModal" v-model="showSettingsModal" />
 </template>
 
 <script setup>
-import SettingsModal from '@/components/Settings/SettingsModal.vue'
 import CRMLogo from '@/components/Icons/CRMLogo.vue'
 import Apps from '@/components/Apps.vue'
 import { sessionStore } from '@/stores/session'
 import { usersStore } from '@/stores/users'
+import { showSettingsModal } from '@/composables/settings'
 import { Dropdown } from 'frappe-ui'
 import { computed, ref, markRaw} from 'vue'
 
@@ -68,8 +67,6 @@ const { getUser } = usersStore()
 
 const user = computed(() => getUser() || {})
 
-const showSettingsModal = ref(false)
-
 let dropdownOptions = ref([
   {
     group: 'Manage',

frontend/src/composables/settings.js

@@ -33,3 +33,6 @@ createResource({
 export const mobileSidebarOpened = ref(false)
 
 export const isMobileView = computed(() => window.innerWidth < 768)
+
+export const showSettingsModal = ref(false)
+export const activeSettingsPage = ref('')