Profiles/i18n: Add local time timezone (#9285)

Author: tristanlabelle

app/web/features/profile/locales/en.json

@@ -34,6 +34,7 @@
     "gender_verification_verified": "This user has verified their gender",
     "gender_verification_mismatch": "User provided gender does not match verified gender"
   },
+  "local_time_with_time_zone_text": "{{ time }} (<timeZone/>)",
   "edit": "Edit Profile",
   "helper_text": {
     "characters_remaining_one": "<bold>Please write at least {{count}} more character to unlock messaging and requests.</bold> Genuine profiles build a community of trust. The more you share, the easier it is to connect!",

app/web/features/profile/view/userLabels.tsx

@@ -9,12 +9,14 @@ import {
   GenderVerificationStatus,
   User,
 } from "proto/api_pb";
+import { Trans } from "react-i18next";
 import { Temporal } from "temporal-polyfill";
 import { theme } from "theme";
 import {
   localizeDateTime,
   localizeDuration,
   localizeRelativeTime,
+  localizeTimeZone,
   localizeYearMonth,
   timestampToPlainDateTime,
 } from "utils/date";
@@ -291,10 +293,38 @@ export const RemainingAboutLabels = ({ user }: Props) => {
       {user.timezone ? (
         <LabelAndText
           label={t("profile:heading.local_time")}
-          text={localizeDateTime(Temporal.Now.plainDateTimeISO(user.timezone), {
-            locale,
-            includeDate: false,
-          })}
+          text={
+            <Trans
+              i18nKey="profile:local_time_with_time_zone_text"
+              values={{
+                time: localizeDateTime(
+                  Temporal.Now.plainDateTimeISO(user.timezone),
+                  {
+                    locale,
+                    includeDate: false,
+                  },
+                ),
+              }}
+              components={{
+                timeZone: (
+                  <Tooltip
+                    title={localizeTimeZone(user.timezone, locale, {
+                      short: false,
+                      capitalize: true,
+                    })}
+                    placement="top"
+                    arrow
+                  >
+                    <span>
+                      {localizeTimeZone(user.timezone, locale, {
+                        short: true,
+                      })}
+                    </span>
+                  </Tooltip>
+                ),
+              }}
+            />
+          }
         />
       ) : undefined}
     </>

app/web/utils/date.test.ts

@@ -9,6 +9,7 @@ import {
   localizeDuration,
   localizeRelativeTime,
   localizeTimeOffset,
+  localizeTimeZone,
 } from "utils/date";
 
 const janFirst2000 = Temporal.PlainDateTime.from("2000-01-01");
@@ -460,6 +461,42 @@ describe("localizeDuration", () => {
   });
 });
 
+describe("localizeTimeZone", () => {
+  // Use timezones that have no daylight time or the test will produce different results
+  // depending on the time of the year.
+  it("supports for different time zones", () => {
+    expect(localizeTimeZone("Asia/Shanghai", "en")).toBe("China Standard Time");
+    expect(localizeTimeZone("America/Mexico_City", "en")).toBe(
+      "Central Standard Time",
+    );
+  });
+
+  it("supports for different languages", () => {
+    expect(localizeTimeZone("Asia/Shanghai", "en")).toBe("China Standard Time");
+    expect(localizeTimeZone("Asia/Shanghai", "es")).toBe(
+      "hora estándar de China",
+    );
+  });
+
+  it("supports short and long forms", () => {
+    expect(localizeTimeZone("Atlantic/Reykjavik", "en", { short: false })).toBe(
+      "Greenwich Mean Time",
+    );
+    expect(localizeTimeZone("Atlantic/Reykjavik", "en", { short: true })).toBe(
+      "GMT",
+    );
+  });
+
+  it("supports for capitalization", () => {
+    expect(localizeTimeZone("Asia/Shanghai", "es", { capitalize: false })).toBe(
+      "hora estándar de China",
+    );
+    expect(localizeTimeZone("Asia/Shanghai", "es", { capitalize: true })).toBe(
+      "Hora estándar de China",
+    );
+  });
+});
+
 describe("approxTimeDuration", () => {
   it("converts years, months, weeks and days to hours", () => {
     expect(

app/web/utils/date.ts

@@ -178,6 +178,33 @@ export function localizeMonthAbbreviation(
     : formatted;
 }
 
+const timeZoneNameCache = new Map<string, string>();
+
+/// Localizes the name of a time zone.
+export function localizeTimeZone(
+  timeZone: string,
+  locale: string,
+  options?: {
+    short?: boolean;
+    capitalize?: boolean;
+  },
+) {
+  const intlOptions: Intl.DateTimeFormatOptions = {
+    timeZone: timeZone,
+    timeZoneName: options?.short ? "short" : "long",
+  };
+  const cacheKey = JSON.stringify({ ...intlOptions, locale });
+  let name = timeZoneNameCache.get(cacheKey);
+  if (!name) {
+    const format = new Intl.DateTimeFormat(locale, intlOptions);
+    name = format
+      .formatToParts(Date.now())
+      .find((part) => part.type === "timeZoneName")!.value;
+    timeZoneNameCache.set(cacheKey, name);
+  }
+  return options?.capitalize ? capitalizeFirstLetter(name, locale) : name;
+}
+
 const isoMuiDateFormat = "YYYY-MM-DD";
 
 /// Gets the date format for a locale using Material UI placeholders.