feat(account-center): add success page (#8028)

Author: wangsijie

packages/account-center/src/App.tsx

@@ -1,6 +1,6 @@
 import LogtoSignature from '@experience/shared/components/LogtoSignature';
 import { LogtoProvider, useLogto, UserScope } from '@logto/react';
-import { accountCenterApplicationId } from '@logto/schemas';
+import { accountCenterApplicationId, SignInIdentifier } from '@logto/schemas';
 import { useContext, useEffect } from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
@@ -14,7 +14,7 @@ import LogtoErrorBoundary from './Providers/AppBoundary/LogtoErrorBoundary';
 import PageContextProvider from './Providers/PageContextProvider';
 import PageContext from './Providers/PageContextProvider/PageContext';
 import BrandingHeader from './components/BrandingHeader';
-import { emailRoute, phoneRoute, updateSuccessRoute } from './constants/routes';
+import { emailRoute, emailSuccessRoute, phoneRoute, phoneSuccessRoute } from './constants/routes';
 import initI18n from './i18n/init';
 import Email from './pages/Email';
 import Home from './pages/Home';
@@ -59,7 +59,14 @@ const Main = () => {
 
   return (
     <Routes>
-      <Route path={updateSuccessRoute} element={<UpdateSuccess />} />
+      <Route
+        path={emailSuccessRoute}
+        element={<UpdateSuccess identifierType={SignInIdentifier.Email} />}
+      />
+      <Route
+        path={phoneSuccessRoute}
+        element={<UpdateSuccess identifierType={SignInIdentifier.Phone} />}
+      />
       <Route path={emailRoute} element={<Email />} />
       <Route path={phoneRoute} element={<Phone />} />
       <Route index element={<Home />} />

packages/account-center/src/assets/icons/success.svg

@@ -16,6 +16,7 @@ type Props = {
   readonly titleKey?: TFuncKey;
   readonly messageKey?: TFuncKey;
   readonly rawMessage?: string;
+  readonly illustration?: string;
   readonly action?: {
     titleKey: TFuncKey;
     onClick: () => void;
@@ -78,17 +79,19 @@ const ErrorPage = ({
   titleKey = 'description.not_found',
   messageKey,
   rawMessage,
+  illustration,
   action,
 }: Props) => {
   const { theme } = useContext(PageContext);
   const message = rawMessage ?? (messageKey ? <DynamicT forKey={messageKey} /> : undefined);
-  const illustration = theme === Theme.Light ? EmptyState : EmptyStateDark;
+  const resolvedIllustration =
+    illustration ?? (theme === Theme.Light ? EmptyState : EmptyStateDark);
 
   return (
     <div className={styles.errorPage}>
       <PageMeta titleKey={titleKey} />
       <div className={styles.illustration}>
-        <img src={illustration} alt="" role="presentation" />
+        <img src={resolvedIllustration} alt="" role="presentation" />
       </div>
       <div className={styles.title}>
         <DynamicT forKey={titleKey} />

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

@@ -1,3 +1,4 @@
 export const emailRoute = '/email';
 export const phoneRoute = '/phone';
-export const updateSuccessRoute = '/update-success';
+export const emailSuccessRoute = '/email/success';
+export const phoneSuccessRoute = '/phone/success';

packages/account-center/src/constants/routes.ts

@@ -9,7 +9,6 @@ import LoadingContext from '@ac/Providers/LoadingContextProvider/LoadingContext'
 import PageContext from '@ac/Providers/PageContextProvider/PageContext';
 import ErrorPage from '@ac/components/ErrorPage';
 import VerificationMethodList from '@ac/components/VerificationMethodList';
-import { updateSuccessRoute } from '@ac/constants/routes';
 import useApi from '@ac/hooks/use-api';
 import useErrorHandler from '@ac/hooks/use-error-handler';
 
@@ -58,7 +57,7 @@ type IdentifierBindingPageProps<VerifyPayload, BindPayload> = {
     code: string
   ) => VerifyPayload;
   readonly buildBindPayload: (identifier: string, verificationRecordId: string) => BindPayload;
-  readonly successRedirect?: string;
+  readonly successRedirect: string;
   readonly initialValue?: string;
 };
 
@@ -73,7 +72,7 @@ const IdentifierBindingPage = <VerifyPayload, BindPayload>({
   bindIdentifier,
   buildVerifyPayload,
   buildBindPayload,
-  successRedirect = updateSuccessRoute,
+  successRedirect,
   initialValue = '',
 }: IdentifierBindingPageProps<VerifyPayload, BindPayload>) => {
   const { t } = useTranslation();

packages/account-center/src/pages/CodeFlow/IdentifierBindingPage.tsx

@@ -2,6 +2,7 @@ import { SignInIdentifier } from '@logto/schemas';
 
 import { updatePrimaryEmail } from '@ac/apis/account';
 import { sendEmailVerificationCode, verifyEmailVerificationCode } from '@ac/apis/verification';
+import { emailSuccessRoute } from '@ac/constants/routes';
 
 import IdentifierBindingPage from '../CodeFlow/IdentifierBindingPage';
 
@@ -34,6 +35,7 @@ const Email = () => (
       email: identifier,
       newIdentifierVerificationRecordId,
     })}
+    successRedirect={emailSuccessRoute}
   />
 );
 

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

@@ -2,6 +2,7 @@ import { SignInIdentifier } from '@logto/schemas';
 
 import { updatePrimaryPhone } from '@ac/apis/account';
 import { sendPhoneVerificationCode, verifyPhoneVerificationCode } from '@ac/apis/verification';
+import { phoneSuccessRoute } from '@ac/constants/routes';
 
 import IdentifierBindingPage from '../CodeFlow/IdentifierBindingPage';
 
@@ -34,6 +35,7 @@ const Phone = () => (
       phone: identifier,
       newIdentifierVerificationRecordId,
     })}
+    successRedirect={phoneSuccessRoute}
   />
 );
 

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

@@ -1,26 +1,50 @@
-import { useContext } from 'react';
+import { SignInIdentifier } from '@logto/schemas';
+import type { TFuncKey } from 'i18next';
+import { useMemo } from 'react';
 
-import PageContext from '@ac/Providers/PageContextProvider/PageContext';
+import successIllustration from '@ac/assets/icons/success.svg';
 import ErrorPage from '@ac/components/ErrorPage';
 
-import styles from './index.module.scss';
+type TranslationMap = Partial<
+  Record<SignInIdentifier, { readonly titleKey: TFuncKey; readonly messageKey: TFuncKey }>
+> & {
+  readonly default: { readonly titleKey: TFuncKey; readonly messageKey: TFuncKey };
+};
+
+const translationMap: TranslationMap = {
+  [SignInIdentifier.Email]: {
+    titleKey: 'account_center.update_success.email.title',
+    messageKey: 'account_center.update_success.email.description',
+  },
+  [SignInIdentifier.Phone]: {
+    titleKey: 'account_center.update_success.phone.title',
+    messageKey: 'account_center.update_success.phone.description',
+  },
+  default: {
+    titleKey: 'account_center.update_success.default.title',
+    messageKey: 'account_center.update_success.default.description',
+  },
+};
+
+type Props = {
+  readonly identifierType?: SignInIdentifier;
+};
 
-const UpdateSuccess = () => {
-  const { accountCenterSettings } = useContext(PageContext);
+const UpdateSuccess = ({ identifierType }: Props) => {
+  const translationKeys = useMemo(() => {
+    if (!identifierType) {
+      return translationMap.default;
+    }
 
-  if (!accountCenterSettings?.enabled) {
-    return (
-      <ErrorPage titleKey="error.something_went_wrong" messageKey="error.feature_not_enabled" />
-    );
-  }
+    return translationMap[identifierType] ?? translationMap.default;
+  }, [identifierType]);
 
   return (
-    <div className={styles.container}>
-      {/* <PageMeta titleKey="Update success" /> */}
-      {/* TODO: update with correct phrase after design ready */}
-      <div className={styles.title}>Update success</div>
-      <div className={styles.message}>Your changes have been saved successfully.</div>
-    </div>
+    <ErrorPage
+      illustration={successIllustration}
+      titleKey={translationKeys.titleKey}
+      messageKey={translationKeys.messageKey}
+    />
   );
 };
 

packages/account-center/src/pages/UpdateSuccess/index.module.scss

@@ -1,12 +1,13 @@
-import { emailRoute, phoneRoute, updateSuccessRoute } from '@ac/constants/routes';
+import { emailRoute, emailSuccessRoute, phoneRoute, phoneSuccessRoute } from '@ac/constants/routes';
 
 export const accountCenterBasePath = '/account-center';
 const storageKey = 'account-center-route-cache';
 
 const knownRoutePrefixes: readonly string[] = [
   emailRoute,
-  updateSuccessRoute,
+  emailSuccessRoute,
   phoneRoute,
+  phoneSuccessRoute,
   '/username',
   '/password',
 ];