Adds clear payments options

Resolves brave#8537

Auditors:

Test Plan:

app/browser/api/ledger.js

@@ -1209,12 +1209,19 @@ const onWalletRecovery = (state, error, result) => {
   return state
 }
 
+const resetPublishers = (state) => {
+  state = ledgerState.resetPublishers(state)
+  synopsis.publishers = {}
+
+  return state
+}
+
 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)) {
+    resetPublishers(state)
   }
 
   return state
@@ -2721,10 +2728,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) {
@@ -3123,6 +3126,53 @@ 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) => {
+  state = ledgerState.setInfoProp(state, 'transactions', Immutable.List())
+  state = ledgerState.setInfoProp(state, 'ballots', Immutable.List())
+  state = ledgerState.setInfoProp(state, 'batch', Immutable.Map())
+
+  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 = []
+      data.batch = {}
+      muonWriter(statePath, data)
+    }
+  } catch (err) {
+    console.error(`Problem reading ${path} when clearing payment history`)
+  }
+
+  return state
+}
+
 const getMethods = () => {
   const publicMethods = {
     backupKeys,
@@ -3152,7 +3202,6 @@ const getMethods = () => {
     onNetworkConnected,
     migration,
     onInitRead,
-    deleteSynopsis,
     normalizePinned,
     roundToTarget,
     onFavIconReceived,
@@ -3180,7 +3229,10 @@ const getMethods = () => {
     addSiteVisit,
     getCaptcha,
     onCaptchaResponse,
-    shouldTrackTab
+    shouldTrackTab,
+    deleteWallet,
+    resetPublishers,
+    clearPaymentHistory
   }
 
   let privateMethods = {}

app/browser/reducers/ledgerReducer.js

@@ -75,12 +75,15 @@ const ledgerReducer = (state, action, immutableAction) => {
       }
     case appConstants.APP_ON_CLEAR_BROWSING_DATA:
       {
-        const defaults = state.get('clearBrowsingDataDefaults')
+        const defaults = state.get('clearBrowsingDataDefaults') || Immutable.Map()
         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 = ledgerApi.resetPublishers(state)
+        }
+
+        if (clearData.get('paymentHistory')) {
+          state = ledgerApi.clearPaymentHistory(state)
         }
         break
       }
@@ -555,6 +558,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,18 @@ const ledgerState = {
     return state.setIn(['ledger', 'synopsis', 'publishers', key, prop], value)
   },
 
+  resetPublishers: (state) => {
+    state = validateState(state)
+    state = pageDataState.resetPageData(state)
+
+    return state
+      .setIn(['ledger', 'synopsis', 'publishers'], Immutable.Map())
+      .setIn(['ledger', 'locations'], Immutable.Map())
+      .setIn(['ledger', 'about', 'synopsis'], Immutable.List())
+      .setIn(['ledger', 'publisherTimestamp'], 0)
+      .setIn(['cache', 'ledgerVideos'], Immutable.Map())
+  },
+
   /**
    * SYNOPSIS / PUBLISHER / OPTIONS
    */

app/common/state/pageDataState.js

@@ -83,6 +83,7 @@ const pageDataState = {
       .setIn(['pageData', 'info'], Immutable.Map())
       .setIn(['pageData', 'last', 'info'], null)
       .setIn(['pageData', 'last', 'tabId'], null)
+      .setIn(['pageData', 'last', 'closedTabValue'], null)
   }
 }
 

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

@@ -76,6 +76,7 @@ clearAll=Clear all
 clearBrowsingDataNow=Clear Browsing Data Now…
 comingSoon=Coming soon!
 compactBraveryPanel=Use compact panel
+confirmPaymentsClear=A Brave Payment contribution is in progress. Brave Payment data cannot be cleared during this time.
 contentSettings=Content Settings
 contributionAmount=Contribution Amount
 contributionDate=Contribution Date
@@ -226,6 +227,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=Brave Payments statements
 paymentHistoryDueFooterText=Your next contribution is due.
 paymentHistoryFooterText=Your next contribution is {{reconcileDate}}.
 paymentHistoryIcon.title=Your Payment History
@@ -274,6 +278,7 @@ protocolRegistrationPermission=Protocol registration
 publicOnly=Default public interface only
 publicPrivate=Default public and private interfaces
 publisher=Site
+publishersClear=Brave Payments attention data
 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

@@ -4,6 +4,7 @@
 
 const React = require('react')
 const Immutable = require('immutable')
+const {StyleSheet, css} = require('aphrodite/no-important')
 
 // Components
 const ReduxComponent = require('../reduxComponent')
@@ -23,6 +24,12 @@ const appActions = require('../../../../js/actions/appActions')
 const windowActions = require('../../../../js/actions/windowActions')
 const aboutActions = require('../../../../js/about/aboutActions')
 
+// State
+const ledgerState = require('../../../common/state/ledgerState')
+
+// Constants
+const ledgerStatuses = require('../../../common/constants/ledgerStatuses')
+
 class ClearBrowsingDataPanel extends React.Component {
   constructor (props) {
     super(props)
@@ -34,6 +41,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)
   }
@@ -69,6 +78,7 @@ class ClearBrowsingDataPanel extends React.Component {
     const data = state.get('clearBrowsingDataDefaults', Immutable.Map()).merge(tempData)
 
     const props = {}
+    props.inProgress = ledgerState.getAboutProp(state, 'status') === ledgerStatuses.IN_PROGRESS
     props.allSiteCookies = data.get('allSiteCookies')
     props.browserHistory = data.get('browserHistory')
     props.downloadHistory = data.get('downloadHistory')
@@ -78,6 +88,8 @@ class ClearBrowsingDataPanel extends React.Component {
     props.autocompleteData = data.get('autocompleteData')
     props.autofillData = data.get('autofillData')
     props.savedSiteSettings = data.get('savedSiteSettings')
+    props.publishersClear = props.inProgress ? false : data.get('publishersClear')
+    props.paymentHistory = props.inProgress ? false : data.get('paymentHistory')
 
     return props
   }
@@ -123,6 +135,23 @@ class ClearBrowsingDataPanel extends React.Component {
             testId='siteSettingsSwitch'
             checkedOn={this.props.savedSiteSettings}
             onClick={this.onToggleSavedSiteSettings} />
+          <SwitchControl
+            rightl10nId='publishersClear'
+            testId='publishersClear'
+            disabled={this.props.inProgress}
+            checkedOn={this.props.publishersClear}
+            onClick={this.onTogglePublishersClear} />
+          <SwitchControl
+            rightl10nId='paymentHistory'
+            testId='paymentHistorySwitch'
+            disabled={this.props.inProgress}
+            checkedOn={this.props.paymentHistory}
+            onClick={this.onTogglePaymentHistory} />
+          {
+            this.props.inProgress
+            ? <span data-l10n-id='confirmPaymentsClear' className={css(styles.footNote)} />
+            : null
+          }
         </CommonFormSection>
         <CommonFormButtonWrapper>
           <Button className='whiteButton'
@@ -144,4 +173,12 @@ class ClearBrowsingDataPanel extends React.Component {
   }
 }
 
+const styles = StyleSheet.create({
+  footNote: {
+    marginTop: '12px',
+    fontSize: '12px',
+    display: 'block'
+  }
+})
+
 module.exports = ReduxComponent.connect(ClearBrowsingDataPanel)