Add DateTimeFormat polyfills with timezone abbreviations

src/libs/IntlPolyfill/index.native.ts

@@ -1,3 +1,4 @@
+import polyfillDateTimeFormat from './polyfillDateTimeFormat';
 import polyfillListFormat from './polyfillListFormat';
 import polyfillNumberFormat from './polyfillNumberFormat';
 import type IntlPolyfill from './types';
@@ -10,8 +11,8 @@ const intlPolyfill: IntlPolyfill = () => {
     require('@formatjs/intl-getcanonicallocales/polyfill');
     require('@formatjs/intl-locale/polyfill');
     require('@formatjs/intl-pluralrules/polyfill');
-    require('@formatjs/intl-datetimeformat');
     polyfillNumberFormat();
+    polyfillDateTimeFormat();
     polyfillListFormat();
 };
 

src/libs/IntlPolyfill/index.ts

@@ -1,3 +1,4 @@
+import polyfillDateTimeFormat from './polyfillDateTimeFormat';
 import polyfillNumberFormat from './polyfillNumberFormat';
 import type IntlPolyfill from './types';
 
@@ -6,8 +7,7 @@ import type IntlPolyfill from './types';
  * This ensures that the currency data is consistent across platforms and browsers.
  */
 const intlPolyfill: IntlPolyfill = () => {
-    // Just need to polyfill Intl.NumberFormat for web based platforms
     polyfillNumberFormat();
-    require('@formatjs/intl-datetimeformat');
+    polyfillDateTimeFormat();
 };
 export default intlPolyfill;

src/libs/IntlPolyfill/polyfillDateTimeFormat.ts

@@ -0,0 +1,42 @@
+import type {DateTimeFormatConstructor} from '@formatjs/intl-datetimeformat';
+import DateUtils from '@libs/DateUtils';
+
+/* eslint-disable @typescript-eslint/naming-convention */
+const tzLinks: Record<string, string> = {
+    'Africa/Abidjan': 'Africa/Accra',
+    CET: 'Europe/Paris',
+    CST6CDT: 'America/Chicago',
+    EET: 'Europe/Sofia',
+    EST: 'America/Cancun',
+    EST5EDT: 'America/New_York',
+    'Etc/GMT': 'UTC',
+    'Etc/UTC': 'UTC',
+    Factory: 'UTC',
+    GMT: 'UTC',
+    HST: 'Pacific/Honolulu',
+    MET: 'Europe/Paris',
+    MST: 'America/Phoenix',
+    MST7MDT: 'America/Denver',
+    PST8PDT: 'America/Los_Angeles',
+    WET: 'Europe/Lisbon',
+};
+/* eslint-disable @typescript-eslint/naming-convention */
+
+export default function () {
+    // Because JS Engines do not expose default timezone, the polyfill cannot detect local timezone that a browser is in.
+    // We must manually do this by getting the local timezone before adding polyfill.
+    let currentTimezone = DateUtils.getCurrentTimezone().selected as string;
+    if (currentTimezone in tzLinks) {
+        currentTimezone = tzLinks[currentTimezone];
+    }
+
+    require('@formatjs/intl-datetimeformat/polyfill-force');
+    require('@formatjs/intl-datetimeformat/locale-data/en');
+    require('@formatjs/intl-datetimeformat/locale-data/es');
+    require('@formatjs/intl-datetimeformat/add-all-tz');
+
+    if ('__setDefaultTimeZone' in Intl.DateTimeFormat) {
+        // eslint-disable-next-line no-underscore-dangle
+        (Intl.DateTimeFormat as DateTimeFormatConstructor).__setDefaultTimeZone(currentTimezone);
+    }
+}