chore: launch us region (#5962)

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
+                          <Region regionName={region} />
-                            regionName={region}
-                            isComingSoon={!isDevFeaturesEnabled && region !== RegionName.EU}
-                          />
                         </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
+                            <Region regionName={region} />
-                              regionName={region}
-                              isComingSoon={!isDevFeaturesEnabled && region !== RegionName.EU}
-                            />
                           </DangerousRaw>
                         }
                         value={region}
-                        isDisabled={
+                        isDisabled={isSubmitting}
-                          isSubmitting || (!isDevFeaturesEnabled && region !== RegionName.EU)
-                        }
                       />
                     ))}
                   </RadioGroup>