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

web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx

@@ -8,7 +8,7 @@ import { ALL_PLANS } from '../../../config'
 import Toast from '../../../../base/toast'
 import { PlanRange } from '../../plan-switcher/plan-range-switcher'
 import { useAppContext } from '@/context/app-context'
-import { fetchSubscriptionUrls } from '@/service/billing'
+import { fetchBillingUrl, fetchSubscriptionUrls } from '@/service/billing'
 import List from './list'
 import Button from './button'
 import { Professional, Sandbox, Team } from '../../assets'
@@ -39,7 +39,8 @@ const CloudPlanItem: FC<CloudPlanItemProps> = ({
   const planInfo = ALL_PLANS[plan]
   const isYear = planRange === PlanRange.yearly
   const isCurrent = plan === currentPlan
-  const isPlanDisabled = planInfo.level <= ALL_PLANS[currentPlan].level
+  const isCurrentPaidPlan = isCurrent && !isFreePlan
+  const isPlanDisabled = isCurrentPaidPlan ? false : planInfo.level <= ALL_PLANS[currentPlan].level
   const { isCurrentWorkspaceManager } = useAppContext()
 
   const btnText = useMemo(() => {
@@ -60,10 +61,6 @@ const CloudPlanItem: FC<CloudPlanItemProps> = ({
     if (isPlanDisabled)
       return
 
-    if (isFreePlan)
-      return
-
-    // Only workspace manager can buy plan
     if (!isCurrentWorkspaceManager) {
       Toast.notify({
         type: 'error',
@@ -74,6 +71,15 @@ const CloudPlanItem: FC<CloudPlanItemProps> = ({
     }
     setLoading(true)
     try {
+      if (isCurrentPaidPlan) {
+        const res = await fetchBillingUrl()
+        window.open(res.url, '_blank')
+        return
+      }
+
+      if (isFreePlan)
+        return
+
       const res = await fetchSubscriptionUrls(plan, isYear ? 'year' : 'month')
       // Adb Block additional tracking block the gtag, so we need to redirect directly
       window.location.href = res.url