From 1ff4d75084ec9fd0e45ea8ce2cf03022c80530ff Mon Sep 17 00:00:00 2001
From: lmlm <no_7seven@163.com>
Date: Tue, 2 Jun 2026 12:05:15 +0800
Subject: [PATCH] refactor(web): migrate anthropic quota notice storage
 (#36922)

Co-authored-by: lmlm <7487674+popsiclelmlm@users.noreply.github.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: yyh <92089059+lyzno1@users.noreply.github.com>
---
 eslint-suppressions.json                  |  3 ---
 web/context/provider-context-provider.tsx | 15 ++++++++++++---
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index a8d3bf9b1e..7892c03b58 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -5146,9 +5146,6 @@
     }
   },
   "web/context/provider-context-provider.tsx": {
-    "no-restricted-globals": {
-      "count": 2
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
diff --git a/web/context/provider-context-provider.tsx b/web/context/provider-context-provider.tsx
index b69a395a76..90a47451bf 100644
--- a/web/context/provider-context-provider.tsx
+++ b/web/context/provider-context-provider.tsx
@@ -15,6 +15,7 @@ import {
   ModelTypeEnum,
 } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { ZENDESK_FIELD_IDS } from '@/config'
+import { useLocalStorage } from '@/hooks/use-local-storage'
 import { fetchCurrentPlanInfo } from '@/service/billing'
 import {
   useModelListByType,
@@ -38,6 +39,8 @@ const unlimitedMemberInviteLimit: MemberInviteLimit = {
   limit: 0,
 }
 
+const ANTHROPIC_QUOTA_NOTICE_STORAGE_KEY = 'anthropic_quota_notice'
+
 const resolveMemberInviteLimit = (data: Awaited<ReturnType<typeof fetchCurrentPlanInfo>>): MemberInviteLimit => {
   if (!data)
     return unlimitedMemberInviteLimit
@@ -154,8 +157,14 @@ export const ProviderContextProvider = ({
   // #endregion Zendesk conversation fields
 
   const { t } = useTranslation()
+  const [anthropicQuotaNotice, setAnthropicQuotaNotice] = useLocalStorage<string>(
+    ANTHROPIC_QUOTA_NOTICE_STORAGE_KEY,
+    'false',
+    { raw: true },
+  )
+
   useEffect(() => {
-    if (localStorage.getItem('anthropic_quota_notice') === 'true')
+    if (anthropicQuotaNotice === 'true')
       return
 
     if (dayjs().isAfter(dayjs('2025-03-17')))
@@ -166,14 +175,14 @@ export const ProviderContextProvider = ({
       if (anthropic && anthropic.system_configuration.current_quota_type === CurrentSystemQuotaTypeEnum.trial) {
         const quota = anthropic.system_configuration.quota_configurations.find(item => item.quota_type === anthropic.system_configuration.current_quota_type)
         if (quota && quota.is_valid && quota.quota_used < quota.quota_limit) {
-          localStorage.setItem('anthropic_quota_notice', 'true')
+          setAnthropicQuotaNotice('true')
           toast.info(t('provider.anthropicHosted.trialQuotaTip', { ns: 'common' }), {
             timeout: 60000,
           })
         }
       }
     }
-  }, [providersData, t])
+  }, [anthropicQuotaNotice, providersData, setAnthropicQuotaNotice, t])
 
   return (
     <ProviderContext.Provider value={{