0.13.1: Payment history footer message needs correct past/future context

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

@@ -33,6 +33,7 @@ monthlyBudget=monthly budget
 status=status
 statusOnError=Brave Wallet can't be reached.
 statusNextReconcileDate=Contribution due date is {{reconcileDate}}.
+statusNextReconcileToday=Contribution due date is today.
 createWallet=create wallet
 createWalletStatus=Click the Create Wallet button to get started.
 creatingWallet=creating…
@@ -48,10 +49,12 @@ bitcoin=Bitcoin
 bitcoinAdd=Use your existing Bitcoin wallet/account
 bitcoinAddDescription=Use any BTC wallet that can transfer Bitcoin to your Brave wallet.
 bitcoinBuy=Buy Bitcoin
-noPaymentHistory=Your first payment contribution will be {{reconcileDate}}
+noPaymentHistory=Your first contribution will be {{reconcileDate}}
 viewPaymentHistory=View Payment History…
 paymentHistoryTitle=Your Payment History
-paymentHistoryFooterText=Your next payment contribution is {{reconcileDate}}.
+paymentHistoryFooterText=Your next contribution is {{reconcileDate}}.
+paymentHistoryDueFooterText=Your next contribution is due.
+paymentHistoryOverdueFooterText=Your next contribution is overdue.
 paymentHistoryOKText=OK
 hideExcluded=Only show included sites
 bravePayments=Brave Payments

app/renderer/components/preferences/paymentsTab.js

@@ -206,13 +206,20 @@ class PaymentsTab extends ImmutableComponent {
       return null
     }
     const timestamp = ledgerData.get('reconcileStamp')
+    const now = new Date().getTime()
+    let l10nDataId = 'paymentHistoryFooterText'
+    if (timestamp <= now) {
+      l10nDataId = (timestamp <= (now - (24 * 60 * 60 * 1000)))
+                     ? 'paymentHistoryOverdueFooterText' : 'paymentHistoryDueFooterText'
+    }
+
     const nextReconcileDateRelative = formattedTimeFromNow(timestamp)
     const l10nDataArgs = {
       reconcileDate: nextReconcileDateRelative
     }
     return <div className='paymentHistoryFooter'>
       <div className='nextPaymentSubmission'>
-        <span data-l10n-id='paymentHistoryFooterText' data-l10n-args={JSON.stringify(l10nDataArgs)} />
+        <span data-l10n-id={l10nDataId} data-l10n-args={JSON.stringify(l10nDataArgs)} />
       </div>
       <Button l10nId='paymentHistoryOKText' className='okButton primaryButton' onClick={this.props.hideOverlay.bind(this, 'paymentHistory')} />
     </div>
@@ -380,15 +387,24 @@ class PaymentsTab extends ImmutableComponent {
   }
 
   get nextReconcileMessage () {
+    const ledgerData = this.props.ledgerData
     const nextReconcileDateRelative = this.nextReconcileDate
     if (!nextReconcileDateRelative) {
       return null
     }
 
+    const timestamp = ledgerData.get('reconcileStamp')
+    const now = new Date().getTime()
+    let l10nDataId = 'statusNextReconcileDate'
+    if (timestamp <= now) {
+      l10nDataId = (timestamp <= (now - (24 * 60 * 60 * 1000)))
+                     ? 'paymentHistoryOverdueFooterText' : 'statusNextReconcileToday'
+    }
+
     const l10nDataArgs = {
       reconcileDate: nextReconcileDateRelative
     }
-    return <div className='nextReconcileDate' data-l10n-args={JSON.stringify(l10nDataArgs)} data-l10n-id='statusNextReconcileDate' />
+    return <div className='nextReconcileDate' data-l10n-args={JSON.stringify(l10nDataArgs)} data-l10n-id={l10nDataId} />
   }
 
   get ledgerDataErrorText () {