Gh 1775/feature/promo modal metrics pings

app/hub/Views/HomeView/HomeViewContainer.jsx

@@ -61,26 +61,28 @@ class HomeViewContainer extends Component {
 	 * @private
 	 * Function to handle clicks on Select Basic in the Plus Promo Modal
 	 */
-	// TODO send appropriate metrics ping
 	_handlePromoSelectBasicClick = () => {
 		// GH-1777
-		// we want to show the Plus Promo modal once per Hub visit - not every time the user returns to the Home view
+		// we want to show the Plus Promo modal once per Hub visit
 		this.props.actions.markPlusPromoModalShown();
 
 		sendMessage('SET_PLUS_PROMO_MODAL_SEEN', {});
+
+		sendMessage('ping', 'promo_modals_select_basic_hub');
 	}
 
 	/**
 	 * @private
 	 * Function to handle clicks on Select Plus in the Plus Promo Modal
 	 */
-		// TODO send appropriate metrics ping
 	_handlePromoSelectPlusClick = () => {
 		// GH-1777
-		// we want to show the Plus Promo modal once per Hub visit - not every time the user returns to the Home view
+		// we want to show the Plus Promo modal once per Hub visit
 		this.props.actions.markPlusPromoModalShown();
 
 		sendMessage('SET_PLUS_PROMO_MODAL_SEEN', {});
+
+		sendMessage('ping', 'promo_modals_select_plus_hub');
 	}
 
 	_render() {
@@ -103,10 +105,15 @@ class HomeViewContainer extends Component {
 			isPlus,
 		};
 
+		const showPromoModal = !isPlus && !plus_promo_modal_shown;
+		if (showPromoModal) {
+			sendMessage('ping', 'promo_modals_show_plus_choice_hub');
+		}
+
 		return (
 			<div className="full-height">
 				<PlusPromoModal
-					show={!isPlus && !plus_promo_modal_shown}
+					show={showPromoModal}
 					location="hub"
 					handleSelectBasicClick={this._handlePromoSelectBasicClick}
 					handleSelectPlusClick={this._handlePromoSelectPlusClick}

app/panel/components/InsightsPromoModal.jsx

@@ -27,8 +27,6 @@ const CTA_LINK = globals.DEBUG ? 'https://checkout.ghosterystage.com/insights' :
 class InsightsPromoModal extends React.Component {
 	handleNoThanksClick = () => { this.props.handleNoThanksClick(INSIGHTS); };
 
-	handleSignInClick = () => { this.props.handleSignInClick(INSIGHTS); };
-
 	handleXClick = () => { this.props.handleXClick(INSIGHTS); };
 
 	render() {
@@ -80,7 +78,7 @@ class InsightsPromoModal extends React.Component {
 							</PanelToTabLink>
 						</div>
 						<div className="InsightsModal__other-options-container flex-container align-justify">
-							<span onClick={this.handleSignInClick} className="InsightsModal__link">{t('subscribe_pitch_sign_in')}</span>
+							<span onClick={this.props.handleSignInClick} className="InsightsModal__link">{t('subscribe_pitch_sign_in')}</span>
 							<span onClick={this.handleNoThanksClick} className="InsightsModal__link">{t('no_thanks_turn_promos_off')}</span>
 						</div>
 					</div>

app/panel/components/Panel.jsx

@@ -13,7 +13,7 @@
 
 import React from 'react';
 import Header from '../containers/HeaderContainer';
-import { PlusPromoModal, Modal } from '../../shared-components';
+import { PlusPromoModal } from '../../shared-components';
 import InsightsPromoModal from './InsightsPromoModal';
 import PlusUpgradePromoModal from './PlusUpgradePromoModal';
 import { DynamicUIPortContext } from '../contexts/DynamicUIPortContext';
@@ -198,12 +198,18 @@ class Panel extends React.Component {
 	}
 
 	_handlePromoNoThanksClick = (modal) => {
-		// TODO metrics ping
 		this.props.actions.togglePromoModal();
+
 		sendMessage('promoModals.turnOffPromos', {});
+
+		if (modal === 'insights') {
+			sendMessage('ping', 'promo_modals_decline_insights_upgrade');
+		} else if (modal === 'plus_upgrade') {
+			sendMessage('ping', 'promo_modals_decline_plus_upgrade');
+		}
 	};
 
-	_handlePromoSignInClick = (modal) => {
+	_handlePromoSignInClick = () => {
 		// TODO metrics ping
 		this.props.actions.togglePromoModal();
 		history.push({
@@ -212,23 +218,35 @@ class Panel extends React.Component {
 	};
 
 	_handlePromoSelectBasicClick = () => {
-		// TODO send metrics ping
 		this.props.actions.togglePromoModal();
+
+		sendMessage('ping', 'promo_modals_select_basic_panel');
 	};
 
 	_handlePromoSelectPlusClick = () => {
-		// TODO send metrics ping
 		this.props.actions.togglePromoModal();
+
+		sendMessage('ping', 'promo_modals_select_plus_panel');
 	};
 
 	_handlePromoSubscribeClick = (modal) => {
-		// TODO send metrics ping
 		this.props.actions.togglePromoModal();
+
+		if (modal === 'insights') {
+			sendMessage('ping', 'promo_modals_insights_upgrade_cta');
+		} else if (modal === 'plus_upgrade') {
+			sendMessage('ping', 'promo_modals_plus_upgrade_cta');
+		}
 	};
 
 	_handlePromoXClick = (modal) => {
-		// TODO send metrics ping
 		this.props.actions.togglePromoModal();
+
+		if (modal === 'insights') {
+			sendMessage('ping', 'promo_modals_decline_insights_upgrade');
+		} else if (modal === 'plus_upgrade') {
+			sendMessage('ping', 'promo_modals_decline_plus_upgrade');
+		}
 	};
 
 	_plusSubscriber = () => {
@@ -249,6 +267,7 @@ class Panel extends React.Component {
 		sendMessage('promoModals.sawPlusPromo', {});
 
 		if (this.props.promoModal === 'plus_upgrade') {
+			sendMessage('ping', 'promo_modals_show_upgrade_plus');
 			return (
 				<PlusUpgradePromoModal
 					handleNoThanksClick={this._handlePromoNoThanksClick}
@@ -260,6 +279,7 @@ class Panel extends React.Component {
 		}
 
 		// promoModal === 'plus_initial'
+		sendMessage('ping', 'promo_modals_show_plus_choice_panel');
 		return (
 			<PlusPromoModal
 				show
@@ -273,7 +293,9 @@ class Panel extends React.Component {
 	_renderInsightsPromoModal = () => {
 		if (this._insightsSubscriber()) return null;
 
-		sendMessage('promoModals.sawInsightsPromo', '', 'metrics');
+		sendMessage('promoModals.sawInsightsPromo', {});
+
+		sendMessage('ping', 'promo_modals_show_insights');
 
 		return (
 			<InsightsPromoModal

app/panel/components/PlusUpgradePromoModal.jsx

@@ -28,8 +28,6 @@ const DOMAIN = globals.DEBUG ? 'ghosterystage' : 'ghostery';
 class PlusUpgradePromoModal extends React.Component {
 	handleNoThanksClick = () => { this.props.handleNoThanksClick(PLUS_UPGRADE); }
 
-	handleSignInClick = () => { this.props.handleSignInClick(PLUS_UPGRADE); };
-
 	handleSubscribeClick = () => { this.props.handleSubscribeClick(PLUS_UPGRADE); }
 
 	handleXClick = () => { this.props.handleXClick(PLUS_UPGRADE); }
@@ -69,7 +67,7 @@ class PlusUpgradePromoModal extends React.Component {
 						{
 							!loggedIn &&
 							(
-								<div onClick={this.handleSignInClick} className="PlusPromoModal__text-link">
+								<div onClick={this.props.handleSignInClick} className="PlusPromoModal__text-link">
 									{t('already_subscribed_sign_in')}
 								</div>
 							)

app/shared-components/PlusPromoModal/PlusPromoModal.jsx

@@ -20,8 +20,18 @@ import Modal from '../Modal/Modal';
 
 const DOMAIN = globals.DEBUG ? 'ghosterystage' : 'ghostery';
 
-function _renderInitialVersion(props) {
-	const { show, location, clickHandler } = props;
+/**
+ * A functional React component for a Plus Promo Modal that may be displayed in the Hub and/or Panel
+ * @return {JSX} JSX for rendering a Plus Promo Modal
+ * @memberof SharedComponents
+ */
+const PlusPromoModal = (props) => {
+	const {
+		show,
+		location,
+		handleSelectBasicClick,
+		handleSelectPlusClick
+	} = props;
 
 	const isInHub = location === 'hub';
 
@@ -55,7 +65,6 @@ function _renderInitialVersion(props) {
 		locationClassName
 	);
 
-	// TODO refactor for clarity & concision alongside implementing _renderUpgradeVersion for GH-1813
 	return (
 		<Modal show={show}>
 			<div className={contentClassNames}>
@@ -85,7 +94,7 @@ function _renderInitialVersion(props) {
 								<div className="PlusPromoModal__option-description-item">{t('fast_browsing')}</div>
 							</div>
 						</div>
-						<div className="PlusPromoModal__button basic" onClick={props.handleSelectBasicClick}>
+						<div className="PlusPromoModal__button basic" onClick={handleSelectBasicClick}>
 							<span>{t('select_basic')}</span>
 						</div>
 					</div>
@@ -118,22 +127,15 @@ function _renderInitialVersion(props) {
 								</div>
 							</div>
 						</div>
-						<a href={`https://checkout.${DOMAIN}.com/plus`} target="_blank" rel="noopener noreferrer" className="PlusPromoModal__button plus" onClick={props.handleSelectPlusClick}>
+						<a href={`https://checkout.${DOMAIN}.com/plus`} target="_blank" rel="noopener noreferrer" className="PlusPromoModal__button plus" onClick={handleSelectPlusClick}>
 							<span>{t('select_plus')}</span>
 						</a>
 					</div>
 				</div>
 			</div>
 		</Modal>
 	);
-}
-
-/**
- * A Functional React component for a Plus Promo Modal
- * @return {JSX} JSX for rendering a Plus Promo Modal
- * @memberof SharedComponents
- */
-const PlusPromoModal = props => _renderInitialVersion(props);
+};
 
 // PropTypes ensure we pass required props of the correct type
 PlusPromoModal.propTypes = {