Unfinished PromoModal superclass

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/Panel.jsx

@@ -14,6 +14,7 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 import Header from '../containers/HeaderContainer';
+import PromoModal from '../../shared-components/PromoModal';
 import { PremiumPromoModal } from '../../shared-components';
 import InsightsPromoModal from './InsightsPromoModal';
 import PlusPromoModal from '../containers/PlusPromoModalContainer';
@@ -24,6 +25,9 @@ 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.
@@ -354,14 +358,15 @@ class Panel extends React.Component {
 		const isPlus = this._plusSubscriber();
 
 		return (
-			<PremiumPromoModal
-				show
-				isPlus={isPlus}
+			<PromoModal
+				type={PREMIUM}
 				location="panel"
+				isPlus={isPlus}
 				handleGoAwayClick={this._handlePromoGoAwayClick}
 				handleGetPlusClick={this._handlePromoGetPlusClick}
 				handleTryMidnightClick={this._handlePromoTryMidnightClick}
 				handleXClick={this._handlePromoXClick}
+				show
 			/>
 		);
 	}
@@ -379,7 +384,8 @@ class Panel extends React.Component {
 		sendMessage('ping', 'promo_modals_show_insights');
 
 		return (
-			<InsightsPromoModal
+			<PromoModal
+				type={INSIGHTS}
 				handleGoAwayClick={this._handlePromoGoAwayClick}
 				handleSignInClick={this._handlePromoSignInClick}
 				handleSubscribeClick={this._handlePromoSubscribeClick}
@@ -392,7 +398,7 @@ class Panel extends React.Component {
 	/**
 	 * @returns {null|JSX}
 	 * @private
-	 * Renders the Insights promo modal if the user is not already an Insights subscriber
+	 * Renders the Plus promo modal if the user is not already an  subscriber
 	 */
 	_renderPlusPromoModal = () => {
 		if (this._plusSubscriber() || this._premiumSubscriber()) { return null; }
@@ -401,7 +407,8 @@ class Panel extends React.Component {
 		sendMessage('ping', 'promo_modals_show_plus');
 
 		return (
-			<PlusPromoModal
+			<PromoModal
+				type={PLUS}
 				handleGoAwayClick={this._handlePromoGoAwayClick}
 				handleSignInClick={this._handlePromoSignInClick}
 				handleSubscribeClick={this._handlePromoSubscribeClick}

app/shared-components/PromoModal/PromoModal.jsx

@@ -0,0 +1,77 @@
+/**
+ * Super component for all of the Promo Modals
+ *
+ * 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';
+import InsightsPromoModal from '../../panel/components/InsightsPromoModal';
+import PlusPromoModal from '../../panel/components/PlusPromoModal';
+import PremiumPromoModal from '../PremiumPromoModal';
+
+const INSIGHTS = 'insights';
+const PLUS = 'plus';
+const PREMIUM = 'premium';
+/**
+ * A superclass for Promo Modals
+ * @return {JSX}
+ * @memberof HubComponents
+ */
+class PromoModal extends React.Component {
+	handleGoAwayClick = () => { this.props.handleGoAwayClick(this.props.type); }
+
+	handleSubscribeClick = () => { this.props.handleSubscribeClick(this.props.type); }
+
+	handleXClick = () => { this.props.handleXClick(this.props.type); }
+
+	render() {
+		const { type } = this.props;
+		switch (type) {
+			case INSIGHTS:
+				return <InsightsPromoModal {...this.props} />;
+			case PLUS:
+				return <PlusPromoModal {...this.props} />;
+			case PREMIUM:
+				return <PremiumPromoModal {...this.props} />;
+			default:
+				return <InsightsPromoModal {...this.props} />;
+		}
+	}
+}
+
+// PropTypes ensure we pass required props of the correct type
+PromoModal.propTypes = {
+	type: PropTypes.string.isRequired,
+	handleGoAwayClick: PropTypes.func,
+	handleSignInClick: PropTypes.func,
+	handleSubscribeClick: PropTypes.func,
+	handleXClick: PropTypes.func,
+	handleTryMidnightClick: PropTypes.func,
+	handleGetPlusClick: PropTypes.func,
+	handleKeepBasicClick: PropTypes.func,
+	location: PropTypes.string,
+	isPlus: PropTypes.bool,
+};
+
+const noop = () => {};
+PromoModal.defaultProps = {
+	handleGoAwayClick: noop,
+	handleSignInClick: noop,
+	handleSubscribeClick: noop,
+	handleXClick: noop,
+	handleTryMidnightClick: noop,
+	handleGetPlusClick: noop,
+	handleKeepBasicClick: noop,
+	location: 'panel',
+	isPlus: false,
+};
+
+export default PromoModal;

app/shared-components/PromoModal/index.js

@@ -0,0 +1,16 @@
+/**
+ * Point of entry index.js file for PromoModal
+ *
+ * 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 PromoModal from './PromoModal';
+
+export default PromoModal;

src/classes/PromoModals.js

@@ -18,7 +18,7 @@ import panelData from './PanelData';
 const DAYS_BETWEEN_PROMOS = {
 	premium: globals.DEBUG ? 0.0005 : 30, // 40 seconds on staging
 	insights: globals.DEBUG ? 0.0005 : 30, // 40 seconds on staging
-	plus: globals.DEBUG ? 0.0005 : 30 // 40 seconds on staging
+	plus: globals.DEBUG ? 0.0005 : 2 // 40 seconds on staging
 };
 const WEEKLY_INSIGHTS_TARGET = globals.DEBUG ? 1 : 3;
 const DAILY_INSIGHTS_TARGET = globals.DEBUG ? 7 : 3;