Task/refactor subscription interstitial dialog component to standalone (#5487)

* Refactor subscription interstitial dialog component to standalone

* Update changelog

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Refactored the header component to standalone
 - Refactored the rule component to standalone
 - Refactored the rules component to standalone
+- Refactored the subscription interstitial dialog component to standalone
 
 ## 2.197.0 - 2025-09-07
 

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

@@ -31,7 +31,6 @@ import { DateFormats } from './adapter/date-formats';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { GfHeaderComponent } from './components/header/header.component';
-import { GfSubscriptionInterstitialDialogModule } from './components/subscription-interstitial-dialog/subscription-interstitial-dialog.module';
 import { authInterceptorProviders } from './core/auth.interceptor';
 import { httpResponseInterceptorProviders } from './core/http-response.interceptor';
 import { LanguageService } from './core/language.service';
@@ -51,7 +50,6 @@ export function NgxStripeFactory(): string {
     GfHeaderComponent,
     GfLogoComponent,
     GfNotificationModule,
-    GfSubscriptionInterstitialDialogModule,
     IonIcon,
     MatAutocompleteModule,
     MatChipsModule,

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

@@ -1,13 +1,24 @@
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
+import { GfMembershipCardComponent } from '@ghostfolio/ui/membership-card';
+import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  CUSTOM_ELEMENTS_SCHEMA,
   Inject,
   OnInit
 } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef
+} from '@angular/material/dialog';
+import { RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import { arrowForwardOutline, checkmarkCircleOutline } from 'ionicons/icons';
 import ms from 'ms';
@@ -19,17 +30,26 @@ import { SubscriptionInterstitialDialogParams } from './interfaces/interfaces';
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'd-flex flex-column flex-grow-1 h-100' },
+  imports: [
+    CommonModule,
+    GfMembershipCardComponent,
+    GfPremiumIndicatorComponent,
+    IonIcon,
+    MatButtonModule,
+    MatDialogModule,
+    RouterModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-subscription-interstitial-dialog',
   styleUrls: ['./subscription-interstitial-dialog.scss'],
-  templateUrl: 'subscription-interstitial-dialog.html',
+  templateUrl: 'subscription-interstitial-dialog.html'
-  standalone: false
 })
-export class SubscriptionInterstitialDialog implements OnInit {
+export class GfSubscriptionInterstitialDialogComponent implements OnInit {
   private static readonly SKIP_BUTTON_DELAY_IN_SECONDS = 5;
   private static readonly VARIANTS_COUNT = 4;
 
   public remainingSkipButtonDelay =
-    SubscriptionInterstitialDialog.SKIP_BUTTON_DELAY_IN_SECONDS;
+    GfSubscriptionInterstitialDialogComponent.SKIP_BUTTON_DELAY_IN_SECONDS;
   public routerLinkPricing = publicRoutes.pricing.routerLink;
   public variantIndex: number;
 
@@ -38,10 +58,10 @@ export class SubscriptionInterstitialDialog implements OnInit {
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
     @Inject(MAT_DIALOG_DATA) public data: SubscriptionInterstitialDialogParams,
-    public dialogRef: MatDialogRef<SubscriptionInterstitialDialog>
+    public dialogRef: MatDialogRef<GfSubscriptionInterstitialDialogComponent>
   ) {
     this.variantIndex = Math.floor(
-      Math.random() * SubscriptionInterstitialDialog.VARIANTS_COUNT
+      Math.random() * GfSubscriptionInterstitialDialogComponent.VARIANTS_COUNT
     );
 
     addIcons({ arrowForwardOutline, checkmarkCircleOutline });
@@ -50,7 +70,9 @@ export class SubscriptionInterstitialDialog implements OnInit {
   public ngOnInit() {
     interval(ms('1 second'))
       .pipe(
-        take(SubscriptionInterstitialDialog.SKIP_BUTTON_DELAY_IN_SECONDS),
+        take(
+          GfSubscriptionInterstitialDialogComponent.SKIP_BUTTON_DELAY_IN_SECONDS
+        ),
         tap(() => {
           this.remainingSkipButtonDelay--;
 

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

@@ -1,26 +0,0 @@
-import { GfMembershipCardComponent } from '@ghostfolio/ui/membership-card';
-import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
-
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatDialogModule } from '@angular/material/dialog';
-import { RouterModule } from '@angular/router';
-import { IonIcon } from '@ionic/angular/standalone';
-
-import { SubscriptionInterstitialDialog } from './subscription-interstitial-dialog.component';
-
-@NgModule({
-  declarations: [SubscriptionInterstitialDialog],
-  imports: [
-    CommonModule,
-    GfMembershipCardComponent,
-    GfPremiumIndicatorComponent,
-    IonIcon,
-    MatButtonModule,
-    MatDialogModule,
-    RouterModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfSubscriptionInterstitialDialogModule {}

apps/client/src/app/services/user/user.service.ts

@@ -12,7 +12,7 @@ import { throwError } from 'rxjs';
 import { catchError, map, takeUntil } from 'rxjs/operators';
 
 import { SubscriptionInterstitialDialogParams } from '../../components/subscription-interstitial-dialog/interfaces/interfaces';
-import { SubscriptionInterstitialDialog } from '../../components/subscription-interstitial-dialog/subscription-interstitial-dialog.component';
+import { GfSubscriptionInterstitialDialogComponent } from '../../components/subscription-interstitial-dialog/subscription-interstitial-dialog.component';
 import { UserStoreActions } from './user-store.actions';
 import { UserStoreState } from './user-store.state';
 
@@ -116,15 +116,18 @@ export class UserService extends ObservableStore<UserStoreState> {
             permissions.enableSubscriptionInterstitial
           )
         ) {
-          const dialogRef = this.dialog.open(SubscriptionInterstitialDialog, {
+          const dialogRef = this.dialog.open(
-            autoFocus: false,
+            GfSubscriptionInterstitialDialogComponent,
-            data: {
+            {
-              user
+              autoFocus: false,
-            } as SubscriptionInterstitialDialogParams,
+              data: {
-            disableClose: true,
+                user
-            height: this.deviceType === 'mobile' ? '98vh' : '80vh',
+              } as SubscriptionInterstitialDialogParams,
-            width: this.deviceType === 'mobile' ? '100vw' : '50rem'
+              disableClose: true,
-          });
+              height: this.deviceType === 'mobile' ? '98vh' : '80vh',
+              width: this.deviceType === 'mobile' ? '100vw' : '50rem'
+            }
+          );
 
           dialogRef
             .afterClosed()