Mark PromoModals methods as static. Refine PlusPromoModal implementat…

…ion and add debug code

app/hub/Views/HomeView/HomeViewContainer.jsx

@@ -92,6 +92,7 @@ class HomeViewContainer extends Component {
 					show={!isPlus && !plus_promo_modal_shown}
 					location="hub"
 					clickHandler={this._dismissModal}
+					version={PlusPromoModal.INITIAL}
 				/>
 				<HomeView {...childProps} />
 			</div>

app/panel/components/Panel.jsx

@@ -207,11 +207,11 @@ class Panel extends React.Component {
 
 	_renderPlusPromoModal = () => {
 		const { plusPromoModalShown } = this.state;
-		const { haveSeenAPlusPromo, isTimeForAPlusPromo } = this.props;
+		const { haveSeenInitialPlusPromo, isTimeForAPlusPromo } = this.props;
 
 		if (plusPromoModalShown || !isTimeForAPlusPromo) return null;
 
-		const version = haveSeenAPlusPromo ? 'upgrade' : 'initial';
+		const version = haveSeenInitialPlusPromo ? PlusPromoModal.UPGRADE : PlusPromoModal.INITIAL;
 
 		return (
 			<PlusPromoModal

app/shared-components/PlusPromoModal/PlusPromoModal.jsx

@@ -17,12 +17,8 @@ import PropTypes from 'prop-types';
 import ClassNames from 'classnames';
 import Modal from '../Modal/Modal';
 
-/**
- * A Functional React component for a Plus Promo Modal
- * @return {JSX} JSX for rendering a Plus Promo Modal
- * @memberof SharedComponents
- */
-const PlusPromoModal = (props) => {
+// TODO refactor to reduce duplication alongside implementing _renderUpgradeVersion for GH-1813
+function _renderInitialVersion(props) {
 	const { show, location, clickHandler } = props;
 
 	const isInHub = location === 'hub';
@@ -126,13 +122,62 @@ const PlusPromoModal = (props) => {
 			</div>
 		</Modal>
 	);
+}
+
+// TODO flesh out this stub for https://cliqztix.atlassian.net/browse/GH-1813
+function _renderUpgradeVersion(props) {
+	const { clickHandler, location, show } = props;
+
+	const isInHub = location === 'hub';
+
+	const locationClassName = {
+		'in-hub': isInHub,
+		'in-panel': location === 'panel'
+	};
+	const contentClassNames = ClassNames(
+		'PlusPromoModal__content',
+		'flex-container',
+		'flex-dir-column',
+		'align-middle',
+		locationClassName
+	);
+
+	return (
+		<Modal show={show}>
+			<div className={contentClassNames}>
+				<div className="PlusPromoModal__thanks-for-download">[Upgrade version of the Plus Promo modal]</div>
+				<div className="PlusPromoModal__button basic button" onClick={clickHandler}>
+					<span>Dismiss</span>
+				</div>
+			</div>
+		</Modal>
+	);
+}
+
+/**
+ * A Functional React component for a Plus Promo Modal
+ * @return {JSX} JSX for rendering a Plus Promo Modal
+ * @memberof SharedComponents
+ */
+const PlusPromoModal = (props) => {
+	const { version } = props;
+
+	if (version === PlusPromoModal.INITIAL) { return _renderInitialVersion(props); }
+
+	if (version === PlusPromoModal.UPGRADE) { return _renderUpgradeVersion(props); }
+
+	return null;
 };
 
+PlusPromoModal.UPGRADE = 1;
+PlusPromoModal.INITIAL = 2;
+
 // PropTypes ensure we pass required props of the correct type
 PlusPromoModal.propTypes = {
 	show: PropTypes.bool.isRequired,
 	location: PropTypes.string.isRequired,
 	clickHandler: PropTypes.func.isRequired,
+	version: PropTypes.oneOf([PlusPromoModal.UPGRADE, PlusPromoModal.INITIAL]).isRequired,
 };
 
 export default PlusPromoModal;

src/classes/PanelData.js

@@ -27,7 +27,7 @@ import tabInfo from './TabInfo';
 import rewards from './Rewards';
 import account from './Account';
 import dispatcher from './Dispatcher';
-import modalPromos from './PromoModals';
+import promoModals from './PromoModals';
 import { getCliqzGhosteryBugs, sendCliqzModuleCounts } from '../utils/cliqzModulesData';
 import { getActiveTab, flushChromeMemoryCache, processUrl } from '../utils/utils';
 import { objectEntries, log } from '../utils/common';
@@ -366,8 +366,8 @@ class PanelData {
 			is_expert,
 			is_android: globals.BROWSER_INFO.os === 'android',
 			language,
-			isTimeForAPlusPromo: modalPromos.isTimeForAPlusPromo(),
-			haveSeenAPlusPromo: modalPromos.haveSeenAPlusPromo(),
+			isTimeForAPlusPromo: promoModals.isTimeForAPlusPromo(),
+			haveSeenInitialPlusPromo: promoModals.haveSeenInitialPlusPromo(),
 			reload_banner_status,
 			tab_id,
 			trackers_banner_status,

src/classes/PromoModals.js

@@ -12,12 +12,12 @@
  */
 
 import conf from './Conf';
+import globals from './Globals';
 
 const DAYS_BETWEEN_PROMOS = {
-	plus: 30
+	plus: globals.DEBUG ? 0.00025 : 30,
 };
-const MSECS_IN_DAY = 1000 * 60 * 60 * 24; // msecs-in-sec * secs-in-min * mins-in-hour * hours-in-day
-
+const MSECS_IN_DAY = 86400000; // 1000 msecs-in-sec * 60 secs-in-min * 60 mins-in-hour * 24 hours-in-day
 const PLUS = 'plus';
 const PROMO_MODAL_LAST_SEEN = 'promo_modal_last_seen';
 
@@ -26,18 +26,16 @@ const PROMO_MODAL_LAST_SEEN = 'promo_modal_last_seen';
  * @memberOf  BackgroundClasses
  */
 class PromoModals {
-	haveSeenAPlusPromo() { return this._haveSeenAPromo(PLUS); }
-
-	isTimeForAPlusPromo() { return this._isTimeForAPromo(PLUS); }
-
-	recordPlusPromoSighting() { this._recordPromoSighting(PLUS); }
-
-	_haveSeenAPromo(type) {
-		const lastSeenTime = conf[`${type}_${PROMO_MODAL_LAST_SEEN}`];
+	static haveSeenInitialPlusPromo() {
+		const lastSeenTime = conf[`${PLUS}_${PROMO_MODAL_LAST_SEEN}`];
 		return (lastSeenTime !== null);
 	}
 
-	_isTimeForAPromo(type) {
+	static isTimeForAPlusPromo() { return this._isTimeForAPromo(PLUS); }
+
+	static recordPlusPromoSighting() { this._recordPromoSighting(PLUS); }
+
+	static _isTimeForAPromo(type) {
 		const lastSeenTime = conf[`${type}_${PROMO_MODAL_LAST_SEEN}`];
 
 		if (lastSeenTime === null) { return true; }
@@ -48,10 +46,11 @@ class PromoModals {
 		);
 	}
 
-	_recordPromoSighting(type) {
+	static _recordPromoSighting(type) {
 		conf[`${type}_${PROMO_MODAL_LAST_SEEN}`] = Date.now();
 	}
 }
 
-// return the class as a singleton
-export default new PromoModals();
+// the class is simply a namespace for some static methods,
+// as we do not need to maintain any state
+export default PromoModals;