chore(console): fix typo (#3309)

packages/console/src/cloud/constants/index.ts

@@ -1,11 +1,11 @@
 import { SignInIdentifier } from '@logto/schemas';
 
-import type { OnboardSieConfig } from '../types';
+import type { OnboardingSieConfig } from '../types';
 import { Authentication } from '../types';
 
 export const reservationLink = 'https://calendly.com/logto/30min';
 
-export const defaultOnboardingSieConfig: OnboardSieConfig = {
+export const defaultOnboardingSieConfig: OnboardingSieConfig = {
   color: '#5D34F2',
   identifier: SignInIdentifier.Email,
   authentications: [Authentication.Password],

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

@@ -15,7 +15,7 @@ import TextInput from '@/components/TextInput';
 import ActionBar from '../../components/ActionBar';
 import { CardSelector, MultiCardSelector } from '../../components/CardSelector';
 import type { Questionnaire } from '../../types';
-import { OnboardPage } from '../../types';
+import { OnboardingPage } from '../../types';
 import { getOnboardPagePathname } from '../../utils';
 import * as styles from './index.module.scss';
 import { titleOptions, companySizeOptions, reasonOptions } from './options';
@@ -43,11 +43,11 @@ const About = () => {
 
   const onNext = async () => {
     await onSubmit();
-    navigate(getOnboardPagePathname(OnboardPage.SignInExperience));
+    navigate(getOnboardPagePathname(OnboardingPage.SignInExperience));
   };
 
   const onBack = async () => {
-    navigate(getOnboardPagePathname(OnboardPage.Welcome));
+    navigate(getOnboardPagePathname(OnboardingPage.Welcome));
   };
 
   return (

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

@@ -14,7 +14,7 @@ import Divider from '@/components/Divider';
 import OverlayScrollbar from '@/components/OverlayScrollbar';
 import { AppEndpointsContext } from '@/contexts/AppEndpointsProvider';
 
-import { OnboardPage } from '../../types';
+import { OnboardingPage } from '../../types';
 import { getOnboardPagePathname } from '../../utils';
 import * as styles from './index.module.scss';
 
@@ -26,12 +26,12 @@ const Congrats = () => {
   const navigate = useNavigate();
 
   const enterAdminConsole = async () => {
-    await update({ hasOnboard: true });
+    await update({ isOnboardingDone: true });
     navigate('/');
   };
 
   const handleBack = () => {
-    navigate(getOnboardPagePathname(OnboardPage.SignInExperience));
+    navigate(getOnboardPagePathname(OnboardingPage.SignInExperience));
   };
 
   return (

packages/console/src/cloud/pages/Onboarding/index.module.scss

@@ -1,4 +1,4 @@
-.onBoard {
+.onBoarding {
   height: 100%;
   overflow: hidden;
   display: flex;

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

@@ -1,7 +1,7 @@
 import { Navigate, Route, Routes } from 'react-router-dom';
 
 import useUserOnboardingData from '@/cloud/hooks/use-user-onboarding-data';
-import { OnboardPage } from '@/cloud/types';
+import { OnboardingPage } from '@/cloud/types';
 import { getOnboardPagePathname } from '@/cloud/utils';
 import NotFound from '@/pages/NotFound';
 
@@ -11,9 +11,9 @@ import SignInExperience from '../SignInExperience';
 import Welcome from '../Welcome';
 import * as styles from './index.module.scss';
 
-const welcomePathname = getOnboardPagePathname(OnboardPage.Welcome);
+const welcomePathname = getOnboardPagePathname(OnboardingPage.Welcome);
 
-const Onboard = () => {
+const Onboarding = () => {
   const {
     data: { questionnaire },
     isLoaded,
@@ -24,20 +24,20 @@ const Onboard = () => {
   }
 
   return (
-    <div className={styles.onBoard}>
+    <div className={styles.onBoarding}>
       <Routes>
         <Route index element={<Navigate replace to={welcomePathname} />} />
-        <Route path={OnboardPage.Welcome} element={<Welcome />} />
+        <Route path={OnboardingPage.Welcome} element={<Welcome />} />
         <Route
-          path={OnboardPage.AboutUser}
+          path={OnboardingPage.AboutUser}
           element={questionnaire ? <About /> : <Navigate replace to={welcomePathname} />}
         />
         <Route
-          path={OnboardPage.SignInExperience}
+          path={OnboardingPage.SignInExperience}
           element={questionnaire ? <SignInExperience /> : <Navigate replace to={welcomePathname} />}
         />
         <Route
-          path={OnboardPage.Congrats}
+          path={OnboardingPage.Congrats}
           element={questionnaire ? <Congrats /> : <Navigate replace to={welcomePathname} />}
         />
         <Route path="*" element={<NotFound />} />
@@ -46,4 +46,4 @@ const Onboard = () => {
   );
 };
 
-export default Onboard;
+export default Onboarding;

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

@@ -12,8 +12,8 @@ import ActionBar from '@/cloud/components/ActionBar';
 import { CardSelector, MultiCardSelector } from '@/cloud/components/CardSelector';
 import { defaultOnboardingSieConfig } from '@/cloud/constants';
 import * as pageLayout from '@/cloud/scss/layout.module.scss';
-import type { OnboardSieConfig } from '@/cloud/types';
-import { OnboardPage } from '@/cloud/types';
+import type { OnboardingSieConfig } from '@/cloud/types';
+import { OnboardingPage } from '@/cloud/types';
 import { getOnboardPagePathname } from '@/cloud/utils';
 import Button from '@/components/Button';
 import ColorPicker from '@/components/ColorPicker';
@@ -41,7 +41,7 @@ const SignInExperience = () => {
     watch,
     handleSubmit,
     formState: { isSubmitting, isDirty },
-  } = useForm<OnboardSieConfig>({ defaultValues: defaultOnboardingSieConfig });
+  } = useForm<OnboardingSieConfig>({ defaultValues: defaultOnboardingSieConfig });
 
   useEffect(() => {
     if (signInExperience) {
@@ -78,7 +78,7 @@ const SignInExperience = () => {
   });
 
   const handleBack = () => {
-    navigate(getOnboardPagePathname(OnboardPage.AboutUser));
+    navigate(getOnboardPagePathname(OnboardingPage.AboutUser));
   };
 
   const handleSave = async () => {
@@ -88,7 +88,7 @@ const SignInExperience = () => {
 
   const handleNext = async () => {
     await onSubmit();
-    navigate(getOnboardPagePathname(OnboardPage.Congrats));
+    navigate(getOnboardPagePathname(OnboardingPage.Congrats));
   };
 
   return (

packages/console/src/cloud/pages/SignInExperience/utils.ts

@@ -1,12 +1,12 @@
 import type { SignInExperience } from '@logto/schemas';
 import { SignInIdentifier } from '@logto/schemas';
 
-import type { OnboardSieConfig } from '@/cloud/types';
+import type { OnboardingSieConfig } from '@/cloud/types';
 import { Authentication } from '@/cloud/types';
 
 const signInExperienceToOnboardSieConfig = (
   signInExperience: SignInExperience
-): OnboardSieConfig => {
+): OnboardingSieConfig => {
   const {
     color: { primaryColor },
     signIn: { methods: signInMethods },
@@ -35,7 +35,7 @@ const signInExperienceToOnboardSieConfig = (
 };
 
 const onboardSieConfigToSignInExperience = (
-  config: OnboardSieConfig,
+  config: OnboardingSieConfig,
   basedConfig: SignInExperience
 ): SignInExperience => {
   const { color: onboardConfigColor, identifier, authentications } = config;

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

@@ -14,7 +14,7 @@ import FormField from '@/components/FormField';
 import OverlayScrollbar from '@/components/OverlayScrollbar';
 
 import type { Questionnaire } from '../../types';
-import { OnboardPage } from '../../types';
+import { OnboardingPage } from '../../types';
 import { getOnboardPagePathname } from '../../utils';
 import * as styles from './index.module.scss';
 import { deploymentTypeOptions, projectOptions } from './options';
@@ -45,7 +45,7 @@ const Welcome = () => {
 
   const onNext = async () => {
     await onSubmit();
-    navigate(getOnboardPagePathname(OnboardPage.AboutUser));
+    navigate(getOnboardPagePathname(OnboardingPage.AboutUser));
   };
 
   return (

packages/console/src/cloud/types.ts

@@ -3,10 +3,10 @@ import { z } from 'zod';
 
 export enum CloudRoute {
   Callback = 'callback',
-  Onboard = 'onboard',
+  Onboarding = 'onboarding',
 }
 
-export enum OnboardPage {
+export enum OnboardingPage {
   Welcome = 'welcome',
   AboutUser = 'about-user',
   SignInExperience = 'sign-in-experience',
@@ -62,7 +62,7 @@ export type Questionnaire = z.infer<typeof questionnaireGuard>;
 
 export const userOnboardingDataGuard = z.object({
   questionnaire: questionnaireGuard.optional(),
-  hasOnboard: z.boolean().optional(),
+  isOnboardingDone: z.boolean().optional(),
 });
 
 export type UserOnboardingData = z.infer<typeof userOnboardingDataGuard>;
@@ -72,7 +72,7 @@ export enum Authentication {
   VerificationCode = 'verificationCode',
 }
 
-export type OnboardSieConfig = {
+export type OnboardingSieConfig = {
   color: string;
   identifier: SignInIdentifier;
   authentications: Authentication[];

packages/console/src/cloud/utils.ts

@@ -1,4 +1,4 @@
-import type { OnboardPage } from './types';
+import type { OnboardingPage } from './types';
 import { CloudRoute } from './types';
 
-export const getOnboardPagePathname = (page: OnboardPage) => `/${CloudRoute.Onboard}/${page}`;
+export const getOnboardPagePathname = (page: OnboardingPage) => `/${CloudRoute.Onboarding}/${page}`;

packages/console/src/containers/AppContent/index.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { Outlet, useHref, useLocation, useNavigate } from 'react-router-dom';
 
 import useUserOnboardingData from '@/cloud/hooks/use-user-onboarding-data';
-import { OnboardPage } from '@/cloud/types';
+import { OnboardingPage } from '@/cloud/types';
 import { getOnboardPagePathname } from '@/cloud/utils';
 import AppError from '@/components/AppError';
 import AppLoading from '@/components/AppLoading';
@@ -27,7 +27,7 @@ const AppContent = () => {
   const { isLoading: isPreferencesLoading } = useUserPreferences();
   const { isLoading: isConfigsLoading } = useConfigs();
   const {
-    data: { hasOnboard },
+    data: { isOnboardingDone },
     isLoading: isOnboardingDataLoading,
     isLoaded: isOnboardingDataLoaded,
   } = useUserOnboardingData();
@@ -35,7 +35,7 @@ const AppContent = () => {
   const isLoading =
     isPreferencesLoading || isConfigsLoading || (isCloud && isOnboardingDataLoading);
 
-  const isOnboarding = isCloud && isOnboardingDataLoaded && !hasOnboard;
+  const isOnboarding = isCloud && isOnboardingDataLoaded && !isOnboardingDone;
 
   const location = useLocation();
   const navigate = useNavigate();
@@ -54,10 +54,12 @@ const AppContent = () => {
     // Navigate to the first menu item after configs are loaded.
     if (!isLoading && location.pathname === '/') {
       navigate(
-        isOnboarding ? getOnboardPagePathname(OnboardPage.Welcome) : getPath(firstItem?.title ?? '')
+        isOnboarding
+          ? getOnboardPagePathname(OnboardingPage.Welcome)
+          : getPath(firstItem?.title ?? '')
       );
     }
-  }, [firstItem?.title, hasOnboard, isLoading, isOnboarding, location.pathname, navigate]);
+  }, [firstItem?.title, isOnboardingDone, isLoading, isOnboarding, location.pathname, navigate]);
 
   if (error) {
     if (error instanceof LogtoClientError) {

packages/console/src/pages/Main/index.tsx

@@ -3,7 +3,7 @@ import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 import { SWRConfig } from 'swr';
 
 import useUserOnboardingData from '@/cloud/hooks/use-user-onboarding-data';
-import Onboard from '@/cloud/pages/Onboard';
+import Onboarding from '@/cloud/pages/Onboarding';
 import { CloudRoute } from '@/cloud/types';
 import AppLoading from '@/components/AppLoading';
 import Toast from '@/components/Toast';
@@ -23,7 +23,7 @@ const Main = () => {
   const swrOptions = useSwrOptions();
   const { userEndpoint } = useContext(AppEndpointsContext);
   const {
-    data: { hasOnboard },
+    data: { isOnboardingDone },
     isLoaded,
   } = useUserOnboardingData();
 
@@ -31,7 +31,7 @@ const Main = () => {
     return <AppLoading />;
   }
 
-  const isOnboarding = isCloud && !hasOnboard;
+  const isOnboarding = isCloud && !isOnboardingDone;
 
   return (
     <BrowserRouter basename={getBasename()}>
@@ -45,8 +45,8 @@ const Main = () => {
             <Route element={<AppContent />}>
               {isOnboarding ? (
                 <Route>
-                  <Route index element={<Navigate replace to={`/${CloudRoute.Onboard}`} />} />
-                  <Route path={`/${CloudRoute.Onboard}/*`} element={<Onboard />} />
+                  <Route index element={<Navigate replace to={`/${CloudRoute.Onboarding}`} />} />
+                  <Route path={`/${CloudRoute.Onboarding}/*`} element={<Onboarding />} />
                 </Route>
               ) : (
                 <Route path="/*" element={<ConsoleContent />} />