fix(console): manual trigger usage update (#7386)

manual trigger usage update on security feature updates

Author: simeng-li

packages/console/src/pages/Security/Blocklist/BlocklistForm/index.tsx

@@ -1,5 +1,6 @@
 import { emailOrEmailDomainRegex } from '@logto/core-kit';
 import { type SignInExperience, type EmailBlocklistPolicy } from '@logto/schemas';
+import { useContext } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
@@ -13,6 +14,7 @@ import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal';
 import { emailBlocklist } from '@/consts';
 import { isCloud } from '@/consts/env';
 import { latestProPlanId } from '@/consts/subscriptions';
+import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
 import FormField from '@/ds-components/FormField';
 import Switch from '@/ds-components/Switch';
 import useApi from '@/hooks/use-api';
@@ -31,6 +33,7 @@ function BlocklistForm({ formData }: Props) {
   const api = useApi();
   const { mutate: mutateGlobal } = useSWRConfig();
   const { isFreeTenant } = usePaywall();
+  const { mutateSubscriptionQuotaAndUsages } = useContext(SubscriptionDataContext);
 
   const { t } = useTranslation(undefined, {
     keyPrefix: 'admin_console.security',
@@ -70,6 +73,7 @@ function BlocklistForm({ formData }: Props) {
       reset(emailBlocklistPolicy);
       // Global mutate the SIE data
       await mutateGlobal('api/sign-in-exp');
+      mutateSubscriptionQuotaAndUsages();
       toast.success(globalT('general.saved'));
     })
   );

packages/console/src/pages/Security/Captcha/index.tsx

@@ -1,5 +1,5 @@
 import { CaptchaType, type CaptchaPolicy, type SignInExperience } from '@logto/schemas';
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
@@ -13,6 +13,7 @@ import FormCard, { FormCardSkeleton } from '@/components/FormCard';
 import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal';
 import { captcha } from '@/consts/external-links';
 import { latestProPlanId } from '@/consts/subscriptions';
+import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
 import Button from '@/ds-components/Button';
 import FormField from '@/ds-components/FormField';
 import useApi from '@/hooks/use-api';
@@ -32,6 +33,7 @@ function Captcha() {
   const { guideId } = useParams();
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { isFreeTenant } = usePaywall();
+  const { mutateSubscriptionQuotaAndUsages } = useContext(SubscriptionDataContext);
 
   const [isCreateCaptchaFormOpen, setIsCreateCaptchaFormOpen] = useState(false);
   const { data, isLoading } = useDataFetch();
@@ -55,6 +57,7 @@ function Captcha() {
       })
       .json<SignInExperience>();
     reset(captchaPolicy);
+    mutateSubscriptionQuotaAndUsages();
     toast.success(t('general.saved'));
   });
 

packages/console/src/pages/Security/General/GeneralForm/index.tsx

@@ -1,5 +1,5 @@
 import { type SignInExperience } from '@logto/schemas';
-import { useState, type ChangeEvent } from 'react';
+import { useContext, useState, type ChangeEvent } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
@@ -12,6 +12,7 @@ import FormCard from '@/components/FormCard';
 import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal';
 import { sentinel } from '@/consts';
 import { latestProPlanId } from '@/consts/subscriptions';
+import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
 import Button from '@/ds-components/Button';
 import FormField from '@/ds-components/FormField';
 import Switch from '@/ds-components/Switch';
@@ -35,6 +36,7 @@ function GeneralForm({ formData }: Props) {
   const { mutate: mutateGlobal } = useSWRConfig();
   const [showUnlockModal, setShowUnlockModal] = useState(false);
   const { isFreeTenant } = usePaywall();
+  const { mutateSubscriptionQuotaAndUsages } = useContext(SubscriptionDataContext);
 
   const { t } = useTranslation(undefined, {
     keyPrefix: 'admin_console.security',
@@ -74,6 +76,7 @@ function GeneralForm({ formData }: Props) {
 
       // Global mutate the SIE data
       await mutateGlobal('api/sign-in-exp');
+      mutateSubscriptionQuotaAndUsages();
 
       toast.success(globalT('general.saved'));
     })