Feature/rewards integration

_locales/en/messages.json

@@ -756,9 +756,21 @@
 	"panel_detail_rewards_title": {
 		"message": "Ghostery Rewards"
 	},
-	"panel_detail_rewards_text": {
+	"panel_detail_rewards_coming_soon": {
 		"message": "Feature coming soon."
 	},
+	"panel_detail_rewards_cliqz_text": {
+		"message": "Feature already active in the Cliqz MyOffrz control panel."
+	},
+	"panel_detail_rewards_loading": {
+		"message": "Loading Rewards..."
+	},
+	"panel_detail_rewards_none_found": {
+		"message": "No Rewards found"
+	},
+	"panel_detail_rewards_off": {
+		"message": "Ghostery Rewards is off"
+	},
 	"panel_detail_premium_title": {
 		"message": "Ghostery Premium"
 	},
@@ -1602,5 +1614,83 @@
 	},
 	"enable_when_not_scanned": {
 		"message": "To use this function, navigate to another page."
+	},
+	"rewards_new_text": {
+		"message": "new Reward was discovered"
+	},
+	"rewards_copy_code": {
+		"message": "copy code"
+	},
+	"rewards_code_copied": {
+		"message": "code copied"
+	},
+	"rewards_expires_in": {
+		"description": "example: Expires in 8 minutes. TYPE will be rewards_expires_in_TYPE listed below.",
+		"message": "Expires in $COUNT$ $TYPE$",
+		"placeholders": {
+			"count": {
+				"content": "$1"
+			},
+			"type": {
+				"content": "$2"
+			}
+		}
+	},
+	"rewards_expires_in_days": {
+		"message": "days"
+	},
+	"rewards_expires_in_hours": {
+		"message": "hours"
+	},
+	"rewards_expires_in_mins": {
+		"message": "minutes"
+	},
+	"rewards_expires_in_secs": {
+		"message": "seconds"
+	},
+	"rewards_terms_conditions": {
+		"message": "Terms & Conditions"
+	},
+	"rewards_disable": {
+		"message": "Turn off Ghostery rewards"
+	},
+	"rewards_disable_notification": {
+		"message": "Ghostery Rewards is now off. You can always turn it on in Ghostery Settings or in the Ghostery Dashboard."
+	},
+	"rewards_disable_confirm": {
+		"message": "OK, got it."
+	},
+	"rewards_about": {
+		"message": "About Ghostery Rewards"
+	},
+	"rewards_settings": {
+		"message": "Ghostery Rewards Settings"
+	},
+	"rewards_delete": {
+		"message": "Delete this reward"
+	},
+	"rewards_first_prompt": {
+		"message": "Would you like to continue to Ghostery Rewards?"
+	},
+	"rewards_second_prompt": {
+		"message": "Are you sure you would like to opt-out of Ghostery Rewards?"
+	},
+	"rewards_on": {
+		"message": "on"
+	},
+	"rewards_off": {
+		"message": "off"
+	},
+	"rewards_on_toast_notification": {
+		"message": "Ghostery Rewards is ON"
+	},
+	"rewards_off_toast_notification": {
+		"message": "Ghostery Rewards is OFF"
+	},
+	"rewards_code_copied_toast_notification": {
+		"message": "Rewards code copied!"
+	},
+	"rewards_learn_more": {
+		"message": "Learn More"
 	}
 }

app/content-scripts/rewards/HotDog.jsx

@@ -0,0 +1,92 @@
+import React, { Component } from 'react';
+import { withRouter } from 'react-router-dom';
+import msgModule from '../utils/msg';
+import { log } from '../../../src/utils/common';
+
+const msg = msgModule('hotdog');
+const { sendMessage } = msg;
+
+class HotDog extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			closed: false
+		};
+
+		this.iframeEl = window.parent.document.getElementById('ghostery-iframe-container');
+		if (this.iframeEl) {
+			this.iframeEl.classList = '';
+			this.iframeEl.classList.add('hot-dog');
+		}
+
+		this.ghostyStar = `url(${chrome.extension.getURL('app/images/rewards/ghosty-star.svg')})`;
+		this.closeIcon = `url(${chrome.extension.getURL('app/images/rewards/light-x.svg')})`;
+
+		this.close = this.close.bind(this);
+		this.navigate = this.navigate.bind(this);
+	}
+
+	componentWillReceiveProps(nextProps) {
+		if (nextProps.reward && nextProps.reward !== null) {
+			this.sendSignal('offer_notification_hotdog', nextProps);
+		}
+	}
+
+	messageBackground(name, message) {
+		if (this.props.port) {
+			this.props.port.postMessage({
+				name,
+				message
+			});
+		} else {
+			sendMessage(name, message);
+		}
+	}
+
+	sendSignal(actionId, props = this.props) {
+		// Cliqz metrics
+		const offerId = props.reward.offer_id;
+		const message = {
+			offerId,
+			actionId
+		};
+		this.messageBackground('rewardSignal', message);
+	}
+
+	navigate() {
+		this.sendSignal('offer_click_hotdog');
+		if (this.iframeEl) {
+			this.iframeEl.classList.add('offer-card');
+		}
+		this.props.history.push('/offercard');
+	}
+
+	close() {
+		this.sendSignal('offer_closed_hotdog');
+		if (this.iframeEl) {
+			this.iframeEl.classList = '';
+		}
+		this.setState({
+			closed: true
+		});
+	}
+
+	render() {
+		return (
+			<div className="ghostery-rewards-component">
+				{ this.state.closed !== true &&
+					<div>
+						<div onClick={this.navigate} className="hot-dog-container" style={{ backgroundImage: this.ghostyStar }} >
+							<div className="ghostery-reward-text">
+								1 {t('rewards_new_text')}!
+							</div>
+						</div>
+						<div className="hot-dog-close" onClick={this.close} style={{ backgroundImage: this.closeIcon }} />
+					</div>
+				}
+			</div>
+		);
+	}
+}
+
+export default withRouter(HotDog);

app/content-scripts/rewards/Notification.jsx

@@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+
+class Notification extends Component {
+	constructor(props) {
+		super(props);
+		this.closeIcon = `url(${chrome.extension.getURL('app/images/rewards/white-x.svg')})`;
+		this.state = {
+			closed: false
+		};
+
+		this.closeNotification = this.closeNotification.bind(this);
+	}
+
+	closeNotification(confirm = null) {
+		this.setState({
+			closed: true
+		});
+		if (typeof this.props.data.closeCallback === 'function' && confirm !== null) {
+			this.props.data.closeCallback(confirm);
+		}
+	}
+
+	render() {
+		return (
+			<div>
+				{!this.state.closed &&
+					<div className="rewards-notification-container rewards-popup-container">
+						<div className={`rewards-notification ${this.props.data.type}`}>
+							<div className="close" onClick={() => { this.closeNotification(); }} style={{ backgroundImage: this.closeIcon }} />
+							<div className="notification-text">
+								{this.props.data.message}
+							</div>
+							{this.props.data.buttons &&
+								<div className="notification-buttons">
+									<div onClick={(e) => { this.closeNotification(true); }}>
+										Yes
+									</div>
+									<div onClick={(e) => { this.closeNotification(false); }}>
+										No
+									</div>
+								</div>
+							}
+							{this.props.data.textLink
+								&& <a className="notification-text" href={this.props.data.textLink.href} target="_blank" onClick={this.props.data.textLink.callback || this.props.data.closeCallback}>{this.props.data.textLink.text}</a>
+							}
+						</div>
+					</div>
+				}
+			</div>
+		);
+	}
+}
+
+export default Notification;