Purchases: Add analytics for single-purchase sections in /purchases

Author: drewblaisdell

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

@@ -16,7 +16,7 @@ import paths from '../paths';
 import { isRefundable } from 'lib/purchases';
 import { cancelPrivateRegistration } from 'lib/upgrades/actions';
 import SimpleNotice from 'notices/simple-notice';
-import { goToManagePurchase, isDataLoading } from '../utils';
+import { goToManagePurchase, isDataLoading, recordPageView } from '../utils';
 
 const CancelPrivateRegistration = React.createClass( {
 	getInitialState() {
@@ -25,6 +25,14 @@ const CancelPrivateRegistration = React.createClass( {
 		};
 	},
 
+	componentWillMount() {
+		recordPageView( 'cancel_private_registration', this.props );
+	},
+
+	componentWillReceiveProps( nextProps ) {
+		recordPageView( 'cancel_private_registration', this.props, nextProps );
+	},
+
 	cancel() {
 		const { domain, id } = this.props.selectedPurchase.data;
 

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

@@ -17,14 +17,22 @@ import HeaderCake from 'components/header-cake';
 import Main from 'components/main';
 import paths from '../paths';
 import { getName, isCancelable } from 'lib/purchases';
-import { getPurchase, goToManagePurchase, isDataLoading } from '../utils';
+import { getPurchase, goToManagePurchase, isDataLoading, recordPageView } from '../utils';
 
 const CancelPurchase = React.createClass( {
 	propTypes: {
 		selectedPurchase: React.PropTypes.object.isRequired,
 		selectedSite: React.PropTypes.object
 	},
 
+	componentWillMount() {
+		recordPageView( 'cancel_purchase', this.props );
+	},
+
+	componentWillReceiveProps( nextProps ) {
+		recordPageView( 'cancel_purchase', this.props, nextProps );
+	},
+
 	componentDidMount() {
 		this.ensurePageCanLoad();
 	},

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

@@ -15,14 +15,22 @@ import HeaderCake from 'components/header-cake';
 import Main from 'components/main';
 import notices from 'notices';
 import paths from 'me/purchases/paths';
-import { getPurchase, goToManagePurchase } from '../utils';
+import { getPurchase, goToManagePurchase, recordPageView } from '../utils';
 
 const ConfirmCancelPurchase = React.createClass( {
 	propTypes: {
 		selectedPurchase: React.PropTypes.object,
 		selectedSite: React.PropTypes.object
 	},
 
+	componentWillMount() {
+		recordPageView( 'confirm_cancel_purchase', this.props );
+	},
+
+	componentWillReceiveProps( nextProps ) {
+		recordPageView( 'confirm_cancel_purchase', this.props, nextProps );
+	},
+
 	componentDidMount() {
 		if ( ! this.props.selectedPurchase.hasLoadedFromServer || ! this.props.selectedSite ) {
 			return;

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

@@ -45,7 +45,7 @@ import {
 	showCreditCardExpiringWarning,
 	showEditPaymentDetails
 } from 'lib/purchases';
-import { getPurchase, goToList, isDataLoading } from '../utils';
+import { getPurchase, goToList, isDataLoading, recordPageView } from '../utils';
 
 const ManagePurchase = React.createClass( {
 	propTypes: {
@@ -55,6 +55,14 @@ const ManagePurchase = React.createClass( {
 		destinationType: React.PropTypes.string
 	},
 
+	componentWillMount() {
+		recordPageView( 'manage', this.props );
+	},
+
+	componentWillReceiveProps( nextProps ) {
+		recordPageView( 'manage', this.props, nextProps );
+	},
+
 	isDataFetchingAfterRenewal() {
 		return 'thank-you' === this.props.destinationType && this.props.selectedPurchase.isFetching;
 	},

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

@@ -26,7 +26,7 @@ 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 } from 'me/purchases/utils';
+import { getPurchase, goToManagePurchase, isDataLoading, recordPageView } from 'me/purchases/utils';
 
 const wpcom = wpcomFactory.undocumented();
 
@@ -55,6 +55,8 @@ const EditCardDetails = React.createClass( {
 	],
 
 	componentWillReceiveProps( nextProps ) {
+		recordPageView( 'edit_card_details', this.props, nextProps );
+
 		// Updates the form once with the stored credit card data as soon as they are available
 		if ( nextProps.card && ( ! this.props.card || ( nextProps.card.id !== this.props.card.id ) ) ) {
 			this.setState( {
@@ -77,6 +79,8 @@ const EditCardDetails = React.createClass( {
 	},
 
 	componentWillMount() {
+		recordPageView( 'edit_card_details', this.props );
+
 		const options = {
 			validatorFunction: this.validate,
 			onNewState: this.setFormState

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

@@ -11,14 +11,22 @@ import EditPaymentMethodCreditCard from './credit-card';
 import HeaderCake from 'components/header-cake';
 import { isPaidWithCreditCard, isPaidWithPaypal } from 'lib/purchases';
 import Main from 'components/main';
-import { getPurchase, goToManagePurchase, isDataLoading } from 'me/purchases/utils';
+import { getPurchase, goToManagePurchase, isDataLoading, recordPageView } from 'me/purchases/utils';
 
 const EditPaymentMethod = React.createClass( {
 	propTypes: {
 		selectedPurchase: React.PropTypes.object.isRequired,
 		selectedSite: React.PropTypes.object.isRequired
 	},
 
+	componentWillMount() {
+		recordPageView( 'edit_payment_method', this.props );
+	},
+
+	componentWillReceiveProps( nextProps ) {
+		recordPageView( 'edit_payment_method', this.props, nextProps );
+	},
+
 	render() {
 		if ( isDataLoading( this.props ) ) {
 			return (

client/me/purchases/utils.js

@@ -6,6 +6,7 @@ import page from 'page';
 /**
  * Internal dependencies
  */
+import analytics from 'analytics';
 import paths from './paths';
 
 function getPurchase( props ) {
@@ -32,10 +33,27 @@ function isDataLoading( props ) {
 	return ( ! props.selectedSite || ! props.selectedPurchase.hasLoadedFromServer );
 }
 
+function recordPageView( trackingSlug, props, nextProps = null ) {
+	if ( isDataLoading( nextProps || props ) ) {
+		return null;
+	}
+
+	if ( nextProps &&
+		( props.selectedPurchase.hasLoadedFromServer || ! nextProps.selectedPurchase.hasLoadedFromServer ) ) {
+		// only record the page view the first time the purchase loads from the server
+		return null;
+	}
+
+	const { productSlug } = getPurchase( nextProps || props );
+
+	analytics.tracks.recordEvent( `calypso_${ trackingSlug }_purchase_view`, { product_slug: productSlug } );
+}
+
 export {
 	getPurchase,
 	goToList,
 	goToEditCardDetails,
 	goToManagePurchase,
-	isDataLoading
+	isDataLoading,
+	recordPageView
 }