diff --git a/package-lock.json b/package-lock.json index a46ea3ce2880..b4ea135fb221 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "license": "MIT", "dependencies": { "@expensify/react-native-web": "0.18.15", + "@formatjs/intl-datetimeformat": "^6.10.0", "@formatjs/intl-getcanonicallocales": "^2.2.0", "@formatjs/intl-listformat": "^7.2.2", "@formatjs/intl-locale": "^3.3.0", @@ -3688,6 +3689,33 @@ "tslib": "^2.4.0" } }, + "node_modules/@formatjs/intl-datetimeformat": { + "version": "6.10.0", + "resolved": "https://registry.npmjs.org/@formatjs/intl-datetimeformat/-/intl-datetimeformat-6.10.0.tgz", + "integrity": "sha512-5tJWZxOyP5D4PDrqv27h0LWAPHhQM9BHR0pDBTZOKWFEZNrS2IgREbyalSGwQLtN1tZaDrt3YeNfNLbZk1wSUw==", + "dependencies": { + "@formatjs/ecma402-abstract": "1.17.0", + "@formatjs/intl-localematcher": "0.4.0", + "tslib": "^2.4.0" + } + }, + "node_modules/@formatjs/intl-datetimeformat/node_modules/@formatjs/ecma402-abstract": { + "version": "1.17.0", + "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.17.0.tgz", + "integrity": "sha512-6ueQTeJZtwKjmh23bdkq/DMqH4l4bmfvtQH98blOSbiXv/OUiyijSW6jU22IT8BNM1ujCaEvJfTtyCYVH38EMQ==", + "dependencies": { + "@formatjs/intl-localematcher": "0.4.0", + "tslib": "^2.4.0" + } + }, + "node_modules/@formatjs/intl-datetimeformat/node_modules/@formatjs/intl-localematcher": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.4.0.tgz", + "integrity": "sha512-bRTd+rKomvfdS4QDlVJ6TA/Jx1F2h/TBVO5LjvhQ7QPPHp19oPNMIum7W2CMEReq/zPxpmCeB31F9+5gl/qtvw==", + "dependencies": { + "tslib": "^2.4.0" + } + }, "node_modules/@formatjs/intl-enumerator": { "version": "1.3.0", "license": "MIT", @@ -50130,6 +50158,35 @@ "tslib": "^2.4.0" } }, + "@formatjs/intl-datetimeformat": { + "version": "6.10.0", + "resolved": "https://registry.npmjs.org/@formatjs/intl-datetimeformat/-/intl-datetimeformat-6.10.0.tgz", + "integrity": "sha512-5tJWZxOyP5D4PDrqv27h0LWAPHhQM9BHR0pDBTZOKWFEZNrS2IgREbyalSGwQLtN1tZaDrt3YeNfNLbZk1wSUw==", + "requires": { + "@formatjs/ecma402-abstract": "1.17.0", + "@formatjs/intl-localematcher": "0.4.0", + "tslib": "^2.4.0" + }, + "dependencies": { + "@formatjs/ecma402-abstract": { + "version": "1.17.0", + "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.17.0.tgz", + "integrity": "sha512-6ueQTeJZtwKjmh23bdkq/DMqH4l4bmfvtQH98blOSbiXv/OUiyijSW6jU22IT8BNM1ujCaEvJfTtyCYVH38EMQ==", + "requires": { + "@formatjs/intl-localematcher": "0.4.0", + "tslib": "^2.4.0" + } + }, + "@formatjs/intl-localematcher": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.4.0.tgz", + "integrity": "sha512-bRTd+rKomvfdS4QDlVJ6TA/Jx1F2h/TBVO5LjvhQ7QPPHp19oPNMIum7W2CMEReq/zPxpmCeB31F9+5gl/qtvw==", + "requires": { + "tslib": "^2.4.0" + } + } + } + }, "@formatjs/intl-enumerator": { "version": "1.3.0", "requires": { diff --git a/package.json b/package.json index a89542bda646..9f356fbc0443 100644 --- a/package.json +++ b/package.json @@ -51,6 +51,7 @@ }, "dependencies": { "@expensify/react-native-web": "0.18.15", + "@formatjs/intl-datetimeformat": "^6.10.0", "@formatjs/intl-getcanonicallocales": "^2.2.0", "@formatjs/intl-listformat": "^7.2.2", "@formatjs/intl-locale": "^3.3.0", diff --git a/src/libs/IntlPolyfill/index.js b/src/libs/IntlPolyfill/index.js index 3925b98729a9..a99fc4cfed44 100644 --- a/src/libs/IntlPolyfill/index.js +++ b/src/libs/IntlPolyfill/index.js @@ -7,4 +7,5 @@ import polyfillNumberFormat from './polyfillNumberFormat'; export default function intlPolyfill() { // Just need to polyfill Intl.NumberFormat for web based platforms polyfillNumberFormat(); + require('@formatjs/intl-datetimeformat'); } diff --git a/src/libs/IntlPolyfill/index.native.js b/src/libs/IntlPolyfill/index.native.js index a628654fefea..4fb5ca585e25 100644 --- a/src/libs/IntlPolyfill/index.native.js +++ b/src/libs/IntlPolyfill/index.native.js @@ -9,6 +9,7 @@ export default function polyfill() { require('@formatjs/intl-getcanonicallocales/polyfill'); require('@formatjs/intl-locale/polyfill'); require('@formatjs/intl-pluralrules/polyfill'); + require('@formatjs/intl-datetimeformat'); polyfillNumberFormat(); polyfillListFormat(); } diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index 34dc089a621f..37b7087b6ad4 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -1,7 +1,6 @@ import React from 'react'; import Onyx, {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; -import moment from 'moment'; import _ from 'underscore'; import lodashGet from 'lodash/get'; import {View} from 'react-native'; @@ -65,7 +64,7 @@ Onyx.connect({ } timezone = lodashGet(val, [currentAccountID, 'timezone'], {}); - const currentTimezone = moment.tz.guess(true); + const currentTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone; // If the current timezone is different than the user's timezone, and their timezone is set to automatic // then update their timezone. diff --git a/src/libs/actions/App.js b/src/libs/actions/App.js index 645670c880d9..fffe43b88ee9 100644 --- a/src/libs/actions/App.js +++ b/src/libs/actions/App.js @@ -1,5 +1,3 @@ -import moment from 'moment-timezone'; -import 'moment/locale/es'; import {AppState} from 'react-native'; import Onyx from 'react-native-onyx'; import lodashGet from 'lodash/get'; @@ -386,7 +384,7 @@ function openProfile(personalDetails) { if (lodashGet(oldTimezoneData, 'automatic', true)) { newTimezoneData = { automatic: true, - selected: moment.tz.guess(true), + selected: Intl.DateTimeFormat().resolvedOptions().timeZone, }; } diff --git a/src/pages/settings/Profile/TimezoneInitialPage.js b/src/pages/settings/Profile/TimezoneInitialPage.js index 7dfc9fb6f9de..94cb40a3f6f3 100644 --- a/src/pages/settings/Profile/TimezoneInitialPage.js +++ b/src/pages/settings/Profile/TimezoneInitialPage.js @@ -1,7 +1,6 @@ import lodashGet from 'lodash/get'; import React from 'react'; import {View} from 'react-native'; -import moment from 'moment-timezone'; import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from '../../../components/withCurrentUserPersonalDetails'; import ScreenWrapper from '../../../components/ScreenWrapper'; import HeaderWithBackButton from '../../../components/HeaderWithBackButton'; @@ -37,7 +36,7 @@ function TimezoneInitialPage(props) { const updateAutomaticTimezone = (isAutomatic) => { PersonalDetails.updateAutomaticTimezone({ automatic: isAutomatic, - selected: isAutomatic ? moment.tz.guess() : timezone.selected, + selected: isAutomatic ? Intl.DateTimeFormat().resolvedOptions().timeZone : timezone.selected, }); };