feat: add billing switch. (#1789)

Co-authored-by: StyleZhang <jasonapring2015@outlook.com>

web/app/components/billing/type.ts

@@ -32,9 +32,11 @@ export enum DocumentProcessingPriority {
 }
 
 export type CurrentPlanInfoBackend = {
-  enabled: boolean
-  subscription: {
-    plan: Plan
+  billing: {
+    enabled: boolean
+    subscription: {
+      plan: Plan
+    }
   }
   members: {
     size: number
@@ -53,6 +55,7 @@ export type CurrentPlanInfoBackend = {
     limit: number // total. 0 means unlimited
   }
   docs_processing: DocumentProcessingPriority
+  can_replace_logo: boolean
 }
 
 export type SubscriptionItem = {

web/app/components/billing/utils/index.ts

@@ -10,7 +10,7 @@ const parseLimit = (limit: number) => {
 
 export const parseCurrentPlan = (data: CurrentPlanInfoBackend) => {
   return {
-    type: data.subscription.plan,
+    type: data.billing.subscription.plan,
     usage: {
       vectorSpace: data.vector_space.size,
       buildApps: data.apps?.size || 0,

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

@@ -10,12 +10,16 @@ import { contactSalesUrl } from '@/app/components/billing/config'
 
 const CustomPage = () => {
   const { t } = useTranslation()
-  const { plan } = useProviderContext()
+  const { plan, enableBilling } = useProviderContext()
+
+  const showBillingTip = enableBilling && plan.type === Plan.sandbox
+  const showCustomAppHeaderBrand = enableBilling && plan.type === Plan.sandbox
+  const showContact = enableBilling && (plan.type === Plan.professional || plan.type === Plan.team)
 
   return (
     <div className='flex flex-col'>
       {
-        plan.type === Plan.sandbox && (
+        showBillingTip && (
           <GridMask canvasClassName='!rounded-xl'>
             <div className='flex justify-between mb-1 px-6 py-5 h-[88px] shadow-md rounded-xl border-[0.5px] border-gray-200'>
               <div className={`${s.textGradient} leading-[24px] text-base font-semibold`}>
@@ -29,7 +33,7 @@ const CustomPage = () => {
       }
       <CustomWebAppBrand />
       {
-        plan.type === Plan.sandbox && (
+        showCustomAppHeaderBrand && (
           <>
             <div className='my-2 h-[0.5px] bg-gray-100'></div>
             <CustomAppHeaderBrand />
@@ -37,7 +41,7 @@ const CustomPage = () => {
         )
       }
       {
-        (plan.type === Plan.professional || plan.type === Plan.team) && (
+        showContact && (
           <div className='absolute bottom-0 h-[50px] leading-[50px] text-xs text-gray-500'>
             {t('custom.customize.prefix')}
             <a className='text-[#155EEF]' href={contactSalesUrl} target='_blank'>{t('custom.customize.contactUs')}</a>

web/app/components/custom/custom-web-app-brand/index.tsx

@@ -24,7 +24,7 @@ const ALLOW_FILE_EXTENSIONS = ['svg', 'png']
 const CustomWebAppBrand = () => {
   const { t } = useTranslation()
   const { notify } = useToastContext()
-  const { plan } = useProviderContext()
+  const { plan, enableBilling } = useProviderContext()
   const {
     currentWorkspace,
     mutateCurrentWorkspace,
@@ -32,10 +32,11 @@ const CustomWebAppBrand = () => {
   } = useAppContext()
   const [fileId, setFileId] = useState('')
   const [uploadProgress, setUploadProgress] = useState(0)
-  const isSandbox = plan.type === Plan.sandbox
+  const isSandbox = enableBilling && plan.type === Plan.sandbox
   const uploading = uploadProgress > 0 && uploadProgress < 100
   const webappLogo = currentWorkspace.custom_config?.replace_webapp_logo || ''
   const webappBrandRemoved = currentWorkspace.custom_config?.remove_webapp_brand
+  const uploadDisabled = isSandbox || webappBrandRemoved || !isCurrentWorkspaceManager
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0]
@@ -153,9 +154,9 @@ const CustomWebAppBrand = () => {
               <Button
                 className={`
                   relative mr-2 !h-8 !px-3 bg-white !text-[13px] 
-                  ${isSandbox ? 'opacity-40' : ''}
+                  ${uploadDisabled ? 'opacity-40' : ''}
                 `}
-                disabled={isSandbox || webappBrandRemoved || !isCurrentWorkspaceManager}
+                disabled={uploadDisabled}
               >
                 <ImagePlus className='mr-2 w-4 h-4' />
                 {
@@ -166,13 +167,13 @@ const CustomWebAppBrand = () => {
                 <input
                   className={`
                     absolute block inset-0 opacity-0 text-[0] w-full
-                    ${(isSandbox || webappBrandRemoved) ? 'cursor-not-allowed' : 'cursor-pointer'}
+                    ${uploadDisabled ? 'cursor-not-allowed' : 'cursor-pointer'}
                   `}
                   onClick={e => (e.target as HTMLInputElement).value = ''}
                   type='file'
                   accept={ALLOW_FILE_EXTENSIONS.map(ext => `.${ext}`).join(',')}
                   onChange={handleChange}
-                  disabled={isSandbox || webappBrandRemoved || !isCurrentWorkspaceManager}
+                  disabled={uploadDisabled}
                 />
               </Button>
             )
@@ -213,9 +214,9 @@ const CustomWebAppBrand = () => {
           <Button
             className={`
               !h-8 !px-3 bg-white !text-[13px] 
-              ${isSandbox ? 'opacity-40' : ''}
+              ${(uploadDisabled || (!webappLogo && !webappBrandRemoved)) ? 'opacity-40' : ''}
             `}
-            disabled={isSandbox || (!webappLogo && !webappBrandRemoved) || webappBrandRemoved || !isCurrentWorkspaceManager}
+            disabled={uploadDisabled || (!webappLogo && !webappBrandRemoved)}
             onClick={handleRestore}
           >
             {t('custom.restore')}

web/app/components/header/account-setting/index.tsx

@@ -31,7 +31,6 @@ import { Colors } from '@/app/components/base/icons/src/vender/line/editor'
 import { Colors as ColorsSolid } from '@/app/components/base/icons/src/vender/solid/editor'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { useProviderContext } from '@/context/provider-context'
-import { IS_CE_EDITION } from '@/config'
 
 const iconClassName = `
   w-4 h-4 ml-3 mr-2
@@ -59,7 +58,7 @@ export default function AccountSetting({
 }: IAccountSettingProps) {
   const [activeMenu, setActiveMenu] = useState(activeTab)
   const { t } = useTranslation()
-  const { enableBilling } = useProviderContext()
+  const { enableBilling, enableReplaceWebAppLogo } = useProviderContext()
 
   const workplaceGroupItems = (() => {
     return [
@@ -101,7 +100,7 @@ export default function AccountSetting({
         activeIcon: <Webhooks className={iconClassName} />,
       },
       {
-        key: IS_CE_EDITION ? false : 'custom',
+        key: (enableReplaceWebAppLogo || enableBilling) ? 'custom' : false,
         name: t('custom.custom'),
         icon: <Colors className={iconClassName} />,
         activeIcon: <ColorsSolid className={iconClassName} />,

web/context/provider-context.tsx

@@ -37,6 +37,7 @@ const ProviderContext = createContext<{
   }
   isFetchedPlan: boolean
   enableBilling: boolean
+  enableReplaceWebAppLogo: boolean
 }>({
       textGenerationModelList: [],
       embeddingsModelList: [],
@@ -72,6 +73,7 @@ const ProviderContext = createContext<{
       },
       isFetchedPlan: false,
       enableBilling: false,
+      enableReplaceWebAppLogo: false,
     })
 
 export const useProviderContext = () => useContext(ProviderContext)
@@ -119,11 +121,13 @@ export const ProviderContextProvider = ({
   const [plan, setPlan] = useState(defaultPlan)
   const [isFetchedPlan, setIsFetchedPlan] = useState(false)
   const [enableBilling, setEnableBilling] = useState(true)
+  const [enableReplaceWebAppLogo, setEnableReplaceWebAppLogo] = useState(false)
   useEffect(() => {
     (async () => {
       const data = await fetchCurrentPlanInfo()
-      const enabled = data.enabled
+      const enabled = data.billing.enabled
       setEnableBilling(enabled)
+      setEnableReplaceWebAppLogo(data.can_replace_logo)
       if (enabled) {
         setPlan(parseCurrentPlan(data))
         // setPlan(parseCurrentPlan({
@@ -160,6 +164,7 @@ export const ProviderContextProvider = ({
       plan,
       isFetchedPlan,
       enableBilling,
+      enableReplaceWebAppLogo,
     }}>
       {children}
     </ProviderContext.Provider>

web/service/billing.ts

@@ -2,7 +2,7 @@ import { get } from './base'
 import type { CurrentPlanInfoBackend, SubscriptionUrlsBackend } from '@/app/components/billing/type'
 
 export const fetchCurrentPlanInfo = () => {
-  return get<Promise<CurrentPlanInfoBackend>>('/billing/info')
+  return get<Promise<CurrentPlanInfoBackend>>('/features')
 }
 
 export const fetchSubscriptionUrls = (plan: string, interval: string) => {