Purchases: Add analytics for sections in /purchases

Author: scruffian

client/components/data/purchases/edit-card-details/index.jsx

@@ -35,6 +35,12 @@ const EditCardDetailsData = React.createClass( {
 		sites: React.PropTypes.object.isRequired
 	},
 
+	getDefaultProps() {
+		return {
+			trackingSlug: 'edit_card_details'
+		};
+	},
+
 	mixins: [ observe( 'sites' ) ],
 
 	componentWillMount() {

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

@@ -13,6 +13,7 @@ import Card from 'components/card';
 import Main from 'components/main';
 import HeaderCake from 'components/header-cake';
 import paths from '../paths';
+import purchasesMixin from '../purchases-mixin';
 import { isRefundable } from 'lib/purchases';
 import { cancelPrivateRegistration } from 'lib/upgrades/actions';
 import SimpleNotice from 'notices/simple-notice';
@@ -24,12 +25,14 @@ const CancelPrivateRegistration = React.createClass( {
 		};
 	},
 
-	goToManagePurchase() {
-		const { domain, id } = this.props.selectedPurchase.data;
-
-		page( paths.managePurchase( domain, id ) );
+	getDefaultProps() {
+		return {
+			trackingSlug: 'cancel_private_registration'
+		};
 	},
 
+	mixins: [ purchasesMixin ],
+
 	cancel() {
 		const { domain, id } = this.props.selectedPurchase.data;
 
@@ -44,10 +47,6 @@ const CancelPrivateRegistration = React.createClass( {
 		} );
 	},
 
-	isDataLoading() {
-		return ( ! this.props.selectedSite || ! this.props.selectedPurchase.hasLoadedFromServer );
-	},
-
 	renderDescriptionText() {
 		const purchase = this.props.selectedPurchase.data;
 

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

@@ -25,6 +25,12 @@ const CancelPurchase = React.createClass( {
 		selectedSite: React.PropTypes.object
 	},
 
+	getDefaultProps() {
+		return {
+			trackingSlug: 'cancel'
+		};
+	},
+
 	mixins: [ purchasesMixin ],
 
 	componentDidMount() {

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

@@ -22,6 +22,12 @@ const ConfirmCancelPurchase = React.createClass( {
 		selectedSite: React.PropTypes.object
 	},
 
+	getDefaultProps() {
+		return {
+			trackingSlug: 'confirm_cancel'
+		};
+	},
+
 	mixins: [ purchasesMixin ],
 
 	componentDidMount() {

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

@@ -54,6 +54,12 @@ const ManagePurchase = React.createClass( {
 		destinationType: React.PropTypes.string
 	},
 
+	getDefaultProps() {
+		return {
+			trackingSlug: 'manage'
+		};
+	},
+
 	mixins: [ purchasesMixin ],
 
 	isDataFetchingAfterRenewal() {

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

@@ -19,6 +19,12 @@ const EditPaymentMethod = React.createClass( {
 		selectedSite: React.PropTypes.object.isRequired
 	},
 
+	getDefaultProps() {
+		return {
+			trackingSlug: 'edit_payment_method'
+		};
+	},
+
 	mixins: [ purchasesMixin ],
 
 	render() {

client/me/purchases/purchases-mixin.js

@@ -6,9 +6,45 @@ import page from 'page';
 /**
  * Internal Dependencies
  */
+import analytics from 'analytics';
 import paths from './paths';
 
 export default {
+	componentWillMount() {
+		if ( this.isDataLoading() ) {
+			return;
+		}
+
+		const purchase = this.getPurchase();
+		this.recordPageView( purchase );
+	},
+
+	componentWillReceiveProps( nextProps ) {
+		// Return if the purchases haven't loaded yet
+		if ( ! nextProps.selectedPurchase.hasLoadedFromServer ) {
+			return;
+		}
+
+		// Return if the purchases have already been loaded into the props
+		if ( this.props.selectedPurchase.data && nextProps.selectedPurchase.data.id === this.props.selectedPurchase.data.id ) {
+			return;
+		}
+
+		// We should only reach this part of the code whenever list of purchases changes
+		// which will only be once per session
+		const purchase = nextProps.selectedPurchase.data;
+		this.recordPageView( purchase );
+	},
+
+	recordPageView( purchase ) {
+		if ( this.props.trackingSlug ) {
+			analytics.tracks.recordEvent(
+				`calypso_${ this.props.trackingSlug }_purchase_view`,
+						{ product_slug: purchase.productSlug }
+			);
+		}
+	},
+
 	getPurchase() {
 		return this.props.selectedPurchase.data;
 	},