Move page titles to translations

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 { FormattedMessage } from 'react-intl';
+import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import * as propTypes from '../../util/propTypes';
 import { ensureCurrentUser } from '../../util/data';
 import { fetchCurrentUser, sendVerificationEmail } from '../../ducks/user.duck';
@@ -34,6 +34,7 @@ export const ContactDetailsPageComponent = props => {
     sendVerificationEmailError,
     onResendVerificationEmail,
     onSubmitChangeEmail,
+    intl,
   } = props;
 
   const tabs = [
@@ -71,8 +72,10 @@ export const ContactDetailsPageComponent = props => {
     />
   ) : null;
 
+  const title = intl.formatMessage({ id: 'ContactDetailsPage.title' });
+
   return (
-    <Page title="Contact details" scrollingDisabled={scrollingDisabled}>
+    <Page title={title} scrollingDisabled={scrollingDisabled}>
       <LayoutSideNavigation>
         <LayoutWrapperTopbar>
           <TopbarContainer
@@ -86,7 +89,7 @@ export const ContactDetailsPageComponent = props => {
         <LayoutWrapperMain>
           <div className={css.content}>
             <h1 className={css.title}>
-              <FormattedMessage id="ContactDetailsPage.title" />
+              <FormattedMessage id="ContactDetailsPage.heading" />
             </h1>
             {changeEmailForm}
           </div>
@@ -118,6 +121,9 @@ ContactDetailsPageComponent.propTypes = {
   sendVerificationEmailInProgress: bool.isRequired,
   sendVerificationEmailError: propTypes.error,
   onResendVerificationEmail: func.isRequired,
+
+  // from injectIntl
+  intl: intlShape.isRequired,
 };
 
 const mapStateToProps = state => {
@@ -141,7 +147,7 @@ const mapDispatchToProps = dispatch => ({
   onSubmitChangeEmail: values => dispatch(changeEmail(values)),
 });
 
-const ContactDetailsPage = compose(connect(mapStateToProps, mapDispatchToProps))(
+const ContactDetailsPage = compose(connect(mapStateToProps, mapDispatchToProps), injectIntl)(
   ContactDetailsPageComponent
 );
 

src/containers/ContactDetailsPage/ContactDetailsPage.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { renderShallow } from '../../util/test-helpers';
+import { fakeIntl } from '../../util/test-data';
 import { ContactDetailsPageComponent } from './ContactDetailsPage';
 
 const noop = () => null;
@@ -23,6 +24,7 @@ describe('ContactDetailsPage', () => {
         onSubmitChangeEmail={noop}
         changeEmailInProgress={false}
         emailChanged={false}
+        intl={fakeIntl}
       />
     );
     expect(tree).toMatchSnapshot();

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

@@ -3,7 +3,7 @@
 exports[`ContactDetailsPage matches snapshot 1`] = `
 <Page
   scrollingDisabled={false}
-  title="Contact details"
+  title="ContactDetailsPage.title"
 >
   <LayoutSideNavigation
     className={null}
@@ -58,7 +58,7 @@ exports[`ContactDetailsPage matches snapshot 1`] = `
       <div>
         <h1>
           <FormattedMessage
-            id="ContactDetailsPage.title"
+            id="ContactDetailsPage.heading"
             values={Object {}}
           />
         </h1>

src/containers/ManageListingsPage/ManageListingsPage.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
-import { FormattedMessage } from 'react-intl';
+import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import * as propTypes from '../../util/propTypes';
 import { parse } from '../../util/urlHelpers';
 import { isScrollingDisabled } from '../../ducks/UI.duck';
@@ -58,6 +58,7 @@ export class ManageListingsPageComponent extends Component {
       queryListingsError,
       queryParams,
       scrollingDisabled,
+      intl,
     } = this.props;
 
     const hasPaginationInfo = !!pagination && pagination.totalItems != null;
@@ -82,7 +83,7 @@ export class ManageListingsPageComponent extends Component {
         </h1>
       ) : null;
 
-    const title =
+    const heading =
       listingsAreLoaded && pagination.totalItems > 0 ? (
         <h1 className={css.title}>
           <FormattedMessage
@@ -109,8 +110,10 @@ export class ManageListingsPageComponent extends Component {
     const closingErrorListingId = !!closingListingError && closingListingError.listingId;
     const openingErrorListingId = !!openingListingError && openingListingError.listingId;
 
+    const title = intl.formatMessage({ id: 'ManageListingsPage.title' });
+
     return (
-      <Page scrollingDisabled={scrollingDisabled} title="Manage listings">
+      <Page title={title} scrollingDisabled={scrollingDisabled}>
         <LayoutSingleColumn>
           <LayoutWrapperTopbar>
             <TopbarContainer currentPage="ManageListingsPage" />
@@ -120,7 +123,7 @@ export class ManageListingsPageComponent extends Component {
             {queryInProgress ? loadingResults : null}
             {queryListingsError ? queryError : null}
             <div className={css.listingPanel}>
-              {title}
+              {heading}
               <div className={css.listingCards}>
                 {listings.map(l => (
                   <ManageListingCard
@@ -181,6 +184,9 @@ ManageListingsPageComponent.propTypes = {
   queryListingsError: propTypes.error,
   queryParams: object,
   scrollingDisabled: bool.isRequired,
+
+  // from injectIntl
+  intl: intlShape.isRequired,
 };
 
 const mapStateToProps = state => {
@@ -216,7 +222,7 @@ const mapDispatchToProps = dispatch => ({
   onOpenListing: listingId => dispatch(openListing(listingId)),
 });
 
-const ManageListingsPage = compose(connect(mapStateToProps, mapDispatchToProps))(
+const ManageListingsPage = compose(connect(mapStateToProps, mapDispatchToProps), injectIntl)(
   ManageListingsPageComponent
 );
 

src/containers/ManageListingsPage/ManageListingsPage.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { renderShallow } from '../../util/test-helpers';
+import { fakeIntl } from '../../util/test-data';
 import { ManageListingsPageComponent } from './ManageListingsPage';
 
 const noop = () => null;
@@ -22,6 +23,7 @@ describe('ContactDetailsPage', () => {
         onOpenListing={noop}
         sendVerificationEmailInProgress={false}
         onResendVerificationEmail={noop}
+        intl={fakeIntl}
       />
     );
     expect(tree).toMatchSnapshot();

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

@@ -3,7 +3,7 @@
 exports[`ContactDetailsPage matches snapshot 1`] = `
 <Page
   scrollingDisabled={false}
-  title="Manage listings"
+  title="ManageListingsPage.title"
 >
   <LayoutSingleColumn
     className={null}

src/containers/PasswordChangePage/PasswordChangePage.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 } from 'react-intl';
+import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import * as propTypes from '../../util/propTypes';
 import { isScrollingDisabled } from '../../ducks/UI.duck';
 import {
@@ -29,6 +29,7 @@ export const PasswordChangePageComponent = props => {
     onSubmitChangePassword,
     passwordChanged,
     scrollingDisabled,
+    intl,
   } = props;
 
   const tabs = [
@@ -61,8 +62,10 @@ export const PasswordChangePageComponent = props => {
       />
     ) : null;
 
+  const title = intl.formatMessage({ id: 'PasswordChangePage.title' });
+
   return (
-    <Page title="Contact details" scrollingDisabled={scrollingDisabled}>
+    <Page title={title} scrollingDisabled={scrollingDisabled}>
       <LayoutSideNavigation>
         <LayoutWrapperTopbar>
           <TopbarContainer
@@ -76,7 +79,7 @@ export const PasswordChangePageComponent = props => {
         <LayoutWrapperMain>
           <div className={css.content}>
             <h1 className={css.title}>
-              <FormattedMessage id="PasswordChangePage.title" />
+              <FormattedMessage id="PasswordChangePage.heading" />
             </h1>
             {changePasswordForm}
           </div>
@@ -104,6 +107,9 @@ PasswordChangePageComponent.propTypes = {
   onSubmitChangePassword: func.isRequired,
   passwordChanged: bool.isRequired,
   scrollingDisabled: bool.isRequired,
+
+  // from injectIntl
+  intl: intlShape.isRequired,
 };
 
 const mapStateToProps = state => {
@@ -128,7 +134,7 @@ const mapDispatchToProps = dispatch => ({
   onSubmitChangePassword: values => dispatch(changePassword(values)),
 });
 
-const PasswordChangePage = compose(connect(mapStateToProps, mapDispatchToProps))(
+const PasswordChangePage = compose(connect(mapStateToProps, mapDispatchToProps), injectIntl)(
   PasswordChangePageComponent
 );
 

src/containers/PasswordChangePage/PasswordChangePage.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { renderShallow } from '../../util/test-helpers';
+import { fakeIntl } from '../../util/test-data';
 import { PasswordChangePageComponent } from './PasswordChangePage';
 
 const noop = () => null;
@@ -23,6 +24,7 @@ describe('PasswordChangePage', () => {
         onSubmitChangePassword={noop}
         changePasswordInProgress={false}
         passwordChanged={false}
+        intl={fakeIntl}
       />
     );
     expect(tree).toMatchSnapshot();

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

@@ -3,7 +3,7 @@
 exports[`PasswordChangePage matches snapshot 1`] = `
 <Page
   scrollingDisabled={false}
-  title="Contact details"
+  title="PasswordChangePage.title"
 >
   <LayoutSideNavigation
     className={null}
@@ -58,7 +58,7 @@ exports[`PasswordChangePage matches snapshot 1`] = `
       <div>
         <h1>
           <FormattedMessage
-            id="PasswordChangePage.title"
+            id="PasswordChangePage.heading"
             values={Object {}}
           />
         </h1>

src/containers/PayoutPreferencesPage/PayoutPreferencesPage.js

@@ -16,8 +16,10 @@ import { TopbarContainer } from '../../containers';
 export const PayoutPreferencesPageComponent = props => {
   const { scrollingDisabled } = props;
 
+  const title = 'Payout preferences';
+
   return (
-    <Page title="Payout preferences" scrollingDisabled={scrollingDisabled}>
+    <Page title={title} scrollingDisabled={scrollingDisabled}>
       <LayoutSingleColumn>
         <LayoutWrapperTopbar>
           <TopbarContainer />

src/containers/ProfileSettingsPage/ProfileSettingsPage.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
-import { FormattedMessage } from 'react-intl';
+import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import * as propTypes from '../../util/propTypes';
 import { ensureCurrentUser } from '../../util/data';
 import { isScrollingDisabled } from '../../ducks/UI.duck';
@@ -45,6 +45,7 @@ export class ProfileSettingsPageComponent extends Component {
       updateProfileError,
       uploadImageError,
       uploadInProgress,
+      intl,
     } = this.props;
 
     const handleSubmit = values => {
@@ -94,8 +95,10 @@ export class ProfileSettingsPageComponent extends Component {
       />
     ) : null;
 
+    const title = intl.formatMessage({ id: 'ProfileSettingsPage.title' });
+
     return (
-      <Page className={css.root} title="Profile settings" scrollingDisabled={scrollingDisabled}>
+      <Page className={css.root} title={title} scrollingDisabled={scrollingDisabled}>
         <LayoutSingleColumn>
           <LayoutWrapperTopbar>
             <TopbarContainer currentPage="ProfileSettingsPage" />
@@ -105,7 +108,7 @@ export class ProfileSettingsPageComponent extends Component {
             <div className={css.content}>
               <div className={css.headingContainer}>
                 <h1 className={css.heading}>
-                  <FormattedMessage id="ProfileSettingsPage.title" />
+                  <FormattedMessage id="ProfileSettingsPage.heading" />
                 </h1>
                 {user.id ? (
                   <NamedLink
@@ -154,6 +157,9 @@ ProfileSettingsPageComponent.propTypes = {
   updateProfileError: propTypes.error,
   uploadImageError: propTypes.error,
   uploadInProgress: bool.isRequired,
+
+  // from injectIntl
+  intl: intlShape.isRequired,
 };
 
 const mapStateToProps = state => {
@@ -182,7 +188,7 @@ const mapDispatchToProps = dispatch => ({
   onUpdateProfile: data => dispatch(updateProfile(data)),
 });
 
-const ProfileSettingsPage = compose(connect(mapStateToProps, mapDispatchToProps))(
+const ProfileSettingsPage = compose(connect(mapStateToProps, mapDispatchToProps), injectIntl)(
   ProfileSettingsPageComponent
 );
 

src/containers/ProfileSettingsPage/ProfileSettingsPage.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { renderShallow } from '../../util/test-helpers';
+import { fakeIntl } from '../../util/test-data';
 import { ProfileSettingsPageComponent } from './ProfileSettingsPage';
 
 const noop = () => null;
@@ -24,6 +25,7 @@ describe('ContactDetailsPage', () => {
         uploadInProgress={false}
         sendVerificationEmailInProgress={false}
         onResendVerificationEmail={noop}
+        intl={fakeIntl}
       />
     );
     expect(tree).toMatchSnapshot();

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

@@ -3,7 +3,7 @@
 exports[`ContactDetailsPage matches snapshot 1`] = `
 <Page
   scrollingDisabled={false}
-  title="Profile settings"
+  title="ProfileSettingsPage.title"
 >
   <LayoutSingleColumn
     className={null}
@@ -30,7 +30,7 @@ exports[`ContactDetailsPage matches snapshot 1`] = `
         <div>
           <h1>
             <FormattedMessage
-              id="ProfileSettingsPage.title"
+              id="ProfileSettingsPage.heading"
               values={Object {}}
             />
           </h1>

src/translations/en.json

@@ -73,8 +73,9 @@
   "ContactDetailsForm.saveChanges": "Save changes",
   "ContactDetailsForm.tooManyVerificationRequests": "Too many email verification requests sent.",
   "ContactDetailsPage.emailTabTitle": "Email",
+  "ContactDetailsPage.heading": "Email settings",
   "ContactDetailsPage.passwordTabTitle": "Password",
-  "ContactDetailsPage.title": "Email settings",
+  "ContactDetailsPage.title": "Contact details",
   "DateInput.clearDate": "Clear Date",
   "DateInput.closeDatePicker": "Close",
   "DateInput.defaultPlaceholder": "Date input",
@@ -243,6 +244,7 @@
   "ManageListingsPage.noResults": "You don't have any listings.",
   "ManageListingsPage.profileSettings": "Profile settings",
   "ManageListingsPage.queryError": "Query failed. Please try again.",
+  "ManageListingsPage.title": "Manage listings",
   "ManageListingsPage.youHaveListings": "You have {count} {count, plural, one {listing} other {listings}}",
   "ManageListingsPage.yourListings": "Your listings",
   "MapPriceMarker.unsupportedPrice": "({currency})",
@@ -293,8 +295,9 @@
   "PasswordChangeForm.passwordTooShort": "Password should be at least {minLength} characters",
   "PasswordChangeForm.saveChanges": "Save changes",
   "PasswordChangePage.emailTabTitle": "Email",
+  "PasswordChangePage.heading": "Password settings",
   "PasswordChangePage.passwordTabTitle": "Password",
-  "PasswordChangePage.title": "Password settings",
+  "PasswordChangePage.title": "Contact details",
   "PasswordRecoveryForm.emailInvalid": "A valid email address is required",
   "PasswordRecoveryForm.emailLabel": "Email",
   "PasswordRecoveryForm.emailNotFound": "Hmm. We didn't find an account with that email. Please double-check your email and try again.",
@@ -414,6 +417,7 @@
   "ProfileSettingsForm.updateProfileFailed": "Whoopsie, something went wrong - please try again.",
   "ProfileSettingsForm.yourName": "Your name",
   "ProfileSettingsForm.yourProfilePicture": "Your profile picture",
+  "ProfileSettingsPage.heading": "Profile settings",
   "ProfileSettingsPage.title": "Profile settings",
   "ProfileSettingsPage.viewProfileLink": "View your profile",
   "ResponsiveImage.noImage": "No image",