Merge pull request #499 from sharetribe/update-client-packages

Update client packages

package.json

@@ -3,37 +3,38 @@
   "version": "0.2.0",
   "private": true,
   "dependencies": {
-    "array-includes": "^3.0.2",
+    "array-includes": "^3.0.3",
     "array.prototype.find": "^2.0.4",
     "autosize": "^4.0.0",
     "basic-auth": "^2.0.0",
     "classnames": "^2.2.5",
     "compression": "^1.7.1",
     "cookie-parser": "^1.4.3",
-    "decimal.js": "^7.1.1",
+    "decimal.js": "7.2.4",
     "express": "^4.16.2",
     "express-enforces-ssl": "^1.1.0",
-    "helmet": "^3.8.2",
+    "helmet": "^3.9.0",
     "lodash": "^4.17.4",
-    "moment": "(2.10 - 2.14 || ^2.15.1) && < 2.18.0",
+    "moment": "^2.18.1",
     "nsp": "^2.8.1",
-    "path-to-regexp": "^1.5.3",
+    "path-to-regexp": "^2.0.0",
+    "prop-types": "^15.6.0",
     "query-string": "^5.0.0",
-    "raven": "^2.1.2",
-    "raven-js": "^3.6.0",
-    "react": "^15.4.2",
-    "react-addons-shallow-compare": ">=0.14",
-    "react-dates": "^9.0.1",
-    "react-dom": "^15.4.2",
-    "react-google-maps": "^7.2.0",
-    "react-helmet": "^5.0.2",
-    "react-intl": "^2.2.3",
-    "react-moment-proptypes": "^1.4.0",
-    "react-redux": "^5.0.3",
-    "react-router-dom": "^4.0.0",
-    "react-sortable-hoc": "^0.6.1",
-    "redux": "^3.6.0",
-    "redux-form": "^6.6.1",
+    "raven": "^2.2.1",
+    "raven-js": "^3.18.1",
+    "react": "^15.6.2",
+    "react-addons-shallow-compare": "^15.6.2",
+    "react-dates": "^12.0.0",
+    "react-dom": "^15.6.2",
+    "react-google-maps": "^7.3.0",
+    "react-helmet": "^5.2.0",
+    "react-intl": "^2.4.0",
+    "react-moment-proptypes": "^1.5.0",
+    "react-redux": "^5.0.6",
+    "react-router-dom": "^4.2.2",
+    "react-sortable-hoc": "^0.6.8",
+    "redux": "^3.7.2",
+    "redux-form": "^6.8.0",
     "redux-thunk": "^2.2.0",
     "sanitize.css": "^5.0.0",
     "sharetribe-scripts": "1.0.14",
@@ -42,12 +43,12 @@
     "url": "^0.11.0"
   },
   "devDependencies": {
-    "enzyme": "^2.8.0",
-    "enzyme-to-json": "^1.5.0",
+    "enzyme": "^2.9.1",
+    "enzyme-to-json": "^1.6.0",
     "nodemon": "^1.12.1",
     "prettier": "1.7.4",
-    "react-addons-test-utils": "^15.4.2",
-    "react-test-renderer": "^15.4.2"
+    "react-addons-test-utils": "^15.6.2",
+    "react-test-renderer": "^15.6.2"
   },
   "scripts": {
     "clean": "rm -rf build/*",

src/Routes.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { Switch, Route, withRouter } from 'react-router-dom';

src/app.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import ReactDOMServer from 'react-dom/server';
 import Helmet from 'react-helmet';
 import { BrowserRouter, StaticRouter } from 'react-router-dom';

src/components/AddImages/AddImages.js

@@ -7,7 +7,8 @@
  *   <input type="file" accept="images/*" onChange={handleChange} />
  * </AddImages>
  */
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import { SortableContainer } from 'react-sortable-hoc';
 import classNames from 'classnames';
 import { ImageFromFile, ResponsiveImage, IconSpinner } from '../../components';

src/components/AddImages/RemoveImageButton.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import css from './AddImages.css';
 

src/components/Avatar/Avatar.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from 'react-intl';
 import classNames from 'classnames';
 import * as propTypes from '../../util/propTypes';

src/components/BirthdayInputField/BirthdayInputField.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { Field } from 'redux-form';
 import { injectIntl, intlShape } from 'react-intl';
 import classNames from 'classnames';

src/components/BookingBreakdown/BookingBreakdown.js

@@ -2,7 +2,8 @@
  * This component will show the booking info and calculated total price.
  * I.e. dates and other details related to payment decision in receipt format.
  */
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import { FormattedMessage, FormattedHTMLMessage, intlShape, injectIntl } from 'react-intl';
 import classNames from 'classnames';
 import { types } from '../../util/sdkLoader';

src/components/Button/Button.js

@@ -1,4 +1,5 @@
-import React, { PropTypes, Component } from 'react'; // eslint-disable-line react/no-deprecated
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { IconSpinner, IconCheckmark } from '../../components';
 

src/components/CurrencyInputField/CurrencyInputField.example.js

@@ -1,5 +1,6 @@
 /* eslint-disable no-console */
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import { IntlProvider, addLocaleData } from 'react-intl';
 import { reduxForm, propTypes as formPropTypes } from 'redux-form';
 import en from 'react-intl/locale-data/en';

src/components/CurrencyInputField/CurrencyInputField.js

@@ -3,7 +3,8 @@
  * onFocus: renders given value in unformatted manner: "9999,99"
  * onBlur: formats the given input: "9 999,99 €"
  */
-import React, { Component, PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { intlShape, injectIntl } from 'react-intl';
 import { Field } from 'redux-form';
 import classNames from 'classnames';

src/components/DateInputField/DateInputField.js

@@ -3,7 +3,8 @@
  * Styles for SingleDatePicker can be found from 'public/reactDates.css'.
  * CSS modules can't handle global styles so they are currently added separately
  */
-import React, { Component, PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { Field } from 'redux-form';
 import { intlShape, injectIntl } from 'react-intl';
 import { SingleDatePicker, isInclusivelyAfterDay } from 'react-dates';

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

@@ -12,7 +12,7 @@ exports[`DateInput matches snapshot 1`] = `
         className="SingleDatePickerInput"
       >
         <div
-          className="DateInput"
+          className="DateInput DateInput--open-down"
         >
           <input
             aria-describedby="DateInput__screen-reader-message-date-input"

src/components/DateRangeInputField/DateRangeInput.css

@@ -79,6 +79,13 @@
   & :global(.DayPickerNavigation__prev),
   & :global(.DayPickerNavigation__next) {
     color: var(--matterColorLight);
+    border: 0;
+  }
+  & :global(.CalendarDay__button) {
+    border: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
   }
   & :global(.CalendarDay) {
     @apply --marketplaceH4FontStyles;

src/components/DateRangeInputField/DateRangeInput.js

@@ -4,7 +4,8 @@
  *
  * N.B. *isOutsideRange* in defaultProps is defining what dates are available to booking.
  */
-import React, { Component, PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { intlShape, injectIntl } from 'react-intl';
 import { DateRangePicker, isInclusivelyAfterDay, isInclusivelyBeforeDay } from 'react-dates';
 import classNames from 'classnames';
@@ -39,6 +40,7 @@ const defaultProps = {
   endDatePlaceholderText: null, // Handled inside component
   disabled: false,
   required: false,
+  readOnly: false,
   screenReaderInputMessage: null, // Handled inside component
   showClearDates: false,
   showDefaultInputIcon: false,
@@ -47,17 +49,21 @@ const defaultProps = {
   customCloseIcon: null,
 
   // calendar presentation and interaction related props
+  renderMonth: null,
   orientation: HORIZONTAL_ORIENTATION,
   anchorDirection: ANCHOR_LEFT,
   horizontalMargin: 0,
   withPortal: false,
   withFullScreenPortal: false,
+  daySize: 38,
+  isRTL: false,
   initialVisibleMonth: null,
+  firstDayOfWeek: 0, // 0 .. 6, 0 is Sunday. TODO: This should come from some localization config.
   numberOfMonths: 1,
   keepOpenOnDateSelect: false,
   reopenPickerOnClearDates: false,
   renderCalendarInfo: null,
-  daySize: 38,
+  hideKeyboardShortcutsPanel: true,
 
   // navigation related props
   navPrev: <PreviousMonthIcon />,
@@ -90,6 +96,7 @@ const defaultProps = {
   // https://momentjs.com/
   displayFormat: 'ddd, MMMM D',
   monthFormat: 'MMMM YYYY',
+  weekDayFormat: 'dd',
   phrases: {
     closeDatePicker: null, // Handled inside component
     clearDate: null, // Handled inside component

src/components/DateRangeInputField/DateRangeInputField.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { Field } from 'redux-form';
 import classNames from 'classnames';
 import { START_DATE, END_DATE } from '../../util/dates';

src/components/DateRangeInputField/NextMonthIcon.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import css from './DateRangeInput.css';

src/components/DateRangeInputField/PreviousMonthIcon.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import css from './DateRangeInput.css';

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

@@ -12,7 +12,7 @@ exports[`DateRangeInput matches snapshot 1`] = `
         className="DateRangePickerInput"
       >
         <div
-          className="DateInput"
+          className="DateInput DateInput--open-down"
         >
           <input
             aria-describedby="DateInput__screen-reader-message-bookingStartDate"
@@ -44,12 +44,14 @@ exports[`DateRangeInput matches snapshot 1`] = `
           </div>
         </div>
         <div
+          aria-hidden="true"
           className="DateRangePickerInput__arrow"
+          role="presentation"
         >
           <span />
         </div>
         <div
-          className="DateInput"
+          className="DateInput DateInput--open-down"
         >
           <input
             aria-describedby="DateInput__screen-reader-message-bookingEndDate"

src/components/Discussion/Discussion.js

@@ -1,5 +1,5 @@
-import React, { Component, PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
-
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { Button } from '../../components';
 
 import css from './Discussion.css';

src/components/EditListingDescriptionPanel/EditListingDescriptionPanel.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
 import { ensureListing } from '../../util/data';

src/components/EditListingLocationPanel/EditListingLocationPanel.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
 import { ensureListing, parseAddress } from '../../util/data';

src/components/EditListingPhotosPanel/EditListingPhotosPanel.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import { omitBy, isUndefined } from 'lodash';

src/components/EditListingPricingPanel/EditListingPricingPanel.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
 import { createSlug } from '../../util/urlHelpers';

src/components/EditListingWizard/EditListingWizard.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from 'react-intl';
 import classNames from 'classnames';
 import routeConfiguration from '../../routeConfiguration';

src/components/ExternalLink/ExternalLink.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 
 // External link that opens in a new tab/window, ensuring that the
 // opened page doesn't have access to the current page.

src/components/Form/Form.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 
 const Form = props => {
   const { children, ...restProps } = props;

src/components/HeroSection/HeroSection.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import { stringify } from '../../util/urlHelpers';

src/components/IconBannedUser/IconBannedUser.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 
 import css from './IconBannedUser.css';
 

src/components/IconCheckmark/IconCheckmark.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import css from './IconCheckMark.css';

src/components/IconClose/IconClose.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import css from './IconClose.css';

src/components/IconEmailAttention/IconEmailAttention.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import css from './IconEmailAttention.css';

src/components/IconEmailSent/IconEmailSent.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import css from './IconEmailSent.css';

src/components/IconEmailSuccess/IconEmailSuccess.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import css from './IconEmailSuccess.css';

src/components/IconKeys/IconKeys.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 
 const IconKeys = props => {
   const { className } = props;

src/components/IconKeysSuccess/IconKeysSuccess.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 
 const IconKeysSuccess = props => {
   const { className } = props;

src/components/IconSearch/IconSearch.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import css from './IconSearch.css';

src/components/IconSpinner/IconSpinner.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import css from './IconSpinner.css';

src/components/ImageCarousel/ImageCarousel.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from 'react-intl';
 import classNames from 'classnames';
 import { ResponsiveImage } from '../../components';

src/components/ImageFromFile/ImageFromFile.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import { Promised } from '../../components';

src/components/LayoutSideNavigation/ContentWrapper.js

@@ -3,7 +3,8 @@
  * and main content. Side navigation (first child) will be shown aside on Desktop and
  * as sub bar under Topbar on mobile screens.
  */
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import css from './LayoutSideNavigation.css';

src/components/LayoutSideNavigation/LayoutSideNavigation.js

@@ -3,7 +3,8 @@
  * SideNavWrapper will be shown aside on Desktop layout and
  * as a sub bar under Topbar on mobile screens.
  */
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import TopbarWrapper from './TopbarWrapper';
 import SideNavWrapper from './SideNavWrapper';

src/components/LayoutSideNavigation/SideNavWrapper.js

@@ -3,7 +3,8 @@
  * and main content. Side navigation (first child) will be shown aside on Desktop and
  * as sub bar under Topbar on mobile screens.
  */
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import css from './LayoutSideNavigation.css';

src/components/LayoutSideNavigation/TopbarWrapper.js

@@ -3,7 +3,8 @@
  * and main content. Side navigation (first child) will be shown aside on Desktop and
  * as sub bar under Topbar on mobile screens.
  */
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import css from './LayoutSideNavigation.css';

src/components/ListingCard/ListingCard.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
 import classNames from 'classnames';
 import { NamedLink, ResponsiveImage } from '../../components';

src/components/LocationAutocompleteInput/LocationAutocompleteInput.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { Field } from 'redux-form';
 import { debounce } from 'lodash';
 import classNames from 'classnames';

src/components/ManageListingCard/ManageListingCard.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+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';

src/components/ManageListingCard/MenuIcon.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import css from './ManageListingCard.css';

src/components/Map/Map.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import * as propTypes from '../../util/propTypes';
 

src/components/MapPanel/MapPanel.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import { NamedLink } from '../../components';
 import css from './MapPanel.css';
 

src/components/Menu/Menu.js

@@ -16,7 +16,8 @@
  *
  */
 
-import React, { Component, PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import { MenuContent, MenuLabel } from '../../components';

src/components/MenuContent/MenuContent.js

@@ -2,7 +2,8 @@
  * MenuContent is a immediate child of Menu component sibling to MenuLabel.
  * Clicking MenuLabel toggles visibility of MenuContent.
  */
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { MenuItem } from '../../components';
 

src/components/MenuItem/MenuItem.js

@@ -6,7 +6,8 @@
  * Example:
  *   <MenuItem key="item 1"><a href="example.com">Click me</a><MenuItem>
  */
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import css from './MenuItem.css';

src/components/MenuLabel/MenuLabel.js

@@ -2,7 +2,8 @@
  * MenuLabel is the only always visible part of Menu.
  * Clicking it toggles visibility of MenuContent.
  */
-import React, { Component, PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import css from './MenuLabel.css';

src/components/Modal/Modal.js

@@ -8,7 +8,8 @@
  *   </Modal>
  * </Parent>
  */
-import React, { Component, PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
 import { Button, IconClose } from '../../components';

src/components/ModalInMobile/ModalInMobile.js

@@ -11,7 +11,8 @@
  *   </ModalInMobile>
  * </Parent>
  */
-import React, { Component, PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Modal } from '../../components';
 import { withViewport } from '../../util/contextHelpers';

src/components/NamedLink/NamedLink.js

@@ -17,7 +17,8 @@
  * will be added to the element className if the current URL matches
  * the one in the generated pathname of the link.
  */
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import { Link, withRouter } from 'react-router-dom';
 import classNames from 'classnames';
 import routeConfiguration from '../../routeConfiguration';

src/components/NamedRedirect/NamedRedirect.js

@@ -2,7 +2,8 @@
  * This component wraps React-Router's Redirect by providing name-based routing.
  * (Helps to narrow down the scope of possible format changes to routes.)
  */
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import { Redirect } from 'react-router-dom';
 import routeConfiguration from '../../routeConfiguration';
 import { pathByRouteName } from '../../util/routes';

src/components/NotificationBadge/NotificationBadge.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import css from './NotificationBadge.css';

src/components/OrderDetailsPanel/OrderDetailsPanel.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import { injectIntl, intlShape, FormattedDate, FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import * as propTypes from '../../util/propTypes';

src/components/OrderDiscussionPanel/OrderDiscussionPanel.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import { Discussion } from '../../components';
 
 const OrderDiscussionPanel = props => {

src/components/Page/Page.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
 import { withRouter } from 'react-router-dom';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';

src/components/PaginationLinks/NextPageIcon.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 
 const NextPageIcon = props => {
   const { className } = props;

src/components/PaginationLinks/PaginationLinks.example.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import { parse } from '../../util/urlHelpers';
 import PaginationLinks from './PaginationLinks';

src/components/PaginationLinks/PaginationLinks.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from 'react-intl';
 import classNames from 'classnames';
 import { range } from 'lodash';

src/components/PaginationLinks/PrevPageIcon.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 
 const PrevPageIcon = props => {
   const { className } = props;

src/components/Promised/Promised.js

@@ -7,7 +7,8 @@
  */
 
 /* eslint-disable no-underscore-dangle */
-import { Component, PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import { Component } from 'react';
+import PropTypes from 'prop-types';
 
 class Promised extends Component {
   constructor(props) {

src/components/ResponsiveImage/NoImageIcon.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 
 const NoImageIcon = props => {
   const { className } = props;

src/components/ResponsiveImage/ResponsiveImage.js

@@ -30,7 +30,8 @@
  *   // Browser decides which image it will fetch based on current screen size.
  */
 
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
 import * as propTypes from '../../util/propTypes';

src/components/SaleDetailsPanel/SaleDetailsPanel.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import { injectIntl, intlShape, FormattedDate, FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import * as propTypes from '../../util/propTypes';

src/components/SearchMap/SearchMap.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { withGoogleMap, GoogleMap } from 'react-google-maps';
 import classNames from 'classnames';
 import { groupBy, isEqual, reduce } from 'lodash';

src/components/SearchMapGroupLabel/SearchMapGroupLabel.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { OverlayView } from 'react-google-maps';
 import classNames from 'classnames';
 import * as propTypes from '../../util/propTypes';

src/components/SearchMapInfoCard/SearchMapInfoCard.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { OverlayView } from 'react-google-maps';
 import { compose } from 'redux';
 import { withRouter } from 'react-router-dom';

src/components/SearchMapPriceLabel/SearchMapPriceLabel.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { OverlayView } from 'react-google-maps';
 import { injectIntl, intlShape } from 'react-intl';
 import classNames from 'classnames';

src/components/SearchResultsPanel/SearchResultsPanel.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import * as propTypes from '../../util/propTypes';
 import { ListingCard, PaginationLinks } from '../../components';

src/components/SelectField/SelectField.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import { Field } from 'redux-form';
 import classNames from 'classnames';
 import { ValidationError } from '../../components';

src/components/StripeBankAccountTokenInputField/StripeBankAccountRequiredInput.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 

src/components/StripeBankAccountTokenInputField/StripeBankAccountTokenInputField.js

@@ -1,5 +1,6 @@
 /* eslint-disable no-underscore-dangle */
-import React, { Component, PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { intlShape, injectIntl, FormattedMessage } from 'react-intl';
 import { Field } from 'redux-form';
 import classNames from 'classnames';

src/components/TabNav/TabNav.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { NamedLink } from '../../components';
 

src/components/TabNavHorizontal/TabNavHorizontal.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { NamedLink } from '../../components';
 

src/components/Tabs/Tabs.example.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import Tabs from './Tabs';
 
 const TestPanel = props => {

src/components/Tabs/Tabs.js

@@ -15,7 +15,8 @@
  *
  */
 
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { TabNav } from '../../components';
 

src/components/TextInputField/TextInputField.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { Field } from 'redux-form';
 import classNames from 'classnames';
 import { ValidationError, ExpandingTextarea } from '../../components';

src/components/Topbar/LogoIcon.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 
 const LogoIcon = props => {
   const { className } = props;

src/components/Topbar/MenuIcon.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import css from './Topbar.css';

src/components/Topbar/SearchIcon.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import css from './Topbar.css';

src/components/Topbar/Topbar.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
 import { pickBy } from 'lodash';

src/components/TopbarDesktop/TopbarDesktop.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import { FormattedMessage, intlShape } from 'react-intl';
 import classNames from 'classnames';
 import { ACCOUNT_SETTINGS_PAGES } from '../../routeConfiguration';

src/components/TopbarMobileMenu/TopbarMobileMenu.js

@@ -2,7 +2,8 @@
  *  TopbarMobileMenu prints the menu content for authenticated user or
  * shows login actions for those who are not authenticated.
  */
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import { ACCOUNT_SETTINGS_PAGES } from '../../routeConfiguration';

src/components/UserNav/UserNav.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import { ACCOUNT_SETTINGS_PAGES } from '../../routeConfiguration';

src/components/ValidationError/ValidationError.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import css from './ValidationError.css';

src/containers/AuthenticationPage/AuthenticationPage.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withRouter, Redirect } from 'react-router-dom';

src/containers/BookingDatesForm/BookingDatesForm.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { reduxForm, formValueSelector, propTypes as formPropTypes } from 'redux-form';

src/containers/CheckoutPage/CheckoutPage.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';

src/containers/CheckoutPage/LogoIcon.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import desktopLogo from './images/saunatime-logo.png';
 
 const LogoIcon = props => {

src/containers/ContactDetailsForm/ContactDetailsForm.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { reduxForm, propTypes as formPropTypes } from 'redux-form';

src/containers/ContactDetailsPage/ContactDetailsPage.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { FormattedMessage } from 'react-intl';

src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { reduxForm, propTypes as formPropTypes } from 'redux-form';
 import { intlShape, injectIntl, FormattedMessage } from 'react-intl';

src/containers/EditListingLocationForm/EditListingLocationForm.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { reduxForm, formValueSelector, propTypes as formPropTypes } from 'redux-form';

src/containers/EditListingPage/EditListingPage.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'; // eslint-disable-line react/no-deprecated
+import React from 'react';
+import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { withRouter } from 'react-router-dom';
 import { intlShape, injectIntl } from 'react-intl';
@@ -180,7 +181,7 @@ const { bool, func, instanceOf, object, shape, string, oneOf } = PropTypes;
 
 EditListingPageComponent.propTypes = {
   authInfoError: instanceOf(Error),
-  createStripeAccountError: PropTypes.instanceOf(Error),
+  createStripeAccountError: instanceOf(Error),
   currentUser: propTypes.currentUser,
   fetchInProgress: bool.isRequired,
   getListing: func.isRequired,