From 49b430394dc961451a6abca26a95ebba8d22f68c Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Thu, 15 Sep 2022 21:23:49 +0800
Subject: [PATCH] feat(console): auto detect language setting (#1941)

---
 .../components/LanguagesForm.tsx              | 62 +++++++------------
 .../components/index.module.scss              |  6 ++
 .../src/pages/SignInExperience/types.ts       | 13 +---
 .../src/pages/SignInExperience/utilities.ts   | 23 +------
 .../translation/admin-console/sign-in-exp.ts  | 16 ++---
 .../translation/admin-console/sign-in-exp.ts  | 16 ++---
 .../translation/admin-console/sign-in-exp.ts  | 15 +++--
 .../translation/admin-console/sign-in-exp.ts  | 15 +++--
 .../translation/admin-console/sign-in-exp.ts  | 16 ++---
 .../translation/admin-console/sign-in-exp.ts  | 15 +++--
 10 files changed, 86 insertions(+), 111 deletions(-)

diff --git a/packages/console/src/pages/SignInExperience/components/LanguagesForm.tsx b/packages/console/src/pages/SignInExperience/components/LanguagesForm.tsx
index 3f87fc376..988f11af0 100644
--- a/packages/console/src/pages/SignInExperience/components/LanguagesForm.tsx
+++ b/packages/console/src/pages/SignInExperience/components/LanguagesForm.tsx
@@ -3,58 +3,40 @@ import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 import FormField from '@/components/FormField';
-import RadioGroup, { Radio } from '@/components/RadioGroup';
 import Select from '@/components/Select';
+import Switch from '@/components/Switch';
 
-import { LanguageMode, SignInExperienceForm } from '../types';
+import { SignInExperienceForm } from '../types';
 import * as styles from './index.module.scss';
 
 const LanguagesForm = () => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-  const { watch, control } = useFormContext<SignInExperienceForm>();
-  const mode = watch('languageInfo.mode');
+  const { watch, control, register } = useFormContext<SignInExperienceForm>();
+  const isAutoDetect = watch('languageInfo.autoDetect');
 
   return (
     <>
       <div className={styles.title}>{t('sign_in_exp.others.languages.title')}</div>
-      <FormField title="sign_in_exp.others.languages.mode">
-        <Controller
-          name="languageInfo.mode"
-          control={control}
-          defaultValue={LanguageMode.Auto}
-          render={({ field: { onChange, value, name } }) => (
-            <RadioGroup value={value} name={name} onChange={onChange}>
-              <Radio value={LanguageMode.Auto} title="sign_in_exp.others.languages.auto" />
-              <Radio value={LanguageMode.Fixed} title="sign_in_exp.others.languages.fixed" />
-            </RadioGroup>
-          )}
+      <FormField title="sign_in_exp.others.languages.enable_auto_detect">
+        <Switch
+          {...register('languageInfo.autoDetect')}
+          label={t('sign_in_exp.others.languages.description')}
         />
       </FormField>
-      {mode === LanguageMode.Auto && (
-        <FormField
-          title="sign_in_exp.others.languages.fallback_language"
-          tooltip="sign_in_exp.others.languages.fallback_language_tip"
-        >
-          <Controller
-            name="languageInfo.fallbackLanguage"
-            control={control}
-            render={({ field: { value, onChange } }) => (
-              <Select value={value} options={languageOptions} onChange={onChange} />
-            )}
-          />
-        </FormField>
-      )}
-      {mode === LanguageMode.Fixed && (
-        <FormField title="sign_in_exp.others.languages.fixed_language">
-          <Controller
-            name="languageInfo.fixedLanguage"
-            control={control}
-            render={({ field: { value, onChange } }) => (
-              <Select value={value} options={languageOptions} onChange={onChange} />
-            )}
-          />
-        </FormField>
-      )}
+      <FormField title="sign_in_exp.others.languages.default_language">
+        <Controller
+          name="languageInfo.fallbackLanguage"
+          control={control}
+          render={({ field: { value, onChange } }) => (
+            <Select value={value} options={languageOptions} onChange={onChange} />
+          )}
+        />
+        <div className={styles.defaultLanguageDescription}>
+          {isAutoDetect
+            ? t('sign_in_exp.others.languages.default_language_description_auto')
+            : t('sign_in_exp.others.languages.default_language_description_fixed')}
+        </div>
+      </FormField>
     </>
   );
 };
diff --git a/packages/console/src/pages/SignInExperience/components/index.module.scss b/packages/console/src/pages/SignInExperience/components/index.module.scss
index f99640e6d..3ae7cd2b6 100644
--- a/packages/console/src/pages/SignInExperience/components/index.module.scss
+++ b/packages/console/src/pages/SignInExperience/components/index.module.scss
@@ -28,3 +28,9 @@
   font: var(--font-body-medium);
   color: var(--color-caption);
 }
+
+.defaultLanguageDescription {
+  padding-top: _.unit(2);
+  font: var(--font-body-medium);
+  color: var(--color-caption);
+}
diff --git a/packages/console/src/pages/SignInExperience/types.ts b/packages/console/src/pages/SignInExperience/types.ts
index 06f9a4dcd..87ddd9819 100644
--- a/packages/console/src/pages/SignInExperience/types.ts
+++ b/packages/console/src/pages/SignInExperience/types.ts
@@ -1,12 +1,6 @@
 import { SignInExperience, SignInMethodKey } from '@logto/schemas';
-import type { LanguageKey } from '@logto/shared';
 
-export enum LanguageMode {
-  Auto = 'Auto',
-  Fixed = 'Fixed',
-}
-
-export type SignInExperienceForm = Omit<SignInExperience, 'signInMethods' | 'languageInfo'> & {
+export type SignInExperienceForm = Omit<SignInExperience, 'signInMethods'> & {
   signInMethods: {
     primary?: SignInMethodKey;
     enableSecondary: boolean;
@@ -15,10 +9,5 @@ export type SignInExperienceForm = Omit<SignInExperience, 'signInMethods' | 'lan
     email: boolean;
     social: boolean;
   };
-  languageInfo: {
-    mode: LanguageMode;
-    fixedLanguage: LanguageKey;
-    fallbackLanguage: LanguageKey;
-  };
   createAccountEnabled: boolean;
 };
diff --git a/packages/console/src/pages/SignInExperience/utilities.ts b/packages/console/src/pages/SignInExperience/utilities.ts
index 9edb0539e..a8b530faf 100644
--- a/packages/console/src/pages/SignInExperience/utilities.ts
+++ b/packages/console/src/pages/SignInExperience/utilities.ts
@@ -7,7 +7,7 @@ import {
 } from '@logto/schemas';
 import { conditional } from '@silverhand/essentials';
 
-import { LanguageMode, SignInExperienceForm } from './types';
+import { SignInExperienceForm } from './types';
 
 const findMethodState = (
   setup: SignInExperienceForm,
@@ -40,10 +40,7 @@ export const signInExperienceParser = {
       (key) => signInExperience.signInMethods[key] === SignInMethodState.Secondary
     );
 
-    const {
-      languageInfo: { autoDetect, fallbackLanguage, fixedLanguage },
-      signInMode,
-    } = signInExperience;
+    const { signInMode } = signInExperience;
 
     return {
       ...signInExperience,
@@ -55,20 +52,11 @@ export const signInExperienceParser = {
         email: secondaryMethods.includes(SignInMethodKey.Email),
         social: secondaryMethods.includes(SignInMethodKey.Social),
       },
-      languageInfo: {
-        mode: autoDetect ? LanguageMode.Auto : LanguageMode.Fixed,
-        fallbackLanguage,
-        fixedLanguage,
-      },
       createAccountEnabled: signInMode !== SignInMode.SignIn,
     };
   },
   toRemoteModel: (setup: SignInExperienceForm): SignInExperience => {
-    const {
-      branding,
-      languageInfo: { mode, fallbackLanguage, fixedLanguage },
-      createAccountEnabled,
-    } = setup;
+    const { branding, createAccountEnabled } = setup;
 
     return {
       ...setup,
@@ -84,11 +72,6 @@ export const signInExperienceParser = {
         email: findMethodState(setup, 'email'),
         social: findMethodState(setup, 'social'),
       },
-      languageInfo: {
-        autoDetect: mode === LanguageMode.Auto,
-        fallbackLanguage,
-        fixedLanguage,
-      },
       signInMode: createAccountEnabled ? SignInMode.SignInAndRegister : SignInMode.SignIn,
     };
   },
diff --git a/packages/phrases/src/locales/en/translation/admin-console/sign-in-exp.ts b/packages/phrases/src/locales/en/translation/admin-console/sign-in-exp.ts
index c74b65daf..d2d7b33a3 100644
--- a/packages/phrases/src/locales/en/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/sign-in-exp.ts
@@ -71,13 +71,15 @@ const sign_in_exp = {
     },
     languages: {
       title: 'LANGUAGES',
-      mode: 'Language mode',
-      auto: 'Auto',
-      fixed: 'Fixed',
-      fallback_language: 'Fallback language',
-      fallback_language_tip:
-        'Which language to fall back if Logto finds no proper language phrase-set.',
-      fixed_language: 'Fixed language',
+      enable_auto_detect: 'Enable auto detect',
+      description:
+        "Your software detects the user's location and switches to the local language. You can add new locales by translating UI from English to another language.",
+      manage_language: 'Manage language',
+      default_language: 'Default language',
+      default_language_description_auto:
+        'The default language will be used when a text segment is missing translation.',
+      default_language_description_fixed:
+        'When auto detect is off, the default language is the only language your software will show. Turn on auto detect for language customization.',
     },
     authentication: {
       title: 'AUTHENTICATION',
diff --git a/packages/phrases/src/locales/fr/translation/admin-console/sign-in-exp.ts b/packages/phrases/src/locales/fr/translation/admin-console/sign-in-exp.ts
index 7fa72b51b..41d4a3a51 100644
--- a/packages/phrases/src/locales/fr/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/sign-in-exp.ts
@@ -73,13 +73,15 @@ const sign_in_exp = {
     },
     languages: {
       title: 'LANGAGES',
-      mode: 'Mode langue',
-      auto: 'Auto',
-      fixed: 'Fixé',
-      fallback_language: 'Langage par défaut',
-      fallback_language_tip:
-        'La langue de repli si Logto ne trouve pas de jeu de phrases dans la langue appropriée.',
-      fixed_language: 'Langue fixe',
+      enable_auto_detect: 'Enable auto detect', // UNTRANSLATED
+      description:
+        "Your software detects the user's location and switches to the local language. You can add new locales by translating UI from English to another language.", // UNTRANSLATED
+      manage_language: 'Manage language', // UNTRANSLATED
+      default_language: 'Default language', // UNTRANSLATED
+      default_language_description_auto:
+        'The default language will be used when a text segment is missing translation.', // UNTRANSLATED
+      default_language_description_fixed:
+        'When auto detect is off, the default language is the only language your software will show. Turn on auto detect for language customization.', // UNTRANSLATED
     },
     authentication: {
       title: 'AUTHENTICATION',
diff --git a/packages/phrases/src/locales/ko-kr/translation/admin-console/sign-in-exp.ts b/packages/phrases/src/locales/ko-kr/translation/admin-console/sign-in-exp.ts
index 48620bae7..966b0212c 100644
--- a/packages/phrases/src/locales/ko-kr/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/ko-kr/translation/admin-console/sign-in-exp.ts
@@ -68,12 +68,15 @@ const sign_in_exp = {
     },
     languages: {
       title: '언어',
-      mode: '언어 모드',
-      auto: '자동',
-      fixed: '고정',
-      fallback_language: '백업 언어',
-      fallback_language_tip: '적절한 언어를 찾을 수 없을 때 백업 언어를 사용해요.',
-      fixed_language: '언어 고정',
+      enable_auto_detect: 'Enable auto detect', // UNTRANSLATED
+      description:
+        "Your software detects the user's location and switches to the local language. You can add new locales by translating UI from English to another language.", // UNTRANSLATED
+      manage_language: 'Manage language', // UNTRANSLATED
+      default_language: 'Default language', // UNTRANSLATED
+      default_language_description_auto:
+        'The default language will be used when a text segment is missing translation.', // UNTRANSLATED
+      default_language_description_fixed:
+        'When auto detect is off, the default language is the only language your software will show. Turn on auto detect for language customization.', // UNTRANSLATED
     },
     authentication: {
       title: 'AUTHENTICATION',
diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/sign-in-exp.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/sign-in-exp.ts
index 4495499b0..8314d6b1d 100644
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/sign-in-exp.ts
@@ -71,12 +71,15 @@ const sign_in_exp = {
     },
     languages: {
       title: 'LÍNGUAS',
-      mode: 'Modo de idioma',
-      auto: 'automático',
-      fixed: 'Fixo',
-      fallback_language: 'Idioma fallback',
-      fallback_language_tip: 'Qual idioma usar se o Logto não encontrar o idioma requisitado.',
-      fixed_language: 'Idioma fixo',
+      enable_auto_detect: 'Enable auto detect', // UNTRANSLATED
+      description:
+        "Your software detects the user's location and switches to the local language. You can add new locales by translating UI from English to another language.", // UNTRANSLATED
+      manage_language: 'Manage language', // UNTRANSLATED
+      default_language: 'Default language', // UNTRANSLATED
+      default_language_description_auto:
+        'The default language will be used when a text segment is missing translation.', // UNTRANSLATED
+      default_language_description_fixed:
+        'When auto detect is off, the default language is the only language your software will show. Turn on auto detect for language customization.', // UNTRANSLATED
     },
     authentication: {
       title: 'AUTENTICAÇÃO',
diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/sign-in-exp.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/sign-in-exp.ts
index eda5fe7c9..dccd6ff37 100644
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/sign-in-exp.ts
@@ -72,13 +72,15 @@ const sign_in_exp = {
     },
     languages: {
       title: 'DİLLER',
-      mode: 'Dil modu',
-      auto: 'Otomatik',
-      fixed: 'Sabit',
-      fallback_language: 'Yedek dil',
-      fallback_language_tip:
-        'Logto uygun bir dil ifade kümesi bulamazsa hangi dilden vazgeçilecek?',
-      fixed_language: 'Sabitlenmiş dil',
+      enable_auto_detect: 'Enable auto detect', // UNTRANSLATED
+      description:
+        "Your software detects the user's location and switches to the local language. You can add new locales by translating UI from English to another language.", // UNTRANSLATED
+      manage_language: 'Manage language', // UNTRANSLATED
+      default_language: 'Default language', // UNTRANSLATED
+      default_language_description_auto:
+        'The default language will be used when a text segment is missing translation.', // UNTRANSLATED
+      default_language_description_fixed:
+        'When auto detect is off, the default language is the only language your software will show. Turn on auto detect for language customization.', // UNTRANSLATED
     },
     authentication: {
       title: 'AUTHENTICATION',
diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/sign-in-exp.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/sign-in-exp.ts
index aef5319ce..a322f9fc5 100644
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/sign-in-exp.ts
@@ -68,12 +68,15 @@ const sign_in_exp = {
     },
     languages: {
       title: '语言',
-      mode: '语言模式',
-      auto: '自动',
-      fixed: '固定',
-      fallback_language: '备用语言',
-      fallback_language_tip: '如果 Logto 找不到合适的语言包，将回退至哪种语言。',
-      fixed_language: '固定语言',
+      enable_auto_detect: 'Enable auto detect', // UNTRANSLATED
+      description:
+        "Your software detects the user's location and switches to the local language. You can add new locales by translating UI from English to another language.", // UNTRANSLATED
+      manage_language: 'Manage language', // UNTRANSLATED
+      default_language: 'Default language', // UNTRANSLATED
+      default_language_description_auto:
+        'The default language will be used when a text segment is missing translation.', // UNTRANSLATED
+      default_language_description_fixed:
+        'When auto detect is off, the default language is the only language your software will show. Turn on auto detect for language customization.', // UNTRANSLATED
     },
     authentication: {
       title: '身份验证',