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

2
apps/scandic-web/actions/editProfile.ts
View File

@@ -2,13 +2,13 @@
import { z } from "zod" import { z } from "zod"
import { countriesMap } from "@/constants/countries"
import { ApiLang } from "@/constants/languages" import { ApiLang } from "@/constants/languages"
import * as api from "@/lib/api" import * as api from "@/lib/api"
import { getProfile } from "@/lib/trpc/memoizedRequests" import { getProfile } from "@/lib/trpc/memoizedRequests"
import { protectedServerActionProcedure } from "@/server/trpc" import { protectedServerActionProcedure } from "@/server/trpc"
import { editProfileSchema } from "@/components/Forms/Edit/Profile/schema" import { editProfileSchema } from "@/components/Forms/Edit/Profile/schema"
import { countriesMap } from "@/components/TempDesignSystem/Form/Country/countries"
import { getIntl } from "@/i18n" import { getIntl } from "@/i18n"
import { getMembership } from "@/utils/user" import { getMembership } from "@/utils/user"
import { phoneValidator } from "@/utils/zod/phoneValidator" import { phoneValidator } from "@/utils/zod/phoneValidator"

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

3
apps/scandic-web/components/TempDesignSystem/Form/Country/index.tsx
View File

@@ -12,13 +12,14 @@ import {
import { useController, useFormContext } from "react-hook-form" import { useController, useFormContext } from "react-hook-form"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { countries } from "@/constants/countries"
import Label from "@/components/TempDesignSystem/Form/Label" import Label from "@/components/TempDesignSystem/Form/Label"
import SelectChevron from "@/components/TempDesignSystem/Form/SelectChevron" import SelectChevron from "@/components/TempDesignSystem/Form/SelectChevron"
import Body from "@/components/TempDesignSystem/Text/Body" import Body from "@/components/TempDesignSystem/Text/Body"
import useLang from "@/hooks/useLang" import useLang from "@/hooks/useLang"
import ErrorMessage from "../ErrorMessage" import ErrorMessage from "../ErrorMessage"
import { countries } from "./countries"
import styles from "./country.module.css" import styles from "./country.module.css"

0
apps/scandic-web/components/TempDesignSystem/Form/Country/countries.ts → apps/scandic-web/constants/countries.ts
View File

2
apps/scandic-web/i18n/dictionaries/de.json
View File

@@ -391,7 +391,7 @@
"Membership benefits applied": "Membership benefits applied", "Membership benefits applied": "Membership benefits applied",
"Membership cards": "Mitgliedskarten", "Membership cards": "Mitgliedskarten",
"Membership no": "Membership no", "Membership no": "Membership no",
"Membership terms and conditions": "Membership terms and conditions", "Membership terms and conditions": "Allgemeine Mitgliedsbedingungen",
"Menu": "Menü", "Menu": "Menü",
"Menus": "Menüs", "Menus": "Menüs",
"Modify": "Ändern", "Modify": "Ändern",

3
apps/scandic-web/server/routers/user/output.ts
View File

@@ -1,6 +1,7 @@
import { z } from "zod" import { z } from "zod"
import { countriesMap } from "@/components/TempDesignSystem/Form/Country/countries" import { countriesMap } from "@/constants/countries"
import { getMembership } from "@/utils/user" import { getMembership } from "@/utils/user"
import { imageSchema } from "../hotels/schemas/image" import { imageSchema } from "../hotels/schemas/image"

2
apps/scandic-web/server/routers/user/query.ts
View File

@@ -1,5 +1,6 @@
import { metrics } from "@opentelemetry/api" import { metrics } from "@opentelemetry/api"
import { countries } from "@/constants/countries"
import * as api from "@/lib/api" import * as api from "@/lib/api"
import { dt } from "@/lib/dt" import { dt } from "@/lib/dt"
import { import {
@@ -8,7 +9,6 @@ import {
safeProtectedProcedure, safeProtectedProcedure,
} from "@/server/trpc" } from "@/server/trpc"
import { countries } from "@/components/TempDesignSystem/Form/Country/countries"
import { cache } from "@/utils/cache" import { cache } from "@/utils/cache"
import * as maskValue from "@/utils/maskValue" import * as maskValue from "@/utils/maskValue"
import { getMembership, getMembershipCards } from "@/utils/user" import { getMembership, getMembershipCards } from "@/utils/user"

7
apps/scandic-web/utils/countries.ts Normal file
View File

@@ -0,0 +1,7 @@
import { countriesMap } from "@/constants/countries"
export function isValidCountry(
country: string
): country is keyof typeof countriesMap {
return country in countriesMap
}

26
apps/scandic-web/utils/languages.ts
View File

@@ -2,20 +2,20 @@ import { z } from "zod"
import { Lang } from "@/constants/languages" import { Lang } from "@/constants/languages"
export function findLang(pathname: string) {
const langFromPath = Object.values(Lang).find(
(l) => pathname.startsWith(`/${l}/`) || pathname === `/${l}`
)
const parsedLang = languageSchema.safeParse(langFromPath)
if (!parsedLang.success) {
return undefined
}
return parsedLang.data
}
export const languageSchema = z.preprocess( export const languageSchema = z.preprocess(
(arg) => (typeof arg === "string" ? arg.toLowerCase() : arg), (arg) => (typeof arg === "string" ? arg.toLowerCase() : arg),
z.nativeEnum(Lang) z.nativeEnum(Lang)
) )
export function isValidLang(lang?: string): lang is Lang {
const result = languageSchema.safeParse(lang)
return result.success
}
export function findLang(pathname: string): Lang | undefined {
const langFromPath = Object.values(Lang).find(
(l) => pathname.startsWith(`/${l}/`) || pathname === `/${l}`
)
return isValidLang(langFromPath) ? langFromPath : undefined
}