[ghostery-rewards] New Opt-in for Ghostery

app/content-scripts/rewards/OfferCard.jsx

@@ -38,7 +38,8 @@ class OfferCard extends Component {
 			code: isCodeHidden ? '*****' : templateData.code,
 			closed: false,
 			copyText: t('rewards_copy_code'),
-			showPrompt: this.props.conf.rewardsPromptAccepted ? false : 1,
+			showPrompt: false,
+			showOptoutOptions: !this.props.conf.rewardsPromptAccepted,
 			showSettings: false,
 			rewardUI: templateData,
 		};
@@ -48,6 +49,9 @@ class OfferCard extends Component {
 			this.iframeContentDocument = this.iframeEl.contentDocument;
 			this.iframeEl.classList = '';
 			this.iframeEl.classList.add('offer-card');
+			if (this.state.showOptoutOptions) {
+				this.iframeEl.classList.add('offer-card-optout-options');
+			}
 		}
 		this.rewardPictureEl = null;
 
@@ -118,7 +122,8 @@ class OfferCard extends Component {
 		}
 	}
 
-	copyCode() {
+
+	copyCode() { // eslint-disable-line react/sort-comp
 		this.props.actions.sendSignal('code_copied');
 
 		// 'copied' feedback for user
@@ -211,6 +216,21 @@ class OfferCard extends Component {
 		this.props.actions.sendSignal('offer_ca_action');
 	}
 
+	handleAcceptRewards = () => {
+		this.setState({ showOptoutOptions: false });
+		this.props.actions.messageBackground('rewardsPromptAccepted');
+		this.props.actions.messageBackground('rewardsPromptOptedIn');
+		this.props.actions.sendSignal('offer_first_optin');
+		sendMessage('ping', 'rewards_first_accept');
+	}
+
+	handleDeclineRewards = () => {
+		this.props.actions.sendSignal('offer_first_optout');
+		sendMessage('ping', 'rewards_first_reject_optout');
+		this.disableRewards();
+		this.closeOfferCard();
+	}
+
 	handleImageLoaded(e) {
 		e.target.classList.remove('hide');
 	}
@@ -233,6 +253,59 @@ class OfferCard extends Component {
 		return t(`rewards_expires_in_${type}`, [count]);
 	}
 
+	renderRewardsOptoutOptions() {
+		if (!this.state.showOptoutOptions) { return null; }
+		const href = 'https://www.ghostery.com/faqs/what-is-ghostery-rewards/';
+		return (
+			<React.Fragment>
+				<div className="rewards-footer-optout-text">
+					{t('rewards_first_prompt')}
+					<a
+						target="_blank"
+						rel="noopener noreferrer"
+						onClick={() => {
+							this.props.actions.sendSignal('offer_first_learn');
+							sendMessage('ping', 'rewards_first_learn_more');
+						}}
+						href={href}
+					>
+						{t('rewards_learn_more')}
+					</a>
+				</div>
+				<div className="rewards-footer-optout-actions">
+					<span
+						className="rewards-footer-optout-actions-btn rewards-footer-optout-actions-yes"
+						onClick={this.handleAcceptRewards}
+					>
+						{t('rewards_yes')}
+					</span>
+					<span
+						className="rewards-footer-optout-actions-btn rewards-footer-optout-actions-no"
+						onClick={this.handleDeclineRewards}
+					>
+						{t('rewards_no')}
+					</span>
+				</div>
+			</React.Fragment>
+		);
+	}
+
+	renderFooter() {
+		return (
+			<div className="reward-footer">
+				<div className="reward-footer-top">
+					<div className="reward-feedback">
+						<div className="reward-smile" />
+						<a onClick={this.disableRewardsNotification}>{t('rewards_disable')}</a>
+						<div className="reward-arrow" />
+					</div>
+					<div className="reward-ghosty" style={{ backgroundImage: this.ghostyGrey }} />
+				</div>
+				{this.renderRewardsOptoutOptions()}
+			</div>
+		);
+	}
+
 	render() {
 		return (
 			// @TODO condition for hide class
@@ -312,14 +385,7 @@ class OfferCard extends Component {
 									{this.state.rewardUI.call_to_action.text}
 								</a>
 							</div>
-							<div className="reward-footer">
-								<div className="reward-feedback">
-									<div className="reward-smile" />
-									<a onClick={this.disableRewardsNotification}>{t('rewards_disable')}</a>
-									<div className="reward-arrow" />
-								</div>
-								<div className="reward-ghosty" style={{ backgroundImage: this.ghostyGrey }} />
-							</div>
+							{this.renderFooter()}
 						</div>
 						{ this.state.showPrompt === 1 &&
 							this.renderNotification(0)

app/content-scripts/rewards/index.jsx

@@ -105,7 +105,7 @@ class RewardsApp {
 						exact
 						path="/"
 						render={
-							() => <HotDog reward={props.reward} port={this.port} actions={props.actions} />
+							() => <OfferCard reward={props.reward} conf={props.conf} port={this.port} actions={props.actions} />
 						}
 					/>
 					<Route
@@ -129,7 +129,6 @@ class RewardsApp {
 	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';
@@ -148,7 +147,7 @@ class RewardsApp {
 							exact
 							path="/"
 							render={
-								() => <HotDog reward={props.reward} port={this.port} actions={props.actions} />
+								() => <OfferCard reward={props.reward} conf={props.conf} port={this.port} actions={props.actions} />
 							}
 						/>
 						<Route

app/scss/rewards.scss

@@ -34,6 +34,9 @@
 		width: 268px;
 		height: 531px;
 	}
+	&.offer-card.offer-card-optout-options {
+		height: 585px;
+	}
 }
 
 .ghostery-rewards-component {
@@ -321,37 +324,63 @@
 		}
 
 		.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;
-			}
+      .reward-footer-top {
+        display: flex;
+			  height: 32px;
+
+        .reward-feedback {
+          flex: 2;
+          align-self: center;
+          margin-left: 8px;
+
+          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-footer-optout-text {
+        font-size: 12px;
+        margin: 0 9px;
+        color: #6A7E90;
+        line-height: 18px;
+        a {
+          margin-left: 5px;
+        }
+      }
+
+      .rewards-footer-optout-actions {
+        font-size: 12px;
+        text-transform: uppercase;
+        text-align: right;
+        padding: 5px 9px;
+
+        .rewards-footer-optout-actions-btn {
+          color: #6A7E90;
+          margin-top: -8px;
+          padding: 5px 8px 5px 14px;
+          display: inline-block;
+          cursor: pointer;
+        }
+        .rewards-footer-optout-actions-btn.rewards-footer-optout-actions-yes {
+          font-weight: 700;
+        }
+        .rewards-footer-optout-actions-yes:hover {
+          color: #5B005C;
+        }
+      }
 		}
 	}