Merge pull request #9566 from brave/rewards-move-ios-qr-code

Move iOS recovery code into Backup and Restore modal

Author: emerick

.storybook/locale.ts

@@ -220,6 +220,8 @@ let locale: Record<string, string> = {
   rewardsRestoreText3: 'Restoring with a recovery key will replace your current wallet. So make sure you empty or back up your current wallet before restoring.',
   rewardsRestoreText4: 'Enter your recovery key or',
   rewardsSummary: 'Rewards Summary',
+  rewardsViewQRCodeText1: 'View QR Code',
+  rewardsViewQRCodeText2: 'for iOS Rewards users transferring BAT.',
   rewardsWhy: 'Why Brave Rewards…',
   rewardsWidgetBraveRewards: 'Brave Rewards',
   rewardsWidgetBat: 'BAT',

browser/ui/webui/brave_webui_source.cc

@@ -477,9 +477,6 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "adsSubdivisionTargetingDisabled",  IDS_BRAVE_REWARDS_LOCAL_ADS_SUBDIVISION_TARGETING_DISABLED },  // NOLINT
         { "adsTitle",  IDS_BRAVE_REWARDS_LOCAL_ADS_TITLE },
 
-        { "qrBoxText",  IDS_BRAVE_REWARDS_LOCAL_QR_BOX_TEXT },
-        { "qrBoxButton",  IDS_BRAVE_REWARDS_LOCAL_QR_BOX_BUTTON },
-
         { "bat", IDS_BRAVE_UI_BAT_REWARDS_TEXT },
         { "contributionTitle",  IDS_BRAVE_REWARDS_LOCAL_CONTR_TITLE },
         { "contributionDesc",  IDS_BRAVE_REWARDS_LOCAL_CONTR_DESC },
@@ -788,6 +785,8 @@ void CustomizeWebUIHTMLSource(const std::string &name,
         { "rewardsPanelText3", IDS_BRAVE_UI_REWARDS_PANEL_TEXT3 },
         { "rewardsPanelText4", IDS_BRAVE_UI_REWARDS_PANEL_TEXT4 },
         { "rewardsPanelTextVerify", IDS_BRAVE_UI_REWARDS_PANEL_VERIFY },
+        { "rewardsViewQRCodeText1", IDS_BRAVE_UI_REWARDS_VIEW_QR_CODE_TEXT1 },
+        { "rewardsViewQRCodeText2", IDS_BRAVE_UI_REWARDS_VIEW_QR_CODE_TEXT2 },
         { "rewardsRestoreText1", IDS_BRAVE_UI_REWARDS_RESTORE_TEXT1 },
         { "rewardsRestoreText2", IDS_BRAVE_UI_REWARDS_RESTORE_TEXT2 },
         { "rewardsRestoreText3", IDS_BRAVE_UI_REWARDS_RESTORE_TEXT3 },

components/brave_rewards/resources/page/components/pageWallet.tsx

@@ -792,7 +792,8 @@ class PageWallet extends React.Component<Props, State> {
       ui,
       pendingContributionTotal,
       recoveryKey,
-      externalWallet
+      externalWallet,
+      paymentId
     } = this.props.rewardsData
     const { total } = balance
     const { emptyWallet, modalBackup } = ui
@@ -801,6 +802,10 @@ class PageWallet extends React.Component<Props, State> {
     const walletType = externalWallet ? externalWallet.type : undefined
     const walletProvider = utils.getWalletProviderName(externalWallet)
 
+    if (!paymentId) {
+      this.props.actions.getPaymentId()
+    }
+
     return (
       <>
         <WalletWrapper
@@ -833,6 +838,7 @@ class PageWallet extends React.Component<Props, State> {
         {
           modalBackup
             ? <ModalBackupRestore
+              paymentId={paymentId}
               activeTabId={this.state.activeTabId}
               backupKey={recoveryKey}
               showBackupNotice={this.showBackupNotice()}

components/brave_rewards/resources/page/components/qrBox.tsx

@@ -19,7 +19,6 @@ import AdsBox from './adsBox'
 import ContributeBox from './contributeBox'
 import TipBox from './tipsBox'
 import MonthlyContributionBox from './monthlyContributionBox'
-import QRBox from './qrBox'
 import { SettingsOptInForm, RewardsTourModal, RewardsTourPromo } from '../../shared/components/onboarding'
 import { TourPromoWrapper } from './style'
 
@@ -405,7 +404,6 @@ class SettingsPage extends React.Component<Props, State> {
           onTOSClick={this.openTOS}
           onPrivacyClick={this.openPrivacyPolicy}
         />
-        <QRBox />
         <AdsBox />
         <ContributeBox />
         <MonthlyContributionBox />

components/brave_rewards/resources/page/components/settingsPage.tsx

@@ -1,33 +1,7 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License. v. 2.0. If a copy of the MPL was not distributed with this file.
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
-import * as React from 'react'
 import styled from 'styled-components'
-import Card, { CardProps } from 'brave-ui/components/layout/card'
-
-export const QRBoxWrapper = styled('div')<{}>`
-  width: 100%;
-  margin: 0 0 24px;
-`
-
-const CustomCard: React.FC<CardProps> = (props) =>
-  <Card emphasis={'60'} {...props} />
-
-export const QRBoxStyle = styled(CustomCard)`
-  font-size: 14px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  box-shadow: 0 0;
-`
-
-export const QRText = styled('div')<{}>`
-  font-size: 15px;
-  color: ${p => p.theme.color.text};
-  padding: 0 10px 0 0;
-  line-height: 1.5;
-`
 
 export const TourPromoWrapper = styled('div')<{}>`
   margin-top: 30px;

components/brave_rewards/resources/page/components/style.tsx

@@ -22,7 +22,7 @@ import {
 } from './style'
 import { TextArea, Modal, Button } from 'brave-ui/components'
 import { getLocale } from 'brave-ui/helpers'
-import { Alert, Tab } from '../'
+import { Alert, ModalQRCode, Tab } from '../'
 import ControlWrapper from 'brave-ui/components/formControls/controlWrapper'
 
 export interface Props {
@@ -43,11 +43,13 @@ export interface Props {
   funds?: string
   onReset: () => void
   internalFunds: number
+  paymentId: string
 }
 
 interface State {
   recoveryKey: string
   errorShown: boolean
+  showQRCodeModal: boolean
 }
 
 /*
@@ -60,7 +62,8 @@ export default class ModalBackupRestore extends React.PureComponent<Props, State
     super(props)
     this.state = {
       recoveryKey: '',
-      errorShown: false
+      errorShown: false,
+      showQRCodeModal: false
     }
   }
 
@@ -95,6 +98,12 @@ export default class ModalBackupRestore extends React.PureComponent<Props, State
     })
   }
 
+  toggleQRCodeModal = () => {
+    this.setState({
+      showQRCodeModal: !this.state.showQRCodeModal
+    })
+  }
+
   onRestore = (key?: string) => {
     key = typeof key === 'string' ? key : this.state.recoveryKey
     this.props.onRestore(key)
@@ -285,6 +294,13 @@ export default class ModalBackupRestore extends React.PureComponent<Props, State
             {getLocale('rewardsRestoreText3')}
           </StyledText>
         </StyledTextWrapper>
+        <StyledTextWrapper>
+          <StyledText>
+            <StyledLink onClick={this.toggleQRCodeModal}>
+              {getLocale('rewardsViewQRCodeText1')}
+            </StyledLink> {getLocale('rewardsViewQRCodeText2')}
+          </StyledText>
+        </StyledTextWrapper>
         <StyledActionsWrapper>
           <ActionButton
             level={'secondary'}
@@ -367,6 +383,7 @@ export default class ModalBackupRestore extends React.PureComponent<Props, State
       activeTabId,
       onClose,
       onTabChange,
+      paymentId,
       testId
     } = this.props
 
@@ -392,6 +409,14 @@ export default class ModalBackupRestore extends React.PureComponent<Props, State
         {
           this.getTabContent(activeTabId)
         }
+        {
+          this.state.showQRCodeModal
+          ? <ModalQRCode
+              paymentId={paymentId}
+              onClose={this.toggleQRCodeModal}
+          />
+          : null
+        }
       </Modal>
     )
   }

components/brave_rewards/resources/ui/components/modalBackupRestore/index.tsx

@@ -45,6 +45,7 @@ storiesOf('Rewards/Modal', module)
     return (
       <div style={{ maxWidth: '900px', background: '#fff', padding: '30px' }}>
         <ModalBackupRestore
+          paymentId={'f2e6494e-fb21-44d1-90e9-b5408799acd8'}
           funds={'55 BAT'}
           activeTabId={store.state.activeTabId}
           showBackupNotice={boolean('Show backup notice?', false)}

components/brave_rewards/resources/ui/stories/modal.tsx

@@ -265,6 +265,7 @@ class PageWallet extends React.Component<Props, State> {
         {
           this.state.modalBackup
             ? <ModalBackupRestore
+              paymentId={'f2e6494e-fb21-44d1-90e9-b5408799acd8'}
               activeTabId={this.state.activeTabId}
               backupKey={'crouch  hint  glow  recall  round  angry  weasel  luggage save  hood  census  near  still   power  vague  balcony camp  law  now  certain  wagon  affair  butter  choice '}
               showBackupNotice={false}

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

@@ -415,8 +415,6 @@
       <message name="IDS_BRAVE_REWARDS_LOCAL_ADS_SUBDIVISION_TARGETING_AUTO_DETECT" desc="">Auto-detect</message>
       <message name="IDS_BRAVE_REWARDS_LOCAL_ADS_SUBDIVISION_TARGETING_DISABLE" desc="">Disable</message>
       <message name="IDS_BRAVE_REWARDS_LOCAL_ADS_SUBDIVISION_TARGETING_DISABLED" desc="">Disabled</message>
-      <message name="IDS_BRAVE_REWARDS_LOCAL_QR_BOX_TEXT" desc="">QR Code for iOS Rewards users transferring BAT</message>
-      <message name="IDS_BRAVE_REWARDS_LOCAL_QR_BOX_BUTTON" desc="">QR Code</message>
       <message name="IDS_BRAVE_REWARDS_LOCAL_SERVER_DISCONNECT_FAILED" desc="">Sorry, there was an error when trying to disconnect your <ph name="PROVIDER">$1</ph> account. Please try again in a little while.</message>
       <message name="IDS_BRAVE_UI_BAT_REWARDS_TEXT" desc="">BAT</message>
       <message name="IDS_BRAVE_REWARDS_LOCAL_DEVICE_OFFLINE" desc="">The device is offline, please try again later.</message>
@@ -861,6 +859,8 @@
       <message name="IDS_BRAVE_UI_REWARDS_PANEL_TEXT2" desc="">Your Brave wallet is powered by <ph name="PROVIDER">$1<ex>Uphold</ex></ph>.</message>
       <message name="IDS_BRAVE_UI_REWARDS_PANEL_TEXT3" desc="">Brave Rewards is built on the Basic Attention Token. Learn more about BAT</message>
       <message name="IDS_BRAVE_UI_REWARDS_PANEL_TEXT4" desc="">here</message>
+      <message name="IDS_BRAVE_UI_REWARDS_VIEW_QR_CODE_TEXT1" desc="">View QR Code</message>
+      <message name="IDS_BRAVE_UI_REWARDS_VIEW_QR_CODE_TEXT2" desc="">for iOS Rewards users transferring BAT.</message>
       <message name="IDS_BRAVE_UI_REWARDS_RESTORE_TEXT1" desc="">Restore your Wallet</message>
       <message name="IDS_BRAVE_UI_REWARDS_RESTORE_TEXT2" desc="">Use your recovery key to restore your wallet.</message>
       <message name="IDS_BRAVE_UI_REWARDS_RESTORE_TEXT3" desc="">Restoring with a recovery key will replace your current wallet. So make sure you empty or back up your current wallet before restoring.</message>