check min read time before page complete

src/app/models/blog.model.ts

@@ -7,7 +7,7 @@ export interface BlogPost {
     images: PostImage[];
     content: BlogContent[];
     tags: string[];
-    status: 'published' | 'draft';
+    status: 'published' | 'beta' | 'draft';
     publish_date: Date;
     created_on: Date;
 }

src/app/models/content.model.ts

@@ -51,7 +51,7 @@ export interface FormContent {
 }
 
 export type InputDefinition = SelectList | Textarea;
-export type InputValue = string[] | string | boolean | undefined;
+export type InputValue = string[] | string | number | boolean | undefined;
 
 interface SelectList {
     type: 'select';

src/app/models/page.model.ts

@@ -6,19 +6,20 @@ export interface Page {
     slug: string;
     hero_section: HeroSection,
     content: PageContent[];
-    sidebar: {
+    sidebar?: {
         title: string;
         content: string;
     },
-    seo_metadata: {
+    seo_metadata?: {
         meta_title: string;
         meta_description: string;
         focus_keywords: string;
     },
     footer_override: string;
     publish_date: Date;
     last_updated: Date;
-    is_published: boolean;
+    status: 'published' | 'beta' | 'draft';
+    min_read_time: number;
 }
 
 export interface HeroSection {

src/app/pages/page/page.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, inject } from '@angular/core';
+import { Component, inject, isDevMode } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, RouterModule } from '@angular/router';
 import { MatButtonModule } from '@angular/material/button';
@@ -11,7 +11,7 @@ import { ImageSliderComponent } from '../../components/image-slider/image-slider
 import { InputSectionComponent } from '../../components/input-section/input-section.component';
 import { ContinueEventArgs, InputStepperComponent } from '../../components/input-stepper/input-stepper.component';
 import { GuideService } from '../../services/guide.service';
-import { UserDataService, pageDoneKey } from '../../services/user-data.service';
+import { UserDataService, pageReadTime } from '../../services/user-data.service';
 import { SafeUrlPipe } from '../../pipes/safe-url.pipe';
 import { MarkedPipe } from '../../pipes/marked.pipe';
 import { PageContent } from '../../models/page.model';
@@ -40,8 +40,10 @@ import { InputValue } from '../../models/content.model';
     animations: [ expandTrigger('next') ],
 })
 export class PageComponent {
-    private readonly _route = inject(ActivatedRoute);
+    private _route = inject(ActivatedRoute);
     readonly unitIndex = +this._route.snapshot.params['unit'];
+    private _startTime!: number;
+    private _minReadTime!: number;
 
     private _step = 0;
     continue!: (args: ContinueEventArgs) => void;
@@ -69,7 +71,11 @@ export class PageComponent {
             });
         }),
         tap(page => this.continue = this.initBreakpoints(page.content, page.slug)),
-        tap(page => document.title = page.title + " | Why App")
+        tap(page => document.title = page.title + " | Why App"),
+        tap(page => {
+            this._startTime = Date.now();
+            this._minReadTime = !isDevMode() ? page.min_read_time : .1;
+        })
     );
 
     private initBreakpoints(content: PageContent[], pageId: string) {
@@ -97,12 +103,15 @@ export class PageComponent {
     }
 
     complete(data: Record<string, InputValue>) {
-        this.continue({ 
-            completed: true, 
-            data: {
-                ...data,
-                [pageDoneKey]: true
-            } 
-        });
+        const elapsedTime = Date.now() - this._startTime;        
+        if (elapsedTime > this._minReadTime * 60 * 1000) {
+            this.continue({ 
+                completed: true, 
+                data: {
+                    ...data,
+                    [pageReadTime]: elapsedTime
+                } 
+            });
+        }
     }
 }

src/app/services/user-data.service.ts

@@ -1,7 +1,7 @@
 import { Injectable, Signal, computed, signal } from '@angular/core';
 
 export const localKey = 'user-data';
-export const pageDoneKey = '__page-done';
+export const pageReadTime = '__page-read-in';
 
 function startDownload(url: string, filename: string) {
     const link = document.createElement('a');