fix: remove and create app not reload plan (#2220)

web/app/(commonLayout)/apps/AppCard.tsx

@@ -20,6 +20,7 @@ import type { HtmlContentProps } from '@/app/components/base/popover'
 import CustomPopover from '@/app/components/base/popover'
 import Divider from '@/app/components/base/divider'
 import { asyncRunSafe } from '@/utils'
+import { useProviderContext } from '@/context/provider-context'
 
 export type AppCardProps = {
   app: App
@@ -30,6 +31,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
   const { t } = useTranslation()
   const { notify } = useContext(ToastContext)
   const { isCurrentWorkspaceManager } = useAppContext()
+  const { onPlanInfoChanged } = useProviderContext()
   const { push } = useRouter()
 
   const mutateApps = useContextSelector(
@@ -51,6 +53,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
       if (onRefresh)
         onRefresh()
       mutateApps()
+      onPlanInfoChanged()
     }
     catch (e: any) {
       notify({

web/app/(commonLayout)/apps/NewAppCard.tsx

@@ -5,6 +5,7 @@ import classNames from 'classnames'
 import { useTranslation } from 'react-i18next'
 import style from '../list.module.css'
 import NewAppDialog from './NewAppDialog'
+import { useProviderContext } from '@/context/provider-context'
 
 export type CreateAppCardProps = {
   onSuccess?: () => void
@@ -12,6 +13,8 @@ export type CreateAppCardProps = {
 
 const CreateAppCard = forwardRef<HTMLAnchorElement, CreateAppCardProps>(({ onSuccess }, ref) => {
   const { t } = useTranslation()
+  const { onPlanInfoChanged } = useProviderContext()
+
   const [showNewAppDialog, setShowNewAppDialog] = useState(false)
   return (
     <a ref={ref} className={classNames(style.listItem, style.newItemCard)} onClick={() => setShowNewAppDialog(true)}>
@@ -24,7 +27,12 @@ const CreateAppCard = forwardRef<HTMLAnchorElement, CreateAppCardProps>(({ onSuc
         </div>
       </div>
       {/* <div className='text-xs text-gray-500'>{t('app.createFromConfigFile')}</div> */}
-      <NewAppDialog show={showNewAppDialog} onSuccess={onSuccess} onClose={() => setShowNewAppDialog(false)} />
+      <NewAppDialog show={showNewAppDialog} onSuccess={
+        () => {
+          onPlanInfoChanged()
+          if (onSuccess)
+            onSuccess()
+        }} onClose={() => setShowNewAppDialog(false)} />
     </a>
   )
 })

web/context/provider-context.tsx

@@ -34,32 +34,34 @@ const ProviderContext = createContext<{
   }
   isFetchedPlan: boolean
   enableBilling: boolean
+  onPlanInfoChanged: () => void
   enableReplaceWebAppLogo: boolean
 }>({
-  modelProviders: [],
-  textGenerationModelList: [],
-  agentThoughtModelList: [],
-  supportRetrievalMethods: [],
-  hasSettedApiKey: true,
-  plan: {
-    type: Plan.sandbox,
-    usage: {
-      vectorSpace: 32,
-      buildApps: 12,
-      teamMembers: 1,
-      annotatedResponse: 1,
-    },
-    total: {
-      vectorSpace: 200,
-      buildApps: 50,
-      teamMembers: 1,
-      annotatedResponse: 10,
-    },
-  },
-  isFetchedPlan: false,
-  enableBilling: false,
-  enableReplaceWebAppLogo: false,
-})
+      modelProviders: [],
+      textGenerationModelList: [],
+      agentThoughtModelList: [],
+      supportRetrievalMethods: [],
+      hasSettedApiKey: true,
+      plan: {
+        type: Plan.sandbox,
+        usage: {
+          vectorSpace: 32,
+          buildApps: 12,
+          teamMembers: 1,
+          annotatedResponse: 1,
+        },
+        total: {
+          vectorSpace: 200,
+          buildApps: 50,
+          teamMembers: 1,
+          annotatedResponse: 10,
+        },
+      },
+      isFetchedPlan: false,
+      enableBilling: false,
+      onPlanInfoChanged: () => { },
+      enableReplaceWebAppLogo: false,
+    })
 
 export const useProviderContext = () => useContext(ProviderContext)
 
@@ -98,7 +100,6 @@ export const ProviderContextProvider = ({
   const [isFetchedPlan, setIsFetchedPlan] = useState(false)
   const [enableBilling, setEnableBilling] = useState(true)
   const [enableReplaceWebAppLogo, setEnableReplaceWebAppLogo] = useState(false)
-
   const handleOperateUtm = () => {
     let utm
     try {
@@ -116,18 +117,19 @@ export const ProviderContextProvider = ({
     if (utm.utm_source || utm.utm_medium || utm.utm_campaign || utm.utm_content || utm.utm_term)
       operationUtm({ url: '/operation/utm', body: utm })
   }
+  const fetchPlan = async () => {
+    const data = await fetchCurrentPlanInfo()
+    const enabled = data.billing.enabled
+    setEnableBilling(enabled)
+    setEnableReplaceWebAppLogo(data.can_replace_logo)
+    if (enabled) {
+      setPlan(parseCurrentPlan(data))
+      handleOperateUtm()
+      setIsFetchedPlan(true)
+    }
+  }
   useEffect(() => {
-    (async () => {
-      const data = await fetchCurrentPlanInfo()
-      const enabled = data.billing.enabled
-      setEnableBilling(enabled)
-      setEnableReplaceWebAppLogo(data.can_replace_logo)
-      if (enabled) {
-        setPlan(parseCurrentPlan(data))
-        handleOperateUtm()
-        setIsFetchedPlan(true)
-      }
-    })()
+    fetchPlan()
   }, [])
 
   return (
@@ -140,6 +142,7 @@ export const ProviderContextProvider = ({
       plan,
       isFetchedPlan,
       enableBilling,
+      onPlanInfoChanged: fetchPlan,
       enableReplaceWebAppLogo,
     }}>
       {children}