Set up skip button delay

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

@@ -1,5 +1,14 @@
-import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Inject,
+  OnInit
+} from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import ms from 'ms';
+import { interval, Subject } from 'rxjs';
+import { take, takeUntil, tap } from 'rxjs/operators';
 
 import { SubscriptionInterstitialDialogParams } from './interfaces/interfaces';
 
@@ -11,20 +20,47 @@ import { SubscriptionInterstitialDialogParams } from './interfaces/interfaces';
   templateUrl: 'subscription-interstitial-dialog.html',
   standalone: false
 })
-export class SubscriptionInterstitialDialog {
-  private readonly VARIANTS_COUNT = 2;
+export class SubscriptionInterstitialDialog implements OnInit {
+  private static readonly SKIP_BUTTON_DELAY_IN_SECONDS = 5;
+  private static readonly VARIANTS_COUNT = 2;
 
+  public remainingSkipButtonDelay =
+    SubscriptionInterstitialDialog.SKIP_BUTTON_DELAY_IN_SECONDS;
   public routerLinkPricing = ['/' + $localize`:snake-case:pricing`];
   public variantIndex: number;
 
+  private unsubscribeSubject = new Subject<void>();
+
   public constructor(
+    private changeDetectorRef: ChangeDetectorRef,
     @Inject(MAT_DIALOG_DATA) public data: SubscriptionInterstitialDialogParams,
     public dialogRef: MatDialogRef<SubscriptionInterstitialDialog>
   ) {
-    this.variantIndex = Math.floor(Math.random() * this.VARIANTS_COUNT);
+    this.variantIndex = Math.floor(
+      Math.random() * SubscriptionInterstitialDialog.VARIANTS_COUNT
+    );
+  }
+
+  public ngOnInit() {
+    interval(ms('1 second'))
+      .pipe(
+        take(SubscriptionInterstitialDialog.SKIP_BUTTON_DELAY_IN_SECONDS),
+        tap(() => {
+          this.remainingSkipButtonDelay--;
+
+          this.changeDetectorRef.markForCheck();
+        }),
+        takeUntil(this.unsubscribeSubject)
+      )
+      .subscribe();
   }
 
   public closeDialog() {
     this.dialogRef.close({});
   }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
 }

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

@@ -51,7 +51,16 @@
       </div>
     </div>
     <div class="justify-content-end" mat-dialog-actions>
-      <button i18n mat-button (click)="closeDialog()">Skip</button>
+      <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
@@ -80,8 +89,16 @@
       </div>
     </div>
     <div class="flex-column" mat-dialog-actions>
-      <button class="mb-2 py-4 w-100" i18n mat-button (click)="closeDialog()">
-        Skip
+      <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"

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

@@ -121,6 +121,7 @@ export class UserService extends ObservableStore<UserStoreState> {
             data: {
               user
             } as SubscriptionInterstitialDialogParams,
+            disableClose: true,
             height: this.deviceType === 'mobile' ? '98vh' : '80vh',
             width: this.deviceType === 'mobile' ? '100vw' : '50rem'
           });