feat: SaaS price plan frontend (#1683)

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

web/context/modal-context.tsx

@@ -3,10 +3,12 @@
 import type { Dispatch, SetStateAction } from 'react'
 import { useState } from 'react'
 import { createContext, useContext } from 'use-context-selector'
+import { useRouter, useSearchParams } from 'next/navigation'
 import AccountSetting from '@/app/components/header/account-setting'
 import ApiBasedExtensionModal from '@/app/components/header/account-setting/api-based-extension-page/modal'
 import ModerationSettingModal from '@/app/components/app/configuration/toolbox/moderation/moderation-setting-modal'
 import ExternalDataToolModal from '@/app/components/app/configuration/tools/external-data-tool-modal'
+import Pricing from '@/app/components/billing/pricing'
 import type { ModerationConfig } from '@/models/debug'
 import type {
   ApiBasedExtension,
@@ -25,11 +27,13 @@ const ModalContext = createContext<{
   setShowApiBasedExtensionModal: Dispatch<SetStateAction<ModalState<ApiBasedExtension> | null>>
   setShowModerationSettingModal: Dispatch<SetStateAction<ModalState<ModerationConfig> | null>>
   setShowExternalDataToolModal: Dispatch<SetStateAction<ModalState<ExternalDataTool> | null>>
+  setShowPricingModal: Dispatch<SetStateAction<any>>
 }>({
   setShowAccountSettingModal: () => {},
   setShowApiBasedExtensionModal: () => {},
   setShowModerationSettingModal: () => {},
   setShowExternalDataToolModal: () => {},
+  setShowPricingModal: () => {},
 })
 
 export const useModalContext = () => useContext(ModalContext)
@@ -44,6 +48,9 @@ export const ModalContextProvider = ({
   const [showApiBasedExtensionModal, setShowApiBasedExtensionModal] = useState<ModalState<ApiBasedExtension> | null>(null)
   const [showModerationSettingModal, setShowModerationSettingModal] = useState<ModalState<ModerationConfig> | null>(null)
   const [showExternalDataToolModal, setShowExternalDataToolModal] = useState<ModalState<ExternalDataTool> | null>(null)
+  const searchParams = useSearchParams()
+  const router = useRouter()
+  const [showPricingModal, setShowPricingModal] = useState(searchParams.get('show-pricing') === '1')
 
   const handleCancelAccountSettingModal = () => {
     setShowAccountSettingModal(null)
@@ -93,6 +100,7 @@ export const ModalContextProvider = ({
       setShowApiBasedExtensionModal,
       setShowModerationSettingModal,
       setShowExternalDataToolModal,
+      setShowPricingModal: () => setShowPricingModal(true),
     }}>
       <>
         {children}
@@ -104,6 +112,7 @@ export const ModalContextProvider = ({
             />
           )
         }
+
         {
           !!showApiBasedExtensionModal && (
             <ApiBasedExtensionModal
@@ -132,6 +141,17 @@ export const ModalContextProvider = ({
             />
           )
         }
+
+        {
+          !!showPricingModal && (
+            <Pricing onCancel={() => {
+              if (searchParams.get('show-pricing') === '1')
+                router.push(location.pathname, { forceOptimisticNavigation: true })
+
+              setShowPricingModal(false)
+            }} />
+          )
+        }
       </>
     </ModalContext.Provider>
   )

web/context/provider-context.tsx

@@ -2,10 +2,16 @@
 
 import { createContext, useContext } from 'use-context-selector'
 import useSWR from 'swr'
+import { useEffect, useState } from 'react'
 import { fetchDefaultModal, fetchModelList, fetchSupportRetrievalMethods } from '@/service/common'
 import { ModelFeature, ModelType } from '@/app/components/header/account-setting/model-page/declarations'
 import type { BackendModel } from '@/app/components/header/account-setting/model-page/declarations'
 import type { RETRIEVE_METHOD } from '@/types/app'
+import { Plan, type UsagePlanInfo } from '@/app/components/billing/type'
+import { fetchCurrentPlanInfo } from '@/service/billing'
+import { parseCurrentPlan } from '@/app/components/billing/utils'
+import { defaultPlan } from '@/app/components/billing/config'
+
 const ProviderContext = createContext<{
   textGenerationModelList: BackendModel[]
   embeddingsModelList: BackendModel[]
@@ -23,6 +29,13 @@ const ProviderContext = createContext<{
   isRerankDefaultModelVaild: boolean
   mutateRerankDefaultModel: () => void
   supportRetrievalMethods: RETRIEVE_METHOD[]
+  plan: {
+    type: Plan
+    usage: UsagePlanInfo
+    total: UsagePlanInfo
+  }
+  isFetchedPlan: boolean
+  enableBilling: boolean
 }>({
       textGenerationModelList: [],
       embeddingsModelList: [],
@@ -40,6 +53,21 @@ const ProviderContext = createContext<{
       isRerankDefaultModelVaild: false,
       mutateRerankDefaultModel: () => {},
       supportRetrievalMethods: [],
+      plan: {
+        type: Plan.sandbox,
+        usage: {
+          vectorSpace: 32,
+          buildApps: 12,
+          teamMembers: 1,
+        },
+        total: {
+          vectorSpace: 200,
+          buildApps: 50,
+          teamMembers: 1,
+        },
+      },
+      isFetchedPlan: false,
+      enableBilling: false,
     })
 
 export const useProviderContext = () => useContext(ProviderContext)
@@ -80,6 +108,21 @@ export const ProviderContextProvider = ({
       mutateRerankModelList()
   }
 
+  const [plan, setPlan] = useState(defaultPlan)
+  const [isFetchedPlan, setIsFetchedPlan] = useState(false)
+  const [enableBilling, setEnableBilling] = useState(true)
+  useEffect(() => {
+    (async () => {
+      const data = await fetchCurrentPlanInfo()
+      const enabled = data.enabled
+      setEnableBilling(enabled)
+      if (enabled) {
+        setPlan(parseCurrentPlan(data))
+        setIsFetchedPlan(true)
+      }
+    })()
+  }, [])
+
   return (
     <ProviderContext.Provider value={{
       textGenerationModelList: textGenerationModelList || [],
@@ -98,6 +141,9 @@ export const ProviderContextProvider = ({
       isRerankDefaultModelVaild,
       mutateRerankDefaultModel,
       supportRetrievalMethods: supportRetrievalMethods?.retrieval_method || [],
+      plan,
+      isFetchedPlan,
+      enableBilling,
     }}>
       {children}
     </ProviderContext.Provider>