chore: launch us region

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<React.ComponentProps<typeof Button>>;
 };
 
-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}
  />
  </div>
  {planId === ReservedPlanId.Hobby && (

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<string>();
  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) {
  <PlanCardItem
  key={plan.id}
  plan={plan}
+ buttonProps={{
+ isLoading: isSubmitting === plan.id,
+ disabled: Boolean(isSubmitting),
+ }}
  onSelect={() => {
  void handleSelectPlan(plan);
  }}

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={
  <Button
+ isLoading={isSubmitting}
  disabled={isSubmitting}
  htmlType="submit"
  title="tenants.create_modal.create_button"
@@ -108,6 +108,7 @@ function CreateTenantModal({ isOpen, onClose }: Props) {
  autoFocus
  {...register('name', { required: true })}
  error={Boolean(errors.name)}
+ disabled={isSubmitting}
  />
  </FormField>
  <FormField
@@ -126,14 +127,11 @@ function CreateTenantModal({ isOpen, onClose }: Props) {
  key={region}
  title={
  <DangerousRaw>
- <Region
- regionName={region}
- isComingSoon={!isDevFeaturesEnabled && region !== RegionName.EU}
- />
+ <Region regionName={region} />
  </DangerousRaw>
  }
  value={region}
- isDisabled={!isDevFeaturesEnabled && region !== RegionName.EU}
+ isDisabled={isSubmitting}
  />
  ))}
  </RadioGroup>

packages/console/src/onboarding/pages/CreateTenant/index.tsx

@@ -14,7 +14,6 @@ import ActionBar from '@/components/ActionBar';
 import { type CreateTenantData } from '@/components/CreateTenantModal/types';
 import PageMeta from '@/components/PageMeta';
 import Region, { RegionName } from '@/components/Region';
-import { isDevFeaturesEnabled } from '@/consts/env';
 import { TenantsContext } from '@/contexts/TenantsProvider';
 import Button from '@/ds-components/Button';
 import DangerousRaw from '@/ds-components/DangerousRaw';
@@ -132,16 +131,11 @@ function CreateTenant() {
  key={region}
  title={
  <DangerousRaw>
- <Region
- regionName={region}
- isComingSoon={!isDevFeaturesEnabled && region !== RegionName.EU}
- />
+ <Region regionName={region} />
  </DangerousRaw>
  }
  value={region}
- isDisabled={
- isSubmitting || (!isDevFeaturesEnabled && region !== RegionName.EU)
- }
+ isDisabled={isSubmitting}
  />
  ))}
  </RadioGroup>