2018-06-28 20:05:04 +02:00
|
|
|
<div class="page-header">
|
2018-06-29 22:55:54 +02:00
|
|
|
<h1>
|
2019-02-18 21:28:23 +01:00
|
|
|
{{'billing' | i18n}}
|
2018-06-29 22:55:54 +02:00
|
|
|
<small>
|
2018-07-18 05:15:15 +02:00
|
|
|
<i class="fa fa-spinner fa-spin text-muted" *ngIf="firstLoaded && loading" title="{{'loading' | i18n}}"></i>
|
2018-06-29 22:55:54 +02:00
|
|
|
</small>
|
|
|
|
</h1>
|
2018-06-28 20:05:04 +02:00
|
|
|
</div>
|
2018-07-18 05:15:15 +02:00
|
|
|
<i class="fa fa-spinner fa-spin text-muted" *ngIf="!firstLoaded && loading" title="{{'loading' | i18n}}"></i>
|
2018-07-03 15:27:59 +02:00
|
|
|
<ng-container *ngIf="billing">
|
2019-02-18 21:28:23 +01:00
|
|
|
<h2>{{'paymentMethod' | i18n}}</h2>
|
|
|
|
<p *ngIf="!paymentSource">{{'noPaymentMethod' | i18n}}</p>
|
|
|
|
<ng-container *ngIf="paymentSource">
|
|
|
|
<app-callout type="warning" title="{{'verifyBankAccount' | i18n}}"
|
|
|
|
*ngIf="paymentSource.type === paymentMethodType.BankAccount && paymentSource.needsVerification">
|
|
|
|
<p>{{'verifyBankAccountDesc' | i18n}} {{'verifyBankAccountFailureWarning' | i18n}}</p>
|
|
|
|
<form #verifyForm class="form-inline" (ngSubmit)="verifyBank()" [appApiAction]="verifyBankPromise"
|
|
|
|
ngNativeValidate>
|
|
|
|
<label class="sr-only" for="verifyAmount1">{{'amount' | i18n : '1'}}</label>
|
|
|
|
<div class="input-group mr-2">
|
|
|
|
<div class="input-group-prepend">
|
|
|
|
<div class="input-group-text">$0.</div>
|
|
|
|
</div>
|
|
|
|
<input type="number" class="form-control" id="verifyAmount1" placeholder="xx" name="Amount1"
|
|
|
|
[(ngModel)]="verifyAmount1" min="1" max="99" step="1" required>
|
|
|
|
</div>
|
|
|
|
<label class="sr-only" for="verifyAmount2">{{'amount' | i18n : '2'}}</label>
|
|
|
|
<div class="input-group mr-2">
|
|
|
|
<div class="input-group-prepend">
|
|
|
|
<div class="input-group-text">$0.</div>
|
|
|
|
</div>
|
|
|
|
<input type="number" class="form-control" id="verifyAmount2" placeholder="xx" name="Amount2"
|
|
|
|
[(ngModel)]="verifyAmount2" min="1" max="99" step="1" required>
|
2018-07-16 23:17:07 +02:00
|
|
|
</div>
|
2019-02-18 21:28:23 +01:00
|
|
|
<button type="submit" class="btn btn-outline-primary btn-submit" [disabled]="verifyForm.loading">
|
|
|
|
<i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
|
|
|
|
<span>{{'verifyBankAccount' | i18n}}</span>
|
|
|
|
</button>
|
|
|
|
</form>
|
|
|
|
</app-callout>
|
|
|
|
<p>
|
2018-06-30 20:14:52 +02:00
|
|
|
<i class="fa fa-fw" [ngClass]="{'fa-credit-card': paymentSource.type === paymentMethodType.Card,
|
2019-02-18 21:28:23 +01:00
|
|
|
'fa-university': paymentSource.type === paymentMethodType.BankAccount,
|
|
|
|
'fa-paypal text-primary': paymentSource.type === paymentMethodType.PayPal}"></i>
|
2018-06-30 20:14:52 +02:00
|
|
|
{{paymentSource.description}}
|
|
|
|
</p>
|
2019-02-18 21:28:23 +01:00
|
|
|
</ng-container>
|
|
|
|
<button type="button" class="btn btn-outline-secondary" (click)="changePayment()" *ngIf="!showAdjustPayment">
|
|
|
|
{{(paymentSource ? 'changePaymentMethod' : 'addPaymentMethod') | i18n}}
|
|
|
|
</button>
|
|
|
|
<app-adjust-payment [currentType]="paymentSource != null ? paymentSource.type : null" [organizationId]="organizationId"
|
|
|
|
(onAdjusted)="closePayment(true)" (onCanceled)="closePayment(false)" *ngIf="showAdjustPayment">
|
|
|
|
</app-adjust-payment>
|
|
|
|
<h2 class="spaced-header">{{'invoices' | i18n}}</h2>
|
|
|
|
<p *ngIf="!invoices || !invoices.length">{{'noInvoices' | i18n}}</p>
|
|
|
|
<table class="table mb-2" *ngIf="invoices && invoices.length">
|
|
|
|
<tbody>
|
|
|
|
<tr *ngFor="let i of invoices">
|
|
|
|
<td>{{i.date | date:'mediumDate'}}</td>
|
|
|
|
<td>
|
|
|
|
<a href="{{i.pdfUrl}}" target="_blank" rel="noopener" class="mr-2" title="{{'downloadInvoice' | i18n}}">
|
|
|
|
<i class="fa fa-file-pdf-o"></i></a>
|
|
|
|
<a href="{{i.url}}" target="_blank" rel="noopener" title="{{'viewInvoice' | i18n}}">
|
|
|
|
{{'invoiceNumber' | i18n : i.number}}</a>
|
|
|
|
</td>
|
|
|
|
<td>{{i.amount | currency:'$'}}</td>
|
|
|
|
<td>
|
|
|
|
<span *ngIf="i.paid">
|
|
|
|
<i class="fa fa-check text-success"></i>
|
|
|
|
{{'paid' | i18n}}
|
|
|
|
</span>
|
|
|
|
<span *ngIf="!i.paid">
|
|
|
|
<i class="fa fa-exclamation-circle text-muted"></i>
|
|
|
|
{{'unpaid' | i18n}}
|
|
|
|
</span>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
<h2 class="spaced-header">{{'transactions' | i18n}}</h2>
|
|
|
|
<p *ngIf="!transactions || !transactions.length">{{'noTransactions' | i18n}}</p>
|
|
|
|
<table class="table mb-2" *ngIf="transactions && transactions.length">
|
|
|
|
<tbody>
|
|
|
|
<tr *ngFor="let t of transactions">
|
|
|
|
<td>{{t.createdDate | date:'mediumDate'}}</td>
|
|
|
|
<td>
|
|
|
|
<span *ngIf="t.type === transactionType.Charge">{{'chargeNoun' | i18n}}</span>
|
|
|
|
<span *ngIf="t.type === transactionType.Refund">{{'chargeRefund' | i18n}}</span>
|
|
|
|
</td>
|
|
|
|
<td>
|
|
|
|
<i class="fa fa-fw" *ngIf="t.type === transactionType.Charge || t.type === transactionType.Refund"
|
|
|
|
[ngClass]="{'fa-credit-card': t.paymentMethodType === paymentMethodType.Card,
|
2019-02-09 06:19:54 +01:00
|
|
|
'fa-university': t.paymentMethodType === paymentMethodType.BankAccount,
|
|
|
|
'fa-paypal text-primary': t.paymentMethodType === paymentMethodType.PayPal}"></i>
|
2019-02-18 21:28:23 +01:00
|
|
|
{{t.details}}
|
|
|
|
</td>
|
|
|
|
<td [ngClass]="{'text-strike': t.refunded}" title="{{(t.refunded ? 'refunded' : '') | i18n}}">{{t.amount
|
|
|
|
| currency:'$'}}</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
<small class="text-muted">* {{'chargesStatement' | i18n : 'BITWARDEN'}}</small>
|
2018-06-29 22:55:54 +02:00
|
|
|
</ng-container>
|