Don't use componentWillMount

src/components/TransactionPanel/TransactionPanel.js

@@ -99,7 +99,7 @@ export class TransactionPanelComponent extends Component {
     this.scrollToMessage = this.scrollToMessage.bind(this);
   }
 
-  componentWillMount() {
+  componentDidMount() {
     this.isMobSaf = isMobileSafari();
   }
 

src/containers/CheckoutPage/CheckoutPage.js

@@ -110,7 +110,7 @@ export class CheckoutPageComponent extends Component {
     this.handleSubmit = this.handleSubmit.bind(this);
   }
 
-  componentWillMount() {
+  componentDidMount() {
     if (window) {
       this.loadInitialData();
     }
@@ -520,6 +520,31 @@ export class CheckoutPageComponent extends Component {
     const currentListing = ensureListing(listing);
     const currentAuthor = ensureUser(currentListing.author);
 
+    const listingTitle = currentListing.attributes.title;
+    const title = intl.formatMessage({ id: 'CheckoutPage.title' }, { listingTitle });
+
+    const pageProps = { title, scrollingDisabled };
+    const topbar = (
+      <div className={css.topbar}>
+        <NamedLink className={css.home} name="LandingPage">
+          <Logo
+            className={css.logoMobile}
+            title={intl.formatMessage({ id: 'CheckoutPage.goToLandingPage' })}
+            format="mobile"
+          />
+          <Logo
+            className={css.logoDesktop}
+            alt={intl.formatMessage({ id: 'CheckoutPage.goToLandingPage' })}
+            format="desktop"
+          />
+        </NamedLink>
+      </div>
+    );
+
+    if (isLoading) {
+      return <Page {...pageProps}>{topbar}</Page>;
+    }
+
     const isOwnListing =
       currentUser &&
       currentUser.id &&
@@ -583,9 +608,6 @@ export class CheckoutPageComponent extends Component {
       !isPaymentExpired
     );
 
-    const listingTitle = currentListing.attributes.title;
-    const title = intl.formatMessage({ id: 'CheckoutPage.title' }, { listingTitle });
-
     const firstImage =
       currentListing.images && currentListing.images.length > 0 ? currentListing.images[0] : null;
 
@@ -686,23 +708,6 @@ export class CheckoutPageComponent extends Component {
       );
     }
 
-    const topbar = (
-      <div className={css.topbar}>
-        <NamedLink className={css.home} name="LandingPage">
-          <Logo
-            className={css.logoMobile}
-            title={intl.formatMessage({ id: 'CheckoutPage.goToLandingPage' })}
-            format="mobile"
-          />
-          <Logo
-            className={css.logoDesktop}
-            alt={intl.formatMessage({ id: 'CheckoutPage.goToLandingPage' })}
-            format="desktop"
-          />
-        </NamedLink>
-      </div>
-    );
-
     const unitType = config.bookingUnitType;
     const isNightly = unitType === LINE_ITEM_NIGHT;
     const isDaily = unitType === LINE_ITEM_DAY;
@@ -721,12 +726,6 @@ export class CheckoutPageComponent extends Component {
       existingTransaction && existingTransaction.attributes.lastTransition === TRANSITION_ENQUIRE
     );
 
-    const pageProps = { title, scrollingDisabled };
-
-    if (isLoading) {
-      return <Page {...pageProps}>{topbar}</Page>;
-    }
-
     // Get first and last name of the current user and use it in the StripePaymentForm to autofill the name field
     const userName =
       currentUser && currentUser.attributes

src/containers/NotFoundPage/NotFoundPage.js

@@ -21,7 +21,8 @@ import { TopbarContainer } from '../../containers';
 import css from './NotFoundPage.css';
 
 export class NotFoundPageComponent extends Component {
-  componentWillMount() {
+  constructor(props) {
+    super(props);
     // The StaticRouter component used in server side rendering
     // provides the context object. We attach a `notfound` flag to
     // the context to tell the server to change the response status