Skip to content

Commit

Permalink
Merge pull request #7170 from brave/ksmith-rewards-onboarding-tour
Browse files Browse the repository at this point in the history 
Add rewards onboarding tour for desktop
  • Loading branch information
@zenparsing
zenparsing authored Dec 18, 2020
2 parents 2c70e6a + a37a81a commit aff9b7e
Show file tree
Hide file tree
Showing 50 changed files with 1,879 additions and 231 deletions.
7 changes: 4 additions & 3 deletions browser/ui/webui/brave_rewards_page_ui.cc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -257,9 +257,8 @@ class RewardsDOMHandler : public WebUIMessageHandler,
const ledger::type::Result result,
const std::string& wallet_type) override;

void OnAdsEnabled(
brave_rewards::RewardsService* rewards_service,
bool ads_enabled) override;
void OnAdsEnabled(brave_rewards::RewardsService* rewards_service,
bool ads_enabled) override;

void OnClaimPromotion(
const std::string& promotion_id,
Expand Down Expand Up @@ -1673,6 +1672,8 @@ void RewardsDOMHandler::OnAdsEnabled(

base::ListValue* emptyArgs = nullptr;
GetAdsData(emptyArgs);
GetAutoContributeProperties(emptyArgs);
GetOnboardingStatus(emptyArgs);
}

void RewardsDOMHandler::OnlyAnonWallet(const base::ListValue* args) {
Expand Down
51 changes: 48 additions & 3 deletions browser/ui/webui/brave_webui_source.cc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@

#include "brave/browser/ui/webui/brave_webui_source.h"

// clang-format off

#include <map>
#include <vector>

Expand Down Expand Up @@ -616,13 +618,35 @@ void CustomizeWebUIHTMLSource(const std::string &name,
{ "off", IDS_BRAVE_UI_OFF },
{ "ok", IDS_BRAVE_UI_OK },
{ "on", IDS_BRAVE_UI_ON },
{ "onboardingAddFunds", IDS_BRAVE_REWARDS_ONBOARDING_ADD_FUNDS },
{ "onboardingBraveRewards", IDS_BRAVE_REWARDS_ONBOARDING_BRAVE_REWARDS }, // NOLINT
{ "onboardingDetailLinks", IDS_BRAVE_REWARDS_ONBOARDING_DETAIL_LINKS },
{ "onboardingEarnHeader", IDS_BRAVE_REWARDS_ONBOARDING_EARN_HEADER },
{ "onboardingEarnText", IDS_BRAVE_REWARDS_ONBOARDING_EARN_TEXT },
{ "onboardingPromoHeader", IDS_BRAVE_REWARDS_ONBOARDING_PROMO_HEADER },
{ "onboardingPromoText", IDS_BRAVE_REWARDS_ONBOARDING_PROMO_TEXT },
{ "onboardingStartUsingRewards", IDS_BRAVE_REWARDS_ONBOARDING_START_USING_REWARDS }, // NOLINT
{ "onboardingTakeTour", IDS_BRAVE_REWARDS_ONBOARDING_TAKE_TOUR },
{ "onboardingTerms", IDS_BRAVE_REWARDS_ONBOARDING_TERMS },
{ "onboardingTipHeader", IDS_BRAVE_REWARDS_ONBOARDING_TIP_HEADER },
{ "onboardingTipText", IDS_BRAVE_REWARDS_ONBOARDING_TIP_TEXT },
{ "onboardingTourBack", IDS_BRAVE_REWARDS_ONBOARDING_TOUR_BACK },
{ "onboardingTourBegin", IDS_BRAVE_REWARDS_ONBOARDING_TOUR_BEGIN },
{ "onboardingTourContinue", IDS_BRAVE_REWARDS_ONBOARDING_TOUR_CONTINUE }, // NOLINT
{ "onboardingTourDone", IDS_BRAVE_REWARDS_ONBOARDING_TOUR_DONE },
{ "onboardingTourSkip", IDS_BRAVE_REWARDS_ONBOARDING_TOUR_SKIP },
{ "onboardingTourSkipForNow", IDS_BRAVE_REWARDS_ONBOARDING_TOUR_SKIP_FOR_NOW }, // NOLINT
{ "onboardingPanelWelcomeHeader", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_WELCOME_HEADER }, // NOLINT
{ "onboardingPanelWelcomeText", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_WELCOME_TEXT }, // NOLINT
{ "onboardingPanelAdsHeader", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_ADS_HEADER }, // NOLINT
{ "onboardingPanelAdsText", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_ADS_TEXT }, // NOLINT
{ "onboardingPanelScheduleHeader", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_SCHEDULE_HEADER }, // NOLINT
{ "onboardingPanelScheduleText", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_SCHEDULE_TEXT }, // NOLINT
{ "onboardingPanelAcHeader", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_AC_HEADER }, // NOLINT
{ "onboardingPanelAcText", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_AC_TEXT },
{ "onboardingPanelTippingHeader", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_TIPPING_HEADER }, // NOLINT
{ "onboardingPanelTippingText", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_TIPPING_TEXT }, // NOLINT
{ "onboardingPanelRedeemHeader", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_REDEEM_HEADER }, // NOLINT
{ "onboardingPanelRedeemText", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_REDEEM_TEXT }, // NOLINT
{ "onboardingPanelCompleteHeader", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_COMPLETE_HEADER }, // NOLINT
{ "onboardingPanelCompleteText", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_COMPLETE_TEXT }, // NOLINT
{ "oneTime", IDS_BRAVE_UI_ONE_TIME },
{ "oneTimeDonation", IDS_BRAVE_UI_ONE_TIME_DONATION },
{ "openBalance", IDS_BRAVE_UI_OPEN_BALANCE },
Expand Down Expand Up @@ -854,9 +878,30 @@ void CustomizeWebUIHTMLSource(const std::string &name,
{ "on", IDS_BRAVE_UI_ON },
{ "onboardingMaybeLater", IDS_BRAVE_REWARDS_ONBOARDING_MAYBE_LATER },
{ "onboardingStartUsingRewards", IDS_BRAVE_REWARDS_ONBOARDING_START_USING_REWARDS }, // NOLINT
{ "onboardingTakeTour", IDS_BRAVE_REWARDS_ONBOARDING_TAKE_TOUR },
{ "onboardingTerms", IDS_BRAVE_REWARDS_ONBOARDING_TERMS },
{ "onboardingTipHeader", IDS_BRAVE_REWARDS_ONBOARDING_TIP_HEADER },
{ "onboardingTipText", IDS_BRAVE_REWARDS_ONBOARDING_TIP_TEXT },
{ "onboardingTourBack", IDS_BRAVE_REWARDS_ONBOARDING_TOUR_BACK },
{ "onboardingTourBegin", IDS_BRAVE_REWARDS_ONBOARDING_TOUR_BEGIN },
{ "onboardingTourContinue", IDS_BRAVE_REWARDS_ONBOARDING_TOUR_CONTINUE }, // NOLINT
{ "onboardingTourDone", IDS_BRAVE_REWARDS_ONBOARDING_TOUR_DONE },
{ "onboardingTourSkip", IDS_BRAVE_REWARDS_ONBOARDING_TOUR_SKIP },
{ "onboardingTourSkipForNow", IDS_BRAVE_REWARDS_ONBOARDING_TOUR_SKIP_FOR_NOW }, // NOLINT
{ "onboardingPanelWelcomeHeader", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_WELCOME_HEADER }, // NOLINT
{ "onboardingPanelWelcomeText", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_WELCOME_TEXT }, // NOLINT
{ "onboardingPanelAdsHeader", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_ADS_HEADER }, // NOLINT
{ "onboardingPanelAdsText", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_ADS_TEXT }, // NOLINT
{ "onboardingPanelScheduleHeader", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_SCHEDULE_HEADER }, // NOLINT
{ "onboardingPanelScheduleText", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_SCHEDULE_TEXT }, // NOLINT
{ "onboardingPanelAcHeader", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_AC_HEADER }, // NOLINT
{ "onboardingPanelAcText", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_AC_TEXT },
{ "onboardingPanelTippingHeader", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_TIPPING_HEADER }, // NOLINT
{ "onboardingPanelTippingText", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_TIPPING_TEXT }, // NOLINT
{ "onboardingPanelRedeemHeader", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_REDEEM_HEADER }, // NOLINT
{ "onboardingPanelRedeemText", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_REDEEM_TEXT }, // NOLINT
{ "onboardingPanelCompleteHeader", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_COMPLETE_HEADER }, // NOLINT
{ "onboardingPanelCompleteText", IDS_BRAVE_REWARDS_ONBOARDING_PANEL_COMPLETE_TEXT }, // NOLINT
{ "oneTimeTip", IDS_BRAVE_REWARDS_TIP_ONE_TIME_TIP },
{ "oneTimeTipAmount", IDS_BRAVE_REWARDS_TIP_ONE_TIME_TIP_AMOUNT },
{ "optInRequired", IDS_BRAVE_REWARDS_TIP_OPT_IN_REQUIRED },
Expand Down
84 changes: 84 additions & 0 deletions components/brave_rewards/resources/extension/brave_rewards/_locales/en_US/messages.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -639,8 +639,92 @@
"message": "Start using Brave Rewards",
"description": ""
},
"onboardingTakeTour": {
"message": "Take a quick tour",
"description": ""
},
"onboardingTerms": {
"message": "By proceeding, you agree to the $$1Terms of Service$$2 and $$3Privacy Policy$$4.",
"description": ""
},
"onboardingTourBack": {
"message": "Go Back",
"description": ""
},
"onboardingTourBegin": {
"message": "Let’s take a quick tour",
"description": ""
},
"onboardingTourContinue": {
"message": "Continue",
"description": ""
},
"onboardingTourDone": {
"message": "Done",
"description": ""
},
"onboardingTourSkip": {
"message": "Skip",
"description": ""
},
"onboardingTourSkipForNow": {
"message": "Skip for now",
"description": ""
},
"onboardingPanelWelcomeHeader": {
"message": "Welcome to Brave Rewards!",
"description": ""
},
"onboardingPanelWelcomeText": {
"message": "Brave private ads rewards you with tokens to support content creators unlike traditional ads, all while keeping your personal information private.",
"description": ""
},
"onboardingPanelAdsHeader": {
"message": "Where do ads show up?",
"description": ""
},
"onboardingPanelAdsText": {
"message": "Brave private ads will appear as a normal notification. You control how often you see these ads in settings.",
"description": ""
},
"onboardingPanelScheduleHeader": {
"message": "When do you receive rewards",
"description": ""
},
"onboardingPanelScheduleText": {
"message": "Your earned tokens from Brave ads throughout the current month will arrive on the 5th of the next month.",
"description": ""
},
"onboardingPanelAcHeader": {
"message": "Support creators on autopilot",
"description": ""
},
"onboardingPanelAcText": {
"message": "Creators are automatically rewarded with the earned tokens based on your browsing/engagement levels that we measure as ‘Attention’.",
"description": ""
},
"onboardingPanelTippingHeader": {
"message": "Say thank you with tips",
"description": ""
},
"onboardingPanelTippingText": {
"message": "Tipping is a way to personally encourage and support content or creators that you love. Get tippin!",
"description": ""
},
"onboardingPanelRedeemHeader": {
"message": "What can you do with tokens?",
"description": ""
},
"onboardingPanelRedeemText": {
"message": "Tokens can be used beyond supporting creators. You can buy digital goods and giftcards with a cashback bonus.",
"description": ""
},
"onboardingPanelCompleteHeader": {
"message": "WOOOOHOOOOO!$$1You’re done.",
"description": ""
},
"onboardingPanelCompleteText": {
"message": "By using Brave Rewards, you are protecting your privacy and helping make the web a better place for everyone. And that’s awesome!",
"description": ""
}
}
45 changes: 40 additions & 5 deletions components/brave_rewards/resources/extension/brave_rewards/components/panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { Provider } from '../../../ui/components/profile'
import { NotificationType, WalletState } from '../../../ui/components/walletWrapper'
import { RewardsNotificationType } from '../constants/rewards_panel_types'
import { Type as AlertType } from '../../../ui/components/alert'
import { RewardsOptInModal } from '../../../shared/components/onboarding'
import { RewardsOptInModal, RewardsTourModal } from '../../../shared/components/onboarding'

// Utils
import * as rewardsPanelActions from '../actions/rewards_panel_actions'
Expand All @@ -26,6 +26,7 @@ interface Props extends RewardsExtension.ComponentProps {

interface State {
showSummary: boolean
showRewardsTour: boolean
publisherKey: string | null
refreshingPublisher: boolean
publisherRefreshed: boolean
Expand All @@ -39,6 +40,7 @@ export class Panel extends React.Component<Props, State> {
super(props)
this.state = {
showSummary: true,
showRewardsTour: false,
publisherKey: null,
refreshingPublisher: false,
publisherRefreshed: false,
Expand Down Expand Up @@ -653,16 +655,49 @@ export class Panel extends React.Component<Props, State> {
}

showOnboarding () {
if (!this.props.rewardsPanelData.showOnboarding) {
const { showOnboarding } = this.props.rewardsPanelData

if (this.state.showRewardsTour) {
const onDone = () => {
this.setState({ showRewardsTour: false })
}

const onClose = () => {
onDone()
if (showOnboarding) {
this.actions.saveOnboardingResult('dismissed')
}
}

return (
<RewardsTourModal
rewardsEnabled={!showOnboarding}
onClose={onClose}
onDone={onDone}
/>
)
}

if (!showOnboarding) {
return null
}

const onEnable = () => this.actions.saveOnboardingResult('opted-in')
const onClose = () => this.actions.saveOnboardingResult('dismissed')
const onTakeTour = () => {
this.setState({ showRewardsTour: true })
}

const onEnable = () => {
this.actions.saveOnboardingResult('opted-in')
onTakeTour()
}

const onClose = () => {
this.actions.saveOnboardingResult('dismissed')
}

return (
<RewardsOptInModal
onAddFunds={this.onAddFunds}
onTakeTour={onTakeTour}
onEnable={onEnable}
onClose={onClose}
/>
Expand Down
18 changes: 0 additions & 18 deletions components/brave_rewards/resources/page/components/pageWallet.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
import * as React from 'react'
import { bindActionCreators, Dispatch } from 'redux'
import { connect } from 'react-redux'
import { RewardsOptInModal } from '../../shared/components/onboarding'
// Components
import {
ModalActivity,
Expand Down Expand Up @@ -767,22 +766,6 @@ class PageWallet extends React.Component<Props, State> {
return (!walletStatus || walletStatus === 'unverified') && balance && balance.total < 25
}

getOnboardingModal () {
if (!this.props.rewardsData.showOnboarding) {
return null
}
const onAddFunds = () => this.onFundsAction('add')
const onEnable = () => this.actions.saveOnboardingResult('opted-in')
const onClose = () => this.actions.saveOnboardingResult('dismissed')
return (
<RewardsOptInModal
onAddFunds={onAddFunds}
onEnable={onEnable}
onClose={onClose}
/>
)
}

render () {
const {
balance,
Expand Down Expand Up @@ -874,7 +857,6 @@ class PageWallet extends React.Component<Props, State> {
? this.generateMonthlyReport()
: null
}
{this.getOnboardingModal()}
</>
)
}
Expand Down
Loading

0 comments on commit aff9b7e

Please sign in to comment.