bitwarden-estensione-browser/src/app/organizations/settings/organization-subscription.c...

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

266 lines
8.7 KiB
HTML
Raw Normal View History

2018-07-16 23:17:07 +02:00
<div class="page-header">
<h1>
{{ "subscription" | i18n }}
2019-10-11 16:35:24 +02:00
<small *ngIf="firstLoaded && loading">
<i
class="bwi bwi-spinner bwi-spin text-muted"
2019-10-11 16:35:24 +02:00
title="{{ 'loading' | i18n }}"
aria-hidden="true"
></i>
<span class="sr-only">{{ "loading" | i18n }}</span>
2018-07-16 23:17:07 +02:00
</small>
</h1>
</div>
2019-10-11 16:35:24 +02:00
<ng-container *ngIf="!firstLoaded && loading">
<i class="bwi bwi-spinner bwi-spin text-muted" title="{{ 'loading' | i18n }}"></i>
2019-10-11 16:35:24 +02:00
<span class="sr-only">{{ "loading" | i18n }}</span>
</ng-container>
<ng-container *ngIf="sub">
2018-07-16 23:17:07 +02:00
<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
Feature/families for enterprise (#1300) * Added manual routing * Families for enterprise/account settings (#1290) * Added sponsored families page * Revert "Added manual routing" This reverts commit a970ba78ffa98545176b636630e48115efcf51cc. * Add messages to page * Remove stages and simplify design * Switch to new figma design * Add screen reader * Add calls to server * Reorder methods * Used to organization filters * Connected page to server * Add preliminary text to subscription page * Sponsor existing family organization flow * Update jslib Co-authored-by: Matt Gibson <mgibson@bitwarden.com> * Add revoke sponsorship flow * Add spinner to send offer button * Determine if subscription has sponsored items * Work on subscription button * Add message for new family organization * Families for enterprise/subscription page (#1292) * Work on subscription button * Determine if subscription has sponsored items * Work on subscriptions page * Add message for new family organization Co-authored-by: Matt Gibson <mgibson@bitwarden.com> * Families for enterprise/redeem card (#1295) * Add toast localization message * Use helpers to property display sponsorship items * Split table rows into component so buttons load (#1296) * Split table rows into component so buttons load * Update jslib * Families for enterprise/localizations (#1299) * Add more localizations * Remove unneeded comments * Fix help article * Run linting * Do not show redeem button if no orgs exist to redeem * Implement new process for accepting sponsorships * Hide business checkbox * Update jslib * Removed commented code * Remove commented html * Cleaned up imports * Use proper message * Remove merge conflict message * Remove confusing comment * Listened to PR feedback * Remove unused property * Update help text * Fix aria labels * Add try catch * Made toast before emit * Minor copy changes * Update jslib * Remove unneeded loading Co-authored-by: Matt Gibson <mgibson@bitwarden.com>
2021-11-22 14:41:40 +01:00
#reinstateBtn
type="button"
class="btn btn-outline-secondary btn-submit"
(click)="reinstate()"
[appApiAction]="reinstatePromise"
[disabled]="reinstateBtn.loading"
2018-07-16 23:17:07 +02:00
>
<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 class="badge badge-warning" *ngIf="subscriptionMarkedForCancel">{{
"pendingCancellation" | i18n
2021-12-17 15:57:11 +01:00
}}</span>
</dd>
<dt>{{ "nextCharge" | i18n }}</dt>
2021-12-17 15:57:11 +01:00
<dd>
{{
nextInvoice
? (nextInvoice.date | date: "mediumDate") +
2021-12-17 15:57:11 +01:00
", " +
(nextInvoice.amount | currency: "$")
2021-12-17 15:57:11 +01:00
: "-"
}}
</dd>
</ng-container>
</dl>
</div>
<div class="col-8" *ngIf="subscription">
<strong class="d-block mb-1">{{ "details" | i18n }}</strong>
<table class="table">
2021-12-17 15:57:11 +01:00
<tbody>
<tr *ngFor="let i of subscription.items">
2021-12-17 15:57:11 +01:00
<td>
{{ i.name }} {{ i.quantity > 1 ? "&times;" + i.quantity : "" }} @
{{ i.amount | currency: "$" }}
2021-12-17 15:57:11 +01:00
</td>
<td>{{ i.quantity * i.amount | currency: "$" }} /{{ i.interval | i18n }}</td>
2021-12-17 15:57:11 +01:00
</tr>
</tbody>
</table>
</div>
<ng-container *ngIf="userOrg?.providerId != null">
<div class="col-sm">
2021-12-17 15:57:11 +01:00
<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()"
2021-11-01 22:14:31 +01:00
*ngIf="showChangePlanButton"
2021-12-17 15:57:11 +01:00
>
{{ "changeBillingPlan" | i18n }}
</button>
<app-change-plan
[organizationId]="organizationId"
(onChanged)="closeChangePlan(true)"
(onCanceled)="closeChangePlan(false)"
*ngIf="showChangePlan"
></app-change-plan>
2018-07-16 23:17:07 +02:00
</ng-container>
<h2 class="spaced-header">{{ "manageSubscription" | i18n }}</h2>
<p class="mb-4">{{ subscriptionDesc }}</p>
<ng-container
2021-12-17 15:57:11 +01:00
*ngIf="
subscription && canAdjustSeats && !subscription.cancelled && !subscriptionMarkedForCancel
2021-12-17 15:57:11 +01:00
"
>
<div class="mt-3">
<app-adjust-subscription
[seatPrice]="seatPrice"
[organizationId]="organizationId"
[interval]="billingInterval"
[currentSeatCount]="seats"
[maxAutoscaleSeats]="maxAutoscaleSeats"
(onAdjusted)="subscriptionAdjusted()"
2021-12-17 15:57:11 +01:00
>
</app-adjust-subscription>
2021-12-17 15:57:11 +01:00
</div>
</ng-container>
2021-12-17 15:57:11 +01:00
<button
#removeSponsorshipBtn
type="button"
class="btn btn-outline-danger btn-submit"
(click)="removeSponsorship()"
[appApiAction]="removeSponsorshipPromise"
Feature/families for enterprise (#1300) * Added manual routing * Families for enterprise/account settings (#1290) * Added sponsored families page * Revert "Added manual routing" This reverts commit a970ba78ffa98545176b636630e48115efcf51cc. * Add messages to page * Remove stages and simplify design * Switch to new figma design * Add screen reader * Add calls to server * Reorder methods * Used to organization filters * Connected page to server * Add preliminary text to subscription page * Sponsor existing family organization flow * Update jslib Co-authored-by: Matt Gibson <mgibson@bitwarden.com> * Add revoke sponsorship flow * Add spinner to send offer button * Determine if subscription has sponsored items * Work on subscription button * Add message for new family organization * Families for enterprise/subscription page (#1292) * Work on subscription button * Determine if subscription has sponsored items * Work on subscriptions page * Add message for new family organization Co-authored-by: Matt Gibson <mgibson@bitwarden.com> * Families for enterprise/redeem card (#1295) * Add toast localization message * Use helpers to property display sponsorship items * Split table rows into component so buttons load (#1296) * Split table rows into component so buttons load * Update jslib * Families for enterprise/localizations (#1299) * Add more localizations * Remove unneeded comments * Fix help article * Run linting * Do not show redeem button if no orgs exist to redeem * Implement new process for accepting sponsorships * Hide business checkbox * Update jslib * Removed commented code * Remove commented html * Cleaned up imports * Use proper message * Remove merge conflict message * Remove confusing comment * Listened to PR feedback * Remove unused property * Update help text * Fix aria labels * Add try catch * Made toast before emit * Minor copy changes * Update jslib * Remove unneeded loading Co-authored-by: Matt Gibson <mgibson@bitwarden.com>
2021-11-22 14:41:40 +01:00
[disabled]="removeSponsorshipBtn.loading"
*ngIf="isSponsoredSubscription"
2021-12-17 15:57:11 +01:00
>
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
Feature/families for enterprise (#1300) * Added manual routing * Families for enterprise/account settings (#1290) * Added sponsored families page * Revert "Added manual routing" This reverts commit a970ba78ffa98545176b636630e48115efcf51cc. * Add messages to page * Remove stages and simplify design * Switch to new figma design * Add screen reader * Add calls to server * Reorder methods * Used to organization filters * Connected page to server * Add preliminary text to subscription page * Sponsor existing family organization flow * Update jslib Co-authored-by: Matt Gibson <mgibson@bitwarden.com> * Add revoke sponsorship flow * Add spinner to send offer button * Determine if subscription has sponsored items * Work on subscription button * Add message for new family organization * Families for enterprise/subscription page (#1292) * Work on subscription button * Determine if subscription has sponsored items * Work on subscriptions page * Add message for new family organization Co-authored-by: Matt Gibson <mgibson@bitwarden.com> * Families for enterprise/redeem card (#1295) * Add toast localization message * Use helpers to property display sponsorship items * Split table rows into component so buttons load (#1296) * Split table rows into component so buttons load * Update jslib * Families for enterprise/localizations (#1299) * Add more localizations * Remove unneeded comments * Fix help article * Run linting * Do not show redeem button if no orgs exist to redeem * Implement new process for accepting sponsorships * Hide business checkbox * Update jslib * Removed commented code * Remove commented html * Cleaned up imports * Use proper message * Remove merge conflict message * Remove confusing comment * Listened to PR feedback * Remove unused property * Update help text * Fix aria labels * Add try catch * Made toast before emit * Minor copy changes * Update jslib * Remove unneeded loading Co-authored-by: Matt Gibson <mgibson@bitwarden.com>
2021-11-22 14:41:40 +01:00
<span>{{ "removeSponsorship" | i18n }}</span>
</button>
2018-07-16 23:17:07 +02:00
<h2 class="spaced-header">{{ "storage" | i18n }}</h2>
<p>{{ "subscriptionStorage" | i18n: sub.maxStorageGb || 0:sub.storageName || "0 MB" }}</p>
2018-07-16 23:17:07 +02:00
<div class="progress">
2021-12-17 15:57:11 +01:00
<div
2019-02-21 22:50:37 +01:00
class="progress-bar bg-success"
role="progressbar"
[ngStyle]="{ width: storageProgressWidth + '%' }"
[attr.aria-valuenow]="storagePercentage"
2019-02-21 22:50:37 +01:00
aria-valuemin="0"
aria-valuemax="100"
2021-12-17 15:57:11 +01:00
>
2019-02-21 22:50:37 +01:00
{{ storagePercentage / 100 | percent }}
2021-12-17 15:57:11 +01:00
</div>
</div>
<ng-container *ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel">
2018-07-16 23:17:07 +02:00
<div class="mt-3">
<div class="d-flex" *ngIf="!showAdjustStorage">
<button type="button" class="btn btn-outline-secondary" (click)="adjustStorage(true)">
2018-07-16 23:17:07 +02:00
{{ "addStorage" | i18n }}
</button>
2021-12-17 15:57:11 +01:00
<button
type="button"
class="btn btn-outline-secondary ml-1"
(click)="adjustStorage(false)"
2021-12-17 15:57:11 +01:00
>
2018-07-16 23:17:07 +02:00
{{ "removeStorage" | i18n }}
</button>
</div>
2019-02-21 22:50:37 +01:00
<app-adjust-storage
[storageGbPrice]="storageGbPrice"
[add]="adjustStorageAdd"
[organizationId]="organizationId"
2019-02-21 22:50:37 +01:00
[interval]="billingInterval"
(onAdjusted)="closeStorage(true)"
(onCanceled)="closeStorage(false)"
*ngIf="showAdjustStorage"
></app-adjust-storage>
2021-12-17 15:57:11 +01:00
</div>
2018-07-16 23:17:07 +02:00
</ng-container>
2021-12-17 15:57:11 +01:00
2018-07-16 23:17:07 +02:00
<h2 class="spaced-header">{{ "additionalOptions" | i18n }}</h2>
<p class="mb-4">
2019-02-21 22:50:37 +01:00
{{ "additionalOptionsDesc" | i18n }}
2021-12-17 15:57:11 +01:00
</p>
<div class="d-flex">
2021-12-17 15:57:11 +01:00
<button
type="button"
class="btn btn-outline-secondary"
(click)="downloadLicense()"
*ngIf="canDownloadLicense"
[disabled]="showDownloadLicense"
2021-12-17 15:57:11 +01:00
>
{{ "downloadLicense" | i18n }}
</button>
2021-12-17 15:57:11 +01:00
<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"
2021-12-17 15:57:11 +01:00
>
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
<span>{{ "cancelSubscription" | i18n }}</span>
</button>
2021-12-17 15:57:11 +01:00
</div>
<div class="mt-3" *ngIf="showDownloadLicense">
<app-download-license
[organizationId]="organizationId"
(onDownloaded)="closeDownloadLicense()"
(onCanceled)="closeDownloadLicense()"
></app-download-license>
2021-12-17 15:57:11 +01:00
</div>
2018-07-16 23:17:07 +02:00
</ng-container>
<ng-container *ngIf="selfHosted">
2021-12-17 15:57:11 +01:00
<dl>
<dt>{{ "billingPlan" | i18n }}</dt>
<dd>{{ sub.plan.name }}</dd>
<dt>{{ "expiration" | i18n }}</dt>
<dd *ngIf="sub.expiration">
{{ sub.expiration | date: "mediumDate" }}
2021-11-01 22:14:31 +01:00
<span *ngIf="isExpired" class="text-danger ml-2">
<i class="bwi bwi-exclamation-triangle" aria-hidden="true"></i>
{{ "licenseIsExpired" | i18n }}
2021-12-17 15:57:11 +01:00
</span>
</dd>
<dd *ngIf="!sub.expiration">{{ "neverExpires" | i18n }}</dd>
2021-12-17 15:57:11 +01:00
</dl>
<div>
<button type="button" class="btn btn-outline-secondary" (click)="updateLicense()">
{{ "updateLicense" | i18n }}
</button>
2021-12-17 15:57:11 +01:00
<a
href="https://vault.bitwarden.com"
2021-12-17 15:57:11 +01:00
target="_blank"
rel="noopener"
class="btn btn-outline-secondary"
2021-12-17 15:57:11 +01:00
>
{{ "manageSubscription" | i18n }}
2021-12-17 15:57:11 +01:00
</a>
</div>
<div class="card mt-3" *ngIf="showUpdateLicense">
<div class="card-body">
2021-12-17 15:57:11 +01:00
<button
type="button"
class="close"
2019-02-21 22:50:37 +01:00
appA11yTitle="{{ 'cancel' | i18n }}"
(click)="closeUpdateLicense(false)"
2021-12-17 15:57:11 +01:00
>
<span aria-hidden="true">&times;</span>
</button>
2018-07-16 23:17:07 +02:00
<h3 class="card-body-header">{{ "updateLicense" | i18n }}</h3>
<app-update-license
[organizationId]="organizationId"
2019-02-21 22:50:37 +01:00
(onUpdated)="closeUpdateLicense(true)"
(onCanceled)="closeUpdateLicense(false)"
></app-update-license>
2021-12-17 15:57:11 +01:00
</div>
</div>
2018-07-16 23:17:07 +02:00
</ng-container>
</ng-container>