Add X icon to Upgrade variant of Plus Promo Modal. Factor rendering o…

…f that modal out to a component analogous to InsightsPromoModal. Clean up click handling for both promo modals.

app/panel/components/InsightsPromoModal.jsx

@@ -13,23 +13,27 @@
 
 import React from 'react';
 import Modal from '../../shared-components/Modal';
-import history from '../utils/history';
 import ModalExitButton from './BuildingBlocks/ModalExitButton';
+import PanelToTabLink from './BuildingBlocks/PanelToTabLink';
 
-// A Functional React component for a Modal
+const INSIGHTS = 'insights';
+
+/**
+ * @class Implements the Insights Promo Modal
+ * @memberof PanelClasses
+ */
 class InsightsPromoModal extends React.Component {
-	clickSignIn = () => {
-		history.push({
-			pathname: '/login',
-		});
-		this.props.actions.togglePromoModal();
-	};
+	handleNoThanksClick = () => { this.props.handleNoThanksClick(INSIGHTS); };
+
+	handleSignInClick = () => { this.props.handleSignInClick(INSIGHTS); };
+
+	handleXClick = () => { this.props.handleXClick(INSIGHTS); };
 
 	render() {
 		return (
 			<Modal show>
 				<div className="InsightsModal__content flex-container flex-dir-column align-middle">
-					<ModalExitButton className="InsightsModal__exitButton" toggleModal={this.props.actions.togglePromoModal} />
+					<ModalExitButton className="InsightsModal__exitButton" toggleModal={this.handleXClick} />
 					<div className="InsightsModal__image" />
 					<div className="InsightsModal__header">
 						{t('panel_insights_promotion_header')}
@@ -69,13 +73,13 @@ class InsightsPromoModal extends React.Component {
 					</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>
+							<PanelToTabLink className="btn InsightsModal__call-to-action" href="http://ghostery.com/insights/">
+								<span className="button-text">{t('panel_insights_promotion_call_to_action')}</span>
+							</PanelToTabLink>
 						</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.togglePromoModal} className="InsightsModal__link">{t('subscribe_pitch_no_thanks')}</span>
+							<span onClick={this.handleSignInClick} className="InsightsModal__link">{t('subscribe_pitch_sign_in')}</span>
+							<span onClick={this.handleNoThanksClick} className="InsightsModal__link">{t('no_thanks_turn_promos_off')}</span>
 						</div>
 					</div>
 				</div>

app/panel/components/Panel.jsx

@@ -12,14 +12,14 @@
  */
 
 import React from 'react';
-import ClassNames from 'classnames';
 import Header from '../containers/HeaderContainer';
-import PanelToTabLink from './BuildingBlocks/PanelToTabLink';
 import { PlusPromoModal, Modal } from '../../shared-components';
-import InsightsPromoModal from '../containers/InsightsPromoModalContainer';
+import InsightsPromoModal from './InsightsPromoModal';
+import PlusUpgradePromoModal from './PlusUpgradePromoModal';
 import { DynamicUIPortContext } from '../contexts/DynamicUIPortContext';
 import { sendMessage } from '../utils/msg';
 import { setTheme } from '../utils/utils';
+import history from '../utils/history';
 /**
  * @class Implement base view with functionality common to all views.
  * @memberof PanelClasses
@@ -197,64 +197,28 @@ class Panel extends React.Component {
 		return false;
 	}
 
-	_handlePlusPromoModalClicks = () => {
+	_handlePromoNoThanksClick = (modal) => {
+		// TODO metrics ping
 		this.props.actions.togglePromoModal();
+		sendMessage('promoModals.turnOffPromos', {});
 	}
 
-	_handleNoThanksClick = () => {
+	_handlePromoSignInClick = (modal) => {
+		// TODO metrics ping
 		this.props.actions.togglePromoModal();
-		sendMessage('promoModals.turnOffPromos', {});
+		history.push({
+			pathname: '/login',
+		});
 	}
 
-	_handleSubscriberSignInClick = () => {
+	_handlePromoSubscribeClick = (modal) => {
+		// TODO send metrics ping
 		this.props.actions.togglePromoModal();
-		this.props.history.push('/login');
 	}
 
-	_renderPlusPromoUpgradeModal() {
-		const { loggedIn } = this.props;
-
-		const contentClassNames = ClassNames(
-			'PlusPromoModal__content',
-			'flex-container',
-			'flex-dir-column',
-			'align-middle',
-			'panel',
-			'upgrade'
-		);
-
-		return (
-			<Modal show>
-				<div className={contentClassNames}>
-					<div className="PlusPromoModal__buttons-background upgrade" />
-					<img className="PlusPromoModal__gold-ghostie-badge" src="/app/images/hub/home/gold-ghostie-badge.svg" />
-					<div className="PlusPromoModal__header">
-						{t('upgrade_your_ghostery_experience')}
-					</div>
-					<div className="PlusPromoModal__description cta">
-						{t('upgrade_cta_TEXT')}
-					</div>
-					<div className="PlusPromoModal__button-container" onClick={this._handlePlusPromoModalClicks}>
-						<PanelToTabLink className="PlusPromoModal__button upgrade" href="http://signon.ghostery.com/en/subscribe/">
-							<span className="button-text">{t('upgrade_to_plus')}</span>
-						</PanelToTabLink>
-					</div>
-					<div className="PlusPromoModal__text-link-container">
-						{
-							!loggedIn &&
-							(
-								<div onClick={this._handleSubscriberSignInClick} className="PlusPromoModal__text-link">
-									{t('already_subscribed_sign_in')}
-								</div>
-							)
-						}
-						<div onClick={this._handleNoThanksClick} className="PlusPromoModal__text-link">
-							{t('no_thanks_turn_promos_off')}
-						</div>
-					</div>
-				</div>
-			</Modal>
-		);
+	_handlePromoXClick = (modal) => {
+		// TODO send metrics ping
+		this.props.actions.togglePromoModal();
 	}
 
 	_plusSubscriber = () => {
@@ -275,15 +239,25 @@ class Panel extends React.Component {
 		sendMessage('promoModals.sawPlusPromo', {});
 
 		if (this.props.promoModal === 'plus_upgrade') {
-			return this._renderPlusPromoUpgradeModal();
+			return (
+				<PlusUpgradePromoModal
+					handleNoThanksClick={this._handlePromoNoThanksClick}
+					handleSignInClick={this._handlePromoSignInClick}
+					handleSubscribeClick={this._handlePromoSubscribeClick}
+					handleXClick={this._handlePromoXClick}
+				/>
+			);
 		}
 
 		// promoModal === 'plus_initial'
 		return (
 			<PlusPromoModal
 				show
 				location="panel"
-				clickHandler={this._handlePlusPromoModalClicks}
+				handleNoThanksClick={this._handlePromoNoThanksClick}
+				handleSignInClick={this._handlePromoSignInClick}
+				handleSubscribeClick={this._handlePromoSubscribeClick}
+				handleXClick={this._handlePromoXClick}
 			/>
 		);
 	}
@@ -293,7 +267,14 @@ class Panel extends React.Component {
 
 		sendMessage('promoModals.sawInsightsPromo', '', 'metrics');
 
-		return <InsightsPromoModal />;
+		return (
+			<InsightsPromoModal
+				handleNoThanksClick={this._handlePromoNoThanksClick}
+				handleSignInClick={this._handlePromoSignInClick}
+				handleSubscribeClick={this._handlePromoSubscribeClick}
+				handleXClick={this._handlePromoXClick}
+			/>
+		);
 	}
 
 	_renderPromoModal = () => {

app/panel/components/PlusUpgradePromoModal.jsx

@@ -0,0 +1,85 @@
+/**
+ * Plus Upgrade 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 ClassNames from 'classnames';
+import Modal from '../../shared-components/Modal';
+import ModalExitButton from './BuildingBlocks/ModalExitButton';
+import PanelToTabLink from './BuildingBlocks/PanelToTabLink';
+
+const PLUS_UPGRADE = 'plus_upgrade';
+
+/**
+ * @class Implements the Upgrade variant of the Plus Promo Modal
+ * @memberof PanelClasses
+ */
+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); }
+
+	render() {
+		const { loggedIn } = this.props;
+
+		const contentClassNames = ClassNames(
+			'PlusPromoModal__content',
+			'flex-container',
+			'flex-dir-column',
+			'align-middle',
+			'panel',
+			'upgrade'
+		);
+
+		// TODO update ModalExitButton class here
+		// TODO pass down handler for click on ModalExitButton
+		return (
+			<Modal show>
+				<div className={contentClassNames}>
+					<ModalExitButton className="InsightsModal__exitButton" toggleModal={this.handleXClick} />
+					<div className="PlusPromoModal__buttons-background upgrade" />
+					<img className="PlusPromoModal__gold-ghostie-badge" src="/app/images/hub/home/gold-ghostie-badge.svg" />
+					<div className="PlusPromoModal__header">
+						{t('upgrade_your_ghostery_experience')}
+					</div>
+					<div className="PlusPromoModal__description cta">
+						{t('upgrade_cta_TEXT')}
+					</div>
+					<div className="PlusPromoModal__button-container" onClick={this.handleSubscribeClick}>
+						<PanelToTabLink className="PlusPromoModal__button upgrade" href="http://signon.ghostery.com/subscribe/">
+							<span className="button-text">{t('upgrade_to_plus')}</span>
+						</PanelToTabLink>
+					</div>
+					<div className="PlusPromoModal__text-link-container">
+						{
+							!loggedIn &&
+							(
+								<div onClick={this.handleSignInClick} className="PlusPromoModal__text-link">
+									{t('already_subscribed_sign_in')}
+								</div>
+							)
+						}
+						<div onClick={this.handleNoThanksClick} className="PlusPromoModal__text-link">
+							{t('no_thanks_turn_promos_off')}
+						</div>
+					</div>
+				</div>
+			</Modal>
+		);
+	}
+}
+
+export default PlusUpgradePromoModal;