GH-1969 Plus In App Promo & GH-1970 Telemetry

.eslintrc.js

@@ -83,6 +83,7 @@ module.exports = {
 		'react/no-access-state-in-setstate': [0], // TODO: enable this check
 		'react/no-danger': [0],
 		'react/prop-types': [0],
+		'react/jsx-fragments': [1, 'element'],
 		'react/sort-comp': [2, {
 			order: [
 				"static-variables",

_locales/en/messages.json

@@ -1802,6 +1802,9 @@
 	"subscribe_pitch": {
 		"message": "While Ghostery is free, you can choose to support us through a small subscription of $2 per month in exchange for cool perks, such as color themes, priority help service, and more. Join our mission and subscribe!"
 	},
+	"subscribe_pitch_spring": {
+		"message": "Support us and unlock a new spring theme, personal tracking insights, and other special perks by upgrading to Ghostery Plus for $2 per month."
+	},
 	"subscribe_pitch_learn_more": {
 		"message": "Learn more"
 	},
@@ -2349,6 +2352,9 @@
 		"message": "Already subscribed? Sign In",
 		"description": "Character limit (including spaces and punctuation): 28."
 	},
+	"already_subscribed_to_plus_sign_in": {
+		"message": "Already a plus subscriber?"
+	},
 	"promos_turned_off_notification": {
 		"message": "Promos turned off. You can turn them back on in",
 		"description": "translation must take into account that 'Settings' is appended to this string"
@@ -2362,8 +2368,11 @@
 	"seven_day_free_trial": {
 		"message": "7 Day Free Trial ($14/mo)"
 	},
-	"full_coverage_protection_promise": {
-		"message": "Get full-coverage protection across all browsers & apps on your device"
+	"spring_has_sprung": {
+		"message": "Spring has sprung!"
+	},
+  	"full_coverage_protection_promise": {
+	  "message": "Get full-coverage protection across all browsers & apps on your device"
 	},
 	"system_wide_tracker_and_ad_blocking": {
 		"message": "System-wide tracker & ad-blocking"

app/hub/Views/HomeView/HomeViewContainer.jsx

@@ -15,11 +15,12 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import QueryString from 'query-string';
 import HomeView from './HomeView';
-import { PremiumPromoModal } from '../../../shared-components';
+import PromoModal from '../../../shared-components/PromoModal';
 import { sendMessage } from '../../utils';
 import globals from '../../../../src/classes/Globals';
 
 const DOMAIN = globals.DEBUG ? 'ghosterystage' : 'ghostery';
+const PREMIUM = 'premium';
 
 /**
  * @class Implement the Home View for the Ghostery Hub
@@ -137,7 +138,8 @@ class HomeViewContainer extends Component {
 
 		return (
 			<div className="full-height">
-				<PremiumPromoModal
+				<PromoModal
+					type={PREMIUM}
 					show={showPromoModal}
 					isPlus={isPlus}
 					location="hub"

app/panel/components/BuildingBlocks/ModalExitButton.jsx

@@ -22,19 +22,28 @@ import PropTypes from 'prop-types';
  */
 const ModalExitButton = (props) => {
 	const {
-		toggleModal
+		toggleModal,
+		border
 	} = props;
 
+	const borderClassNames = `ModalExitButton__exit flex-container align-middle ${border}`;
+
 	return (
-		<button type="button" onClick={toggleModal} className="ModalExitButton__exit flex-container align-middle">
+		<button type="button" onClick={toggleModal} className={borderClassNames}>
 			<span className="ModalExitButton__exitIcon" />
 		</button>
 	);
 };
 
 // PropTypes ensure we pass required props of the correct type
 ModalExitButton.propTypes = {
-	toggleModal: PropTypes.func.isRequired
+	toggleModal: PropTypes.func.isRequired,
+	border: PropTypes.string,
+};
+
+// Default props used in the App
+ModalExitButton.defaultProps = {
+	border: 'grey'
 };
 
 export default ModalExitButton;

app/panel/components/Panel.jsx

@@ -14,16 +14,15 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 import Header from '../containers/HeaderContainer';
-import { PremiumPromoModal } from '../../shared-components';
-import InsightsPromoModal from './InsightsPromoModal';
+import PromoModalContainer from '../../shared-components/PromoModal/PromoModalContainer';
 import { ThemeContext } from '../contexts/ThemeContext';
 import { DynamicUIPortContext } from '../contexts/DynamicUIPortContext';
 import { sendMessage } from '../utils/msg';
 import { setTheme } from '../utils/utils';
-import history from '../utils/history';
-import globals from '../../../src/classes/Globals';
 
-const DOMAIN = globals.DEBUG ? 'ghosterystage' : 'ghostery';
+const INSIGHTS = 'insights';
+const PLUS = 'plus';
+const PREMIUM = 'premium';
 
 /**
  * @class Implement base view with functionality common to all views.
@@ -196,104 +195,9 @@ class Panel extends React.Component {
 				</span>
 			);
 		}
-
 		return false;
 	}
 
-	/**
-	 * @param modal			'insights' or 'premium'
-	 * @private
-	 * Handle clicks on the link to turn off promos in the promo modals
-	 */
-	_handlePromoGoAwayClick = (modal) => {
-		this.props.actions.togglePromoModal();
-
-		sendMessage('promoModals.turnOffPromos', {});
-
-		if (modal === 'insights') {
-			sendMessage('ping', 'promo_modals_decline_insights_upgrade');
-		}
-
-		this.props.actions.showNotification({
-			classes: 'warning',
-			reload: false,
-			text: t('promos_turned_off_notification'),
-		});
-	};
-
-	/**
-	 * @private
-	 * Handle clicks on sign in links in promo modals
-	 */
-	_handlePromoSignInClick = () => {
-		this.props.actions.togglePromoModal();
-		history.push({
-			pathname: '/login',
-		});
-	};
-
-	/**
-	 * @private
-	 * Handle clicks on the download button in the Premium promo modals
-	 */
-	_handlePromoTryMidnightClick = () => {
-		this.props.actions.togglePromoModal();
-
-		const url = 'https://ghostery.com/thanks-for-downloading-midnight?utm_source=gbe&utm_campaign=in_app';
-		sendMessage('openNewTab', {
-			url,
-			become_active: true,
-		});
-	}
-
-	/**
-	 * @private
-	 * Handle clicks on the 'Get Plus' option in the Premium modals
-	 */
-	_handlePromoGetPlusClick = () => {
-		this.props.actions.togglePromoModal();
-
-		const url = `https://checkout.${DOMAIN}.com/plus?utm_source=gbe&utm_campaign=in_app`;
-		sendMessage('openNewTab', {
-			url,
-			become_active: true,
-		});
-	};
-
-	/**
-	 * @private
-	 * Handle click action when user selects Subscribe button in the Insights modal
-	 * @param  {string} modal Modal type (insights or plus)
-	 */
-	_handlePromoSubscribeClick = (modal) => {
-		this.props.actions.togglePromoModal();
-
-		let url = `https://checkout.${DOMAIN}.com/`;
-
-		if (modal === 'insights') {
-			sendMessage('ping', 'promo_modals_insights_upgrade_cta');
-			url += 'insights?utm_source=gbe&utm_campaign=in_app_upgrade';
-		}
-
-		sendMessage('openNewTab', {
-			url,
-			become_active: true,
-		});
-	};
-
-	/**
-	 * @param modal			'insights' or 'premium'
-	 * @private
-	 * Handle clicks on the 'X' close icon in promo modals
-	 */
-	_handlePromoXClick = (modal) => {
-		this.props.actions.togglePromoModal();
-
-		if (modal === 'insights') {
-			sendMessage('ping', 'promo_modals_decline_insights_upgrade');
-		}
-	};
-
 	/**
 	 * @returns {bool}
 	 * @private
@@ -340,14 +244,11 @@ class Panel extends React.Component {
 		const isPlus = this._plusSubscriber();
 
 		return (
-			<PremiumPromoModal
-				show
-				isPlus={isPlus}
+			<PromoModalContainer
+				type={PREMIUM}
 				location="panel"
-				handleGoAwayClick={this._handlePromoGoAwayClick}
-				handleGetPlusClick={this._handlePromoGetPlusClick}
-				handleTryMidnightClick={this._handlePromoTryMidnightClick}
-				handleXClick={this._handlePromoXClick}
+				isPlus={isPlus}
+				show
 			/>
 		);
 	}
@@ -361,15 +262,32 @@ class Panel extends React.Component {
 		if (this._insightsSubscriber()) return null;
 
 		sendMessage('promoModals.sawInsightsPromo', {});
-
 		sendMessage('ping', 'promo_modals_show_insights');
 
 		return (
-			<InsightsPromoModal
-				handleGoAwayClick={this._handlePromoGoAwayClick}
-				handleSignInClick={this._handlePromoSignInClick}
-				handleSubscribeClick={this._handlePromoSubscribeClick}
-				handleXClick={this._handlePromoXClick}
+			<PromoModalContainer
+				type={INSIGHTS}
+				show
+			/>
+		);
+	}
+
+	/**
+	 * @returns {null|JSX}
+	 * @private
+	 * Renders the Plus promo modal if the user is not already an  subscriber
+	 */
+	_renderPlusPromoModal = () => {
+		if (this._plusSubscriber() || this._premiumSubscriber()) { return null; }
+
+		sendMessage('promoModals.sawPlusPromo', {});
+
+		const { loggedIn } = this.props;
+		return (
+			<PromoModalContainer
+				type={PLUS}
+				loggedIn={loggedIn}
+				show
 			/>
 		);
 	}
@@ -391,6 +309,10 @@ class Panel extends React.Component {
 			return this._renderInsightsPromoModal();
 		}
 
+		if (promoModal === 'plus') {
+			return this._renderPlusPromoModal();
+		}
+
 		if (promoModal === 'premium') {
 			return this._renderPremiumPromoModal();
 		}