From 51a9333b791d2e58c78504da9b15d5cfde531536 Mon Sep 17 00:00:00 2001 From: wlycdgr Date: Mon, 28 Oct 2019 13:07:49 -0400 Subject: [PATCH 1/2] Add promo modal metrics pings as per GH-1775 --- app/hub/Views/HomeView/HomeViewContainer.jsx | 15 ++++++-- app/panel/components/Panel.jsx | 36 +++++++++++++++---- .../PlusPromoModal/PlusPromoModal.jsx | 28 ++++++++------- 3 files changed, 56 insertions(+), 23 deletions(-) diff --git a/app/hub/Views/HomeView/HomeViewContainer.jsx b/app/hub/Views/HomeView/HomeViewContainer.jsx index 5603b74da..3d7aeff5a 100644 --- a/app/hub/Views/HomeView/HomeViewContainer.jsx +++ b/app/hub/Views/HomeView/HomeViewContainer.jsx @@ -64,10 +64,12 @@ class HomeViewContainer extends Component { // 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'); } /** @@ -77,10 +79,12 @@ class HomeViewContainer extends Component { // 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 +107,15 @@ class HomeViewContainer extends Component { isPlus, }; + const showPromoModal = !isPlus && !plus_promo_modal_shown; + if (showPromoModal) { + sendMessage('ping', 'promo_modals_show_plus_choice_hub'); + } + return (
{ - // 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) => { @@ -211,24 +217,36 @@ class Panel extends React.Component { }); }; - _handlePromoSelectBasicClick = () => { - // TODO send metrics ping + _handlePromoSelectBasicClick = (location) => { this.props.actions.togglePromoModal(); + + sendMessage('ping', 'promo_modals_select_basic_panel'); }; - _handlePromoSelectPlusClick = () => { - // TODO send metrics ping + _handlePromoSelectPlusClick = (location) => { 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 ( { + 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 = { From 8f710861969c5e2aa742acb1e9bbe89b5e5bd01e Mon Sep 17 00:00:00 2001 From: wlycdgr Date: Mon, 28 Oct 2019 16:33:25 -0400 Subject: [PATCH 2/2] Remove some unused arguments and imports and outdated comments --- app/hub/Views/HomeView/HomeViewContainer.jsx | 2 -- app/panel/components/InsightsPromoModal.jsx | 4 +--- app/panel/components/Panel.jsx | 10 +++++----- app/panel/components/PlusUpgradePromoModal.jsx | 4 +--- 4 files changed, 7 insertions(+), 13 deletions(-) diff --git a/app/hub/Views/HomeView/HomeViewContainer.jsx b/app/hub/Views/HomeView/HomeViewContainer.jsx index 3d7aeff5a..5b86df6c8 100644 --- a/app/hub/Views/HomeView/HomeViewContainer.jsx +++ b/app/hub/Views/HomeView/HomeViewContainer.jsx @@ -61,7 +61,6 @@ 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 @@ -76,7 +75,6 @@ class HomeViewContainer extends Component { * @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 diff --git a/app/panel/components/InsightsPromoModal.jsx b/app/panel/components/InsightsPromoModal.jsx index 98a6b9dcf..7bb4d6c98 100644 --- a/app/panel/components/InsightsPromoModal.jsx +++ b/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 {
- {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 80e809714..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'; @@ -209,7 +209,7 @@ class Panel extends React.Component { } }; - _handlePromoSignInClick = (modal) => { + _handlePromoSignInClick = () => { // TODO metrics ping this.props.actions.togglePromoModal(); history.push({ @@ -217,13 +217,13 @@ class Panel extends React.Component { }); }; - _handlePromoSelectBasicClick = (location) => { + _handlePromoSelectBasicClick = () => { this.props.actions.togglePromoModal(); sendMessage('ping', 'promo_modals_select_basic_panel'); }; - _handlePromoSelectPlusClick = (location) => { + _handlePromoSelectPlusClick = () => { this.props.actions.togglePromoModal(); sendMessage('ping', 'promo_modals_select_plus_panel'); @@ -293,7 +293,7 @@ class Panel extends React.Component { _renderInsightsPromoModal = () => { if (this._insightsSubscriber()) return null; - sendMessage('promoModals.sawInsightsPromo', '', 'metrics'); + sendMessage('promoModals.sawInsightsPromo', {}); sendMessage('ping', 'promo_modals_show_insights'); diff --git a/app/panel/components/PlusUpgradePromoModal.jsx b/app/panel/components/PlusUpgradePromoModal.jsx index b5973e6ed..c0e701900 100644 --- a/app/panel/components/PlusUpgradePromoModal.jsx +++ b/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 && ( -
+
{t('already_subscribed_sign_in')}
)