GH-1774/In-App Insights Promo

_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';