fix: removed old Billing component from settings page and added Billi…

…ng action button in user dropdown

frontend/src/components/Layouts/AppSidebar.vue

@@ -71,10 +71,7 @@
         </Section>
       </div>
     </div>
-    <TrialBanner
-      :isSidebarCollapsed="isSidebarCollapsed"
-      @upgradePlan="showBillingSettingPage"
-    />
+    <TrialBanner v-if="isFCSite.data" />
     <div class="m-2 flex flex-col gap-1">
       <SidebarLink
         :label="isSidebarCollapsed ? __('Expand') : __('Collapse')"
@@ -119,10 +116,9 @@ import {
   unreadNotificationsCount,
   notificationsStore,
 } from '@/stores/notifications'
-import { showSettings, activeSettingsPage } from '@/composables/settings'
-import { FeatherIcon, TrialBanner } from 'frappe-ui'
+import { FeatherIcon, TrialBanner, createResource } from 'frappe-ui'
 import { useStorage } from '@vueuse/core'
-import { computed, h } from 'vue'
+import { computed, h, provide } from 'vue'
 
 const { getPinnedViews, getPublicViews } = viewsStore()
 const { toggle: toggleNotificationPanel } = notificationsStore()
@@ -234,8 +230,12 @@ function getIcon(routeName, icon) {
   }
 }
 
-function showBillingSettingPage() {
-  showSettings.value = true
-  activeSettingsPage.value = 'Billing'
-}
+const isFCSite = createResource({
+  url: 'frappe.integrations.frappe_providers.frappecloud_billing.is_fc_site',
+  cache: 'isFCSite',
+  auto: true,
+  transform: (data) => Boolean(data),
+})
+
+provide('isFCSite', isFCSite)
 </script>

frontend/src/components/Settings/Settings.vue

@@ -45,8 +45,6 @@ import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
 import WhatsAppIcon from '@/components/Icons/WhatsAppIcon.vue'
 import ERPNextIcon from '@/components/Icons/ERPNextIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
-import PlansIcon from '@/components/Icons/PlansIcon.vue'
-import BillingIcon from '@/components/Icons/BillingIcon.vue'
 import InviteMemberPage from '@/components/Settings/InviteMemberPage.vue'
 import ProfileSettings from '@/components/Settings/ProfileSettings.vue'
 import WhatsAppSettings from '@/components/Settings/WhatsAppSettings.vue'
@@ -59,8 +57,8 @@ import {
   showSettings,
   activeSettingsPage,
 } from '@/composables/settings'
-import { Dialog, Plans, Billing } from 'frappe-ui'
-import { ref, markRaw, computed, watch, h } from 'vue'
+import { Dialog } from 'frappe-ui'
+import { ref, markRaw, computed, watch } from 'vue'
 
 const { isManager } = usersStore()
 
@@ -83,26 +81,6 @@ const tabs = computed(() => {
         },
       ],
     },
-    {
-      label: __('Subscription'),
-      condition: () => window.fc_communication_secret && isManager(),
-      items: [
-        {
-          label: 'Plans',
-          icon: PlansIcon,
-          component: markRaw(Plans),
-        },
-        {
-          label: 'Billing',
-          icon: BillingIcon,
-          component: markRaw(
-            h(Billing, {
-              onChangePlan: () => setActiveTab('Plans'),
-            }),
-          ),
-        },
-      ],
-    },
     {
       label: __('Integrations'),
       items: [

frontend/src/components/UserDropdown.vue

@@ -53,7 +53,7 @@ import { sessionStore } from '@/stores/session'
 import { usersStore } from '@/stores/users'
 import { showSettings } from '@/composables/settings'
 import { Dropdown } from 'frappe-ui'
-import { computed, ref, markRaw } from 'vue'
+import { computed, ref, markRaw, inject } from 'vue'
 
 const props = defineProps({
   isCollapsed: {
@@ -67,6 +67,8 @@ const { getUser } = usersStore()
 
 const user = computed(() => getUser() || {})
 
+const isFCSite = inject('isFCSite')
+
 let dropdownOptions = ref([
   {
     group: 'Manage',
@@ -91,6 +93,12 @@ let dropdownOptions = ref([
     group: 'Others',
     hideLabel: true,
     items: [
+      {
+        icon: 'credit-card',
+        label: computed(() => __('Billing')),
+        onClick: () => (window.location.href = '/billing'),
+        condition: () => isFCSite.data,
+      },
       {
         icon: 'settings',
         label: computed(() => __('Settings')),