Add insights modal that will appear if a user clicks 3x per day for 3…

… days. Users subscribed to insights will not be shown promos.

app/panel/components/Panel.jsx

@@ -12,12 +12,14 @@
  */
 
 import React from 'react';
+import { NavLink } from 'react-router-dom';
 import Header from '../containers/HeaderContainer';
 import { DynamicUIPortContext } from '../contexts/DynamicUIPortContext';
 import { sendMessage } from '../utils/msg';
 import { setTheme } from '../utils/utils';
 import { Modal } from '../../shared-components';
 import ModalExitButton from '../../shared-components/ModalExitButton/ModalExitButton';
+import { login } from '../../Account/AccountActions';
 /**
  * @class Implement base view with functionality common to all views.
  * @memberof PanelClasses
@@ -26,7 +28,7 @@ class Panel extends React.Component {
 	constructor(props) {
 		super(props);
 		this.state = {
-			showModal: true
+			hasEngagedFrequently: true
 		};
 
 		// event bindings
@@ -40,7 +42,6 @@ class Panel extends React.Component {
 	 */
 	componentDidMount() {
 		sendMessage('ping', 'engaged');
-
 		this._dynamicUIDataInitialized = false;
 		this._dynamicUIPort = chrome.runtime.connect({ name: 'dynamicUIPanelPort' });
 		this._dynamicUIPort.onMessage.addListener((msg) => {
@@ -54,6 +55,15 @@ class Panel extends React.Component {
 				this.props.actions.updatePanelData(body);
 			}
 		});
+
+		chrome.runtime.onMessage.addListener((request) => {
+			if (request.name === 'hasEngagedFrequently') {
+				this.setState({
+					...this.state,
+					hasEngagedFrequently: true
+				});
+			}
+		});
 	}
 
 	/**
@@ -63,75 +73,38 @@ class Panel extends React.Component {
 		this._dynamicUIPort.disconnect();
 	}
 
-	/**
-	* Function to handle clicking yes on the Modal
-	*/
-	_answerModalYes = () => {
-		this._toggleModal();
-	}
-
 	/**
 	* Function to toggle the Modal
 	*/
-	_toggleModal = () => {
-		const { showModal } = this.state;
+	toggleModal = () => {
+		const { hasEngagedFrequently } = this.state;
 		this.setState({
-			showModal: !showModal,
+			hasEngagedFrequently: !hasEngagedFrequently
 		});
 	}
 
-	_renderModalChildren() {
-		return (
-			<div className="InsightsModal__content flex-container flex-dir-column align-middle">
-				<ModalExitButton exitModal={this._toggleModal} className="InsightsModal__exitButton" hrefExit="Test" textExit="" />
-				<div className="InsightsModal__image" />
-				<div className="InsightsModal__header">
-					Try Ghostery Insights
-				</div>
-				<div className="InsightsModal__description">
-					Speed up and clean up digital user experience with our professional tag analytics tool.
-				</div>
-				<div className="flex-container">
-					<div className="flex-container flex-dir-column InsightsModal__feature-column-1">
-						<div className="flex-container align-middle">
-							<span className="InsightsModal__checkedCircleIcon" />
-							<div className="InsightsModal__featureText">
-								Audit marketing tags on a page
-							</div>
-						</div>
-						<div className="flex-container align-middle">
-							<span className="InsightsModal__checkedCircleIcon" />
-							<span className="InsightsModal__featureText">
-								Trace sources of poor performance
-							</span>
-						</div>
-					</div>
-					<div className="InsightsModal__feature-column-2 flex-container flex-dir-column">
-						<div className="flex-container align-middle">
-							<span className="InsightsModal__checkedCircleIcon" />
-							<span className="InsightsModal__featureText">
-								Watch pings fire in real-time
-							</span>
-						</div>
-						<div className="flex-container align-middle">
-							<span className="InsightsModal__checkedCircleIcon" />
-							<span className="InsightsModal__featureText">
-								Explore global digital trends
-							</span>
-						</div>
-					</div>
-				</div>
-				<div className="InsightsModal__callToActionContainer flex-container flex-dir-column">
-					<button type="button" className="btn InsightsModal__callToAction align-self-middle">
-						<span className="InsightsModal__callToActionText">CTA TEXT</span>
-					</button>
-					<div className="InsightsModal__otherOptionsContainer flex-container align-justify">
-						<a className="InsightsModal__link">Already an Insights subscriber?</a>
-						<a onClick={this._toggleModal} className="InsightsModal__link">No thanks, maybe later</a>
-					</div>
-				</div>
-			</div>
-		);
+	generateModal = () => {
+		const { loggedIn, user } = this.props;
+		const { hasEngagedFrequently } = this.state;
+		if (!loggedIn && hasEngagedFrequently) {
+			return true;
+		}
+		return hasEngagedFrequently && loggedIn && !user.scopes.includes('subscriptions:insights');
+	}
+
+	clickSignIn = () => {
+		this.props.history.push('/login');
+		this.setState({ hasEngagedFrequently: false });
+	}
+
+	/**
+	 * Reload the current tab
+	 * @param  {Object} event
+	 * @todo  Why do we need explicit argument here?
+	 */
+	clickReloadBanner() {
+		sendMessage('reloadTab', { tab_id: +this.props.tab_id });
+		window.close();
 	}
 
 	/**
@@ -156,16 +129,6 @@ class Panel extends React.Component {
 		});
 	}
 
-	/**
-	 * Reload the current tab
-	 * @param  {Object} event
-	 * @todo  Why do we need explicit argument here?
-	 */
-	clickReloadBanner() {
-		sendMessage('reloadTab', { tab_id: +this.props.tab_id });
-		window.close();
-	}
-
 	/**
 	 * Filter trackers when clicking on compatibility/slow
 	 * tracker notifications and trigger appropriate action.
@@ -187,12 +150,12 @@ class Panel extends React.Component {
 
 		this.closeNotification();
 	}
-
 	/**
 	 * Dynamic UI data port first payload handling
 	 * Called once, when we get the first message from the background through the port
 	 * @param	{Object}	payload		the body of the message
 	 */
+
 	_initializeData(payload) {
 		this._dynamicUIDataInitialized = true;
 
@@ -270,6 +233,60 @@ class Panel extends React.Component {
 		return false;
 	}
 
+	renderModalChildren() {
+		return (
+			<div className="InsightsModal__content flex-container flex-dir-column align-middle">
+				<ModalExitButton exitModal={this.toggleModal} className="InsightsModal__exitButton" hrefExit="Test" textExit="" />
+				<div className="InsightsModal__image" />
+				<div className="InsightsModal__header">
+					Try Ghostery Insights
+				</div>
+				<div className="InsightsModal__description">
+					Speed up and clean up digital user experience with our professional tag analytics tool.
+				</div>
+				<div className="flex-container">
+					<div className="flex-container flex-dir-column InsightsModal__feature-column-1">
+						<div className="flex-container align-middle">
+							<span className="InsightsModal__checkedCircleIcon" />
+							<div className="InsightsModal__featureText">
+								Audit marketing tags on a page
+							</div>
+						</div>
+						<div className="flex-container align-middle">
+							<span className="InsightsModal__checkedCircleIcon" />
+							<span className="InsightsModal__featureText">
+								Trace sources of poor performance
+							</span>
+						</div>
+					</div>
+					<div className="InsightsModal__feature-column-2 flex-container flex-dir-column">
+						<div className="flex-container align-middle">
+							<span className="InsightsModal__checkedCircleIcon" />
+							<span className="InsightsModal__featureText">
+								Watch pings fire in real-time
+							</span>
+						</div>
+						<div className="flex-container align-middle">
+							<span className="InsightsModal__checkedCircleIcon" />
+							<span className="InsightsModal__featureText">
+								Explore global digital trends
+							</span>
+						</div>
+					</div>
+				</div>
+				<div className="InsightsModal__callToActionContainer flex-container flex-dir-column">
+					<a href="https://www.ghostery.com/insights/" target="_blank" rel="noopener noreferrer" className="btn InsightsModal__callToAction align-self-middle">
+						<span className="InsightsModal__callToActionText flex-container align-center">Try for free</span>
+					</a>
+					<div className="InsightsModal__otherOptionsContainer flex-container align-justify">
+						<span onClick={this.clickSignIn} className="InsightsModal__link">Already a subscriber? Sign in</span>
+						<span onClick={this.toggleModal} className="InsightsModal__link">No thanks, maybe later</span>
+					</div>
+				</div>
+			</div>
+		);
+	}
+
 	/**
 	 * React's required render function. Returns JSX
 	 * @return {JSX} JSX for rendering the Panel
@@ -280,7 +297,6 @@ class Panel extends React.Component {
 			return null;
 		}
 
-		const { showModal } = this.state;
 		const notificationText = this.props.notificationShown && this.renderNotification();
 
 		return (
@@ -298,8 +314,8 @@ class Panel extends React.Component {
 					</div>
 				</div>
 				<Header />
-				<Modal show={showModal}>
-					{this._renderModalChildren()}
+				<Modal show={this.generateModal()}>
+					{this.renderModalChildren()}
 				</Modal>
 				<DynamicUIPortContext.Provider value={this._dynamicUIPort}>
 					{ this.props.children }

app/panel/containers/PanelContainer.js

@@ -27,10 +27,10 @@ import { updateBlockingData } from '../actions/BlockingActions';
  * @todo  We are not using ownProps, so we better not specify it explicitly,
  * in this case it won't be passed by React (see https://github.com/reactjs/react-redux/blob/master/docs/api.md).
  */
-const mapStateToProps = state => Object.assign({}, state.panel, state.drawer, {
+const mapStateToProps = state => Object.assign({}, state.panel, state.drawer, state.account, {
 	paused_blocking: state.summary.paused_blocking,
 	sitePolicy: state.summary.sitePolicy,
-	trackerCounts: state.summary.trackerCounts,
+	trackerCounts: state.summary.trackerCounts
 });
 /**
  * Bind Panel view component action creators using Redux's bindActionCreators

app/scss/partials/_insights_modal.scss

@@ -87,11 +87,18 @@
 	font-family: 'Roboto Condensed';
 	letter-spacing: .5px;
 	color: #FFFFFF;
+	line-height: 36px;
 }
 .InsightsModal__link {
 	font-family: 'Roboto';
 	font-size: 15px;
 	color: #4a4a4a;
+	&:hover {
+		cursor: pointer;
+		color: $ghosty-blue;
+		text-decoration: underline;
+		text-decoration-color: $link-blue;
+	}
 
 }
 .InsightsModal__otherOptionsContainer {

src/classes/ConfData.js

@@ -115,6 +115,7 @@ class ConfData {
 			_initProperty('hide_alert_trusted', false);
 			_initProperty('ignore_first_party', true);
 			_initProperty('import_callout_dismissed', true);
+			_initProperty('insights_promo_modal_last_seen', 0);
 			_initProperty('install_random_number', 0);
 			_initProperty('install_date', 0);
 			_initProperty('is_expanded', false);

src/classes/Metrics.js

@@ -16,6 +16,8 @@ import conf from './Conf';
 import { log, prefsSet, prefsGet } from '../utils/common';
 import { getActiveTab, processUrlQuery } from '../utils/utils';
 import rewards from './Rewards';
+import { sendMessage } from '../../app/panel/utils/msg';
+// import getUserSubscriptionData from './Account';
 
 // CONSTANTS
 const FREQUENCIES = { // in milliseconds
@@ -209,6 +211,7 @@ class Metrics {
 				this._recordActive();
 				break;
 			case 'engaged':
+				this._recordEngagedWithRepeats();
 				this._recordEngaged();
 				break;
 
@@ -748,19 +751,68 @@ class Metrics {
 	 */
 	_recordEngaged() {
 		const engaged_daily_velocity = conf.metrics.engaged_daily_velocity || [];
-		const today = Math.floor(Number(new Date().getTime()) / 86400000);
+		const today = Math.floor(Number(new Date().getTime()) / 86400000); // Today's time
 		engaged_daily_velocity.sort();
 		if (!engaged_daily_velocity.includes(today)) {
 			engaged_daily_velocity.push(today);
 			if (engaged_daily_velocity.length > 7) {
 				engaged_daily_velocity.shift();
 			}
 		}
-		conf.metrics.engaged_daily_velocity = engaged_daily_velocity;
 
+		conf.metrics.engaged_daily_velocity = engaged_daily_velocity;
 		this._sendReq('engaged', ['daily', 'weekly', 'monthly']);
 	}
 
+	/**
+	 * Record Engaged event multiple times in a day
+	 * TODO: Save engaged_daily_velocity_with_repeats to chrome extension storage.
+	 * Current Result: engaged_daily_velocity_with_repeats is saved inside the chrome extension storage, but always is an array with 1 element (today).
+	 * 				   This suggests that conf.metrics.engaged_daily_velocity_with_repeats is an empty array in the beginning, but console.logs are showing correct logic.
+	 * What I have tried: JSON.stringifying the object, using ES6 spread instead of the push since setting an array directly seems to work, checking to see if conf.metrics.engaged_daily_velocity_with_repeats is undefined
+	 * @private
+	 */
+	_recordEngagedWithRepeats() {
+		const engaged_daily_velocity_with_repeats = conf.metrics.engaged_daily_velocity_with_repeats || [];
+		console.log('Accessing engaged_daily_velocity_with_repeats: ', engaged_daily_velocity_with_repeats);
+		const today = Math.floor(Number(new Date().getTime()) / 86400000); // Today's time
+		engaged_daily_velocity_with_repeats.push(today);
+		conf.metrics.engaged_daily_velocity_with_repeats = engaged_daily_velocity_with_repeats;
+		console.log('Accessing engaged_daily_velocity_with_repeats after pushing today: ', engaged_daily_velocity_with_repeats);
+		if (this._hasEngagedFrequently()) {
+			sendMessage('hasEngagedFrequently', '', 'metrics');
+		}
+	}
+
+	/**
+	* Toggle the insights promotion if a user has opened the panel 3 times per day for at least 3 days in the past 7 days
+	* @private
+	*/
+	_hasEngagedFrequently = () => 	{
+		const today = new Date().getTime();
+		const THIRTY_DAYS = 1000 * 60 * 60 * 24 * 30;
+		const insights_promo_modal_last_seen = Number(conf.insights_promo_modal_last_seen) || null; // TODO: Add logic for plus_promotion_last_seen
+		const hasSeenPromotionInPastMonth = today - insights_promo_modal_last_seen <= THIRTY_DAYS;
+		if (!hasSeenPromotionInPastMonth) {
+			const { engaged_daily_velocity_with_repeats } = conf.metrics;
+			const pastSevenDays = Array.from(new Set(engaged_daily_velocity_with_repeats));
+			let timesPerWeek = 0;
+
+			for (let i = 0; i < pastSevenDays.length; i++) {
+				const engagementsEachDay = engaged_daily_velocity_with_repeats.filter(day => day === pastSevenDays[i]).length;
+				if (engagementsEachDay >= 3) {
+					timesPerWeek++;
+				}
+			}
+
+			if (timesPerWeek >= 3) {
+				conf.insights_promo_modal_last_seen = today;
+				return true;
+			}
+		}
+		return false;
+	}
+
 	/**
 	 * Repeat sending active request every month
 	 * if computer is continuously on.