language override setting

README.md

@@ -97,6 +97,18 @@ var tsml_react_config = {
 };
 ```
 
+### Override language
+
+By default, the UI language is determined by the visitor's browser setting (`navigator.language`). You can force a specific language for all visitors:
+
+```js
+var tsml_react_config = {
+  language: 'es',
+};
+```
+
+Supported values: `en`, `es`, `fr`, `ja`, `nl`, `pt`, `sk`, `sv`, `th`.
+
 ### Disable Add to Calendar button
 
 You can disable the add to calendar button if needed.

public/tests/japan.html

@@ -20,6 +20,7 @@
     <script>
       var tsml_react_config = {
         distance_unit: 'km',
+        language: 'ja',
       };
     </script>
     <script src="/app.js" async></script>

src/hooks/settings.tsx

@@ -156,15 +156,16 @@ export const SettingsProvider = ({
       }
     }
 
-    const preferredLanguage = navigator.language.substring(0, 2);
-
-    if (preferredLanguage in settings.strings) {
-      settings.language = preferredLanguage as Lang;
+    if (!userSettings?.language) {
+      const preferredLanguage = navigator.language.substring(0, 2);
+      if (preferredLanguage in settings.strings) {
+        settings.language = preferredLanguage as Lang;
+      }
     }
 
     const strings = settings.strings[settings.language];
 
-    Settings.defaultLocale = navigator.language;
+    Settings.defaultLocale = userSettings?.language ?? navigator.language;
 
     return { settings, strings };
   }, [userSettings]);

test/__tests__/settings.spec.ts

@@ -1,12 +1,27 @@
+import { renderHook } from '@testing-library/react';
+import { createElement } from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
+import { SettingsProvider, useSettings } from '../../src/hooks';
+
 describe('settings', () => {
   let languageGetter: ReturnType<typeof vi.spyOn>;
 
   beforeEach(() => {
     languageGetter = vi.spyOn(window.navigator, 'language', 'get');
   });
 
+  const renderSettings = (userSettings?: Partial<TSMLReactConfig>) => {
+    return renderHook(() => useSettings(), {
+      wrapper: ({ children }) =>
+        createElement(
+          SettingsProvider,
+          { userSettings: userSettings as TSMLReactConfig },
+          children
+        ),
+    });
+  };
+
   it('should import flags', () => {
     const flags = ['O', 'C'];
     // const { settings } = mergeSettings({ flags });
@@ -65,9 +80,21 @@ describe('settings', () => {
     //   expect(settings.weekdays).toEqual(weekdays);
   });
 
-  it('should fall back to english', () => {
+  it('falls back to english when navigator.language is unsupported', () => {
     languageGetter.mockReturnValue('de');
-    // const { settings } = mergeSettings();
-    // expect(settings.language).toEqual('en');
+    const { result } = renderSettings();
+    expect(result.current.settings.language).toBe('en');
+  });
+
+  it('uses navigator.language when no language is configured', () => {
+    languageGetter.mockReturnValue('es-MX');
+    const { result } = renderSettings();
+    expect(result.current.settings.language).toBe('es');
+  });
+
+  it('uses tsml_react_config language when set, ignoring navigator.language', () => {
+    languageGetter.mockReturnValue('en-US');
+    const { result } = renderSettings({ language: 'fr' });
+    expect(result.current.settings.language).toBe('fr');
   });
 });