+
+ );
+ }
+}
+
+export default Notification;
diff --git a/app/content-scripts/rewards/OfferCard.jsx b/app/content-scripts/rewards/OfferCard.jsx
new file mode 100644
index 000000000..268f4c748
--- /dev/null
+++ b/app/content-scripts/rewards/OfferCard.jsx
@@ -0,0 +1,299 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Link } from 'react-router-dom';
+import msgModule from '../utils/msg';
+import { computeTimeDelta } from '../../panel/utils/utils';
+import { log } from '../../../src/utils/common';
+import Notification from './Notification';
+import Settings from './Settings';
+import ClickOutside from '../../panel/components/helpers/ClickOutside';
+import Tooltip from '../../panel/components/Tooltip';
+
+const msg = msgModule('rewards');
+const { sendMessage } = msg;
+
+class OfferCard extends Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ closed: false,
+ copyText: t('rewards_copy_code'),
+ showPrompt: this.props.conf.rewardsPromptAccepted ? false : 1,
+ showSettings: false,
+ rewardUI: props.reward && props.reward.offer_data && props.reward.offer_data.ui_info.template_data || {},
+ };
+
+ this.iframeEl = window.parent.document.getElementById('ghostery-iframe-container');
+ if (this.iframeEl) {
+ this.iframeEl.classList = '';
+ this.iframeEl.classList.add('offer-card');
+ }
+
+ this.betaLogo = `url(${chrome.extension.getURL('app/images/rewards/ghostery-rewards-beta.png')})`;
+ this.closeIcon = `url(${chrome.extension.getURL('app/images/drawer/x.svg')})`;
+ this.ghostyGrey = `url(${chrome.extension.getURL('app/images/rewards/ghosty-grey.svg')})`;
+ this.kebabIcon = `url(${chrome.extension.getURL('app/images/rewards/settings-kebab.svg')})`;
+
+ this.closeOfferCard = this.closeOfferCard.bind(this);
+ this.copyCode = this.copyCode.bind(this);
+ this.disableRewards = this.disableRewards.bind(this);
+ this.disableRewardsNotification = this.disableRewardsNotification.bind(this);
+ this.toggleSettings = this.toggleSettings.bind(this);
+ this.handleImageLoaded = this.handleImageLoaded.bind(this);
+ this.handlePrompt = this.handlePrompt.bind(this);
+
+ this.notifications = [
+ {
+ type: 'first-prompt',
+ buttons: true,
+ message: t('rewards_first_prompt'),
+ textLink: {
+ href: 'https://www.ghostery.com/faqs',
+ text: t('rewards_learn_more'),
+ callback: this.sendSignal('offer_first_learn')
+ },
+ closeCallback: (option) => { this.handlePrompt(1, option); },
+ },
+ {
+ type: 'second-prompt',
+ buttons: true,
+ message: t('rewards_second_prompt'),
+ textLink: {},
+ closeCallback: (option) => { this.handlePrompt(2, option); },
+ },
+ {
+ type: 'disabled-message',
+ buttons: false,
+ message: t('rewards_disable_notification'),
+ textLink: {
+ text: t('rewards_disable_confirm')
+ },
+ closeCallback: this.closeOfferCard,
+ }
+ ];
+
+ const { reward } = props;
+ this.messageBackground('rewardSeen', {
+ offerId: reward.offer_id
+ });
+ this.sendSignal('offer_shown', { reward });
+ this.sendSignal('offer_dsp_session', { reward });
+ this.sendSignal('offer_shown_card', { reward });
+ }
+
+ 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);
+ }
+
+ copyCode() {
+ this.sendSignal('code_copied');
+ this.offerCardRef.querySelector('.reward-code-input').select();
+ document.execCommand('copy');
+
+ // 'copied' feedback for user
+ this.setState({
+ copyText: `${t('rewards_code_copied')}!`
+ });
+
+ // prevent multiple clicks
+ clearTimeout(this.timeout);
+ this.timeout = setTimeout(() => {
+ this.setState({
+ copyText: t('rewards_copy_code')
+ });
+ }, 3000);
+ }
+
+ toggleSettings(e) {
+ if (!this.state.showSettings) {
+ this.sendSignal('offer_settings');
+ }
+ this.setState({
+ showSettings: !this.state.showSettings
+ });
+ }
+
+ disableRewards() {
+ this.sendSignal('rewards_off');
+ this.messageBackground('rewardsDisabled');
+ }
+
+ disableRewardsNotification() {
+ this.disableRewards();
+ this.setState({
+ showPrompt: 3
+ });
+ }
+
+ handlePrompt(promptNumber, option) {
+ // @TODO update user settings
+ if (promptNumber === 1) {
+ if (!option) {
+ this.setState({
+ showPrompt: 2
+ });
+ return;
+ }
+ this.sendSignal('offer_first_optin');
+ } else if (promptNumber === 2) {
+ if (option) {
+ this.sendSignal('offer_first_optout');
+ this.disableRewards();
+ this.closeOfferCard();
+ return;
+ }
+ this.sendSignal('offer_first_optlater');
+ }
+ this.setState({
+ showPrompt: false
+ });
+ this.messageBackground('rewardsPromptAccepted');
+ }
+
+ closeOfferCard() {
+ if (this.iframeEl) {
+ this.iframeEl.classList = '';
+ }
+ this.setState({
+ closed: true
+ });
+ }
+
+ redeem() {
+ this.sendSignal('offer_ca_action');
+ }
+
+ handleImageLoaded(e) {
+ e.target.classList.remove('hide');
+ }
+
+ renderNotification(type) {
+ const notificationProps = this.notifications[type];
+ return (
+
+
+ }
+ { this.closeNotification(); }} style={{ backgroundImage: this.closeIcon }} />
+
+
+ {this.props.data.message}
+
+ {this.props.data.buttons &&
+
+
+ }
+ {this.props.data.textLink
+ && {this.props.data.textLink.text}
+ }
+ { this.closeNotification(true); }}>
+ Yes
+
+ { this.closeNotification(false); }}>
+ No
+
+ { this.offerCardRef = ref; }} className="ghostery-rewards-component">
+ { this.state.closed !== true &&
+
+ { this.state.showPrompt === 1 &&
+ this.renderNotification(0)
+ }
+ { this.state.showPrompt === 2 &&
+ this.renderNotification(1)
+ }
+ { this.state.showPrompt === 3 &&
+ this.renderNotification(2)
+ }
+
+
+
+
+ );
+ this.renderReact();
+ this.initListener();
+ }
+
+ renderIframe() {
+ this.rewardsIframe = document.createElement('iframe');
+ this.rewardsIframe.id = 'ghostery-iframe-container';
+ this.rewardsIframe.classList.add('hot-dog');
+ this.rewardsIframe.onload = () => {
+ this.iframeStyle = document.createElement('link');
+ this.iframeStyle.rel = 'stylesheet';
+ this.iframeStyle.type = 'text/css';
+ this.iframeStyle.href = chrome.extension.getURL('dist/css/rewards_styles.css');
+
+ this.rewardsIframe.contentWindow.document.head.appendChild(this.iframeStyle);
+ this.rewardsContainer = this.rewardsIframe.contentWindow.document.body;
+
+ this.rewardsApp.classList.add('iframe-child');
+ this.rewardsContainer.appendChild(this.rewardsApp);
+ this.mainView = props => (
+
+
+ );
+ this.renderReact();
+ this.initListener();
+ };
+ document.body.appendChild(this.rewardsIframe);
+ }
+
+ initListener() {
+ if (channelsSupported) {
+ this.port = chrome.runtime.connect({ name: 'rewardsPort' });
+ if (this.port) {
+ this.port.onMessage.addListener(this.handleMessages);
+ this.port.postMessage({ name: 'rewardsLoaded' });
+ }
+ } else {
+ // TODO listen for this in background.js
+ sendMessage('rewardsLoaded');
+ onMessage.addListener(this.handleMessages);
+ }
+ }
+
+ handleMessages(request, sender, response) {
+ if (request.name === 'showHotDog') {
+ this.reward = request.reward;
+ this.conf = request.conf;
+ }
+ if (document.readyState === 'complete' || document.readyState === 'interactive') {
+ this.renderReact();
+ }
+ }
+}
+
+const rewardsApp = new RewardsApp();
diff --git a/app/images/icon19.png b/app/images/icon19.png
index aee8be927..5b8af3175 100644
Binary files a/app/images/icon19.png and b/app/images/icon19.png differ
diff --git a/app/images/icon19_off.png b/app/images/icon19_off.png
index 035844a28..15b2f16ac 100644
Binary files a/app/images/icon19_off.png and b/app/images/icon19_off.png differ
diff --git a/app/images/icon19_star.png b/app/images/icon19_star.png
new file mode 100644
index 000000000..74184ca14
Binary files /dev/null and b/app/images/icon19_star.png differ
diff --git a/app/images/icon38.png b/app/images/icon38.png
index 9e67dc30f..e62dcc553 100644
Binary files a/app/images/icon38.png and b/app/images/icon38.png differ
diff --git a/app/images/icon38_off.png b/app/images/icon38_off.png
index 9c0afbdb9..45ad51396 100644
Binary files a/app/images/icon38_off.png and b/app/images/icon38_off.png differ
diff --git a/app/images/icon38_star.png b/app/images/icon38_star.png
new file mode 100644
index 000000000..6257b6b97
Binary files /dev/null and b/app/images/icon38_star.png differ
diff --git a/app/images/rewards/ghostery-rewards-beta.png b/app/images/rewards/ghostery-rewards-beta.png
new file mode 100644
index 000000000..929d71fc8
Binary files /dev/null and b/app/images/rewards/ghostery-rewards-beta.png differ
diff --git a/app/images/rewards/ghosty-grey.svg b/app/images/rewards/ghosty-grey.svg
new file mode 100644
index 000000000..2d7ec32ed
--- /dev/null
+++ b/app/images/rewards/ghosty-grey.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/app/images/rewards/ghosty-star.svg b/app/images/rewards/ghosty-star.svg
new file mode 100644
index 000000000..a7eb6b239
--- /dev/null
+++ b/app/images/rewards/ghosty-star.svg
@@ -0,0 +1,19 @@
+
+
diff --git a/app/images/rewards/light-x.svg b/app/images/rewards/light-x.svg
new file mode 100644
index 000000000..8c2bee580
--- /dev/null
+++ b/app/images/rewards/light-x.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/app/images/rewards/settings-kebab.svg b/app/images/rewards/settings-kebab.svg
new file mode 100644
index 000000000..77f05427d
--- /dev/null
+++ b/app/images/rewards/settings-kebab.svg
@@ -0,0 +1,16 @@
+
+
\ No newline at end of file
diff --git a/app/images/rewards/white-x.svg b/app/images/rewards/white-x.svg
new file mode 100644
index 000000000..5ff6fa78a
--- /dev/null
+++ b/app/images/rewards/white-x.svg
@@ -0,0 +1,12 @@
+
+
diff --git a/app/panel/actions/PanelActions.js b/app/panel/actions/PanelActions.js
index a3dbb2404..a96b6b977 100644
--- a/app/panel/actions/PanelActions.js
+++ b/app/panel/actions/PanelActions.js
@@ -13,8 +13,8 @@
import {
GET_PANEL_DATA, GET_SUMMARY_DATA, GET_BLOCKING_DATA,
- SHOW_NOTIFICATION,
TOGGLE_CLIQZ_FEATURE,
+ SHOW_NOTIFICATION,
CLOSE_NOTIFICATION,
TOGGLE_EXPERT,
LOGIN_SUCCESS, LOGIN_FAILED,
@@ -44,7 +44,6 @@ export function toggleCliqzFeature(featureName, isEnabled) {
};
}
-
/**
* Fetch panel data from background, only on the initial load. Returns combined
* Panel, Summary and Blocking data as needed.
diff --git a/app/panel/actions/RewardsActions.js b/app/panel/actions/RewardsActions.js
new file mode 100644
index 000000000..b8faeef5d
--- /dev/null
+++ b/app/panel/actions/RewardsActions.js
@@ -0,0 +1,86 @@
+/**
+ * Rewards Action creators
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2018 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 {
+ GET_REWARDS_DATA,
+ TOGGLE_OFFERS_ENABLED,
+ REMOVE_OFFER,
+ SET_OFFER_READ,
+ SEND_SIGNAL
+} from '../constants/constants';
+import { sendMessageInPromise } from '../utils/msg';
+
+/**
+ * Fetch rewards data from background
+ * @param {Object} tabId null
+ * @return {Object} dispatch
+ */
+export function getRewardsData(tabId) {
+ return function (dispatch) {
+ return sendMessageInPromise('getPanelData', {
+ tabId,
+ view: 'rewards',
+ }).then((data) => {
+ dispatch({
+ type: GET_REWARDS_DATA,
+ data,
+ });
+ });
+ };
+}
+
+/**
+* Toggles Rewards on/off
+* @param {Boolean} enabled Whether offers should be enabled or not.
+* @return {Object}
+*/
+export function toggleOffersEnabled(enabled) {
+ return {
+ type: TOGGLE_OFFERS_ENABLED,
+ data: { enabled },
+ };
+}
+
+/**
+ * Removes a reward from the rewards list
+ * @param {String} id The ID of the reward we want to remove.
+ * @return {Object}
+ */
+export function removeOffer(id) {
+ return {
+ type: REMOVE_OFFER,
+ data: { id }
+ };
+}
+
+/**
+ * Sets the unread status of an offer to false
+ * @param {String} id the ID of the reward we want to update.
+ * @return {Object}
+ */
+export function setOfferRead(id) {
+ return {
+ type: SET_OFFER_READ,
+ data: { id }
+ };
+}
+
+export function sendSignal(actionId, offerId) {
+ return {
+ type: SEND_SIGNAL,
+ data: {
+ actionId,
+ offerId
+ }
+ };
+}
diff --git a/app/panel/actions/SummaryActions.js b/app/panel/actions/SummaryActions.js
index f2d5f7523..09421df3a 100644
--- a/app/panel/actions/SummaryActions.js
+++ b/app/panel/actions/SummaryActions.js
@@ -16,8 +16,7 @@ import {
UPDATE_TRACKER_COUNTS,
UPDATE_GHOSTERY_PAUSED,
UPDATE_SITE_POLICY,
- FILTER_TRACKERS,
- TOGGLE_EXPERT
+ FILTER_TRACKERS
} from '../constants/constants';
import { sendMessageInPromise } from '../utils/msg';
diff --git a/app/panel/actions/__tests__/RewardsActions.js b/app/panel/actions/__tests__/RewardsActions.js
new file mode 100644
index 000000000..a0ef98416
--- /dev/null
+++ b/app/panel/actions/__tests__/RewardsActions.js
@@ -0,0 +1,102 @@
+/**
+ * Test file for Rewards Actions
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2018 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 configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import * as msg from '../../utils/msg';
+import * as rewardsActions from '../RewardsActions';
+import {
+ GET_REWARDS_DATA,
+ TOGGLE_OFFERS_ENABLED,
+ REMOVE_OFFER,
+ SET_OFFER_READ,
+ SEND_SIGNAL
+} from '../../constants/constants';
+
+const middlewares = [thunk];
+const mockStore = configureStore(middlewares);
+
+const testData = { test: true };
+msg.sendMessageInPromise = jest.fn(messageType => new Promise((resolve, reject) => {
+ switch (messageType) {
+ case 'getPanelData':
+ resolve(testData);
+ break;
+ default:
+ resolve();
+ }
+}));
+
+describe('app/panel/actions/RewardsActions.js', () => {
+ test('getRewardsData action should return correctly', () => {
+ const initialState = {};
+ const store = mockStore(initialState);
+
+ const data = testData;
+ const expectedPayload = { data, type: GET_REWARDS_DATA };
+
+ return store.dispatch(rewardsActions.getRewardsData()).then(() => {
+ const actions = store.getActions();
+ expect(actions).toEqual([expectedPayload]);
+ });
+ });
+
+ test('toggleOffersEnabled action should return correctly', () => {
+ const initialState = {};
+ const store = mockStore(initialState);
+
+ const enabled = true;
+ const expectedPayload = { data: { enabled }, type: TOGGLE_OFFERS_ENABLED };
+ store.dispatch(rewardsActions.toggleOffersEnabled(enabled));
+
+ const actions = store.getActions();
+ expect(actions).toEqual([expectedPayload]);
+ });
+
+ test('removeOffer action should return correctly', () => {
+ const initialState = {};
+ const store = mockStore(initialState);
+
+ const id = 'test_reward_id';
+ const expectedPayload = { data: { id }, type: REMOVE_OFFER };
+ store.dispatch(rewardsActions.removeOffer(id));
+
+ const actions = store.getActions();
+ expect(actions).toEqual([expectedPayload]);
+ });
+
+ test('setOfferRead action should return correctly', () => {
+ const initialState = {};
+ const store = mockStore(initialState);
+
+ const id = 'test_reward_id';
+ const expectedPayload = { data: { id }, type: SET_OFFER_READ };
+ store.dispatch(rewardsActions.setOfferRead(id));
+
+ const actions = store.getActions();
+ expect(actions).toEqual([expectedPayload]);
+ });
+
+ test('sendSignal action should return correctly', () => {
+ const initialState = {};
+ const store = mockStore(initialState);
+
+ const actionId = 'action_id';
+ const offerId = 'offer_id';
+ const expectedPayload = { data: { actionId, offerId }, type: SEND_SIGNAL };
+ store.dispatch(rewardsActions.sendSignal(actionId, offerId));
+
+ const actions = store.getActions();
+ expect(actions).toEqual([expectedPayload]);
+ });
+});
diff --git a/app/panel/components/BuildingBlocks/RewardDetail.jsx b/app/panel/components/BuildingBlocks/RewardDetail.jsx
new file mode 100644
index 000000000..e271d51bf
--- /dev/null
+++ b/app/panel/components/BuildingBlocks/RewardDetail.jsx
@@ -0,0 +1,152 @@
+/**
+ * Reward Detail Component
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2018 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, { Component } from 'react';
+import ClassNames from 'classnames';
+import { computeTimeDelta } from '../../utils/utils';
+import { sendMessage } from '../../utils/msg';
+import Tooltip from '../Tooltip';
+
+/**
+ * @class Implements the details for a single reward for for the Rewards Panel
+ * @memberof PanelClasses
+ */
+class RewardDetail extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ copyText: t('rewards_copy_code'),
+ };
+
+ // Event Bindings
+ this.handleCopyClick = this.handleCopyClick.bind(this);
+ this.handleRedeemClick = this.handleRedeemClick.bind(this);
+ }
+
+ /**
+ * Lifecycle event
+ */
+ componentWillMount() {
+ this.props.actions.setOfferRead(this.props.id);
+ }
+
+ /**
+ * Handles clicking the copy button
+ */
+ handleCopyClick() {
+ // Copy the reward code
+ this.copyNode.querySelector('input').select();
+ document.execCommand('copy');
+
+ // Show a toast notification
+ this.props.actions.showNotification({
+ text: t('rewards_code_copied_toast_notification'),
+ classes: 'purple',
+ });
+
+ // Update and reset Copy Code text
+ this.setState({ copyText: t('rewards_code_copied') });
+ setTimeout(() => {
+ this.setState({ copyText: t('rewards_copy_code') });
+ }, 3000);
+
+ // Send a signal to the offers black box
+ this.props.actions.sendSignal('code_copied', this.props.id);
+ }
+
+ /**
+ * Handles clicking the redeem button
+ * @param {Object} event the event object
+ */
+ handleRedeemClick(event) {
+ event.preventDefault();
+ this.props.actions.sendSignal('offer_ca_action', this.props.id);
+ sendMessage('openNewTab', {
+ url: this.props.redeemUrl,
+ become_active: true,
+ });
+ window.close();
+ }
+
+ /**
+ * Helper render function for the expires text.
+ * @return {JSX} JSX for the Rewards Detail
+ */
+ renderExpiresText() {
+ const { expires } = this.props;
+ const delta = computeTimeDelta(new Date(expires), new Date());
+ return t('rewards_expires_in', [delta.count, t(`rewards_expires_in_${delta.type}`)]);
+ }
+
+ /**
+ * React's required render function. Returns JSX
+ * @return {JSX} JSX for rendering the details for a Reward
+ */
+ render() {
+ const {
+ code,
+ text,
+ description,
+ conditions,
+ logoUrl,
+ pictureUrl,
+ redeemText
+ } = this.props;
+
+ return (
+
);
diff --git a/app/panel/components/DetailMenu.jsx b/app/panel/components/DetailMenu.jsx
index 73405e037..174f471f8 100644
--- a/app/panel/components/DetailMenu.jsx
+++ b/app/panel/components/DetailMenu.jsx
@@ -79,66 +79,30 @@ class DetailMenu extends React.Component {
render() {
return (
+
+
+ );
+ }
+}
+
+export default OfferCard;
diff --git a/app/content-scripts/rewards/Settings.jsx b/app/content-scripts/rewards/Settings.jsx
new file mode 100644
index 000000000..c11a5899b
--- /dev/null
+++ b/app/content-scripts/rewards/Settings.jsx
@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+
+class Settings extends Component {
+ constructor(props) {
+ super(props);
+ this.closeIcon = `url(${chrome.extension.getURL('app/images/rewards/white-x.svg')})`;
+ this.state = {
+ closed: false
+ };
+
+ this.close = this.close.bind(this);
+ }
+
+ close() {
+ this.setState({
+ closed: true
+ });
+ if (typeof this.props.closeCallback === 'function') {
+ this.props.closeCallback();
+ }
+ }
+
+ render() {
+ return (
+ { this.sendSignal('offer_closed_card'); this.closeOfferCard(); }}
+ style={{ backgroundImage: this.closeIcon }}
+ />
+
+
+
}
+
+
+
+
+ 
+
+ { this.kebabRef = node; }}
+ />
+ { this.state.showSettings &&
+
+
+
+
+
+ }
+
+
+ 
+
+
+
+ {/* */}
+
+
+
+ { this.state.rewardUI.benefit }
+
+
+ { this.state.rewardUI.headline }
+
+
+ { this.state.rewardUI.desc }
+
+
+
+
+ {this.state.rewardUI.code}
+
+
+ {this.state.copyText}
+
+
+ { this.renderExpiresText() }
+
+ {this.state.rewardUI.conditions &&
+
+
+ {this.state.rewardUI.call_to_action.text}
+
+
+ { t('rewards_terms_conditions') }
+
+ }
+
+
+
+
+ {t('rewards_disable')}
+
+
+
+
+ {!this.state.closed &&
+
+ );
+ }
+}
+
+export default Settings;
diff --git a/app/content-scripts/rewards/index.jsx b/app/content-scripts/rewards/index.jsx
new file mode 100644
index 000000000..f65a3fbcf
--- /dev/null
+++ b/app/content-scripts/rewards/index.jsx
@@ -0,0 +1,154 @@
+/**
+ * Ghostery Rewards
+ *
+ * This file injects Ghostery Rewards
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2018 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 RewardsContentScript
+ */
+/* eslint no-use-before-define: 0 */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Router, Route } from 'react-router-dom';
+import ShadowDOM from 'react-shadow';
+import HotDog from './HotDog';
+import OfferCard from './OfferCard';
+import msgModule from '../utils/msg';
+import history from '../../panel/utils/history';
+import globals from '../../../src/classes/Globals';
+
+const msg = msgModule('rewards');
+const { sendMessage } = msg;
+const { BROWSER_INFO, onMessage } = globals;
+const viewport = document.getElementById('viewport');
+const channelsSupported = (typeof chrome.runtime.connect === 'function');
+
+class RewardsApp {
+ constructor() {
+ this.reward = null;
+ this.conf = null;
+ this.rewardsContainer = document.createElement('div');
+ this.rewardsApp = document.createElement('div');
+ this.rewardsIframe = null;
+ this.iframeStyle = null;
+ this.port = null;
+ this.mainView = null;
+ this.rewardsApp.id = 'ghostery-rewards-app';
+ this.rewardsApp.className = 'show';
+ this.handleMessages = this.handleMessages.bind(this);
+
+ this.init();
+ }
+
+ init() {
+ if (document.readyState === 'complete'
+ || document.readyState === 'loaded'
+ || document.readyState === 'interactive'
+ ) {
+ this.start();
+ } else {
+ document.addEventListener('DOMContentLoaded', (event) => {
+ this.start();
+ });
+ }
+ }
+
+ start() {
+ if (BROWSER_INFO.name === 'chrome') {
+ this.renderShadow();
+ } else {
+ // use iframe to encapsulate CSS - fallback for everything else besides chrome
+ this.renderIframe();
+ }
+ }
+
+ renderReact() {
+ const MainView = this.mainView;
+ ReactDOM.render(
+
}
+
+
+ {t('rewards_about')}
+
+ { this.close(); this.props.disable(); }}>
+ {t('rewards_disable')}
+
+
+ {/* {t('rewards_settings')}
+ {t('rewards_delete')}
*/}
+
+
+
+
+
+
+ );
+ }
+}
+
+export default RewardDetail;
diff --git a/app/panel/components/BuildingBlocks/RewardListItem.jsx b/app/panel/components/BuildingBlocks/RewardListItem.jsx
new file mode 100644
index 000000000..acc77232c
--- /dev/null
+++ b/app/panel/components/BuildingBlocks/RewardListItem.jsx
@@ -0,0 +1,122 @@
+/**
+ * Reward List Item Component
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2018 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, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import ClassNames from 'classnames';
+import { computeTimeDelta } from '../../utils/utils';
+
+/**
+ * @class Implements a single reward in a list for the Rewards Panel
+ * @memberof PanelClasses
+ */
+class RewardListItem extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {};
+
+ // Event Bindings
+ this.handleClick = this.handleClick.bind(this);
+ this.clickCloseButton = this.clickCloseButton.bind(this);
+ }
+
+ /**
+ * Handle the click event: everything normal unless it is disabled
+ * @param {Object} event the click event
+ */
+ handleClick(event) {
+ const { disabled, unread, id } = this.props;
+ if (disabled) {
+ event.preventDefault();
+ } else {
+ if (unread) {
+ this.props.actions.sendSignal('offer_click_specific_new', id);
+ }
+ this.props.actions.sendSignal('offer_click_specific', id);
+ }
+ }
+
+ /**
+ * Handle clicking on the close button
+ * @param {Object} event the click event
+ */
+ clickCloseButton(event) {
+ // Prevent the event from propagating and linking to the Reward Detail
+ event.preventDefault();
+
+ const { id } = this.props;
+ this.props.actions.removeOffer(id);
+ this.props.actions.sendSignal('remove_offer_link', id);
+ }
+
+ /**
+ * Helper render function for the expires text.
+ * @return {JSX} JSX for the Rewards Items List
+ */
+ renderExpiresText() {
+ const { expires } = this.props;
+ const delta = computeTimeDelta(new Date(expires), new Date());
+ return t('rewards_expires_in', [delta.count, t(`rewards_expires_in_${delta.type}`)]);
+ }
+
+ /**
+ * React's required render function. Returns JSX
+ * @return {JSX} JSX for rendering a Reward within the Rewards List
+ */
+ render() {
+ const {
+ id,
+ isLong,
+ text,
+ unread,
+ disabled,
+ logoUrl,
+ pictureUrl
+ } = this.props;
+ const itemClassName = ClassNames('RewardListItem', 'row', {
+ 'RewardListItem--greyscale': disabled,
+ 'RewardListItem--unread': unread,
+ 'RewardListItem--elongated': isLong,
+ 'not-clickable': disabled,
+ clickable: !disabled,
+ });
+
+ return (
+
+
+ 
+ 
+
+ {text && (
+
+ { text }
+
+ )}
+ {description && (
+
+ { description }
+
+ )}
+ {code && (
+
+ { this.copyNode = node; }}>
+ { code }
+
+
+
+ {this.state.copyText}
+
+
+ )}
+
+
+
+ { this.renderExpiresText() }
+
+ {conditions && (
+
+ { t('rewards_terms_conditions') }
+
+ )}
+
+ { redeemText }
+
+
+
+
+ );
+ }
+}
+
+export default RewardListItem;
diff --git a/app/panel/components/BuildingBlocks/ToggleSlider.jsx b/app/panel/components/BuildingBlocks/ToggleSlider.jsx
new file mode 100644
index 000000000..3b6daf219
--- /dev/null
+++ b/app/panel/components/BuildingBlocks/ToggleSlider.jsx
@@ -0,0 +1,83 @@
+/**
+ * Toggle Slider Component
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2018 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, { Component } from 'react';
+import ClassNames from 'classnames';
+
+/**
+ * @class Implements an on/off button as a slider component.
+ * Is used throughout the extension: Rewards Panel, (todo: more)
+ * @memberof PanelClasses
+ */
+class ToggleSlider extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ checked: this.props.isChecked,
+ };
+
+ // Event Bindings
+ this._handleChange = this._handleChange.bind(this);
+ }
+
+ /**
+ * Lifecycle event
+ */
+ componentWillReceiveProps(nextProps) {
+ this.setState({
+ checked: nextProps.isChecked,
+ });
+ }
+
+ /**
+ * Handles a change to the the slider. This will update the slider in one
+ * of two ways. It can use the `onChange` property to update the isChecked
+ * property in the parent. Or it can just set the state directly.
+ */
+ _handleChange(event) {
+ if (typeof this.props.onChange === 'function') {
+ this.props.onChange(event);
+ } else {
+ this.setState({
+ checked: !this.state.checked,
+ });
+ }
+ }
+
+ /**
+ * React's required render function. Returns JSX
+ * @return {JSX} JSX for rendering the Toggle Slider used throghout the extension
+ */
+ render() {
+ const compClassNames = ClassNames('ToggleSlider', this.props.className);
+ const labelClassNames = ClassNames('ToggleSlider__switch', {
+ disabled: this.props.isDisabled,
+ });
+
+ return (
+
+
+
+
+
+ { text }
+ { this.renderExpiresText() }
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default ToggleSlider;
diff --git a/app/panel/components/BuildingBlocks/index.js b/app/panel/components/BuildingBlocks/index.js
index 6d3ab2d18..a85c870d2 100644
--- a/app/panel/components/BuildingBlocks/index.js
+++ b/app/panel/components/BuildingBlocks/index.js
@@ -16,11 +16,17 @@ import DonutGraph from './DonutGraph';
import GhosteryFeatures from './GhosteryFeatures';
import NotScanned from './NotScanned';
import PauseButton from './PauseButton';
+import ToggleSlider from './ToggleSlider';
+import RewardDetail from './RewardDetail';
+import RewardListItem from './RewardListItem';
export {
CliqzFeatures,
DonutGraph,
GhosteryFeatures,
NotScanned,
- PauseButton
+ PauseButton,
+ ToggleSlider,
+ RewardDetail,
+ RewardListItem
};
diff --git a/app/panel/components/Detail.jsx b/app/panel/components/Detail.jsx
index cb33319e6..e623f2be4 100644
--- a/app/panel/components/Detail.jsx
+++ b/app/panel/components/Detail.jsx
@@ -19,7 +19,7 @@ import Summary from '../containers/SummaryContainer';
import Blocking from '../containers/BlockingContainer';
import History from './History';
import Performance from './Performance';
-import Rewards from './Rewards';
+import Rewards from '../containers/RewardsContainer';
import Premium from './Premium';
/**
* @class Implement wrapper of the detailed (expert) mode view.
@@ -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 (
@@ -73,7 +74,7 @@ class Detail extends React.Component {
0} />
-
-
+
+
);
diff --git a/app/panel/components/Rewards.jsx b/app/panel/components/Rewards.jsx
index aed35d791..b5c5a7aff 100644
--- a/app/panel/components/Rewards.jsx
+++ b/app/panel/components/Rewards.jsx
@@ -12,58 +12,265 @@
*/
import React, { Component } from 'react';
+import { Link, Route } from 'react-router-dom';
+import { ToggleSlider, RewardListItem, RewardDetail } from './BuildingBlocks';
import { sendMessage } from '../utils/msg';
+import globals from '../../../src/classes/Globals';
+
+const IS_EDGE = (globals.BROWSER_INFO.name === 'edge');
+const IS_CLIQZ = (globals.BROWSER_INFO.name === 'cliqz');
+
/**
- * @class Implement Rewards view which opens from a button in
- * the footer of the detailed view. See DetailMenu.jsx.
+ * @class The Rewards Panel shows offers generated by Ghostery Rewards.
+ * The panel is opened from a button in the Detailed View's footer.
+ * See DetailMenu.jsx.
* @memberof PanelClasses
*/
class Rewards extends React.Component {
constructor(props) {
super(props);
+ this.state = {
+ rewardsArray: null,
+ };
// event bindings
- this.openNewTab = this.openNewTab.bind(this);
+ this.toggleOffers = this.toggleOffers.bind(this);
+
+ // helper render functions
+ this.renderRewardListComponent = this.renderRewardListComponent.bind(this);
+ this.renderRewardDetailComponent = this.renderRewardDetailComponent.bind(this);
+ this.handleBackClick = this.handleBackClick.bind(this);
+ this.handleFaqClick = this.handleFaqClick.bind(this);
+ }
+
+ /**
+ * Lifecycle event
+ */
+ componentDidMount() {
+ this.props.actions.getRewardsData();
+ this.props.actions.sendSignal('hub_open');
+ }
+
+ /**
+ * Lifecycle event
+ */
+ componentWillReceiveProps(nextProps) {
+ const dateNow = new Date();
+ let rewardsArray = null;
+ if (nextProps.rewards) {
+ rewardsArray = Object.keys(nextProps.rewards).map((key) => {
+ const reward = nextProps.rewards[key].offer_data;
+ return {
+ id: reward.offer_id,
+ unread: nextProps.unread_offer_ids.indexOf(reward.offer_id) !== -1,
+ code: reward.ui_info.template_data.code,
+ text: reward.ui_info.template_data.title,
+ description: reward.ui_info.template_data.desc,
+ conditions: reward.ui_info.template_data.conditions,
+ logo_url: reward.ui_info.template_data.logo_url,
+ picture_url: reward.ui_info.template_data.picture_url,
+ redeem_url: reward.ui_info.template_data.call_to_action.url,
+ redeem_text: reward.ui_info.template_data.call_to_action.text,
+ expires: Math.round((new Date()).setDate(dateNow.getDate() + reward.expirationMs / 60 / 60 / 24)),
+ };
+ });
+ }
+ this.setState({ rewardsArray });
+ }
+
+ /**
+ * Lifecycle event
+ */
+ componentWillUnmount() {
+ this.props.actions.sendSignal('hub_closed');
}
+
+ /**
+ * Handles clicking the back button
+ */
+ handleBackClick() {
+ const offerId = this.props.location.pathname.split('/detail/rewards/detail/')[1];
+ this.props.actions.sendSignal('offer_return_hub', offerId);
+ }
+
/**
- * Open informational page from 'Learn More' button on the view.
+ * Handles clicking the learn more button
*/
- openNewTab() {
+ handleFaqClick() {
sendMessage('openNewTab', {
url: 'https:\/\/www.ghostery.com/faqs/what-new-ghostery-features-can-we-expect-in-the-future/',
become_active: true,
});
sendMessage('ping', 'rewards_learn');
- window.close();
}
+
/**
- * Render Rewards view.
- * @return {ReactComponent} ReactComponent instance
+ * Handles toggling rewards on/off
*/
- render() {
+ toggleOffers() {
+ const { enable_offers } = this.props;
+ this.props.actions.showNotification({
+ text: !enable_offers ? t('rewards_on_toast_notification') : t('rewards_off_toast_notification'),
+ classes: 'purple',
+ });
+ this.props.actions.toggleOffersEnabled(!enable_offers);
+ this.props.actions.sendSignal(enable_offers ? 'rewards_off' : 'rewards_on');
+ }
+
+ /**
+ * Helper render function for the Rewards Header
+ * @return {JSX} JSX for the Rewards Header
+ */
+ renderRewardsHeader() {
+ const { enable_offers, location } = this.props;
+ const showBack = location.pathname.indexOf('/detail/rewards/detail') !== -1;
+ const showToggle = location.pathname === '/detail/rewards/list';
+
+ return (
+
-
-
-
-
- { t('panel_detail_menu_history_title') }
-
-
-
-
-
- { t('panel_detail_menu_performance_title') }
-
-
-
-
-
+ {showBack && (
+
+
+
+ )}
+ { t('panel_detail_rewards_title') }
+ {showToggle && !IS_EDGE && !IS_CLIQZ && (
+
+
+ {enable_offers ? t('rewards_on') : t('rewards_off')}
+
+
+ );
+ }
+
+ /**
+ * Helper render function for Reward Icon SVG
+ * @return {JSX} JSX for the Rewards Icon SVG
+ */
+ renderRewardSvg() {
return (
-
-
{ t('panel_detail_rewards_title') }
-
-
{!IS_EDGE && !IS_CLIQZ &&
-
-
-
-
-
-
-
-
-
- { t('panel_detail_rewards_text') }
- -
- { t('panel_detail_learn_more') }
-
+
+ );
+ }
+
+ /**
+ * Helper render function for the list of Rewards Items
+ * @return {JSX} JSX for the Rewards Items List
+ */
+ renderRewardListComponent() {
+ const { actions, enable_offers, is_expanded } = this.props;
+ const { rewardsArray } = this.state;
+
+ if (IS_CLIQZ) {
+ return (
+
+ { this.renderRewardSvg() }
+
+
+ );
+ } else if (IS_EDGE) {
+ return (
+ { t('panel_detail_rewards_cliqz_text') }
+ +
+ { t('panel_detail_learn_more') }
+ { this.renderRewardSvg() }
+
+
+ );
+ } else if (enable_offers && !rewardsArray) {
+ return (
+ { t('panel_detail_rewards_coming_soon') }
+ +
+ { t('panel_detail_learn_more') }
+
+
+ { this.renderRewardSvg() }
+
+ );
+ } else if (enable_offers && rewardsArray.length === 0) {
+ return (
+ { t('panel_detail_rewards_loading') }
+
+ { this.renderRewardSvg() }
+
+ );
+ } else if (!enable_offers && (!rewardsArray || rewardsArray.length === 0)) {
+ return (
+ { t('panel_detail_rewards_none_found') }
+
+ { this.renderRewardSvg() }
+
+ );
+ }
+
+ const rewardsList = rewardsArray.map((reward, index) => (
+ { t('panel_detail_rewards_off') }
+ { rewardsList }
;
+ }
+
+ /**
+ * Helper render function for an individual Reward Item
+ * @return {JSX} JSX for the Rewards Detail Item
+ */
+ renderRewardDetailComponent(routeProps) {
+ const { id } = routeProps.match.params;
+ const reward = this.state.rewardsArray.find(el => el.id === id);
+
+ return (
+
+ {this.renderRewardsHeader()}
+
);
}
diff --git a/app/panel/components/Settings.jsx b/app/panel/components/Settings.jsx
index 3f4895e02..a1bfbc173 100644
--- a/app/panel/components/Settings.jsx
+++ b/app/panel/components/Settings.jsx
@@ -65,6 +65,9 @@ class Settings extends React.Component {
* @param {Object} event checking a checkbox event
*/
toggleCheckbox(event) {
+ if (event.currentTarget.name === 'enable_offers') {
+ this.props.actions.sendSignal(event.currentTarget.checked ? 'rewards_off' : 'rewards_on');
+ }
this.props.actions.toggleCheckbox({
event: event.currentTarget.name,
checked: event.currentTarget.checked,
diff --git a/app/panel/components/Settings/OptIn.jsx b/app/panel/components/Settings/OptIn.jsx
index 3701b114f..b6e883a3d 100644
--- a/app/panel/components/Settings/OptIn.jsx
+++ b/app/panel/components/Settings/OptIn.jsx
@@ -43,27 +43,27 @@ const OptIn = (props) => {
-
-
-
-
- 
+
+
+
- }
- {settingsData.enable_offers_abtest &&
-
+
-
+
+
+
+
+
+
-
-
-
-
+
+ ).toJSON();
+ expect(component).toMatchSnapshot();
+ });
+
+ test('reward list item is rendered correctly when disabled', () => {
+ const initialState = {
+ actions: {
+ getRewardsData: () => {},
+ toggleOffersEnabled: () => {},
+ removeOffer: () => {},
+ setOfferRead: () => {},
+ sendSignal: () => {}
+ },
+ disabled: true,
+ expires: 1527885633645,
+ id: 'test_reward_id',
+ index: 0,
+ isLong: false,
+ logoUrl: 'https://www.ghostery.com/wp-content/themes/ghostery/images/ghostery_logo.svg',
+ text: 'test reward title',
+ unread: false
+ };
+ const component = renderer.create(
+
+
+ ).toJSON();
+ expect(component).toMatchSnapshot();
+ });
+
+ test('reward list item is rendered correctly when unread', () => {
+ const initialState = {
+ actions: {
+ getRewardsData: () => {},
+ toggleOffersEnabled: () => {},
+ removeOffer: () => {},
+ setOfferRead: () => {},
+ sendSignal: () => {}
+ },
+ disabled: false,
+ expires: 1527885633645,
+ id: 'test_reward_id',
+ index: 0,
+ isLong: false,
+ logoUrl: 'https://www.ghostery.com/wp-content/themes/ghostery/images/ghostery_logo.svg',
+ text: 'test reward title',
+ unread: true
+ };
+ const component = renderer.create(
+
+
+ ).toJSON();
+ expect(component).toMatchSnapshot();
+ });
+
+ test('reward list item is rendered correctly when elongated', () => {
+ const initialState = {
+ actions: {
+ getRewardsData: () => {},
+ toggleOffersEnabled: () => {},
+ removeOffer: () => {},
+ setOfferRead: () => {},
+ sendSignal: () => {}
+ },
+ disabled: false,
+ expires: 1527885633645,
+ id: 'test_reward_id',
+ index: 0,
+ isLong: true,
+ logoUrl: 'https://www.ghostery.com/wp-content/themes/ghostery/images/ghostery_logo.svg',
+ text: 'test reward title',
+ unread: false
+ };
+ const component = renderer.create(
+
+
+ ).toJSON();
+ expect(component).toMatchSnapshot();
+ });
+
+ test('reward list item is rendered correctly when disabled, unread, and elongated', () => {
+ const initialState = {
+ actions: {
+ getRewardsData: () => {},
+ toggleOffersEnabled: () => {},
+ removeOffer: () => {},
+ setOfferRead: () => {},
+ sendSignal: () => {}
+ },
+ disabled: true,
+ expires: 1527885633645,
+ id: 'test_reward_id',
+ index: 0,
+ isLong: true,
+ logoUrl: 'https://www.ghostery.com/wp-content/themes/ghostery/images/ghostery_logo.svg',
+ text: 'test reward title',
+ unread: true
+ };
+ const component = renderer.create(
+
+
+ ).toJSON();
+ expect(component).toMatchSnapshot();
+ });
+ });
+});
diff --git a/app/panel/components/__tests__/Rewards.jsx b/app/panel/components/__tests__/Rewards.jsx
new file mode 100644
index 000000000..8ceb2cf7a
--- /dev/null
+++ b/app/panel/components/__tests__/Rewards.jsx
@@ -0,0 +1,66 @@
+/**
+ * Rewards Test Component
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2018 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 renderer from 'react-test-renderer';
+import { MemoryRouter } from 'react-router';
+import Rewards from '../Rewards';
+
+// Fake the translation function to only return the translation key
+global.t = function (str) {
+ return str;
+};
+
+describe('app/panel/components/Rewards.jsx', () => {
+ describe('Snapshot tests with react-test-renderer', () => {
+ test('rewards is rendered correctly when rewards is on and rewards is null', () => {
+ const initialState = {
+ actions: {
+ getRewardsData: () => {},
+ sendSignal: () => {},
+ },
+ location: {
+ pathname: '/detail/rewards/list',
+ },
+ enable_offers: true,
+ is_expanded: false
+ };
+ const component = renderer.create(
+
+
+ ).toJSON();
+ expect(component).toMatchSnapshot();
+ });
+
+ test('rewards is rendered correctly when rewards is off and rewards is null', () => {
+ const initialState = {
+ actions: {
+ getRewardsData: () => {},
+ sendSignal: () => {},
+ },
+ location: {
+ pathname: '/detail/rewards/list',
+ },
+ enable_offers: false,
+ is_expanded: false
+ };
+ const component = renderer.create(
+
+
+ ).toJSON();
+ expect(component).toMatchSnapshot();
+ });
+ });
+});
diff --git a/app/panel/components/__tests__/__snapshots__/RewardDetail.jsx.snap b/app/panel/components/__tests__/__snapshots__/RewardDetail.jsx.snap
new file mode 100644
index 000000000..c18708c01
--- /dev/null
+++ b/app/panel/components/__tests__/__snapshots__/RewardDetail.jsx.snap
@@ -0,0 +1,323 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`app/panel/components/BuildingBlocks/RewardDetail.jsx Snapshot tests with react-test-renderer reward detail is rendered with all values present 1`] = `
+
-
+
diff --git a/app/panel/components/Tooltip.jsx b/app/panel/components/Tooltip.jsx
index 1cf8a204a..426226c52 100644
--- a/app/panel/components/Tooltip.jsx
+++ b/app/panel/components/Tooltip.jsx
@@ -13,6 +13,7 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
+import ClassNames from 'classnames';
/**
* @class Implements a Tooltip component that is used in many panel views.
@@ -52,12 +53,14 @@ class Tooltip extends React.Component {
}
/**
- * Implements mouseenter. Sets a 1 second delay for showing the tooltip.
+ * Implements mouseenter. Sets adelay for showing the tooltip with a default of 1 second.
*/
delayHover() {
+ const delayType = typeof this.props.delay;
+ const delay = (delayType === 'number' || delayType === 'string') ? +this.props.delay : 1000;
this.delay = setTimeout(() => {
this.enter();
- }, 1000);
+ }, delay);
}
/**
@@ -83,8 +86,12 @@ class Tooltip extends React.Component {
* @return {JSX} JSX for rendering the Tooltip component
*/
render() {
+ const compClassNames = ClassNames({
+ 'dark-theme': this.props.theme === 'dark',
+ });
+
return (
-
+
{this.state.show &&
{this.props.header &&
diff --git a/app/panel/components/__tests__/RewardDetail.jsx b/app/panel/components/__tests__/RewardDetail.jsx
new file mode 100644
index 000000000..ccbd45a48
--- /dev/null
+++ b/app/panel/components/__tests__/RewardDetail.jsx
@@ -0,0 +1,179 @@
+/**
+ * Reward Detail Test Component
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2018 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 renderer from 'react-test-renderer';
+import { shallow } from 'enzyme';
+import RewardDetail from '../BuildingBlocks/RewardDetail';
+
+// Fake the translation function to only return the translation key
+global.t = function (str) {
+ return str;
+};
+
+// Fake the Tooltip implementation
+jest.mock('../Tooltip');
+
+describe('app/panel/components/BuildingBlocks/RewardDetail.jsx', () => {
+ describe('Snapshot tests with react-test-renderer', () => {
+ test('reward detail is rendered with all values present', () => {
+ const initialState = {
+ actions: {
+ getRewardsData: () => {},
+ toggleOffersEnabled: () => {},
+ removeOffer: () => {},
+ setOfferRead: () => {},
+ sendSignal: () => {}
+ },
+ code: 'test_code',
+ conditions: 'test reward conditions',
+ description: 'test reward description',
+ expires: 1527880170315,
+ id: 'test_reward_id',
+ logoUrl: 'https://www.ghostery.com/wp-content/themes/ghostery/images/ghostery_logo.svg',
+ pictureUrl: 'https://www.ghostery.com/wp-content/uploads/2017/12/simple-detailed-1024x833.png',
+ redeemUrl: 'https://www.offer-redeem-test.com',
+ redeemText: 'redeem now',
+ text: 'test reward title'
+ };
+ const component = renderer.create(
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`app/panel/components/BuildingBlocks/RewardDetail.jsx Snapshot tests with react-test-renderer reward detail is rendered with missing code 1`] = `
+
+ 
+ 
+
+
+
+
+ test reward title
+
+
+ test reward description
+
+
+
+
+ test_code
+
+
+
+
+ rewards_copy_code
+
+
+
+
+
+ rewards_expires_in
+
+
+ rewards_terms_conditions
+
+
+ redeem now
+
+
+
+`;
+
+exports[`app/panel/components/BuildingBlocks/RewardDetail.jsx Snapshot tests with react-test-renderer reward detail is rendered with missing conditions 1`] = `
+
+
+
+
+
+
+
+ test reward title
+
+
+ test reward description
+
+
+
+
+
+ rewards_expires_in
+
+
+ rewards_terms_conditions
+
+
+ redeem now
+
+
+
+`;
+
+exports[`app/panel/components/BuildingBlocks/RewardDetail.jsx Snapshot tests with react-test-renderer reward detail is rendered with missing description 1`] = `
+
+
+
+
+
+
+
+ test reward title
+
+
+ test reward description
+
+
+
+
+ test_code
+
+
+
+
+ rewards_copy_code
+
+
+
+
+
+ rewards_expires_in
+
+
+
+ redeem now
+
+
+
+`;
+
+exports[`app/panel/components/BuildingBlocks/RewardDetail.jsx Snapshot tests with react-test-renderer reward detail is rendered with missing text 1`] = `
+
+
+
+
+
+
+
+ test reward title
+
+
+
+
+
+ test_code
+
+
+
+
+ rewards_copy_code
+
+
+
+
+
+ rewards_expires_in
+
+
+ rewards_terms_conditions
+
+
+ redeem now
+
+
+
+`;
diff --git a/app/panel/components/__tests__/__snapshots__/RewardListItem.jsx.snap b/app/panel/components/__tests__/__snapshots__/RewardListItem.jsx.snap
new file mode 100644
index 000000000..cb4237378
--- /dev/null
+++ b/app/panel/components/__tests__/__snapshots__/RewardListItem.jsx.snap
@@ -0,0 +1,331 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`app/panel/components/BuildingBlocks/RewardListItem.jsx Snapshot tests with react-test-renderer reward list item is rendered correctly 1`] = `
+
+
+
+
+
+
+
+
+
+ test reward description
+
+
+
+
+ test_code
+
+
+
+
+ rewards_copy_code
+
+
+
+
+
+ rewards_expires_in
+
+
+ rewards_terms_conditions
+
+
+ redeem now
+
+
+
+
+`;
+
+exports[`app/panel/components/BuildingBlocks/RewardListItem.jsx Snapshot tests with react-test-renderer reward list item is rendered correctly when disabled 1`] = `
+
+
+
+
+
+
+
+
+ test reward title
+
+
+ rewards_expires_in
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`app/panel/components/BuildingBlocks/RewardListItem.jsx Snapshot tests with react-test-renderer reward list item is rendered correctly when disabled, unread, and elongated 1`] = `
+
+
+
+
+
+
+
+
+ test reward title
+
+
+ rewards_expires_in
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`app/panel/components/BuildingBlocks/RewardListItem.jsx Snapshot tests with react-test-renderer reward list item is rendered correctly when elongated 1`] = `
+
+
+
+
+
+
+
+
+ test reward title
+
+
+ rewards_expires_in
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`app/panel/components/BuildingBlocks/RewardListItem.jsx Snapshot tests with react-test-renderer reward list item is rendered correctly when unread 1`] = `
+
+
+
+
+
+
+
+
+ test reward title
+
+
+ rewards_expires_in
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/app/panel/components/__tests__/__snapshots__/Rewards.jsx.snap b/app/panel/components/__tests__/__snapshots__/Rewards.jsx.snap
new file mode 100644
index 000000000..88bdf5132
--- /dev/null
+++ b/app/panel/components/__tests__/__snapshots__/Rewards.jsx.snap
@@ -0,0 +1,133 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`app/panel/components/Rewards.jsx Snapshot tests with react-test-renderer rewards is rendered correctly when rewards is off and rewards is null 1`] = `
+
+
+
+
+
+
+
+ test reward title
+
+
+ rewards_expires_in
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`app/panel/components/Rewards.jsx Snapshot tests with react-test-renderer rewards is rendered correctly when rewards is on and rewards is null 1`] = `
+
+
+ panel_detail_rewards_title
+
+
+
+ rewards_off
+
+
+
+
+
+
+
+
+
+
+ panel_detail_rewards_off
+
+
+
+`;
diff --git a/app/panel/components/helpers/ClickOutside.jsx b/app/panel/components/helpers/ClickOutside.jsx
index 7656fb294..403ebc5ee 100644
--- a/app/panel/components/helpers/ClickOutside.jsx
+++ b/app/panel/components/helpers/ClickOutside.jsx
@@ -53,7 +53,10 @@ class ClickOutside extends React.Component {
*/
clickHandler(e) {
const el = this.container;
- if (!el.contains(e.target) && e.target !== this.props.excludeEl) {
+ if (!el.contains(e.target)
+ && !el.contains(e.path[0])
+ && e.target !== this.props.excludeEl
+ && e.path[0] !== this.props.excludeEl) {
this.props.onClickOutside(e);
}
}
diff --git a/app/panel/constants/constants.js b/app/panel/constants/constants.js
index 530eebfc7..3641211e0 100644
--- a/app/panel/constants/constants.js
+++ b/app/panel/constants/constants.js
@@ -16,6 +16,7 @@ export const GET_PANEL_DATA = 'GET_PANEL_DATA';
export const SHOW_NOTIFICATION = 'SHOW_NOTIFICATION';
export const TOGGLE_CLIQZ_FEATURE = 'TOGGLE_CLIQZ_FEATURE';
export const CLOSE_NOTIFICATION = 'CLOSE_NOTIFICATION';
+export const TOGGLE_EXPERT = 'TOGGLE_EXPERT';
export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
export const LOGIN_FAILED = 'LOGIN_FAILED';
export const LOGOUT = 'LOGOUT';
@@ -23,8 +24,6 @@ export const CREATE_ACCOUNT_SUCCESS = 'CREATE_ACCOUNT_SUCCESS';
export const CREATE_ACCOUNT_FAILED = 'CREATE_ACCOUNT_FAILED';
export const FORGOT_PASSWORD_SUCCESS = 'FORGOT_PASSWORD_SUCCESS';
export const FORGOT_PASSWORD_FAILED = 'FORGOT_PASSWORD_FAILED';
-export const TOGGLE_DRAWER_SETTING = 'TOGGLE_DRAWER_SETTING';
-export const UPDATE_NOTIFICATION_STATUS = 'UPDATE_NOTIFICATION_STATUS';
// summary
export const GET_SUMMARY_DATA = 'GET_SUMMARY_DATA';
@@ -32,11 +31,17 @@ export const UPDATE_TRACKER_COUNTS = 'UPDATE_TRACKER_COUNTS';
export const UPDATE_GHOSTERY_PAUSED = 'UPDATE_GHOSTERY_PAUSED';
export const UPDATE_SITE_POLICY = 'UPDATE_SITE_POLICY';
export const FILTER_TRACKERS = 'FILTER_TRACKERS';
-export const TOGGLE_EXPERT = 'TOGGLE_EXPERT';
// detail
export const TOGGLE_EXPANDED = 'TOGGLE_EXPANDED';
+// rewards
+export const GET_REWARDS_DATA = 'GET_REWARDS_DATA';
+export const TOGGLE_OFFERS_ENABLED = 'TOGGLE_OFFERS_ENABLED';
+export const REMOVE_OFFER = 'REMOVE_OFFER';
+export const SET_OFFER_READ = 'SET_OFFER_READ';
+export const SEND_SIGNAL = 'SEND_SIGNAL';
+
// blocking
export const GET_BLOCKING_DATA = 'GET_BLOCKING_DATA';
export const UPDATE_CATEGORIES = 'UPDATE_CATEGORIES';
@@ -56,6 +61,7 @@ export const EXPORT_SETTINGS = 'EXPORT_SETTINGS';
export const SELECT_ITEM = 'SELECT_ITEM';
export const TOGGLE_CHECKBOX = 'TOGGLE_CHECKBOX';
export const UPDATE_DATABASE = 'UPDATE_DATABASE';
+export const UPDATE_NOTIFICATION_STATUS = 'UPDATE_NOTIFICATION_STATUS';
export const UPDATE_SETTINGS_BLOCK_ALL_TRACKERS = 'UPDATE_SETTINGS_BLOCK_ALL_TRACKERS';
export const UPDATE_SETTINGS_CATEGORY_BLOCKED = 'UPDATE_SETTINGS_CATEGORY_BLOCKED';
export const UPDATE_SETTINGS_TRACKER_BLOCKED = 'UPDATE_SETTINGS_TRACKER_BLOCKED';
diff --git a/app/panel/containers/DetailContainer.js b/app/panel/containers/DetailContainer.js
index 63c586b2a..1ae6ccece 100644
--- a/app/panel/containers/DetailContainer.js
+++ b/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
diff --git a/app/panel/containers/RewardsContainer.js b/app/panel/containers/RewardsContainer.js
new file mode 100644
index 000000000..45f48fb3a
--- /dev/null
+++ b/app/panel/containers/RewardsContainer.js
@@ -0,0 +1,53 @@
+/**
+ * Rewards Container
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2018 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 { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
+import { bindActionCreators } from 'redux';
+import Rewards from '../components/Rewards';
+import * as actions from '../actions/RewardsActions';
+import { showNotification } from '../actions/PanelActions';
+
+/**
+ * Map redux store state properties to Rewards view 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 Detailed view 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, ownProps) => Object.assign({}, state.rewards, {
+ is_expanded: state.panel.is_expanded,
+});
+
+/**
+ * Bind Rewards view action creators using Redux's bindActionCreators
+ * @memberof PanelContainers
+ * @param {function} dispatch redux store method which dispatches actions
+ * @param {Object} ownProps Detailed view component own props
+ * @return {function} to be used as an argument in redux connect call
+ */
+const mapDispatchToProps = (dispatch, ownProps) => ({
+ actions: bindActionCreators(Object.assign(actions, { showNotification }), dispatch)
+});
+
+/**
+ * Connects Rewards view component to the Redux store. Pass updated match, location, and history props to the wrapped component.
+ * @memberof PanelContainers
+ * @param {function} mapStateToProps maps redux store state properties to Detailed view own properties
+ * @param {function} mapDispatchToProps binds Detailed view component action creators
+ * @return {Object} A higher-order React component class that passes state and action
+ * creators into Detailed view component. Used by React framework.
+ */
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Rewards));
diff --git a/app/panel/containers/SettingsContainer.js b/app/panel/containers/SettingsContainer.js
index 0cb873d39..894555a3d 100644
--- a/app/panel/containers/SettingsContainer.js
+++ b/app/panel/containers/SettingsContainer.js
@@ -16,6 +16,7 @@ import Settings from '../components/Settings';
import * as settingsActions from '../actions/SettingsActions';
import { toggleExpanded } from '../actions/DetailActions';
import { updateSitePolicy } from '../actions/SummaryActions';
+import { sendSignal } from '../actions/RewardsActions';
/**
* Map redux store state properties to Settings view component own properties.
* @memberOf PanelContainers
@@ -50,6 +51,7 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
actions: bindActionCreators(Object.assign(settingsActions, {
toggleExpanded,
updateSitePolicy,
+ sendSignal,
}), dispatch),
});
/**
diff --git a/app/panel/reducers/__tests__/rewards.js b/app/panel/reducers/__tests__/rewards.js
new file mode 100644
index 000000000..ee109941f
--- /dev/null
+++ b/app/panel/reducers/__tests__/rewards.js
@@ -0,0 +1,132 @@
+/**
+ * Test file for the Rewards Reducer
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2018 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 Immutable from 'seamless-immutable';
+import rewardsReducer from '../rewards';
+import {
+ GET_REWARDS_DATA,
+ TOGGLE_OFFERS_ENABLED,
+ REMOVE_OFFER,
+ SET_OFFER_READ,
+ SEND_SIGNAL
+} from '../../constants/constants';
+
+// Copied from app/panel/reducers/rewards.js
+const initialState = Immutable({
+ rewards: null,
+ enable_offers: false,
+ unread_offer_ids: [],
+});
+
+describe('app/panel/reducers/rewards.js', () => {
+ test('initial state is correct', () => {
+ expect(rewardsReducer(undefined, {})).toEqual(initialState);
+ });
+
+ test('reducer correctly handles GET_REWARDS_DATA', () => {
+ const data = { test: true };
+ const action = { data, type: GET_REWARDS_DATA };
+ const initState = Immutable({});
+
+ expect(rewardsReducer(initState, action)).toEqual(data);
+ });
+
+ test('reducer correctly handles TOGGLE_OFFERS_ENABLED', () => {
+ const data = { enabled: true };
+ const action = { data, type: TOGGLE_OFFERS_ENABLED };
+
+ const updatedState = Immutable.merge(initialState, {
+ enable_offers: action.data.enabled,
+ });
+
+ expect(rewardsReducer(initialState, action)).toEqual(updatedState);
+ });
+
+ test('reducer correctly handles REMOVE_OFFER', () => {
+ const data = { id: 'test_reward_id' };
+ const action = { data, type: REMOVE_OFFER };
+
+ const initState = Immutable({
+ rewards: {
+ test_reward_id: { reward: 'test' },
+ test_reward_id_alt: { reward: 'test_alt' },
+ },
+ enable_offers: true,
+ unread_offer_ids: ['test_reward_id', 'test_reward_id_alt'],
+ });
+
+ expect(rewardsReducer(initState, action)).toEqual({
+ rewards: {
+ test_reward_id_alt: { reward: 'test_alt' },
+ },
+ enable_offers: true,
+ unread_offer_ids: ['test_reward_id_alt'],
+ });
+ });
+
+ test('reducer correctly handles SET_OFFER_READ', () => {
+ const data = { id: 'test_reward_id' };
+ const action = { data, type: SET_OFFER_READ };
+
+ const initState = Immutable({
+ rewards: {
+ test_reward_id: { reward: 'test' },
+ test_reward_id_alt: { reward: 'test_alt' },
+ },
+ enable_offers: true,
+ unread_offer_ids: ['test_reward_id', 'test_reward_id_alt'],
+ });
+
+ expect(rewardsReducer(initState, action)).toEqual({
+ rewards: {
+ test_reward_id: { reward: 'test' },
+ test_reward_id_alt: { reward: 'test_alt' },
+ },
+ enable_offers: true,
+ unread_offer_ids: ['test_reward_id_alt'],
+ });
+ });
+
+ test('reducer correctly handles SET_OFFER_READ when offer is not new', () => {
+ const data = { id: 'test_reward_id' };
+ const action = { data, type: SET_OFFER_READ };
+
+ const initState = Immutable({
+ rewards: {
+ test_reward_id: { reward: 'test' },
+ test_reward_id_alt: { reward: 'test_alt' },
+ },
+ enable_offers: true,
+ unread_offer_ids: ['test_reward_id_alt'],
+ });
+
+ expect(rewardsReducer(initState, action)).toEqual({
+ rewards: {
+ test_reward_id: { reward: 'test' },
+ test_reward_id_alt: { reward: 'test_alt' },
+ },
+ enable_offers: true,
+ unread_offer_ids: ['test_reward_id_alt'],
+ });
+ });
+
+ test('reducer correctly handles SEND_SIGNAL', () => {
+ const data = {
+ actionId: 'action_id',
+ offerId: 'offer_id',
+ };
+ const action = { data, type: SEND_SIGNAL };
+
+ expect(rewardsReducer(initialState, action)).toEqual(initialState);
+ });
+});
diff --git a/app/panel/reducers/index.js b/app/panel/reducers/index.js
index 1313ce387..fa627f7f1 100644
--- a/app/panel/reducers/index.js
+++ b/app/panel/reducers/index.js
@@ -17,6 +17,7 @@ import { combineReducers } from 'redux';
import panel from './panel';
import summary from './summary';
import detail from './detail';
+import rewards from './rewards';
import blocking from './blocking';
import login from './login';
import createAccount from './createAccount';
@@ -34,6 +35,7 @@ const Reducers = combineReducers({
panel,
summary,
detail,
+ rewards,
blocking,
login,
createAccount,
diff --git a/app/panel/reducers/panel.js b/app/panel/reducers/panel.js
index bb1b980ba..09ce97611 100644
--- a/app/panel/reducers/panel.js
+++ b/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 } 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;
}
};
@@ -202,7 +227,7 @@ const _showNotification = (state, action) => {
updated_notificationShown = false;
}
- updated_notificationClasses = msg.classes;
+ updated_notificationClasses = msg.classes || '';
if (msg.filter === 'tooltip') {
updated_needsReload.changes = {};
}
diff --git a/app/panel/reducers/rewards.js b/app/panel/reducers/rewards.js
new file mode 100644
index 000000000..626fd517e
--- /dev/null
+++ b/app/panel/reducers/rewards.js
@@ -0,0 +1,82 @@
+/**
+ * Rewards Reducer
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2018 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 {
+ GET_REWARDS_DATA,
+ TOGGLE_OFFERS_ENABLED,
+ REMOVE_OFFER,
+ SET_OFFER_READ,
+ SEND_SIGNAL
+} from '../constants/constants';
+import { sendMessage, sendRewardMessage } from '../utils/msg';
+
+const initialState = {
+ rewards: null,
+ enable_offers: false,
+ unread_offer_ids: [],
+};
+
+/**
+ * Default export for rewards view reducer.
+ * @memberof PanelReactReducers
+ *
+ * @param {Object} state current state
+ * @param {Object} action action which provides data
+ * @return {Object} unaltered state
+ */
+export default (state = initialState, action) => {
+ switch (action.type) {
+ case GET_REWARDS_DATA: {
+ return Object.assign({}, state, action.data);
+ }
+ case TOGGLE_OFFERS_ENABLED: {
+ const enable_offers = action.data.enabled;
+ sendMessage('setPanelData', { enable_offers });
+ return Object.assign({}, state, { enable_offers });
+ }
+
+ case REMOVE_OFFER: {
+ // Remove offer from unread array
+ const unread_offer_ids = [...state.unread_offer_ids];
+ 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: {
+ const unread_offer_ids = [...state.unread_offer_ids];
+ 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;
+ }
+
+ case SEND_SIGNAL: {
+ sendRewardMessage('rewardSignal', action.data);
+ return state;
+ }
+
+ default: return state;
+ }
+};
diff --git a/app/panel/utils/msg.js b/app/panel/utils/msg.js
index 9c0d77150..e1faf68f5 100644
--- a/app/panel/utils/msg.js
+++ b/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);
+}
diff --git a/app/panel/utils/utils.js b/app/panel/utils/utils.js
index d5b6e884c..1beb7c6bf 100644
--- a/app/panel/utils/utils.js
+++ b/app/panel/utils/utils.js
@@ -63,6 +63,53 @@ export function removeFromArray(array, position) {
return array.filter((item, index) => index !== position);
}
+/**
+ * Calculates the time difference between two dates and returns the
+ * value in a computer interpretable way.
+ * @param {datetime} start the beginning date-time
+ * @param {datetime} end the ending date-time
+ * @return {Object} An object with:
+ * type: days, hours, minutes, seconds
+ * count: the number of days, hours, minutes, seconds
+ */
+export function computeTimeDelta(start, end) {
+ const time_delta = Math.abs(end.getTime() - start.getTime());
+
+ const day_ms = 1000 * 60 * 60 * 24;
+ const num_days = Math.round(time_delta / day_ms);
+ if (num_days >= 2) {
+ return {
+ count: num_days,
+ type: 'days',
+ };
+ }
+
+ const hour_ms = 1000 * 60 * 60;
+ const num_hours = Math.round(time_delta / hour_ms);
+ if (num_hours >= 2) {
+ return {
+ count: num_hours,
+ type: 'hours'
+ };
+ }
+
+ const min_ms = 1000 * 60;
+ const num_mins = Math.round(time_delta / min_ms);
+ if (num_mins >= 2) {
+ return {
+ count: num_mins,
+ type: 'mins'
+ };
+ }
+
+ const sec_ms = 1000;
+ const num_secs = Math.round(time_delta / sec_ms);
+ return {
+ count: num_secs,
+ type: 'secs'
+ };
+}
+
/**
* Check for valid email
* @memberOf PanelUtils
diff --git a/app/scss/panel.scss b/app/scss/panel.scss
index 24d52d40d..535314ba9 100644
--- a/app/scss/panel.scss
+++ b/app/scss/panel.scss
@@ -41,6 +41,7 @@ html body {
background-color: white;
height: 516px;
width: 580px;
+ overflow: hidden;
margin: 0px;
padding: 0px;
}
@@ -52,10 +53,12 @@ html body {
@import './partials/_summary';
@import './partials/_detail';
@import './partials/_blocking';
+@import './partials/_rewards';
@import './partials/_settings';
@import './partials/_help';
@import './partials/_account';
@import './partials/_drawer';
+@import './partials/_toggle_slider';
@import './partials/_pause_button';
@import './partials/_donut_graph';
@import './partials/_ghostery_features';
diff --git a/app/scss/partials/_callout.scss b/app/scss/partials/_callout.scss
index b41e18e9a..7e7e6cf2e 100644
--- a/app/scss/partials/_callout.scss
+++ b/app/scss/partials/_callout.scss
@@ -5,7 +5,7 @@
* https://www.ghostery.com/
*
* Copyright 2018 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
@@ -37,6 +37,11 @@
.callout-text {color: #ffffff;}
.close-button path {stroke: #ffffff;}
}
+ &.purple {
+ background-color: #5b0059;
+ .callout-text {color: #ffffff;}
+ .close-button path {stroke: #ffffff;}
+ }
&.hideous {
background-color: #ff9d00;
.callout-text {color: #ffffff;}
diff --git a/app/scss/partials/_colors.scss b/app/scss/partials/_colors.scss
index e81faafbf..0f21aebc6 100644
--- a/app/scss/partials/_colors.scss
+++ b/app/scss/partials/_colors.scss
@@ -41,7 +41,8 @@ $button-primary: #3AA2CF;
/* MARKETING COLORS */
$red: #E74055;
$purple: #720174;
-$dark-magenta: #910194;
+$dark-purple: #5B005C;
+$dark-magenta: #920094;
$sinopia: #D3451E;
$apple: #67A73A; //button_special
$caper: #CEECAF; //success-color
diff --git a/app/scss/partials/_detail.scss b/app/scss/partials/_detail.scss
index 721799448..37dd7a5c1 100644
--- a/app/scss/partials/_detail.scss
+++ b/app/scss/partials/_detail.scss
@@ -49,6 +49,9 @@
.no-fill {fill: none;}
.stroke {stroke: rgb(74,74,74);}
}
+ + .menu-item {
+ border-left: 1px solid #cccccc;
+ }
}
}
diff --git a/app/scss/partials/_rewards.scss b/app/scss/partials/_rewards.scss
new file mode 100644
index 000000000..480486681
--- /dev/null
+++ b/app/scss/partials/_rewards.scss
@@ -0,0 +1,247 @@
+/**
+ * Rewards Panel Sass
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2018 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
+ */
+
+// Universal Classes
+.full-height {
+ height: 100%;
+}
+.full-width {
+ width: 100%;
+}
+.display-inline-block {
+ display: inline-block;
+}
+.send-left-with-padding {
+ position: absolute;
+ left: 0;
+ padding: 5px 13px;
+}
+.send-right-with-padding {
+ position: absolute;
+ right: 0;
+ padding: 5px 13px;
+}
+.clickable {
+ @extend %pointer;
+}
+.not-clickable {
+ cursor: not-allowed;
+}
+
+// Rewards Panel Component Classes
+.RewardsPanel {
+ background-color: #ffffff;
+}
+.RewardsPanel__header {
+ padding: 10px 0;
+ background-color: $whisper;
+}
+.RewardPanel__back svg {
+ @include transition(fill 0.2s);
+ fill: #9b9b9b;
+}
+.RewardPanel__back:hover svg { fill: #4a4a4a; }
+
+.RewardsPanel__title {
+ text-transform: uppercase;
+ font-size: 14px;
+ color: #9b9b9b;
+}
+.RewardsPanel__slider_text {
+ text-transform: uppercase;
+ padding-right: 7px;
+}
+.RewardsPanel__scroll_content {
+ height: 377px;
+ overflow-y: scroll;
+}
+.RewardsPanel__info {
+ margin: 0 40px;
+ text-align: center;
+ font-size: 14px;
+}
+.RewardsPanel__reward_icon {
+ margin: 70px 0 20px;
+ fill: #9b9b9b;
+}
+.RewardsPanel__learn_more {
+ margin-top: 10px;
+}
+
+// Reward List Item Component Classes
+.RewardListItem {
+ height: 72px;
+ border: 1px solid #cecece;
+ border-left-width: 0;
+ border-radius: 0;
+ padding: 10px 0 10px 10px;
+}
+.RewardListItem.RewardListItem--unread + .RewardListItem.RewardListItem--unread,
+.RewardListItem:not(.RewardListItem--unread) + .RewardListItem:not(.RewardListItem--unread) {
+ height: 71px;
+ border-top: 0;
+}
+.RewardListItem__image_container {
+ height: 52px;
+ width: 100px;
+ text-align: center;
+ padding-right: 8px;
+ border-right: 1px solid #cecece;
+ margin-right: 18px;
+}
+.RewardListItem__image {
+ height: 52px;
+ width: auto;
+ background-color: #e0e0e0;
+}
+.RewardListItem--greyscale .RewardListItem__image {
+ -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
+ filter: grayscale(100%);
+}
+.RewardListItem__text {
+ color: #4a4a4a;
+ font-size: 13.5px;
+ font-weight: 600;
+ max-width: 188px;
+ margin-bottom: 7px;
+}
+.RewardListItem--greyscale .RewardListItem__text {
+ color: #9b9b9b;
+}
+.RewardListItem__expires {
+ color: #9b9b9b;
+ font-size: 11px;
+ max-width: 188px;
+}
+.RewardListItem--elongated .RewardListItem__text,
+.RewardListItem--elongated .RewardListItem__expires {
+ max-width: 354px;
+}
+
+.RewardListItem--greyscale .RewardListItem__close_button,
+.RewardListItem--greyscale .RewardListItem__details_link {
+ display: none;
+}
+.RewardListItem__close_button {
+ line-height: 0;
+ padding: 5px 10px;
+ margin-top: -5px;
+}
+.RewardListItem__details_link {
+ line-height: 0;
+ padding: 5px 10px;
+ margin-bottom: -5px;
+}
+.RewardListItem__close_button svg,
+.RewardListItem__details_link svg {
+ @include transition(fill 0.2s);
+}
+.RewardListItem__close_button svg { fill: #9b9b9b; }
+.RewardListItem__close_button:hover svg { fill: #4a4a4a; }
+
+.RewardListItem__details_link svg { fill: rgba(#4a4a4a, 0); }
+.RewardListItem:hover .RewardListItem__details_link svg { fill: rgba(#4a4a4a, 1); }
+.RewardListItem__close_button:hover + .RewardListItem__details_link svg { fill: rgba(#4a4a4a, 0); }
+
+.RewardListItem--unread {
+ border-color: #5b0059;
+ border-left-width: 7px;
+}
+.RewardListItem--unread .RewardListItem__image_container {
+ border-color: #5b0059;
+ margin-left: -7px;
+}
+.RewardListItem--greyscale.RewardListItem--unread,
+.RewardListItem--greyscale.RewardListItem--unread .RewardListItem__image_container {
+ border-color: #cecece;
+}
+
+// Reward Detail Component Classes
+.RewardDetail {
+ height: 377px;
+}
+.RewardDetail__image_container {
+ height: 167px;
+ width: 100%;
+}
+.RewardDetail__picture {
+ height: 100%;
+ width: 100%;
+ background-color: #efefef;
+}
+.RewardDetail__logo {
+ position: absolute;
+ height: 52px;
+ width: auto;
+ margin: 16px 17px;
+ background-color: #4a4a4a;
+}
+.RewardDetail__title {
+ margin: 0 17px;
+ font-size: 24px;
+ color: #4a4a4a;
+}
+.RewardDetail__description {
+ margin: 0 17px;
+ font-size: 13px;
+ color: #4a4a4a;
+}
+.RewardDetail__code_container {
+ margin: 0 17px;
+ padding: 10px;
+ background-color: #efefef;
+ border: 1px solid #cccccc;
+ border-radius: 3px;
+}
+.RewardDetail__code {
+ font-size: 13px;
+ color: #494949;
+ font-weight: 600;
+}
+.RewardDetail__code input {
+ height: 10px;
+ width: 10px;
+ padding: 0;
+ margin: 0;
+ display: inline-block;
+ opacity: 0;
+ cursor: default;
+}
+.RewardDetail__copy {
+ font-size: 10px;
+ color: #5b005c;
+ font-weight: 600;
+ text-transform: uppercase;
+}
+.RewardDetail__details_container {
+ margin: 0 17px;
+}
+.RewardDetail__expires {
+ font-size: 12px;
+ font-weight: 600;
+ color: #4a4a4a;
+}
+.RewardDetail__terms {
+ font-size: 11px;
+ color: #9b9b9b;
+}
+.RewardDetail__redeem_button {
+ background-color: #5b0059;
+ color: #ffffff;
+ font-size: 14px;
+ font-weight: 600;
+ text-align: center;
+ margin: 0 17px 14px;
+ padding: 10px;
+ text-transform: uppercase;
+}
diff --git a/app/scss/partials/_summary_expert.scss b/app/scss/partials/_summary_expert.scss
index 09d256683..22c47940a 100644
--- a/app/scss/partials/_summary_expert.scss
+++ b/app/scss/partials/_summary_expert.scss
@@ -5,7 +5,7 @@
* https://www.ghostery.com/
*
* Copyright 2018 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
diff --git a/app/scss/partials/_toggle_slider.scss b/app/scss/partials/_toggle_slider.scss
new file mode 100644
index 000000000..2701ea0c4
--- /dev/null
+++ b/app/scss/partials/_toggle_slider.scss
@@ -0,0 +1,55 @@
+/**
+ * Toggle Slider Sass
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2018 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
+ */
+
+.ToggleSlider__switch {}
+.ToggleSlider__switch {
+ @extend %pointer;
+ position: relative;
+ input { display:none; }
+}
+.ToggleSlider__slider {
+ position: relative;
+ display: block;
+ height: 14px;
+ width: 37px;
+ border-radius: 34px;
+ background-color: #c1c0c0;
+ -webkit-transition: .4s;
+ transition: .4s;
+}
+.ToggleSlider__slider_circle {
+ content: "";
+ position: absolute;
+ left: 0px;
+ top: -3px;
+ height: 20px;
+ width: 20px;
+ border-radius: 50%;
+ background-color: #f1f1f1;
+ border: 0.5px solid #979797;
+ -webkit-transition: .1s;
+ transition: .1s;
+}
+.ToggleSlider input:checked + .ToggleSlider__slider {
+ background-color: #ad80ac;
+}
+.ToggleSlider input:focus + .ToggleSlider__slider {
+ box-shadow: 0 0 1px #2196f3;
+}
+.ToggleSlider input:checked + .ToggleSlider__slider + .ToggleSlider__slider_circle {
+ background-color: #5b0059;
+ border-color: #5b0059;
+ -webkit-transform: translateX(17px);
+ -ms-transform: translateX(17px);
+ transform: translateX(17px);
+}
diff --git a/app/scss/partials/_tooltip.scss b/app/scss/partials/_tooltip.scss
index be35680ee..2c46db29e 100644
--- a/app/scss/partials/_tooltip.scss
+++ b/app/scss/partials/_tooltip.scss
@@ -91,6 +91,13 @@
line-height: 1.5;
}
}
+ .dark-theme .tooltip-content {
+ background-color: #333333;
+ color: #ffffff;
+ &:after {
+ border-color: transparent transparent #333333 #333333;
+ }
+ }
}
.expert .sub-component.cliqz-features .g-tooltip .tooltip-content.right {
@@ -131,4 +138,3 @@
margin-left: 0 !important;
}
}
-
diff --git a/app/scss/purplebox.scss b/app/scss/purplebox.scss
index 91078fcad..fcfc54b13 100644
--- a/app/scss/purplebox.scss
+++ b/app/scss/purplebox.scss
@@ -5,7 +5,7 @@
* https://www.ghostery.com/
*
* Copyright 2018 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
diff --git a/app/scss/rewards.scss b/app/scss/rewards.scss
new file mode 100644
index 000000000..ec3437ebe
--- /dev/null
+++ b/app/scss/rewards.scss
@@ -0,0 +1,437 @@
+//Import Global Partials
+@import "settings"; //includes _colors.scss
+@import './partials/_tooltip';
+
+#ghostery-rewards-app, #ghostery-iframe-container {
+ z-index: 2147483647 !important;
+ font-family: $body-font-family!important;
+ position: fixed;
+ top: 30px;
+ right: 30px;
+}
+
+#ghostery-shadow-root {
+ opacity: 0;
+ &.resolved {
+ opacity: 1;
+ }
+}
+
+#ghostery-iframe-container {
+ border: none;
+ &.hot-dog {
+ height: 59px;
+ width: 266px;
+ }
+
+ &.offer-card {
+ width: 268px;
+ height: 531px;
+ }
+}
+
+.ghostery-rewards-component {
+ * {
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
+
+ .hide {
+ visibility: hidden;
+ }
+
+ a {
+ text-decoration: none;
+ }
+
+ .flex-grow {
+ flex: 1;
+ }
+
+ .hot-dog-container {
+ border-radius: 25px;
+ background-color: $dark-purple;
+ position: relative;
+ display: flex;
+ height: 50px;
+ width: 265px;
+ opacity: 1;
+ white-space: nowrap;
+ background-repeat: no-repeat;
+ background-position: left 22px center;
+ border-bottom: 0px;
+ cursor: pointer;
+ }
+
+ .ghostery-reward-text {
+ line-height: 1.3;
+ color: $white;
+ font-size: 12px;
+ margin-top: 16px;
+ margin-left: 58px;
+ transition: visibility 1s;
+ }
+
+ .hot-dog-close {
+ width: 21px;
+ height: 21px;
+ border: 1px solid $dark-purple;
+ background-color: $white;
+ position: absolute;
+ border-radius: 50%;
+ right: 6px;
+ top: -9px;
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: 9px;
+ cursor: pointer;
+ }
+
+ &.ghostery-right {
+ right: 30px;
+ }
+
+ &:hover, &.show {
+ .ghostery-reward-close {
+ transition: visibility 1000ms;
+ visibility: visible;
+ }
+ .ghostery-reward-text {
+ transition: visibility 0s;
+ visibility: visible;
+ }
+ }
+
+ .ghostery-reward-card {
+ color: $tundora;
+ background-color: #f2f2f2;
+ width: 265px;
+ height: 520px;
+ border: 1px solid #9b9b9b;
+ border-radius: 4px;
+
+ .reward-card-header {
+ display: flex;
+ height: 36px;
+ width: 100%;
+
+ .reward-card-close {
+ cursor: pointer;
+ align-self: center;
+ margin-right: 8px;
+ margin-left: auto;
+ height: 10px;
+ width: 10px;
+ background-repeat: no-repeat;
+ }
+
+ .rewards-logo-beta {
+ flex: 1;
+ height: 13px;
+ margin-left: 8px;
+ align-self: center;
+ background-repeat: no-repeat;
+ background-size: auto 13px;
+ }
+ }
+
+ .reward-content-img {
+ height: 120px;
+ // margin-top: 8px;
+ width: 247px;
+ display: flex;
+ align-items: center;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ }
+ }
+
+ .reward-content {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+ background-color: $white;
+ align-items: center;
+ margin-left: auto;
+ margin-right: auto;
+ width: 247px;
+ height: 450px;
+ border: 1px solid $dark-purple;
+ border-radius: 4px;
+
+ .reward-content-header {
+ display: flex;
+ flex-direction: row;
+ height: 48px;
+ width: 100%;
+ justify-content: flex-end;
+ align-items: center;
+
+ .reward-company-logo {
+ height: 38px;
+ display: flex;
+ align-items: center;
+
+ img {
+ height: 100%;
+ object-fit: contain;
+ }
+ }
+
+ .reward-settings-kebab {
+ cursor: pointer;
+ width: 20px;
+ height: 37px;
+ background-repeat: no-repeat;
+ background-position: 6px;
+ }
+
+ }
+
+ .reward-content-detail {
+ display: flex;
+ flex-direction: column;
+ width: 195px;
+ height: 131px;
+ color: $tundora;
+
+ .reward-benefit {
+ margin-top: 10px;
+ margin-bottom: 12px;
+ font-size: 34px;
+ line-height: 26px;
+ white-space: nowrap;
+ // text-overflow: ellipsis;
+ overflow: hidden;
+ width: 100%;
+ min-height: 26px;
+ }
+
+ .reward-headline {
+ font-size: 16px;
+ line-height: 16px;
+ }
+
+ .reward-description {
+ margin-top: 14px;
+ font-size: 13px;
+ line-height: 15px;
+ }
+
+ }
+
+ .reward-code {
+ display: flex;
+ width: 225px;
+ height: 32px;
+ border: 1px solid #dadada;
+ border-radius: 5px;
+ background-color: #f2f2f2;
+
+ div {
+ flex: 1;
+ user-select: text;
+ margin-left: 8px;
+ align-self: center;
+ font-size: 13px;
+ font-weight: 500;
+ border: 0px;
+ background-color: transparent;
+ .reward-code-input {
+ opacity: 0;
+ position: absolute;
+ z-index: -1;
+ }
+ }
+
+ a {
+ text-align: right;
+ align-self: center;
+ margin-right: 8px;
+ margin-left: auto;
+ color: $dark-purple;
+ font-size: 10px;
+ font-weight: $global-weight-bold;
+ cursor: pointer;
+ text-transform: uppercase;
+ }
+
+ }
+
+ .reward-content-footer {
+ display: flex;
+ width: 225px;
+ height: 46px;
+ font-size: 11px;
+ span {
+ margin-top: 15px;
+ flex: 1;
+ }
+ .reward-terms {
+ margin-top: 15px;
+ color: $tundora;
+ }
+ }
+
+ .reward-redeem {
+ color: $white;
+ background-color: $dark-purple;
+ width: 100%;
+ height: 41px;
+ text-align: center;
+ line-height: 41px;
+ font-size: 14px;
+ border: 0px;
+ cursor: pointer;
+ }
+ }
+
+ .reward-footer {
+ display: flex;
+ height: 32px;
+
+ .reward-feedback {
+ flex: 2;
+ align-self: center;
+ margin-left: 8px;
+
+ .rewards-smiley {
+
+ }
+
+ .rewards-dd-arrow {
+
+ }
+
+ a {
+ cursor: pointer;
+ font-size: 12px;
+ color: #6A7E90;
+ }
+ }
+
+ .reward-ghosty {
+ flex: 1;
+ background-repeat: no-repeat;
+ background-position: center right;
+ height: 100%;
+ align-self: flex-end;
+ margin-right: 8px;
+ }
+ }
+ }
+
+ .rewards-popup-container {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ text-align: center;
+ color: $white;
+ }
+
+ .rewards-settings-container {
+ .rewards-settings {
+ color: $tundora;
+ position: absolute;
+ margin-left: -195px;
+ margin-top: -10px;
+ height: 94px;
+ width: 175px;
+ background-color: $white;
+ border: 1px solid #9b9b9b;
+ border-radius: 4px;
+ box-shadow: 0px 4px 10px grey;
+ display: flex;
+ flex-direction: column;
+ text-align: left;
+
+ a {
+ color: $tundora;
+ }
+
+ .about, .settings, .delete, .disable {
+ font-size: 12px;
+ flex: 1;
+ display: flex;
+ align-items: center;
+ margin-left: 10px;
+ margin-right: 10px;
+ font-weight: 500;
+ cursor: pointer;
+ user-select: none;
+ }
+
+ .about {
+ align-items: flex-end;
+ }
+
+ .delete {
+ align-items: flex-start;
+ }
+ }
+ }
+
+ .rewards-notification-container {
+ .rewards-notification {
+ margin-top: 17px;
+ margin-left: auto;
+ margin-right: auto;
+ height: 161px;
+ width: 208px;
+ background-color: $dark-purple;
+ border: 2px solid transparent;
+ border-radius: 4px;
+ display: flex;
+ flex-direction: column;
+ font-size: 13px;
+ line-height: 2;
+
+ &.first-prompt {
+ background-color: $white;
+ border: 2px solid $dark-purple;
+ color: black;
+ }
+
+ .notification-text {
+ margin: 0px 22px 0px 22px;
+ }
+
+ a {
+ text-decoration: underline;
+ cursor: pointer;
+ }
+
+ .close {
+ cursor: pointer;
+ background-repeat: no-repeat;
+ height: 10px;
+ width: 10px;
+ align-self: flex-end;
+ margin: 10px 10px 0px 0px;
+ }
+
+ .notification-buttons {
+ display: flex;
+ justify-content: center;
+ flex-direction: row;
+ div {
+ &:nth-child(1) {
+ margin-right:10px;
+ }
+ &:nth-child(2) {
+ margin-left:10px;
+ }
+ }
+ }
+ }
+ }
+
+}
+
+#ghostery-rewards-app.iframe-child {
+ top: 9px;
+ right: 1px;
+}
diff --git a/app/scss/setup.scss b/app/scss/setup.scss
index c52ffc21c..743f29bbb 100644
--- a/app/scss/setup.scss
+++ b/app/scss/setup.scss
@@ -27,6 +27,7 @@
@import './partials/_mixins';
@import './partials/_blocking';
@import './partials/_settings';
+@import './partials/_toggle_slider';
@import './partials/_callout';
//Foundation Overrides
@@ -72,7 +73,7 @@ body {
//Don't show blue border on click
*:focus {
outline: none;
- }
+ }
#header {
height: 53px;
color: $white;
@@ -281,6 +282,10 @@ body {
font-size: 1rem;
}
}
+ .AdditionalFeatures--add-padding {
+ padding-left: 10px;
+ padding-right: 30px;
+ }
}
#display-view {
.box-link {
@@ -441,53 +446,6 @@ body {
}
}
-.switch {
- @extend %pointer;
- margin-right: 52px;
- align-self: flex-end;
- position: relative;
- width: 37px;
- input {
- display:none;
- }
- .slider {
- border-radius: 34px;
- height: 14px;
- width: 37px;
- position: relative;
- display: block;
- background-color: #C1C0C0;
- -webkit-transition: .4s;
- transition: .4s;
- }
- .slider-circle {
- content: "";
- border-radius: 50%;
- position: absolute;
- height: 20px;
- width: 20px;
- left: 0px;
- top: -3px;
- background-color: #F1F1F1;
- border: 0.5px solid #979797;
- -webkit-transition: .1s;
- transition: .1s;
- }
- input:checked + .slider {
- opacity: .5;
- background-color: #930194;
- }
- input:focus + .slider {
- box-shadow: 0 0 1px #2196F3;
- }
- input:checked + .slider + .slider-circle {
- background-color: #930194;
- border-color: #930194;
- -webkit-transform: translateX(17px);
- -ms-transform: translateX(17px);
- transform: translateX(17px);
- }
-}
%nowrap {
white-space: nowrap;
overflow-x: hidden;
diff --git a/app/setup/components/Views/AdditionalFeaturesView.jsx b/app/setup/components/Views/AdditionalFeaturesView.jsx
index 913f06e40..c6c21ecbe 100644
--- a/app/setup/components/Views/AdditionalFeaturesView.jsx
+++ b/app/setup/components/Views/AdditionalFeaturesView.jsx
@@ -13,6 +13,7 @@
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import globals from '../../../../src/classes/Globals';
+import { ToggleSlider } from '../../../panel/components/BuildingBlocks';
const { IS_CLIQZ } = globals;
@@ -108,11 +109,12 @@ class AdditionalFeaturesView extends Component {
+
+ panel_detail_rewards_title
+
+
+
+ rewards_on
+
+
+
+
+
+
+
+
+
+
+ panel_detail_rewards_loading
+
+
-
+
{ t('setup_additional_view_antitrack_title') }
@@ -127,11 +129,12 @@ class AdditionalFeaturesView extends Component {
-
+
{ t('setup_additional_view_adblock_title') }
@@ -146,11 +149,12 @@ class AdditionalFeaturesView extends Component {
-
+