GH-1774/In-App Insights Promo (#460)

* Created modal UI

* Change feature language. Add exit button.

* 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.

* Refactor insights modal into a component. Reshow modal after prompted to log in on summary page.

* Clean up insights modal code

* Show plus promo modal on first view of Home view of each Hub session

* Stub out intro hub plus promo modal layout and implement its buttons

* Remove some unnecessary plus promo modal related CSS

* Continue adding styling for plus promo modal

* Continue styling plus promo modal

* Refactor plus promo modal CSS to improve alignment of elements

* Continue CSS work for plus promo modal

* Implement recommended gold banner in plus promo modal

* Update and tweak plus promo modal design

* Fix path bug in i18n-checker tool. Consolidate redundant entries in messages. Add check icon to plus promo modal. Modify plus promo modal css.

* Additional consolidation of redundant and unused entries in messages

* Factor plus promo modal rendering out to shared component. Implement rendering in panel. Implement display context CSS adjustments.

* Move Plus Promo modal rendering to a PlusPromoModal shared component. Begin to implement conditional panel display logic

* Create ModalPromos background class responsible for modal promo related business logic and state management

* Add local state to Panel to make sure component rerenders after user dismisses promo panel. Send record of promo interaction to background

* Make PromoModals code more robust

* Factor PlusPromoModal rendering out to helper in Panel. Extend conditional rendering logic to account for upgrade version of modal

* Mark PromoModals methods as static. Refine PlusPromoModal implementation and add debug code

* Add logic to hide plus promo modal from Insights subscribers. Cleanup and comments.

* Clean up. Finish string localization in PlusPromoModal

* Plug in insights modal into promo modal class

* GH-1777 and GH-1776 Plus Promo modals (#458)

* Show plus promo modal on first view of Home view of each Hub session

* Stub out intro hub plus promo modal layout and implement its buttons

* Remove some unnecessary plus promo modal related CSS

* Continue adding styling for plus promo modal

* Continue styling plus promo modal

* Refactor plus promo modal CSS to improve alignment of elements

* Continue CSS work for plus promo modal

* Implement recommended gold banner in plus promo modal

* Update and tweak plus promo modal design

* Fix path bug in i18n-checker tool. Consolidate redundant entries in messages. Add check icon to plus promo modal. Modify plus promo modal css.

* Additional consolidation of redundant and unused entries in messages

* Factor plus promo modal rendering out to shared component. Implement rendering in panel. Implement display context CSS adjustments.

* Move Plus Promo modal rendering to a PlusPromoModal shared component. Begin to implement conditional panel display logic

* Create ModalPromos background class responsible for modal promo related business logic and state management

* Add local state to Panel to make sure component rerenders after user dismisses promo panel. Send record of promo interaction to background

* Make PromoModals code more robust

* Factor PlusPromoModal rendering out to helper in Panel. Extend conditional rendering logic to account for upgrade version of modal

* Mark PromoModals methods as static. Refine PlusPromoModal implementation and add debug code

* Add logic to hide plus promo modal from Insights subscribers. Cleanup and comments.

* Clean up. Finish string localization in PlusPromoModal

* Pull non-shared upgrade version of plus promo modal out of shared PlusPromoModal component and into Panel to simplify

* Remove debug console statement

* Consolidate insights promo with plus promo

* GH-1814/promo toggle (#453)

* Add language and toggle for notify_promotions

* Change label name

* User can opt out of promotions

* Remove empty SCSS class

* Add newlines

* Add hover effects

* Refactor insights promo to use redux. Remove summary component code. Remove redundant scss rules.

* Refactor hasEngagedFrequently to update in recordEngaged

* Refactor recordEngaged

* Fix recordEngaged bug

* Fix font paths

* Remove unused font asset

_locales/en/messages.json

@@ -526,6 +526,27 @@
 	"panel_help_setup": {
 		"message": "Set Up Ghostery"
 	},
+	"panel_insights_audit_tags": {
+		"message": "Audit marketing tags on a page"
+	},
+	"panel_insights_promotion_explore_trends": {
+		"message": "Explore global digital trends"
+	},
+	"panel_insights_promotion_call_to_action": {
+		"message": "Try for free"
+	},
+	"panel_insights_promotion_header": {
+		"message": "Try Ghostery Insights"
+	},
+	"panel_insights_promotion_description": {
+		"message": "Speed up and clean up digital user experience with our professional tag analytics tool."
+	},
+	"panel_insights_promotion_trace_poor_performance": {
+		"message": "Trace sources of poor performance"
+	},
+	"panel_insights_promotion_watch_pings": {
+		"message": "Watch pings fire in real-time"
+	},
 	"panel_about_panel_header": {
 		"message": "About Ghostery Browser Extension"
 	},
@@ -1786,9 +1807,18 @@
 	"subscribe_pitch_learn_more": {
 		"message": "Learn more"
 	},
+	"subscribe_pitch_button_label": {
+		"message": "Get Ghostery Plus!"
+	},
+	"subscribe_pitch_no_thanks": {
+		"message": "No thanks, maybe later"
+	},
 	"subscribe_pitch_sign_here": {
 		"message": "Already a subscriber? Sign in here"
 	},
+	"subscribe_pitch_sign_in": {
+		"message": "Already subscribed? Sign in"
+	},
 	"subscription_midnight_theme": {
 		"message": "Midnight Theme"
 	},

app/images/panel/checked-circle-icon.svg

@@ -0,0 +1 @@
+<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M9 0a9 9 0 110 18A9 9 0 019 0zm3.345 5.529l-4.188 4.665-2.665-2.09-.925 1.2 3.77 2.956 5.125-5.714-1.117-1.017z" fill="#167AA4" fill-rule="evenodd"/></svg>

app/images/panel/insights-ribbon.svg

@@ -0,0 +1 @@
+<svg width="177" height="94" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="41.732%" y1="46.196%" x2="100%" y2="99.741%" id="a"><stop stop-color="#070E18" offset="0%"/><stop stop-color="#1678A0" offset="100%"/></linearGradient><linearGradient x1="41.732%" y1="48.92%" x2="100%" y2="64.123%" id="b"><stop stop-color="#070E18" offset="0%"/><stop stop-color="#1678A0" offset="100%"/></linearGradient><linearGradient x1="41.732%" y1="48.088%" x2="100%" y2="74.998%" id="c"><stop stop-color="#070E18" offset="0%"/><stop stop-color="#1678A0" offset="100%"/></linearGradient><linearGradient x1="42.074%" y1="46.176%" x2="97.932%" y2="100%" id="d"><stop stop-color="#070E18" offset="0%"/><stop stop-color="#1678A0" offset="100%"/></linearGradient><linearGradient x1="20.746%" y1="11.865%" x2="89.855%" y2="93.168%" id="e"><stop stop-color="#2B5993" offset="0%"/><stop stop-color="#00AEF0" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="M137.254 85.351l-.647.646.647.647a.5.5 0 11-.708.706l-.647-.646-.647.646a.5.5 0 11-.707-.706l.647-.647-.647-.646a.5.5 0 01.707-.707l.647.647.647-.647a.5.5 0 01.708.707z" fill="url(#a)"/><path d="M158.953 46.619a.501.501 0 100-1.003 5.019 5.019 0 01-5.013-5.013.501.501 0 00-1.002 0 5.019 5.019 0 01-4.977 5.013h-.036a.501.501 0 100 1.003 5.019 5.019 0 015.013 5.012.501.501 0 001.002 0 5.019 5.019 0 014.977-5.012h.036zm-5.411 2.711a6.053 6.053 0 00-3.11-3.11c1.39-.61 2.5-1.72 3.11-3.11.61 1.39 1.72 2.5 3.11 3.11-1.39.61-2.5 1.72-3.11 3.11zM18.806 83.652a8.66 8.66 0 01-8.651-8.65.501.501 0 00-1.003 0 8.66 8.66 0 01-8.65 8.65.501.501 0 100 1.002 8.66 8.66 0 018.65 8.65.501.501 0 001.003 0 8.66 8.66 0 018.65-8.65.501.501 0 100-1.002zm-9.218 6.515a9.698 9.698 0 00-6.079-6.08 9.698 9.698 0 006.08-6.078 9.698 9.698 0 006.079 6.079 9.698 9.698 0 00-6.08 6.079zM118.85 19v2.005h2.006a.501.501 0 110 1.003h-2.006v2.005a.501.501 0 01-1.002 0v-2.005h-2.005a.501.501 0 110-1.003h2.005v-2.005a.501.501 0 011.002 0zm-74.543.694l1.15-1.15-1.15-1.15a.501.501 0 01.709-.708l1.15 1.15 1.149-1.15a.501.501 0 01.709.709l-1.15 1.15 1.15 1.149a.501.501 0 11-.71.708l-1.149-1.149-1.15 1.15a.501.501 0 11-.708-.71zm-41.4 43.317l-.649.648.649.648a.501.501 0 11-.71.709l-.647-.648-.649.648a.501.501 0 11-.708-.709l.648-.648-.648-.648a.501.501 0 01.708-.709l.649.648.648-.648a.501.501 0 01.709.709zm173.449 16.04l-.648.649.648.648a.501.501 0 11-.709.709l-.648-.648-.648.648a.501.501 0 11-.709-.709l.648-.648-.648-.648a.501.501 0 01.709-.71l.648.65.648-.65a.501.501 0 01.709.71zM43.303 88.36l-.648-.648-.648.648a.501.501 0 11-.709-.71l.648-.647-.648-.648a.501.501 0 01.709-.71l.648.649.648-.648a.501.501 0 01.71.709l-.649.648.648.648a.501.501 0 11-.709.709zM8.563 35.59v4.01h4.011a.501.501 0 110 1.002h-4.01v4.01a.501.501 0 01-1.003 0v-4.01h-4.01a.501.501 0 110-1.002h4.01v-4.01a.501.501 0 011.003 0zM141.91 3.008a.501.501 0 01-.501.5h-2.005v2.006a.501.501 0 01-1.003 0V3.509h-2.005a.501.501 0 110-1.003h2.005V.501a.501.501 0 011.003 0v2.005h2.005a.501.501 0 01.501.502z" fill="url(#b)" fill-rule="nonzero"/><g fill-rule="nonzero"><path d="M106.777 18.884H85.743c-.204-1.486-.618-2.95-1.525-4.232-1.665-2.36-4.367-3.31-6.752-4.148-1.435-.504-2.79-.981-3.704-1.666-.893-.67-1.739-1.841-2.636-3.08-1.515-2.097-3.231-4.472-5.959-5.385-2.626-.878-5.319-.026-7.693.727-1.486.47-2.889.915-4.085.915-1.194 0-2.598-.444-4.084-.915-2.375-.753-5.07-1.605-7.693-.728-2.729.914-4.448 3.29-5.963 5.387-.894 1.238-1.74 2.408-2.632 3.078-.914.685-2.269 1.162-3.704 1.666-2.384.837-5.088 1.788-6.752 4.146-.907 1.283-1.32 2.748-1.525 4.233H0L6.872 37.75 0 56.615h21.035c.203 1.486.618 2.949 1.523 4.233 1.666 2.359 4.369 3.309 6.752 4.147 1.436.505 2.792.98 3.705 1.666.891.67 1.737 1.84 2.633 3.079 1.515 2.096 3.234 4.473 5.963 5.387 2.62.877 5.316.024 7.693-.727 1.486-.47 2.888-.915 4.084-.915 1.196 0 2.599.444 4.085.915 1.659.526 3.472 1.1 5.308 1.1.794 0 1.592-.108 2.384-.373 2.728-.913 4.445-3.288 5.96-5.385.896-1.239 1.742-2.41 2.636-3.08.914-.685 2.269-1.162 3.704-1.666 2.385-.838 5.088-1.788 6.752-4.148.907-1.284 1.32-2.747 1.523-4.232h21.037L99.905 37.75l6.872-18.866zM6.873 51.707l5.085-13.957-5.085-13.957h13.919c-.036 1.087-.118 2.094-.375 2.911-.33 1.049-1.136 2.22-1.987 3.46-1.476 2.145-3.15 4.58-3.15 7.586 0 3.008 1.674 5.44 3.15 7.586.851 1.24 1.657 2.411 1.987 3.46.257.817.34 1.824.375 2.911H6.872zm77.592-9.21c-1.021 1.487-2.079 3.023-2.633 4.783-.577 1.834-.607 3.766-.637 5.637-.032 2.038-.063 3.963-.825 5.044-.779 1.104-2.557 1.729-4.439 2.39-1.708.601-3.474 1.221-4.97 2.344-1.477 1.108-2.582 2.638-3.651 4.115-1.197 1.655-2.327 3.218-3.615 3.65-1.195.398-2.96-.16-4.823-.75-1.757-.557-3.574-1.132-5.484-1.132-1.909 0-3.726.575-5.482 1.131-1.869.591-3.632 1.151-4.826.75-1.286-.43-2.418-1.995-3.617-3.651-1.067-1.478-2.172-3.006-3.648-4.113-1.496-1.123-3.262-1.743-4.97-2.343-1.882-.662-3.66-1.287-4.44-2.39-.763-1.083-.793-3.009-.825-5.046-.028-1.87-.06-3.802-.636-5.635-.554-1.76-1.61-3.296-2.632-4.781-1.168-1.7-2.271-3.304-2.271-4.749 0-1.443 1.103-3.05 2.27-4.748 1.022-1.485 2.08-3.022 2.633-4.782.577-1.832.606-3.764.637-5.633.031-2.04.063-3.964.826-5.047.778-1.103 2.557-1.728 4.44-2.39 1.707-.6 3.472-1.221 4.968-2.344 1.476-1.107 2.58-2.636 3.648-4.112 1.199-1.657 2.33-3.221 3.617-3.652.28-.094.594-.134.931-.134 1.099 0 2.466.433 3.895.885 1.757.557 3.573 1.132 5.483 1.132 1.91 0 3.727-.575 5.484-1.132 1.869-.59 3.63-1.148 4.824-.75 1.286.431 2.417 1.996 3.614 3.65 1.069 1.478 2.174 3.007 3.652 4.114 1.496 1.122 3.261 1.743 4.97 2.344 1.881.662 3.66 1.287 4.438 2.39.765 1.083.795 3.007.826 5.045.028 1.869.059 3.802.637 5.634.554 1.761 1.61 3.298 2.632 4.784 1.168 1.698 2.271 3.303 2.271 4.746-.001 1.442-1.105 3.047-2.272 4.746zm15.439 9.21h-13.92c.038-1.087.118-2.094.376-2.911.33-1.049 1.135-2.22 1.988-3.46 1.475-2.146 3.148-4.58 3.148-7.586 0-3.007-1.673-5.439-3.148-7.584-.853-1.24-1.658-2.411-1.988-3.462-.258-.817-.34-1.824-.375-2.911h13.918L94.819 37.75l5.085 13.957z" fill="url(#c)" transform="translate(35 9)"/><path d="M53.389 12.117c-13.84 0-25.098 11.498-25.098 25.634 0 14.134 11.259 25.632 25.098 25.632 13.838 0 25.096-11.498 25.096-25.632 0-14.134-11.258-25.634-25.096-25.634zm0 47.075c-11.576 0-20.993-9.618-20.993-21.441 0-11.823 9.417-21.442 20.993-21.442 11.574 0 20.991 9.619 20.991 21.442S64.964 59.192 53.39 59.192z" fill="url(#d)" transform="translate(35 9)"/></g><path d="M19.72 15.029V8.723C19.72 3.905 15.715 0 10.776 0 5.836 0 1.83 3.905 1.83 8.723v6.397c-.039.824-.24 2.715-1.221 4.928-1.32 2.973-.228 2.619.75 2.374.979-.243 3.164-1.198 3.847-.022.682 1.176 1.251 2.197 2.844 1.531 1.593-.665 2.344-.887 2.572-.887h.309c.227 0 .978.222 2.571.887 1.593.666 2.162-.355 2.845-1.53.682-1.177 2.867-.222 3.846.021.979.245 2.07.6.75-2.374-1.02-2.302-1.197-4.253-1.224-5.02z" fill="url(#e)" transform="translate(78 34)"/><path d="M84.923 47.402c.618 0 1.123-.502 1.123-1.118 0-.288-.114-.54-.277-.74l1.412-2.248c.101.025.202.038.315.038.202 0 .391-.05.555-.15l1.098 1.054c-.089.15-.127.339-.127.527a1.122 1.122 0 101.968-.74l1.337-2.16c.1.025.202.037.303.037.618 0 1.122-.502 1.122-1.117a1.122 1.122 0 10-1.967.74l-1.363 2.148a1.25 1.25 0 00-.302-.038c-.202 0-.391.05-.555.15l-1.097-1.054c.088-.15.126-.326.126-.515a1.122 1.122 0 10-1.968.741l-1.425 2.248a1.25 1.25 0 00-.303-.038c-.618 0-1.122.502-1.122 1.117a1.144 1.144 0 001.147 1.118z" fill="#FFF" fill-rule="nonzero" stroke="#FFF" stroke-width=".999"/></g></svg>

app/panel/actions/PanelActions.js

@@ -17,7 +17,8 @@ import {
 	CLOSE_NOTIFICATION,
 	TOGGLE_EXPERT,
 	SET_THEME,
-	CLEAR_THEME
+	CLEAR_THEME,
+	TOGGLE_INSIGHTS_MODAL
 } from '../constants/constants';
 import { sendMessageInPromise } from '../utils/msg';
 
@@ -98,3 +99,13 @@ export const getTheme = name => dispatch => (
 			}
 		})
 );
+
+/**
+ * Triggered when the user signs in through the Insights modal into an account that does not have an insights subscription, prompting to re-display the modal, requiring a re-render
+ * @return {Object}
+ */
+export function toggleInsightsModal() {
+	return {
+		type: TOGGLE_INSIGHTS_MODAL,
+	};
+}

app/panel/components/BuildingBlocks/ModalExitButton.jsx

@@ -0,0 +1,40 @@
+
+/**
+ * Modal Exit Button Component
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2019 Ghostery, Inc. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * A Functional React component for a Exit Button
+ * @return {JSX} JSX for rendering a Exit Button
+ * @memberof SharedComponents
+ */
+const ModalExitButton = (props) => {
+	const {
+		toggleModal
+	} = props;
+
+	return (
+		<button type="button" onClick={toggleModal} className="ModalExitButton__exit flex-container align-middle">
+			<span className="ModalExitButton__exitIcon" />
+		</button>
+	);
+};
+
+// PropTypes ensure we pass required props of the correct type
+ModalExitButton.propTypes = {
+	toggleModal: PropTypes.func.isRequired
+};
+
+export default ModalExitButton;

app/panel/components/BuildingBlocks/index.js

@@ -23,6 +23,7 @@ import PauseButton from './PauseButton';
 import ToggleSlider from './ToggleSlider';
 import RewardDetail from './RewardDetail';
 import RewardListItem from './RewardListItem';
+import ModalExitButton from './ModalExitButton';
 
 export {
 	ClickOutside,
@@ -33,5 +34,6 @@ export {
 	PauseButton,
 	ToggleSlider,
 	RewardDetail,
-	RewardListItem
+	RewardListItem,
+	ModalExitButton
 };

app/panel/components/InsightsPromoModal.jsx

@@ -0,0 +1,87 @@
+/**
+ * Insights Promo Modal Component
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2019 Ghostery, Inc. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import React from 'react';
+import Modal from '../../shared-components/Modal';
+import history from '../utils/history';
+import ModalExitButton from './BuildingBlocks/ModalExitButton';
+
+// A Functional React component for a Modal
+class InsightsPromoModal extends React.Component {
+	clickSignIn = () => {
+		history.push({
+			pathname: '/login',
+		});
+		this.props.actions.toggleInsightsModal();
+	};
+
+	render() {
+		return (
+			<Modal show>
+				<div className="InsightsModal__content flex-container flex-dir-column align-middle">
+					<ModalExitButton className="InsightsModal__exitButton" toggleModal={this.props.actions.toggleInsightsModal} />
+					<div className="InsightsModal__image" />
+					<div className="InsightsModal__header">
+						{t('panel_insights_promotion_header')}
+					</div>
+					<div className="InsightsModal__description">
+						{t('panel_insights_promotion_description')}
+					</div>
+					<div className="flex-container">
+						<div className="InsightsModal__features">
+							<div className="flex-container align-middle">
+								<span className="InsightsModal__checked-circle-icon" />
+								<div className="InsightsModal__feature-text">
+									{ t('panel_insights_audit_tags') }
+								</div>
+							</div>
+							<div className="flex-container align-middle">
+								<span className="InsightsModal__checked-circle-icon" />
+								<div className="InsightsModal__feature-text">
+									{ t('panel_insights_promotion_trace_poor_performance') }
+								</div>
+							</div>
+						</div>
+						<div className="InsightsModal__features">
+							<div className="flex-container align-middle">
+								<span className="InsightsModal__checked-circle-icon" />
+								<div className="InsightsModal__feature-text">
+									{ t('panel_insights_promotion_watch_pings') }
+								</div>
+							</div>
+							<div className="flex-container align-middle">
+								<span className="InsightsModal__checked-circle-icon" />
+								<div className="InsightsModal__feature-text">
+									{ t('panel_insights_promotion_explore_trends') }
+								</div>
+							</div>
+						</div>
+					</div>
+					<div className="InsightsModal__call-to-action-container">
+						<div className="flex-container align-center">
+							<a href="https://www.ghostery.com/insights/" target="_blank" rel="noopener noreferrer" className="btn InsightsModal__call-to-action">
+								<span className="flex-container align-center">{t('panel_insights_promotion_call_to_action')}</span>
+							</a>
+						</div>
+						<div className="InsightsModal__other-options-container flex-container align-justify">
+							<span onClick={this.clickSignIn} className="InsightsModal__link">{t('subscribe_pitch_sign_in')}</span>
+							<span onClick={this.props.actions.toggleInsightsModal} className="InsightsModal__link">{t('subscribe_pitch_no_thanks')}</span>
+						</div>
+					</div>
+				</div>
+			</Modal>
+		);
+	}
+}
+
+export default InsightsPromoModal;

app/panel/components/Login.jsx

@@ -17,6 +17,7 @@ import ClassNames from 'classnames';
 import RSVP from 'rsvp';
 import { validateEmail } from '../utils/utils';
 import { log } from '../../../src/utils/common';
+import history from '../utils/history';
 
 /**
  * @class Implement Sign In view which opens from 'Sign In' CTA on the Header.
@@ -72,7 +73,10 @@ class Login extends React.Component {
 							})
 							.finally(() => {
 								this.setState({ loading: false }, () => {
-									this.props.history.push(this.props.is_expert ? '/detail/blocking' : '/');
+									this.props.actions.toggleInsightsModal();
+									history.push({
+										pathname: this.props.is_expert ? '/detail/blocking' : '/'
+									});
 								});
 							});
 					} else {

app/panel/components/Panel.jsx

@@ -14,35 +14,34 @@
 import React from 'react';
 import ClassNames from 'classnames';
 import Header from '../containers/HeaderContainer';
-import { PlusPromoModal } from '../../shared-components';
+import { PlusPromoModal, Modal } from '../../shared-components';
+import InsightsPromoModal from '../containers/InsightsPromoModalContainer';
 import { DynamicUIPortContext } from '../contexts/DynamicUIPortContext';
 import { sendMessage } from '../utils/msg';
 import { setTheme } from '../utils/utils';
-import Modal from '../../shared-components/Modal';
 /**
  * @class Implement base view with functionality common to all views.
  * @memberof PanelClasses
  */
 class Panel extends React.Component {
 	constructor(props) {
 		super(props);
+		this.state = {
+			insightsPromoModalShown: false,
+			plusPromoModalShown: false
+		};
 
 		// event bindings
 		this.closeNotification = this.closeNotification.bind(this);
 		this.clickReloadBanner = this.clickReloadBanner.bind(this);
 		this.filterTrackers = this.filterTrackers.bind(this);
-
-		this.state = {
-			plusPromoModalShown: false,
-		};
 	}
 
 	/**
 	 * Lifecycle event
 	 */
 	componentDidMount() {
 		sendMessage('ping', 'engaged');
-
 		this._dynamicUIDataInitialized = false;
 		this._dynamicUIPort = chrome.runtime.connect({ name: 'dynamicUIPanelPort' });
 		this._dynamicUIPort.onMessage.addListener((msg) => {
@@ -65,6 +64,16 @@ class Panel extends React.Component {
 		this._dynamicUIPort.disconnect();
 	}
 
+	/**
+	 * 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();
+	}
+
 	/**
 	 * Close banner notification
 	 * @param  {Object} event
@@ -87,16 +96,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.
@@ -118,12 +117,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;
 
@@ -155,6 +154,7 @@ class Panel extends React.Component {
 		}
 	}
 
+
 	/**
 	 * Helper render function for the notification callout
 	 * @return {JSX} JSX for the notification callout
@@ -238,8 +238,6 @@ class Panel extends React.Component {
 
 		if (plusPromoModalShown || !isTimeForAPlusPromo) return null;
 
-		const version = haveSeenInitialPlusPromo ? PlusPromoModal.UPGRADE : PlusPromoModal.INITIAL;
-
 		if (haveSeenInitialPlusPromo) { return this._renderPlusPromoUpgradeModal(); }
 
 		return (
@@ -251,6 +249,21 @@ class Panel extends React.Component {
 		);
 	}
 
+	_renderInsightsPromoModal = () => {
+		const { account, isTimeForInsightsPromo, isInsightsModalHidden } = this.props;
+		const { insightsPromoModalShown } = this.state;
+
+		if (isInsightsModalHidden) return null;
+		if (insightsPromoModalShown || !isTimeForInsightsPromo) return null;
+		if (account && account.user && account.user.scopes && account.user.scopes.includes('subscriptions:insights')) return null;
+
+		sendMessage('promoModals.sawInsightsPromo', '', 'metrics');
+
+		return (
+			<InsightsPromoModal />
+		);
+	}
+
 	/**
 	 * React's required render function. Returns JSX
 	 * @return {JSX} JSX for rendering the Panel
@@ -266,6 +279,7 @@ class Panel extends React.Component {
 		return (
 			<div id="panel">
 				{this._renderPlusPromoModal()}
+				{this._renderInsightsPromoModal()}
 				<div className="callout-container">
 					<div className={`${(!notificationText ? 'hide ' : '') + this.props.notificationClasses} callout`}>
 						<svg onClick={this.closeNotification} width="15px" height="15px" viewBox="0 0 15 15" className="close-button">

app/panel/components/Summary.jsx

@@ -246,6 +246,7 @@ class Summary extends React.Component {
 		}
 	}
 
+
 	/**
 	 * Calculates total tracker latency and sets it to state
 	 * @param {Object} props Summary's props, either this.props or nextProps.

app/panel/constants/constants.js

@@ -18,6 +18,7 @@ export const SHOW_NOTIFICATION = 'SHOW_NOTIFICATION';
 export const TOGGLE_CLIQZ_FEATURE = 'TOGGLE_CLIQZ_FEATURE';
 export const CLOSE_NOTIFICATION = 'CLOSE_NOTIFICATION';
 export const TOGGLE_EXPERT = 'TOGGLE_EXPERT';
+export const TOGGLE_INSIGHTS_MODAL = 'TOGGLE_INSIGHTS_MODAL';
 
 // summary
 export const UPDATE_SUMMARY_DATA = 'UPDATE_SUMMARY_DATA';