diff --git a/CHANGELOG.md b/CHANGELOG.md index f60f72e33..704698c7a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,4 +18,6 @@ All notable, unreleased changes to this project will be documented in this file. - Replace checkbox with switch component in "product type has variants" - #152 by @dominik-zeglen - Add password reset flow - #147 by @dominik-zeglen - Add support for multiple values in filters - #160 by @dominik-zeglen -- UI improvements - #166 by @benekex2 \ No newline at end of file +- UI improvements - #166 by @benekex2 +- Fix en locale matching - #165 by @dominik-zeglen + diff --git a/src/components/Locale/Locale.test.ts b/src/components/Locale/Locale.test.ts new file mode 100644 index 000000000..082a9a1e3 --- /dev/null +++ b/src/components/Locale/Locale.test.ts @@ -0,0 +1,25 @@ +import { getMatchingLocale, Locale } from "./Locale"; + +describe("Matches locale to browser settings", () => { + it("if first language is an exact match", () => { + const locales = ["fr", "es", "en"]; + + expect(getMatchingLocale(locales)).toBe(Locale.FR); + }); + + it("if there is an exact match, but it's not first preference", () => { + const locales = ["does-not-exist", "tr", "de", "fr"]; + + expect(getMatchingLocale(locales)).toBe(Locale.TR); + }); + + it("or returns undefined if there is no match", () => { + const locales = [ + "does-not-exist-1", + "does-not-exist-2", + "does-not-exist-3" + ]; + + expect(getMatchingLocale(locales)).toBe(undefined); + }); +}); diff --git a/src/components/Locale/Locale.tsx b/src/components/Locale/Locale.tsx index 0a83cc640..a5d23b8e8 100644 --- a/src/components/Locale/Locale.tsx +++ b/src/components/Locale/Locale.tsx @@ -52,7 +52,7 @@ export const LocaleContext = React.createContext( const { Consumer: LocaleConsumer, Provider: RawLocaleProvider } = LocaleContext; -enum Locale { +export enum Locale { AR = "ar", AZ = "az", BG = "bg", @@ -62,6 +62,7 @@ enum Locale { DA = "da", DE = "de", EL = "el", + EN = "en", ES = "es", ES_CO = "es-co", ET = "et", @@ -107,6 +108,8 @@ const localeData: Record = { [Locale.DA]: locale_DA, [Locale.DE]: locale_DE, [Locale.EL]: locale_EL, + // Default language + [Locale.EN]: undefined, [Locale.ES]: locale_ES, [Locale.ES_CO]: locale_ES_CO, [Locale.ET]: locale_ET, @@ -141,10 +144,10 @@ const localeData: Record = { [Locale.ZH_HANT]: locale_ZH_HANT }; -function getMatchingLocale(): Locale { +export function getMatchingLocale(languages: readonly string[]): Locale { const localeEntries = Object.entries(Locale); - for (const preferredLocale of navigator.languages) { + for (const preferredLocale of languages) { for (const localeEntry of localeEntries) { if (localeEntry[1].toLowerCase() === preferredLocale.toLowerCase()) { return Locale[localeEntry[0]]; @@ -156,7 +159,9 @@ function getMatchingLocale(): Locale { } const LocaleProvider: React.FC = ({ children }) => { - const [locale] = React.useState(getMatchingLocale() || defaultLocale); + const [locale] = React.useState( + getMatchingLocale(navigator.languages) || defaultLocale + ); return (