Fix/issue 18859: explicit country code handling for client-side localization

.gitignore

@@ -194,3 +194,7 @@ libs/shared/cms/src/__generated__/graphql.js
 
 # Sentry Config File
 .env.sentry-build-plugin
+
+# Local build logs
+build_log.txt
+build_log_2.txt

packages/fxa-auth-server/lib/geodb.js

@@ -22,7 +22,7 @@ geodb(knownIp);
 module.exports = (log) => {
   log.info('geodb.start', { enabled: config.enabled, dbPath: config.dbPath });
 
-  return (ip) => {
+  return (ip, locale) => {
     if (config.enabled === false) {
       return {};
     }
@@ -37,7 +37,7 @@ module.exports = (log) => {
         return config.locationOverride;
       }
 
-      const location = geodb(ip);
+      const location = geodb(ip, { userLocale: locale });
       const accuracy = location.accuracy;
       let confidence = 'fxa.location.accuracy.';
 

packages/fxa-auth-server/lib/senders/emails/sass-compile-files.ts

@@ -3,13 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { renderSync } from 'sass';
-import {
-  writeFileSync,
-  mkdirSync,
-  existsSync,
-  rmdirSync,
-  readdirSync,
-} from 'fs';
+import { writeFileSync, mkdirSync, existsSync, rmSync, readdirSync } from 'fs';
 import path from 'path';
 
 const getDirectories = (source: string) =>
@@ -38,7 +32,7 @@ async function compileSass(dir: string, subdir: string) {
 async function main(directories: Record<any, any>) {
   // remove css directory if already present
   if (existsSync(path.join(__dirname, 'css'))) {
-    rmdirSync(path.join(__dirname, 'css'), { recursive: true });
+    rmSync(path.join(__dirname, 'css'), { recursive: true, force: true });
   }
   mkdirSync(path.join(__dirname, 'css'));
 

packages/fxa-auth-server/lib/server.js

@@ -209,7 +209,7 @@ async function create(log, error, config, routes, db, statsd, glean, customs) {
       userAgent(request.headers['user-agent'])
     );
     defineLazyGetter(request.app, 'geo', () =>
-      getGeoData(request.app.clientAddress)
+      getGeoData(request.app.clientAddress, request.app.locale)
     );
     defineLazyGetter(request.app, 'metricsContext', () =>
       metricsContext.get(request)

packages/fxa-auth-server/test/local/geodb.js

@@ -64,4 +64,50 @@ describe('geodb', () => {
     const geoData = getGeoData('8.8.8.8');
     assert.deepEqual(geoData, {});
   });
+  it('passes userLocale to geodb and returns localized data', () => {
+    const moduleMocks = {
+      '../config': {
+        default: {
+          get: function (item) {
+            if (item === 'geodb') {
+              return {
+                enabled: true,
+                locationOverride: {},
+              };
+            }
+          },
+        },
+      },
+      'fxa-geodb': function (config) {
+        return function (ip, options) {
+          if (options && options.userLocale === 'fr') {
+            return {
+              city: 'Paris',
+              country: 'France',
+              countryCode: 'FR',
+              accuracy: 10,
+            };
+          }
+          return {
+            city: 'Mountain View',
+            country: 'United States',
+            countryCode: 'US',
+            accuracy: 10,
+          };
+        };
+      },
+    };
+    const thisMockLog = mockLog({});
+
+    const getGeoData = proxyquire(modulePath, moduleMocks)(thisMockLog);
+
+    // Call with 'fr'
+    const geoDataFr = getGeoData('8.8.8.8', 'fr');
+    assert.equal(geoDataFr.location.country, 'France');
+    assert.equal(geoDataFr.location.city, 'Paris');
+
+    // Call with 'en' or undefined (defaults to mock else)
+    const geoDataEn = getGeoData('8.8.8.8', 'en');
+    assert.equal(geoDataEn.location.country, 'United States');
+  });
 });

packages/fxa-settings/src/components/DeviceInfoBlock/index.tsx

@@ -61,13 +61,19 @@ export const DeviceInfoBlock = ({ remoteMetadata }: DeviceInfoBlockProps) => {
   return (
     <div className="mt-8 mb-4">
       {deviceName && <h2 className="mb-4 text-base">{deviceName}</h2>}
-      <FtlMsg id="device-info-browser-os" vars={{ deviceFamily, deviceOS }}>
+      <FtlMsg
+        id="device-info-browser-os"
+        vars={{
+          deviceFamily: deviceFamily || 'Unknown',
+          deviceOS: deviceOS || 'Unknown',
+        }}
+      >
         <p className="text-xs">{`${deviceFamily} on ${deviceOS}`}</p>
       </FtlMsg>
       <p className="text-xs">
         <LocalizedLocation />
       </p>
-      <FtlMsg id="device-info-ip-address" vars={{ ipAddress }}>
+      <FtlMsg id="device-info-ip-address" vars={{ ipAddress: ipAddress || '' }}>
         <p className="text-xs">{`IP address: ${ipAddress}`}</p>
       </FtlMsg>
     </div>

packages/fxa-shared/express/geo-locate.ts

@@ -13,7 +13,11 @@ export const geolocate =
   (log: Logger) =>
   (request: express.Request) => {
     try {
-      return geodb(remoteAddress(request).clientAddress);
+      // @ts-ignore - locale/lang might not be in standard Request type but injected by middleware
+      const locale = request.locale || request.lang;
+      return geodb(remoteAddress(request).clientAddress, {
+        userLocale: locale,
+      });
     } catch (err) {
       log.error('geodb.error', err);
       return {};