From 5635532953e611572b2d55383398a7b130491593 Mon Sep 17 00:00:00 2001 From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com> Date: Tue, 9 Sep 2025 20:12:12 +0200 Subject: [PATCH] Task/refactor subscription interstitial dialog component to standalone (#5487) * Refactor subscription interstitial dialog component to standalone * Update changelog --- CHANGELOG.md | 1 + apps/client/src/app/app.module.ts | 2 - ...scription-interstitial-dialog.component.ts | 38 +++++++++++++++---- ...subscription-interstitial-dialog.module.ts | 26 ------------- .../src/app/services/user/user.service.ts | 23 ++++++----- 5 files changed, 44 insertions(+), 46 deletions(-) delete mode 100644 apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.module.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 088f4f19c..15f4902b3 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/apps/client/src/app/app.module.ts b/apps/client/src/app/app.module.ts index 384b83d6c..de52a043d 100644 --- a/apps/client/src/app/app.module.ts +++ b/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, diff --git a/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.component.ts b/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.component.ts index 146e30eff..7a17ec32d 100644 --- a/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.component.ts +++ b/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', - standalone: false + templateUrl: 'subscription-interstitial-dialog.html' }) -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 + public dialogRef: MatDialogRef ) { 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--; diff --git a/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.module.ts b/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.module.ts deleted file mode 100644 index 2f52f1b3c..000000000 --- a/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.module.ts +++ /dev/null @@ -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 {} diff --git a/apps/client/src/app/services/user/user.service.ts b/apps/client/src/app/services/user/user.service.ts index 86b2656d7..f52a52975 100644 --- a/apps/client/src/app/services/user/user.service.ts +++ b/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 { permissions.enableSubscriptionInterstitial ) ) { - const dialogRef = this.dialog.open(SubscriptionInterstitialDialog, { - autoFocus: false, - data: { - user - } as SubscriptionInterstitialDialogParams, - disableClose: true, - height: this.deviceType === 'mobile' ? '98vh' : '80vh', - width: this.deviceType === 'mobile' ? '100vw' : '50rem' - }); + const dialogRef = this.dialog.open( + GfSubscriptionInterstitialDialogComponent, + { + autoFocus: false, + data: { + user + } as SubscriptionInterstitialDialogParams, + disableClose: true, + height: this.deviceType === 'mobile' ? '98vh' : '80vh', + width: this.deviceType === 'mobile' ? '100vw' : '50rem' + } + ); dialogRef .afterClosed()