account credit/balance

src/app/settings/user-billing.component.html

@@ -8,7 +8,9 @@
 </div>
 <i class="fa fa-spinner fa-spin text-muted" *ngIf="!firstLoaded && loading" title="{{'loading' | i18n}}"></i>
 <ng-container *ngIf="billing">
-    <h2>{{'paymentMethod' | i18n}}</h2>
+    <h2>{{(isCreditBalance ? 'accountCredit' : 'accountBalance') | i18n}}</h2>
+    <p>{{creditOrBalance | currency:'$'}}</p>
+    <h2 class="spaced-header">{{'paymentMethod' | i18n}}</h2>
     <p *ngIf="!paymentSource">{{'noPaymentMethod' | i18n}}</p>
     <ng-container *ngIf="paymentSource">
         <app-callout type="warning" title="{{'verifyBankAccount' | i18n}}"

src/app/settings/user-billing.component.ts

@@ -81,6 +81,14 @@ export class UserBillingComponent implements OnInit {
         }
     }
 
+    get isCreditBalance() {
+        return this.billing == null || this.billing.balance <= 0;
+    }
+
+    get creditOrBalance() {
+        return Math.abs(this.billing != null ? this.billing.balance : 0);
+    }
+
     get paymentSource() {
         return this.billing != null ? this.billing.paymentSource : null;
     }

src/locales/en/messages.json

@@ -1490,6 +1490,18 @@
   "billing": {
     "message": "Billing"
   },
+  "accountCredit": {
+    "message": "Account Credit",
+    "description": "Financial term. In the case of Bitwarden, a positive balance means that you owe money, while a negative balance means that you have a credit (Bitwarden owes you money)."
+  },
+  "accountBalance": {
+    "message": "Account Balance",
+    "description": "Financial term. In the case of Bitwarden, a positive balance means that you owe money, while a negative balance means that you have a credit (Bitwarden owes you money)."
+  },
+  "addCredit": {
+    "message": "Add Credit",
+    "description": "Add more credit to your account's balance."
+  },
   "goPremium": {
     "message": "Go Premium",
     "description": "Another way of saying \"Get a premium membership\""