From 65abf1131bef5c2e9cc99b4a745895dea00c3200 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 19 Feb 2025 15:19:58 +0530
Subject: [PATCH] fix: added TrialBanner in sidebar

---
 .../src/components/Layouts/AppSidebar.vue     |  7 ++--
 frontend/src/composables/frappecloud.js       | 35 +++++++++++--------
 2 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/Layouts/AppSidebar.vue b/frontend/src/components/Layouts/AppSidebar.vue
index e44ae5ca..cf9ea854 100644
--- a/frontend/src/components/Layouts/AppSidebar.vue
+++ b/frontend/src/components/Layouts/AppSidebar.vue
@@ -73,6 +73,7 @@
     </div>
     <div class="m-2 flex flex-col gap-1">
       <SignupBanner :isSidebarCollapsed="isSidebarCollapsed" />
+      <TrialBanner v-if="isFCSite" />
       <SidebarLink
         :label="isSidebarCollapsed ? __('Expand') : __('Collapse')"
         :isCollapsed="isSidebarCollapsed"
@@ -117,15 +118,17 @@ import {
   unreadNotificationsCount,
   notificationsStore,
 } from '@/stores/notifications'
-import { FeatherIcon } from 'frappe-ui'
+import { FeatherIcon, TrialBanner } from 'frappe-ui'
 import { useStorage } from '@vueuse/core'
-import { computed, h } from 'vue'
+import { ref, computed, h } from 'vue'
 
 const { getPinnedViews, getPublicViews } = viewsStore()
 const { toggle: toggleNotificationPanel } = notificationsStore()
 
 const isSidebarCollapsed = useStorage('isSidebarCollapsed', false)
 
+const isFCSite = ref(window.is_fc_site)
+
 const links = [
   {
     label: 'Leads',
diff --git a/frontend/src/composables/frappecloud.js b/frontend/src/composables/frappecloud.js
index 1ee6bc5e..81763ba8 100644
--- a/frontend/src/composables/frappecloud.js
+++ b/frontend/src/composables/frappecloud.js
@@ -1,10 +1,23 @@
 import { globalStore } from '@/stores/global'
-import { call } from 'frappe-ui'
+import { createResource } from 'frappe-ui'
+import { ref } from 'vue'
 
 const frappeCloudBaseEndpoint = 'https://frappecloud.com'
+const isPaymentModeAdded = ref(false)
+
+export const currentSiteInfo = createResource({
+  url: 'frappe.integrations.frappe_providers.frappecloud_billing.current_site_info',
+  cache: 'currentSiteInfo',
+  onSuccess: (data) => {
+    isPaymentModeAdded.value = data.is_payment_method_added
+  },
+})
 
 export const confirmLoginToFrappeCloud = () => {
+  currentSiteInfo.fetch()
+
   const { $dialog } = globalStore()
+
   $dialog({
     title: __('Login to Frappe Cloud?'),
     message: __(
@@ -24,19 +37,13 @@ export const confirmLoginToFrappeCloud = () => {
 }
 
 const loginToFrappeCloud = () => {
-  call(
-    'frappe.integrations.frappe_providers.frappecloud_billing.current_site_info',
-  ).then((response) => {
-    if (!response) return
+  let redirectRoute = ''
 
-    let redirectRoute = ''
+  if (isPaymentModeAdded.value) {
+    redirectRoute = '/dashboard'
+  } else {
+    redirectRoute = '/dashboard/welcome'
+  }
 
-    if (response.is_payment_method_added) {
-      redirectRoute = '/dashboard'
-    } else {
-      redirectRoute = '/dashboard/welcome'
-    }
-
-    window.open(`${frappeCloudBaseEndpoint}${redirectRoute}`, '_blank')
-  })
+  window.open(`${frappeCloudBaseEndpoint}${redirectRoute}`, '_blank')
 }