From 9aea5973f1d759b17a1045c634246c46c9a144c2 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 15 Nov 2024 17:39:15 +0530
Subject: [PATCH] fix: removed old Billing component from settings page and
 added Billing action button in user dropdown

---
 frontend/src/components/Icons/BillingIcon.vue | 16 ------------
 frontend/src/components/Icons/PlansIcon.vue   | 16 ------------
 .../src/components/Layouts/AppSidebar.vue     | 22 ++++++++--------
 frontend/src/components/Settings/Settings.vue | 26 ++-----------------
 frontend/src/components/UserDropdown.vue      | 10 ++++++-
 5 files changed, 22 insertions(+), 68 deletions(-)
 delete mode 100644 frontend/src/components/Icons/BillingIcon.vue
 delete mode 100644 frontend/src/components/Icons/PlansIcon.vue

diff --git a/frontend/src/components/Icons/BillingIcon.vue b/frontend/src/components/Icons/BillingIcon.vue
deleted file mode 100644
index 82c74c7c..00000000
--- a/frontend/src/components/Icons/BillingIcon.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M2.00516 3.89776C2.05637 3.3935 2.48223 3 3 3H13C13.5523 3 14 3.44772 14 4V5.38867H2V4C2 3.96548 2.00175 3.93137 2.00516 3.89776ZM1 6.38867V5.38867V4C1 3.93096 1.0035 3.86275 1.01033 3.79551C1.11275 2.787 1.96447 2 3 2H13C14.1046 2 15 2.89543 15 4V5.38867V6.38867V12C15 13.1046 14.1046 14 13 14H3C1.89543 14 1 13.1046 1 12V6.38867ZM14 6.38867V12C14 12.5523 13.5523 13 13 13H3C2.44772 13 2 12.5523 2 12V6.38867H14Z"
-      fill="currentColor"
-    />
-  </svg>
-</template>
diff --git a/frontend/src/components/Icons/PlansIcon.vue b/frontend/src/components/Icons/PlansIcon.vue
deleted file mode 100644
index a0ac6dbb..00000000
--- a/frontend/src/components/Icons/PlansIcon.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M10.1787 14.1967C9.57127 14.3936 8.92306 14.5 8.25 14.5C4.79822 14.5 2 11.7018 2 8.25C2 5.85176 3.35077 3.76901 5.33301 2.72104V10.4262L4.25346 9.34664C4.05819 9.15138 3.74161 9.15138 3.54635 9.34664C3.35109 9.5419 3.35109 9.85849 3.54635 10.0537L5.47968 11.9871C5.67494 12.1823 5.99153 12.1823 6.18679 11.9871L8.12012 10.0537C8.31538 9.85849 8.31538 9.5419 8.12012 9.34664C7.92486 9.15138 7.60828 9.15138 7.41302 9.34664L6.33301 10.4267V2.41357C6.33301 2.37572 6.3288 2.33886 6.32083 2.30341C6.92842 2.10644 7.57678 2 8.25 2C11.7018 2 14.5 4.79822 14.5 8.25C14.5 10.6484 13.149 12.7313 11.1665 13.7792V6.07358L12.2465 7.15359C12.4418 7.34885 12.7584 7.34885 12.9536 7.15359C13.1489 6.95832 13.1489 6.64174 12.9536 6.44648L11.0203 4.51315C10.9512 4.44411 10.867 4.39948 10.7784 4.37926C10.7417 4.37089 10.7042 4.3667 10.6667 4.3667H10.6665C10.5239 4.3667 10.3952 4.42643 10.3041 4.52226L8.37985 6.44648C8.18458 6.64174 8.18458 6.95832 8.37985 7.15359C8.57511 7.34885 8.89169 7.34885 9.08695 7.15359L10.1665 6.07403V14.0863C10.1665 14.1242 10.1707 14.1612 10.1787 14.1967ZM8.25 15.5C12.2541 15.5 15.5 12.2541 15.5 8.25C15.5 4.24594 12.2541 1 8.25 1C4.24594 1 1 4.24594 1 8.25C1 12.2541 4.24594 15.5 8.25 15.5Z"
-      fill="currentColor"
-    />
-  </svg>
-</template>
diff --git a/frontend/src/components/Layouts/AppSidebar.vue b/frontend/src/components/Layouts/AppSidebar.vue
index dbedf399..e958952a 100644
--- a/frontend/src/components/Layouts/AppSidebar.vue
+++ b/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>
diff --git a/frontend/src/components/Settings/Settings.vue b/frontend/src/components/Settings/Settings.vue
index be977cec..16ab8959 100644
--- a/frontend/src/components/Settings/Settings.vue
+++ b/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: [
diff --git a/frontend/src/components/UserDropdown.vue b/frontend/src/components/UserDropdown.vue
index 98b80736..25424655 100644
--- a/frontend/src/components/UserDropdown.vue
+++ b/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')),