Adds new on boarding flow

Resolves brave/brave-browser#5518

browser/ui/webui/brave_webui_source.cc

@@ -483,6 +483,7 @@ 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
+        { "walletVerificationNote", IDS_BRAVE_UI_WALLET_VERIFICATION_NOTE },
         { "walletVerificationTitle1", IDS_BRAVE_UI_WALLET_VERIFICATION_TITLE1 },
         { "walletVerificationTitle2", IDS_BRAVE_UI_WALLET_VERIFICATION_TITLE2 },
         { "walletVerified", IDS_BRAVE_UI_WALLET_VERIFIED },

components/brave_rewards/resources/extension/brave_rewards/_locales/en_US/messages.json

@@ -487,42 +487,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"

components/brave_rewards/resources/extension/brave_rewards/actions/rewards_panel_actions.ts

@@ -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)

components/brave_rewards/resources/extension/brave_rewards/background/reducers/rewards_panel_reducer.ts

@@ -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
 }

components/brave_rewards/resources/extension/brave_rewards/background/storage.ts

@@ -40,9 +40,6 @@ export const defaultState: RewardsExtension.State = {
     total: 0,
     rates: {},
     wallets: {}
-  },
-  ui: {
-    onBoardingDisplayed: false
   }
 }
 

components/brave_rewards/resources/extension/brave_rewards/components/panel.tsx

@@ -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'
@@ -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)
@@ -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 () {
@@ -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
     })
@@ -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
 
@@ -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}

components/brave_rewards/resources/extension/brave_rewards/constants/rewards_panel_types.ts

@@ -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

components/brave_rewards/resources/ui/components/pageWallet.tsx

@@ -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'
@@ -32,7 +32,7 @@ interface State {
   modalBackup: boolean
   modalActivity: boolean
   modalPendingContribution: boolean
-  showVerifyOnBoarding: boolean
+  modalVerify: boolean
 }
 
 interface Props extends Rewards.ComponentProps {
@@ -46,7 +46,7 @@ class PageWallet extends React.Component<Props, State> {
       modalBackup: false,
       modalActivity: false,
       modalPendingContribution: false,
-      showVerifyOnBoarding: false
+      modalVerify: false
     }
   }
 
@@ -56,6 +56,7 @@ class PageWallet extends React.Component<Props, State> {
 
   componentDidMount () {
     this.isBackupUrl()
+    this.isVerifyUrl()
   }
 
   onModalBackupClose = () => {
@@ -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)
@@ -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 => {
@@ -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
@@ -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

components/definitions/rewardsExtensions.d.ts

@@ -18,9 +18,6 @@ declare namespace RewardsExtension {
     recurringTips: Record<string, number>[]
     tipAmounts: Record<string, number[]>
     externalWallet?: ExternalWallet
-    ui: {
-      onBoardingDisplayed?: boolean
-    }
   }
 
   interface ApplicationState {

components/resources/brave_components_strings.grd

@@ -553,13 +553,14 @@
       <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-respected ads</message>
+      <message name="IDS_BRAVE_UI_WALLET_VERIFICATION_LIST2" desc="">Purchase additional BAT with your credit card and other sources through Uphold</message>
+      <message name="IDS_BRAVE_UI_WALLET_VERIFICATION_LIST3" desc="">Withdraw BAT that you may have previously added to your anonymous Brave wallet</message>
+      <message name="IDS_BRAVE_UI_WALLET_VERIFICATION_HEADER" desc="">Benefits of Verifying</message>
+      <message name="IDS_BRAVE_UI_WALLET_VERIFICATION_TITLE1" desc="">Verifying your wallet is optional.</message>
+      <message name="IDS_BRAVE_UI_WALLET_VERIFICATION_TITLE2" desc="">No verification necessary to earn rewards and tip creators</message>
       <message name="IDS_BRAVE_UI_WALLET_VERIFIED" desc="">Verified</message>
+      <message name="IDS_BRAVE_UI_WALLET_VERIFICATION_NOTE" desc="">Uphold may require you to verify your identity based on services requested. Brave Software can not see your personal info that you share with Uphold.</message>
 
       <!-- WebUI brave sync resources -->
       <!-- WebUI brave sync resources: Shared Content -->