From 098cfd7c547f14cd9437b11dd7001af2859ff9fd Mon Sep 17 00:00:00 2001
From: Darcy Ye <darcyye@silverhand.io>
Date: Fri, 12 Jan 2024 11:50:07 +0800
Subject: [PATCH] fix(console): upcoming billing info not updated when
 subscription changes (#5223)

---
 .../Subscription/SwitchPlanActionBar/index.tsx   |  4 ++--
 .../pages/TenantSettings/Subscription/index.tsx  | 16 ++++++++++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/console/src/pages/TenantSettings/Subscription/SwitchPlanActionBar/index.tsx b/packages/console/src/pages/TenantSettings/Subscription/SwitchPlanActionBar/index.tsx
index 1537056ea..3126d0aff 100644
--- a/packages/console/src/pages/TenantSettings/Subscription/SwitchPlanActionBar/index.tsx
+++ b/packages/console/src/pages/TenantSettings/Subscription/SwitchPlanActionBar/index.tsx
@@ -23,7 +23,7 @@ import * as styles from './index.module.scss';
 type Props = {
   currentSubscriptionPlanId: string;
   subscriptionPlans: SubscriptionPlan[];
-  onSubscriptionUpdated: () => void;
+  onSubscriptionUpdated: () => Promise<void>;
 };
 
 function SwitchPlanActionBar({
@@ -67,7 +67,7 @@ function SwitchPlanActionBar({
       setCurrentLoadingPlanId(targetPlanId);
       if (targetPlanId === ReservedPlanId.Free) {
         await cancelSubscription(currentTenantId);
-        onSubscriptionUpdated();
+        await onSubscriptionUpdated();
         toast.success(
           <Trans components={{ name: <PlanName name={targetPlan.name} /> }}>
             {t('downgrade_success')}
diff --git a/packages/console/src/pages/TenantSettings/Subscription/index.tsx b/packages/console/src/pages/TenantSettings/Subscription/index.tsx
index d761a69da..a1220db2e 100644
--- a/packages/console/src/pages/TenantSettings/Subscription/index.tsx
+++ b/packages/console/src/pages/TenantSettings/Subscription/index.tsx
@@ -19,7 +19,11 @@ function Subscription() {
   const { subscriptionPlans, currentPlan, currentSubscription, onCurrentSubscriptionUpdated } =
     useContext(SubscriptionDataContext);
 
-  const { data: subscriptionUsage, isLoading } = useSubscriptionUsage(currentTenantId);
+  const {
+    data: subscriptionUsage,
+    isLoading,
+    mutate: mutateSubscriptionUsage,
+  } = useSubscriptionUsage(currentTenantId);
 
   const reservedPlans = pickupFeaturedPlans(subscriptionPlans);
 
@@ -43,7 +47,15 @@ function Subscription() {
       <SwitchPlanActionBar
         currentSubscriptionPlanId={currentSubscription.planId}
         subscriptionPlans={reservedPlans}
-        onSubscriptionUpdated={onCurrentSubscriptionUpdated}
+        onSubscriptionUpdated={async () => {
+          /**
+           * The upcoming billing info is calculated based on the current subscription usage,
+           * and the usage is based on the current subscription plan,
+           * need to manually trigger the usage update while the subscription plan is changed.
+           */
+          onCurrentSubscriptionUpdated();
+          await mutateSubscriptionUsage();
+        }}
       />
     </div>
   );