fix: added support link in sidebar

billing/src/components/AppSidebar.vue

@@ -8,17 +8,19 @@
 		<div class="flex-1 overflow-y-auto">
 			<nav class="mb-3 flex flex-col">
 				<SidebarLink
+					class="mx-2 my-0.5"
 					:label="previousRoute ? 'Back to app' : 'Back'"
 					icon="arrow-left"
+					:noExternalLinkIcon="true"
 					@click="goBack"
-					class="mx-2 my-0.5"
 				/>
 				<SidebarLink
+					class="mx-2 my-0.5"
 					v-for="link in links"
 					:icon="link.icon"
 					:label="link.label"
 					:to="link.to"
-					class="mx-2 my-0.5"
+					@click="link.onClick"
 				/>
 			</nav>
 		</div>
@@ -34,13 +36,18 @@ import CardIcon from '@/icons/CardIcon.vue'
 import Plans from '@/icons/PlansIcon.vue'
 import InvoiceIcon from '@/icons/InvoiceIcon.vue'
 import SidebarLink from '@/components/SidebarLink.vue'
+import { createDialog } from '../dialogs'
+import { call } from 'frappe-ui'
 import { useRouter } from 'vue-router'
 import { useStorage } from '@vueuse/core'
-import { onMounted } from 'vue'
+import { onMounted, inject } from 'vue'
 
 const router = useRouter()
 const previousRoute = useStorage('previousRoute', null)
 
+const team = inject('team')
+const currentSiteInfo = inject('currentSiteInfo')
+
 onMounted(() => {
 	if (document.referrer) {
 		previousRoute.value = document.referrer
@@ -68,6 +75,11 @@ const links = [
 		icon: CardIcon,
 		to: 'Cards',
 	},
+	{
+		label: 'Support',
+		icon: 'life-buoy',
+		onClick: () => openSupport(),
+	},
 ]
 
 function goBack() {
@@ -77,4 +89,35 @@ function goBack() {
 		router.go(-1)
 	}
 }
+
+async function openSupport() {
+	await currentSiteInfo.reload()
+	if (!currentSiteInfo.data?.plan?.support_included) {
+		let supportPlan = await call(
+			'frappe.integrations.frappe_providers.frappecloud_billing.api',
+			{
+				method: 'site.get_first_support_plan',
+			},
+		)
+		if (!supportPlan) return
+		let currency = team.data.currency == 'INR' ? '₹' : '$'
+		let price = currency === '₹' ? supportPlan.price_inr : supportPlan.price_usd
+		createDialog({
+			title: `Upgrade to ${currency}${price}/mo Plan`,
+			message: `Please upgrade to the ${currency}${price}/mo plan to get support`,
+			actions: [
+				{
+					label: 'Upgrade',
+					variant: 'solid',
+					onClick: (close) => {
+						router.push({ name: 'Plans' })
+						close()
+					},
+				},
+			],
+		})
+		return
+	}
+	window.open('https://support.frappe.io', '_blank')
+}
 </script>

billing/src/components/SidebarLink.vue

@@ -4,46 +4,39 @@
 		:class="isActive ? 'bg-white shadow-sm' : 'hover:bg-gray-100'"
 		@click="handleClick"
 	>
-		<div
-			class="flex w-full items-center justify-between duration-300 ease-in-out"
-			:class="isCollapsed ? 'ml-[3px] p-1' : 'px-2 py-1'"
-		>
+		<div class="flex px-2 py-1 w-full items-center justify-between duration-300 ease-in-out">
 			<div class="flex items-center truncate">
-				<Tooltip :text="label" placement="right" :disabled="!isCollapsed">
-					<slot name="icon">
-						<span class="grid flex-shrink-0 place-items-center">
-							<FeatherIcon
-								v-if="typeof icon == 'string'"
-								:name="icon"
-								class="size-4 text-gray-700"
-							/>
-							<component v-else :is="icon" class="size-4 text-gray-700" />
-						</span>
-					</slot>
-				</Tooltip>
-				<Tooltip :text="label" placement="right" :disabled="isCollapsed" :hoverDelay="1.5">
-					<span
-						class="flex-1 flex-shrink-0 truncate text-sm duration-300 ease-in-out"
-						:class="
-							isCollapsed
-								? 'ml-0 w-0 overflow-hidden opacity-0'
-								: 'ml-2 w-auto opacity-100'
-						"
-					>
-						{{ label }}
+				<slot name="icon">
+					<span class="grid flex-shrink-0 place-items-center">
+						<FeatherIcon
+							v-if="typeof icon == 'string'"
+							:name="icon"
+							class="size-4 text-gray-700"
+						/>
+						<component v-else :is="icon" class="size-4 text-gray-700" />
 					</span>
-				</Tooltip>
+				</slot>
+				<span
+					class="flex-1 ml-2 w-auto flex-shrink-0 truncate text-sm duration-300 ease-in-out"
+				>
+					{{ label }}
+				</span>
 			</div>
-			<slot name="right" />
+			<slot name="right">
+				<FeatherIcon
+					v-if="onClick && !noExternalLinkIcon"
+					name="external-link"
+					class="size-3 text-gray-500"
+				/>
+			</slot>
 		</div>
 	</button>
 </template>
 
 <script setup>
-import { Tooltip, FeatherIcon } from 'frappe-ui'
+import { FeatherIcon } from 'frappe-ui'
 import { computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-// import { isMobileView, mobileSidebarOpened } from '@/composables/settings'
 
 const router = useRouter()
 const route = useRoute()
@@ -60,22 +53,26 @@ const props = defineProps({
 		type: [Object, String],
 		default: '',
 	},
-	isCollapsed: {
+	onClick: {
+		type: Function,
+		default: null,
+	},
+	noExternalLinkIcon: {
 		type: Boolean,
 		default: false,
 	},
 })
 
 function handleClick() {
-	if (!props.to) return
+	if (!props.to && props.onClick) {
+		props.onClick()
+		return
+	}
 	if (typeof props.to === 'object') {
 		router.push(props.to)
 	} else {
 		router.push({ name: props.to })
 	}
-	// if (isMobileView.value) {
-	// 	mobileSidebarOpened.value = false
-	// }
 }
 
 let isActive = computed(() => {