Integrate panel rewards with Background III. Messages for read, remov…

…e reward

app/panel/components/Detail.jsx

@@ -63,6 +63,7 @@ class Detail extends React.Component {
 		const condensedToggleClassNames = ClassNames('condensed-toggle', {
 			condensed: this.props.is_expanded,
 		});
+		const { enable_offers, unread_offer_ids } = this.props;
 
 		return (
 			<div className="detail-wrap">
@@ -73,7 +74,7 @@ class Detail extends React.Component {
 					<Route path="/detail/performance" render={this.PerformanceComponent} />
 					<Route path="/detail/rewards" render={this.RewardsComponent} />
 					<Route path="/detail/premium" render={this.PremiumComponent} />
-					<DetailMenu />
+					<DetailMenu hasReward={enable_offers && unread_offer_ids.length > 0} />
 				</div>
 			</div>
 		);

app/panel/components/DetailMenu.jsx

@@ -123,6 +123,9 @@ class DetailMenu extends React.Component {
 							<svg width="31" height="27" viewBox="0 0 31 27">
 								<g className="fill" fillRule="evenodd" transform="translate(4,0)">
 									<path d="M6.7,15.905 L9.32,15.905 L9.32,12.733 L6.7,12.733 L6.7,15.905 Z M9.078,11.497 L9.116,11.597 C10.18,11.525 11.261,11.547 12.304,11.355 C13.538,11.129 14.004,9.827 13.34,8.77 C12.765,7.858 11.297,7.672 10.708,8.494 C10.206,9.194 9.808,9.974 9.384,10.731 C9.251,10.971 9.178,11.241 9.078,11.498 L9.078,11.497 Z M6.976,11.575 C6.816,11.045 5.926,9.319 5.563,8.822 C5.52,8.762 5.475,8.7 5.427,8.642 C4.59,7.602 3.003,7.832 2.495,9.064 C2.115,9.982 2.655,11.151 3.549,11.346 C4.671,11.59 5.815,11.504 6.975,11.576 L6.976,11.575 Z M10.386,15.888 L14.966,15.888 L14.966,12.728 L10.386,12.728 L10.386,15.888 Z M1.069,15.908 L5.659,15.908 L5.659,12.725 L1.07,12.725 L1.07,15.907 L1.069,15.908 Z M6.692,25.434 L9.31,25.434 L9.31,16.96 L6.693,16.96 L6.693,25.434 L6.692,25.434 Z M10.392,25.478 L14.2,25.478 L14.2,16.955 L10.393,16.955 L10.393,25.478 L10.392,25.478 Z M1.832,25.434 L5.655,25.434 L5.655,16.95 L1.833,16.95 L1.833,25.434 L1.832,25.434 Z M0.805,17.01 C0.13,16.832 -0.008,16.923 0,15.958 C0.01,14.775 0.002,13.592 0.003,12.408 C0.003,11.853 0.153,11.705 0.71,11.705 L1.877,11.705 C1.957,11.705 2.037,11.695 2.093,11.691 C1.895,11.345 1.66,11.029 1.527,10.676 C1.044,9.391 1.613,7.94 2.807,7.318 C4.05,6.672 5.517,7.036 6.327,8.208 C6.943,9.101 7.417,10.072 7.847,11.066 C7.887,11.163 7.937,11.26 8.007,11.412 C8.107,11.202 8.189,11.04 8.26,10.876 C8.65,9.986 9.062,9.109 9.622,8.309 C10.109,7.614 10.729,7.141 11.597,7.029 C13.007,6.847 14.367,7.855 14.601,9.264 C14.738,10.088 14.531,10.818 14.053,11.487 L13.9,11.697 C13.982,11.709 14.04,11.727 14.1,11.727 C14.55,11.723 14.998,11.721 15.445,11.714 C15.78,11.708 15.995,11.898 15.997,12.232 C16.002,13.627 16,15.022 15.997,16.416 C15.997,16.699 15.822,16.884 15.533,16.924 C15.433,16.939 15.333,16.941 15.207,16.952 L15.207,25.655 C15.207,25.757 15.209,25.859 15.202,25.959 C15.175,26.305 15.052,26.439 14.709,26.492 C14.599,26.508 14.489,26.508 14.379,26.508 L1.624,26.508 C1.554,26.508 1.487,26.51 1.42,26.506 C0.956,26.479 0.805,26.324 0.805,25.856 L0.805,17.01 Z" />
+									{this.props.hasReward && (
+										<circle cx="15" cy="10" r="5" fill="purple" />
+									)}
 								</g>
 							</svg>
 							<span>{ t('panel_detail_menu_rewards_title') }</span>

app/panel/components/Panel.jsx

@@ -36,7 +36,6 @@ class Panel extends React.Component {
 		// try to get tabId from query string if available (FF for Android only)
 		const tabId = new URLSearchParams(window.location.search).get('tabId');
 		this.props.actions.getPanelData(tabId).then((data) => {
-			console.log('panelData', data);
 			if (data.is_expert) {
 				// load Detail component
 				this.props.history.push('/detail');

app/panel/components/Rewards.jsx

@@ -51,7 +51,7 @@ class Rewards extends React.Component {
 				const reward = nextProps.rewards[key].offer_data;
 				return {
 					id: reward.offer_id,
-					unread: false,
+					unread: nextProps.unread_offer_ids.indexOf(reward.offer_id) !== -1,
 					code: reward.ui_info.template_data.code || 'C0D3_DNE',
 					text: reward.ui_info.template_data.title || 'reward title',
 					description: reward.ui_info.template_data.desc || 'reward description',

app/panel/containers/DetailContainer.js

@@ -26,6 +26,8 @@ import * as actions from '../actions/DetailActions';
  */
 const mapStateToProps = (state, ownProps) => Object.assign({}, state.detail, {
 	is_expanded: state.panel.is_expanded,
+	enable_offers: state.panel.enable_offers,
+	unread_offer_ids: state.panel.unread_offer_ids,
 });
 /**
  * Bind Detailed view action creators using Redux's bindActionCreators

app/panel/reducers/panel.js

@@ -23,7 +23,11 @@ import {
 	TOGGLE_EXPANDED,
 	TOGGLE_EXPERT,
 	TOGGLE_CLIQZ_FEATURE,
-	UPDATE_NOTIFICATION_STATUS
+	UPDATE_NOTIFICATION_STATUS,
+	TOGGLE_CHECKBOX,
+	TOGGLE_OFFERS_ENABLED,
+	REMOVE_OFFER,
+	SET_OFFER_READ
 } from '../constants/constants';
 import { sendMessage, sendMessageInPromise } from '../utils/msg';
 
@@ -141,6 +145,27 @@ export default (state = initialState, action) => {
 			const updated = _updateNotificationStatus(state, action);
 			return Object.assign({}, state, updated);
 		}
+		case TOGGLE_CHECKBOX: {
+			if (action.data.event === 'enable_offers') {
+				const enable_offers = action.data.checked;
+				return Object.assign({}, state, { enable_offers });
+			}
+			return state;
+		}
+		case TOGGLE_OFFERS_ENABLED: {
+			const enable_offers = action.data.enabled;
+			return Object.assign({}, state, { enable_offers });
+		}
+		case REMOVE_OFFER:
+		case SET_OFFER_READ: {
+			const unread_offer_ids = state.unread_offer_ids.slice();
+			const idx = unread_offer_ids.indexOf(action.data.id);
+			if (idx !== -1) {
+				unread_offer_ids.splice(idx, 1);
+				return Object.assign({}, state, { unread_offer_ids });
+			}
+			return state;
+		}
 		default: return state;
 	}
 };

app/panel/reducers/rewards.js

@@ -17,11 +17,12 @@ import {
 	REMOVE_OFFER,
 	SET_OFFER_READ
 } from '../constants/constants';
-import { sendMessage } from '../utils/msg';
+import { sendMessage, sendRewardMessage } from '../utils/msg';
 
 const initialState = {
 	rewards: null,
 	enable_offers: false,
+	unread_offer_ids: [],
 };
 
 /**
@@ -44,12 +45,29 @@ export default (state = initialState, action) => {
 		}
 
 		case REMOVE_OFFER: {
-			console.log('removing an offer does not work right now');
-			return state;
+			// Remove offer from unread array
+			const unread_offer_ids = state.unread_offer_ids.slice();
+			const idx = unread_offer_ids.indexOf(action.data.id);
+			if (idx !== -1) {
+				unread_offer_ids.splice(idx, 1);
+			}
+
+			// Remove offer from offers list
+			const rewards = Object.assign({}, state.rewards);
+			delete rewards[action.data.id];
+
+			sendRewardMessage('deleteReward', { offerId: action.data.id });
+			return Object.assign({}, state, { unread_offer_ids, rewards });
 		}
 
 		case SET_OFFER_READ: {
-			console.log('setting an offer to read does not work right now');
+			const unread_offer_ids = state.unread_offer_ids.slice();
+			const idx = unread_offer_ids.indexOf(action.data.id);
+			if (idx !== -1) {
+				unread_offer_ids.splice(idx, 1);
+				sendRewardMessage('rewardSeen', { offerId: action.data.id });
+				return Object.assign({}, state, { unread_offer_ids });
+			}
 			return state;
 		}
 		default: return state;

app/panel/utils/msg.js

@@ -85,3 +85,27 @@ export function sendMessage(name, message, callback = function () {}) {
 		message,
 	}, callback);
 }
+
+/**
+ * Send a message to the handlers in src/background relating to rewards.
+ * This should be used for messages that don't require a callback.
+ * @memberOf PanelUtils
+ *
+ * @param  {string} 	name 		message name
+ * @param  {Object} 	message 	message data
+ * @param  {function} 	callback 	callback message
+ * @return {Object}		response
+ * @todo  runtime.sendMessage does not return any value.
+ */
+export function sendRewardMessage(name, message, callback = function () {}) {
+	log('Panel sendMessage: sending to background', name);
+	// @EDGE chrome.runtime.sendMessage(message) works, but
+	// const callback; chrome.runtime.sendMessage(message, callback) fails to execute and chrome.runtime.lastError is undefined.
+	// const fallback = function () {}; // Workaround for Edge. callback cannot be undefined.
+	// callback = callback || fallback;
+	return chrome.runtime.sendMessage({
+		name,
+		message,
+		origin: 'rewardsPanel',
+	}, callback);
+}

src/background.js

@@ -20,7 +20,7 @@
  */
 import _ from 'underscore';
 import moment from 'moment/min/moment-with-locales.min';
-import cliqz from './classes/cliqz';
+import cliqz from './classes/Cliqz';
 // object classes
 import Button from './classes/BrowserButton';
 import Events from './classes/EventHandlers';
@@ -415,16 +415,15 @@ function handleBlockedRedirect(name, message, tab_id, callback) {
 
 function handleRewards(name, message, tab_id, callback) {
 	if (name === 'rewardSignal') {
-		console.log('sendMessage rewardSignal');
 		rewards.sendSignal(message);
 	}
-
 	if (name === 'rewardSeen') {
 		rewards.markRewardRead(message.offerId);
+		button.update();
 	}
-
 	if (name === 'deleteReward') {
 		rewards.deleteReward(message.offerId);
+		button.update();
 	}
 }
 
@@ -522,7 +521,6 @@ function onMessageHandler(request, sender, callback) {
 	const {
 		name, message, messageId, origin
 	} = request;
-	console.log('REQUESTORIGIN', origin);
 	const { tab } = sender;
 	const tab_id = tab && tab.id;
 	// Edge does not have url on tab object, as of Build 14342_rc1
@@ -565,7 +563,7 @@ function onMessageHandler(request, sender, callback) {
 		return handleClick2Play(name, message, tab_id, callback);
 	} else if (origin === 'blocked_redirect') {
 		return handleBlockedRedirect(name, message, tab_id, callback);
-	} else if (origin === 'rewards') {
+	} else if (origin === 'rewards' || origin === 'rewardsPanel') {
 		return handleRewards(name, message, tab_id, callback);
 	}
 
@@ -1112,6 +1110,7 @@ messageCenter.on('enabled', () => {
 				}
 
 				log('RECEIVED OFFER', msg);
+				button.update();
 				utils.getActiveTab((tab) => {
 					let tabId = 0;
 					if (tab) tabId = tab.id;

src/classes/BrowserButton.js

@@ -15,13 +15,12 @@
 
 import conf from './Conf';
 import foundBugs from './FoundBugs';
+import rewards from './Rewards';
 import Policy from './Policy';
 import { getTab } from '../utils/utils';
 import { log } from '../utils/common';
 import globals from './Globals';
 
-const HAS_NEW_REWARD = true;
-
 /**
  * @class for handling Ghostery button.
  * @memberof BackgroundClasses
@@ -80,7 +79,7 @@ class BrowserButton {
 		if (tabId <= 0) { return; }
 
 		const iconAlt = (!active) ? '_off' :
-			(conf.enable_offers && HAS_NEW_REWARD) ? '_star' : '';
+			(conf.enable_offers && rewards.unreadOfferIds.length > 0) ? '_star' : '';
 
 		chrome.browserAction.setIcon({
 			path: {
@@ -108,7 +107,7 @@ class BrowserButton {
 					if (conf.show_badge) {
 						// Don't show badgeText when there is a new reward and Ghostery is active
 						// Otherwise set the tracker count to the badgeText
-						const text = (conf.enable_offers && HAS_NEW_REWARD && active) ? '' : trackerCount;
+						const text = (conf.enable_offers && rewards.unreadOfferIds.length && active) ? '' : trackerCount;
 						chrome.browserAction.setBadgeText({ text, tabId });
 
 						// Set badge background color

src/classes/EventHandlers.js

@@ -22,7 +22,6 @@ import cmp from './CMP';
 import conf from './Conf';
 import foundBugs from './FoundBugs';
 import globals from './Globals';
-import HotDog from './HotDog';
 import latency from './Latency';
 import Policy, { BLOCK_REASON_SS_UNBLOCKED, BLOCK_REASON_C2P_ALLOWED_THROUGH } from './Policy';
 import PolicySmartBlock from './PolicySmartBlock';
@@ -49,7 +48,6 @@ class EventHandlers {
 		this.policy = new Policy();
 		this.policySmartBlock = new PolicySmartBlock();
 		this.purplebox = new PurpleBox();
-		this.hotdog = new hotdog();
 	}
 
 	/**
@@ -115,7 +113,6 @@ class EventHandlers {
 					tabInfo.setTabInfo(tabId, 'incognito', tab.incognito);
 					// purplebox.createBox() will first check to make sure this is a valid tab
 					this._createBox(tabId);
-					this.hotdog.showCircle();
 				}
 			}, () => {
 				// prefetched tabs will return an error from utils.getTab