Add language picker to account page (#407)

README.md

@@ -88,10 +88,11 @@ This will run a demo version, which you can turn into a fully licenced version b
 ### Version 4.16.0
 
 - Complete overhaul of the translations. Switching to [i18next](https://www.i18next.com). Translated all languages using Machine Learning (via Crowdin).
-- Added translations for the Ukrainian language, and a link to provide help for Ukraine.
+- Added translations for the Ukrainian language, and a link to provide help for Ukraine 🇺🇦.
 - Fix the empty file download when logging using Google OAuth
 - Upgrade the documentation to the latest version of Docusaurus
 - Add more integration tests, covering password accounts and account deletion
+- Added the language picker in the account page, in addition to the side panel
 
 ### Version 4.15.0
 

frontend/package.json

@@ -6,61 +6,61 @@
   "dependencies": {
     "@emotion/react": "11.9.0",
     "@emotion/styled": "11.8.1",
-    "@mui/base": "5.0.0-alpha.78",
+    "@mui/base": "5.0.0-alpha.80",
     "@mui/icons-material": "5.6.2",
-    "@mui/material": "5.6.3",
-    "@mui/styles": "5.6.2",
-    "@mui/x-data-grid": "5.10.0",
-    "@sentry/browser": "6.19.6",
+    "@mui/material": "5.7.0",
+    "@mui/styles": "5.7.0",
+    "@mui/x-data-grid": "5.11.0",
+    "@sentry/browser": "6.19.7",
     "@stripe/react-stripe-js": "1.7.2",
     "@stripe/stripe-js": "1.29.0",
     "@testing-library/jest-dom": "5.16.4",
-    "@testing-library/react": "13.1.1",
+    "@testing-library/react": "13.2.0",
     "@testing-library/react-hooks": "8.0.0",
     "@types/crypto-js": "4.1.1",
     "@types/emoji-mart": "3.0.9",
-    "@types/jest": "27.4.1",
+    "@types/jest": "27.5.1",
     "@types/lodash": "4.14.182",
     "@types/md5": "2.3.2",
-    "@types/node": "17.0.27",
-    "@types/react": "18.0.7",
+    "@types/node": "17.0.33",
+    "@types/react": "18.0.9",
     "@types/react-beautiful-dnd": "13.1.2",
     "@types/react-color": "3.0.6",
     "@types/react-copy-to-clipboard": "5.0.2",
-    "@types/react-dom": "18.0.2",
+    "@types/react-dom": "18.0.4",
     "@types/react-helmet": "6.1.5",
     "@types/react-router-dom": "5.3.3",
     "@types/shortid": "0.0.29",
     "@types/uuid": "8.3.4",
     "bowser": "2.11.0",
     "buffer": "6.0.3",
-    "core-js": "3.22.2",
+    "core-js": "3.22.5",
     "crypto-js": "4.1.1",
     "date-fns": "2.28.0",
     "emoji-mart": "3.0.1",
-    "flag-icons": "6.2.0",
+    "flag-icons": "6.3.0",
     "http-proxy-middleware": "2.0.6",
-    "i18next": "^21.6.16",
+    "i18next": "^21.8.2",
     "i18next-browser-languagedetector": "^6.1.4",
     "i18next-resources-to-backend": "^1.0.0",
     "isemail": "3.2.0",
     "lexorank": "1.0.4",
     "lodash": "4.17.21",
     "material-ui-confirm": "3.0.4",
     "md5": "2.3.0",
-    "notistack": "2.0.4",
+    "notistack": "2.0.5",
     "prop-types": "15.8.1",
     "query-string": "7.1.1",
-    "react": "18.0.0",
+    "react": "18.1.0",
     "react-autosize-textarea": "7.1.0",
     "react-beautiful-dnd": "13.1.0",
     "react-color": "2.19.3",
     "react-copy-to-clipboard": "5.1.0",
-    "react-dom": "18.0.0",
+    "react-dom": "18.1.0",
     "react-ga": "3.3.0",
     "react-giphy-searchbox": "1.5.4",
     "react-helmet": "6.1.0",
-    "react-i18next": "^11.16.7",
+    "react-i18next": "^11.16.9",
     "react-markdown": "8.0.3",
     "react-password-strength-bar": "0.4.0",
     "react-router-dom": "6.3.0",
@@ -72,7 +72,7 @@
     "shortid": "2.2.16",
     "socket.io-client": "4.5.0",
     "source-map-explorer": "2.5.2",
-    "typescript": "4.6.3",
+    "typescript": "4.6.4",
     "util": "0.12.4",
     "uuid": "8.3.2",
     "whatwg-fetch": "3.6.2"
@@ -95,8 +95,8 @@
     "not op_mini all"
   ],
   "resolutions": {
-    "@types/react": "18.0.7",
-    "@types/react-dom": "18.0.2"
+    "@types/react": "18.0.9",
+    "@types/react-dom": "18.0.4"
   },
   "jest": {
     "transformIgnorePatterns": [

frontend/src/Layout.tsx

@@ -26,7 +26,6 @@ import { Alert, AlertTitle, Button, Hidden } from '@mui/material';
 import useBackendCapabilities from './global/useBackendCapabilities';
 import useIsPro from 'auth/useIsPro';
 import ProButton from 'components/ProButton';
-import { Flag } from 'components/Flag';
 import { useTranslation } from 'react-i18next';
 
 const Home = lazy(() => import('./views/Home' /* webpackChunkName: "home" */));
@@ -176,16 +175,6 @@ function App() {
             </Hidden>
           ) : null}
           <Spacer />
-          <Hidden mdDown>
-            <HelpUkraine
-              href="https://www.gov.uk/government/news/ukraine-what-you-can-do-to-help"
-              target="_blank"
-            >
-              <Flag country="ua" />
-              {t('Main.helpUkraine')}
-            </HelpUkraine>
-          </Hidden>
-
           {isOnGamePage ? <Invite /> : null}
           {isInitialised ? (
             <AccountMenu />
@@ -245,20 +234,4 @@ const Spacer = styled.div`
   flex: 1;
 `;
 
-const HelpUkraine = styled.a`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0 20px;
-  font-style: unset;
-  text-decoration: unset;
-  font-size: 1.2rem;
-  font-weight: 100;
-  color: #0057b7;
-  border-radius: 5px;
-  padding: 10px;
-  backdrop-filter: blur(10px);
-  background-color: rgba(255, 255, 255, 0.3);
-`;
-
 export default App;

frontend/src/components/LanguagePicker.tsx

@@ -8,10 +8,15 @@ import { Flag } from './Flag';
 
 interface LanguagePickerProps {
   value: string;
+  variant?: 'outlined' | 'standard' | 'filled';
   onChange: (value: string) => void;
 }
 
-const LanguagePicker = ({ value, onChange }: LanguagePickerProps) => {
+const LanguagePicker = ({
+  value,
+  variant = 'standard',
+  onChange,
+}: LanguagePickerProps) => {
   const handleSelect = useCallback(
     (event: SelectChangeEvent<unknown>) => {
       const language = event.target.value as string;
@@ -23,7 +28,7 @@ const LanguagePicker = ({ value, onChange }: LanguagePickerProps) => {
     <StyledSelect
       value={value}
       onChange={handleSelect}
-      variant="standard"
+      variant={variant}
       data-cy="language-picker"
     >
       {languages.map((language) => (

frontend/src/translations/locales/ar-SA.json

@@ -273,7 +273,8 @@
       "header": "التفاصيل الخاصة بك",
       "username": "اسم المستخدم",
       "email": "البريد الإلكتروني",
-      "accountType": "نوع الحساب"
+      "accountType": "نوع الحساب",
+      "language": "اللغة"
     },
     "plan": {
       "header": "خطتك",

frontend/src/translations/locales/de-DE.json

@@ -273,7 +273,8 @@
       "header": "Ihre Details",
       "username": "Benutzername",
       "email": "E-Mail",
-      "accountType": "Kontotyp"
+      "accountType": "Kontotyp",
+      "language": "Sprache"
     },
     "plan": {
       "header": "Ihr Plan",

frontend/src/translations/locales/en-GB.json

@@ -273,7 +273,8 @@
       "header": "Your Details",
       "username": "Username",
       "email": "Email",
-      "accountType": "Account Type"
+      "accountType": "Account Type",
+      "language": "Language"
     },
     "plan": {
       "header": "Your Plan",

frontend/src/translations/locales/es-ES.json

@@ -273,7 +273,8 @@
       "header": "Tus detalles",
       "username": "Usuario",
       "email": "E-mail",
-      "accountType": "Tipo de cuenta"
+      "accountType": "Tipo de cuenta",
+      "language": "Idioma"
     },
     "plan": {
       "header": "Su plan",

frontend/src/translations/locales/fr-FR.json

@@ -273,7 +273,8 @@
       "header": "Vos Coordonnées",
       "username": "Nom d'utilisateur",
       "email": "E-Mail",
-      "accountType": "Type de compte"
+      "accountType": "Type de compte",
+      "language": "Langue"
     },
     "plan": {
       "header": "Votre Accès",

frontend/src/translations/locales/hu-HU.json

@@ -273,7 +273,8 @@
       "header": "Az adataid",
       "username": "Felhasználónév",
       "email": "Email",
-      "accountType": "Fiók Típus"
+      "accountType": "Fiók Típus",
+      "language": "Nyelv"
     },
     "plan": {
       "header": "Az Ön terve",

frontend/src/translations/locales/it-IT.json

@@ -273,7 +273,8 @@
       "header": "I Tuoi Dettagli",
       "username": "Username",
       "email": "Email",
-      "accountType": "Tipo Di Account"
+      "accountType": "Tipo Di Account",
+      "language": "Lingua"
     },
     "plan": {
       "header": "Il Tuo Piano",

frontend/src/translations/locales/ja-JP.json

@@ -273,7 +273,8 @@
       "header": "詳細",
       "username": "ユーザー名",
       "email": "Eメールアドレス",
-      "accountType": "アカウントの種類"
+      "accountType": "アカウントの種類",
+      "language": "言語"
     },
     "plan": {
       "header": "あなたのプラン",

frontend/src/translations/locales/nl-NL.json

@@ -273,7 +273,8 @@
       "header": "Uw gegevens",
       "username": "Gebruikersnaam",
       "email": "E-mailadres",
-      "accountType": "Klant type"
+      "accountType": "Klant type",
+      "language": "Taal"
     },
     "plan": {
       "header": "Uw abonnement",

frontend/src/translations/locales/pl-PL.json

@@ -273,7 +273,8 @@
       "header": "Twoje dane",
       "username": "Nazwa użytkownika",
       "email": "E-mail",
-      "accountType": "Typ konta"
+      "accountType": "Typ konta",
+      "language": "Język"
     },
     "plan": {
       "header": "Twój plan",

frontend/src/translations/locales/pt-BR.json

@@ -273,7 +273,8 @@
       "header": "Suas informações",
       "username": "Usuário:",
       "email": "e-mail",
-      "accountType": "Tipo de Conta"
+      "accountType": "Tipo de Conta",
+      "language": "IDIOMA"
     },
     "plan": {
       "header": "Seu plano",

frontend/src/translations/locales/pt-PT.json

@@ -273,7 +273,8 @@
       "header": "Suas informações",
       "username": "Usuário:",
       "email": "e-mail",
-      "accountType": "Tipo de Conta"
+      "accountType": "Tipo de Conta",
+      "language": "IDIOMA"
     },
     "plan": {
       "header": "Seu plano",

frontend/src/translations/locales/uk-UA.json

@@ -273,7 +273,8 @@
       "header": "Ваші дані",
       "username": "Ім'я користувача",
       "email": "Ел. пошта",
-      "accountType": "Тип облікового запису"
+      "accountType": "Тип облікового запису",
+      "language": "Мова:"
     },
     "plan": {
       "header": "Ваш План",

frontend/src/translations/locales/zh-CN.json

@@ -273,7 +273,8 @@
       "header": "您的详细信息",
       "username": "用户名",
       "email": "电子邮件地址",
-      "accountType": "帐户类型"
+      "accountType": "帐户类型",
+      "language": "语言"
     },
     "plan": {
       "header": "您的计划",

frontend/src/translations/locales/zh-TW.json

@@ -273,7 +273,8 @@
       "header": "你的資料",
       "username": "用戶名",
       "email": "電子郵件",
-      "accountType": "帳戶類型"
+      "accountType": "帳戶類型",
+      "language": "語言"
     },
     "plan": {
       "header": "你的計劃",

frontend/src/views/Panel.tsx

@@ -10,6 +10,7 @@ import ParticipantsList from './panel/ParticipantsList';
 import config from '../utils/getConfig';
 import useSidePanel from './panel/useSidePanel';
 import { useMatch } from 'react-router-dom';
+import { HelpUkraine } from './panel/HelpUkraine';
 
 interface Policy {
   name: string;
@@ -35,6 +36,7 @@ function Panel() {
         <Top>
           <LanguagePicker value={language.locale} onChange={setLanguage} />
           <Content>{hasParticipants ? <ParticipantsList /> : null}</Content>
+          <HelpUkraine />
         </Top>
         <Bottom>
           <Typography component="div">

frontend/src/views/account/AccountPage.tsx

@@ -19,10 +19,13 @@ import { useCallback, useContext } from 'react';
 import { updateUserName } from './api';
 import UserContext from 'auth/Context';
 import { useSnackbar } from 'notistack';
+import LanguagePicker from 'components/LanguagePicker';
+import { useLanguage } from 'translations';
 
 function AccountPage() {
   const url = usePortalUrl();
   const user = useUser();
+  const [language, setLanguage] = useLanguage();
   const { setUser } = useContext(UserContext);
   const isTrial = useIsTrial();
   const formatDistanceToNow = useFormatDate();
@@ -89,6 +92,17 @@ function AccountPage() {
             <Title>{t('AccountPage.details.accountType')}</Title>
             <Value>{user.accountType}</Value>
           </Data>
+
+          <Data>
+            <Title>{t('AccountPage.details.language')}</Title>
+            <Value>
+              <LanguagePicker
+                value={language.locale}
+                onChange={setLanguage}
+                variant="standard"
+              />
+            </Value>
+          </Data>
         </Section>
 
         {user.plan ? (
@@ -194,6 +208,7 @@ const Name = styled.h1`
 
 const Data = styled.div`
   display: flex;
+  align-items: center;
   margin: 15px 0;
 `;