From 9a443a9cb0123ba65b37a420a1e05d0e198f12a0 Mon Sep 17 00:00:00 2001 From: Christian Andolf Date: Mon, 17 Feb 2025 17:46:35 +0100 Subject: [PATCH] fix(LOY-95): localize and sort country names in select --- .../TempDesignSystem/Form/Country/index.tsx | 37 +++++++++++++------ 1 file changed, 26 insertions(+), 11 deletions(-) diff --git a/components/TempDesignSystem/Form/Country/index.tsx b/components/TempDesignSystem/Form/Country/index.tsx index afbd19084..320c24bd3 100644 --- a/components/TempDesignSystem/Form/Country/index.tsx +++ b/components/TempDesignSystem/Form/Country/index.tsx @@ -15,6 +15,7 @@ import { useIntl } from "react-intl" import Label from "@/components/TempDesignSystem/Form/Label" import SelectChevron from "@/components/TempDesignSystem/Form/SelectChevron" import Body from "@/components/TempDesignSystem/Text/Body" +import useLang from "@/hooks/useLang" import ErrorMessage from "../ErrorMessage" import { countries } from "./countries" @@ -34,6 +35,7 @@ export default function CountrySelect({ readOnly = false, registerOptions = {}, }: CountryProps) { + const lang = useLang() const intl = useIntl() const [rootDiv, setRootDiv] = useState(undefined) @@ -54,6 +56,7 @@ export default function CountrySelect({ } const selectCountryLabel = intl.formatMessage({ id: "Select a country" }) + const collator = new Intl.Collator(lang) return (
@@ -102,17 +105,29 @@ export default function CountrySelect({ UNSTABLE_portalContainer={rootDiv} > - {countries.map((country, idx) => ( - - - {country.name} - - - ))} + {countries + .map((country) => ({ + ...country, + localizedDisplayName: + intl.formatDisplayName(country.code, { type: "region" }) || + country.name, + })) + .sort((a, b) => + collator.compare(a.localizedDisplayName, b.localizedDisplayName) + ) + .map((country, idx) => { + return ( + + + {country.localizedDisplayName} + + + ) + })}