GH-409 Update Rewards view: reward details.

app/panel/actions/RewardsActions.js

@@ -15,7 +15,8 @@ import {
 	GET_REWARDS_ACTIVE,
 	REMOVE_REWARD_ID,
 	SHOW_NOTIFICATION,
-	TOGGLE_REWARDS_ACTIVE
+	TOGGLE_REWARDS_ACTIVE,
+	UPDATE_REWARD
 } from '../constants/constants';
 
 /**
@@ -34,19 +35,25 @@ export function getActiveRewards() {
 						{
 							id: 0,
 							unread: true,
+							code: 'MTWAFFEWEREXDF1E',
 							text: '2 Free Audio Books',
+							description: 'Description of the offer. There is a lot of exciting stuff going on.',
 							expires: (new Date()).setDate(dateNow.getDate() + 14),
 						},
 						{
 							id: 1,
 							unread: true,
+							code: 'MTWAFFEWEREXDF2E',
 							text: 'Save $150',
+							description: 'Description of the offer. There is a lot of exciting stuff going on.',
 							expires: (new Date()).setDate(dateNow.getDate() + 30),
 						},
 						{
 							id: 2,
 							unread: true,
+							code: 'MTWAFFEWEREXDF3E',
 							text: 'Save $75',
+							description: 'Description of the offer. There is a lot of exciting stuff going on.',
 							expires: (new Date()).setDate(dateNow.getDate() + 60),
 						},
 					],
@@ -78,6 +85,18 @@ export function toggleRewardsActive() {
 	};
 }
 
+/**
+ * Updates an existing reward
+ * @param {Object} data
+ * @return {Object}
+ */
+export function updateReward(data) {
+	return {
+		type: UPDATE_REWARD,
+		data,
+	};
+}
+
 /**
  * Display notification messages on Panel (status, needsReload). Also used to persist
  * the needsReload messages if the panel is closed before the page is refreshed.

app/panel/components/BuildingBlocks/RewardDetail.jsx

@@ -0,0 +1,114 @@
+/**
+ * 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 ReactDOM from 'react-dom';
+import ClassNames from 'classnames';
+import { computeTimeDelta } from '../../utils/utils';
+
+/**
+ * @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: 'copy code',
+		};
+
+		// Event Bindings
+		this.handleCopyClick = this.handleCopyClick.bind(this);
+	}
+
+	/**
+	 * Lifecycle event
+	 */
+	componentWillMount() {
+		this.props.actions.updateReward({
+			id: this.props.id,
+			unread: false,
+		});
+	}
+
+	handleCopyClick() {
+		// Copy the reward code
+		ReactDOM.findDOMNode(this).querySelector('.RewardDetail__code input').select();
+		document.execCommand('copy');
+
+		// Show a toast notification
+		this.props.actions.showNotification({
+			text: 'Rewards code copied!',
+			classes: 'purple',
+		});
+
+		// Update and reset Copy Code text
+		this.setState({ copyText: 'code copied' });
+		setTimeout(() => {
+			this.setState({ copyText: 'copy code' });
+		}, 3000);
+	}
+
+	/**
+	 * 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 `Expires in ${delta.count} ${delta.type}`;
+	}
+
+	/**
+	 * React's required render function. Returns JSX
+	 * @return {JSX} JSX for rendering the details for a Reward
+	 */
+	render() {
+		const { description, code } = this.props;
+		const codeContainerClassNames = ClassNames({
+			RewardDetail__code_container: true,
+			'flex-container': true,
+			'align-middle': true,
+			'align-justify': true,
+		});
+
+		return (
+			<div className="RewardDetail flex-container flex-dir-column">
+				<div className="RewardDetail__image">
+					Image
+				</div>
+				<div className="RewardDetail__expires">
+					{ this.renderExpiresText() }
+				</div>
+				<div className="RewardDetail__description flex-child-grow">
+					{ description }
+				</div>
+				<div className={codeContainerClassNames}>
+					<span className="RewardDetail__code">
+						<span>{ code }</span>
+						<input readOnly type="text" value={code} />
+					</span>
+					<span className="RewardDetail__copy clickable" onClick={this.handleCopyClick}>
+						{this.state.copyText}
+					</span>
+				</div>
+				<div className="RewardDetail__redeem_button">
+					Redeem Now
+				</div>
+			</div>
+		);
+	}
+}
+
+export default RewardDetail;

app/panel/components/BuildingBlocks/RewardListItem.jsx

@@ -12,11 +12,12 @@
  */
 
 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 for the Rewards Panel
+ * @class Implements a single reward in a list for the Rewards Panel
  * @memberof PanelClasses
  */
 class RewardListItem extends React.Component {
@@ -30,8 +31,12 @@ class RewardListItem extends React.Component {
 
 	/**
 	 * Handle clicking on the close button
+	 * @param  {Object} event the click event
 	 */
-	clickCloseButton() {
+	clickCloseButton(event) {
+		// Prevent the event from propagating and linking to the Reward Detail
+		event.preventDefault();
+
 		const { id } = this.props;
 		this.props.clickCloseButton(id);
 	}
@@ -52,39 +57,52 @@ class RewardListItem extends React.Component {
 	 * @return {JSX} JSX for rendering a Reward within the Rewards List
 	 */
 	render() {
-		const { unread, text } = this.props;
+		const { unread, text, id } = this.props;
 		const itemClassName = ClassNames('RewardListItem', 'row', {
 			'RewardListItem--unread': unread,
 			clickable: true,
 		});
+		const buttonContainerClassNames = ClassNames('flex-container flex-dir-column align-justify full-height', {
+			'RewardsPanel--more-right': true,
+		});
 		const closeButtonClassNames = ClassNames({
-			'RewardsPanel--send-right': true,
+			RewardListItem__close_button: true,
 			'RewardListItem--add-padding': true,
-			'align-self-top': true,
 			clickable: true,
 		});
+		const detailsButtonClassNames = ClassNames({
+			RewardListItem__details_link: true,
+			'RewardListItem--add-padding': true,
+		});
 
 		return (
-			<div className={itemClassName}>
+			<Link to={`/detail/rewards/detail/${id}`} className={itemClassName}>
 				<div className="small-12 columns">
 					<div className="flex-container align-middle full-height">
 						<div className="RewardListItem__image_container flex-container align-center">
 							<svg height="50" width="95" fill="none" stroke="#4a4a4a" strokeWidth="2">
 								<path d="M0,0L95,50M95,0L0,50" />
 							</svg>
 						</div>
-						<div>
+						<div className="flex-child-grow">
 							<div>{ text }</div>
 							<div>{ this.renderExpiresText() }</div>
 						</div>
-						<div className={closeButtonClassNames} onClick={this.clickCloseButton}>
-							<svg height="12" width="12" fill="none" stroke="#9b9b9b" strokeWidth="2" strokeLinecap="round">
-								<path d="M2,2L10,10M2,10L10,2" />
-							</svg>
+						<div className={buttonContainerClassNames}>
+							<div className={closeButtonClassNames} onClick={this.clickCloseButton}>
+								<svg height="12" width="12">
+									<path d="M2,2L10,10M2,10L10,2" />
+								</svg>
+							</div>
+							<div className={detailsButtonClassNames}>
+								<svg height="18" width="12">
+									<path d="M2,2L10,9L2,16" />
+								</svg>
+							</div>
 						</div>
 					</div>
 				</div>
-			</div>
+			</Link>
 		);
 	}
 }

app/panel/components/BuildingBlocks/index.js

@@ -17,6 +17,7 @@ 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 {
@@ -26,5 +27,6 @@ export {
 	NotScanned,
 	PauseButton,
 	ToggleSlider,
+	RewardDetail,
 	RewardListItem
 };

app/panel/components/DetailMenu.jsx

@@ -119,10 +119,10 @@ class DetailMenu extends React.Component {
 						</Link>
 					</div>
 					<div className="column menu-item">
-						<Link to="/detail/rewards" onClick={this.setActiveTab} id="showRewards" className={this.state.menu.showRewards ? 'active ' : ''}>
+						<Link to="/detail/rewards/list" onClick={this.setActiveTab} id="showRewards" className={this.state.menu.showRewards ? 'active ' : ''}>
 							<svg width="31" height="27" viewBox="0 0 31 27">
-								<g className="fill" fillRule="evenodd">
-									<path d="M6.7 15.905h2.62v-3.172H6.7v3.172zm2.378-4.408l.038.1c1.064-.072 2.145-.05 3.188-.242 1.234-.226 1.7-1.528 1.036-2.585-.575-.912-2.043-1.098-2.632-.276-.502.7-.9 1.48-1.324 2.237-.133.24-.206.51-.306.767zm-2.102.078c-.16-.53-1.05-2.256-1.413-2.753-.043-.06-.088-.122-.136-.18-.837-1.04-2.424-.81-2.932.422-.38.918.16 2.087 1.054 2.282 1.122.244 2.266.158 3.426.23zm3.41 4.313h4.58v-3.16h-4.58v3.16zm-9.317.02h4.59v-3.183H1.07v3.182zm5.623 9.526H9.31V16.96H6.693v8.474zm3.7.044H14.2v-8.523h-3.807v8.523zm-8.56-.044h3.823V16.95H1.833v8.484zM.805 17.01c-.675-.178-.813-.087-.805-1.052.01-1.183.002-2.366.003-3.55 0-.555.15-.703.707-.703h1.167c.08 0 .16-.01.216-.014-.198-.346-.433-.662-.566-1.015-.483-1.285.086-2.736 1.28-3.358 1.243-.646 2.71-.282 3.52.89.616.893 1.09 1.864 1.52 2.858.04.097.09.194.16.346.1-.21.182-.372.253-.536.39-.89.802-1.767 1.362-2.567.487-.695 1.107-1.168 1.975-1.28 1.41-.182 2.77.826 3.004 2.235.137.824-.07 1.554-.548 2.223l-.153.21c.082.012.14.03.2.03.45-.004.898-.006 1.345-.013.335-.006.55.184.552.518.005 1.395.003 2.79 0 4.184 0 .283-.175.468-.464.508-.1.015-.2.017-.326.028v8.703c0 .102.002.204-.005.304-.027.346-.15.48-.493.533-.11.016-.22.016-.33.016H1.624c-.07 0-.137.002-.204-.002-.464-.027-.615-.182-.615-.65V17.01zM22.364 5.91V3.626C22.364 1.624 23.996 0 26 0c2.008 0 3.636 1.634 3.636 3.627V5.91h.37c.548 0 .994.454.994.995v5.28c0 .55-.456.997-.995.997h-8.01c-.55 0-.995-.455-.995-.996v-5.28c0-.55.456-.997.995-.997h.37zm.606.026l6.06.026V3.637c0-1.674-1.356-3.03-3.03-3.03-1.674 0-3.03 1.357-3.03 3.032v2.296z" />
+								<g className="fill" fillRule="evenodd" transform="translate(4,0)">
+									<path d="M6.7,15.905 L9.32,15.905 L9.32,12.733 L6.7,12.733 L6.7,15.905 Z M9.078,11.497 L9.116,11.597 C10.18,11.525 11.261,11.547 12.304,11.355 C13.538,11.129 14.004,9.827 13.34,8.77 C12.765,7.858 11.297,7.672 10.708,8.494 C10.206,9.194 9.808,9.974 9.384,10.731 C9.251,10.971 9.178,11.241 9.078,11.498 L9.078,11.497 Z M6.976,11.575 C6.816,11.045 5.926,9.319 5.563,8.822 C5.52,8.762 5.475,8.7 5.427,8.642 C4.59,7.602 3.003,7.832 2.495,9.064 C2.115,9.982 2.655,11.151 3.549,11.346 C4.671,11.59 5.815,11.504 6.975,11.576 L6.976,11.575 Z M10.386,15.888 L14.966,15.888 L14.966,12.728 L10.386,12.728 L10.386,15.888 Z M1.069,15.908 L5.659,15.908 L5.659,12.725 L1.07,12.725 L1.07,15.907 L1.069,15.908 Z M6.692,25.434 L9.31,25.434 L9.31,16.96 L6.693,16.96 L6.693,25.434 L6.692,25.434 Z M10.392,25.478 L14.2,25.478 L14.2,16.955 L10.393,16.955 L10.393,25.478 L10.392,25.478 Z M1.832,25.434 L5.655,25.434 L5.655,16.95 L1.833,16.95 L1.833,25.434 L1.832,25.434 Z M0.805,17.01 C0.13,16.832 -0.008,16.923 0,15.958 C0.01,14.775 0.002,13.592 0.003,12.408 C0.003,11.853 0.153,11.705 0.71,11.705 L1.877,11.705 C1.957,11.705 2.037,11.695 2.093,11.691 C1.895,11.345 1.66,11.029 1.527,10.676 C1.044,9.391 1.613,7.94 2.807,7.318 C4.05,6.672 5.517,7.036 6.327,8.208 C6.943,9.101 7.417,10.072 7.847,11.066 C7.887,11.163 7.937,11.26 8.007,11.412 C8.107,11.202 8.189,11.04 8.26,10.876 C8.65,9.986 9.062,9.109 9.622,8.309 C10.109,7.614 10.729,7.141 11.597,7.029 C13.007,6.847 14.367,7.855 14.601,9.264 C14.738,10.088 14.531,10.818 14.053,11.487 L13.9,11.697 C13.982,11.709 14.04,11.727 14.1,11.727 C14.55,11.723 14.998,11.721 15.445,11.714 C15.78,11.708 15.995,11.898 15.997,12.232 C16.002,13.627 16,15.022 15.997,16.416 C15.997,16.699 15.822,16.884 15.533,16.924 C15.433,16.939 15.333,16.941 15.207,16.952 L15.207,25.655 C15.207,25.757 15.209,25.859 15.202,25.959 C15.175,26.305 15.052,26.439 14.709,26.492 C14.599,26.508 14.489,26.508 14.379,26.508 L1.624,26.508 C1.554,26.508 1.487,26.51 1.42,26.506 C0.956,26.479 0.805,26.324 0.805,25.856 L0.805,17.01 Z" />
 								</g>
 							</svg>
 							<span>{ t('panel_detail_menu_rewards_title') }</span>