diff --git a/app/hub/Views/HomeView/HomeViewContainer.jsx b/app/hub/Views/HomeView/HomeViewContainer.jsx index 5603b74da..5b86df6c8 100644 --- a/app/hub/Views/HomeView/HomeViewContainer.jsx +++ b/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 (
{ this.props.handleNoThanksClick(INSIGHTS); }; - handleSignInClick = () => { this.props.handleSignInClick(INSIGHTS); }; - handleXClick = () => { this.props.handleXClick(INSIGHTS); }; render() { @@ -80,7 +78,7 @@ class InsightsPromoModal extends React.Component {
- {t('subscribe_pitch_sign_in')} + {t('subscribe_pitch_sign_in')} {t('no_thanks_turn_promos_off')}
diff --git a/app/panel/components/Panel.jsx b/app/panel/components/Panel.jsx index 6c322b7a9..22ebb0c0e 100644 --- a/app/panel/components/Panel.jsx +++ b/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 ( { if (this._insightsSubscriber()) return null; - sendMessage('promoModals.sawInsightsPromo', '', 'metrics'); + sendMessage('promoModals.sawInsightsPromo', {}); + + sendMessage('ping', 'promo_modals_show_insights'); return ( { 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 && ( -
+
{t('already_subscribed_sign_in')}
) diff --git a/app/shared-components/PlusPromoModal/PlusPromoModal.jsx b/app/shared-components/PlusPromoModal/PlusPromoModal.jsx index acb61ca8e..73b4d833f 100644 --- a/app/shared-components/PlusPromoModal/PlusPromoModal.jsx +++ b/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 (
@@ -85,7 +94,7 @@ function _renderInitialVersion(props) {
{t('fast_browsing')}
-
+
{t('select_basic')}
@@ -118,7 +127,7 @@ function _renderInitialVersion(props) { - + {t('select_plus')} @@ -126,14 +135,7 @@ function _renderInitialVersion(props) { ); -} - -/** - * 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 = {