Purchase: Move all page titles into one place

client/me/purchases/cancel-private-registration/index.jsx

@@ -9,13 +9,14 @@ import React from 'react';
  * Internal dependencies
  */
 import Button from 'components/button';
+import { cancelPrivateRegistration } from 'lib/upgrades/actions';
 import Card from 'components/card';
-import Main from 'components/main';
 import HeaderCake from 'components/header-cake';
-import paths from '../paths';
 import { isRefundable } from 'lib/purchases';
-import { cancelPrivateRegistration } from 'lib/upgrades/actions';
+import Main from 'components/main';
+import paths from '../paths';
 import SimpleNotice from 'notices/simple-notice';
+import titles from 'me/purchases/titles';
 import { goToManagePurchase, isDataLoading, recordPageView } from '../utils';
 
 const CancelPrivateRegistration = React.createClass( {
@@ -144,7 +145,7 @@ const CancelPrivateRegistration = React.createClass( {
 
 			<Main className="manage-purchase__detail">
 				<HeaderCake onClick={ goToManagePurchase.bind( null, this.props ) }>
-					{ this.translate( 'Cancel Private Registration' ) }
+					{ titles.cancelPrivateRegistration }
 				</HeaderCake>
 				{ notice }
 				<Card className={ classes }>

client/me/purchases/cancel-purchase-placeholder/index.jsx

@@ -11,6 +11,7 @@ import CompactCard from 'components/card/compact';
 import Button from 'components/button';
 import LoadingPlaceholder from 'components/loading-placeholder';
 import { managePurchase } from 'me/purchases/paths';
+import titles from 'me/purchases/titles';
 
 const CancelPurchasePlaceholder = React.createClass( {
 	propTypes: {
@@ -21,7 +22,7 @@ const CancelPurchasePlaceholder = React.createClass( {
 	render() {
 		return (
 			<LoadingPlaceholder
-				title={ this.translate( 'Cancel Purchase' ) }
+				title={ titles.cancelPurchase }
 				path={ managePurchase( this.props.selectedSite.slug, this.props.purchaseId ) }>
 				<Card className="cancel-purchase-placeholder__card">
 					<h2 className="cancel-purchase-placeholder__header" />

client/me/purchases/cancel-purchase/index.jsx

@@ -16,6 +16,7 @@ import CompactCard from 'components/card/compact';
 import HeaderCake from 'components/header-cake';
 import Main from 'components/main';
 import paths from '../paths';
+import titles from 'me/purchases/titles';
 import { getName, isCancelable } from 'lib/purchases';
 import { getPurchase, goToManagePurchase, isDataLoading, recordPageView } from '../utils';
 
@@ -55,7 +56,7 @@ const CancelPurchase = React.createClass( {
 		return (
 			<Main className="cancel-purchase">
 				<HeaderCake onClick={ goToManagePurchase.bind( null, this.props ) }>
-					{ this.translate( 'Cancel Purchase' ) }
+					{ titles.cancelPurchase }
 				</HeaderCake>
 
 				<Card className="cancel-purchase__card">

client/me/purchases/confirm-cancel-purchase/index.jsx

@@ -15,6 +15,7 @@ import HeaderCake from 'components/header-cake';
 import Main from 'components/main';
 import notices from 'notices';
 import paths from 'me/purchases/paths';
+import titles from 'me/purchases/titles';
 import { getPurchase, goToManagePurchase, recordPageView } from '../utils';
 
 const ConfirmCancelPurchase = React.createClass( {
@@ -86,7 +87,9 @@ const ConfirmCancelPurchase = React.createClass( {
 	render() {
 		return (
 			<Main className="cancel-confirm">
-				<HeaderCake onClick={ goToManagePurchase.bind( null, this.props ) }>{ this.translate( 'Confirm Cancellation' ) }</HeaderCake>
+				<HeaderCake onClick={ goToManagePurchase.bind( null, this.props ) }>
+					{ titles.confirmCancelPurchase }
+				</HeaderCake>
 				{ this.renderCard() }
 			</Main>
 		);

client/me/purchases/controller.jsx

@@ -15,7 +15,6 @@ import EditCardDetails from './payment/edit-card-details';
 import EditCardDetailsData from 'components/data/purchases/edit-card-details';
 import EditCardDetailsLoadingPlaceholder from './payment/edit-card-details/loading-placeholder';
 import EditPaymentMethod from './payment/edit-payment-method';
-import i18n from 'lib/mixins/i18n';
 import Main from 'components/main';
 import ManagePurchaseData from 'components/data/purchases/manage-purchase';
 import ManagePurchase from './manage-purchase';
@@ -25,6 +24,7 @@ import PurchasesData from 'components/data/purchases';
 import PurchasesList from './list';
 import sitesFactory from 'lib/sites-list';
 import titleActions from 'lib/screen-title/actions';
+import titles from './titles';
 import userFactory from 'lib/user';
 import { isDataLoading } from './utils';
 
@@ -51,14 +51,14 @@ function renderPage( component ) {
 
 function setTitle( ...title ) {
 	titleActions.setTitle(
-		concatTitle( i18n.translate( 'Purchases' ), ...title )
+		concatTitle( titles.purchases, ...title )
 	);
 }
 
 export default {
 	cancelPurchase( context ) {
 		setTitle(
-			i18n.translate( 'Cancel Purchase' )
+			titles.cancelPurchase
 		);
 
 		recordPageView(
@@ -80,7 +80,7 @@ export default {
 
 	cancelPrivateRegistration( context ) {
 		setTitle(
-			i18n.translate( 'Cancel Private Registration' )
+			titles.cancelPrivateRegistration
 		);
 
 		recordPageView(
@@ -100,7 +100,7 @@ export default {
 
 	confirmCancelPurchase( context ) {
 		setTitle(
-			i18n.translate( 'Confirm Cancel Purchase' )
+			titles.confirmCancelPurchase
 		);
 
 		recordPageView(
@@ -120,7 +120,7 @@ export default {
 
 	editCardDetails( context ) {
 		setTitle(
-			i18n.translate( 'Edit Card Details' )
+			titles.editCardDetails
 		);
 
 		recordPageView(
@@ -142,7 +142,7 @@ export default {
 
 	editPaymentMethod( context ) {
 		setTitle(
-			i18n.translate( 'Edit Payment Method' )
+			titles.editPaymentMethod
 		);
 
 		recordPageView(
@@ -175,7 +175,7 @@ export default {
 
 	managePurchase( context ) {
 		setTitle(
-			i18n.translate( 'Manage Purchase' )
+			titles.managePurchase
 		);
 
 		analytics.pageView.record(

client/me/purchases/manage-purchase/index.jsx

@@ -1,30 +1,30 @@
 /**
  * External Dependencies
  */
-import React from 'react';
-import page from 'page';
 import classNames from 'classnames';
+import page from 'page';
+import React from 'react';
 
 /**
  * Internal Dependencies
  */
 import analytics from 'analytics';
 import Button from 'components/button';
 import Card from 'components/card';
-import Gridicon from 'components/gridicon';
 import { cartItems } from 'lib/cart-values';
+import { domainManagementEdit } from 'my-sites/upgrades/paths';
 import { googleAppsSettingsUrl } from 'lib/google-apps';
+import Gridicon from 'components/gridicon';
 import HeaderCake from 'components/header-cake';
 import Main from 'components/main';
 import NoticeArrowLink from 'notices/arrow-link';
+import { oldShowcaseUrl } from 'lib/themes/helpers';
+import paths from '../paths';
 import PaymentLogo from 'components/payment-logo';
 import SimpleNotice from 'notices/simple-notice';
+import titles from 'me/purchases/titles';
 import VerticalNavItem from 'components/vertical-nav/item';
-import paths from '../paths';
 import * as upgradesActions from 'lib/upgrades/actions';
-import { isDomainProduct, isGoogleApps, isPlan, isSiteRedirect, isTheme } from 'lib/products-values';
-import { domainManagementEdit } from 'my-sites/upgrades/paths';
-import { oldShowcaseUrl } from 'lib/themes/helpers';
 import {
 	creditCardExpiresBeforeSubscription,
 	getName,
@@ -47,6 +47,7 @@ import {
 	showEditPaymentDetails
 } from 'lib/purchases';
 import { getPurchase, goToList, isDataLoading, recordPageView } from '../utils';
+import { isDomainProduct, isGoogleApps, isPlan, isSiteRedirect, isTheme } from 'lib/products-values';
 
 const ManagePurchase = React.createClass( {
 	propTypes: {
@@ -606,7 +607,9 @@ const ManagePurchase = React.createClass( {
 			<span>
 				{ this.renderPathNotice() }
 				<Main className="manage-purchase">
-					<HeaderCake onClick={ goToList }>{ this.translate( 'Manage Purchase' ) }</HeaderCake>
+					<HeaderCake onClick={ goToList }>
+						{ titles.managePurchase }
+					</HeaderCake>
 					{ this.renderNotices() }
 					{ this.renderPurchaseDetail() }
 				</Main>

client/me/purchases/payment/edit-card-details/index.jsx

@@ -1,9 +1,9 @@
 /**
  * External Dependencies
  */
-import React from 'react';
 import extend from 'lodash/object/assign';
 import page from 'page';
+import React from 'react';
 
 /**
  * Internal Dependencies
@@ -12,6 +12,7 @@ import analytics from 'analytics';
 import camelCase from 'lodash/string/camelCase';
 import Card from 'components/card';
 import CompactCard from 'components/card/compact';
+import { createPaygateToken } from 'lib/store-transactions';
 import CreditCardForm from 'components/upgrades/credit-card-form';
 import FormButton from 'components/forms/form-button';
 import formState from 'lib/form-state';
@@ -21,11 +22,11 @@ import kebabCase from 'lodash/string/kebabCase';
 import Main from 'components/main';
 import mapKeys from 'lodash/object/mapKeys';
 import notices from 'notices';
+import paths from 'me/purchases/paths';
+import titles from 'me/purchases/titles';
 import { validateCardDetails } from 'lib/credit-card-details';
 import ValidationErrorList from 'notices/validation-error-list';
-import { createPaygateToken } from 'lib/store-transactions';
 import wpcomFactory from 'lib/wp';
-import paths from 'me/purchases/paths';
 import { getPurchase, goToManagePurchase, isDataLoading, recordPageView } from 'me/purchases/utils';
 
 const wpcom = wpcomFactory.undocumented();
@@ -215,7 +216,7 @@ const EditCardDetails = React.createClass( {
 		return (
 			<Main className="edit-card-details">
 				<HeaderCake onClick={ goToManagePurchase.bind( null, this.props ) }>
-					{ this.translate( 'Edit Card Details', { context: 'Header text', comment: 'Credit card' } ) }
+					{ titles.editCardDetails }
 				</HeaderCake>
 
 				<form onSubmit={ this.onSubmit }>

client/me/purchases/payment/edit-card-details/loading-placeholder.jsx

@@ -12,11 +12,12 @@ import FormButton from 'components/forms/form-button';
 import FormTextInput from 'components/forms/form-text-input';
 import FormSelect from 'components/forms/form-select';
 import LoadingPlaceholder from 'components/loading-placeholder';
+import titles from 'me/purchases/titles';
 
 const EditCardDetailsLoadingPlaceholder = React.createClass( {
 	render() {
 		return (
-			<LoadingPlaceholder title={ this.translate( 'Edit Card Details', { context: 'Header text', comment: 'Credit card' } ) }>
+			<LoadingPlaceholder title={ titles.editCardDetails }>
 				<Card className="edit-card-details__content">
 					<div className="credit-card-form">
 						<div className="credit-card-form__field">

client/me/purchases/payment/edit-payment-method/index.jsx

@@ -11,6 +11,7 @@ import EditPaymentMethodCreditCard from './credit-card';
 import HeaderCake from 'components/header-cake';
 import { isPaidWithCreditCard, isPaidWithPaypal } from 'lib/purchases';
 import Main from 'components/main';
+import titles from 'me/purchases/titles';
 import { getPurchase, goToManagePurchase, isDataLoading, recordPageView } from 'me/purchases/utils';
 
 const EditPaymentMethod = React.createClass( {
@@ -41,7 +42,7 @@ const EditPaymentMethod = React.createClass( {
 		return (
 			<Main className="edit-payment-method">
 				<HeaderCake onClick={ goToManagePurchase.bind( null, this.props ) }>
-					{ this.translate( 'Edit Payment Method' ) }
+					{ titles.editPaymentMethod }
 				</HeaderCake>
 
 				<h2>

client/me/purchases/titles.js

@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import i18n from 'lib/mixins/i18n';
+
+const options = {
+	context: 'Title text'
+};
+
+export default {
+	cancelPrivateRegistration: i18n.translate( 'Cancel Private Registration', options ),
+	cancelPurchase: i18n.translate( 'Cancel Purchase', options ),
+	confirmCancelPurchase: i18n.translate( 'Confirm Cancel Purchase', options ),
+	editCardDetails: i18n.translate( 'Edit Card Details', Object.assign( {}, options, { comment: 'Credit card' } ) ),
+	editPaymentMethod: i18n.translate( 'Edit Payment Method', options ),
+	managePurchase: i18n.translate( 'Manage Purchase', options ),
+	purchases: i18n.translate( 'Purchases', options )
+};