diff --git a/src/components/LanguageSelect.tsx b/src/components/LanguageSelect.tsx
index 849ab1d752..2ad3949aee 100644
--- a/src/components/LanguageSelect.tsx
+++ b/src/components/LanguageSelect.tsx
@@ -9,9 +9,14 @@ import * as Select from '#/components/Select'
export function LanguageSelect({
value,
onChange,
+ items = APP_LANGUAGES.map(l => ({
+ label: l.name,
+ value: l.code2,
+ })),
}: {
- value: string
+ value?: string
onChange: (value: string) => void
+ items?: {label: string; value: string}[]
}) {
const {_} = useLingui()
@@ -25,10 +30,10 @@ export function LanguageSelect({
return (
-
+
{label}
)}
- items={APP_LANGUAGES.map(l => ({
- label: l.name,
- value: l.code2,
- }))}
+ items={items}
/>
)
diff --git a/src/components/ageAssurance/AgeAssuranceInitDialog.tsx b/src/components/ageAssurance/AgeAssuranceInitDialog.tsx
index 1bde73b576..ed064f3b20 100644
--- a/src/components/ageAssurance/AgeAssuranceInitDialog.tsx
+++ b/src/components/ageAssurance/AgeAssuranceInitDialog.tsx
@@ -16,6 +16,7 @@ import {atoms as a, useTheme, web} from '#/alf'
import {Admonition} from '#/components/Admonition'
import {AgeAssuranceBadge} from '#/components/ageAssurance/AgeAssuranceBadge'
import {urls} from '#/components/ageAssurance/const'
+import {KWS_SUPPORTED_LANGS} from '#/components/ageAssurance/const'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import * as Dialog from '#/components/Dialog'
import {Divider} from '#/components/Divider'
@@ -72,8 +73,11 @@ function Inner() {
const [success, setSuccess] = useState(false)
const [email, setEmail] = useState(currentAccount?.email || '')
const [emailError, setEmailError] = useState('')
+ const [languageError, setLanguageError] = useState(false)
const [disabled, setDisabled] = useState(false)
- const [language, setLanguage] = useState(langPrefs.appLanguage)
+ const [language, setLanguage] = useState(
+ KWS_SUPPORTED_LANGS.find(v => v.value === langPrefs.appLanguage)?.value,
+ )
const [error, setError] = useState('')
const {mutateAsync: init, isPending} = useInitAgeAssurance()
@@ -102,10 +106,16 @@ function Inner() {
}
const onSubmit = async () => {
+ setLanguageError(false)
+
try {
const {status} = runEmailValidation()
if (status === 'invalid') return
+ if (!language) {
+ setLanguageError(true)
+ return
+ }
await init({
email,
@@ -247,7 +257,20 @@ function Inner() {
Your preferred language
-
+ {
+ setLanguage(value)
+ setLanguageError(false)
+ }}
+ items={KWS_SUPPORTED_LANGS}
+ />
+
+ {languageError && (
+
+ Please select a language
+
+ )}
{error && {error}}
diff --git a/src/components/ageAssurance/const.ts b/src/components/ageAssurance/const.ts
index ea6411ba71..35f96e8417 100644
--- a/src/components/ageAssurance/const.ts
+++ b/src/components/ageAssurance/const.ts
@@ -3,3 +3,24 @@ export const urls = {
kwsTermsOfUse: 'https://www.kidswebservices.com/en-US/terms-of-use',
kwsPrivacyPolicy: 'https://www.kidswebservices.com/en-US/privacy-policy',
}
+
+export const KWS_SUPPORTED_LANGS = [
+ {value: 'en', label: 'English'},
+ {value: 'ar', label: 'العربية'},
+ {value: 'zh-Hans', label: '简体中文'},
+ {value: 'nl', label: 'Nederlands'},
+ {value: 'tl', label: 'Filipino'},
+ {value: 'fr', label: 'Français'},
+ {value: 'de', label: 'Deutsch'},
+ {value: 'id', label: 'Bahasa Indonesia'},
+ {value: 'it', label: 'Italiano'},
+ {value: 'ja', label: '日本語'},
+ {value: 'ko', label: '한국어'},
+ {value: 'pt', label: 'Português'},
+ {value: 'pt-BR', label: 'Português (Brasil)'},
+ {value: 'ru', label: 'Русский'},
+ {value: 'es', label: 'Español'},
+ {value: 'tr', label: 'Türkçe'},
+ {value: 'th', label: 'ภาษาไทย'},
+ {value: 'vi', label: 'Tiếng Việt'},
+]