Feature/setup black friday 2022 deal (#1452)

* Setup Black Friday 2022 deal

* Update changelog

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Added an indicator for excluded accounts in the accounts table
+- Added a blog post: _Black Friday 2022_
 
 ## 1.212.0 - 11.11.2022
 

apps/api/src/app/frontend.middleware.ts

@@ -53,16 +53,12 @@ export class FrontendMiddleware implements NestMiddleware {
   public use(req: Request, res: Response, next: NextFunction) {
     let featureGraphicPath = 'assets/cover.png';
 
-    if (
+    if (req.path.startsWith('/en/blog/2022/08/500-stars-on-github')) {
-      req.path === '/en/blog/2022/08/500-stars-on-github' ||
-      req.path === '/en/blog/2022/08/500-stars-on-github/'
-    ) {
       featureGraphicPath = 'assets/images/blog/500-stars-on-github.jpg';
-    } else if (
+    } else if (req.path.startsWith('/en/blog/2022/10/hacktoberfest-2022')) {
-      req.path === '/en/blog/2022/10/hacktoberfest-2022' ||
-      req.path === '/en/blog/2022/10/hacktoberfest-2022/'
-    ) {
       featureGraphicPath = 'assets/images/blog/hacktoberfest-2022.png';
+    } else if (req.path.startsWith('/en/blog/2022/11/black-friday-2022')) {
+      featureGraphicPath = 'assets/images/blog/black-friday-2022.jpg';
     }
 
     if (

apps/client/src/app/app-routing.module.ts

@@ -102,6 +102,13 @@ const routes: Routes = [
         './pages/blog/2022/10/hacktoberfest-2022/hacktoberfest-2022-page.module'
       ).then((m) => m.Hacktoberfest2022PageModule)
   },
+  {
+    path: 'blog/2022/11/black-friday-2022',
+    loadChildren: () =>
+      import(
+        './pages/blog/2022/11/black-friday-2022/black-friday-2022-page.module'
+      ).then((m) => m.BlackFriday2022PageModule)
+  },
   {
     path: 'demo',
     loadChildren: () =>

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

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
+
+import { BlackFriday2022PageComponent } from './black-friday-2022-page.component';
+
+const routes: Routes = [
+  {
+    canActivate: [AuthGuard],
+    component: BlackFriday2022PageComponent,
+    path: '',
+    title: 'Black Friday 2022'
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class BlackFriday2022RoutingModule {}

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

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

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

@@ -0,0 +1,138 @@
+<div class="blog container">
+  <div class="row">
+    <div class="col-md-8 offset-md-2">
+      <article>
+        <div class="mb-4 text-center">
+          <h1 class="mb-1">Black Friday 2022</h1>
+          <div class="mb-3 text-muted"><small>2022-11-13</small></div>
+          <img
+            alt="Black Friday 2022 Teaser"
+            class="rounded w-100"
+            src="../assets/images/blog/black-friday-2022.jpg"
+            title="Black Friday 2022"
+          />
+        </div>
+        <section class="mb-4">
+          <p>
+            Get {{ discount | percent }} off on our
+            <strong>Ghostfolio Premium</strong>
+            <gf-premium-indicator
+              class="d-inline-block ml-1"
+              [enableLink]="false"
+            ></gf-premium-indicator>
+            annual plan for ambitious investors who need the full picture of
+            their financial assets.
+          </p>
+        </section>
+        <section class="mb-4">
+          <p>
+            <a
+              href="https://ghostfol.io"
+              title="Open Source Wealth Management Software"
+              >Ghostfolio</a
+            >
+            is a modern web application to manage your personal finance. The
+            software presents the current assets (stocks, ETFs,
+            cryptocurrencies, commodities etc.) in real time to make solid,
+            data-driven investment decisions. Check out the numerous
+            <a [routerLink]="['/features']">features</a> to manage your wealth.
+          </p>
+        </section>
+        <section class="mb-4">
+          <p>
+            Snap the limited Black Friday 2022 deal before it’s gone. For
+            detailed information on plans and pricing, please visit our
+            <a [routerLink]="['/pricing']">pricing page</a>.
+          </p>
+          <p class="text-center">
+            <a color="primary" mat-flat-button [routerLink]="['/pricing']"
+              >Get the Deal</a
+            >
+          </p>
+        </section>
+        <section class="mb-4">
+          <ul class="list-inline">
+            <li class="list-inline-item">
+              <span class="badge badge-light">2022</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Black Friday</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Cloud</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Cryptocurrency</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Deal</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">ETF</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Finance</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Fintech</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Ghostfolio</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Ghostfolio Premium</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Hosting</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Investment</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Open Source</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">OSS</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Personal Finance</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Portfolio</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Portfolio Tracker</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Pricing</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">SaaS</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Software</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Stock</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Subscription</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Wealth</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Wealth Management</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Web3</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Web 3.0</span>
+            </li>
+          </ul>
+        </section>
+      </article>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,21 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { RouterModule } from '@angular/router';
+import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
+
+import { BlackFriday2022RoutingModule } from './black-friday-2022-page-routing.module';
+import { BlackFriday2022PageComponent } from './black-friday-2022-page.component';
+
+@NgModule({
+  declarations: [BlackFriday2022PageComponent],
+  imports: [
+    BlackFriday2022RoutingModule,
+    CommonModule,
+    GfPremiumIndicatorModule,
+    MatButtonModule,
+    RouterModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class BlackFriday2022PageModule {}

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

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

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,6 +2,30 @@
   <div class="mb-5 row">
     <div class="col">
       <h3 class="mb-3 text-center" i18n>Blog</h3>
+      <mat-card *ngIf="hasPermissionForSubscription" class="mb-3">
+        <mat-card-content>
+          <div class="container p-0">
+            <div class="flex-nowrap no-gutters row">
+              <a
+                class="d-flex w-100"
+                href="../en/blog/2022/11/black-friday-2022"
+              >
+                <div class="flex-grow-1">
+                  <div class="h6 m-0 text-truncate">Black Friday 2022</div>
+                  <div class="d-flex text-muted">2022-11-13</div>
+                </div>
+                <div class="align-items-center d-flex">
+                  <ion-icon
+                    class="chevron text-muted"
+                    name="chevron-forward-outline"
+                    size="small"
+                  ></ion-icon>
+                </div>
+              </a>
+            </div>
+          </div>
+        </mat-card-content>
+      </mat-card>
       <mat-card class="mb-3">
         <mat-card-content>
           <div class="container p-0">

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;
   }
 

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

@@ -1,3 +1,16 @@
+<div
+  *ngIf="!user || user?.subscription?.type === 'Basic'"
+  class="intro mb-5 py-5"
+>
+  <div class="container">
+    <div class="row">
+      <div class="col">
+        <h1 class="font-weight-bold m-0 text-center">Black Friday Deal</h1>
+      </div>
+    </div>
+  </div>
+</div>
+
 <div class="container">
   <div class="row">
     <div class="col">

apps/client/src/app/pages/pricing/pricing-page.scss

@@ -11,6 +11,20 @@
     }
   }
 
+  .intro {
+    background-color: rgb(var(--dark-primary-text));
+    color: rgba(var(--palette-primary-500), 1);
+
+    h1 {
+      font-size: 4vw;
+      line-height: 1;
+
+      @media (max-width: 575.98px) {
+        font-size: 10vw;
+      }
+    }
+  }
+
   .mat-card {
     &:hover,
     &.active {
@@ -22,4 +36,8 @@
 
 :host-context(.is-dark-theme) {
   color: rgb(var(--light-primary-text));
+
+  .intro {
+    background-color: rgba(var(--light-dividers));
+  }
 }

apps/client/src/assets/sitemap.xml

@@ -6,74 +6,78 @@
             http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
   <url>
     <loc>https://ghostfol.io</loc>
-    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
+    <lastmod>2022-11-10T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/de/blog/2021/07/hallo-ghostfolio</loc>
-    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
+    <lastmod>2022-11-10T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/about</loc>
-    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
+    <lastmod>2022-11-10T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/about/changelog</loc>
-    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
+    <lastmod>2022-11-10T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/blog</loc>
-    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
+    <lastmod>2022-11-10T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/blog/2021/07/hello-ghostfolio</loc>
-    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
+    <lastmod>2022-11-10T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/blog/2022/01/ghostfolio-first-months-in-open-source</loc>
-    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
+    <lastmod>2022-11-10T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/blog/2022/07/ghostfolio-meets-internet-identity</loc>
-    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
+    <lastmod>2022-11-10T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/blog/2022/07/how-do-i-get-my-finances-in-order</loc>
-    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
+    <lastmod>2022-11-10T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/blog/2022/08/500-stars-on-github</loc>
-    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
+    <lastmod>2022-11-10T00:00:00+00:00</lastmod>
   </url>
-    <url>
+  <url>
     <loc>https://ghostfol.io/en/blog/2022/10/hacktoberfest-2022</loc>
-    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
+    <lastmod>2022-11-10T00:00:00+00:00</lastmod>
+  </url>
+  <url>
+    <loc>https://ghostfol.io/en/blog/2022/11/black-friday-2022</loc>
+    <lastmod>2022-11-10T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/demo</loc>
-    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
+    <lastmod>2022-11-10T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/faq</loc>
-    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
+    <lastmod>2022-11-10T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/features</loc>
-    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
+    <lastmod>2022-11-10T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/markets</loc>
-    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
+    <lastmod>2022-11-10T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/pricing</loc>
-    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
+    <lastmod>2022-11-10T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/register</loc>
-    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
+    <lastmod>2022-11-10T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/resources</loc>
-    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
+    <lastmod>2022-11-10T00:00:00+00:00</lastmod>
   </url>
 </urlset>

apps/client/src/styles.scss

@@ -38,11 +38,13 @@ body {
 
   .blog {
     a {
-      color: rgba(var(--palette-primary-500), 1) !important;
+      &:not(.mat-flat-button) {
-      font-weight: 500;
+        color: rgba(var(--palette-primary-500), 1) !important;
+        font-weight: 500;
 
-      &:hover {
+        &:hover {
-        text-decoration: underline;
+          text-decoration: underline;
+        }
       }
     }
   }