Calculate discount

apps/client/src/app/pages/blog/2022/11/black-friday-2022/black-friday-2022-page.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { DataService } from '@ghostfolio/client/services/data.service';
 
 @Component({
   host: { class: 'page' },
@@ -6,4 +7,15 @@ import { Component } from '@angular/core';
   styleUrls: ['./black-friday-2022-page.scss'],
   templateUrl: './black-friday-2022-page.html'
 })
-export class BlackFriday2022PageComponent {}
+export class BlackFriday2022PageComponent {
+  public discount: number;
+
+  public constructor(private dataService: DataService) {
+    const { subscriptions } = this.dataService.fetchInfo();
+
+    const coupon = subscriptions?.[0]?.coupon;
+    const price = subscriptions?.[0]?.price;
+
+    this.discount = Math.floor((coupon / price) * 100) / 100;
+  }
+}

apps/client/src/app/pages/blog/2022/11/black-friday-2022/black-friday-2022-page.html

@@ -14,7 +14,8 @@
         </div>
         <section class="mb-4">
           <p>
-            Get 75% off on our <strong>Ghostfolio Premium</strong>
+            Get {{ discount | percent }} off on our
+            <strong>Ghostfolio Premium</strong>
             <gf-premium-indicator
               class="d-inline-block ml-1"
               [enableLink]="false"

apps/client/src/app/pages/blog/blog-page.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnDestroy } from '@angular/core';
+import { DataService } from '@ghostfolio/client/services/data.service';
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { Subject } from 'rxjs';
 
 @Component({
@@ -8,9 +10,18 @@ import { Subject } from 'rxjs';
   templateUrl: './blog-page.html'
 })
 export class BlogPageComponent implements OnDestroy {
+  public hasPermissionForSubscription: boolean;
+
   private unsubscribeSubject = new Subject<void>();
 
-  public constructor() {}
+  public constructor(private dataService: DataService) {
+    const info = this.dataService.fetchInfo();
+
+    this.hasPermissionForSubscription = hasPermission(
+      info?.globalPermissions,
+      permissions.enableSubscription
+    );
+  }
 
   public ngOnDestroy() {
     this.unsubscribeSubject.next();

apps/client/src/app/pages/blog/blog-page.html

@@ -2,7 +2,7 @@
   <div class="mb-5 row">
     <div class="col">
       <h3 class="mb-3 text-center" i18n>Blog</h3>
-      <mat-card class="mb-3">
+      <mat-card *ngIf="hasPermissionForSubscription" class="mb-3">
         <mat-card-content>
           <div class="container p-0">
             <div class="flex-nowrap no-gutters row">

apps/client/src/app/pages/pricing/pricing-page.component.ts

@@ -28,7 +28,7 @@ export class PricingPageComponent implements OnDestroy, OnInit {
     const { baseCurrency, subscriptions } = this.dataService.fetchInfo();
 
     this.baseCurrency = baseCurrency;
-    this.coupon = this.price = subscriptions?.[0]?.coupon;
+    this.coupon = subscriptions?.[0]?.coupon;
     this.price = subscriptions?.[0]?.price;
   }