diff --git a/packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/PlanCardItem/index.tsx b/packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/PlanCardItem/index.tsx index 70901fced72..e9598859e66 100644 --- a/packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/PlanCardItem/index.tsx +++ b/packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/PlanCardItem/index.tsx @@ -20,9 +20,10 @@ import * as styles from './index.module.scss'; type Props = { readonly plan: SubscriptionPlan; readonly onSelect: () => void; + readonly buttonProps?: Partial>; }; -function PlanCardItem({ plan, onSelect }: Props) { +function PlanCardItem({ plan, onSelect, buttonProps }: Props) { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.upsell.create_tenant' }); const { tenants } = useContext(TenantsContext); const { stripeProducts, id: planId, name: planName } = plan; @@ -88,6 +89,7 @@ function PlanCardItem({ plan, onSelect }: Props) { type={isFreePlan ? 'outline' : 'primary'} size="large" onClick={onSelect} + {...buttonProps} /> {planId === ReservedPlanId.Hobby && ( diff --git a/packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/index.tsx b/packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/index.tsx index 01d68c1e8bb..38d4260599f 100644 --- a/packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/index.tsx +++ b/packages/console/src/components/CreateTenantModal/SelectTenantPlanModal/index.tsx @@ -1,5 +1,6 @@ import { ReservedPlanId } from '@logto/schemas'; import { conditional } from '@silverhand/essentials'; +import { useState } from 'react'; import { Trans, useTranslation } from 'react-i18next'; import Modal from 'react-modal'; @@ -27,6 +28,7 @@ type Props = { }; function SelectTenantPlanModal({ tenantData, onClose }: Props) { + const [isSubmitting, setIsSubmitting] = useState(); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); const { data: subscriptionPlans } = useSubscriptionPlans(); const { subscribe } = useSubscribe(); @@ -40,6 +42,7 @@ function SelectTenantPlanModal({ tenantData, onClose }: Props) { const handleSelectPlan = async (plan: SubscriptionPlan) => { const { id: planId } = plan; try { + setIsSubmitting(planId); if (planId === ReservedPlanId.Free) { const { name, tag, regionName } = tenantData; const newTenant = await cloudApi.post('/api/tenants', { body: { name, tag, regionName } }); @@ -52,6 +55,8 @@ function SelectTenantPlanModal({ tenantData, onClose }: Props) { await subscribe({ planId, tenantData }); } catch (error: unknown) { void toastResponseError(error); + } finally { + setIsSubmitting(undefined); } }; @@ -82,6 +87,10 @@ function SelectTenantPlanModal({ tenantData, onClose }: Props) { { void handleSelectPlan(plan); }} diff --git a/packages/console/src/components/CreateTenantModal/index.tsx b/packages/console/src/components/CreateTenantModal/index.tsx index 513a73b5fb8..d6525cc5162 100644 --- a/packages/console/src/components/CreateTenantModal/index.tsx +++ b/packages/console/src/components/CreateTenantModal/index.tsx @@ -10,7 +10,6 @@ import CreateTenantHeaderIcon from '@/assets/icons/create-tenant-header.svg'; import { useCloudApi } from '@/cloud/hooks/use-cloud-api'; import { type TenantResponse } from '@/cloud/types/router'; import Region, { RegionName } from '@/components/Region'; -import { isDevFeaturesEnabled } from '@/consts/env'; import Button from '@/ds-components/Button'; import DangerousRaw from '@/ds-components/DangerousRaw'; import FormField from '@/ds-components/FormField'; @@ -90,6 +89,7 @@ function CreateTenantModal({ isOpen, onClose }: Props) { } footer={