Add DateTimeFormat polyfill

src/libs/IntlPolyfill/index.native.ts

@@ -1,6 +1,7 @@
 import polyfillNumberFormat from './polyfillNumberFormat';
 import polyfillListFormat from './polyfillListFormat';
 import IntlPolyfill from './types';
+import polyfillDateTimeFormat from './polyfillDateTimeFormat';
 
 /**
  * Polyfill the Intl API, always performed for native devices.
@@ -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,13 +1,13 @@
 import polyfillNumberFormat from './polyfillNumberFormat';
 import IntlPolyfill from './types';
+import polyfillDateTimeFormat from './polyfillDateTimeFormat';
 
 /**
  * Polyfill the Intl API if the ICU version is old.
  * 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,52 @@
+import Onyx from 'react-native-onyx';
+import ONYXKEYS from '../../ONYXKEYS';
+import {Timezone} from '../../types/onyx/PersonalDetails';
+import CONST from '../../CONST';
+
+let currentUserAccountID: number | undefined;
+Onyx.connect({
+    key: ONYXKEYS.SESSION,
+    callback: (val) => {
+        // When signed out, val is undefined
+        if (!val) {
+            return;
+        }
+
+        currentUserAccountID = val.accountID;
+    },
+});
+
+let timezone: Required<Timezone> = CONST.DEFAULT_TIME_ZONE;
+Onyx.connect({
+    key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+    callback: (value) => {
+        if (!currentUserAccountID) {
+            return;
+        }
+
+        const personalDetailsTimezone = value?.[currentUserAccountID]?.timezone;
+
+        timezone = {
+            selected: personalDetailsTimezone?.selected ?? CONST.DEFAULT_TIME_ZONE.selected,
+            automatic: personalDetailsTimezone?.automatic ?? CONST.DEFAULT_TIME_ZONE.automatic,
+        };
+    },
+});
+
+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.
+    const currentTimezone = timezone.automatic ? Intl.DateTimeFormat().resolvedOptions().timeZone : timezone.selected;
+
+    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 @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        // eslint-disable-next-line no-underscore-dangle
+        Intl.DateTimeFormat.__setDefaultTimeZone(currentTimezone);
+    }
+}