fix: not owner can not pay (#1772)

web/app/components/billing/billing-page/index.tsx

@@ -11,23 +11,23 @@ import { useProviderContext } from '@/context/provider-context'
 
 const Billing: FC = () => {
   const { t } = useTranslation()
-  const { isCurrentWorkspaceManager } = useAppContext()
+  const { isCurrentWorkspaceOwner } = useAppContext()
   const [billingUrl, setBillingUrl] = React.useState('')
   const { enableBilling } = useProviderContext()
 
   useEffect(() => {
-    if (!enableBilling && !isCurrentWorkspaceManager)
+    if (!enableBilling || !isCurrentWorkspaceOwner)
       return
     (async () => {
       const { url } = await fetchBillingUrl()
       setBillingUrl(url)
     })()
-  }, [isCurrentWorkspaceManager])
+  }, [isCurrentWorkspaceOwner])
 
   return (
     <div>
       <PlanComp loc={'billing-page'} />
-      {enableBilling && isCurrentWorkspaceManager && billingUrl && (
+      {enableBilling && isCurrentWorkspaceOwner && billingUrl && (
         <a className='mt-5 flex px-6 justify-between h-12 items-center bg-gray-50 rounded-xl cursor-pointer' href={billingUrl} target='_blank'>
           <div className='flex items-center'>
             <ReceiptList className='w-4 h-4 text-gray-700' />

web/app/components/billing/pricing/index.tsx

@@ -9,6 +9,7 @@ import PlanItem from './plan-item'
 import { XClose } from '@/app/components/base/icons/src/vender/line/general'
 import { useProviderContext } from '@/context/provider-context'
 import GridMask from '@/app/components/base/grid-mask'
+import { useAppContext } from '@/context/app-context'
 
 type Props = {
   onCancel: () => void
@@ -19,7 +20,8 @@ const Pricing: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
   const { plan } = useProviderContext()
-
+  const { isCurrentWorkspaceOwner } = useAppContext()
+  const canPay = isCurrentWorkspaceOwner
   const [planRange, setPlanRange] = React.useState<PlanRange>(PlanRange.monthly)
 
   return createPortal(
@@ -41,21 +43,25 @@ const Pricing: FC<Props> = ({
               currentPlan={plan.type}
               plan={Plan.sandbox}
               planRange={planRange}
+              canPay={canPay}
             />
             <PlanItem
               currentPlan={plan.type}
               plan={Plan.professional}
               planRange={planRange}
+              canPay={canPay}
             />
             <PlanItem
               currentPlan={plan.type}
               plan={Plan.team}
               planRange={planRange}
+              canPay={canPay}
             />
             <PlanItem
               currentPlan={plan.type}
               plan={Plan.enterprise}
               planRange={planRange}
+              canPay={canPay}
             />
           </div>
         </div>

web/app/components/billing/pricing/plan-item.tsx

@@ -16,6 +16,7 @@ type Props = {
   currentPlan: Plan
   plan: Plan
   planRange: PlanRange
+  canPay: boolean
 }
 
 const KeyValue = ({ label, value, tooltip }: { label: string; value: string | number | JSX.Element; tooltip?: string }) => {
@@ -65,6 +66,7 @@ const PlanItem: FC<Props> = ({
   plan,
   currentPlan,
   planRange,
+  canPay,
 }) => {
   const { t } = useTranslation()
   const [loading, setLoading] = React.useState(false)
@@ -75,10 +77,13 @@ const PlanItem: FC<Props> = ({
   const planInfo = ALL_PLANS[plan]
   const isYear = planRange === PlanRange.yearly
   const isCurrent = plan === currentPlan
-  const isPlanDisabled = planInfo.level <= ALL_PLANS[currentPlan].level
+  const isPlanDisabled = planInfo.level <= ALL_PLANS[currentPlan].level || (!canPay && plan !== Plan.enterprise)
   const { isCurrentWorkspaceManager } = useAppContext()
 
   const btnText = (() => {
+    if (!canPay && plan !== Plan.enterprise)
+      return t('billing.plansCommon.contractOwner')
+
     if (isCurrent)
       return t('billing.plansCommon.currentPlan')