Insights promo modal broken

app/panel/components/Panel.jsx

@@ -14,11 +14,11 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 import Header from '../containers/HeaderContainer';
-import PromoModal from '../../shared-components/PromoModal';
+// import PromoModal from '../../shared-components/PromoModal';
+import PromoModalContainer from '../../shared-components/PromoModal/PromoModalContainer';
 import { DynamicUIPortContext } from '../contexts/DynamicUIPortContext';
 import { sendMessage } from '../utils/msg';
 import { setTheme } from '../utils/utils';
-import history from '../utils/history';
 import globals from '../../../src/classes/Globals';
 
 const DOMAIN = globals.DEBUG ? 'ghosterystage' : 'ghostery';
@@ -222,16 +222,16 @@ class Panel extends React.Component {
 		});
 	};
 
-	/**
-	 * @private
-	 * Handle clicks on sign in links in promo modals
-	 */
-	_handlePromoSignInClick = () => {
-		this.props.actions.togglePromoModal();
-		history.push({
-			pathname: '/login',
-		});
-	};
+	// /**
+	//  * @private
+	//  * Handle clicks on sign in links in promo modals
+	//  */
+	// _handlePromoSignInClick = () => {
+	// 	this.props.actions.togglePromoModal();
+	// 	history.push({
+	// 		pathname: '/login',
+	// 	});
+	// };
 
 	/**
 	 * @private
@@ -275,26 +275,26 @@ class Panel extends React.Component {
 		});
 	};
 
-	/**
-	 * @private
-	 * Handle click action when user selects Subscribe button in the Insights modal
-	 * @param  {string} modal Modal type (insights or plus)
-	 */
-	_handlePromoSubscribeClick = (modal) => {
-		this.props.actions.togglePromoModal();
+	// /**
+	//  * @private
+	//  * Handle click action when user selects Subscribe button in the Insights modal
+	//  * @param  {string} modal Modal type (insights or plus)
+	//  */
+	// _handlePromoSubscribeClick = (modal) => {
+	// 	this.props.actions.togglePromoModal();
 
-		let url = `https://checkout.${DOMAIN}.com/`;
+	// 	let url = `https://checkout.${DOMAIN}.com/`;
 
-		if (modal === 'insights') {
-			sendMessage('ping', 'promo_modals_insights_upgrade_cta');
-			url += 'insights?utm_source=gbe&utm_campaign=in_app_upgrade';
-		}
+	// 	if (modal === 'insights') {
+	// 		sendMessage('ping', 'promo_modals_insights_upgrade_cta');
+	// 		url += 'insights?utm_source=gbe&utm_campaign=in_app_upgrade';
+	// 	}
 
-		sendMessage('openNewTab', {
-			url,
-			become_active: true,
-		});
-	};
+	// 	sendMessage('openNewTab', {
+	// 		url,
+	// 		become_active: true,
+	// 	});
+	// };
 
 	/**
 	 * @param modal			'insights' or 'premium'
@@ -355,16 +355,17 @@ class Panel extends React.Component {
 		const isPlus = this._plusSubscriber();
 
 		return (
-			<PromoModal
-				type={PREMIUM}
-				location="panel"
-				isPlus={isPlus}
-				handleGoAwayClick={this._handlePromoGoAwayClick}
-				handleGetPlusClick={this._handlePromoGetPlusClick}
-				handleTryMidnightClick={this._handlePromoTryMidnightClick}
-				handleXClick={this._handlePromoXClick}
-				show
-			/>
+			// <PromoModal
+			// 	type={PREMIUM}
+			// 	location="panel"
+			// 	isPlus={isPlus}
+			// 	handleGoAwayClick={this._handlePromoGoAwayClick}
+			// 	handleGetPlusClick={this._handlePromoGetPlusClick}
+			// 	handleTryMidnightClick={this._handlePromoTryMidnightClick}
+			// 	handleXClick={this._handlePromoXClick}
+			// 	show
+			// />
+			<div />
 		);
 	}
 
@@ -379,16 +380,18 @@ class Panel extends React.Component {
 		sendMessage('promoModals.sawInsightsPromo', {});
 
 		sendMessage('ping', 'promo_modals_show_insights');
+		console.log('the props: ', this.props);
 
 		return (
-			<PromoModal
-				type={INSIGHTS}
-				handleGoAwayClick={() => this._handlePromoGoAwayClick(INSIGHTS)}
-				handleSignInClick={() => this._handlePromoSignInClick}
-				handleSubscribeClick={() => this._handlePromoSubscribeClick(INSIGHTS)}
-				handleXClick={() => this._handlePromoXClick(INSIGHTS)}
-				show
-			/>
+			<PromoModalContainer type={INSIGHTS} />
+			// <PromoModal
+			// 	type={INSIGHTS}
+			// 	handleGoAwayClick={() => this._handlePromoGoAwayClick(INSIGHTS)}
+			// 	handleSignInClick={() => this._handlePromoSignInClick}
+			// 	handleSubscribeClick={() => this._handlePromoSubscribeClick(INSIGHTS)}
+			// 	handleXClick={() => this._handlePromoXClick(INSIGHTS)}
+			// 	show
+			// />
 		);
 	}
 
@@ -405,15 +408,16 @@ class Panel extends React.Component {
 
 		const { loggedIn } = this.props;
 		return (
-			<PromoModal
-				type={PLUS}
-				handleGoAwayClick={this._handlePromoGoAwayClick}
-				handleSignInClick={this._handlePromoSignInClick}
-				handleTryPlusClick={this._handlePromoTryPlusClick}
-				handleXClick={this._handlePromoXClick}
-				loggedIn={loggedIn}
-				show
-			/>
+			// <PromoModal
+			// 	type={PLUS}
+			// 	handleGoAwayClick={this._handlePromoGoAwayClick}
+			// 	handleSignInClick={this._handlePromoSignInClick}
+			// 	handleTryPlusClick={this._handlePromoTryPlusClick}
+			// 	handleXClick={this._handlePromoXClick}
+			// 	loggedIn={loggedIn}
+			// 	show
+			// />
+			<div />
 		);
 	}
 

app/shared-components/PromoModal/PromoModal.jsx

@@ -1,5 +1,5 @@
 /**
- * Super component for all of the Promo Modals
+ * Base component for all of the Promo Modals
  *
  * Ghostery Browser Extension
  * https://www.ghostery.com/
@@ -16,7 +16,11 @@ import PropTypes from 'prop-types';
 import InsightsPromoModal from '../../panel/components/InsightsPromoModal';
 import PlusPromoModal from '../../panel/components/PlusPromoModal';
 import PremiumPromoModal from '../PremiumPromoModal';
+import history from '../../panel/utils/history';
+import { sendMessage } from '../../panel/utils/msg';
+import globals from '../../../src/classes/Globals';
 
+const DOMAIN = globals.DEBUG ? 'ghosterystage' : 'ghostery';
 const INSIGHTS = 'insights';
 const PLUS = 'plus';
 const PREMIUM = 'premium';
@@ -27,19 +31,71 @@ const PREMIUM = 'premium';
  * @memberof HubComponents
  */
 
-const PromoModal = (props) => {
-	const { type } = props;
-	switch (type) {
-		case INSIGHTS:
-			return <InsightsPromoModal {...props} />;
-		case PLUS:
-			return <PlusPromoModal {...props} />;
-		case PREMIUM:
-			return <PremiumPromoModal {...props} />;
-		default:
-			return <InsightsPromoModal {...props} />;
+class PromoModal extends React.Component {
+	/**
+	 * @private
+	 * Handle click action when user selects Subscribe button in the Insights modal
+	 * @param  {string} modal Modal type (insights or plus)
+	 */
+	_handlePromoSubscribeClick = (modal) => {
+		this.props.actions.togglePromoModal();
+
+		let url = `https://checkout.${DOMAIN}.com/`;
+
+		if (modal === 'insights') {
+			sendMessage('ping', 'promo_modals_insights_upgrade_cta');
+			url += 'insights?utm_source=gbe&utm_campaign=in_app_upgrade';
+		}
+
+		sendMessage('openNewTab', {
+			url,
+			become_active: true,
+		});
+	};
+
+	/**
+	 * @private
+	 * Handle clicks on sign in links in promo modals
+	 */
+	_handlePromoSignInClick = () => {
+		console.log('here');
+		this.props.actions.togglePromoModal();
+		history.push({
+			pathname: '/login',
+		});
+	};
+
+	_handleGoAwayClick = (type) => { this.props.handleGoAwayClick(type); }
+
+	_handleSubscribeClick = (type) => { this.props.handleSubscribeClick(type); }
+
+	_handlePromoXClick = (type) => {
+		console.log('test');
+		this.props.handleXClick(type);
 	}
-};
+
+	render() {
+		const { type } = this.props;
+		switch (type) {
+			case INSIGHTS:
+				return (
+					<InsightsPromoModal
+						{...this.props}
+						handleSignInClick={this._handlePromoSignInClick}
+						handleSubscribeClick={() => this._handlePromoSubscribeClick(type)}
+						handleXClick={() => this._handlePromoXClick(type)}
+						show
+					/>
+				);
+			case PLUS:
+				return <PlusPromoModal type={type} />;
+			case PREMIUM:
+				return <PremiumPromoModal {...this.props} />;
+			default:
+				return <InsightsPromoModal {...this.props} />;
+		}
+	}
+}
 
 // PropTypes ensure we pass required props of the correct type
 PromoModal.propTypes = {

app/shared-components/PromoModal/PromoModalContainer.js

@@ -0,0 +1,48 @@
+/**
+ * Promo Modal Container
+ *
+ * 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
+ */
+/**
+ * @namespace  PanelContainers
+ */
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import PromoModal from './PromoModal';
+import { togglePromoModal } from '../../panel/actions/PanelActions'; // get shared actions from Panel
+
+/**
+ * Map redux store state properties to PromoModal component own properties.
+ * @memberOf PanelContainers
+ * @param  {Object} state     entire Redux store's state
+ * @param  {Object} ownProps  props passed to the connected component
+ * @return {function}         this function returns plain object, which will be merged into PromoModal props
+ * @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({}, {
+// togglePromoModal: state.panel.togglePromoModal,
+// });
+
+/**
+ * Bind Login view component action creators using Redux's bindActionCreators
+ * @memberOf PanelContainers
+ * @param  {function} 	dispatch  redux store method which dispatches actions
+ * @param  {Object} 	ownProps  Login view component own props
+ * @return {function}          	  to be used as an argument in redux connect call
+ */
+const mapDispatchToProps = dispatch => ({ actions: bindActionCreators(Object.assign({ togglePromoModal }), dispatch) });
+/**
+ * Connects PromoModal component to the Redux store.
+ * @param {function} mapStateToProps [description]
+ *
+ * @return {Object} A higher-order React component class that passes state into PromoModal. Used by React framework.
+ */
+export default connect(null, mapDispatchToProps)(PromoModal);

src/classes/PromoModals.js

@@ -21,7 +21,7 @@ const DAYS_BETWEEN_PROMOS = {
 	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;
+const DAILY_INSIGHTS_TARGET = globals.DEBUG ? 2 : 3;
 
 const MSECS_IN_DAY = 86400000; // 1000 msecs-in-sec * 60 secs-in-min * 60 mins-in-hour * 24 hours-in-day
 const PREMIUM = 'premium';