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.

Sign up for GitHub

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

Adds new on boarding flow #3081

Merged
merged 1 commit into from
Aug 7, 2019
Merged

Adds new on boarding flow #3081

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions browser/ui/webui/brave_webui_source.cc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -484,6 +484,8 @@ void CustomizeWebUIHTMLSource(const std::string &name,
{ "walletVerificationList2", IDS_BRAVE_UI_WALLET_VERIFICATION_LIST2 },
{ "walletVerificationList3", IDS_BRAVE_UI_WALLET_VERIFICATION_LIST3 },
{ "walletVerificationListHeader", IDS_BRAVE_UI_WALLET_VERIFICATION_HEADER }, // NOLINT
{ "walletVerificationNote1", IDS_BRAVE_UI_WALLET_VERIFICATION_NOTE1 },
{ "walletVerificationNote2", IDS_BRAVE_UI_WALLET_VERIFICATION_NOTE2 },
{ "walletVerificationTitle1", IDS_BRAVE_UI_WALLET_VERIFICATION_TITLE1 },
{ "walletVerificationTitle2", IDS_BRAVE_UI_WALLET_VERIFICATION_TITLE2 },
{ "walletVerified", IDS_BRAVE_UI_WALLET_VERIFIED },
Expand Down
36 changes: 0 additions & 36 deletions components/brave_rewards/resources/extension/brave_rewards/_locales/en_US/messages.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -495,42 +495,6 @@
"message": "Disconnect from Brave Rewards",
"description": "CTA to disconnect user wallet from rewards"
},
"walletVerificationButton": {
"message": "Verify wallet",
"description": "CTA to verify wallet in the wallet "
},
"walletVerificationFooter": {
"message": "Our wallet service is provided by",
"description": "Notice about who is our partner for user wallet"
},
"walletVerificationID": {
"message": "Please have your government issued ID available.",
"description": "Notice that alerts users that they need to prepare some ID to do KYC."
},
"walletVerificationListCompact1": {
"message": "Keep your Ad Rewards tokens",
"description": "Bullet point why connecting wallet is good"
},
"walletVerificationListCompact2": {
"message": "Add tokens using credit card",
"description": "Bullet point why connecting wallet is good"
},
"walletVerificationListCompact3": {
"message": "Withdraw tokens",
"description": "Bullet point why connecting wallet is good"
},
"walletVerificationListHeader": {
"message": "A verified wallet allows you to:",
"description": "Header for bullet list of user wallet features"
},
"walletVerificationTitle1": {
"message": "Verify Your Wallet",
"description": "First part of the title in verify panel"
},
"walletVerificationTitle2": {
"message": "And manage your funds easily!",
"description": "Second part of the title in verify panel"
},
"walletVerified": {
"message": "Verified",
"description": "Status button that tells user that he is verified"
Expand Down
2 changes: 0 additions & 2 deletions components/brave_rewards/resources/extension/brave_rewards/actions/rewards_panel_actions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,5 +150,3 @@ export const onBalance = (balance: RewardsExtension.Balance) => action(types.ON_
export const onExternalWallet = (wallet: RewardsExtension.ExternalWallet) => action(types.ON_EXTERNAL_WALLET, {
wallet
})

export const onOnBoardingDisplayed = () => action(types.ON_ON_BOARDING_DISPLAYED)
13 changes: 0 additions & 13 deletions ...ve_rewards/resources/extension/brave_rewards/background/reducers/rewards_panel_reducer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -437,19 +437,6 @@ export const rewardsPanelReducer = (state: RewardsExtension.State | undefined, a
state.externalWallet = payload.wallet
break
}
case types.ON_ON_BOARDING_DISPLAYED: {
let ui = state.ui
if (!ui) {
ui = {}
}

ui.onBoardingDisplayed = true
state = {
...state,
ui
}
break
}
}
return state
}
3 changes: 0 additions & 3 deletions components/brave_rewards/resources/extension/brave_rewards/background/storage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,6 @@ export const defaultState: RewardsExtension.State = {
total: 0,
rates: {},
wallets: {}
},
ui: {
onBoardingDisplayed: false
}
}

Expand Down
42 changes: 6 additions & 36 deletions components/brave_rewards/resources/extension/brave_rewards/components/panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import * as React from 'react'
import { bindActionCreators, Dispatch } from 'redux'
import { connect } from 'react-redux'
import { WalletAddIcon, BatColorIcon } from 'brave-ui/components/icons'
import { WalletWrapper, WalletSummary, WalletSummarySlider, WalletPanel, PanelVerify } from 'brave-ui/features/rewards'
import { WalletWrapper, WalletSummary, WalletSummarySlider, WalletPanel } from 'brave-ui/features/rewards'
import { Provider } from 'brave-ui/features/rewards/profile'
import { NotificationType, WalletState } from 'brave-ui/features/rewards/walletWrapper'
import { RewardsNotificationType } from '../constants/rewards_panel_types'
Expand All @@ -28,11 +28,10 @@ interface State {
refreshingPublisher: boolean
publisherRefreshed: boolean
timerPassed: boolean
showVerifyOnBoarding: boolean
}

export class Panel extends React.Component<Props, State> {
private defaultTipAmounts: number[]
readonly defaultTipAmounts = [1, 5, 10]
private delayTimer: ReturnType<typeof setTimeout>
constructor (props: Props) {
super(props)
Expand All @@ -41,10 +40,8 @@ export class Panel extends React.Component<Props, State> {
publisherKey: null,
refreshingPublisher: false,
publisherRefreshed: false,
timerPassed: false,
showVerifyOnBoarding: false
timerPassed: false
}
this.defaultTipAmounts = [1, 5, 10]
}

get actions () {
Expand Down Expand Up @@ -567,24 +564,12 @@ export class Panel extends React.Component<Props, State> {
}

handleUpholdLink = (link: string) => {
const { ui, externalWallet } = this.props.rewardsPanelData
const { externalWallet } = this.props.rewardsPanelData

if (
!this.state.showVerifyOnBoarding &&
(!ui || !ui.onBoardingDisplayed) &&
(!externalWallet || (externalWallet && externalWallet.status === 0))) {
this.setState({
showVerifyOnBoarding: true
})
return
if (!externalWallet || (externalWallet && externalWallet.status === 0)) {
link = 'brave://rewards/#verify'
}

this.setState({
showVerifyOnBoarding: false
})

this.actions.onOnBoardingDisplayed()

chrome.tabs.create({
url: link
})
Expand All @@ -601,12 +586,6 @@ export class Panel extends React.Component<Props, State> {
this.handleUpholdLink(externalWallet.verifyUrl)
}

toggleVerifyPanel = () => {
this.setState({
showVerifyOnBoarding: !this.state.showVerifyOnBoarding
})
}

getWalletStatus = (): WalletState => {
const { externalWallet } = this.props.rewardsPanelData

Expand Down Expand Up @@ -723,15 +702,6 @@ export class Panel extends React.Component<Props, State> {
userName={this.getUserName()}
{...notification}
>
{
this.state.showVerifyOnBoarding
? <PanelVerify
compact={true}
onVerifyClick={this.onVerifyClick}
onClose={this.toggleVerifyPanel}
/>
: null
}
<WalletSummarySlider
id={'panel-slider'}
onToggle={this.onSliderToggle}
Expand Down
3 changes: 1 addition & 2 deletions components/brave_rewards/resources/extension/brave_rewards/constants/rewards_panel_types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,7 @@ export const enum types {
ON_ALL_NOTIFICATIONS = '@@rewards_panel/ON_ALL_NOTIFICATIONS',
ON_INIT = '@@rewards_panel/ON_INIT',
ON_BALANCE = '@@rewards_panel/ON_BALANCE',
ON_EXTERNAL_WALLET = '@@rewards_panel/ON_EXTERNAL_WALLET',
ON_ON_BOARDING_DISPLAYED = '@@rewards_panel/ON_ON_BOARDING_DISPLAYED'
ON_EXTERNAL_WALLET = '@@rewards_panel/ON_EXTERNAL_WALLET'
}

// Note: This declaration must match the RewardsNotificationType enum in
Expand Down
67 changes: 34 additions & 33 deletions components/brave_rewards/resources/ui/components/pageWallet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ import {
ModalActivity,
ModalBackupRestore,
ModalPending,
ModalVerify,
WalletEmpty,
WalletSummary,
WalletWrapper,
PanelVerify
WalletWrapper
} from 'brave-ui/features/rewards'
import { WalletAddIcon, WalletWithdrawIcon } from 'brave-ui/components/icons'
import { AlertWallet, WalletState } from 'brave-ui/features/rewards/walletWrapper'
Expand All @@ -32,7 +32,7 @@ interface State {
modalBackup: boolean
modalActivity: boolean
modalPendingContribution: boolean
showVerifyOnBoarding: boolean
modalVerify: boolean
}

interface Props extends Rewards.ComponentProps {
Expand All @@ -46,7 +46,7 @@ class PageWallet extends React.Component<Props, State> {
modalBackup: false,
modalActivity: false,
modalPendingContribution: false,
showVerifyOnBoarding: false
modalVerify: false
}
}

Expand All @@ -56,6 +56,7 @@ class PageWallet extends React.Component<Props, State> {

componentDidMount () {
this.isBackupUrl()
this.isVerifyUrl()
}

onModalBackupClose = () => {
Expand Down Expand Up @@ -193,6 +194,18 @@ class PageWallet extends React.Component<Props, State> {
}
}

isVerifyUrl = () => {
if (this.urlHashIs('#verify')) {
this.toggleVerifyModal()
}
}

toggleVerifyModal = () => {
this.setState({
modalVerify: !this.state.modalVerify
})
}

onModalActivityAction (action: string) {
// TODO NZ implement
console.log(action)
Expand Down Expand Up @@ -322,40 +335,28 @@ class PageWallet extends React.Component<Props, State> {

handleUpholdLink = (link: string) => {
const { ui, externalWallet } = this.props.rewardsData
if (
!this.state.showVerifyOnBoarding &&
!ui.onBoardingDisplayed &&
(!externalWallet || (externalWallet && externalWallet.status === 0))) {
this.setState({
showVerifyOnBoarding: true
})
if (!ui.onBoardingDisplayed &&
(!externalWallet || (externalWallet && externalWallet.status === 0))) {
this.toggleVerifyModal()
return
}

this.setState({
showVerifyOnBoarding: false
})

this.actions.onOnBoardingDisplayed()

window.open(link, '_self')
}

onVerifyClick = () => {
onVerifyClick = (hideVerify: boolean) => {
const { externalWallet } = this.props.rewardsData

if (!externalWallet || !externalWallet.verifyUrl) {
this.actions.getExternalWallet('uphold')
return
}

this.handleUpholdLink(externalWallet.verifyUrl)
}
if (hideVerify) {
this.actions.onOnBoardingDisplayed()
}

toggleVerifyPanel = () => {
this.setState({
showVerifyOnBoarding: !this.state.showVerifyOnBoarding
})
this.handleUpholdLink(externalWallet.verifyUrl)
}

getWalletStatus = (): WalletState => {
Expand Down Expand Up @@ -473,19 +474,11 @@ class PageWallet extends React.Component<Props, State> {
grants={this.getGrants()}
alert={this.walletAlerts()}
walletState={this.getWalletStatus()}
onVerifyClick={this.onVerifyClick}
onVerifyClick={this.onVerifyClick.bind(this, false)}
onDisconnectClick={this.onDisconnectClick}
goToUphold={this.goToUphold}
userName={this.getUserName()}
>
{
this.state.showVerifyOnBoarding
? <PanelVerify
onVerifyClick={this.onVerifyClick}
onClose={this.toggleVerifyPanel}
/>
: null
}
{
enabledMain
? emptyWallet
Expand Down Expand Up @@ -522,6 +515,14 @@ class PageWallet extends React.Component<Props, State> {
/>
: null
}
{
this.state.modalVerify
? <ModalVerify
onVerifyClick={this.onVerifyClick.bind(this, true)}
onClose={this.toggleVerifyModal}
/>
: null
}
{
// TODO NZ add actual data for the whole section
this.state.modalActivity
Expand Down
3 changes: 0 additions & 3 deletions components/definitions/rewardsExtensions.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,6 @@ declare namespace RewardsExtension {
recurringTips: Record<string, number>[]
tipAmounts: Record<string, number[]>
externalWallet?: ExternalWallet
ui: {
onBoardingDisplayed?: boolean
}
}

interface ApplicationState {
Expand Down
14 changes: 8 additions & 6 deletions components/resources/brave_components_strings.grd
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -556,13 +556,15 @@
<message name="IDS_BRAVE_UI_WALLET_VERIFICATION_BUTTON" desc="">Verify wallet</message>
<message name="IDS_BRAVE_UI_WALLET_VERIFICATION_FOOTER" desc="">Our wallet service is provided by</message>
<message name="IDS_BRAVE_UI_WALLET_VERIFICATION_ID" desc="">Please have your government issued ID available.</message>
<message name="IDS_BRAVE_UI_WALLET_VERIFICATION_LIST1" desc="">Withdraw and add funds</message>
<message name="IDS_BRAVE_UI_WALLET_VERIFICATION_LIST2" desc="">No need to solve captcha to earn ads rewards</message>
<message name="IDS_BRAVE_UI_WALLET_VERIFICATION_LIST3" desc="">Rewards received will never expire and be deposited to your wallet instantly</message>
<message name="IDS_BRAVE_UI_WALLET_VERIFICATION_HEADER" desc="">A verified wallet allows you to:</message>
<message name="IDS_BRAVE_UI_WALLET_VERIFICATION_TITLE1" desc="">Verify Your Wallet</message>
<message name="IDS_BRAVE_UI_WALLET_VERIFICATION_TITLE2" desc="">And manage your funds easily!</message>
<message name="IDS_BRAVE_UI_WALLET_VERIFICATION_LIST1" desc="">Withdraw BAT that you earn from viewing privacy-respecting ads</message>
<message name="IDS_BRAVE_UI_WALLET_VERIFICATION_LIST2" desc="">Purchase additional BAT with credit cards and other sources</message>
<message name="IDS_BRAVE_UI_WALLET_VERIFICATION_LIST3" desc="">Withdraw BAT that you may have previously added to your Brave Rewards wallet</message>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy in other PR had a full-stop

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image in the issue don't have it brave/brave-browser#5518

<message name="IDS_BRAVE_UI_WALLET_VERIFICATION_HEADER" desc="">Benefits of verifying</message>
<message name="IDS_BRAVE_UI_WALLET_VERIFICATION_TITLE1" desc="">Ready to verify your wallet?</message>
<message name="IDS_BRAVE_UI_WALLET_VERIFICATION_TITLE2" desc="">Verification is not necessary to earn rewards for creator contributions</message>
<message name="IDS_BRAVE_UI_WALLET_VERIFIED" desc="">Verified</message>
<message name="IDS_BRAVE_UI_WALLET_VERIFICATION_NOTE1" desc="">Uphold may require you to verify your identity based on services requested.</message>
<message name="IDS_BRAVE_UI_WALLET_VERIFICATION_NOTE2" desc="">Brave Software Inc. does not process, store, or access any of the personal information that you provide to Uphold when you establish an account with them.</message>

<!-- WebUI brave sync resources -->
<!-- WebUI brave sync resources: Shared Content -->
Expand Down
Loading