Vietnamese Localization (Continued from #2524) (#6564)

* Add Vietnamese localization

* Complete Vietnamese Translations

* Add date localization for Vietnamese

* Fix typos and wording in Vietnamese translation

* Update Vietnamese translation

* Add @vinhphm to Vietnamese translator list

---------

Co-authored-by: CromNguyen <nguyenthietmanh98@gmail.com>

lingui.config.js

@@ -21,6 +21,7 @@ module.exports = {
     'th',
     'tr',
     'uk',
+    'vi',
     'zh-CN',
     'zh-HK',
     'zh-TW',

src/components/hooks/dates.ts

@@ -28,6 +28,7 @@ import {
   th,
   tr,
   uk,
+  vi,
   zhCN,
   zhHK,
   zhTW,
@@ -60,6 +61,7 @@ const locales: Record<AppLanguage, Locale | undefined> = {
   th,
   tr,
   uk,
+  vi,
   ['zh-CN']: zhCN,
   ['zh-HK']: zhHK,
   ['zh-TW']: zhTW,

src/locale/__tests__/helpers.test.ts

@@ -11,4 +11,5 @@ test('sanitizeAppLanguageSetting', () => {
   expect(sanitizeAppLanguageSetting('foo')).toBe(AppLanguage.en)
   expect(sanitizeAppLanguageSetting('en,foo')).toBe(AppLanguage.en)
   expect(sanitizeAppLanguageSetting('foo,en')).toBe(AppLanguage.en)
+  expect(sanitizeAppLanguageSetting('vi')).toBe(AppLanguage.vi)
 })

src/locale/helpers.ts

@@ -101,7 +101,7 @@ export function getTranslatorLink(text: string, lang: string): string {
 /**
  * Returns a valid `appLanguage` value from an arbitrary string.
  *
- * Contenxt: post-refactor, we populated some user's `appLanguage` setting with
+ * Context: post-refactor, we populated some user's `appLanguage` setting with
  * `postLanguage`, which can be a comma-separated list of values. This breaks
  * `appLanguage` handling in the app, so we introduced this util to parse out a
  * valid `appLanguage` from the pre-populated `postLanguage` values.
@@ -157,6 +157,8 @@ export function sanitizeAppLanguageSetting(appLanguage: string): AppLanguage {
         return AppLanguage.tr
       case 'uk':
         return AppLanguage.uk
+      case 'vi':
+        return AppLanguage.vi
       case 'zh-CN':
         return AppLanguage.zh_CN
       case 'zh-HK':

src/locale/i18n.ts

@@ -31,6 +31,7 @@ import {messages as messagesRu} from '#/locale/locales/ru/messages'
 import {messages as messagesTh} from '#/locale/locales/th/messages'
 import {messages as messagesTr} from '#/locale/locales/tr/messages'
 import {messages as messagesUk} from '#/locale/locales/uk/messages'
+import {messages as messagesVi} from '#/locale/locales/vi/messages'
 import {messages as messagesZh_CN} from '#/locale/locales/zh-CN/messages'
 import {messages as messagesZh_HK} from '#/locale/locales/zh-HK/messages'
 import {messages as messagesZh_TW} from '#/locale/locales/zh-TW/messages'
@@ -193,6 +194,14 @@ export async function dynamicActivate(locale: AppLanguage) {
       ])
       break
     }
+    case AppLanguage.vi: {
+      i18n.loadAndActivate({locale, messages: messagesVi})
+      await Promise.all([
+        import('@formatjs/intl-pluralrules/locale-data/vi'),
+        import('@formatjs/intl-numberformat/locale-data/vi'),
+      ])
+      break
+    }
     case AppLanguage.zh_CN: {
       i18n.loadAndActivate({locale, messages: messagesZh_CN})
       await Promise.all([

src/locale/i18n.web.ts

@@ -88,6 +88,10 @@ export async function dynamicActivate(locale: AppLanguage) {
       mod = await import(`./locales/uk/messages`)
       break
     }
+    case AppLanguage.vi: {
+      mod = await import(`./locales/vi/messages`)
+      break
+    }
     case AppLanguage.zh_CN: {
       mod = await import(`./locales/zh-CN/messages`)
       break

src/locale/languages.ts

@@ -25,6 +25,7 @@ export enum AppLanguage {
   th = 'th',
   tr = 'tr',
   uk = 'uk',
+  vi = 'vi',
   zh_CN = 'zh-CN',
   zh_HK = 'zh-HK',
   zh_TW = 'zh-TW',
@@ -56,6 +57,7 @@ export const APP_LANGUAGES: AppLanguageConfig[] = [
   {code2: AppLanguage.th, name: 'ภาษาไทย – Thai'},
   {code2: AppLanguage.tr, name: 'Türkçe – Turkish'},
   {code2: AppLanguage.uk, name: 'Українська – Ukrainian'},
+  {code2: AppLanguage.vi, name: 'Tiếng Việt – Vietnamese'},
   {code2: AppLanguage.zh_CN, name: '简体中文 – Simplified Chinese'},
   {code2: AppLanguage.zh_TW, name: '繁體中文 – Traditional Chinese'},
   {code2: AppLanguage.zh_HK, name: '粵文 – Cantonese'},