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 [email protected]](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
-//   3) Import correct locale rules for Moment library
-//   4) Use the `messagesInLocale` import to add the correct translation file.
+//   2) Import correct locale rules for Moment library
+//   3) 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,