refactor(console): optimize onboarding

packages/console/src/cloud/pages/SocialDemoCallback/index.tsx

@@ -26,8 +26,8 @@ function SocialDemoCallback() {
     <div className={styles.container}>
       <Card className={styles.card}>
         {theme === Theme.Light ? <Congrats /> : <CongratsDark />}
-        <div className={styles.title}>{t('cloud.socialCallback.title')}</div>
-        <div className={styles.message}>{t('cloud.socialCallback.description')}</div>
+        <div className={styles.title}>{t('cloud.social_callback.title')}</div>
+        <div className={styles.message}>{t('cloud.social_callback.description')}</div>
       </Card>
     </div>
   );

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

@@ -4,17 +4,23 @@ import ProgressBar from '../ProgressBar';
 
 import styles from './index.module.scss';
 
-type Props = {
-  readonly step: number;
-  readonly totalSteps: number;
-  readonly children: ReactNode;
-};
+type Props =
+  | {
+      readonly step: number;
+      readonly totalSteps: number;
+      readonly children: ReactNode;
+    }
+  | {
+      readonly children: ReactNode;
+    };
 
-function ActionBar({ step, totalSteps, children }: Props) {
+function ActionBar(props: Props) {
   return (
     <div className={styles.container}>
-      <ProgressBar currentStep={step} totalSteps={totalSteps} />
-      <div className={styles.actions}>{children}</div>
+      {'step' in props && 'totalSteps' in props && (
+        <ProgressBar currentStep={props.step} totalSteps={props.totalSteps} />
+      )}
+      <div className={styles.actions}>{props.children}</div>
     </div>
   );
 }

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

@@ -10,6 +10,7 @@ import CreateTenantHeaderIcon from '@/assets/icons/create-tenant-header.svg?reac
 import { useCloudApi } from '@/cloud/hooks/use-cloud-api';
 import { type TenantResponse } from '@/cloud/types/router';
 import Region, { RegionName } from '@/components/Region';
+import { availableRegions } from '@/consts';
 import Button from '@/ds-components/Button';
 import DangerousRaw from '@/ds-components/DangerousRaw';
 import FormField from '@/ds-components/FormField';
@@ -124,8 +125,7 @@ function CreateTenantModal({ isOpen, onClose }: Props) {
               rules={{ required: true }}
               render={({ field: { onChange, value, name } }) => (
                 <RadioGroup type="small" name={name} value={value} onChange={onChange}>
-                  {/* Manually maintaining the list of regions to avoid unexpected changes. We may consider using an API in the future. */}
-                  {[RegionName.EU, RegionName.US, RegionName.AU].map((region) => (
+                  {availableRegions.map((region) => (
                     <Radio
                       key={region}
                       title={

packages/console/src/consts/tenants.ts

@@ -146,3 +146,10 @@ const getAdminTenantEndpoint = () => {
 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([
+  RegionName.EU,
+  RegionName.US,
+  RegionName.AU,
+] as const);

packages/console/src/contexts/AppDataProvider.tsx

@@ -22,7 +22,7 @@ type AppData = {
 
 export const AppDataContext = createContext<AppData>({});
 
-export const useTenantEndpoint = (tenantId: string) => {
+const useTenantEndpoint = (tenantId: string) => {
   return useSWRImmutable(`api/.well-known/endpoints/${tenantId}`, async (pathname) => {
     const { user } = await ky.get(new URL(pathname, adminTenantEndpoint)).json<{ user: string }>();
     return new URL(user);

packages/console/src/onboarding/components/DemoConnectorNotice/index.tsx

@@ -9,7 +9,7 @@ function DemoConnectorNotice() {
 
   return (
     <InlineNotification className={styles.notice}>
-      {t('cloud.sie.connectors.notice')}
+      {t('cloud.social_callback.notice')}
     </InlineNotification>
   );
 }