Use only supported languages

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 (
     <Select.Root
-      value={sanitizeAppLanguageSetting(value)}
+      value={value ? sanitizeAppLanguageSetting(value) : undefined}
       onValueChange={handleOnChange}>
       <Select.Trigger label={_(msg`Select language`)}>
-        <Select.ValueText />
+        <Select.ValueText placeholder={_(msg`Select language`)} />
         <Select.Icon />
       </Select.Trigger>
       <Select.Content
@@ -38,10 +43,7 @@ export function LanguageSelect({
             <Select.ItemText>{label}</Select.ItemText>
           </Select.Item>
         )}
-        items={APP_LANGUAGES.map(l => ({
+        items={items}
-          label: l.name,
-          value: l.code2,
-        }))}
       />
     </Select.Root>
   )

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<string>('')
+  const [languageError, setLanguageError] = useState(false)
   const [disabled, setDisabled] = useState(false)
-  const [language, setLanguage] = useState(langPrefs.appLanguage)
+  const [language, setLanguage] = useState<string | undefined>(
+    KWS_SUPPORTED_LANGS.find(v => v.value === langPrefs.appLanguage)?.value,
+  )
   const [error, setError] = useState<string>('')
 
   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() {
                 <TextField.LabelText>
                   <Trans>Your preferred language</Trans>
                 </TextField.LabelText>
-                <LanguageSelect value={language} onChange={setLanguage} />
+                <LanguageSelect
+                  value={language}
+                  onChange={value => {
+                    setLanguage(value)
+                    setLanguageError(false)
+                  }}
+                  items={KWS_SUPPORTED_LANGS}
+                />
+
+                {languageError && (
+                  <Admonition type="error" style={[a.mt_sm]}>
+                    <Trans>Please select a language</Trans>
+                  </Admonition>
+                )}
               </View>
 
               {error && <Admonition type="error">{error}</Admonition>}

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'},
+]