feat: make billing management entry prominent and enable current plan portal (#29321)

web/service/billing.ts

@@ -1,4 +1,4 @@
-import { get } from './base'
+import { get, put } from './base'
 import type { CurrentPlanInfoBackend, SubscriptionUrlsBackend } from '@/app/components/billing/type'
 
 export const fetchCurrentPlanInfo = () => {
@@ -12,3 +12,13 @@ export const fetchSubscriptionUrls = (plan: string, interval: string) => {
 export const fetchBillingUrl = () => {
   return get<{ url: string }>('/billing/invoices')
 }
+
+export const bindPartnerStackInfo = (partnerKey: string, clickId: string) => {
+  return put(`/billing/partners/${partnerKey}/tenants`, {
+    body: {
+      click_id: clickId,
+    },
+  }, {
+    silent: true,
+  })
+}

web/service/use-billing.ts

@@ -1,19 +1,22 @@
-import { useMutation } from '@tanstack/react-query'
-import { put } from './base'
+import { useMutation, useQuery } from '@tanstack/react-query'
+import { bindPartnerStackInfo, fetchBillingUrl } from '@/service/billing'
 
 const NAME_SPACE = 'billing'
 
 export const useBindPartnerStackInfo = () => {
   return useMutation({
     mutationKey: [NAME_SPACE, 'bind-partner-stack'],
-    mutationFn: (data: { partnerKey: string; clickId: string }) => {
-      return put(`/billing/partners/${data.partnerKey}/tenants`, {
-        body: {
-          click_id: data.clickId,
-        },
-      }, {
-        silent: true,
-      })
+    mutationFn: (data: { partnerKey: string; clickId: string }) => bindPartnerStackInfo(data.partnerKey, data.clickId),
+  })
+}
+
+export const useBillingUrl = (enabled: boolean) => {
+  return useQuery({
+    queryKey: [NAME_SPACE, 'url'],
+    enabled,
+    queryFn: async () => {
+      const res = await fetchBillingUrl()
+      return res.url
     },
   })
 }