70 lines
2.5 KiB
HTML
70 lines
2.5 KiB
HTML
<div class="container">
|
|
<h1 class="d-none d-sm-block h3 mb-3 text-center" i18n>Membership</h1>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="d-flex">
|
|
<div class="mx-auto">
|
|
<div class="align-items-center d-flex mb-1">
|
|
<a [routerLink]="routerLinkPricing"
|
|
>{{ user?.subscription?.type }}</a
|
|
>
|
|
<gf-premium-indicator
|
|
*ngIf="user?.subscription?.type === 'Premium'"
|
|
class="ml-1"
|
|
></gf-premium-indicator>
|
|
</div>
|
|
<div *ngIf="user?.subscription?.type === 'Premium'">
|
|
<ng-container i18n>Valid until</ng-container> {{
|
|
user?.subscription?.expiresAt | date: defaultDateFormat }}
|
|
</div>
|
|
<div *ngIf="user?.subscription?.type === 'Basic'">
|
|
<ng-container
|
|
*ngIf="hasPermissionForSubscription && hasPermissionToUpdateUserSettings"
|
|
>
|
|
<button color="primary" mat-flat-button (click)="onCheckout()">
|
|
<ng-container *ngIf="user.subscription.offer === 'default'" i18n
|
|
>Upgrade</ng-container
|
|
>
|
|
<ng-container *ngIf="user.subscription.offer === 'renewal'" i18n
|
|
>Renew</ng-container
|
|
>
|
|
</button>
|
|
<div *ngIf="price" class="mt-1">
|
|
<ng-container *ngIf="coupon"
|
|
><del class="text-muted"
|
|
>{{ baseCurrency }} {{ price }}</del
|
|
> {{ baseCurrency }} {{ price - coupon
|
|
}}</ng-container
|
|
>
|
|
<ng-container *ngIf="!coupon"
|
|
>{{ baseCurrency }} {{ price }}</ng-container
|
|
> <span i18n>per year</span>
|
|
</div>
|
|
</ng-container>
|
|
<a
|
|
*ngIf="!user?.subscription?.expiresAt"
|
|
class="mr-2 my-2"
|
|
mat-stroked-button
|
|
[href]="trySubscriptionMail"
|
|
><span i18n>Try Premium</span>
|
|
<gf-premium-indicator
|
|
class="d-inline-block ml-1"
|
|
[enableLink]="false"
|
|
></gf-premium-indicator
|
|
></a>
|
|
<a
|
|
*ngIf="hasPermissionToUpdateUserSettings"
|
|
class="mr-2 my-2"
|
|
i18n
|
|
mat-stroked-button
|
|
[routerLink]=""
|
|
(click)="onRedeemCoupon()"
|
|
>Redeem Coupon</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|