Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ghostery-rewards] New Opt-in for Ghostery #427

Closed
Changes from 1 commit
Commits
File filter
Filter file types
Jump to
Jump to file
Failed to load files.

Always

Just for now

Prev
M20-51: fix eslint
  • Loading branch information
Aleksandr Panin
Aleksandr Panin committed Jul 26, 2019
commit e5af4faffcd34605b63236c60fff83ba2e32194f
@@ -50,8 +50,8 @@ class OfferCard extends Component {
this.iframeEl.classList = '';
this.iframeEl.classList.add('offer-card');
if (this.state.showOptoutOptions) {
this.iframeEl.classList.add('offer-card-optout-options');
}
this.iframeEl.classList.add('offer-card-optout-options');
}
}
this.rewardPictureEl = null;

@@ -216,20 +216,20 @@ class OfferCard extends Component {
this.props.actions.sendSignal('offer_ca_action');
}

handleAcceptRewards = () => {
this.setState({ showOptoutOptions: false });
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');
}
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();
}
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');
@@ -253,58 +253,58 @@ 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>
);
}
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>
);
}
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 (
@@ -385,7 +385,7 @@ class OfferCard extends Component {
{this.state.rewardUI.call_to_action.text}
</a>
</div>
{this.renderFooter()}
{this.renderFooter()}
</div>
{ this.state.showPrompt === 1 &&
this.renderNotification(0)
ProTip! Use n and p to navigate between commits in a pull request.