From 4a1c91e3820bddf58e2ea70bd6ae614e4ba4e3b2 Mon Sep 17 00:00:00 2001
From: NejcZdovc <nejc.zdovc@3zsistemi.si>
Date: Sun, 2 Apr 2017 20:31:21 +0200
Subject: [PATCH] Improves wallet creation UI

Resolves #7889

Auditors: @srirambv @bsclifton

Test Plan:
- Clear profile and create a new one
- Enable payments in the new profile
---
 .../locales/en-US/preferences.properties      |  1 -
 .../preferences/payment/enabledContent.js     | 53 +++++++------------
 .../components/preferences/paymentsTab.js     | 50 +++++++----------
 test/unit/app/renderer/paymentsTabTest.js     | 11 ----
 4 files changed, 37 insertions(+), 78 deletions(-)

diff --git a/app/extensions/brave/locales/en-US/preferences.properties b/app/extensions/brave/locales/en-US/preferences.properties
index 5172dc2a4bd..70385eb8d24 100644
--- a/app/extensions/brave/locales/en-US/preferences.properties
+++ b/app/extensions/brave/locales/en-US/preferences.properties
@@ -59,7 +59,6 @@ syncCreate=Set up sync
 syncEnterPassphrase=Enter your sync code words:
 accountBalance=account balance
 accountBalanceConnectionError=Please check your Internet connection.
-accountBalanceLoading=loading…
 monthlyBudget=monthly budget
 status=status
 statusOnError=Brave Wallet can't be reached.
diff --git a/app/renderer/components/preferences/payment/enabledContent.js b/app/renderer/components/preferences/payment/enabledContent.js
index 7aee2459f7a..fbd90ba22d4 100644
--- a/app/renderer/components/preferences/payment/enabledContent.js
+++ b/app/renderer/components/preferences/payment/enabledContent.js
@@ -4,6 +4,7 @@
 
 const React = require('react')
 const {StyleSheet, css} = require('aphrodite')
+const moment = require('moment')
 
 // util
 const {btcToCurrencyString, formattedDateFromTimestamp, walletStatus} = require('../../../../common/lib/ledgerUtil')
@@ -75,18 +76,14 @@ class EnabledContent extends ImmutableComponent {
 
   fundsAmount () {
     const ledgerData = this.props.ledgerData
-    if (!ledgerData.get('created')) {
-      return null
+    let value = 0
+
+    if (!(ledgerData.get('balance') === undefined || ledgerData.get('balance') === null)) {
+      value = ledgerData.get('balance')
     }
 
     return <div className={css(styles.balance)}>
-      {
-        !(ledgerData.get('balance') === undefined || ledgerData.get('balance') === null)
-          ? <FormTextbox data-test-id='fundsAmount' readOnly value={btcToCurrencyString(ledgerData.get('balance'), ledgerData)} />
-          : <span className={css(styles.loading)}>
-            <span className={css(styles.loadingText)} data-test-id='accountBalanceLoading' data-l10n-id='accountBalanceLoading' />
-          </span>
-      }
+      <FormTextbox data-test-id='fundsAmount' readOnly value={btcToCurrencyString(value, ledgerData)} />
       <a className={css(styles.iconLink)} href='https://brave.com/Payments_FAQ.html' target='_blank'>
         <span className={cx({
           fa: true,
@@ -106,9 +103,7 @@ class EnabledContent extends ImmutableComponent {
     let prevReconcileDateValue
     let text
 
-    if (!walletCreated || !walletHasReconcile) {
-      return null
-    } else if (!walletHasTransactions) {
+    if (!walletCreated || !walletHasReconcile || !walletHasTransactions) {
       text = 'noPaymentHistory'
     } else {
       text = 'viewPaymentHistory'
@@ -143,17 +138,19 @@ class EnabledContent extends ImmutableComponent {
 
   nextReconcileMessage () {
     const ledgerData = this.props.ledgerData
-    const nextReconcileDateRelative = this.nextReconcileDate()
+    let nextReconcileDateRelative = this.nextReconcileDate()
+    let l10nDataId = 'statusNextReconcileDate'
+
     if (!nextReconcileDateRelative) {
-      return null
-    }
+      nextReconcileDateRelative = formattedDateFromTimestamp(moment().add(1, 'months'), 'MMMM Do')
+    } else {
+      const timestamp = ledgerData.get('reconcileStamp')
+      const now = new Date().getTime()
 
-    const timestamp = ledgerData.get('reconcileStamp')
-    const now = new Date().getTime()
-    let l10nDataId = 'statusNextReconcileDate'
-    if (timestamp <= now) {
-      l10nDataId = (timestamp <= (now - (24 * 60 * 60 * 1000)))
-        ? 'statusNextReconcileOverdue' : 'statusNextReconcileToday'
+      if (timestamp <= now) {
+        l10nDataId = (timestamp <= (now - (24 * 60 * 60 * 1000)))
+          ? 'statusNextReconcileOverdue' : 'statusNextReconcileToday'
+      }
     }
 
     const l10nDataArgs = {
@@ -292,20 +289,6 @@ const styles = StyleSheet.create({
     marginBottom: 0
   },
 
-  loading: {
-    height: '2.25em',
-    display: 'flex',
-    alignItems: 'center',
-    margin: 0,
-    padding: 0
-  },
-
-  loadingText: {
-    fontSize: paymentStyles.font.regular,
-    margin: 0,
-    padding: 0
-  },
-
   iconLink: {
     textDecoration: 'none',
 
diff --git a/app/renderer/components/preferences/paymentsTab.js b/app/renderer/components/preferences/paymentsTab.js
index 94275ba5240..7246dfcfbe8 100644
--- a/app/renderer/components/preferences/paymentsTab.js
+++ b/app/renderer/components/preferences/paymentsTab.js
@@ -87,6 +87,7 @@ class PaymentsTab extends ImmutableComponent {
   }
 
   render () {
+    const enabled = this.props.ledgerData.get('created')
     return <div className={cx({
       paymentsContainer: true,
       [css(styles.paymentsContainer)]: true
@@ -176,12 +177,13 @@ class PaymentsTab extends ImmutableComponent {
             />
           </div>
           {
-            this.props.ledgerData.get('created') && this.enabled
+            this.enabled
             ? <div className={css(styles.switchWrap, styles.autoSuggestSwitch)}>
               <div className={css(styles.mainIconsLeft)}>
                 <SettingCheckbox dataL10nId='autoSuggestSites'
                   prefKey={settings.AUTO_SUGGEST_SITES}
                   settings={this.props.settings}
+                  disabled={!enabled}
                   onChangeSetting={this.props.onChangeSetting}
                   switchClassName={css(styles.switchControl)}
                 />
@@ -197,36 +199,18 @@ class PaymentsTab extends ImmutableComponent {
                 />
               </div>
               <div className={css(styles.mainIconsRight)}>
-                {
-                  this.hasWalletTransaction && this.enabled
-                    ? <a
-                      data-test-id='paymentHistoryButton'
-                      data-l10n-id='paymentHistoryIcon'
-                      className={css(styles.mainIcons, styles.historyIcon)}
-                      onClick={this.props.showOverlay.bind(this, 'paymentHistory')}
-                    />
-                    : null
-                }
-                {
-                  !this.hasWalletTransaction && this.enabled
-                  ? <a
-                    data-test-id='disabledPaymentHistoryButton'
-                    data-l10n-id='paymentHistoryIcon'
-                    className={css(styles.mainIcons, styles.historyIcon, styles.historyDisabled)}
-                    onClick={() => {}}
-                  />
-                  : null
-                }
-                {
-                  this.props.ledgerData.get('created') && this.enabled
-                    ? <a
-                      className={css(styles.mainIcons, styles.advanceIcon)}
-                      data-test-id='advancedSettingsButton'
-                      data-l10n-id='advancedSettingsIcon'
-                      onClick={this.props.showOverlay.bind(this, 'advancedSettings')}
-                    />
-                    : null
-                }
+                <a
+                  data-test-id={this.hasWalletTransaction ? 'paymentHistoryButton' : 'disabledPaymentHistoryButton'}
+                  data-l10n-id='paymentHistoryIcon'
+                  className={css(styles.mainIcons, styles.historyIcon, !this.hasWalletTransaction && styles.historyDisabled)}
+                  onClick={(enabled && this.hasWalletTransaction) ? this.props.showOverlay.bind(this, 'paymentHistory') : () => {}}
+                />
+                <a
+                  className={css(styles.mainIcons, styles.advanceIcon, !enabled && styles.advanceIconDisabled)}
+                  data-test-id={!enabled ? 'advancedSettingsButtonLoading' : 'advancedSettingsButton'}
+                  data-l10n-id='advancedSettingsIcon'
+                  onClick={enabled ? this.props.showOverlay.bind(this, 'advancedSettings') : () => {}}
+                />
               </div>
             </div>
             : null
@@ -330,6 +314,10 @@ const styles = StyleSheet.create({
   },
   advanceIcon: {
     '-webkit-mask-image': `url(${advanceIcon})`
+  },
+  advanceIconDisabled: {
+    backgroundColor: globalStyles.color.chromeTertiary,
+    cursor: 'default'
   }
 })
 
diff --git a/test/unit/app/renderer/paymentsTabTest.js b/test/unit/app/renderer/paymentsTabTest.js
index 0de8483e88c..06edd4acd39 100644
--- a/test/unit/app/renderer/paymentsTabTest.js
+++ b/test/unit/app/renderer/paymentsTabTest.js
@@ -176,17 +176,6 @@ describe('PaymentsTab component', function () {
       assert.equal(inst.fundsAmount, null)
     })
 
-    it('handles missing balance', function () {
-      fakeSettings.mockReturnValue = true
-      const wrapper = mount(
-        <PaymentsTab
-          showOverlay={function () {}}
-          hideOverlay={function () {}}
-          ledgerData={Immutable.Map({created: true, balance: null})} />
-      )
-      assert.equal(wrapper.find('[data-test-id="accountBalanceLoading"]').length, 1)
-    })
-
     it('handles expected balance', function () {
       fakeSettings.mockReturnValue = true
       const wrapper = mount(