From 83de0a6b4c25c7d4d1129975a10e380a4c5d774a Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 25 Oct 2024 17:00:19 +0530
Subject: [PATCH] fix: show billing setting page on click of banner button

---
 frontend/src/App.vue                          | 10 ++++---
 .../src/components/Layouts/AppSidebar.vue     | 11 +++++++-
 .../src/components/Settings/SettingsModal.vue | 28 +++++++++++++++----
 frontend/src/components/UserDropdown.vue      |  5 +---
 frontend/src/composables/settings.js          |  3 ++
 5 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 61e774c9..d523281a 100644
--- a/frontend/src/App.vue
+++ b/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) {
diff --git a/frontend/src/components/Layouts/AppSidebar.vue b/frontend/src/components/Layouts/AppSidebar.vue
index ca57b2fc..75bedeab 100644
--- a/frontend/src/components/Layouts/AppSidebar.vue
+++ b/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>
diff --git a/frontend/src/components/Settings/SettingsModal.vue b/frontend/src/components/Settings/SettingsModal.vue
index 18cd66b8..81c4fe8c 100644
--- a/frontend/src/components/Settings/SettingsModal.vue
+++ b/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>
diff --git a/frontend/src/components/UserDropdown.vue b/frontend/src/components/UserDropdown.vue
index cf5bf263..64d799fa 100644
--- a/frontend/src/components/UserDropdown.vue
+++ b/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',
diff --git a/frontend/src/composables/settings.js b/frontend/src/composables/settings.js
index 53022bc2..1fc6ea3f 100644
--- a/frontend/src/composables/settings.js
+++ b/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('')
\ No newline at end of file