Skip to content

Commit dbee0a4

Browse files
charIeszhaocharIeszhao
committed
feat(experience): add switch account page
1 parent e11cb00 commit dbee0a4

File tree

18 files changed

+230
-0
lines changed

18 files changed

+230
-0
lines changed

‎packages/experience/src/pages/SwitchAccount/index.module.scss

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
@use '@/scss/underscore' as _;
2+
3+
.container {
4+
flex: 1;
5+
@include _.flex-column;
6+
@include _.full-width;
7+
}
8+
9+
.title {
10+
margin-top: _.unit(8);
11+
text-align: center;
12+
}
13+
14+
.message {
15+
@include _.text-hint;
16+
text-align: center;
17+
}
18+
19+
.support {
20+
margin-top: _.unit(4);
21+
}
22+
23+
.logo {
24+
height: 40px;
25+
width: auto;
26+
@include _.image-align-center;
27+
}
28+
29+
.button {
30+
margin-top: _.unit(6);
31+
}
32+
33+
:global(body.mobile) {
34+
.title {
35+
@include _.title;
36+
margin-bottom: _.unit(4);
37+
}
38+
39+
.backButton {
40+
@include _.full-width;
41+
margin-bottom: _.unit(4);
42+
}
43+
}
44+
45+
:global(body.desktop) {
46+
.title {
47+
@include _.title-desktop;
48+
margin-bottom: _.unit(2);
49+
}
50+
51+
.backButton {
52+
@include _.full-width;
53+
margin-bottom: _.unit(12);
54+
}
55+
}

‎packages/experience/src/pages/SwitchAccount/index.tsx

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { useContext } from 'react';
2+
import { useNavigate } from 'react-router-dom';
3+
4+
import StaticPageLayout from '@/Layout/StaticPageLayout';
5+
import PageContext from '@/Providers/PageContextProvider/PageContext';
6+
import Button from '@/components/Button';
7+
import DynamicT from '@/components/DynamicT';
8+
import NavBar from '@/components/NavBar';
9+
import PageMeta from '@/components/PageMeta';
10+
import { getBrandingLogoUrl } from '@/utils/logo';
11+
12+
import SupportInfo from '../ErrorPage/SupportInfo';
13+
14+
import styles from './index.module.scss';
15+
16+
type Props = {
17+
readonly account?: string;
18+
};
19+
20+
const SwitchAccount = ({ account }: Props) => {
21+
const navigate = useNavigate();
22+
const { experienceSettings, theme } = useContext(PageContext);
23+
const searchParams = new URLSearchParams(window.location.search);
24+
const currentAccountName = searchParams.get('account') ?? account;
25+
26+
if (!experienceSettings) {
27+
return null;
28+
}
29+
30+
const {
31+
color: { isDarkModeEnabled },
32+
branding,
33+
} = experienceSettings;
34+
const logoUrl = getBrandingLogoUrl({ theme, branding, isDarkModeEnabled });
35+
36+
return (
37+
<StaticPageLayout>
38+
<PageMeta titleKey="description.switch_account" />
39+
{history.length > 1 && <NavBar />}
40+
<div className={styles.container}>
41+
{logoUrl && <img className={styles.logo} src={logoUrl} alt="app logo" />}
42+
<div className={styles.title}>
43+
<DynamicT
44+
forKey="description.account_mismatch_title"
45+
interpolation={{ account: currentAccountName }}
46+
/>
47+
</div>
48+
<div className={styles.message}>
49+
<DynamicT forKey="description.account_mismatch_description" />
50+
</div>
51+
<SupportInfo />
52+
<Button
53+
className={styles.button}
54+
type="primary"
55+
size="large"
56+
title="description.switch_account"
57+
onClick={() => {
58+
navigate('/sign-in');
59+
}}
60+
/>
61+
</div>
62+
</StaticPageLayout>
63+
);
64+
};
65+
66+
export default SwitchAccount;

‎packages/phrases-experience/src/locales/ar/description.ts

+7
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ const description = {
1010
sign_in: 'تسجيل الدخول',
1111
privacy_policy: 'سياسة الخصوصية',
1212
create_account: 'إنشاء حساب',
13+
/** UNTRANSLATED */
14+
switch_account: 'Switch account',
1315
or: 'أو',
1416
and: 'و',
1517
enter_passcode: 'تم إرسال رمز التحقق إلى {{address}} {{target}} الخاص بك',
@@ -102,6 +104,11 @@ const description = {
102104
back_to_sign_in: 'العودة إلى تسجيل الدخول',
103105
support_email: 'البريد الإلكتروني للدعم: <link></link>',
104106
support_website: 'موقع الدعم: <link></link>',
107+
/** UNTRANSLATED */
108+
account_mismatch_title: 'You are currently signed in as {{account}}',
109+
/** UNTRANSLATED */
110+
account_mismatch_description:
111+
'Please switch to the account that associated with this magic link, and try again.',
105112
};
106113

107114
export default Object.freeze(description);

‎packages/phrases-experience/src/locales/de/description.ts

+7
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ const description = {
1010
sign_in: 'Anmelden',
1111
privacy_policy: 'Datenschutzrichtlinien',
1212
create_account: 'Konto erstellen',
13+
/** UNTRANSLATED */
14+
switch_account: 'Switch account',
1315
or: 'oder',
1416
and: 'und',
1517
enter_passcode: 'Der Bestätigungscode wurde an deine {{address}} gesendet',
@@ -108,6 +110,11 @@ const description = {
108110
back_to_sign_in: 'Zurück zur Anmeldung',
109111
support_email: 'Support-E-Mail: <link></link>',
110112
support_website: 'Support-Website: <link></link>',
113+
/** UNTRANSLATED */
114+
account_mismatch_title: 'You are currently signed in as {{account}}',
115+
/** UNTRANSLATED */
116+
account_mismatch_description:
117+
'Please switch to the account that associated with this magic link, and try again.',
111118
};
112119

113120
export default Object.freeze(description);

‎packages/phrases-experience/src/locales/en/description.ts

+4
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const description = {
1010
sign_in: 'Sign in',
1111
privacy_policy: 'Privacy Policy',
1212
create_account: 'Create account',
13+
switch_account: 'Switch account',
1314
or: 'or',
1415
and: 'and',
1516
enter_passcode: 'The verification code has been sent to your {{address}} {{target}}',
@@ -105,6 +106,9 @@ const description = {
105106
back_to_sign_in: 'Back to sign in',
106107
support_email: 'Support email: <link></link>',
107108
support_website: 'Support website: <link></link>',
109+
account_mismatch_title: 'You are currently signed in as {{account}}',
110+
account_mismatch_description:
111+
'Please switch to the account that associated with this magic link, and try again.',
108112
};
109113

110114
export default Object.freeze(description);

‎packages/phrases-experience/src/locales/es/description.ts

+7
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ const description = {
1010
sign_in: 'Iniciar sesión',
1111
privacy_policy: 'Política de privacidad',
1212
create_account: 'Crear cuenta',
13+
/** UNTRANSLATED */
14+
switch_account: 'Switch account',
1315
or: 'o',
1416
and: 'y',
1517
enter_passcode: 'El código de verificación ha sido enviado a su {{address}} {{target}}',
@@ -108,6 +110,11 @@ const description = {
108110
back_to_sign_in: 'Volver a iniciar sesión',
109111
support_email: 'Correo electrónico de soporte: <link></link>',
110112
support_website: 'Sitio web de soporte: <link></link>',
113+
/** UNTRANSLATED */
114+
account_mismatch_title: 'You are currently signed in as {{account}}',
115+
/** UNTRANSLATED */
116+
account_mismatch_description:
117+
'Please switch to the account that associated with this magic link, and try again.',
111118
};
112119

113120
export default Object.freeze(description);

‎packages/phrases-experience/src/locales/fr/description.ts

+7
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ const description = {
1010
sign_in: 'Connexion',
1111
privacy_policy: 'Politique de confidentialité',
1212
create_account: 'Créer un compte',
13+
/** UNTRANSLATED */
14+
switch_account: 'Switch account',
1315
or: 'ou',
1416
and: 'et',
1517
enter_passcode: 'Le code a été envoyé à {{address}} {{target}}',
@@ -108,6 +110,11 @@ const description = {
108110
back_to_sign_in: 'Retour à la connexion',
109111
support_email: 'Email de support: <link></link>',
110112
support_website: 'Site web de support: <link></link>',
113+
/** UNTRANSLATED */
114+
account_mismatch_title: 'You are currently signed in as {{account}}',
115+
/** UNTRANSLATED */
116+
account_mismatch_description:
117+
'Please switch to the account that associated with this magic link, and try again.',
111118
};
112119

113120
export default Object.freeze(description);

‎packages/phrases-experience/src/locales/it/description.ts

+7
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ const description = {
1010
sign_in: 'Accedi',
1111
privacy_policy: 'Informativa sulla privacy',
1212
create_account: 'Crea account',
13+
/** UNTRANSLATED */
14+
switch_account: 'Switch account',
1315
or: 'o',
1416
and: 'e',
1517
enter_passcode: 'Il codice di verifica è stato inviato alla tua {{address}} {{target}}',
@@ -106,6 +108,11 @@ const description = {
106108
back_to_sign_in: 'Torna al login',
107109
support_email: 'Email di supporto: <link></link>',
108110
support_website: 'Sito web di supporto: <link></link>',
111+
/** UNTRANSLATED */
112+
account_mismatch_title: 'You are currently signed in as {{account}}',
113+
/** UNTRANSLATED */
114+
account_mismatch_description:
115+
'Please switch to the account that associated with this magic link, and try again.',
109116
};
110117

111118
export default Object.freeze(description);

‎packages/phrases-experience/src/locales/ja/description.ts

+7
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ const description = {
1010
sign_in: 'サインイン',
1111
privacy_policy: 'プライバシーポリシー',
1212
create_account: 'アカウントを作成する',
13+
/** UNTRANSLATED */
14+
switch_account: 'Switch account',
1315
or: 'または',
1416
and: '及び',
1517
enter_passcode: '確認コードが{{address}} {{target}}に送信されました',
@@ -101,6 +103,11 @@ const description = {
101103
back_to_sign_in: 'サインインに戻る',
102104
support_email: 'サポートメール: <link></link>',
103105
support_website: 'サポートウェブサイト: <link></link>',
106+
/** UNTRANSLATED */
107+
account_mismatch_title: 'You are currently signed in as {{account}}',
108+
/** UNTRANSLATED */
109+
account_mismatch_description:
110+
'Please switch to the account that associated with this magic link, and try again.',
104111
};
105112

106113
export default Object.freeze(description);

‎packages/phrases-experience/src/locales/ko/description.ts

+7
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ const description = {
1010
sign_in: '로그인',
1111
privacy_policy: '개인정보처리방침',
1212
create_account: '계정 생성',
13+
/** UNTRANSLATED */
14+
switch_account: 'Switch account',
1315
or: '또는',
1416
and: '그리고',
1517
enter_passcode: '{{address}} {{target}} 으로 비밀번호가 전송되었어요.',
@@ -96,6 +98,11 @@ const description = {
9698
back_to_sign_in: '로그인으로 돌아가기',
9799
support_email: '지원 이메일: <link></link>',
98100
support_website: '지원 웹사이트: <link></link>',
101+
/** UNTRANSLATED */
102+
account_mismatch_title: 'You are currently signed in as {{account}}',
103+
/** UNTRANSLATED */
104+
account_mismatch_description:
105+
'Please switch to the account that associated with this magic link, and try again.',
99106
};
100107

101108
export default Object.freeze(description);

‎packages/phrases-experience/src/locales/pl-pl/description.ts

+7
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ const description = {
1010
sign_in: 'Zaloguj się',
1111
privacy_policy: 'Polityka prywatności',
1212
create_account: 'Utwórz konto',
13+
/** UNTRANSLATED */
14+
switch_account: 'Switch account',
1315
or: 'lub',
1416
and: 'i',
1517
enter_passcode: 'Kod weryfikacyjny został wysłany na twoje {{address}} {{target}}',
@@ -106,6 +108,11 @@ const description = {
106108
back_to_sign_in: 'Wróć do logowania',
107109
support_email: 'Email wsparcia: <link></link>',
108110
support_website: 'Strona wsparcia: <link></link>',
111+
/** UNTRANSLATED */
112+
account_mismatch_title: 'You are currently signed in as {{account}}',
113+
/** UNTRANSLATED */
114+
account_mismatch_description:
115+
'Please switch to the account that associated with this magic link, and try again.',
109116
};
110117

111118
export default Object.freeze(description);

‎packages/phrases-experience/src/locales/pt-br/description.ts

+7
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ const description = {
1010
sign_in: 'Entrar',
1111
privacy_policy: 'Política de privacidade',
1212
create_account: 'Criar conta',
13+
/** UNTRANSLATED */
14+
switch_account: 'Switch account',
1315
or: 'ou',
1416
and: 'e',
1517
enter_passcode: 'O código de verificação foi enviado para o seu {{address}} {{target}}',
@@ -102,6 +104,11 @@ const description = {
102104
back_to_sign_in: 'Voltar para o login',
103105
support_email: 'E-mail de suporte: <link></link>',
104106
support_website: 'Site de suporte: <link></link>',
107+
/** UNTRANSLATED */
108+
account_mismatch_title: 'You are currently signed in as {{account}}',
109+
/** UNTRANSLATED */
110+
account_mismatch_description:
111+
'Please switch to the account that associated with this magic link, and try again.',
105112
};
106113

107114
export default Object.freeze(description);

‎packages/phrases-experience/src/locales/pt-pt/description.ts

+7
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ const description = {
1010
sign_in: 'Entrar',
1111
privacy_policy: 'Política de privacidade',
1212
create_account: 'Criar uma conta',
13+
/** UNTRANSLATED */
14+
switch_account: 'Switch account',
1315
or: 'ou',
1416
and: 'e',
1517
enter_passcode: 'O código de verificação foi enviado para o seu {{address}} {{target}}',
@@ -103,6 +105,11 @@ const description = {
103105
back_to_sign_in: 'Voltar para o login',
104106
support_email: 'Email de suporte: <link></link>',
105107
support_website: 'Site de suporte: <link></link>',
108+
/** UNTRANSLATED */
109+
account_mismatch_title: 'You are currently signed in as {{account}}',
110+
/** UNTRANSLATED */
111+
account_mismatch_description:
112+
'Please switch to the account that associated with this magic link, and try again.',
106113
};
107114

108115
export default Object.freeze(description);

‎packages/phrases-experience/src/locales/ru/description.ts

+7
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ const description = {
1010
sign_in: 'Войти',
1111
privacy_policy: 'Политикой конфиденциальности',
1212
create_account: 'Создать аккаунт',
13+
/** UNTRANSLATED */
14+
switch_account: 'Switch account',
1315
or: 'или',
1416
and: 'и',
1517
enter_passcode: 'Код подтверждения был отправлен на {{address}}',
@@ -106,6 +108,11 @@ const description = {
106108
back_to_sign_in: 'Вернуться ко входу',
107109
support_email: 'Поддержка по электронной почте: <link></link>',
108110
support_website: 'Сайт поддержки: <link></link>',
111+
/** UNTRANSLATED */
112+
account_mismatch_title: 'You are currently signed in as {{account}}',
113+
/** UNTRANSLATED */
114+
account_mismatch_description:
115+
'Please switch to the account that associated with this magic link, and try again.',
109116
};
110117

111118
export default Object.freeze(description);

‎packages/phrases-experience/src/locales/tr-tr/description.ts

+7
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ const description = {
1010
sign_in: 'Giriş Yap',
1111
privacy_policy: 'Gizlilik Politikası',
1212
create_account: 'Hesap Oluştur',
13+
/** UNTRANSLATED */
14+
switch_account: 'Switch account',
1315
or: 'veya',
1416
and: 've',
1517
enter_passcode: 'Doğrulama kodu {{address}} {{target}} adresinize gönderildi',
@@ -99,6 +101,11 @@ const description = {
99101
back_to_sign_in: 'Girişe dön',
100102
support_email: 'Destek e-postası: <link></link>',
101103
support_website: 'Destek web sitesi: <link></link>',
104+
/** UNTRANSLATED */
105+
account_mismatch_title: 'You are currently signed in as {{account}}',
106+
/** UNTRANSLATED */
107+
account_mismatch_description:
108+
'Please switch to the account that associated with this magic link, and try again.',
102109
};
103110

104111
export default Object.freeze(description);

0 commit comments

Comments
 (0)