Merged in feat/LOY-155-localize-language-options-in-edit-profile-form (pull request #1490)

feat(LOY-155): Localize language options in edit profile form

* feat(LOY-155): Localize language options in edit profile form

* feat(LOY-155): Capitalize first letter of localized language options


Approved-by: Christian Andolf

apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx

@@ -2,7 +2,7 @@
 // import { useFormStatus } from "react-dom"
 import { useIntl } from "react-intl"
 
-import { languageSelect } from "@/constants/languages"
+import { getLocalizedLanguageOptions } from "@/constants/languages"
 
 import Divider from "@/components/TempDesignSystem/Divider"
 import CountrySelect from "@/components/TempDesignSystem/Form/Country"
@@ -12,13 +12,17 @@ import NewPassword from "@/components/TempDesignSystem/Form/NewPassword"
 import Phone from "@/components/TempDesignSystem/Form/Phone"
 import Select from "@/components/TempDesignSystem/Form/Select"
 import Body from "@/components/TempDesignSystem/Text/Body"
+import useLang from "@/hooks/useLang"
 
 import styles from "./formContent.module.css"
 
 export default function FormContent() {
   const intl = useIntl()
+  const lang = useLang()
+
   // const { pending } = useFormStatus()
 
+  const languageOptions = getLocalizedLanguageOptions(lang)
   const city = intl.formatMessage({ id: "City" })
   const country = intl.formatMessage({ id: "Country" })
   const email = `${intl.formatMessage({ id: "Email" })} ${intl.formatMessage({ id: "Address" }).toLowerCase()}`
@@ -65,7 +69,7 @@ export default function FormContent() {
         />
         <Phone label={phoneNumber} name="phoneNumber" data-hj-suppress />
         <Select
-          items={languageSelect}
+          items={languageOptions}
           label={intl.formatMessage({ id: "Language" })}
           name="language"
         />

apps/scandic-web/constants/languages.ts

@@ -85,3 +85,24 @@ export const languageSelect = [
   { label: "Norwegian", value: ApiLang.No },
   { label: "Swedish", value: ApiLang.Sv },
 ]
+
+/**
+ * Get localized language options based on the current lang.
+ */
+export function getLocalizedLanguageOptions(currentLang: Lang) {
+  const displayNames = new Intl.DisplayNames([currentLang], {
+    type: "language",
+  })
+
+  return languageSelect.map((option) => {
+    const localizedName = displayNames.of(option.value)
+    const capitalizedName = localizedName
+      ? localizedName.charAt(0).toUpperCase() + localizedName.slice(1)
+      : option.label
+
+    return {
+      value: option.value,
+      label: capitalizedName,
+    }
+  })
+}