Feature/extend variations of subscription interstitials (#5486)

* Extend variations of subscription interstitials

* Update changelog

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Extended the variations of the interstitials for the subscription
 - Refactored the markets page to standalone
 - Refactored the header component to standalone
 - Refactored the rule component to standalone

apps/api/src/app/user/user.service.ts

@@ -184,6 +184,7 @@ export class UserService {
     userWhereUniqueInput: Prisma.UserWhereUniqueInput
   ): Promise<UserWithSettings | null> {
     const {
+      _count,
       accessesGet,
       accessToken,
       accounts,
@@ -199,6 +200,11 @@ export class UserService {
       updatedAt
     } = await this.prismaService.user.findUnique({
       include: {
+        _count: {
+          select: {
+            activities: true
+          }
+        },
         accessesGet: true,
         accounts: {
           include: { platform: true }
@@ -210,6 +216,8 @@ export class UserService {
       where: userWhereUniqueInput
     });
 
+    const activitiesCount = _count?.activities ?? 0;
+
     const user: UserWithSettings = {
       accessesGet,
       accessToken,
@@ -404,13 +412,13 @@ export class UserService {
         );
         let frequency = 7;
 
-        if (daysSinceRegistration > 720) {
+        if (activitiesCount > 1000 || daysSinceRegistration > 720) {
           frequency = 1;
-        } else if (daysSinceRegistration > 360) {
+        } else if (activitiesCount > 750 || daysSinceRegistration > 360) {
           frequency = 2;
-        } else if (daysSinceRegistration > 180) {
+        } else if (activitiesCount > 500 || daysSinceRegistration > 180) {
           frequency = 3;
-        } else if (daysSinceRegistration > 60) {
+        } else if (activitiesCount > 250 || daysSinceRegistration > 60) {
           frequency = 4;
         } else if (daysSinceRegistration > 30) {
           frequency = 5;

apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.component.ts

@@ -26,7 +26,7 @@ import { SubscriptionInterstitialDialogParams } from './interfaces/interfaces';
 })
 export class SubscriptionInterstitialDialog implements OnInit {
   private static readonly SKIP_BUTTON_DELAY_IN_SECONDS = 5;
-  private static readonly VARIANTS_COUNT = 2;
+  private static readonly VARIANTS_COUNT = 4;
 
   public remainingSkipButtonDelay =
     SubscriptionInterstitialDialog.SKIP_BUTTON_DELAY_IN_SECONDS;

apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.html

@@ -73,6 +73,89 @@
     </div>
   }
   @case (1) {
+    <div class="flex-grow-1 pt-0" mat-dialog-content>
+      <div class="intro-container">
+        <div class="intro-inner-container mx-auto">
+          <div class="h-100 intro w-100"></div>
+        </div>
+      </div>
+      <div>
+        <div class="font-weight-normal h5 text-center" i18n>
+          Get access to 80’000+ tickers from over 50 exchanges
+        </div>
+        <p class="my-2 text-center" i18n>with</p>
+        <h5 class="align-items-center d-flex justify-content-center">
+          <span>Ghostfolio Premium</span>
+          <gf-premium-indicator class="ml-1" [enableLink]="false" />
+        </h5>
+      </div>
+    </div>
+    <div class="justify-content-end" mat-dialog-actions>
+      <button
+        mat-button
+        [disabled]="remainingSkipButtonDelay > 0"
+        (click)="closeDialog()"
+      >
+        <ng-container i18n>Skip</ng-container>
+        @if (remainingSkipButtonDelay > 0) {
+          ({{ remainingSkipButtonDelay }})
+        }
+      </button>
+      <a
+        color="primary"
+        mat-flat-button
+        [routerLink]="routerLinkPricing"
+        (click)="closeDialog()"
+      >
+        <span i18n>Upgrade Plan</span>
+        <ion-icon class="ml-1" name="arrow-forward-outline" />
+      </a>
+    </div>
+  }
+  @case (2) {
+    <div class="flex-grow-1 pt-0" mat-dialog-content>
+      <div class="intro-container">
+        <div class="intro-inner-container mx-auto">
+          <div class="h-100 intro w-100"></div>
+        </div>
+      </div>
+      <div>
+        <h5 class="align-items-center d-flex justify-content-center">
+          <span>Ghostfolio Premium</span>
+          <gf-premium-indicator class="ml-1" [enableLink]="false" />
+        </h5>
+        <p class="my-2 text-center" i18n>for</p>
+        <div class="font-weight-normal h5 text-center">
+          <ng-container i18n>less than</ng-container> $1
+          <ng-container i18n>per week</ng-container>
+        </div>
+      </div>
+    </div>
+    <div class="flex-column" mat-dialog-actions>
+      <button
+        class="mb-2 py-4 w-100"
+        mat-button
+        [disabled]="remainingSkipButtonDelay > 0"
+        (click)="closeDialog()"
+      >
+        <ng-container i18n>Skip</ng-container>
+        @if (remainingSkipButtonDelay > 0) {
+          ({{ remainingSkipButtonDelay }})
+        }
+      </button>
+      <a
+        class="m-0 py-4 w-100"
+        color="primary"
+        mat-flat-button
+        [routerLink]="routerLinkPricing"
+        (click)="closeDialog()"
+      >
+        <span i18n>Upgrade Plan</span>
+        <ion-icon class="ml-1" name="arrow-forward-outline" />
+      </a>
+    </div>
+  }
+  @case (3) {
     <h1
       class="align-items-center d-flex justify-content-center"
       mat-dialog-title