adding license agreement modal

Author: alopezo

src/app/app.component.ts

@@ -6,6 +6,8 @@ import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
 import { MenuService } from './services/menu.service';
 import { MatDialog } from '@angular/material/dialog';
 import { LanguageConfigComponent } from './util/language-config/language-config.component';
+import { LicenseAgreementComponent } from './license-agreement/license-agreement.component';
+import { CookieService } from './services/cookie.service';
 import { catchError, of, skip, Subject, switchMap, tap } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 
@@ -55,7 +57,8 @@ export class AppComponent {
     private dialog: MatDialog,
     private cdRef: ChangeDetectorRef,
     private http: HttpClient,
-    private activatedRoute: ActivatedRoute) { 
+    private activatedRoute: ActivatedRoute,
+    private cookieService: CookieService) { 
     this.router.events.subscribe(event => {
       if (event instanceof NavigationEnd) {
         // Send pageview event to Google Analytics on each route change.
@@ -67,6 +70,21 @@ export class AppComponent {
   }
 
   ngOnInit(): void {
+    // Check embedded mode immediately from snapshot
+    const params = this.activatedRoute.snapshot.queryParams;
+    this.embeddedMode = params['embedded'] === 'true';
+    
+    // Wait a moment before checking license to ensure everything is initialized
+    setTimeout(() => {
+      // If in embedded mode, automatically accept license (no modal)
+      if (this.embeddedMode) {
+        this.cookieService.setCookie('snomedLicenseAccepted', 'true', 180);
+      } else {
+        // Check license agreement for normal mode
+        this.checkLicenseAgreement();
+      }
+    }, 500);
+    
     this.demos = this.menuService.getDemos();
     this.bindingsForExport = [];
     let spec: any[] = this.codingSpecService.getCodingSpec();
@@ -134,7 +152,7 @@ export class AppComponent {
       }
       if (params['edition']) {
         this.updateCodeSystemOptions(params['edition']);
-      } 
+      }
     });
 
     this.terminologyService.lang$.subscribe(lang => {
@@ -353,7 +371,33 @@ export class AppComponent {
     });
 
     dialogRef.afterClosed().subscribe((result) => {
-      console.log('Dialog was closed. Result:', result);
+      // Dialog closed
+    });
+  }
+
+  checkLicenseAgreement(): void {
+    const licenseAccepted = this.cookieService.getCookie('snomedLicenseAccepted');
+    
+    if (!licenseAccepted) {
+      this.openLicenseDialog();
+    }
+  }
+
+  openLicenseDialog(): void {
+    const dialogRef = this.dialog.open(LicenseAgreementComponent, {
+      width: '900px',
+      disableClose: true,
+      panelClass: 'license-dialog-container'
+    });
+
+    dialogRef.afterClosed().subscribe((result) => {
+      if (result === true) {
+        // User accepted the license - set cookie for 6 months (180 days)
+        this.cookieService.setCookie('snomedLicenseAccepted', 'true', 180);
+      } else {
+        // User declined - redirect to SNOMED International website
+        window.location.href = 'https://www.snomed.org';
+      }
     });
   }
 

src/app/app.module.ts

@@ -115,6 +115,7 @@ import { InteroperabilityComponent } from './benefits-demo/interoperability/inte
 import { AiAssistedEntryComponent } from './benefits-demo/ai-assisted-entry/ai-assisted-entry.component';
 import { ExpoQuiz2025Component } from './expo-quiz-2025/expo-quiz-2025.component';
 import { BatchPatientDialogComponent } from './benefits-demo/batch-patient-dialog/batch-patient-dialog.component';
+import { LicenseAgreementComponent } from './license-agreement/license-agreement.component';
 
 const app = initializeApp(firebaseConfig);
 
@@ -189,7 +190,8 @@ const app = initializeApp(firebaseConfig);
         InteroperabilityComponent,
         AiAssistedEntryComponent,
         ExpoQuiz2025Component,
-        BatchPatientDialogComponent
+        BatchPatientDialogComponent,
+        LicenseAgreementComponent
     ],
     bootstrap: [AppComponent],
     schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [BrowserModule,

src/app/license-agreement/license-agreement.component.css

@@ -0,0 +1,72 @@
+.license-content {
+  max-width: 800px;
+}
+
+.license-text {
+  height: 350px;
+  overflow: auto;
+  margin: 20px 0;
+  border: 1px solid #ddd;
+  padding: 20px;
+  background-color: #f9f9f9;
+}
+
+.license-text p {
+  margin-bottom: 15px;
+  line-height: 1.6;
+}
+
+.license-text ol {
+  margin-left: 20px;
+  margin-bottom: 15px;
+}
+
+.license-text ol > li {
+  margin-bottom: 10px;
+  line-height: 1.6;
+}
+
+.license-text ol ol {
+  margin-left: 30px;
+  margin-top: 10px;
+}
+
+.license-text a {
+  color: #1976d2;
+  text-decoration: none;
+}
+
+.license-text a:hover {
+  text-decoration: underline;
+}
+
+/* Scrollbar styling */
+.license-text::-webkit-scrollbar {
+  width: 10px;
+}
+
+.license-text::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 5px;
+}
+
+.license-text::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 5px;
+}
+
+.license-text::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+/* Dialog actions */
+mat-dialog-actions {
+  padding: 16px 24px;
+  margin: 0;
+  min-height: auto;
+}
+
+mat-dialog-actions button {
+  margin-left: 8px;
+}
+

src/app/license-agreement/license-agreement.component.html

@@ -0,0 +1,46 @@
+<h2 mat-dialog-title>SNOMED CT Implementation Demonstrator License Agreement</h2>
+
+<div mat-dialog-content class="license-content">
+  <p>In order to use the Implementation Demonstrator, please accept the following license agreement:</p>
+
+  <div class="license-text">
+    <p><strong>Implementation Demonstrator</strong> includes SNOMED Clinical Terms® (SNOMED CT®) which is used by permission of SNOMED International. All rights reserved. SNOMED CT® was originally created by the College of American Pathologists.</p>
+
+    <p>"SNOMED", "SNOMED CT" and "SNOMED Clinical Terms" are registered trademarks of the SNOMED International (<a href="http://www.snomed.org" target="_blank">www.snomed.org</a>).</p>
+
+    <p>Use of SNOMED CT in <strong>Implementation Demonstrator</strong> is governed by the conditions of the following SNOMED CT license issued by the SNOMED International:</p>
+
+    <ol>
+      <li>The meaning of the terms "Affiliate", or "Data Analysis System", "Data Creation System", "Derivative", "End User", "Extension", "Member", "Non-Member Territory", "SNOMED CT" and "SNOMED CT Content" are as defined in the SNOMED International Affiliate License Agreement (see <a href="www.snomed.org/license.pdf" target="_blank">www.snomed.org/license.pdf</a>).</li>
+
+      <li>Information about Affiliate Licensing is available at <a href="http://snomed.org/license-affiliate" target="_blank">http://snomed.org/license-affiliate</a>. Individuals or organizations wishing to register as SNOMED International Affiliates can register at <a href="https://mlds.ihtsdotools.org" target="_blank">mlds.ihtsdotools.org</a>, subject to acceptance of the Affiliate License Agreement (see <a href="http://snomed.org/license-affiliate" target="_blank">http://snomed.org/license-affiliate</a>).</li>
+
+      <li>The current list of SNOMED International Member Territories can be viewed at <a href="http://snomed.org/members" target="_blank">snomed.org/members</a>. Countries not included in that list are "Non-Member Territories".</li>
+
+      <li>
+        End Users, that do not hold an SNOMED International Affiliate License, may access SNOMED CT® using <strong>Implementation Demonstrator</strong> subject to acceptance of and adherence to the following sub-license limitations:
+        <ol type="a">
+          <li>The sub-licensee is only permitted to access SNOMED CT® using this software (or service) for the purpose of exploring and evaluating the terminology.</li>
+          <li>The sub-licensee is not permitted the use of this software as part of a system that constitutes a SNOMED CT "Data Creation System" or "Data Analysis System", as defined in the SNOMED International Affiliate License. This means that the sub-licensee must not use <strong>Implementation Demonstrator</strong> to add or copy SNOMED CT identifiers into any type of record system, database or document.</li>
+          <li>The sub-licensee is not permitted to translate or modify SNOMED CT Content or Derivatives.</li>
+          <li>The sub-licensee is not permitted to distribute or share SNOMED CT Content or Derivatives.</li>
+        </ol>
+      </li>
+
+      <li>
+        SNOMED International Affiliates may use <strong>Implementation Demonstrator</strong> as part of a "Data Creation System" or "Data Analysis System" subject to the following conditions:
+        <ol type="a">
+          <li>The SNOMED International Affiliate, using <strong>Implementation Demonstrator</strong> must accept full responsibility for any reporting and fees due for use or deployment of such a system in a Non-Member Territory.</li>
+          <li>The SNOMED International Affiliate must not use <strong>Implementation Demonstrator</strong> to access or interact with SNOMED CT in any way that is not permitted by the Affiliate License Agreement.</li>
+          <li>In the event of termination of the Affiliate License Agreement, the use of <strong>Implementation Demonstrator</strong> will be subject to the End User limitations noted in 4.</li>
+        </ol>
+      </li>
+    </ol>
+  </div>
+</div>
+
+<div mat-dialog-actions align="end">
+  <button mat-button (click)="onDecline()">Decline</button>
+  <button mat-raised-button color="primary" (click)="onAccept()">Accept</button>
+</div>
+

src/app/license-agreement/license-agreement.component.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-license-agreement',
+  templateUrl: './license-agreement.component.html',
+  styleUrls: ['./license-agreement.component.css'],
+  standalone: false
+})
+export class LicenseAgreementComponent {
+
+  constructor(
+    public dialogRef: MatDialogRef<LicenseAgreementComponent>
+  ) {}
+
+  onAccept(): void {
+    this.dialogRef.close(true);
+  }
+
+  onDecline(): void {
+    this.dialogRef.close(false);
+  }
+}
+

src/app/services/cookie.service.ts

@@ -0,0 +1,48 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CookieService {
+
+  /**
+   * Set a cookie with a given name, value, and expiration days
+   */
+  setCookie(name: string, value: string, days: number): void {
+    const date = new Date();
+    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+    const expires = `expires=${date.toUTCString()}`;
+    document.cookie = `${name}=${value};${expires};path=/`;
+  }
+
+  /**
+   * Get a cookie value by name
+   */
+  getCookie(name: string): string | null {
+    const nameEQ = `${name}=`;
+    const cookies = document.cookie.split(';');
+    
+    for (let cookie of cookies) {
+      cookie = cookie.trim();
+      if (cookie.indexOf(nameEQ) === 0) {
+        return cookie.substring(nameEQ.length);
+      }
+    }
+    return null;
+  }
+
+  /**
+   * Delete a cookie by name
+   */
+  deleteCookie(name: string): void {
+    document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/;`;
+  }
+
+  /**
+   * Check if a cookie exists
+   */
+  hasCookie(name: string): boolean {
+    return this.getCookie(name) !== null;
+  }
+}
+

src/styles.css

@@ -33,4 +33,32 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
       @apply text-blue-500;
       @apply hover:text-blue-700;
     }
-  }
+  }
+
+/* Material Snackbar styles */
+::ng-deep .warning-snackbar {
+  background-color: #ff9800 !important;
+  color: white !important;
+}
+
+::ng-deep .warning-snackbar .mat-simple-snackbar-action {
+  color: white !important;
+}
+
+::ng-deep .error-snackbar {
+  background-color: #f44336 !important;
+  color: white !important;
+}
+
+::ng-deep .error-snackbar .mat-simple-snackbar-action {
+  color: white !important;
+}
+
+::ng-deep .green-snackbar {
+  background-color: #4caf50 !important;
+  color: white !important;
+}
+
+::ng-deep .green-snackbar .mat-simple-snackbar-action {
+  color: white !important;
+}