mirror of https://github.com/Squidex/squidex.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
4.2 KiB
88 lines
4.2 KiB
<sqx-title message="{app} | Plans | Settings" parameter1="app" [value1]="appsState.appName"></sqx-title>
|
|
|
|
<sqx-panel desiredWidth="63rem" [showSidebar]="true">
|
|
<ng-container title>
|
|
Update Plan
|
|
</ng-container>
|
|
|
|
<ng-container menu>
|
|
<button class="btn btn-link btn-secondary" (click)="reload()" title="Refresh Plans (CTRL + SHIFT + R)">
|
|
<i class="icon-reset"></i> Refresh
|
|
</button>
|
|
|
|
<sqx-shortcut keys="ctrl+shift+r" (trigger)="reload()"></sqx-shortcut>
|
|
</ng-container>
|
|
|
|
<ng-container content>
|
|
<ng-container *ngIf="plansState.isLoaded | async">
|
|
<ng-container *ngIf="plansState.plans | async; let plans">
|
|
<div class="panel-alert panel-alert-danger" *ngIf="(plansState.isOwner | async) === false">
|
|
You have not created the subscription. Therefore you cannot change the plan.
|
|
</div>
|
|
|
|
<div class="text-muted text-center empty" *ngIf="plans.length === 0">
|
|
No plan configured, this app has unlimited usage.
|
|
</div>
|
|
|
|
<div class="clearfix">
|
|
<div class="card plan float-left" *ngFor="let planInfo of plans; trackBy: trackByPlan">
|
|
<div class="card-header text-center">
|
|
<h4 class="card-title">{{planInfo.plan.name}}</h4>
|
|
<h5 class="plan-price">{{planInfo.plan.costs}}</h5>
|
|
|
|
<small class="text-muted">Per Month</small>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="plan-fact text-center">
|
|
<div>
|
|
<strong>{{planInfo.plan.maxApiCalls | sqxKNumber}}</strong> API Calls
|
|
</div>
|
|
<div>
|
|
{{planInfo.plan.maxAssetSize | sqxFileSize}} Storage
|
|
</div>
|
|
<div>
|
|
{{planInfo.plan.maxContributors}} Contributors
|
|
</div>
|
|
</div>
|
|
|
|
<button *ngIf="planInfo.isSelected" class="btn btn-block btn-link btn-success plan-selected">
|
|
✓ Selected
|
|
</button>
|
|
|
|
<button *ngIf="!planInfo.isSelected" class="btn btn-block btn-success" [disabled]="plansState.isDisabled | async" (click)="change(planInfo.plan.id)">
|
|
Change
|
|
</button>
|
|
</div>
|
|
<div class="card-footer" *ngIf="planInfo.plan.yearlyId">
|
|
<div class="text-center">
|
|
<h5 class="plan-price">{{planInfo.plan.yearlyCosts}}</h5>
|
|
|
|
<small class="text-muted">Per Year</small>
|
|
</div>
|
|
|
|
<button *ngIf="planInfo.isYearlySelected" class="btn btn-block btn-link btn-success plan-selected">
|
|
✓ Selected
|
|
</button>
|
|
|
|
<button *ngIf="!planInfo.isYearlySelected" class="btn btn-block btn-success" [disabled]="plansState.isDisabled | async" (click)="change(planInfo.plan.yearlyId)">
|
|
Change
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="plansState.hasPortal | async" class="billing-portal-link">
|
|
Go to <a target="_blank" rel="noopener" href="{{portalUrl}}">Billing Portal</a> for payment history and subscription overview.
|
|
</div>
|
|
</ng-container>
|
|
</ng-container>
|
|
</ng-container>
|
|
|
|
<ng-container sidebar>
|
|
<a class="panel-link" routerLink="help" routerLinkActive="active">
|
|
<i class="icon-help"></i>
|
|
</a>
|
|
</ng-container>
|
|
</sqx-panel>
|
|
|
|
<router-outlet></router-outlet>
|
|
|