Adds clear payments options

Resolves #8537

Auditors:

Test Plan:

app/browser/api/ledger.js

@@ -1212,8 +1212,8 @@ const quit = (state) => {
   quitP = true
   state = addNewLocation(state, locationDefault)
 
-  if (!getSetting(settings.PAYMENTS_ENABLED) && getSetting(settings.SHUTDOWN_CLEAR_HISTORY)) {
-    state = ledgerState.resetSynopsis(state, true)
+  if (!getSetting(settings.PAYMENTS_ENABLED) && getSetting(settings.SHUTDOWN_CLEAR_PUBLISHERS)) {
+    state = ledgerState.resetPublishers(state)
   }
 
   return state
@@ -2714,10 +2714,6 @@ const savePublisherData = (publisherKey, prop, value) => {
   synopsis.publishers[publisherKey][prop] = value
 }
 
-const deleteSynopsis = () => {
-  synopsis.publishers = {}
-}
-
 let currentMediaKey = null
 const onMediaRequest = (state, xhr, type, details) => {
   if (!xhr || type == null) {
@@ -3065,6 +3061,51 @@ const activityRoundTrip = (err, response, body) => {
   updater.checkForUpdate(false, true)
 }
 
+const deleteWallet = (state) => {
+  state = ledgerState.deleteSynopsis(state)
+  state = state.setIn(['settings', settings.PAYMENTS_ENABLED], false)
+
+  client = null
+  synopsis = null
+
+  const fs = require('fs')
+  fs.access(pathName(statePath), fs.constants.F_OK, (err) => {
+    if (err) {
+      return
+    }
+
+    fs.unlink(pathName(statePath), (err) => {
+      if (err) {
+        return console.error('read error: ' + err.toString())
+      }
+    })
+  })
+
+  return state
+}
+
+const clearPaymentHistory = (state) => {
+  // TODO should we block this action if contribution is in progress?
+  state = ledgerState.setInfoProp(state, 'transactions', Immutable.List())
+
+  const fs = require('fs')
+  const path = pathName(statePath)
+  try {
+    fs.accessSync(path, fs.constants.W_OK)
+    let data = fs.readFileSync(path)
+    data = JSON.parse(data)
+    if (data) {
+      data.transactions = []
+      data.ballots = []
+      muonWriter(statePath, data)
+    }
+  } catch (err) {
+    console.error(`Problem reading ${path} when clearing payment history`)
+  }
+
+  return state
+}
+
 const getMethods = () => {
   const publicMethods = {
     backupKeys,
@@ -3094,7 +3135,6 @@ const getMethods = () => {
     onNetworkConnected,
     migration,
     onInitRead,
-    deleteSynopsis,
     normalizePinned,
     roundToTarget,
     onFavIconReceived,
@@ -3120,7 +3160,9 @@ const getMethods = () => {
     processMediaData,
     addNewLocation,
     addSiteVisit,
-    shouldTrackTab
+    shouldTrackTab,
+    deleteWallet,
+    clearPaymentHistory
   }
 
   let privateMethods = {}

app/browser/reducers/ledgerReducer.js

@@ -78,9 +78,12 @@ const ledgerReducer = (state, action, immutableAction) => {
         const defaults = state.get('clearBrowsingDataDefaults')
         const temp = state.get('tempClearBrowsingData', Immutable.Map())
         const clearData = defaults ? defaults.merge(temp) : temp
-        if (clearData.get('browserHistory') && !getSetting(settings.PAYMENTS_ENABLED)) {
-          state = ledgerState.resetSynopsis(state)
-          ledgerApi.deleteSynopsis()
+        if (clearData.get('publishersClear')) {
+          state = ledgerState.resetPublishers(state)
+        }
+
+        if (clearData.get('paymentHistory')) {
+          state = ledgerApi.clearPaymentHistory(state)
         }
         break
       }
@@ -540,6 +543,11 @@ const ledgerReducer = (state, action, immutableAction) => {
         state = aboutPreferencesState.setBackupStatus(state, true)
         break
       }
+    case appConstants.APP_ON_WALLET_DELETE:
+      {
+        state = ledgerApi.deleteWallet(state)
+        break
+      }
     case appConstants.APP_ON_PUBLISHER_TOGGLE_UPDATE:
       {
         const viewData = makeJS(action.get('viewData'))

app/common/state/ledgerState.js

@@ -122,21 +122,25 @@ const ledgerState = {
     return state
   },
 
-  resetSynopsis: (state, options = false) => {
+  deleteSynopsis: (state) => {
     state = validateState(state)
-
-    if (options) {
-      state = state
-        .setIn(['ledger', 'synopsis', 'options'], Immutable.Map())
-        .setIn(['ledger', 'about', 'synopsisOptions'], Immutable.Map())
-    }
-
     state = pageDataState.resetPageData(state)
 
     return state
-      .setIn(['ledger', 'synopsis', 'publishers'], Immutable.Map())
-      .setIn(['ledger', 'locations'], Immutable.Map())
-      .setIn(['ledger', 'about', 'synopsis'], Immutable.List())
+      .setIn(['cache', 'ledgerVideos'], Immutable.Map())
+      .set('ledger', Immutable.fromJS({
+        about: {
+          synopsis: [],
+          synopsisOptions: {}
+        },
+        info: {},
+        locations: {},
+        synopsis: {
+          options: {},
+          publishers: {}
+        },
+        promotion: {}
+      }))
   },
 
   /**
@@ -195,6 +199,20 @@ const ledgerState = {
     return state.setIn(['ledger', 'synopsis', 'publishers', key, prop], value)
   },
 
+  resetPublishers: (state) => {
+    state = validateState(state)
+
+    state = pageDataState.resetPageData(state)
+
+    // TODO should we reset deleted publishers as well?
+
+    return state
+      .setIn(['ledger', 'synopsis', 'publishers'], Immutable.Map())
+      .setIn(['ledger', 'locations'], Immutable.Map())
+      .setIn(['ledger', 'about', 'synopsis'], Immutable.List())
+      .setIn(['cache', 'ledgerVideos'], Immutable.Map())
+  },
+
   /**
    * SYNOPSIS / PUBLISHER / OPTIONS
    */

app/extensions/brave/locales/en-US/preferences.properties

@@ -226,6 +226,9 @@ paintTabs=Show tabs in page theme color
 passwordManager=Password Manager
 passwordsAndForms=Passwords and Forms
 paymentsAllowPromotions=Notify me about token promotions
+paymentsDeleteWallet=Delete wallet
+paymentsDeleteWalletConfirmation=Are you sure that you want to delete your wallet? If you don't have your backup keys, your wallet will be lost forever.
+paymentHistory=Payment history
 paymentHistoryDueFooterText=Your next contribution is due.
 paymentHistoryFooterText=Your next contribution is {{reconcileDate}}.
 paymentHistoryIcon.title=Your Payment History
@@ -269,6 +272,7 @@ protocolRegistrationPermission=Protocol registration
 publicOnly=Default public interface only
 publicPrivate=Default public and private interfaces
 publisher=Site
+publishersClear=Usage data for Brave Payments
 publisherMediaName={{publisherName}} on {{provider}}
 publishers=Publishers
 rank=Rank

app/locale.js

@@ -235,6 +235,7 @@ var rendererIdentifiers = function () {
     'dappDismiss',
     'dappEnableExtension',
     'banSiteConfirmation',
+    'paymentsDeleteWalletConfirmation',
     'messageBoxOk',
     'messageBoxCancel',
     // other

app/renderer/components/common/browserButton.js

@@ -13,6 +13,7 @@ class BrowserButton extends ImmutableComponent {
       styles.browserButton,
       this.props.primaryColor && [styles.browserButton_default, styles.browserButton_primaryColor],
       this.props.secondaryColor && [styles.browserButton_default, styles.browserButton_secondaryColor],
+      this.props.alertColor && [styles.browserButton_default, styles.browserButton_alertColor],
       this.props.subtleItem && [styles.browserButton_default, styles.browserButton_subtleItem],
       // actionItem is just subtleItem with a blue background
       this.props.actionItem &&
@@ -195,6 +196,21 @@ const styles = StyleSheet.create({
     }
   },
 
+  browserButton_alertColor: {
+    background: globalStyles.button.alert.background,
+    borderLeft: `2px solid ${globalStyles.button.alert.gradientColor1}`,
+    borderRight: `2px solid ${globalStyles.button.alert.gradientColor2}`,
+    borderTop: `2px solid ${globalStyles.button.alert.gradientColor1}`,
+    borderBottom: `2px solid ${globalStyles.button.alert.gradientColor2}`,
+    cursor: 'pointer',
+    fontWeight: 500,
+
+    ':hover': {
+      border: `2px solid ${globalStyles.button.alert.borderHoverColor}`,
+      color: globalStyles.button.alert.hoverColor
+    }
+  },
+
   browserButton_extensionItem: {
     backgroundSize: 'contain',
     height: '17px',

app/renderer/components/main/clearBrowsingDataPanel.js

@@ -31,6 +31,8 @@ class ClearBrowsingDataPanel extends React.Component {
     this.onToggleAutocompleteData = this.onToggleSetting.bind(this, 'autocompleteData')
     this.onToggleAutofillData = this.onToggleSetting.bind(this, 'autofillData')
     this.onToggleSavedSiteSettings = this.onToggleSetting.bind(this, 'savedSiteSettings')
+    this.onTogglePublishersClear = this.onToggleSetting.bind(this, 'publishersClear')
+    this.onTogglePaymentHistory = this.onToggleSetting.bind(this, 'paymentHistory')
     this.onClear = this.onClear.bind(this)
     this.onCancel = this.onCancel.bind(this)
   }
@@ -75,6 +77,8 @@ class ClearBrowsingDataPanel extends React.Component {
     props.autocompleteData = data.get('autocompleteData')
     props.autofillData = data.get('autofillData')
     props.savedSiteSettings = data.get('savedSiteSettings')
+    props.publishersClear = data.get('publishersClear')
+    props.paymentHistory = data.get('paymentHistory')
 
     return props
   }
@@ -120,6 +124,16 @@ class ClearBrowsingDataPanel extends React.Component {
             testId='siteSettingsSwitch'
             checkedOn={this.props.savedSiteSettings}
             onClick={this.onToggleSavedSiteSettings} />
+          <SwitchControl
+            rightl10nId='publishersClear'
+            testId='publishersClear'
+            checkedOn={this.props.publishersClear}
+            onClick={this.onTogglePublishersClear} />
+          <SwitchControl
+            rightl10nId='paymentHistory'
+            testId='paymentHistorySwitch'
+            checkedOn={this.props.paymentHistory}
+            onClick={this.onTogglePaymentHistory} />
         </CommonFormSection>
         <CommonFormSection buttons>
           <Button className='whiteButton'

app/renderer/components/preferences/payment/advancedSettings.js

@@ -5,23 +5,27 @@
 const React = require('react')
 const {StyleSheet, css} = require('aphrodite/no-important')
 
-// util
-const {changeSetting} = require('../../../lib/settingsUtil')
-const appConfig = require('../../../../../js/constants/appConfig')
-
-// components
+// Components
 const BrowserButton = require('../../common/browserButton')
 const {SettingsList, SettingItem, SettingCheckbox} = require('../../common/settings')
 const {SettingDropdown} = require('../../common/dropdown')
 const ImmutableComponent = require('../../immutableComponent')
 
-// style
-const commonStyles = require('../../styles/commonStyles')
-const globalStyles = require('../../styles/global')
+// Actions
+const appActions = require('../../../../../js/actions/appActions')
 
-// other
+// Constants
+const appConfig = require('../../../../../js/constants/appConfig')
 const settings = require('../../../../../js/constants/settings')
 
+// Utils
+const {changeSetting} = require('../../../lib/settingsUtil')
+const locale = require('../../../../../js/l10n')
+
+// Style
+const commonStyles = require('../../styles/commonStyles')
+const globalStyles = require('../../styles/global')
+
 class AdvancedSettingsContent extends ImmutableComponent {
   render () {
     const minPublisherDuration = this.props.ledgerData.getIn(['synopsisOptions', 'minPublisherDuration'])
@@ -101,24 +105,41 @@ class AdvancedSettingsFooter extends ImmutableComponent {
     this.props.setOverlayName('ledgerRecovery')
   }
 
+  deleteWallet () {
+    const confMsg = locale.translation('paymentsDeleteWalletConfirmation')
+    if (window.confirm(confMsg)) {
+      this.props.hideOverlay('advancedSettings')
+      appActions.onWalletDelete()
+    }
+  }
+
   render () {
-    return <section>
-      <BrowserButton groupedItem primaryColor
-        l10nId='backupLedger'
-        testId='backupLedgerButton'
-        onClick={this.showLedgerBackup.bind(this)}
-      />
-      <BrowserButton groupedItem primaryColor
-        l10nId='recoverLedger'
-        testId='recoverLedgerButton'
-        onClick={this.showLedgerRecovery.bind(this)}
-      />
-      <BrowserButton groupedItem secondaryColor
-        l10nId='done'
-        testId='doneButton'
-        onClick={this.props.hideOverlay.bind(this, 'advancedSettings')}
-      />
-    </section>
+    return <div className={css(styles.footer__wrapper)}>
+      <div className={css(styles.footer__wrapper__left)}>
+        <BrowserButton groupedItem alertColor
+          l10nId='paymentsDeleteWallet'
+          testId='paymentsDeleteWallet'
+          onClick={this.deleteWallet.bind(this)}
+        />
+      </div>
+      <div>
+        <BrowserButton groupedItem primaryColor
+          l10nId='backupLedger'
+          testId='backupLedgerButton'
+          onClick={this.showLedgerBackup.bind(this)}
+        />
+        <BrowserButton groupedItem primaryColor
+          l10nId='recoverLedger'
+          testId='recoverLedgerButton'
+          onClick={this.showLedgerRecovery.bind(this)}
+        />
+        <BrowserButton groupedItem secondaryColor
+          l10nId='done'
+          testId='doneButton'
+          onClick={this.props.hideOverlay.bind(this, 'advancedSettings')}
+        />
+      </div>
+    </div>
   }
 }
 
@@ -144,6 +165,15 @@ const styles = StyleSheet.create({
 
   advancedSettings__switches__listItem__checkboxSwitch: {
     padding: 0
+  },
+
+  footer__wrapper: {
+    flex: 1,
+    display: 'flex'
+  },
+
+  footer__wrapper__left: {
+    flex: 1
   }
 })
 

app/renderer/components/styles/global.js

@@ -338,6 +338,15 @@ const globalStyles = {
       hoverColor: '#000'
     },
 
+    alert: {
+      color: '#fff',
+      gradientColor1: '#ff5000',
+      gradientColor2: '#ff001b',
+      background: 'linear-gradient(#ff5000, #ff001b)',
+      hoverColor: '#fff',
+      borderHoverColor: '#fff'
+    },
+
     panel: {
       width: '180px'
     }