Merge pull request #1181 from sharetribe/update-intl

Update intl

CHANGELOG.md

@@ -14,6 +14,29 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2019-XX-XX
 
+- [change] Update `react-intl` to 3.1.13. More information about the changes can be found from
+  [Upgrade guide for react-intl@3.x](https://github.com/formatjs/react-intl/blob/master/docs/Upgrade-Guide.md)
+
+  - Proptype `intlShape` was removed so we needed to create it again. Because of this we added a new
+    `util/reactIntl.js` file. This file is now used to wrap all the react-intl related imports.
+  - `addLocaleDate` function was removed and react-intl library is now relying on native Intl APIs:
+    [Intl.PluralRules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/PluralRules)
+    and
+    [Intl.RelativeTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RelativeTimeFormat).
+    In order to support older browsers we needed to add `intl-pluralrules` and
+    `intl-relativetimeformat` to `util/polyfills.js`
+  - Also Node must be now compiled with `full-icu` which caused changes to `start` and `test`
+    scripts in `package.json`. We also needed to add a specific config for `nodemon`
+  - Default `textComponent`in `IntlProvider` changed to `React.Fragment` so we need to explicitly
+    set `textComponent` to `span`. Otherwise all the snapshots would have changed and it might
+    affect to UI if there is styles added to these spans generally in customization projects.
+
+    Note: `FormattedMessage` component now supports
+    [`tagName` prop](https://github.com/formatjs/react-intl/blob/master/docs/Components.md#formattedmessage)
+    and
+    [improved rich-text formatting](https://github.com/formatjs/react-intl/blob/master/docs/Components.md#rich-text-formatting).
+    [#1181](https://github.com/sharetribe/flex-template-web/pull/1181)
+
 - [change] Update helmet (v3.20.0 > v3.20.1).
   [#1186](https://github.com/sharetribe/flex-template-web/pull/1186)
 - [fix] Lodash vulnerability: enforce newer version for react-google-maps and react-dates

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "license": "Apache-2.0",
   "dependencies": {
+    "@formatjs/intl-relativetimeformat": "^2.8.2",
     "@mapbox/polyline": "^1.0.0",
     "@sentry/browser": "5.6.2",
     "@sentry/node": "5.6.2",
@@ -24,7 +25,9 @@
     "express-sitemap": "^1.8.0",
     "final-form": "^4.18.5",
     "final-form-arrays": "^3.0.0",
+    "full-icu": "^1.3.0",
     "helmet": "^3.18.0",
+    "intl-pluralrules": "^1.0.3",
     "lodash": "^4.17.14",
     "mapbox-gl-multitouch": "^1.0.3",
     "moment": "^2.22.2",
@@ -41,7 +44,7 @@
     "react-final-form-arrays": "^3.1.1",
     "react-google-maps": "^9.4.5",
     "react-helmet-async": "^1.0.2",
-    "react-intl": "^2.9.0",
+    "react-intl": "^3.1.13",
     "react-moment-proptypes": "^1.6.0",
     "react-redux": "^7.1.1",
     "react-router-dom": "^5.0.1",
@@ -70,6 +73,11 @@
     "react-google-maps/lodash": "^4.17.14",
     "react-test-renderer": "^16.9.0"
   },
+  "nodemonConfig": {
+    "execMap": {
+      "js": "node --icu-data-dir=node_modules/full-icu"
+    }
+  },
   "scripts": {
     "audit": "yarn audit --json | node scripts/audit.js",
     "clean": "rm -rf build/*",
@@ -79,10 +87,10 @@
     "format": "prettier --write '**/*.{js,css}'",
     "format-ci": "prettier --list-different '**/*.{js,css}'",
     "format-docs": "prettier --write '**/*.md'",
-    "test": "sharetribe-scripts test",
+    "test": "NODE_ICU_DATA=node_modules/full-icu sharetribe-scripts test",
     "test-ci": "sharetribe-scripts test --runInBand",
     "eject": "sharetribe-scripts eject",
-    "start": "node server/index.js",
+    "start": "node --icu-data-dir=node_modules/full-icu server/index.js",
     "dev-server": "export NODE_ENV=development PORT=4000 REACT_APP_CANONICAL_ROOT_URL=http://localhost:4000&&yarn run build&&nodemon --watch server server/index.js",
     "heroku-postbuild": "yarn run build",
     "translate": "node scripts/translations.js"

src/app.js

@@ -12,7 +12,7 @@ import { Provider } from 'react-redux';
 import difference from 'lodash/difference';
 import mapValues from 'lodash/mapValues';
 import moment from 'moment';
-import { IntlProvider, addLocaleData } from 'react-intl';
+import { IntlProvider } from './util/reactIntl';
 import configureStore from './store';
 import routeConfiguration from './routeConfiguration';
 import Routes from './Routes';
@@ -23,24 +23,20 @@ import defaultMessages from './translations/en.json';
 
 // If you want to change the language, change the imports to match the wanted locale:
 //   1) Change the language in the config.js file!
-//   2) Import correct locale rules for React Intl library
+//   2) Import correct locale rules for Moment library
-//   3) Import correct locale rules for Moment library
+//   3) Use the `messagesInLocale` import to add the correct translation file.
-//   4) Use the `messagesInLocale` import to add the correct translation file.
+//   4) To support older browsers we need add the correct locale for intl-relativetimeformat to `util/polyfills.js`
 
 // Note that there is also translations in './translations/countryCodes.js' file
 // This file contains ISO 3166-1 alpha-2 country codes, country names and their translations in our default languages
 // This used to collect billing address in StripePaymentAddress on CheckoutPage
 
 // Step 2:
-// Import locale rules for React Intl library
-import localeData from 'react-intl/locale-data/en';
-
-// Step 3:
 // If you are using a non-english locale with moment library,
 // you should also import time specific formatting rules for that locale
 // e.g. for French: import 'moment/locale/fr';
 
-// Step 4:
+// Step 3:
 // If you are using a non-english locale, point `messagesInLocale` to correct .json file
 import messagesInLocale from './translations/fr.json';
 
@@ -75,13 +71,12 @@ const localeMessages = isTestEnv ? testMessages : messages;
 
 const setupLocale = () => {
   if (isTestEnv) {
-    // Don't change the locale in tests
+    // Use english as a default locale in tests
+    // This affects app.test.js and app.node.test.js tests
+    config.locale = 'en';
     return;
   }
 
-  // Add the translation messages
-  addLocaleData([...localeData]);
-
   // Set the Moment locale globally
   // See: http://momentjs.com/docs/#/i18n/changing-locale/
   moment.locale(config.locale);
@@ -91,7 +86,7 @@ export const ClientApp = props => {
   const { store } = props;
   setupLocale();
   return (
-    <IntlProvider locale={config.locale} messages={localeMessages}>
+    <IntlProvider locale={config.locale} messages={localeMessages} textComponent="span">
       <Provider store={store}>
         <HelmetProvider>
           <BrowserRouter>
@@ -112,7 +107,7 @@ export const ServerApp = props => {
   setupLocale();
   HelmetProvider.canUseDOM = false;
   return (
-    <IntlProvider locale={config.locale} messages={localeMessages}>
+    <IntlProvider locale={config.locale} messages={localeMessages} textComponent="span">
       <Provider store={store}>
         <HelmetProvider context={helmetContext}>
           <StaticRouter location={url} context={context}>

src/components/ActivityFeed/ActivityFeed.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { string, arrayOf, bool, func, number } from 'prop-types';
-import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
+import { FormattedMessage, injectIntl, intlShape } from '../../util/reactIntl';
 import dropWhile from 'lodash/dropWhile';
 import classNames from 'classnames';
 import { Avatar, InlineTextButton, ReviewRating, UserDisplayName } from '../../components';

src/components/Avatar/Avatar.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { string, oneOfType, bool } from 'prop-types';
-import { injectIntl, intlShape } from 'react-intl';
+import { injectIntl, intlShape } from '../../util/reactIntl';
 import classNames from 'classnames';
 import { propTypes } from '../../util/types';
 import {

src/components/BookingBreakdown/BookingBreakdown.js

@@ -4,7 +4,7 @@
  */
 import React from 'react';
 import { oneOf, string } from 'prop-types';
-import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
+import { FormattedMessage, intlShape, injectIntl } from '../../util/reactIntl';
 import classNames from 'classnames';
 import {
   propTypes,

src/components/BookingBreakdown/LineItemBookingPeriod.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage, FormattedHTMLMessage, FormattedDate } from 'react-intl';
+import { FormattedMessage, FormattedHTMLMessage, FormattedDate } from '../../util/reactIntl';
 import moment from 'moment';
 import { LINE_ITEM_NIGHT, LINE_ITEM_DAY, propTypes } from '../../util/types';
 import { daysBetween, dateFromAPIToLocalNoon } from '../../util/dates';

src/components/BookingBreakdown/LineItemCustomerCommissionMaybe.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { bool } from 'prop-types';
-import { FormattedMessage, intlShape } from 'react-intl';
+import { FormattedMessage, intlShape } from '../../util/reactIntl';
 import { formatMoney } from '../../util/currency';
 import { types as sdkTypes } from '../../util/sdkLoader';
 import { LINE_ITEM_CUSTOMER_COMMISSION, propTypes } from '../../util/types';

src/components/BookingBreakdown/LineItemCustomerCommissionRefundMaybe.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage, intlShape } from 'react-intl';
+import { FormattedMessage, intlShape } from '../../util/reactIntl';
 import { formatMoney } from '../../util/currency';
 import { propTypes, LINE_ITEM_CUSTOMER_COMMISSION } from '../../util/types';
 

src/components/BookingBreakdown/LineItemProviderCommissionMaybe.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { bool } from 'prop-types';
-import { FormattedMessage, intlShape } from 'react-intl';
+import { FormattedMessage, intlShape } from '../../util/reactIntl';
 import { formatMoney } from '../../util/currency';
 import { types as sdkTypes } from '../../util/sdkLoader';
 import { LINE_ITEM_PROVIDER_COMMISSION, propTypes } from '../../util/types';

src/components/BookingBreakdown/LineItemProviderCommissionRefundMaybe.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage, intlShape } from 'react-intl';
+import { FormattedMessage, intlShape } from '../../util/reactIntl';
 import { formatMoney } from '../../util/currency';
 import { propTypes, LINE_ITEM_PROVIDER_COMMISSION } from '../../util/types';
 

src/components/BookingBreakdown/LineItemRefundMaybe.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage, intlShape } from 'react-intl';
+import { FormattedMessage, intlShape } from '../../util/reactIntl';
 import Decimal from 'decimal.js';
 import { formatMoney } from '../../util/currency';
 import { types as sdkTypes } from '../../util/sdkLoader';

src/components/BookingBreakdown/LineItemSubTotalMaybe.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { string } from 'prop-types';
-import { FormattedMessage, intlShape } from 'react-intl';
+import { FormattedMessage, intlShape } from '../../util/reactIntl';
 import Decimal from 'decimal.js';
 import { formatMoney } from '../../util/currency';
 import config from '../../config';

src/components/BookingBreakdown/LineItemTotalPrice.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { bool } from 'prop-types';
-import { FormattedMessage, intlShape } from 'react-intl';
+import { FormattedMessage, intlShape } from '../../util/reactIntl';
 import { formatMoney } from '../../util/currency';
 import { txIsCanceled, txIsDelivered, txIsDeclined } from '../../util/transaction';
 import { propTypes } from '../../util/types';

src/components/BookingBreakdown/LineItemUnitPriceMaybe.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage, intlShape } from 'react-intl';
+import { FormattedMessage, intlShape } from '../../util/reactIntl';
 import { formatMoney } from '../../util/currency';
 import { LINE_ITEM_NIGHT, LINE_ITEM_DAY, propTypes } from '../../util/types';
 

src/components/BookingBreakdown/LineItemUnitsMaybe.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '../../util/reactIntl';
 import { LINE_ITEM_UNITS, propTypes } from '../../util/types';
 
 import css from './BookingBreakdown.css';

src/components/BookingBreakdown/LineItemUnknownItemsMaybe.js

@@ -10,7 +10,7 @@
  * component for them that can be used in the `BookingBreakdown` component.
  */
 import React from 'react';
-import { intlShape } from 'react-intl';
+import { intlShape } from '../../util/reactIntl';
 import { formatMoney } from '../../util/currency';
 import { humanizeLineItemCode } from '../../util/data';
 import { LINE_ITEMS, propTypes } from '../../util/types';

src/components/BookingDateRangeFilter/BookingDateRangeFilter.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { bool, func, number, object, string } from 'prop-types';
-import { injectIntl, intlShape } from 'react-intl';
+import { injectIntl, intlShape } from '../../util/reactIntl';
 
 import { FieldDateRangeController, FilterPopup, FilterPlain } from '../../components';
 import css from './BookingDateRangeFilter.css';

src/components/BookingDateRangeFilter/__snapshots__/BookingDateRangeFilter.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BookingDateRangeFilter matches plain snapshot 1`] = `
-<InjectIntl(FilterPlainComponent)
+<injectIntl(FilterPlainComponent)
   className={null}
   contentPlacementOffset={-14}
   id="BookingDateRangeFilter.plain"
@@ -23,11 +23,11 @@ exports[`BookingDateRangeFilter matches plain snapshot 1`] = `
     name="dates"
     rootClassName={null}
   />
-</InjectIntl(FilterPlainComponent)>
+</injectIntl(FilterPlainComponent)>
 `;
 
 exports[`BookingDateRangeFilter matches popup snapshot 1`] = `
-<InjectIntl(FilterPopup)
+<injectIntl(FilterPopup)
   className={null}
   contentPlacementOffset={-14}
   id="BookingDateRangeFilter.popup"
@@ -50,5 +50,5 @@ exports[`BookingDateRangeFilter matches popup snapshot 1`] = `
     name="dates"
     rootClassName={null}
   />
-</InjectIntl(FilterPopup)>
+</injectIntl(FilterPopup)>
 `;

src/components/BookingPanel/BookingPanel.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import { compose } from 'redux';
 import { withRouter } from 'react-router-dom';
-import { intlShape, injectIntl } from 'react-intl';
+import { intlShape, injectIntl, FormattedMessage } from '../../util/reactIntl';
 import { arrayOf, bool, func, node, oneOfType, shape, string } from 'prop-types';
-import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import omit from 'lodash/omit';
 import { propTypes, LISTING_STATE_CLOSED, LINE_ITEM_NIGHT, LINE_ITEM_DAY } from '../../util/types';

src/components/CookieConsent/CookieConsent.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '../../util/reactIntl';
 import { ExternalLink } from '../../components';
 import classNames from 'classnames';
 

src/components/EditListingAvailabilityPanel/EditListingAvailabilityPanel.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { bool, func, object, shape, string } from 'prop-types';
 import classNames from 'classnames';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '../../util/reactIntl';
 import { ensureOwnListing } from '../../util/data';
 import { LISTING_STATE_DRAFT } from '../../util/types';
 import { ListingLink } from '../../components';

src/components/EditListingDescriptionPanel/EditListingDescriptionPanel.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { bool, func, object, string } from 'prop-types';
 import classNames from 'classnames';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '../../util/reactIntl';
 import { ensureOwnListing } from '../../util/data';
 import { ListingLink } from '../../components';
 import { LISTING_STATE_DRAFT } from '../../util/types';

src/components/EditListingFeaturesPanel/EditListingFeaturesPanel.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '../../util/reactIntl';
 
 import { LISTING_STATE_DRAFT } from '../../util/types';
 import { ensureListing } from '../../util/data';

src/components/EditListingLocationPanel/EditListingLocationPanel.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '../../util/reactIntl';
 import { LISTING_STATE_DRAFT } from '../../util/types';
 import { ensureOwnListing } from '../../util/data';
 import { ListingLink } from '../../components';

src/components/EditListingPhotosPanel/EditListingPhotosPanel.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { array, bool, func, object, string } from 'prop-types';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '../../util/reactIntl';
 import classNames from 'classnames';
 import { LISTING_STATE_DRAFT } from '../../util/types';
 import { EditListingPhotosForm } from '../../forms';

src/components/EditListingPoliciesPanel/EditListingPoliciesPanel.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '../../util/reactIntl';
 import { LISTING_STATE_DRAFT } from '../../util/types';
 import { ensureOwnListing } from '../../util/data';
 import { ListingLink } from '../../components';

src/components/EditListingPricingPanel/EditListingPricingPanel.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '../../util/reactIntl';
 import { LISTING_STATE_DRAFT } from '../../util/types';
 import { ListingLink } from '../../components';
 import { EditListingPricingForm } from '../../forms';

src/components/EditListingWizard/EditListingWizard.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { array, bool, func, number, object, oneOf, shape, string } from 'prop-types';
 import { compose } from 'redux';
-import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
+import { FormattedMessage, injectIntl, intlShape } from '../../util/reactIntl';
 import classNames from 'classnames';
 import config from '../../config';
 import { withViewport } from '../../util/contextHelpers';

src/components/EditListingWizard/EditListingWizardTab.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { intlShape } from 'react-intl';
+import { intlShape } from '../../util/reactIntl';
 import routeConfiguration from '../../routeConfiguration';
 import {
   LISTING_PAGE_PARAM_TYPE_DRAFT,

src/components/FieldBirthdayInput/FieldBirthdayInput.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { func, instanceOf, object, node, string, bool } from 'prop-types';
 import { Field } from 'react-final-form';
-import { injectIntl, intlShape } from 'react-intl';
+import { injectIntl, intlShape } from '../../util/reactIntl';
 import classNames from 'classnames';
 import range from 'lodash/range';
 import { ValidationError } from '../../components';

src/components/FieldBoolean/FieldBoolean.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { injectIntl, intlShape } from 'react-intl';
+import { injectIntl, intlShape } from '../../util/reactIntl';
 import { FieldSelect } from '../../components';
 
 const FieldBoolean = props => {

src/components/FieldCurrencyInput/FieldCurrencyInput.example.js

@@ -1,10 +1,8 @@
 /* eslint-disable no-console */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { IntlProvider, addLocaleData } from 'react-intl';
 import { Form as FinalForm, FormSpy } from 'react-final-form';
-import en from 'react-intl/locale-data/en';
+import { IntlProvider } from '../../util/reactIntl';
-import fi from 'react-intl/locale-data/fi';
 import { currencyConfig } from '../../util/test-data';
 import * as validators from '../../util/validators';
 import FieldCurrencyInput, { CurrencyInput } from './FieldCurrencyInput';
@@ -24,13 +22,8 @@ const onChange = price => console.log('CurrencyInput - value:', price);
 
 // Different locales need to be initialized before their currency formatting is in use
 const CurrencyInputWithIntl = ({ locale, ...rest }) => {
-  if (locale === 'en') {
-    addLocaleData([...en]);
-  } else {
-    addLocaleData([...fi]);
-  }
   return (
-    <IntlProvider locale={locale}>
+    <IntlProvider locale={locale} textComponent="span">
       <CurrencyInput {...rest} input={{ onChange }} />
     </IntlProvider>
   );

src/components/FieldCurrencyInput/FieldCurrencyInput.js

@@ -5,7 +5,7 @@
  */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { intlShape, injectIntl } from 'react-intl';
+import { intlShape, injectIntl } from '../../util/reactIntl';
 import { Field } from 'react-final-form';
 import classNames from 'classnames';
 import Decimal from 'decimal.js';

src/components/FieldDateInput/DateInput.js

@@ -12,7 +12,7 @@ import {
   isInclusivelyBeforeDay,
   isSameDay,
 } from 'react-dates';
-import { intlShape, injectIntl } from 'react-intl';
+import { intlShape, injectIntl } from '../../util/reactIntl';
 import classNames from 'classnames';
 import moment from 'moment';
 import config from '../../config';

src/components/FieldDateRangeInput/DateRangeInput.js

@@ -7,7 +7,7 @@
 import React, { Component } from 'react';
 import { bool, func, instanceOf, oneOf, shape, string, arrayOf } from 'prop-types';
 import { DateRangePicker, isInclusivelyAfterDay, isInclusivelyBeforeDay } from 'react-dates';
-import { intlShape, injectIntl } from 'react-intl';
+import { intlShape, injectIntl } from '../../util/reactIntl';
 import classNames from 'classnames';
 import moment from 'moment';
 import { START_DATE, END_DATE } from '../../util/dates';

src/components/FieldReviewRating/FieldReviewRating.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { intlShape, injectIntl } from 'react-intl';
+import { intlShape, injectIntl } from '../../util/reactIntl';
 import { Field } from 'react-final-form';
 import classNames from 'classnames';
 import { IconReviewStar, ValidationError } from '../../components';

src/components/FilterPlain/FilterPlain.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { bool, func, node, object, string } from 'prop-types';
 import classNames from 'classnames';
-import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
+import { FormattedMessage, injectIntl, intlShape } from '../../util/reactIntl';
 
 import { FilterForm } from '../../forms';
 import css from './FilterPlain.css';

src/components/FilterPopup/FilterPopup.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { bool, func, node, number, object, string } from 'prop-types';
 import classNames from 'classnames';
-import { injectIntl, intlShape } from 'react-intl';
+import { injectIntl, intlShape } from '../../util/reactIntl';
 
 import { OutsideClickHandler } from '../../components';
 import { FilterForm } from '../../forms';

src/components/Footer/Footer.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { string } from 'prop-types';
-import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
+import { FormattedMessage, injectIntl, intlShape } from '../../util/reactIntl';
 import classNames from 'classnames';
 import { twitterPageURL } from '../../util/urlHelpers';
 import config from '../../config';

src/components/ImageCarousel/ImageCarousel.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from 'react-intl';
+import { injectIntl, intlShape } from '../../util/reactIntl';
 import classNames from 'classnames';
 import { ResponsiveImage, IconSpinner } from '../../components';
 import { propTypes } from '../../util/types';

src/components/ImageFromFile/ImageFromFile.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '../../util/reactIntl';
 import classNames from 'classnames';
 import { Promised } from '../../components';
 

src/components/KeywordFilter/KeywordFilter.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { func, number, string } from 'prop-types';
 import classNames from 'classnames';
-import { injectIntl, intlShape } from 'react-intl';
+import { injectIntl, intlShape } from '../../util/reactIntl';
 import debounce from 'lodash/debounce';
 import { FieldTextInput } from '../../components';
 

src/components/LayoutWrapperAccountSettingsSideNav/LayoutWrapperAccountSettingsSideNav.js

@@ -5,7 +5,7 @@
 import React from 'react';
 import { node, number, string, shape } from 'prop-types';
 import { compose } from 'redux';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '../../util/reactIntl';
 import { withViewport } from '../../util/contextHelpers';
 import { LayoutWrapperSideNav } from '../../components';
 

src/components/ListingCard/ListingCard.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { string, func } from 'prop-types';
-import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
+import { FormattedMessage, intlShape, injectIntl } from '../../util/reactIntl';
 import classNames from 'classnames';
 import { lazyLoadWithDimensions } from '../../util/contextHelpers';
 import { LINE_ITEM_DAY, LINE_ITEM_NIGHT, propTypes } from '../../util/types';

src/components/LocationAutocompleteInput/LocationAutocompleteInputImpl.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { any, arrayOf, bool, func, number, shape, string, oneOfType, object } from 'prop-types';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '../../util/reactIntl';
 import classNames from 'classnames';
 import debounce from 'lodash/debounce';
 import { IconSpinner } from '../../components';

src/components/ManageListingCard/ManageListingCard.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { withRouter } from 'react-router-dom';
-import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
+import { FormattedMessage, intlShape, injectIntl } from '../../util/reactIntl';
 import classNames from 'classnames';
 import routeConfiguration from '../../routeConfiguration';
 import {

src/components/Modal/Modal.js

@@ -11,7 +11,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
+import { FormattedMessage, intlShape, injectIntl } from '../../util/reactIntl';
 import { Button, IconClose } from '../../components';
 
 import css from './Modal.css';

src/components/ModalMissingInformation/EmailReminder.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '../../util/reactIntl';
 import { isTooManyEmailVerificationRequestsError } from '../../util/errors';
 import { IconEmailAttention, InlineTextButton, NamedLink } from '../../components';
 

src/components/ModalMissingInformation/ModalMissingInformation.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { bool, func, string } from 'prop-types';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '../../util/reactIntl';
 import classNames from 'classnames';
 import routeConfiguration from '../../routeConfiguration';
 import { ensureCurrentUser } from '../../util/data';

src/components/ModalMissingInformation/StripeAccountReminder.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '../../util/reactIntl';
 import { NamedLink } from '../../components';
 
 import css from './ModalMissingInformation.css';

src/components/Page/Page.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet-async';
 import { withRouter } from 'react-router-dom';
-import { injectIntl, intlShape } from 'react-intl';
+import { injectIntl, intlShape } from '../../util/reactIntl';
 import classNames from 'classnames';
 import routeConfiguration from '../../routeConfiguration';
 import config from '../../config';

src/components/PaginationLinks/PaginationLinks.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from 'react-intl';
+import { injectIntl, intlShape } from '../../util/reactIntl';
 import classNames from 'classnames';
 import range from 'lodash/range';
 import { IconArrowHead, NamedLink } from '../../components';

src/components/PriceFilter/PriceFilterPlain.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { func, number, shape, string } from 'prop-types';
 import classNames from 'classnames';
-import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
+import { FormattedMessage, injectIntl, intlShape } from '../../util/reactIntl';
 import { propTypes } from '../../util/types';
 import { formatCurrencyMajorUnit } from '../../util/currency';
 import config from '../../config';

src/components/PriceFilter/PriceFilterPopup.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { func, number, shape, string } from 'prop-types';
 import classNames from 'classnames';
-import { injectIntl, intlShape } from 'react-intl';
+import { injectIntl, intlShape } from '../../util/reactIntl';
 import { propTypes } from '../../util/types';
 import { formatCurrencyMajorUnit } from '../../util/currency';
 import config from '../../config';

src/components/ResponsiveImage/ResponsiveImage.js

@@ -36,7 +36,7 @@
 import React from 'react';
 import { arrayOf, string } from 'prop-types';
 import classNames from 'classnames';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '../../util/reactIntl';
 import { propTypes } from '../../util/types';
 
 import NoImageIcon from './NoImageIcon';

src/components/ReviewModal/ReviewModal.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
+import { FormattedMessage, intlShape, injectIntl } from '../../util/reactIntl';
 import classNames from 'classnames';
 import { propTypes } from '../../util/types';
 import { IconReviewUser, Modal } from '../../components';

src/components/Reviews/Reviews.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { injectIntl, intlShape } from 'react-intl';
+import { injectIntl, intlShape } from '../../util/reactIntl';
 import { arrayOf, string } from 'prop-types';
 import classNames from 'classnames';
 import { Avatar, ReviewRating, UserDisplayName } from '../../components';

src/components/SavedCardDetails/SavedCardDetails.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 import { bool, func, number, shape, string } from 'prop-types';
 import classNames from 'classnames';
-import { injectIntl, intlShape } from 'react-intl';
+import { injectIntl, intlShape } from '../../util/reactIntl';
 import {
   IconArrowHead,
   IconCard,

src/components/SearchFilters/SearchFilters.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { compose } from 'redux';
 import { object, string, bool, number, func, shape } from 'prop-types';
-import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
+import { FormattedMessage, injectIntl, intlShape } from '../../util/reactIntl';
 import classNames from 'classnames';
 import { withRouter } from 'react-router-dom';
 import omit from 'lodash/omit';

src/components/SearchFiltersMobile/SearchFiltersMobile.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { object, string, bool, number, func, shape, array } from 'prop-types';
 import classNames from 'classnames';
-import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
+import { FormattedMessage, injectIntl, intlShape } from '../../util/reactIntl';
 import { withRouter } from 'react-router-dom';
 import omit from 'lodash/omit';
 

src/components/SearchFiltersPanel/SearchFiltersPanel.js

@@ -29,7 +29,7 @@
 import React, { Component } from 'react';
 import { array, func, object, shape, string } from 'prop-types';
 import classNames from 'classnames';
-import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
+import { FormattedMessage, injectIntl, intlShape } from '../../util/reactIntl';
 import { withRouter } from 'react-router-dom';
 import omit from 'lodash/omit';
 

src/components/SearchMap/ReusableMapContainer.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { node, string, object } from 'prop-types';
-import { IntlProvider } from 'react-intl';
+import { IntlProvider } from '../../util/reactIntl';
 import config from '../../config';
 
 import css from './SearchMap.css';
@@ -59,7 +59,7 @@ class ReusableMapContainer extends React.Component {
     // You need to provide onClick functions and URLs as props.
     const renderChildren = () => {
       const children = (
-        <IntlProvider locale={config.locale} messages={this.props.messages}>
+        <IntlProvider locale={config.locale} messages={this.props.messages} textComponent="span">
           {this.props.children}
         </IntlProvider>
       );

src/components/SearchMapInfoCard/SearchMapInfoCard.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { arrayOf, bool, func, string } from 'prop-types';
 import { compose } from 'redux';
-import { injectIntl, intlShape } from 'react-intl';
+import { injectIntl, intlShape } from '../../util/reactIntl';
 import classNames from 'classnames';
 import config from '../../config';
 import { propTypes } from '../../util/types';

src/components/SearchMapPriceLabel/SearchMapPriceLabel.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from 'react-intl';
+import { injectIntl, intlShape } from '../../util/reactIntl';
 import classNames from 'classnames';
 import { propTypes } from '../../util/types';
 import { formatMoney } from '../../util/currency';

src/components/SectionHero/SectionHero.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { string } from 'prop-types';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '../../util/reactIntl';
 import classNames from 'classnames';
 import { NamedLink } from '../../components';
 

src/components/SectionHowItWorks/SectionHowItWorks.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '../../util/reactIntl';
 import classNames from 'classnames';
 
 import { NamedLink } from '../../components';

src/components/SectionLocations/SectionLocations.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '../../util/reactIntl';
 import classNames from 'classnames';
 import { lazyLoadWithDimensions } from '../../util/contextHelpers';
 

src/components/SelectMultipleFilter/SelectMultipleFilter.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { array, arrayOf, func, number, string } from 'prop-types';
 import classNames from 'classnames';
-import { injectIntl, intlShape } from 'react-intl';
+import { injectIntl, intlShape } from '../../util/reactIntl';
 import { FieldCheckbox } from '../../components';
 
 import { FilterPopup, FilterPlain } from '../../components';

src/components/SelectSingleFilter/SelectSingleFilterPlain.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { arrayOf, bool, func, shape, string } from 'prop-types';
 import classNames from 'classnames';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '../../util/reactIntl';
 
 import css from './SelectSingleFilterPlain.css';
 

src/components/SelectSingleFilter/SelectSingleFilterPopup.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { string, func, arrayOf, shape, number } from 'prop-types';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '../../util/reactIntl';
 import classNames from 'classnames';
 
 import { Menu, MenuContent, MenuItem, MenuLabel } from '..';

src/components/StripeBankAccountTokenInputField/StripeBankAccountRequiredInput.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '../../util/reactIntl';
 import classNames from 'classnames';
 
 import css from './StripeBankAccountTokenInputField.css';

src/components/StripeBankAccountTokenInputField/StripeBankAccountTokenInputField.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-underscore-dangle */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { intlShape, injectIntl, FormattedMessage } from 'react-intl';
+import { intlShape, injectIntl, FormattedMessage } from '../../util/reactIntl';
 import { Field } from 'react-final-form';
 import classNames from 'classnames';
 import debounce from 'lodash/debounce';

src/components/StripePaymentAddress/StripePaymentAddress.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { intlShape } from 'react-intl';
+import { intlShape } from '../../util/reactIntl';
 import { bool, object, string } from 'prop-types';
 import config from '../../config';
 import * as validators from '../../util/validators';

src/components/Topbar/Topbar.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { compose } from 'redux';
-import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
+import { FormattedMessage, intlShape, injectIntl } from '../../util/reactIntl';
 import pickBy from 'lodash/pickBy';
 import classNames from 'classnames';
 import config from '../../config';

src/components/TopbarDesktop/TopbarDesktop.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage, intlShape } from 'react-intl';
+import { FormattedMessage, intlShape } from '../../util/reactIntl';
 import classNames from 'classnames';
 import { ACCOUNT_SETTINGS_PAGES } from '../../routeConfiguration';
 import { propTypes } from '../../util/types';

src/components/TopbarMobileMenu/TopbarMobileMenu.js

@@ -4,7 +4,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '../../util/reactIntl';
 import classNames from 'classnames';
 import { ACCOUNT_SETTINGS_PAGES } from '../../routeConfiguration';
 import { propTypes } from '../../util/types';

src/components/TransactionPanel/BreakdownMaybe.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '../../util/reactIntl';
 import classNames from 'classnames';
 import config from '../../config';
 import { BookingBreakdown } from '../../components';

src/components/TransactionPanel/FeedSection.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '../../util/reactIntl';
 import classNames from 'classnames';
 import { ActivityFeed } from '../../components';
 

src/components/TransactionPanel/PanelHeading.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '../../util/reactIntl';
 import classNames from 'classnames';
 import { createSlug, stringify } from '../../util/urlHelpers';
 import { NamedLink } from '../../components';

src/components/TransactionPanel/SaleActionButtonsMaybe.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '../../util/reactIntl';
 import classNames from 'classnames';
 import { PrimaryButton, SecondaryButton } from '../../components';
 

src/components/TransactionPanel/TransactionPanel.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { array, arrayOf, bool, func, number, string } from 'prop-types';
-import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
+import { FormattedMessage, injectIntl, intlShape } from '../../util/reactIntl';
 import classNames from 'classnames';
 import {
   TRANSITION_REQUEST_PAYMENT_AFTER_ENQUIRY,

src/components/TransactionPanel/__snapshots__/TransactionPanel.test.js.snap

@@ -41,7 +41,7 @@ exports[`TransactionPanel - Order accepted matches snapshot 1`] = `
                 "formatMessage": [Function],
                 "formatNumber": [Function],
                 "formatPlural": [Function],
-                "formatRelative": [Function],
+                "formatRelativeTime": [Function],
                 "formatTime": [Function],
                 "now": [Function],
               }
@@ -83,7 +83,7 @@ exports[`TransactionPanel - Order accepted matches snapshot 1`] = `
                 "formatMessage": [Function],
                 "formatNumber": [Function],
                 "formatPlural": [Function],
-                "formatRelative": [Function],
+                "formatRelativeTime": [Function],
                 "formatTime": [Function],
                 "now": [Function],
               }
@@ -708,7 +708,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
       </div>
     </div>
   </div>
-  <InjectIntl(ReviewModal)
+  <injectIntl(ReviewModal)
     id="ReviewOrderModal"
     isOpen={false}
     onCloseModal={[Function]}
@@ -727,7 +727,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
             "formatMessage": [Function],
             "formatNumber": [Function],
             "formatPlural": [Function],
-            "formatRelative": [Function],
+            "formatRelativeTime": [Function],
             "formatTime": [Function],
             "now": [Function],
           }
@@ -799,7 +799,7 @@ exports[`TransactionPanel - Order autodeclined matches snapshot 1`] = `
                 "formatMessage": [Function],
                 "formatNumber": [Function],
                 "formatPlural": [Function],
-                "formatRelative": [Function],
+                "formatRelativeTime": [Function],
                 "formatTime": [Function],
                 "now": [Function],
               }
@@ -841,7 +841,7 @@ exports[`TransactionPanel - Order autodeclined matches snapshot 1`] = `
                 "formatMessage": [Function],
                 "formatNumber": [Function],
                 "formatPlural": [Function],
-                "formatRelative": [Function],
+                "formatRelativeTime": [Function],
                 "formatTime": [Function],
                 "now": [Function],
               }
@@ -1464,7 +1464,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
       </div>
     </div>
   </div>
-  <InjectIntl(ReviewModal)
+  <injectIntl(ReviewModal)
     id="ReviewOrderModal"
     isOpen={false}
     onCloseModal={[Function]}
@@ -1483,7 +1483,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
             "formatMessage": [Function],
             "formatNumber": [Function],
             "formatPlural": [Function],
-            "formatRelative": [Function],
+            "formatRelativeTime": [Function],
             "formatTime": [Function],
             "now": [Function],
           }
@@ -1555,7 +1555,7 @@ exports[`TransactionPanel - Order canceled matches snapshot 1`] = `
                 "formatMessage": [Function],
                 "formatNumber": [Function],
                 "formatPlural": [Function],
-                "formatRelative": [Function],
+                "formatRelativeTime": [Function],
                 "formatTime": [Function],
                 "now": [Function],
               }
@@ -1597,7 +1597,7 @@ exports[`TransactionPanel - Order canceled matches snapshot 1`] = `
                 "formatMessage": [Function],
                 "formatNumber": [Function],
                 "formatPlural": [Function],
-                "formatRelative": [Function],
+                "formatRelativeTime": [Function],
                 "formatTime": [Function],
                 "now": [Function],
               }
@@ -2222,7 +2222,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
       </div>
     </div>
   </div>
-  <InjectIntl(ReviewModal)
+  <injectIntl(ReviewModal)
     id="ReviewOrderModal"
     isOpen={false}
     onCloseModal={[Function]}
@@ -2241,7 +2241,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
             "formatMessage": [Function],
             "formatNumber": [Function],
             "formatPlural": [Function],
-            "formatRelative": [Function],
+            "formatRelativeTime": [Function],
             "formatTime": [Function],
             "now": [Function],
           }
@@ -2313,7 +2313,7 @@ exports[`TransactionPanel - Order declined matches snapshot 1`] = `
                 "formatMessage": [Function],
                 "formatNumber": [Function],
                 "formatPlural": [Function],
-                "formatRelative": [Function],
+                "formatRelativeTime": [Function],
                 "formatTime": [Function],
                 "now": [Function],
               }
@@ -2355,7 +2355,7 @@ exports[`TransactionPanel - Order declined matches snapshot 1`] = `
                 "formatMessage": [Function],
                 "formatNumber": [Function],
                 "formatPlural": [Function],
-                "formatRelative": [Function],
+                "formatRelativeTime": [Function],
                 "formatTime": [Function],
                 "now": [Function],
               }
@@ -2978,7 +2978,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
       </div>
     </div>
   </div>
-  <InjectIntl(ReviewModal)
+  <injectIntl(ReviewModal)
     id="ReviewOrderModal"
     isOpen={false}
     onCloseModal={[Function]}
@@ -2997,7 +2997,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
             "formatMessage": [Function],
             "formatNumber": [Function],
             "formatPlural": [Function],
-            "formatRelative": [Function],
+            "formatRelativeTime": [Function],
             "formatTime": [Function],
             "now": [Function],
           }
@@ -3069,7 +3069,7 @@ exports[`TransactionPanel - Order delivered matches snapshot 1`] = `
                 "formatMessage": [Function],
                 "formatNumber": [Function],
                 "formatPlural": [Function],
-                "formatRelative": [Function],
+                "formatRelativeTime": [Function],
                 "formatTime": [Function],
                 "now": [Function],
               }
@@ -3111,7 +3111,7 @@ exports[`TransactionPanel - Order delivered matches snapshot 1`] = `
                 "formatMessage": [Function],
                 "formatNumber": [Function],
                 "formatPlural": [Function],
-                "formatRelative": [Function],
+                "formatRelativeTime": [Function],
                 "formatTime": [Function],
                 "now": [Function],
               }
@@ -3751,7 +3751,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
       </div>
     </div>
   </div>
-  <InjectIntl(ReviewModal)
+  <injectIntl(ReviewModal)
     id="ReviewOrderModal"
     isOpen={false}
     onCloseModal={[Function]}
@@ -3770,7 +3770,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
             "formatMessage": [Function],
             "formatNumber": [Function],
             "formatPlural": [Function],
-            "formatRelative": [Function],
+            "formatRelativeTime": [Function],
             "formatTime": [Function],
             "now": [Function],
           }
@@ -3842,7 +3842,7 @@ exports[`TransactionPanel - Order enquired matches snapshot 1`] = `
                 "formatMessage": [Function],
                 "formatNumber": [Function],
                 "formatPlural": [Function],
-                "formatRelative": [Function],
+                "formatRelativeTime": [Function],
                 "formatTime": [Function],
                 "now": [Function],
               }
@@ -3884,7 +3884,7 @@ exports[`TransactionPanel - Order enquired matches snapshot 1`] = `
                 "formatMessage": [Function],
                 "formatNumber": [Function],
                 "formatPlural": [Function],
-                "formatRelative": [Function],
+                "formatRelativeTime": [Function],
                 "formatTime": [Function],
                 "now": [Function],
               }
@@ -4506,7 +4506,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
       </div>
     </div>
   </div>
-  <InjectIntl(ReviewModal)
+  <injectIntl(ReviewModal)
     id="ReviewOrderModal"
     isOpen={false}
     onCloseModal={[Function]}
@@ -4525,7 +4525,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
             "formatMessage": [Function],
             "formatNumber": [Function],
             "formatPlural": [Function],
-            "formatRelative": [Function],
+            "formatRelativeTime": [Function],
             "formatTime": [Function],
             "now": [Function],
           }
@@ -4597,7 +4597,7 @@ exports[`TransactionPanel - Order preauthorized matches snapshot 1`] = `
                 "formatMessage": [Function],
                 "formatNumber": [Function],
                 "formatPlural": [Function],
-                "formatRelative": [Function],
+                "formatRelativeTime": [Function],
                 "formatTime": [Function],
                 "now": [Function],
               }
@@ -4639,7 +4639,7 @@ exports[`TransactionPanel - Order preauthorized matches snapshot 1`] = `
                 "formatMessage": [Function],
                 "formatNumber": [Function],
                 "formatPlural": [Function],
-                "formatRelative": [Function],
+                "formatRelativeTime": [Function],
                 "formatTime": [Function],
                 "now": [Function],
               }
@@ -5262,7 +5262,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
       </div>
     </div>
   </div>
-  <InjectIntl(ReviewModal)
+  <injectIntl(ReviewModal)
     id="ReviewOrderModal"
     isOpen={false}
     onCloseModal={[Function]}
@@ -5281,7 +5281,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
             "formatMessage": [Function],
             "formatNumber": [Function],
             "formatPlural": [Function],
-            "formatRelative": [Function],
+            "formatRelativeTime": [Function],
             "formatTime": [Function],
             "now": [Function],
           }
@@ -5353,7 +5353,7 @@ exports[`TransactionPanel - Sale accepted matches snapshot 1`] = `
                 "formatMessage": [Function],
                 "formatNumber": [Function],
                 "formatPlural": [Function],
-                "formatRelative": [Function],
+                "formatRelativeTime": [Function],
                 "formatTime": [Function],
                 "now": [Function],
               }
@@ -5395,7 +5395,7 @@ exports[`TransactionPanel - Sale accepted matches snapshot 1`] = `
                 "formatMessage": [Function],
                 "formatNumber": [Function],
                 "formatPlural": [Function],
-                "formatRelative": [Function],
+                "formatRelativeTime": [Function],
                 "formatTime": [Function],
                 "now": [Function],
               }
@@ -6020,7 +6020,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
       </div>
     </div>
   </div>
-  <InjectIntl(ReviewModal)
+  <injectIntl(ReviewModal)
     id="ReviewOrderModal"
     isOpen={false}
     onCloseModal={[Function]}
@@ -6039,7 +6039,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
             "formatMessage": [Function],
             "formatNumber": [Function],
             "formatPlural": [Function],
-            "formatRelative": [Function],
+            "formatRelativeTime": [Function],
             "formatTime": [Function],
             "now": [Function],
           }
@@ -6111,7 +6111,7 @@ exports[`TransactionPanel - Sale autodeclined matches snapshot 1`] = `
                 "formatMessage": [Function],
                 "formatNumber": [Function],
                 "formatPlural": [Function],
-                "formatRelative": [Function],
+                "formatRelativeTime": [Function],
                 "formatTime": [Function],
                 "now": [Function],
               }
@@ -6153,7 +6153,7 @@ exports[`TransactionPanel - Sale autodeclined matches snapshot 1`] = `
                 "formatMessage": [Function],
                 "formatNumber": [Function],
                 "formatPlural": [Function],
-                "formatRelative": [Function],
+                "formatRelativeTime": [Function],
                 "formatTime": [Function],
                 "now": [Function],
               }
@@ -6776,7 +6776,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
       </div>
     </div>
   </div>
-  <InjectIntl(ReviewModal)
+  <injectIntl(ReviewModal)
     id="ReviewOrderModal"
     isOpen={false}
     onCloseModal={[Function]}
@@ -6795,7 +6795,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
             "formatMessage": [Function],
             "formatNumber": [Function],
             "formatPlural": [Function],
-            "formatRelative": [Function],
+            "formatRelativeTime": [Function],
             "formatTime": [Function],
             "now": [Function],
           }
@@ -6867,7 +6867,7 @@ exports[`TransactionPanel - Sale canceled matches snapshot 1`] = `
                 "formatMessage": [Function],
                 "formatNumber": [Function],
                 "formatPlural": [Function],
-                "formatRelative": [Function],
+                "formatRelativeTime": [Function],
                 "formatTime": [Function],
                 "now": [Function],
               }
@@ -6909,7 +6909,7 @@ exports[`TransactionPanel - Sale canceled matches snapshot 1`] = `
                 "formatMessage": [Function],
                 "formatNumber": [Function],
                 "formatPlural": [Function],
-                "formatRelative": [Function],
+                "formatRelativeTime": [Function],
                 "formatTime": [Function],
                 "now": [Function],
               }
@@ -7534,7 +7534,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
       </div>
     </div>
   </div>
-  <InjectIntl(ReviewModal)
+  <injectIntl(ReviewModal)
     id="ReviewOrderModal"
     isOpen={false}
     onCloseModal={[Function]}
@@ -7553,7 +7553,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
             "formatMessage": [Function],
             "formatNumber": [Function],
             "formatPlural": [Function],
-            "formatRelative": [Function],
+            "formatRelativeTime": [Function],
             "formatTime": [Function],
             "now": [Function],
           }
@@ -7625,7 +7625,7 @@ exports[`TransactionPanel - Sale declined matches snapshot 1`] = `
                 "formatMessage": [Function],
                 "formatNumber": [Function],
                 "formatPlural": [Function],
-                "formatRelative": [Function],
+                "formatRelativeTime": [Function],
                 "formatTime": [Function],
                 "now": [Function],
               }
@@ -7667,7 +7667,7 @@ exports[`TransactionPanel - Sale declined matches snapshot 1`] = `
                 "formatMessage": [Function],
                 "formatNumber": [Function],
                 "formatPlural": [Function],
-                "formatRelative": [Function],
+                "formatRelativeTime": [Function],
                 "formatTime": [Function],
                 "now": [Function],
               }
@@ -8290,7 +8290,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
       </div>
     </div>
   </div>
-  <InjectIntl(ReviewModal)
+  <injectIntl(ReviewModal)
     id="ReviewOrderModal"
     isOpen={false}
     onCloseModal={[Function]}
@@ -8309,7 +8309,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
             "formatMessage": [Function],
             "formatNumber": [Function],
             "formatPlural": [Function],
-            "formatRelative": [Function],
+            "formatRelativeTime": [Function],
             "formatTime": [Function],
             "now": [Function],
           }
@@ -8381,7 +8381,7 @@ exports[`TransactionPanel - Sale delivered matches snapshot 1`] = `
                 "formatMessage": [Function],
                 "formatNumber": [Function],
                 "formatPlural": [Function],
-                "formatRelative": [Function],
+                "formatRelativeTime": [Function],
                 "formatTime": [Function],
                 "now": [Function],
               }
@@ -8423,7 +8423,7 @@ exports[`TransactionPanel - Sale delivered matches snapshot 1`] = `
                 "formatMessage": [Function],
                 "formatNumber": [Function],
                 "formatPlural": [Function],
-                "formatRelative": [Function],
+                "formatRelativeTime": [Function],
                 "formatTime": [Function],
                 "now": [Function],
               }
@@ -9048,7 +9048,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
       </div>
     </div>
   </div>
-  <InjectIntl(ReviewModal)
+  <injectIntl(ReviewModal)
     id="ReviewOrderModal"
     isOpen={false}
     onCloseModal={[Function]}
@@ -9067,7 +9067,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
             "formatMessage": [Function],
             "formatNumber": [Function],
             "formatPlural": [Function],
-            "formatRelative": [Function],
+            "formatRelativeTime": [Function],
             "formatTime": [Function],
             "now": [Function],
           }
@@ -9139,7 +9139,7 @@ exports[`TransactionPanel - Sale enquired matches snapshot 1`] = `
                 "formatMessage": [Function],
                 "formatNumber": [Function],
                 "formatPlural": [Function],
-                "formatRelative": [Function],
+                "formatRelativeTime": [Function],
                 "formatTime": [Function],
                 "now": [Function],
               }
@@ -9181,7 +9181,7 @@ exports[`TransactionPanel - Sale enquired matches snapshot 1`] = `
                 "formatMessage": [Function],
                 "formatNumber": [Function],
                 "formatPlural": [Function],
-                "formatRelative": [Function],
+                "formatRelativeTime": [Function],
                 "formatTime": [Function],
                 "now": [Function],
               }
@@ -9803,7 +9803,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
       </div>
     </div>
   </div>
-  <InjectIntl(ReviewModal)
+  <injectIntl(ReviewModal)
     id="ReviewOrderModal"
     isOpen={false}
     onCloseModal={[Function]}
@@ -9822,7 +9822,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
             "formatMessage": [Function],
             "formatNumber": [Function],
             "formatPlural": [Function],
-            "formatRelative": [Function],
+            "formatRelativeTime": [Function],
             "formatTime": [Function],
             "now": [Function],
           }
@@ -9894,7 +9894,7 @@ exports[`TransactionPanel - Sale preauthorized matches snapshot 1`] = `
                 "formatMessage": [Function],
                 "formatNumber": [Function],
                 "formatPlural": [Function],
-                "formatRelative": [Function],
+                "formatRelativeTime": [Function],
                 "formatTime": [Function],
                 "now": [Function],
               }
@@ -9936,7 +9936,7 @@ exports[`TransactionPanel - Sale preauthorized matches snapshot 1`] = `
                 "formatMessage": [Function],
                 "formatNumber": [Function],
                 "formatPlural": [Function],
-                "formatRelative": [Function],
+                "formatRelativeTime": [Function],
                 "formatTime": [Function],
                 "now": [Function],
               }
@@ -10559,7 +10559,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
       </div>
     </div>
   </div>
-  <InjectIntl(ReviewModal)
+  <injectIntl(ReviewModal)
     id="ReviewOrderModal"
     isOpen={false}
     onCloseModal={[Function]}
@@ -10578,7 +10578,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
             "formatMessage": [Function],
             "formatNumber": [Function],
             "formatPlural": [Function],
-            "formatRelative": [Function],
+            "formatRelativeTime": [Function],
             "formatTime": [Function],
             "now": [Function],
           }

src/components/UserCard/UserCard.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { string, func, oneOfType } from 'prop-types';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '../../util/reactIntl';
 import truncate from 'lodash/truncate';
 import classNames from 'classnames';
 import { AvatarLarge, NamedLink, InlineTextButton } from '../../components';

src/components/UserNav/UserNav.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '../../util/reactIntl';
 import classNames from 'classnames';
 import { ACCOUNT_SETTINGS_PAGES } from '../../routeConfiguration';
 import { LinkTabNavHorizontal } from '../../components';

src/containers/AuthenticationPage/AuthenticationPage.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withRouter, Redirect } from 'react-router-dom';
-import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
+import { FormattedMessage, injectIntl, intlShape } from '../../util/reactIntl';
 import classNames from 'classnames';
 import config from '../../config';
 import { propTypes } from '../../util/types';

src/containers/AuthenticationPage/__snapshots__/AuthenticationPage.test.js.snap

@@ -81,7 +81,7 @@ exports[`AuthenticationPageComponent matches snapshot 1`] = `
           />
         </div>
       </div>
-      <InjectIntl(ModalComponent)
+      <injectIntl(ModalComponent)
         id="AuthenticationPage.tos"
         isOpen={false}
         onClose={[Function]}
@@ -99,13 +99,13 @@ exports[`AuthenticationPageComponent matches snapshot 1`] = `
             rootClassName={null}
           />
         </div>
-      </InjectIntl(ModalComponent)>
+      </injectIntl(ModalComponent)>
     </LayoutWrapperMain>
     <LayoutWrapperFooter
       className={null}
       rootClassName={null}
     >
-      <InjectIntl(Footer) />
+      <injectIntl(Footer) />
     </LayoutWrapperFooter>
   </LayoutSingleColumn>
 </Page>

src/containers/CheckoutPage/CheckoutPage.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { bool, func, instanceOf, object, oneOfType, shape, string } from 'prop-types';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
-import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
+import { FormattedMessage, injectIntl, intlShape } from '../../util/reactIntl';
 import { withRouter } from 'react-router-dom';
 import classNames from 'classnames';
 import config from '../../config';

src/containers/CheckoutPage/__snapshots__/CheckoutPage.test.js.snap

@@ -86,7 +86,7 @@ exports[`CheckoutPage matches snapshot 1`] = `
         </h3>
       </div>
       <section>
-        <InjectIntl(StripePaymentForm)
+        <injectIntl(StripePaymentForm)
           authorDisplayName="author display name"
           confirmPaymentError={null}
           defaultPaymentMethod={null}

src/containers/ContactDetailsPage/ContactDetailsPage.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
-import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
+import { FormattedMessage, injectIntl, intlShape } from '../../util/reactIntl';
 import { propTypes } from '../../util/types';
 import { ensureCurrentUser } from '../../util/data';
 import { fetchCurrentUser, sendVerificationEmail } from '../../ducks/user.duck';

src/containers/ContactDetailsPage/__snapshots__/ContactDetailsPage.test.js.snap

@@ -43,7 +43,7 @@ exports[`ContactDetailsPage matches snapshot 1`] = `
       className={null}
       rootClassName={null}
     >
-      <InjectIntl(Footer) />
+      <injectIntl(Footer) />
     </LayoutWrapperFooter>
   </LayoutSideNavigation>
 </Page>

src/containers/EditListingPage/EditListingPage.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { bool, func, object, shape, string, oneOf } from 'prop-types';
 import { compose } from 'redux';
 import { withRouter } from 'react-router-dom';
-import { intlShape, injectIntl } from 'react-intl';
+import { intlShape, injectIntl } from '../../util/reactIntl';
 import { connect } from 'react-redux';
 import { types as sdkTypes } from '../../util/sdkLoader';
 import {

src/containers/EditListingPage/__snapshots__/EditListingPage.test.js.snap

@@ -6,7 +6,7 @@ exports[`EditListingPageComponent matches snapshot 1`] = `
   title="EditListingPage.titleCreateListing"
 >
   <withRouter(Connect(TopbarContainerComponent)) />
-  <withViewport(InjectIntl(EditListingWizard))
+  <withViewport(injectIntl(EditListingWizard))
     availability={
       Object {
         "calendar": undefined,

src/containers/EmailVerificationPage/EmailVerificationPage.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
-import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
+import { FormattedMessage, injectIntl, intlShape } from '../../util/reactIntl';
 import { propTypes } from '../../util/types';
 import { verify } from '../../ducks/EmailVerification.duck';
 import { isScrollingDisabled } from '../../ducks/UI.duck';

src/containers/InboxPage/InboxPage.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
-import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
+import { FormattedMessage, injectIntl, intlShape } from '../../util/reactIntl';
 import moment from 'moment';
 import classNames from 'classnames';
 import {

src/containers/InboxPage/__snapshots__/InboxPage.test.js.snap

@@ -86,7 +86,7 @@ exports[`InboxPage matches snapshot 1`] = `
                 "formatMessage": [Function],
                 "formatNumber": [Function],
                 "formatPlural": [Function],
-                "formatRelative": [Function],
+                "formatRelativeTime": [Function],
                 "formatTime": [Function],
                 "now": [Function],
               }
@@ -239,7 +239,7 @@ exports[`InboxPage matches snapshot 1`] = `
                 "formatMessage": [Function],
                 "formatNumber": [Function],
                 "formatPlural": [Function],
-                "formatRelative": [Function],
+                "formatRelativeTime": [Function],
                 "formatTime": [Function],
                 "now": [Function],
               }
@@ -387,7 +387,7 @@ exports[`InboxPage matches snapshot 1`] = `
       className={null}
       rootClassName={null}
     >
-      <InjectIntl(Footer) />
+      <injectIntl(Footer) />
     </LayoutWrapperFooter>
   </LayoutSideNavigation>
 </Page>
@@ -538,7 +538,7 @@ exports[`InboxPage matches snapshot 3`] = `
                 "formatMessage": [Function],
                 "formatNumber": [Function],
                 "formatPlural": [Function],
-                "formatRelative": [Function],
+                "formatRelativeTime": [Function],
                 "formatTime": [Function],
                 "now": [Function],
               }
@@ -691,7 +691,7 @@ exports[`InboxPage matches snapshot 3`] = `
                 "formatMessage": [Function],
                 "formatNumber": [Function],
                 "formatPlural": [Function],
-                "formatRelative": [Function],
+                "formatRelativeTime": [Function],
                 "formatTime": [Function],
                 "now": [Function],
               }
@@ -839,7 +839,7 @@ exports[`InboxPage matches snapshot 3`] = `
       className={null}
       rootClassName={null}
     >
-      <InjectIntl(Footer) />
+      <injectIntl(Footer) />
     </LayoutWrapperFooter>
   </LayoutSideNavigation>
 </Page>

src/containers/LandingPage/LandingPage.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
-import { injectIntl, intlShape } from 'react-intl';
+import { injectIntl, intlShape } from '../../util/reactIntl';
 import { isScrollingDisabled } from '../../ducks/UI.duck';
 import config from '../../config';
 import {

src/containers/LandingPage/__snapshots__/LandingPage.test.js.snap

@@ -89,7 +89,7 @@ exports[`LandingPage matches snapshot 1`] = `
       className={null}
       rootClassName={null}
     >
-      <InjectIntl(Footer) />
+      <injectIntl(Footer) />
     </LayoutWrapperFooter>
   </LayoutSingleColumn>
 </Page>

src/containers/ListingPage/ActionBarMaybe.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { bool, oneOfType, object } from 'prop-types';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from '../../util/reactIntl';
 import classNames from 'classnames';
 import {
   LISTING_STATE_PENDING_APPROVAL,

src/containers/ListingPage/ListingPage.js

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, { Component } from 'react';
 import { array, arrayOf, bool, func, shape, string, oneOf } from 'prop-types';
-import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
+import { FormattedMessage, intlShape, injectIntl } from '../../util/reactIntl';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';