feat(console): add loading state for stripe actions (#4226)

packages/console/src/components/BillInfo/index.tsx

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { useContext, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
 import Tip from '@/assets/icons/tip.svg';
@@ -20,6 +20,7 @@ type Props = {
 function BillInfo({ cost, isManagePaymentVisible }: Props) {
   const { currentTenantId } = useContext(TenantsContext);
   const { visitManagePaymentPage } = useSubscribe();
+  const [isLoading, setIsLoading] = useState(false);
 
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
@@ -55,8 +56,11 @@ function BillInfo({ cost, isManagePaymentVisible }: Props) {
       {isManagePaymentVisible && (
         <Button
           title="subscription.manage_payment"
-          onClick={() => {
-            void visitManagePaymentPage(currentTenantId);
+          isLoading={isLoading}
+          onClick={async () => {
+            setIsLoading(true);
+            await visitManagePaymentPage(currentTenantId);
+            setIsLoading(false);
           }}
         />
       )}

packages/console/src/components/PaymentOverdueModal/index.tsx

@@ -23,6 +23,7 @@ function PaymentOverdueModal() {
   const { currentTenant, currentTenantId } = useContext(TenantsContext);
   const { data: invoices, error } = useInvoices(currentTenantId);
   const { visitManagePaymentPage } = useSubscribe();
+  const [isActionLoading, setIsActionLoading] = useState(false);
   const isLoadingInvoices = !invoices && !error;
 
   const latestUnpaidInvoice = useMemo(() => {
@@ -69,8 +70,11 @@ function PaymentOverdueModal() {
             <Button
               type="primary"
               title="upsell.payment_overdue_modal.update_payment"
-              onClick={() => {
-                void visitManagePaymentPage(currentTenantId);
+              isLoading={isActionLoading}
+              onClick={async () => {
+                setIsActionLoading(true);
+                await visitManagePaymentPage(currentTenantId);
+                setIsActionLoading(false);
               }}
             />
           </>

packages/console/src/ds-components/Button/index.tsx

@@ -2,7 +2,6 @@ import type { AdminConsoleKey } from '@logto/phrases';
 import classNames from 'classnames';
 import type { HTMLProps, ReactElement, ReactNode } from 'react';
 import { useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 
 import { Ring as Spinner } from '@/ds-components/Spinner';
 
@@ -54,9 +53,9 @@ function Button({
   onClick,
   trailingIcon,
   to,
+  disabled,
   ...rest
 }: Props) {
-  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const [showSpinner, setShowSpinner] = useState(false);
   const timerRef = useRef<number>();
 
@@ -87,6 +86,7 @@ function Button({
       )}
       type={htmlType}
       title={to}
+      disabled={isLoading || disabled}
       onClick={(event) => {
         if (isLoading) {
           return false;

packages/console/src/ds-components/InlineNotification/index.tsx

@@ -20,6 +20,7 @@ type Props = {
   onClick?: () => void;
   variant?: 'plain' | 'shadow';
   hasIcon?: boolean;
+  isActionLoading?: boolean;
   className?: string;
 };
 
@@ -31,6 +32,7 @@ function InlineNotification({
   severity = 'info',
   variant = 'plain',
   hasIcon = true,
+  isActionLoading = false,
   className,
 }: Props) {
   return (
@@ -57,7 +59,13 @@ function InlineNotification({
       )}
       {action && onClick && (
         <div className={styles.action}>
-          <Button title={action} type="text" size="small" onClick={onClick} />
+          <Button
+            title={action}
+            type="text"
+            size="small"
+            isLoading={isActionLoading}
+            onClick={onClick}
+          />
         </div>
       )}
     </div>

packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/MauLimitExceededNotification/index.tsx

@@ -1,4 +1,4 @@
-import { useContext, useMemo } from 'react';
+import { useContext, useMemo, useState } from 'react';
 
 import { toastResponseError } from '@/cloud/hooks/use-cloud-api';
 import { subscriptionPage } from '@/consts/pages';
@@ -24,6 +24,7 @@ function MauLimitExceededNotification({ activeUsers, currentPlan, className }: P
   const { subscribe } = useSubscribe();
   const { show } = useConfirmModal();
   const { data: subscriptionPlans } = useSubscriptionPlans();
+  const [isLoading, setIsLoading] = useState(false);
   const proPlan = useMemo(
     () => subscriptionPlans?.find(({ id }) => id === ReservedPlanId.pro),
     [subscriptionPlans]
@@ -46,14 +47,19 @@ function MauLimitExceededNotification({ activeUsers, currentPlan, className }: P
       severity="error"
       action="subscription.upgrade_pro"
       className={className}
+      isActionLoading={isLoading}
       onClick={async () => {
         try {
+          setIsLoading(true);
           await subscribe({
             planId: proPlan.id,
             tenantId: currentTenantId,
             callbackPage: subscriptionPage,
           });
+          setIsLoading(false);
         } catch (error: unknown) {
+          setIsLoading(false);
+
           if (await isExceededQuotaLimitError(error)) {
             await show({
               ModalContent: () => <NotEligibleSwitchPlanModalContent targetPlan={proPlan} />,

packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/PaymentOverdueNotification/index.tsx

@@ -1,5 +1,5 @@
 import { conditional } from '@silverhand/essentials';
-import { useContext, useMemo } from 'react';
+import { useContext, useMemo, useState } from 'react';
 
 import { TenantsContext } from '@/contexts/TenantsProvider';
 import DynamicT from '@/ds-components/DynamicT';
@@ -15,6 +15,7 @@ type Props = {
 function PaymentOverdueNotification({ className }: Props) {
   const { currentTenantId } = useContext(TenantsContext);
   const { visitManagePaymentPage } = useSubscribe();
+  const [isActionLoading, setIsActionLoading] = useState(false);
   const { data: invoices, error } = useInvoices(currentTenantId);
   const isLoadingInvoices = !invoices && !error;
   const latestUnpaidInvoice = useMemo(
@@ -31,8 +32,11 @@ function PaymentOverdueNotification({ className }: Props) {
       severity="error"
       action="subscription.update_payment"
       className={className}
-      onClick={() => {
-        void visitManagePaymentPage(currentTenantId);
+      isActionLoading={isActionLoading}
+      onClick={async () => {
+        setIsActionLoading(true);
+        await visitManagePaymentPage(currentTenantId);
+        setIsActionLoading(false);
       }}
     >
       <DynamicT

packages/console/src/pages/TenantSettings/Subscription/SwitchPlanActionBar/index.tsx

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { useContext, useState } from 'react';
 import { toast } from 'react-hot-toast';
 import { Trans, useTranslation } from 'react-i18next';
 
@@ -35,6 +35,7 @@ function SwitchPlanActionBar({
   const { currentTenantId } = useContext(TenantsContext);
   const { subscribe, cancelSubscription } = useSubscribe();
   const { show } = useConfirmModal();
+  const [isLoading, setIsLoading] = useState(false);
 
   const handleSubscribe = async (targetPlanId: string, isDowngrade: boolean) => {
     const currentPlan = subscriptionPlans.find(({ id }) => id === currentSubscriptionPlanId);
@@ -59,6 +60,7 @@ function SwitchPlanActionBar({
     }
 
     try {
+      setIsLoading(true);
       if (targetPlanId === ReservedPlanId.free) {
         await cancelSubscription(currentTenantId);
         onSubscriptionUpdated();
@@ -76,7 +78,10 @@ function SwitchPlanActionBar({
         isDowngrade,
         callbackPage: subscriptionPage,
       });
+
+      setIsLoading(false);
     } catch (error: unknown) {
+      setIsLoading(false);
       if (await isExceededQuotaLimitError(error)) {
         await show({
           ModalContent: () => (
@@ -115,6 +120,7 @@ function SwitchPlanActionBar({
               }
               type={isDowngrade ? 'default' : 'primary'}
               disabled={isCurrentPlan}
+              isLoading={!isCurrentPlan && isLoading}
               onClick={() => {
                 void handleSubscribe(planId, isDowngrade);
               }}