refactor: align onboarding tenant creation form (#8007)

Author: darcyYe

packages/console/src/consts/tenants.ts

@@ -158,8 +158,5 @@ export const adminTenantEndpoint = getAdminTenantEndpoint();
 
 export const mainTitle = isCloud ? 'Logto Cloud' : 'Logto Console';
 
-// Manually maintaining the list of regions to avoid unexpected changes. We may consider using an API in the future.
-export const availableRegions = Object.freeze(['EU', 'US', 'AU', 'JP'] as const);
-
 // The threshold days to show the convert to production card in the get started page
 export const convertToProductionThresholdDays = 7;

packages/console/src/onboarding/pages/CreateTenant/index.module.scss

@@ -0,0 +1,4 @@
+.error {
+  color: var(--color-error);
+  font: var(--font-body-2);
+}

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

@@ -1,7 +1,7 @@
 import { emailRegEx } from '@logto/core-kit';
 import { useLogto } from '@logto/react';
 import { TenantRole, Theme } from '@logto/schemas';
-import { useCallback, useContext } from 'react';
+import { useCallback, useContext, useMemo } from 'react';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
@@ -13,27 +13,36 @@ import ActionBar from '@/components/ActionBar';
 import { GtagConversionId, reportToGoogle } from '@/components/Conversion/utils';
 import { type CreateTenantData } from '@/components/CreateTenantModal/types';
 import PageMeta from '@/components/PageMeta';
-import { StaticRegion, defaultRegionName } from '@/components/Region';
-import { availableRegions } from '@/consts';
+import Region, { defaultRegionName } from '@/components/Region';
 import { TenantsContext } from '@/contexts/TenantsProvider';
 import Button from '@/ds-components/Button';
 import DangerousRaw from '@/ds-components/DangerousRaw';
 import FormField from '@/ds-components/FormField';
 import OverlayScrollbar from '@/ds-components/OverlayScrollbar';
 import RadioGroup, { Radio } from '@/ds-components/RadioGroup';
+import { Ring } from '@/ds-components/Spinner';
 import TextInput from '@/ds-components/TextInput';
+import useAvailableRegions from '@/hooks/use-available-regions';
 import useTheme from '@/hooks/use-theme';
 import useUserOnboardingData from '@/onboarding/hooks/use-user-onboarding-data';
 import pageLayout from '@/onboarding/scss/layout.module.scss';
 import InviteEmailsInput from '@/pages/TenantSettings/TenantMembers/InviteEmailsInput';
 import { type InviteeEmailItem } from '@/pages/TenantSettings/TenantMembers/types';
 import { trySubmitSafe } from '@/utils/form';
 
-type CreateTenantForm = Omit<CreateTenantData, 'tag'> & { collaboratorEmails: InviteeEmailItem[] };
+import styles from './index.module.scss';
+
+type CreateTenantForm = Omit<CreateTenantData, 'tag'> & {
+  collaboratorEmails: InviteeEmailItem[];
+};
 
 function CreateTenant() {
   const methods = useForm<CreateTenantForm>({
-    defaultValues: { name: 'My project', regionName: defaultRegionName, collaboratorEmails: [] },
+    defaultValues: {
+      name: 'My project',
+      regionName: defaultRegionName,
+      collaboratorEmails: [],
+    },
   });
   const {
     control,
@@ -63,6 +72,12 @@ function CreateTenant() {
   const { isAuthenticated, getOrganizationToken } = useLogto();
   const cloudApi = useCloudApi();
   const { currentTenant } = useContext(TenantsContext);
+  const { regions, regionsError } = useAvailableRegions();
+
+  const publicRegions = useMemo(
+    () => regions?.filter((region) => !region.isPrivate) ?? [],
+    [regions]
+  );
 
   const onCreateClick = handleSubmit(
     trySubmitSafe(async ({ name, regionName, collaboratorEmails }: CreateTenantForm) => {
@@ -122,27 +137,31 @@ function CreateTenant() {
               title="tenants.settings.tenant_region"
               tip={t('tenants.settings.tenant_region_description')}
             >
-              <Controller
-                control={control}
-                name="regionName"
-                rules={{ required: true }}
-                render={({ field: { onChange, value, name } }) => (
-                  <RadioGroup type="small" name={name} value={value} onChange={onChange}>
-                    {availableRegions.map((region) => (
-                      <Radio
-                        key={region}
-                        title={
-                          <DangerousRaw>
-                            <StaticRegion regionName={region} />
-                          </DangerousRaw>
-                        }
-                        value={region}
-                        isDisabled={isSubmitting}
-                      />
-                    ))}
-                  </RadioGroup>
-                )}
-              />
+              {!regions && !regionsError && <Ring />}
+              {regionsError && <span className={styles.error}>{regionsError.message}</span>}
+              {regions && !regionsError && (
+                <Controller
+                  control={control}
+                  name="regionName"
+                  rules={{ required: true }}
+                  render={({ field: { onChange, value, name } }) => (
+                    <RadioGroup type="small" name={name} value={value} onChange={onChange}>
+                      {publicRegions.map((region) => (
+                        <Radio
+                          key={region.name}
+                          title={
+                            <DangerousRaw>
+                              <Region region={region} />
+                            </DangerousRaw>
+                          }
+                          value={region.name}
+                          isDisabled={isSubmitting}
+                        />
+                      ))}
+                    </RadioGroup>
+                  )}
+                />
+              )}
             </FormField>
             <FormField title="cloud.create_tenant.invite_collaborators">
               <Controller