mirror of
https://github.com/bitwarden/browser
synced 2026-02-13 15:03:26 +00:00
b9eb4003a1
* [deps] Autofill: Update prettier to v3.3.3 * prettier formatting changes * fix SyntaxError for literal @ inline html --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Jonathan Prusik <jprusik@classynemesis.com>
287 lines
10 KiB
HTML
287 lines
10 KiB
HTML
<app-header></app-header>
|
|
|
|
<bit-container *ngIf="!isManagedByConsolidatedBillingMSP">
|
|
<ng-container *ngIf="!firstLoaded && loading">
|
|
<i class="bwi bwi-spinner bwi-spin text-muted" title="{{ 'loading' | i18n }}"></i>
|
|
<span class="tw-sr-only">{{ "loading" | i18n }}</span>
|
|
</ng-container>
|
|
|
|
<app-org-subscription-hidden
|
|
*ngIf="firstLoaded && !userOrg.canViewSubscription"
|
|
[providerName]="userOrg.providerName"
|
|
></app-org-subscription-hidden>
|
|
|
|
<ng-container *ngIf="sub && firstLoaded">
|
|
<ng-container *ngIf="!(showUpdatedSubscriptionStatusSection$ | async)">
|
|
<bit-callout
|
|
type="warning"
|
|
title="{{ 'canceled' | i18n }}"
|
|
*ngIf="subscription && subscription.cancelled"
|
|
>
|
|
{{ "subscriptionCanceled" | i18n }}</bit-callout
|
|
>
|
|
<bit-callout
|
|
type="warning"
|
|
title="{{ 'pendingCancellation' | i18n }}"
|
|
*ngIf="subscriptionMarkedForCancel"
|
|
>
|
|
<p>{{ "subscriptionPendingCanceled" | i18n }}</p>
|
|
<button
|
|
*ngIf="userOrg.canEditSubscription"
|
|
bitButton
|
|
buttonType="secondary"
|
|
[bitAction]="reinstate"
|
|
type="button"
|
|
>
|
|
{{ "reinstateSubscription" | i18n }}
|
|
</button>
|
|
</bit-callout>
|
|
|
|
<dl class="tw-grid tw-grid-flow-col tw-grid-rows-2">
|
|
<dt>{{ "billingPlan" | i18n }}</dt>
|
|
<dd>{{ sub.plan.name }}</dd>
|
|
<ng-container *ngIf="subscription">
|
|
<dt>{{ "status" | i18n }}</dt>
|
|
<dd>
|
|
<span class="tw-capitalize">{{
|
|
isSponsoredSubscription ? "sponsored" : subscription.status || "-"
|
|
}}</span>
|
|
<span bitBadge variant="warning" *ngIf="subscriptionMarkedForCancel">{{
|
|
"pendingCancellation" | i18n
|
|
}}</span>
|
|
</dd>
|
|
<dt [ngClass]="{ 'tw-text-danger': isExpired }">
|
|
{{ "subscriptionExpiration" | i18n }}
|
|
</dt>
|
|
<dd [ngClass]="{ 'tw-text-danger': isExpired }">
|
|
{{ nextInvoice ? (nextInvoice.date | date: "mediumDate") : "-" }}
|
|
</dd>
|
|
</ng-container>
|
|
</dl>
|
|
</ng-container>
|
|
<app-subscription-status
|
|
*ngIf="showUpdatedSubscriptionStatusSection$ | async"
|
|
[organizationSubscriptionResponse]="sub"
|
|
(reinstatementRequested)="reinstate()"
|
|
></app-subscription-status>
|
|
<ng-container *ngIf="userOrg.canEditSubscription">
|
|
<div class="tw-flex-col">
|
|
<strong class="tw-block tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300">{{
|
|
"details" | i18n
|
|
}}</strong>
|
|
<bit-table>
|
|
<ng-template body>
|
|
<ng-container *ngIf="subscription">
|
|
<tr bitRow *ngFor="let i of subscriptionLineItems">
|
|
<td bitCell [ngClass]="{ 'tw-pl-20': i.addonSubscriptionItem }">
|
|
<span *ngIf="!i.addonSubscriptionItem">{{ i.productName | i18n }} -</span>
|
|
{{ i.name }} {{ i.quantity > 1 ? "×" + i.quantity : "" }} @
|
|
{{ i.amount | currency: "$" }}
|
|
</td>
|
|
<td bitCell class="tw-text-right">
|
|
<ng-container
|
|
*ngIf="
|
|
sub?.customerDiscount?.appliesTo?.includes(i.productId);
|
|
else calculateElse
|
|
"
|
|
>
|
|
{{ "freeForOneYear" | i18n }}
|
|
</ng-container>
|
|
<ng-template #calculateElse>
|
|
{{ i.quantity * i.amount | currency: "$" }} /{{ i.interval | i18n }}
|
|
</ng-template>
|
|
</td>
|
|
</tr>
|
|
</ng-container>
|
|
<ng-container *ngIf="userOrg.isFreeOrg">
|
|
<tr bitRow *ngIf="userOrg.usePasswordManager">
|
|
<td bitCell>{{ "passwordManager" | i18n }} - {{ "freeOrganization" | i18n }}</td>
|
|
<td bitCell class="tw-text-right">{{ "free" | i18n }}</td>
|
|
</tr>
|
|
<tr bitRow *ngIf="userOrg.useSecretsManager">
|
|
<td bitCell>{{ "secretsManager" | i18n }} - {{ "freeOrganization" | i18n }}</td>
|
|
<td bitCell class="tw-text-right">{{ "free" | i18n }}</td>
|
|
</tr>
|
|
</ng-container>
|
|
</ng-template>
|
|
</bit-table>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="userOrg.canEditSubscription">
|
|
<div class="tw-mt-7">
|
|
<button
|
|
bitButton
|
|
buttonType="secondary"
|
|
type="button"
|
|
(click)="changePlan()"
|
|
*ngIf="showChangePlanButton"
|
|
>
|
|
{{ "changeBillingPlan" | i18n }}
|
|
</button>
|
|
<app-change-plan
|
|
[organizationId]="organizationId"
|
|
[currentPlan]="sub.plan"
|
|
[preSelectedProductTier]="preSelectedProductTier"
|
|
(onChanged)="closeChangePlan()"
|
|
(onCanceled)="closeChangePlan()"
|
|
*ngIf="showChangePlan"
|
|
></app-change-plan>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="showSecretsManagerSubscribe">
|
|
<div class="tw-mt-7">
|
|
<sm-subscribe-standalone
|
|
[plan]="sub.plan"
|
|
[organization]="userOrg"
|
|
[customerDiscount]="customerDiscount"
|
|
(onSubscribe)="subscriptionAdjusted()"
|
|
></sm-subscribe-standalone>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="userOrg.canEditSubscription">
|
|
<h2 bitTypography="h2" class="tw-mt-7">{{ "manageSubscription" | i18n }}</h2>
|
|
<p bitTypography="body1" *ngIf="customerDiscount?.id === 'sm-standalone'">
|
|
{{ "smStandaloneTrialSeatCountUpdateMessageFragment1" | i18n }}
|
|
{{ "passwordManager" | i18n }}
|
|
{{ "smStandaloneTrialSeatCountUpdateMessageFragment2" | i18n }}
|
|
<a href="https://bitwarden.com/contact/" target="_blank" rel="noreferrer"
|
|
>{{ "contactSupportShort" | i18n }}.
|
|
</a>
|
|
</p>
|
|
<p bitTypography="body1">{{ subscriptionDesc }}</p>
|
|
<ng-container
|
|
*ngIf="
|
|
subscription &&
|
|
canAdjustSeats &&
|
|
!subscription.cancelled &&
|
|
!subscriptionMarkedForCancel &&
|
|
(!customerDiscount || customerDiscount.id != 'sm-standalone')
|
|
"
|
|
>
|
|
<h3 bitTypography="h3" class="tw-mt-7">{{ "passwordManager" | i18n }}</h3>
|
|
<app-adjust-subscription
|
|
[seatPrice]="seatPrice"
|
|
[organizationId]="organizationId"
|
|
[interval]="billingInterval"
|
|
[currentSeatCount]="seats"
|
|
[maxAutoscaleSeats]="maxAutoscaleSeats"
|
|
(onAdjusted)="subscriptionAdjusted()"
|
|
>
|
|
</app-adjust-subscription>
|
|
</ng-container>
|
|
<button
|
|
bitButton
|
|
buttonType="danger"
|
|
type="button"
|
|
[bitAction]="removeSponsorship"
|
|
*ngIf="isSponsoredSubscription"
|
|
>
|
|
{{ "removeSponsorship" | i18n }}
|
|
</button>
|
|
<ng-container *ngIf="!customerDiscount || customerDiscount.id != 'sm-standalone'">
|
|
<h4 bitTypography="h4" class="tw-mt-9">{{ "storage" | i18n }}</h4>
|
|
<p bitTypography="body1">
|
|
{{ "subscriptionStorage" | i18n: sub.maxStorageGb || 0 : sub.storageName || "0 MB" }}
|
|
</p>
|
|
<bit-progress [barWidth]="storagePercentage" bgColor="success"></bit-progress>
|
|
<ng-container
|
|
*ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel"
|
|
>
|
|
<div class="tw-mt-3">
|
|
<div class="tw-flex tw-space-x-2">
|
|
<button
|
|
bitButton
|
|
buttonType="secondary"
|
|
type="button"
|
|
[bitAction]="adjustStorage(true)"
|
|
>
|
|
{{ "addStorage" | i18n }}
|
|
</button>
|
|
<button
|
|
bitButton
|
|
buttonType="secondary"
|
|
type="button"
|
|
[bitAction]="adjustStorage(false)"
|
|
>
|
|
{{ "removeStorage" | i18n }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
</ng-container>
|
|
<ng-container *ngIf="showAdjustSecretsManager">
|
|
<h3 bitTypography="h3" class="tw-mt-9">{{ "secretsManager" | i18n }}</h3>
|
|
<app-sm-adjust-subscription
|
|
[organizationId]="organizationId"
|
|
[options]="smOptions"
|
|
(onAdjusted)="subscriptionAdjusted()"
|
|
></app-sm-adjust-subscription>
|
|
</ng-container>
|
|
</ng-container>
|
|
|
|
<h2 bitTypography="h2" class="tw-mt-7">{{ "selfHostingTitle" | i18n }}</h2>
|
|
<p bitTypography="body1">
|
|
{{ "selfHostingEnterpriseOrganizationSectionCopy" | i18n }}
|
|
<a
|
|
href="https://bitwarden.com/help/licensing-on-premise/#retrieve-organization-license"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
appA11yTitle="{{ 'learnMore' | i18n }}"
|
|
>
|
|
<i class="bwi bwi-question-circle" aria-hidden="true"></i
|
|
></a>
|
|
</p>
|
|
<div class="tw-flex tw-space-x-2">
|
|
<button
|
|
bitButton
|
|
buttonType="secondary"
|
|
type="button"
|
|
(click)="downloadLicense()"
|
|
*ngIf="canDownloadLicense"
|
|
[disabled]="showDownloadLicense"
|
|
>
|
|
{{ "downloadLicense" | i18n }}
|
|
</button>
|
|
<button
|
|
bitButton
|
|
buttonType="secondary"
|
|
type="button"
|
|
(click)="manageBillingSync()"
|
|
*ngIf="canManageBillingSync"
|
|
>
|
|
{{ (hasBillingSyncToken ? "manageBillingSync" : "setUpBillingSync") | i18n }}
|
|
</button>
|
|
</div>
|
|
<ng-container *ngIf="userOrg.canEditSubscription">
|
|
<h2 bitTypography="h2" class="tw-mt-7">{{ "additionalOptions" | i18n }}</h2>
|
|
<p bitTypography="body1">
|
|
{{ "additionalOptionsDesc" | i18n }}
|
|
</p>
|
|
<div class="tw-flex tw-space-x-2">
|
|
<button
|
|
bitButton
|
|
buttonType="danger"
|
|
(click)="cancelSubscription()"
|
|
type="button"
|
|
*ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel"
|
|
>
|
|
{{ "cancelSubscription" | i18n }}
|
|
</button>
|
|
</div>
|
|
</ng-container>
|
|
</ng-container>
|
|
</bit-container>
|
|
<bit-container *ngIf="isManagedByConsolidatedBillingMSP">
|
|
<div
|
|
class="tw-mx-auto tw-flex tw-flex-col tw-items-center tw-justify-center tw-pt-24 tw-text-center tw-font-bold"
|
|
>
|
|
<bit-icon [icon]="manageBillingFromProviderPortal"></bit-icon>
|
|
<ng-container slot="description">{{
|
|
"manageBillingFromProviderPortalMessage" | i18n
|
|
}}</ng-container>
|
|
</div>
|
|
</bit-container>
|