scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in feat/LOY-156-localize-user-languages (pull request #1452)

Browse Source 
feat(LOY-156): Improve language handling and localization in profile page

* feat(LOY-156): Improve language handling and localization in profile page

* refactor(LOY-156): Improve language display using Intl.DisplayNames

* feat(LOY-156): Enhance country display with localized country names

* refactor(LOY-156): Move countries data to a dedicated constants file & more type safe country mapping

* feat(LOY-156): Update isValidLang to use languageSchema + German translation for membership terms and conditions

* chore(LOY-156): language handling in profile component


Approved-by: Christian Andolf
This commit is contained in:
Chuma Mcphoy (We Ahead)
2025-03-03 12:55:05 +00:00
parent c04bb20021
commit 738c0e223f
9 changed files with 50 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
apps/scandic-web/components/MyPages/myprofile/profile/profile.tsx
View File

@@ -1,4 +1,5 @@
import { languages, languageSelect } from "@/constants/languages"
import { countriesMap } from "@/constants/countries"
import { Lang, languages } from "@/constants/languages"
import { profileEdit } from "@/constants/routes/myPages"
import { getProfile } from "@/lib/trpc/memoizedRequests"
@@ -20,6 +21,8 @@ import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import { isValidCountry } from "@/utils/countries"
import { isValidLang } from "@/utils/languages"
import styles from "./profile.module.css"
@@ -40,8 +43,19 @@ export default async function Profile() {
addressParts.push(user.address.city)
}
const displayNames = {
language: new Intl.DisplayNames([lang], { type: "language" }),
region: new Intl.DisplayNames([lang], { type: "region" }),
}
if (user.address.country) {
addressParts.push(user.address.country)
const countryCode = isValidCountry(user.address.country)
? countriesMap[user.address.country]
: null
const localizedCountry = countryCode
? displayNames.region.of(countryCode)
: user.address.country
addressParts.push(localizedCountry)
}
const addressOutput =
@@ -49,8 +63,12 @@ export default async function Profile() {
? addressParts.join(", ")
: intl.formatMessage({ id: "N/A" })
const defaultLanguage = languages[lang]
const language = languageSelect.find((l) => l.value === user.language)
const userLang = isValidLang(user.language) ? user.language : Lang.en
const localizedLanguage = displayNames.language.of(userLang)
const normalizedLanguage = localizedLanguage
? localizedLanguage.charAt(0).toUpperCase() + localizedLanguage.slice(1)
: languages[userLang]
return (
<>
<section className={styles.container}>
@@ -96,7 +114,7 @@ export default async function Profile() {
<Body color="burgundy" textTransform="bold">
{intl.formatMessage({ id: "Language" })}
</Body>
<Body color="burgundy">{language?.label ?? defaultLanguage}</Body>
<Body color="burgundy">{normalizedLanguage}</Body>
</div>
<div className={styles.item}>
<EmailIcon color="burgundy" />