feat(account-center): add error page

Author: wangsijie

packages/account-center/src/App.module.scss

@@ -17,6 +17,13 @@
   @include _.flex_column;
 }
 
+.status {
+  @include _.flex_column(center, center);
+  text-align: center;
+  gap: _.unit(2);
+  flex: 1;
+}
+
 :global(body.mobile) {
   .container {
     padding-bottom: env(safe-area-inset-bottom);

packages/account-center/src/App.tsx

@@ -1,7 +1,6 @@
-import AppBoundary from '@experience/Providers/AppBoundary';
-import { type IdTokenClaims, LogtoProvider, useLogto } from '@logto/react';
+import { LogtoProvider, useLogto } from '@logto/react';
 import { accountCenterApplicationId } from '@logto/schemas';
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect } from 'react';
 
 import AppBoundary from '@ac/Providers/AppBoundary';
 
@@ -10,7 +9,9 @@ import Callback from './Callback';
 import PageContextProvider from './Providers/PageContextProvider';
 import PageContext from './Providers/PageContextProvider/PageContext';
 import BrandingHeader from './components/BrandingHeader';
+import ErrorPage from './components/ErrorPage';
 import initI18n from './i18n/init';
+import Home from './pages/Home';
 
 import '@experience/shared/scss/normalized.scss';
 
@@ -21,32 +22,9 @@ const redirectUri = `${window.location.origin}/account-center`;
 const Main = () => {
   const params = new URLSearchParams(window.location.search);
   const isInCallback = Boolean(params.get('code'));
-  const { isAuthenticated, isLoading, getIdTokenClaims, signIn } = useLogto();
-  const [user, setUser] = useState<Pick<IdTokenClaims, 'sub' | 'username'>>();
-  const [isLoadingUser, setIsLoadingUser] = useState(false);
+  const { isAuthenticated, isLoading, signIn } = useLogto();
   const { isLoadingExperience, experienceError } = useContext(PageContext);
 
-  useEffect(() => {
-    if (!isAuthenticated) {
-      setUser(undefined);
-      setIsLoadingUser(false);
-      return;
-    }
-
-    const loadUser = async () => {
-      setIsLoadingUser(true);
-
-      try {
-        const claims = await getIdTokenClaims();
-        setUser(claims ?? undefined);
-      } finally {
-        setIsLoadingUser(false);
-      }
-    };
-
-    void loadUser();
-  }, [getIdTokenClaims, isAuthenticated]);
-
   useEffect(() => {
     if (isInCallback || isLoading) {
       return;
@@ -58,44 +36,27 @@ const Main = () => {
   }, [isAuthenticated, isInCallback, isLoading, signIn]);
 
   if (isInCallback) {
-    return (
-      <div>
-        <Callback />
-      </div>
-    );
+    return <Callback />;
   }
 
   if (experienceError) {
     return (
-      <div>
-        <p>We were unable to load your experience settings. Please refresh the page.</p>
-      </div>
+      <ErrorPage
+        titleKey="error.something_went_wrong"
+        rawMessage="We were unable to load your experience settings. Please refresh the page."
+      />
     );
   }
 
-  if (isLoading || isLoadingUser || isLoadingExperience) {
-    return (
-      <div>
-        <p>Loading…</p>
-      </div>
-    );
+  if (isLoading || isLoadingExperience) {
+    return <div className={styles.status}>Loading…</div>;
   }
 
   if (!isAuthenticated) {
-    return (
-      <div>
-        <p>Redirecting to sign in…</p>
-      </div>
-    );
+    return <div className={styles.status}>Redirecting to sign in…</div>;
   }
 
-  return (
-    <div>
-      <div>
-        Signed in as <strong>{user?.username ?? user?.sub ?? 'your account'}</strong>.
-      </div>
-    </div>
-  );
+  return <Home />;
 };
 
 const App = () => (

packages/account-center/src/components/ErrorPage/index.module.scss

@@ -0,0 +1,47 @@
+@use '@experience/scss/_underscore.scss' as _;
+
+.errorPage {
+  @include _.flex_column(center, center);
+  gap: _.unit(4);
+  text-align: center;
+  flex: 1;
+}
+
+.illustration {
+  width: 194px;
+  max-width: 100%;
+  align-self: center;
+
+  svg {
+    width: 100%;
+    height: auto;
+  }
+}
+
+.title {
+  @include _.title;
+}
+
+.message {
+  @include _.text-hint;
+}
+
+.support {
+  margin-top: _.unit(2);
+  display: grid;
+  gap: _.unit(1);
+  justify-items: center;
+}
+
+.supportItem {
+  @include _.text-hint;
+}
+
+.supportLink {
+  color: var(--color-primary);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}

packages/account-center/src/components/ErrorPage/index.tsx

@@ -0,0 +1,92 @@
+import EmptyStateDark from '@experience/assets/icons/empty-state-dark.svg';
+import EmptyState from '@experience/assets/icons/empty-state.svg';
+import DynamicT from '@experience/shared/components/DynamicT';
+import PageMeta from '@experience/shared/components/PageMeta';
+import { Theme } from '@logto/schemas';
+import type { TFuncKey } from 'i18next';
+import { useContext } from 'react';
+import { Trans } from 'react-i18next';
+
+import PageContext from '@ac/Providers/PageContextProvider/PageContext';
+
+import styles from './index.module.scss';
+
+type Props = {
+  readonly titleKey?: TFuncKey;
+  readonly messageKey?: TFuncKey;
+  readonly rawMessage?: string;
+};
+
+const SupportInfo = () => {
+  const { experienceSettings } = useContext(PageContext);
+
+  if (!experienceSettings) {
+    return null;
+  }
+
+  const { supportEmail, supportWebsiteUrl } = experienceSettings;
+
+  if (!supportEmail && !supportWebsiteUrl) {
+    return null;
+  }
+
+  return (
+    <div className={styles.support}>
+      {supportEmail && (
+        <div className={styles.supportItem}>
+          <Trans
+            i18nKey="description.support_email"
+            components={{
+              link: (
+                <a className={styles.supportLink} href={`mailto:${supportEmail}`}>
+                  {supportEmail}
+                </a>
+              ),
+            }}
+          />
+        </div>
+      )}
+      {supportWebsiteUrl && (
+        <div className={styles.supportItem}>
+          <Trans
+            i18nKey="description.support_website"
+            components={{
+              link: (
+                <a
+                  className={styles.supportLink}
+                  href={supportWebsiteUrl}
+                  rel="noopener"
+                  target="_blank"
+                >
+                  {supportWebsiteUrl}
+                </a>
+              ),
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+const ErrorPage = ({ titleKey = 'description.not_found', messageKey, rawMessage }: Props) => {
+  const { theme } = useContext(PageContext);
+  const message = rawMessage ?? (messageKey ? <DynamicT forKey={messageKey} /> : undefined);
+  const illustration = theme === Theme.Light ? EmptyState : EmptyStateDark;
+
+  return (
+    <div className={styles.errorPage}>
+      <PageMeta titleKey={titleKey} />
+      <div className={styles.illustration}>
+        <img src={illustration} alt="" role="presentation" />
+      </div>
+      <div className={styles.title}>
+        <DynamicT forKey={titleKey} />
+      </div>
+      {message && <div className={styles.message}>{message}</div>}
+      <SupportInfo />
+    </div>
+  );
+};
+
+export default ErrorPage;

packages/account-center/src/pages/Home/index.tsx

@@ -0,0 +1,7 @@
+import ErrorPage from '@ac/components/ErrorPage';
+
+const Home = () => (
+  <ErrorPage titleKey="account_center.home.title" messageKey="account_center.home.description" />
+);
+
+export default Home;

packages/experience/src/Layout/FirstScreenLayout/index.tsx

@@ -1,9 +1,8 @@
 import { type ReactNode, useContext } from 'react';
 
 import PageContext from '@/Providers/PageContextProvider/PageContext';
-
-import PageMeta from '../../components/PageMeta';
-import type { Props as PageMetaProps } from '../../components/PageMeta';
+import PageMeta from '@/shared/components/PageMeta';
+import type { Props as PageMetaProps } from '@/shared/components/PageMeta';
 
 import styles from './index.module.scss';
 

packages/experience/src/Layout/FocusedAuthPageLayout/index.tsx

@@ -2,12 +2,12 @@ import { type AgreeToTermsPolicy } from '@logto/schemas';
 import { type TFuncKey } from 'i18next';
 import { useMemo, type ReactNode } from 'react';
 
-import DynamicT from '@/components/DynamicT';
-import type { Props as PageMetaProps } from '@/components/PageMeta';
 import type { Props as TextLinkProps } from '@/components/TextLink';
 import TextLink from '@/components/TextLink';
 import TermsAndPrivacyLinks from '@/containers/TermsAndPrivacyLinks';
 import useTerms from '@/hooks/use-terms';
+import DynamicT from '@/shared/components/DynamicT';
+import type { Props as PageMetaProps } from '@/shared/components/PageMeta';
 
 import FirstScreenLayout from '../FirstScreenLayout';
 

packages/experience/src/Layout/SecondaryPageLayout/index.tsx

@@ -1,10 +1,10 @@
 import type { TFuncKey } from 'i18next';
 import { type ReactElement } from 'react';
 
-import DynamicT from '@/components/DynamicT';
 import NavBar from '@/components/NavBar';
-import PageMeta from '@/components/PageMeta';
 import usePlatform from '@/hooks/use-platform';
+import DynamicT from '@/shared/components/DynamicT';
+import PageMeta from '@/shared/components/PageMeta';
 
 import { InlineNotification } from '../../components/Notification';
 

packages/experience/src/Layout/SectionLayout/index.tsx

@@ -1,7 +1,7 @@
 import { type TFuncKey } from 'i18next';
 import { type ReactNode } from 'react';
 
-import DynamicT from '@/components/DynamicT';
+import DynamicT from '@/shared/components/DynamicT';
 
 import styles from './index.module.scss';
 

packages/experience/src/components/BrandingHeader/index.tsx

@@ -3,8 +3,7 @@ import classNames from 'classnames';
 import type { TFuncKey } from 'i18next';
 
 import ConnectIcon from '@/assets/icons/connect-icon.svg?react';
-
-import DynamicT from '../DynamicT';
+import DynamicT from '@/shared/components/DynamicT';
 
 import styles from './index.module.scss';