mirror of
https://github.com/bitwarden/browser
synced 2026-01-08 11:33:28 +00:00
[EC-8] Restructure Tabs (#3109)
* Cherry pick pending PR for tabs component [CL-17] Tabs - Routing * Update organization tabs from 4 to 6 * Create initial 'Members' tab * Create initial 'Groups' tab * Add initial "Reporting" tab * Use correct report label/layout by product type * Create initial 'Billing' tab * Breakup billing payment and billing history pages * Cleanup org routing and nav permission service * More org tab permission cleanup * Refactor organization billing to use a module * Refactor organization reporting to use module * Cherry pick finished/merged tabs component [CL-17] Tabs - Router (#2952) * This partially reverts commit24bb775to fix tracking of people.component.html rename. * Fix people component file rename * Recover lost member page changes * Undo members component rename as it was causing difficult merge conflicts * Fix member and group page container * Remove unnecessary organization lookup * [EC-8] Some PR suggestions * [EC-8] Reuse user billing history for orgs * [EC-8] Renamed user billing history component * [EC-8] Repurpose payment method component Update end user payment method component to be usable for organizations. * [EC-8] Fix missing verify bank condition * [EC-8] Remove org payment method component * [EC-8] Use CL in payment method component * [EC-8] Extend maxWidth Tailwind theme config * [EC-8] Add lazy loading to org reports * [EC-8] Add lazy loading to org billing * [EC-8] Prettier * [EC-8] Cleanup org reporting component redundancy * [EC-8] Use different class for negative margin * [EC-8] Make billing history component "dumb" * Revert "[EC-8] Cleanup org reporting component redundancy" This reverts commiteca337e89b. * [EC-8] Create and export shared reports module * [EC-8] Use shared reports module in orgs * [EC-8] Use takeUntil pattern * [EC-8] Move org reporting module out of old modules folder * [EC-8] Move org billing module out of old modules folder * [EC-8] Fix some remaining merge conflicts * [EC-8] Move maxWidth into 'extend' key for Tailwind config * [EC-8] Remove unused module * [EC-8] Rename org report list component * Prettier Co-authored-by: Vincent Salucci <vincesalucci21@gmail.com>
This commit is contained in:
Shane Melton
GitHub
@@ -1,5 +1,5 @@
|
||||
<div class="page-header">
|
||||
<h1>{{ "myOrganization" | i18n }}</h1>
|
||||
<h1>{{ "organizationInfo" | i18n }}</h1>
|
||||
</div>
|
||||
<div *ngIf="loading">
|
||||
<i
|
||||
@@ -87,31 +87,6 @@
|
||||
{{ "rotateApiKey" | i18n }}
|
||||
</button>
|
||||
</ng-container>
|
||||
<div class="secondary-header border-0 mb-0">
|
||||
<h1>{{ "taxInformation" | i18n }}</h1>
|
||||
</div>
|
||||
<p>{{ "taxInformationDesc" | i18n }}</p>
|
||||
<div *ngIf="!org || loading">
|
||||
<i
|
||||
class="bwi bwi-spinner bwi-spin text-muted"
|
||||
title="{{ 'loading' | i18n }}"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
<span class="sr-only">{{ "loading" | i18n }}</span>
|
||||
</div>
|
||||
<form
|
||||
*ngIf="org && !loading"
|
||||
#formTax
|
||||
(ngSubmit)="submitTaxInfo()"
|
||||
[appApiAction]="taxFormPromise"
|
||||
ngNativeValidate
|
||||
>
|
||||
<app-tax-info></app-tax-info>
|
||||
<button type="submit" class="btn btn-primary btn-submit" [disabled]="formTax.loading">
|
||||
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
|
||||
<span>{{ "save" | i18n }}</span>
|
||||
</button>
|
||||
</form>
|
||||
<div class="secondary-header text-danger border-0 mb-0">
|
||||
<h1>{{ "dangerZone" | i18n }}</h1>
|
||||
</div>
|
||||
|
||||
@@ -15,7 +15,6 @@ import { OrganizationResponse } from "@bitwarden/common/models/response/organiza
|
||||
|
||||
import { ApiKeyComponent } from "../../settings/api-key.component";
|
||||
import { PurgeVaultComponent } from "../../settings/purge-vault.component";
|
||||
import { TaxInfoComponent } from "../../settings/tax-info.component";
|
||||
|
||||
import { DeleteOrganizationComponent } from "./delete-organization.component";
|
||||
|
||||
@@ -32,7 +31,6 @@ export class AccountComponent {
|
||||
apiKeyModalRef: ViewContainerRef;
|
||||
@ViewChild("rotateApiKeyTemplate", { read: ViewContainerRef, static: true })
|
||||
rotateApiKeyModalRef: ViewContainerRef;
|
||||
@ViewChild(TaxInfoComponent) taxInfo: TaxInfoComponent;
|
||||
|
||||
selfHosted = false;
|
||||
canManageBilling = true;
|
||||
@@ -40,7 +38,6 @@ export class AccountComponent {
|
||||
canUseApi = false;
|
||||
org: OrganizationResponse;
|
||||
formPromise: Promise<any>;
|
||||
taxFormPromise: Promise<any>;
|
||||
|
||||
private organizationId: string;
|
||||
|
||||
@@ -104,12 +101,6 @@ export class AccountComponent {
|
||||
}
|
||||
}
|
||||
|
||||
async submitTaxInfo() {
|
||||
this.taxFormPromise = this.taxInfo.submitTaxInfo();
|
||||
await this.taxFormPromise;
|
||||
this.platformUtilsService.showToast("success", null, this.i18nService.t("taxInfoUpdated"));
|
||||
}
|
||||
|
||||
async deleteOrganization() {
|
||||
await this.modalService.openViewRef(
|
||||
DeleteOrganizationComponent,
|
||||
|
||||
@@ -1,117 +0,0 @@
|
||||
<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="billingSyncApiKeyTitle">
|
||||
<div class="modal-dialog modal-dialog-scrollable" role="document">
|
||||
<form
|
||||
class="modal-content"
|
||||
#form
|
||||
(ngSubmit)="submit()"
|
||||
[appApiAction]="formPromise"
|
||||
ngNativeValidate
|
||||
>
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title" id="billingSyncApiKeyTitle">
|
||||
{{ (hasBillingToken ? "viewBillingSyncToken" : "generateBillingSyncToken") | i18n }}
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
class="close"
|
||||
data-dismiss="modal"
|
||||
appA11yTitle="{{ 'close' | i18n }}"
|
||||
>
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<app-user-verification
|
||||
[(ngModel)]="masterPassword"
|
||||
ngDefaultControl
|
||||
name="secret"
|
||||
*ngIf="!clientSecret"
|
||||
>
|
||||
</app-user-verification>
|
||||
<ng-container *ngIf="clientSecret && showRotateScreen">
|
||||
<p>{{ "rotateBillingSyncTokenTitle" | i18n }}</p>
|
||||
<app-callout type="warning">
|
||||
{{ "rotateBillingSyncTokenWarning" | i18n }}
|
||||
</app-callout>
|
||||
</ng-container>
|
||||
|
||||
<div *ngIf="clientSecret && !showRotateScreen">
|
||||
<p>{{ "copyPasteBillingSync" | i18n }}</p>
|
||||
<label for="clientSecret">Billing Sync Key</label>
|
||||
<div class="input-group">
|
||||
<input
|
||||
id="clientSecret"
|
||||
class="form-control text-monospace"
|
||||
type="text"
|
||||
[(ngModel)]="clientSecret"
|
||||
name="clientSecret"
|
||||
disabled
|
||||
/>
|
||||
<div class="input-group-append">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline-secondary"
|
||||
(click)="copy()"
|
||||
[appA11yTitle]="'copy' | i18n"
|
||||
>
|
||||
<i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="small text-muted mt-2" *ngIf="showLastSyncText">
|
||||
<b class="font-weight-semibold">{{ "lastSync" | i18n }}:</b>
|
||||
{{ lastSyncDate | date: "medium" }}
|
||||
</div>
|
||||
<div class="small text-danger mt-2" *ngIf="showAwaitingSyncText">
|
||||
<i class="bwi bwi-error"></i>
|
||||
{{
|
||||
(daysBetween === 1 ? "awaitingSyncSingular" : "awaitingSyncPlural")
|
||||
| i18n: daysBetween
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary btn-submit"
|
||||
[disabled]="form.loading"
|
||||
*ngIf="!clientSecret || showRotateScreen"
|
||||
>
|
||||
<i
|
||||
class="bwi bwi-spinner bwi-spin"
|
||||
title="{{ 'loading' | i18n }}"
|
||||
*ngIf="form.loading"
|
||||
></i>
|
||||
<span>
|
||||
{{ submitButtonText }}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline-secondary"
|
||||
data-dismiss="modal"
|
||||
*ngIf="!showRotateScreen"
|
||||
>
|
||||
{{ "close" | i18n }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline-secondary"
|
||||
*ngIf="showRotateScreen"
|
||||
(click)="cancelRotate()"
|
||||
>
|
||||
{{ "cancel" | i18n }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline-secondary"
|
||||
*ngIf="clientSecret && !showRotateScreen"
|
||||
(click)="rotateToken()"
|
||||
>
|
||||
{{ "rotateToken" | i18n }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,108 +0,0 @@
|
||||
import { Component } from "@angular/core";
|
||||
|
||||
import { ApiService } from "@bitwarden/common/abstractions/api.service";
|
||||
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
|
||||
import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
|
||||
import { UserVerificationService } from "@bitwarden/common/abstractions/userVerification.service";
|
||||
import { OrganizationApiKeyType } from "@bitwarden/common/enums/organizationApiKeyType";
|
||||
import { OrganizationApiKeyRequest } from "@bitwarden/common/models/request/organizationApiKeyRequest";
|
||||
import { ApiKeyResponse } from "@bitwarden/common/models/response/apiKeyResponse";
|
||||
import { Verification } from "@bitwarden/common/types/verification";
|
||||
|
||||
@Component({
|
||||
selector: "app-billing-sync-api-key",
|
||||
templateUrl: "billing-sync-api-key.component.html",
|
||||
})
|
||||
export class BillingSyncApiKeyComponent {
|
||||
organizationId: string;
|
||||
hasBillingToken: boolean;
|
||||
|
||||
showRotateScreen: boolean;
|
||||
masterPassword: Verification;
|
||||
formPromise: Promise<ApiKeyResponse>;
|
||||
clientSecret?: string;
|
||||
keyRevisionDate?: Date;
|
||||
lastSyncDate?: Date = null;
|
||||
|
||||
constructor(
|
||||
private userVerificationService: UserVerificationService,
|
||||
private apiService: ApiService,
|
||||
private platformUtilsService: PlatformUtilsService,
|
||||
private i18nService: I18nService
|
||||
) {}
|
||||
|
||||
copy() {
|
||||
this.platformUtilsService.copyToClipboard(this.clientSecret);
|
||||
}
|
||||
|
||||
async submit() {
|
||||
if (this.showRotateScreen) {
|
||||
this.formPromise = this.userVerificationService
|
||||
.buildRequest(this.masterPassword, OrganizationApiKeyRequest)
|
||||
.then((request) => {
|
||||
request.type = OrganizationApiKeyType.BillingSync;
|
||||
return this.apiService.postOrganizationRotateApiKey(this.organizationId, request);
|
||||
});
|
||||
const response = await this.formPromise;
|
||||
await this.load(response);
|
||||
this.showRotateScreen = false;
|
||||
this.platformUtilsService.showToast(
|
||||
"success",
|
||||
null,
|
||||
this.i18nService.t("billingSyncApiKeyRotated")
|
||||
);
|
||||
} else {
|
||||
this.formPromise = this.userVerificationService
|
||||
.buildRequest(this.masterPassword, OrganizationApiKeyRequest)
|
||||
.then((request) => {
|
||||
request.type = OrganizationApiKeyType.BillingSync;
|
||||
return this.apiService.postOrganizationApiKey(this.organizationId, request);
|
||||
});
|
||||
const response = await this.formPromise;
|
||||
await this.load(response);
|
||||
}
|
||||
}
|
||||
|
||||
async load(response: ApiKeyResponse) {
|
||||
this.clientSecret = response.apiKey;
|
||||
this.keyRevisionDate = response.revisionDate;
|
||||
this.hasBillingToken = true;
|
||||
const syncStatus = await this.apiService.getSponsorshipSyncStatus(this.organizationId);
|
||||
this.lastSyncDate = syncStatus.lastSyncDate;
|
||||
}
|
||||
|
||||
cancelRotate() {
|
||||
this.showRotateScreen = false;
|
||||
}
|
||||
|
||||
rotateToken() {
|
||||
this.showRotateScreen = true;
|
||||
}
|
||||
|
||||
private dayDiff(date1: Date, date2: Date): number {
|
||||
const diffTime = Math.abs(date2.getTime() - date1.getTime());
|
||||
return Math.round(diffTime / (1000 * 60 * 60 * 24));
|
||||
}
|
||||
|
||||
get submitButtonText(): string {
|
||||
if (this.showRotateScreen) {
|
||||
return this.i18nService.t("rotateToken");
|
||||
}
|
||||
|
||||
return this.i18nService.t(this.hasBillingToken ? "continue" : "generateToken");
|
||||
}
|
||||
|
||||
get showLastSyncText(): boolean {
|
||||
// If the keyRevisionDate is later than the lastSyncDate we need to show
|
||||
// a warning that they need to put the billing sync key in their self hosted install
|
||||
return this.lastSyncDate && this.lastSyncDate > this.keyRevisionDate;
|
||||
}
|
||||
|
||||
get showAwaitingSyncText(): boolean {
|
||||
return this.lastSyncDate && this.lastSyncDate <= this.keyRevisionDate;
|
||||
}
|
||||
|
||||
get daysBetween(): number {
|
||||
return this.dayDiff(this.keyRevisionDate, new Date());
|
||||
}
|
||||
}
|
||||
@@ -1,212 +0,0 @@
|
||||
<div class="page-header d-flex">
|
||||
<h1>
|
||||
{{ "billing" | i18n }}
|
||||
</h1>
|
||||
<button
|
||||
(click)="load()"
|
||||
class="btn btn-sm btn-outline-primary ml-auto"
|
||||
*ngIf="firstLoaded"
|
||||
[disabled]="loading"
|
||||
>
|
||||
<i class="bwi bwi-refresh bwi-fw" [ngClass]="{ 'bwi-spin': loading }" aria-hidden="true"></i>
|
||||
{{ "refresh" | i18n }}
|
||||
</button>
|
||||
</div>
|
||||
<ng-container *ngIf="!firstLoaded && loading">
|
||||
<i
|
||||
class="bwi bwi-spinner bwi-spin text-muted"
|
||||
title="{{ 'loading' | i18n }}"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
<span class="sr-only">{{ "loading" | i18n }}</span>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="billing">
|
||||
<h2>{{ (isCreditBalance ? "accountCredit" : "accountBalance") | i18n }}</h2>
|
||||
<p class="text-lg">
|
||||
<strong>{{ creditOrBalance | currency: "$" }}</strong>
|
||||
</p>
|
||||
<p>{{ "creditAppliedDesc" | i18n }}</p>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline-secondary"
|
||||
(click)="addCredit()"
|
||||
*ngIf="!showAddCredit"
|
||||
>
|
||||
{{ "addCredit" | i18n }}
|
||||
</button>
|
||||
<app-add-credit
|
||||
[organizationId]="organizationId"
|
||||
(onAdded)="closeAddCredit(true)"
|
||||
(onCanceled)="closeAddCredit(false)"
|
||||
*ngIf="showAddCredit"
|
||||
>
|
||||
</app-add-credit>
|
||||
<h2 class="spaced-header">{{ "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
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-outline-primary btn-submit"
|
||||
[disabled]="verifyForm.loading"
|
||||
>
|
||||
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
|
||||
<span>{{ "verifyBankAccount" | i18n }}</span>
|
||||
</button>
|
||||
</form>
|
||||
</app-callout>
|
||||
<p>
|
||||
<i
|
||||
class="bwi bwi-fw"
|
||||
[ngClass]="{
|
||||
'bwi-credit-card': paymentSource.type === paymentMethodType.Card,
|
||||
'bwi-bank': paymentSource.type === paymentMethodType.BankAccount,
|
||||
'bwi-money': paymentSource.type === paymentMethodType.Check,
|
||||
'bwi-paypal text-primary': paymentSource.type === paymentMethodType.PayPal,
|
||||
'bwi-apple text-muted': paymentSource.type === paymentMethodType.AppleInApp,
|
||||
'bwi-google text-muted': paymentSource.type === paymentMethodType.GoogleInApp
|
||||
}"
|
||||
></i>
|
||||
<span *ngIf="paymentSourceInApp">{{ "inAppPurchase" | i18n }}</span>
|
||||
{{ paymentSource.description }}
|
||||
</p>
|
||||
</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"
|
||||
appA11yTitle="{{ 'downloadInvoice' | i18n }}"
|
||||
>
|
||||
<i class="bwi bwi-file-pdf" aria-hidden="true"></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="bwi bwi-check text-success" aria-hidden="true"></i>
|
||||
{{ "paid" | i18n }}
|
||||
</span>
|
||||
<span *ngIf="!i.paid">
|
||||
<i class="bwi bwi-exclamation-circle text-muted" aria-hidden="true"></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 || t.type === transactionType.Credit">
|
||||
{{ "chargeNoun" | i18n }}
|
||||
</span>
|
||||
<span *ngIf="t.type === transactionType.Refund">{{ "refundNoun" | i18n }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<i
|
||||
class="bwi bwi-fw"
|
||||
*ngIf="t.paymentMethodType"
|
||||
aria-hidden="true"
|
||||
[ngClass]="{
|
||||
'bwi-credit-card': t.paymentMethodType === paymentMethodType.Card,
|
||||
'bwi-bank':
|
||||
t.paymentMethodType === paymentMethodType.BankAccount ||
|
||||
t.paymentMethodType === paymentMethodType.WireTransfer,
|
||||
'bwi-bitcoin text-warning': t.paymentMethodType === paymentMethodType.BitPay,
|
||||
'bwi-paypal text-primary': t.paymentMethodType === paymentMethodType.PayPal
|
||||
}"
|
||||
></i>
|
||||
{{ 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>
|
||||
</ng-container>
|
||||
@@ -1,154 +0,0 @@
|
||||
import { Component, OnInit } from "@angular/core";
|
||||
import { ActivatedRoute } from "@angular/router";
|
||||
|
||||
import { ApiService } from "@bitwarden/common/abstractions/api.service";
|
||||
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
|
||||
import { LogService } from "@bitwarden/common/abstractions/log.service";
|
||||
import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
|
||||
import { PaymentMethodType } from "@bitwarden/common/enums/paymentMethodType";
|
||||
import { TransactionType } from "@bitwarden/common/enums/transactionType";
|
||||
import { VerifyBankRequest } from "@bitwarden/common/models/request/verifyBankRequest";
|
||||
import { BillingResponse } from "@bitwarden/common/models/response/billingResponse";
|
||||
|
||||
@Component({
|
||||
selector: "app-org-billing",
|
||||
templateUrl: "./organization-billing.component.html",
|
||||
})
|
||||
export class OrganizationBillingComponent implements OnInit {
|
||||
loading = false;
|
||||
firstLoaded = false;
|
||||
showAdjustPayment = false;
|
||||
showAddCredit = false;
|
||||
billing: BillingResponse;
|
||||
paymentMethodType = PaymentMethodType;
|
||||
transactionType = TransactionType;
|
||||
organizationId: string;
|
||||
verifyAmount1: number;
|
||||
verifyAmount2: number;
|
||||
|
||||
verifyBankPromise: Promise<any>;
|
||||
|
||||
// TODO - Make sure to properly split out the billing/invoice and payment method/account during org admin refresh
|
||||
|
||||
constructor(
|
||||
private apiService: ApiService,
|
||||
private i18nService: I18nService,
|
||||
private route: ActivatedRoute,
|
||||
private platformUtilsService: PlatformUtilsService,
|
||||
private logService: LogService
|
||||
) {}
|
||||
|
||||
async ngOnInit() {
|
||||
this.route.parent.parent.params.subscribe(async (params) => {
|
||||
this.organizationId = params.organizationId;
|
||||
await this.load();
|
||||
this.firstLoaded = true;
|
||||
});
|
||||
}
|
||||
|
||||
async load() {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
if (this.organizationId != null) {
|
||||
this.billing = await this.apiService.getOrganizationBilling(this.organizationId);
|
||||
}
|
||||
this.loading = false;
|
||||
}
|
||||
|
||||
async verifyBank() {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const request = new VerifyBankRequest();
|
||||
request.amount1 = this.verifyAmount1;
|
||||
request.amount2 = this.verifyAmount2;
|
||||
this.verifyBankPromise = this.apiService.postOrganizationVerifyBank(
|
||||
this.organizationId,
|
||||
request
|
||||
);
|
||||
await this.verifyBankPromise;
|
||||
this.platformUtilsService.showToast(
|
||||
"success",
|
||||
null,
|
||||
this.i18nService.t("verifiedBankAccount")
|
||||
);
|
||||
this.load();
|
||||
} catch (e) {
|
||||
this.logService.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
addCredit() {
|
||||
if (this.paymentSourceInApp) {
|
||||
this.platformUtilsService.showDialog(
|
||||
this.i18nService.t("cannotPerformInAppPurchase"),
|
||||
this.i18nService.t("addCredit"),
|
||||
null,
|
||||
null,
|
||||
"warning"
|
||||
);
|
||||
return;
|
||||
}
|
||||
this.showAddCredit = true;
|
||||
}
|
||||
|
||||
closeAddCredit(load: boolean) {
|
||||
this.showAddCredit = false;
|
||||
if (load) {
|
||||
this.load();
|
||||
}
|
||||
}
|
||||
|
||||
changePayment() {
|
||||
if (this.paymentSourceInApp) {
|
||||
this.platformUtilsService.showDialog(
|
||||
this.i18nService.t("cannotPerformInAppPurchase"),
|
||||
this.i18nService.t("changePaymentMethod"),
|
||||
null,
|
||||
null,
|
||||
"warning"
|
||||
);
|
||||
return;
|
||||
}
|
||||
this.showAdjustPayment = true;
|
||||
}
|
||||
|
||||
closePayment(load: boolean) {
|
||||
this.showAdjustPayment = false;
|
||||
if (load) {
|
||||
this.load();
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
get paymentSourceInApp() {
|
||||
return (
|
||||
this.paymentSource != null &&
|
||||
(this.paymentSource.type === PaymentMethodType.AppleInApp ||
|
||||
this.paymentSource.type === PaymentMethodType.GoogleInApp)
|
||||
);
|
||||
}
|
||||
|
||||
get invoices() {
|
||||
return this.billing != null ? this.billing.invoices : null;
|
||||
}
|
||||
|
||||
get transactions() {
|
||||
return this.billing != null ? this.billing.transactions : null;
|
||||
}
|
||||
}
|
||||
@@ -1,313 +0,0 @@
|
||||
<div class="page-header">
|
||||
<h1>
|
||||
{{ "subscription" | i18n }}
|
||||
<small *ngIf="firstLoaded && loading">
|
||||
<i
|
||||
class="bwi bwi-spinner bwi-spin text-muted"
|
||||
title="{{ 'loading' | i18n }}"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
<span class="sr-only">{{ "loading" | i18n }}</span>
|
||||
</small>
|
||||
</h1>
|
||||
</div>
|
||||
<ng-container *ngIf="!firstLoaded && loading">
|
||||
<i class="bwi bwi-spinner bwi-spin text-muted" title="{{ 'loading' | i18n }}"></i>
|
||||
<span class="sr-only">{{ "loading" | i18n }}</span>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="firstLoaded && !userOrg.canManageBilling">
|
||||
<div class="tw-flex tw-flex-col tw-items-center tw-text-info">
|
||||
<app-image-org-subscription-hidden></app-image-org-subscription-hidden>
|
||||
<p class="tw-font-bold">{{ "billingManagedByProvider" | i18n: this.userOrg.providerName }}</p>
|
||||
<p>{{ "billingContactProviderForAssistance" | i18n }}</p>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="sub">
|
||||
<app-callout
|
||||
type="warning"
|
||||
title="{{ 'canceled' | i18n }}"
|
||||
*ngIf="subscription && subscription.cancelled"
|
||||
>
|
||||
{{ "subscriptionCanceled" | i18n }}</app-callout
|
||||
>
|
||||
<app-callout
|
||||
type="warning"
|
||||
title="{{ 'pendingCancellation' | i18n }}"
|
||||
*ngIf="subscriptionMarkedForCancel"
|
||||
>
|
||||
<p>{{ "subscriptionPendingCanceled" | i18n }}</p>
|
||||
<button
|
||||
#reinstateBtn
|
||||
type="button"
|
||||
class="btn btn-outline-secondary btn-submit"
|
||||
(click)="reinstate()"
|
||||
[appApiAction]="reinstatePromise"
|
||||
[disabled]="reinstateBtn.loading"
|
||||
>
|
||||
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
|
||||
<span>{{ "reinstateSubscription" | i18n }}</span>
|
||||
</button>
|
||||
</app-callout>
|
||||
<ng-container *ngIf="!selfHosted">
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<dl>
|
||||
<dt>{{ "billingPlan" | i18n }}</dt>
|
||||
<dd>{{ sub.plan.name }}</dd>
|
||||
<ng-container *ngIf="subscription">
|
||||
<dt>{{ "status" | i18n }}</dt>
|
||||
<dd>
|
||||
<span class="text-capitalize">{{
|
||||
isSponsoredSubscription ? "sponsored" : subscription.status || "-"
|
||||
}}</span>
|
||||
<span bitBadge badgeType="warning" *ngIf="subscriptionMarkedForCancel">{{
|
||||
"pendingCancellation" | i18n
|
||||
}}</span>
|
||||
</dd>
|
||||
<dt>{{ "nextCharge" | i18n }}</dt>
|
||||
<dd>
|
||||
{{
|
||||
nextInvoice
|
||||
? (nextInvoice.date | date: "mediumDate") +
|
||||
", " +
|
||||
(nextInvoice.amount | currency: "$")
|
||||
: "-"
|
||||
}}
|
||||
</dd>
|
||||
</ng-container>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="col-8" *ngIf="subscription">
|
||||
<strong class="d-block mb-1">{{ "details" | i18n }}</strong>
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr *ngFor="let i of subscription.items">
|
||||
<td>
|
||||
{{ i.name }} {{ i.quantity > 1 ? "×" + i.quantity : "" }} @
|
||||
{{ i.amount | currency: "$" }}
|
||||
</td>
|
||||
<td>{{ i.quantity * i.amount | currency: "$" }} /{{ i.interval | i18n }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<ng-container *ngIf="userOrg?.providerId != null">
|
||||
<div class="col-sm">
|
||||
<dl>
|
||||
<dt>{{ "provider" | i18n }}</dt>
|
||||
<dd>{{ "yourProviderIs" | i18n: userOrg.providerName }}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
<ng-container>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline-secondary"
|
||||
(click)="changePlan()"
|
||||
*ngIf="showChangePlanButton"
|
||||
>
|
||||
{{ "changeBillingPlan" | i18n }}
|
||||
</button>
|
||||
<app-change-plan
|
||||
[organizationId]="organizationId"
|
||||
(onChanged)="closeChangePlan(true)"
|
||||
(onCanceled)="closeChangePlan(false)"
|
||||
*ngIf="showChangePlan"
|
||||
></app-change-plan>
|
||||
</ng-container>
|
||||
<h2 class="spaced-header">{{ "manageSubscription" | i18n }}</h2>
|
||||
<p class="mb-4">{{ subscriptionDesc }}</p>
|
||||
<ng-container
|
||||
*ngIf="
|
||||
subscription && canAdjustSeats && !subscription.cancelled && !subscriptionMarkedForCancel
|
||||
"
|
||||
>
|
||||
<div class="mt-3">
|
||||
<app-adjust-subscription
|
||||
[seatPrice]="seatPrice"
|
||||
[organizationId]="organizationId"
|
||||
[interval]="billingInterval"
|
||||
[currentSeatCount]="seats"
|
||||
[maxAutoscaleSeats]="maxAutoscaleSeats"
|
||||
(onAdjusted)="subscriptionAdjusted()"
|
||||
>
|
||||
</app-adjust-subscription>
|
||||
</div>
|
||||
</ng-container>
|
||||
<button
|
||||
#removeSponsorshipBtn
|
||||
type="button"
|
||||
class="btn btn-outline-danger btn-submit"
|
||||
(click)="removeSponsorship()"
|
||||
[appApiAction]="removeSponsorshipPromise"
|
||||
[disabled]="removeSponsorshipBtn.loading"
|
||||
*ngIf="isSponsoredSubscription"
|
||||
>
|
||||
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
|
||||
<span>{{ "removeSponsorship" | i18n }}</span>
|
||||
</button>
|
||||
<h2 class="spaced-header">{{ "storage" | i18n }}</h2>
|
||||
<p>{{ "subscriptionStorage" | i18n: sub.maxStorageGb || 0:sub.storageName || "0 MB" }}</p>
|
||||
<div class="progress">
|
||||
<div
|
||||
class="progress-bar bg-success"
|
||||
role="progressbar"
|
||||
[ngStyle]="{ width: storageProgressWidth + '%' }"
|
||||
[attr.aria-valuenow]="storagePercentage"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
>
|
||||
{{ storagePercentage / 100 | percent }}
|
||||
</div>
|
||||
</div>
|
||||
<ng-container *ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel">
|
||||
<div class="mt-3">
|
||||
<div class="d-flex" *ngIf="!showAdjustStorage">
|
||||
<button type="button" class="btn btn-outline-secondary" (click)="adjustStorage(true)">
|
||||
{{ "addStorage" | i18n }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline-secondary ml-1"
|
||||
(click)="adjustStorage(false)"
|
||||
>
|
||||
{{ "removeStorage" | i18n }}
|
||||
</button>
|
||||
</div>
|
||||
<app-adjust-storage
|
||||
[storageGbPrice]="storageGbPrice"
|
||||
[add]="adjustStorageAdd"
|
||||
[organizationId]="organizationId"
|
||||
[interval]="billingInterval"
|
||||
(onAdjusted)="closeStorage(true)"
|
||||
(onCanceled)="closeStorage(false)"
|
||||
*ngIf="showAdjustStorage"
|
||||
></app-adjust-storage>
|
||||
</div>
|
||||
</ng-container>
|
||||
<!--Switch to i18n-->
|
||||
<h2 class="spaced-header">{{ "selfHostingTitle" | i18n }}</h2>
|
||||
<p class="mb-4">
|
||||
{{ "selfHostingEnterpriseOrganizationSectionCopy" | i18n }}
|
||||
</p>
|
||||
<div class="d-flex">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline-secondary"
|
||||
(click)="downloadLicense()"
|
||||
*ngIf="canDownloadLicense"
|
||||
[disabled]="showDownloadLicense"
|
||||
>
|
||||
{{ "downloadLicense" | i18n }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline-secondary ml-1"
|
||||
(click)="manageBillingSync()"
|
||||
*ngIf="canManageBillingSync"
|
||||
>
|
||||
{{ (hasBillingSyncToken ? "manageBillingSync" : "setUpBillingSync") | i18n }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-3" *ngIf="showDownloadLicense">
|
||||
<app-download-license
|
||||
[organizationId]="organizationId"
|
||||
(onDownloaded)="closeDownloadLicense()"
|
||||
(onCanceled)="closeDownloadLicense()"
|
||||
></app-download-license>
|
||||
</div>
|
||||
<h2 class="spaced-header">{{ "additionalOptions" | i18n }}</h2>
|
||||
<p class="mb-4">
|
||||
{{ "additionalOptionsDesc" | i18n }}
|
||||
</p>
|
||||
<div class="d-flex">
|
||||
<button
|
||||
#cancelBtn
|
||||
type="button"
|
||||
class="btn btn-outline-danger btn-submit ml-1"
|
||||
(click)="cancel()"
|
||||
[appApiAction]="cancelPromise"
|
||||
[disabled]="cancelBtn.loading"
|
||||
*ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel"
|
||||
>
|
||||
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
|
||||
<span>{{ "cancelSubscription" | i18n }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="selfHosted">
|
||||
<dl>
|
||||
<dt>{{ "billingPlan" | i18n }}</dt>
|
||||
<dd>{{ sub.plan.name }}</dd>
|
||||
<dt>{{ "expiration" | i18n }}</dt>
|
||||
<dd *ngIf="sub.expiration">
|
||||
{{ sub.expiration | date: "mediumDate" }}
|
||||
<span *ngIf="isExpired" class="text-danger ml-2">
|
||||
<i class="bwi bwi-exclamation-triangle" aria-hidden="true"></i>
|
||||
{{ "licenseIsExpired" | i18n }}
|
||||
</span>
|
||||
</dd>
|
||||
<dd *ngIf="!sub.expiration">{{ "neverExpires" | i18n }}</dd>
|
||||
</dl>
|
||||
<div>
|
||||
<button type="button" class="btn btn-outline-secondary" (click)="updateLicense()">
|
||||
{{ "updateLicense" | i18n }}
|
||||
</button>
|
||||
<a
|
||||
href="https://vault.bitwarden.com"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="btn btn-outline-secondary"
|
||||
>
|
||||
{{ "manageSubscription" | i18n }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="card mt-3" *ngIf="showUpdateLicense">
|
||||
<div class="card-body">
|
||||
<button
|
||||
type="button"
|
||||
class="close"
|
||||
appA11yTitle="{{ 'cancel' | i18n }}"
|
||||
(click)="closeUpdateLicense(false)"
|
||||
>
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h3 class="card-body-header">{{ "updateLicense" | i18n }}</h3>
|
||||
<app-update-license
|
||||
[organizationId]="organizationId"
|
||||
(onUpdated)="closeUpdateLicense(true)"
|
||||
(onCanceled)="closeUpdateLicense(false)"
|
||||
></app-update-license>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="showBillingSyncKey">
|
||||
<h2 class="mt-5">
|
||||
{{ "billingSync" | i18n }}
|
||||
</h2>
|
||||
<p>
|
||||
{{ "billingSyncDesc" | i18n }}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline-secondary"
|
||||
(click)="manageBillingSyncSelfHosted()"
|
||||
>
|
||||
{{ "manageBillingSync" | i18n }}
|
||||
</button>
|
||||
<small class="form-text text-muted" *ngIf="billingSyncSetUp">
|
||||
{{ "lastSync" | i18n }}:
|
||||
<span *ngIf="userOrg.familySponsorshipLastSyncDate != null">
|
||||
{{ userOrg.familySponsorshipLastSyncDate | date: "medium" }}
|
||||
</span>
|
||||
<span *ngIf="userOrg.familySponsorshipLastSyncDate == null">
|
||||
{{ "never" | i18n | lowercase }}
|
||||
</span>
|
||||
</small>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
<ng-template #setupBillingSyncTemplate></ng-template>
|
||||
<ng-template #rotateBillingSyncKeyTemplate></ng-template>
|
||||
@@ -1,380 +0,0 @@
|
||||
import { Component, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
|
||||
import { ActivatedRoute } from "@angular/router";
|
||||
|
||||
import { ModalRef } from "@bitwarden/angular/components/modal/modal.ref";
|
||||
import { ModalService } from "@bitwarden/angular/services/modal.service";
|
||||
import { ApiService } from "@bitwarden/common/abstractions/api.service";
|
||||
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
|
||||
import { LogService } from "@bitwarden/common/abstractions/log.service";
|
||||
import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
|
||||
import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
|
||||
import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
|
||||
import { OrganizationApiKeyType } from "@bitwarden/common/enums/organizationApiKeyType";
|
||||
import { OrganizationConnectionType } from "@bitwarden/common/enums/organizationConnectionType";
|
||||
import { PlanType } from "@bitwarden/common/enums/planType";
|
||||
import { BillingSyncConfigApi } from "@bitwarden/common/models/api/billingSyncConfigApi";
|
||||
import { Organization } from "@bitwarden/common/models/domain/organization";
|
||||
import { OrganizationConnectionResponse } from "@bitwarden/common/models/response/organizationConnectionResponse";
|
||||
import { OrganizationSubscriptionResponse } from "@bitwarden/common/models/response/organizationSubscriptionResponse";
|
||||
|
||||
import { BillingSyncKeyComponent } from "../../settings/billing-sync-key.component";
|
||||
|
||||
import { BillingSyncApiKeyComponent } from "./billing-sync-api-key.component";
|
||||
|
||||
@Component({
|
||||
selector: "app-org-subscription",
|
||||
templateUrl: "organization-subscription.component.html",
|
||||
})
|
||||
export class OrganizationSubscriptionComponent implements OnInit {
|
||||
@ViewChild("setupBillingSyncTemplate", { read: ViewContainerRef, static: true })
|
||||
setupBillingSyncModalRef: ViewContainerRef;
|
||||
|
||||
loading = false;
|
||||
firstLoaded = false;
|
||||
organizationId: string;
|
||||
adjustSeatsAdd = true;
|
||||
showAdjustSeats = false;
|
||||
showAdjustSeatAutoscale = false;
|
||||
adjustStorageAdd = true;
|
||||
showAdjustStorage = false;
|
||||
showUpdateLicense = false;
|
||||
showBillingSyncKey = false;
|
||||
showDownloadLicense = false;
|
||||
showChangePlan = false;
|
||||
sub: OrganizationSubscriptionResponse;
|
||||
selfHosted = false;
|
||||
hasBillingSyncToken: boolean;
|
||||
|
||||
userOrg: Organization;
|
||||
existingBillingSyncConnection: OrganizationConnectionResponse<BillingSyncConfigApi>;
|
||||
|
||||
removeSponsorshipPromise: Promise<any>;
|
||||
cancelPromise: Promise<any>;
|
||||
reinstatePromise: Promise<any>;
|
||||
|
||||
@ViewChild("rotateBillingSyncKeyTemplate", { read: ViewContainerRef, static: true })
|
||||
billingSyncKeyViewContainerRef: ViewContainerRef;
|
||||
billingSyncKeyRef: [ModalRef, BillingSyncKeyComponent];
|
||||
|
||||
constructor(
|
||||
private apiService: ApiService,
|
||||
private platformUtilsService: PlatformUtilsService,
|
||||
private i18nService: I18nService,
|
||||
private messagingService: MessagingService,
|
||||
private route: ActivatedRoute,
|
||||
private organizationService: OrganizationService,
|
||||
private logService: LogService,
|
||||
private modalService: ModalService
|
||||
) {
|
||||
this.selfHosted = platformUtilsService.isSelfHost();
|
||||
}
|
||||
|
||||
async ngOnInit() {
|
||||
this.route.parent.parent.params.subscribe(async (params) => {
|
||||
this.organizationId = params.organizationId;
|
||||
await this.load();
|
||||
this.firstLoaded = true;
|
||||
});
|
||||
}
|
||||
|
||||
async load() {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
this.userOrg = await this.organizationService.get(this.organizationId);
|
||||
if (this.userOrg.canManageBilling) {
|
||||
this.sub = await this.apiService.getOrganizationSubscription(this.organizationId);
|
||||
}
|
||||
const apiKeyResponse = await this.apiService.getOrganizationApiKeyInformation(
|
||||
this.organizationId
|
||||
);
|
||||
this.hasBillingSyncToken = apiKeyResponse.data.some(
|
||||
(i) => i.keyType === OrganizationApiKeyType.BillingSync
|
||||
);
|
||||
|
||||
if (this.selfHosted) {
|
||||
this.showBillingSyncKey = await this.apiService.getCloudCommunicationsEnabled();
|
||||
}
|
||||
|
||||
if (this.showBillingSyncKey) {
|
||||
this.existingBillingSyncConnection = await this.apiService.getOrganizationConnection(
|
||||
this.organizationId,
|
||||
OrganizationConnectionType.CloudBillingSync,
|
||||
BillingSyncConfigApi
|
||||
);
|
||||
}
|
||||
|
||||
this.loading = false;
|
||||
}
|
||||
|
||||
async reinstate() {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
|
||||
const confirmed = await this.platformUtilsService.showDialog(
|
||||
this.i18nService.t("reinstateConfirmation"),
|
||||
this.i18nService.t("reinstateSubscription"),
|
||||
this.i18nService.t("yes"),
|
||||
this.i18nService.t("cancel")
|
||||
);
|
||||
if (!confirmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.reinstatePromise = this.apiService.postOrganizationReinstate(this.organizationId);
|
||||
await this.reinstatePromise;
|
||||
this.platformUtilsService.showToast("success", null, this.i18nService.t("reinstated"));
|
||||
this.load();
|
||||
} catch (e) {
|
||||
this.logService.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
async cancel() {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
|
||||
const confirmed = await this.platformUtilsService.showDialog(
|
||||
this.i18nService.t("cancelConfirmation"),
|
||||
this.i18nService.t("cancelSubscription"),
|
||||
this.i18nService.t("yes"),
|
||||
this.i18nService.t("no"),
|
||||
"warning"
|
||||
);
|
||||
if (!confirmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.cancelPromise = this.apiService.postOrganizationCancel(this.organizationId);
|
||||
await this.cancelPromise;
|
||||
this.platformUtilsService.showToast(
|
||||
"success",
|
||||
null,
|
||||
this.i18nService.t("canceledSubscription")
|
||||
);
|
||||
this.load();
|
||||
} catch (e) {
|
||||
this.logService.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
async changePlan() {
|
||||
this.showChangePlan = !this.showChangePlan;
|
||||
}
|
||||
|
||||
closeChangePlan(changed: boolean) {
|
||||
this.showChangePlan = false;
|
||||
}
|
||||
|
||||
downloadLicense() {
|
||||
this.showDownloadLicense = !this.showDownloadLicense;
|
||||
}
|
||||
|
||||
async manageBillingSync() {
|
||||
const [ref] = await this.modalService.openViewRef(
|
||||
BillingSyncApiKeyComponent,
|
||||
this.setupBillingSyncModalRef,
|
||||
(comp) => {
|
||||
comp.organizationId = this.organizationId;
|
||||
comp.hasBillingToken = this.hasBillingSyncToken;
|
||||
}
|
||||
);
|
||||
ref.onClosed.subscribe(async () => {
|
||||
await this.load();
|
||||
});
|
||||
}
|
||||
|
||||
closeDownloadLicense() {
|
||||
this.showDownloadLicense = false;
|
||||
}
|
||||
|
||||
updateLicense() {
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
this.showUpdateLicense = true;
|
||||
}
|
||||
|
||||
closeUpdateLicense(updated: boolean) {
|
||||
this.showUpdateLicense = false;
|
||||
if (updated) {
|
||||
this.load();
|
||||
this.messagingService.send("updatedOrgLicense");
|
||||
}
|
||||
}
|
||||
|
||||
subscriptionAdjusted() {
|
||||
this.load();
|
||||
}
|
||||
|
||||
adjustStorage(add: boolean) {
|
||||
this.adjustStorageAdd = add;
|
||||
this.showAdjustStorage = true;
|
||||
}
|
||||
|
||||
closeStorage(load: boolean) {
|
||||
this.showAdjustStorage = false;
|
||||
if (load) {
|
||||
this.load();
|
||||
}
|
||||
}
|
||||
|
||||
async removeSponsorship() {
|
||||
const isConfirmed = await this.platformUtilsService.showDialog(
|
||||
this.i18nService.t("removeSponsorshipConfirmation"),
|
||||
this.i18nService.t("removeSponsorship"),
|
||||
this.i18nService.t("remove"),
|
||||
this.i18nService.t("cancel"),
|
||||
"warning"
|
||||
);
|
||||
|
||||
if (!isConfirmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.removeSponsorshipPromise = this.apiService.deleteRemoveSponsorship(this.organizationId);
|
||||
await this.removeSponsorshipPromise;
|
||||
this.platformUtilsService.showToast(
|
||||
"success",
|
||||
null,
|
||||
this.i18nService.t("removeSponsorshipSuccess")
|
||||
);
|
||||
await this.load();
|
||||
} catch (e) {
|
||||
this.logService.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
async manageBillingSyncSelfHosted() {
|
||||
this.billingSyncKeyRef = await this.modalService.openViewRef(
|
||||
BillingSyncKeyComponent,
|
||||
this.billingSyncKeyViewContainerRef,
|
||||
(comp) => {
|
||||
comp.entityId = this.organizationId;
|
||||
comp.existingConnectionId = this.existingBillingSyncConnection?.id;
|
||||
comp.billingSyncKey = this.existingBillingSyncConnection?.config?.billingSyncKey;
|
||||
comp.setParentConnection = (
|
||||
connection: OrganizationConnectionResponse<BillingSyncConfigApi>
|
||||
) => {
|
||||
this.existingBillingSyncConnection = connection;
|
||||
this.billingSyncKeyRef[0].close();
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
get isExpired() {
|
||||
return (
|
||||
this.sub != null && this.sub.expiration != null && new Date(this.sub.expiration) < new Date()
|
||||
);
|
||||
}
|
||||
|
||||
get subscriptionMarkedForCancel() {
|
||||
return (
|
||||
this.subscription != null && !this.subscription.cancelled && this.subscription.cancelAtEndDate
|
||||
);
|
||||
}
|
||||
|
||||
get subscription() {
|
||||
return this.sub != null ? this.sub.subscription : null;
|
||||
}
|
||||
|
||||
get nextInvoice() {
|
||||
return this.sub != null ? this.sub.upcomingInvoice : null;
|
||||
}
|
||||
|
||||
get storagePercentage() {
|
||||
return this.sub != null && this.sub.maxStorageGb
|
||||
? +(100 * (this.sub.storageGb / this.sub.maxStorageGb)).toFixed(2)
|
||||
: 0;
|
||||
}
|
||||
|
||||
get storageProgressWidth() {
|
||||
return this.storagePercentage < 5 ? 5 : 0;
|
||||
}
|
||||
|
||||
get billingInterval() {
|
||||
const monthly = !this.sub.plan.isAnnual;
|
||||
return monthly ? "month" : "year";
|
||||
}
|
||||
|
||||
get storageGbPrice() {
|
||||
return this.sub.plan.additionalStoragePricePerGb;
|
||||
}
|
||||
|
||||
get seatPrice() {
|
||||
return this.sub.plan.seatPrice;
|
||||
}
|
||||
|
||||
get seats() {
|
||||
return this.sub.seats;
|
||||
}
|
||||
|
||||
get maxAutoscaleSeats() {
|
||||
return this.sub.maxAutoscaleSeats;
|
||||
}
|
||||
|
||||
get canAdjustSeats() {
|
||||
return this.sub.plan.hasAdditionalSeatsOption;
|
||||
}
|
||||
|
||||
get isSponsoredSubscription(): boolean {
|
||||
return this.sub.subscription?.items.some((i) => i.sponsoredSubscriptionItem);
|
||||
}
|
||||
|
||||
get canDownloadLicense() {
|
||||
return (
|
||||
(this.sub.planType !== PlanType.Free && this.subscription == null) ||
|
||||
(this.subscription != null && !this.subscription.cancelled)
|
||||
);
|
||||
}
|
||||
|
||||
get canManageBillingSync() {
|
||||
return (
|
||||
!this.selfHosted &&
|
||||
(this.sub.planType === PlanType.EnterpriseAnnually ||
|
||||
this.sub.planType === PlanType.EnterpriseMonthly ||
|
||||
this.sub.planType === PlanType.EnterpriseAnnually2019 ||
|
||||
this.sub.planType === PlanType.EnterpriseMonthly2019)
|
||||
);
|
||||
}
|
||||
|
||||
get subscriptionDesc() {
|
||||
if (this.sub.planType === PlanType.Free) {
|
||||
return this.i18nService.t("subscriptionFreePlan", this.sub.seats.toString());
|
||||
} else if (
|
||||
this.sub.planType === PlanType.FamiliesAnnually ||
|
||||
this.sub.planType === PlanType.FamiliesAnnually2019
|
||||
) {
|
||||
if (this.isSponsoredSubscription) {
|
||||
return this.i18nService.t("subscriptionSponsoredFamiliesPlan", this.sub.seats.toString());
|
||||
} else {
|
||||
return this.i18nService.t("subscriptionFamiliesPlan", this.sub.seats.toString());
|
||||
}
|
||||
} else if (this.sub.maxAutoscaleSeats === this.sub.seats && this.sub.seats != null) {
|
||||
return this.i18nService.t("subscriptionMaxReached", this.sub.seats.toString());
|
||||
} else if (this.sub.maxAutoscaleSeats == null) {
|
||||
return this.i18nService.t("subscriptionUserSeatsUnlimitedAutoscale");
|
||||
} else {
|
||||
return this.i18nService.t(
|
||||
"subscriptionUserSeatsLimitedAutoscale",
|
||||
this.sub.maxAutoscaleSeats.toString()
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
get showChangePlanButton() {
|
||||
return this.subscription == null && this.sub.planType === PlanType.Free && !this.showChangePlan;
|
||||
}
|
||||
|
||||
get billingSyncSetUp() {
|
||||
return this.existingBillingSyncConnection?.id != null;
|
||||
}
|
||||
}
|
||||
@@ -5,18 +5,7 @@
|
||||
<div class="card-header">{{ "settings" | i18n }}</div>
|
||||
<div class="list-group list-group-flush">
|
||||
<a routerLink="account" class="list-group-item" routerLinkActive="active">
|
||||
{{ "myOrganization" | i18n }}
|
||||
</a>
|
||||
<a routerLink="subscription" class="list-group-item" routerLinkActive="active">
|
||||
{{ "subscription" | i18n }}
|
||||
</a>
|
||||
<a
|
||||
routerLink="billing"
|
||||
class="list-group-item"
|
||||
routerLinkActive="active"
|
||||
*ngIf="showBilling"
|
||||
>
|
||||
{{ "billing" | i18n }}
|
||||
{{ "organizationInfo" | i18n }}
|
||||
</a>
|
||||
<a
|
||||
routerLink="two-factor"
|
||||
|
||||
Reference in New Issue
Block a user