Merge pull request #7178 from ORNL-AMO/issue-7106-154

Issue 7106 - User Survey toast, modal, feedback page

src/app/core/core.component.html

@@ -15,3 +15,6 @@
 (emitModalClosed)="closeNoticeModal($event)"></app-security-and-privacy-modal>
 <app-email-measur-data-modal *ngIf="showEmailMeasurDataModal === true" 
 (emitModalClosed)="closeEmailModal($event)"></app-email-measur-data-modal>
+<app-survey-modal *ngIf="showSurveyModal"></app-survey-modal>
+
+<app-survey-toast *ngIf="showSurveyToast" (emitCloseToast)="hideSurveyToast()"></app-survey-toast>

src/app/core/core.component.ts

@@ -17,6 +17,7 @@ import { AppErrorService } from '../shared/errors/app-error.service';
 import { AutomaticBackupService } from '../electron/automatic-backup.service';
 import { ApplicationInstanceData, ApplicationInstanceDbService } from '../indexedDb/application-instance-db.service';
 import { ImportBackupModalService } from '../shared/import-backup-modal/import-backup-modal.service';
+import { MeasurSurveyService } from '../shared/measur-survey/measur-survey.service';
 
 @Component({
   selector: 'app-core',
@@ -55,6 +56,10 @@ export class CoreComponent implements OnInit {
   showImportBackupModal: boolean;
   pwaUpdateAvailableSubscription: Subscription;
   applicationInstanceDataSubscription: Subscription;
+  showSurveyModalSub: Subscription;
+  showSurveyModal: boolean;
+
+  showSurveyToast: boolean;
 
   constructor(private electronService: ElectronService,
     private assessmentService: AssessmentService,
@@ -73,6 +78,7 @@ export class CoreComponent implements OnInit {
     private applicationInstanceDbService: ApplicationInstanceDbService,
     private importBackupModalService: ImportBackupModalService,
     private sqlDbApiService: SqlDbApiService,
+    private measurSurveyService: MeasurSurveyService,
     private inventoryDbService: InventoryDbService) {
   }
 
@@ -97,10 +103,20 @@ export class CoreComponent implements OnInit {
       });
     }
 
-    this.applicationInstanceDataSubscription = this.applicationInstanceDbService.applicationInstanceData.subscribe(applicationData => {
-        if (!this.automaticBackupService.observableDataChanges && applicationData?.isAutomaticBackupOn) {
+    this.applicationInstanceDataSubscription = this.applicationInstanceDbService.applicationInstanceData.subscribe((applicationData: ApplicationInstanceData) => {
+      if (applicationData) {
+          this.setAppOpenNotifications(applicationData);
+        if (!this.automaticBackupService.observableDataChanges && applicationData.isAutomaticBackupOn) {
           this.automaticBackupService.subscribeToDataChanges();
         }
+      }
+    });
+
+    this.showSurveyModalSub = this.measurSurveyService.showSurveyModal.subscribe(val => {
+      this.showSurveyModal = val;
+      if (this.showSurveyModal) {
+        this.setSurveyDone();
+      }
     });
 
     this.assessmentUpdateAvailableSub = this.assessmentService.updateAvailable.subscribe(val => {
@@ -153,6 +169,7 @@ export class CoreComponent implements OnInit {
     this.showEmailMeasurDataModalSub.unsubscribe();
     this.showImportBackupModalSubscription.unsubscribe();
     this.pwaUpdateAvailableSubscription.unsubscribe();
+    this.showSurveyModalSub.unsubscribe();
   }
 
   async initData() {
@@ -174,6 +191,31 @@ export class CoreComponent implements OnInit {
 
   }
 
+  async setAppOpenNotifications(applicationData: ApplicationInstanceData) {
+    if (!applicationData.isSurveyDone) {
+      if (applicationData.doSurveyReminder) {
+        setTimeout(() => {
+          this.measurSurveyService.showSurveyModal.next(true);
+        }, 5000);
+        await firstValueFrom(this.applicationInstanceDbService.setSurveyDone());
+      } else {
+        let hasMetUsageRequirement = await this.measurSurveyService.getHasMetUsageRequirements(applicationData);
+        let showModalToExistingUser = await this.measurSurveyService.checkIsExistingUser();
+        let showModal = showModalToExistingUser || hasMetUsageRequirement;
+
+        setTimeout(() => {
+          this.measurSurveyService.showSurveyModal.next(showModal);
+        }, 5000);
+
+        if (!applicationData.isSurveyToastDone && !showModalToExistingUser) {
+          setTimeout(() => {
+            this.showSurveyToast = true;
+          }, 5000);
+        }
+      }
+    }
+  }
+
   async getIsFirstStartup() {
     let existingDirectories: number = await firstValueFrom(this.directoryDbService.count());
     return existingDirectories === 0;
@@ -199,6 +241,21 @@ export class CoreComponent implements OnInit {
       });
   }
 
+  async hideSurveyToast() {
+    this.setSurveyToastDone();
+  }  
+
+  async setSurveyToastDone() {
+    this.showSurveyToast = false;
+    let appData = await firstValueFrom(this.applicationInstanceDbService.setSurveyToastDone());
+    this.applicationInstanceDbService.applicationInstanceData.next(appData);
+  }
+
+  async setSurveyDone() {
+    let appData = await firstValueFrom(this.applicationInstanceDbService.setSurveyDone());
+    this.applicationInstanceDbService.applicationInstanceData.next(appData);
+  }
+
   hideToast() {
     this.showToast = false;
     this.toastData = {

src/app/core/core.module.ts

@@ -39,6 +39,8 @@ import { BrowsingDataToastModule } from '../shared/browsing-data-toast/browsing-
 import { PumpInventoryModule } from '../pump-inventory/pump-inventory.module';
 import { EmailMeasurDataModule } from '../shared/email-measur-data/email-measur-data.module';
 import { ImportBackupModalModule } from '../shared/import-backup-modal/import-backup-modal.module';
+import { SurveyToastModule } from '../shared/survey-toast/survey-toast.module';
+import { MeasurSurveyModule } from '../shared/measur-survey/measur-survey.module';
 
 @NgModule({
   declarations: [
@@ -79,7 +81,9 @@ import { ImportBackupModalModule } from '../shared/import-backup-modal/import-ba
     BrowsingDataToastModule,
     AnalyticsModule,
     EmailMeasurDataModule,
-    ImportBackupModalModule
+    ImportBackupModalModule,
+    SurveyToastModule,
+    MeasurSurveyModule
   ],
   providers: [
     AssessmentService,

src/app/core/core.service.ts

@@ -71,7 +71,11 @@ export class CoreService {
     let newInstanceData: ApplicationInstanceData = {
       dataBackupFilePath: undefined,
       createVersionedBackups: false,
+      isSurveyToastDone: false,
+      isSurveyDone: false,
       isAutomaticBackupOn: false,
+      doSurveyReminder: false,
+      appOpenCount: 0,
       createdDate: new Date(),
       modifiedDate: new Date(),
     };
@@ -84,6 +88,11 @@ export class CoreService {
     if (existingApplicationData.length === 0) {
       await this.setNewApplicationInstanceData();
     } else {
+      if (existingApplicationData[0].appOpenCount === undefined) {
+        existingApplicationData[0].appOpenCount = 0;
+      }
+      existingApplicationData[0].appOpenCount++;
+      await firstValueFrom(this.applicationDataService.updateWithObservable(existingApplicationData[0]));
       this.applicationDataService.applicationInstanceData.next(existingApplicationData[0]);
     }
   }

src/app/dashboard/contact-page/contact-page.component.css

@@ -9,4 +9,8 @@ a:not([href]):not([tabindex]) {
     text-decoration: none;
     background-color: transparent;
     -webkit-text-decoration-skip: objects;
+}
+
+.card-text-small {
+    font-size: 16px;
 }

src/app/dashboard/contact-page/contact-page.component.html

@@ -1,23 +1,22 @@
 <div class="col-10  mx-auto">
   <div class="content-container p-0 border-0">
+
+    <div class="card-header bold">
+      Bug Reporting
+    </div>
     <div class="card">
-      <div class="card-header bold">
-        Feedback
-      </div>
       <div class="card-body">
-        <p>
-          We are always looking to improve MEASUR and get feedback on accuracy, usability, presentation or new
-          features.
-          Please take our survey on Survey Monkey: <a href="https://www.surveymonkey.com/r/DOE-AMO-TOOLS"
-            target="_blank">https://www.surveymonkey.com/r/DOE-AMO-TOOLS</a>. Thank you for your feedback!
-        </p>
-      </div>
-      <div class="card-header bold">
-        Bug Reporting
+        <app-error-reporting class="card-text-small"></app-error-reporting>
       </div>
     </div>
-    <div class="card-body">
-      <app-error-reporting></app-error-reporting>
+
+    <div class="card-header bold">
+      Feedback
+    </div>
+    <div class="card">
+      <div class="card-body">
+        <app-experience-survey></app-experience-survey>
+      </div>
     </div>
   </div>
 </div>

src/app/dashboard/dashboard.module.ts

@@ -26,6 +26,7 @@ import { SecurityAndPrivacyModule } from '../shared/security-and-privacy/securit
 import { CreateAssessmentModalModule } from '../shared/create-assessment-modal/create-assessment-modal.module';
 import { AppErrorModule } from '../shared/errors/app-error.module';
 import { DataAndBackupComponent } from './data-and-backup/data-and-backup.component';
+import { MeasurSurveyModule } from '../shared/measur-survey/measur-survey.module';
 
 @NgModule({
   declarations: [
@@ -55,7 +56,8 @@ import { DataAndBackupComponent } from './data-and-backup/data-and-backup.compon
     ToastModule,
     SecurityAndPrivacyModule,
     CreateAssessmentModalModule,
-    AppErrorModule
+    AppErrorModule,
+    MeasurSurveyModule
   ],
   providers: [
     DashboardService,

src/app/dashboard/sidebar/sidebar.component.css

@@ -78,4 +78,9 @@ a.list-group-item.active:hover{
 
 /* .nav-link.dropdown-toggle:hover, .nav-btn:hover{
     background-color: #808B96;
-} */
+} */
+
+.info-icon {
+    font-size: 22px;
+    color: #156739;
+}

src/app/dashboard/sidebar/sidebar.component.html

@@ -40,9 +40,16 @@
     </div>
   </div>
 
+  <div class="sidebar-group secondary" *ngIf="showSurveyLink">
+    <span routerLinkActive="selected" class="sidebar-item" (click)="showSurvey()">
+      <span class="fa fa-info-circle mr-1 info-icon"></span>
+      MEASUR Survey 
+    </span>
+  </div>
+
   <div class="sidebar-group secondary" (click)="navigateWithSidebarOptions('/landing-screen')">
     <span class="sidebar-item" [routerLink]="['/landing-screen']" routerLinkActive="selected">Home</span>
-</div>
+  </div>
 
 <div class="sidebar-group secondary pl-1 scroll-item">
   <app-directory-item [directory]="rootDirectory"></app-directory-item>

src/app/dashboard/sidebar/sidebar.component.ts

@@ -5,9 +5,10 @@ import { Subscription } from 'rxjs';
 import { DirectoryDbService } from '../../indexedDb/directory-db.service';
 import { DirectoryDashboardService } from '../directory-dashboard/directory-dashboard.service';
 import { DashboardService } from '../dashboard.service';
-import { CoreService } from '../../core/core.service';
 import { environment } from '../../../environments/environment';
 import { ExportService } from '../../shared/import-export/export.service';
+import { ApplicationInstanceData, ApplicationInstanceDbService } from '../../indexedDb/application-instance-db.service';
+import { MeasurSurveyService } from '../../shared/measur-survey/measur-survey.service';
 @Component({
   selector: 'app-sidebar',
   templateUrl: './sidebar.component.html',
@@ -32,8 +33,12 @@ export class SidebarComponent implements OnInit {
 
   collapsedXWidth: number = 40;
   expandedXWidth: number = 300;
+  applicationInstanceDataSubscription: Subscription;
+  showSurveyLink: boolean;
   constructor(private assessmentService: AssessmentService, private directoryDbService: DirectoryDbService,
     private exportService: ExportService,
+    private measurSurveyService: MeasurSurveyService,
+    private applicationInstanceDbService: ApplicationInstanceDbService,
     private directoryDashboardService: DirectoryDashboardService, private dashboardService: DashboardService,
     private cd: ChangeDetectorRef) { }
 
@@ -51,6 +56,10 @@ export class SidebarComponent implements OnInit {
     this.selectedDirectoryIdSub = this.directoryDashboardService.selectedDirectoryId.subscribe(val => {
       this.selectedDirectoryId = val;
     });
+
+    this.applicationInstanceDataSubscription = this.applicationInstanceDbService.applicationInstanceData.subscribe((applicationData: ApplicationInstanceData) => {
+      this.showSurveyLink = !applicationData?.isSurveyDone;
+    });
 
     this.collapseSidebarSub = this.dashboardService.collapseSidebar.subscribe(shouldCollapse => {
       if (shouldCollapse !== undefined) {
@@ -66,6 +75,7 @@ export class SidebarComponent implements OnInit {
     this.updateDashboardDataSub.unsubscribe();
     this.selectedDirectoryIdSub.unsubscribe();
     this.collapseSidebarSub.unsubscribe();
+    this.applicationInstanceDataSubscription.unsubscribe();
   }
 
   downloadData() {
@@ -94,6 +104,10 @@ export class SidebarComponent implements OnInit {
     this.directoryDashboardService.createFolder.next(true);
   }
 
+  showSurvey() {
+    this.measurSurveyService.showSurveyModal.next(true);
+  }
+
   initSidebarView() {
     let totalScreenWidth: number = this.dashboardService.totalScreenWidth.getValue();
     if (totalScreenWidth < 1024) {

src/app/indexedDb/application-instance-db.service.ts

@@ -27,11 +27,29 @@ export class ApplicationInstanceDbService {
     return this.dbService.getAll(this.storeName);
   }
 
+  setSurveyDone(isDone = true) {
+    let applicationInstanceData = this.applicationInstanceData.getValue();
+    applicationInstanceData.isSurveyDone = isDone;
+    applicationInstanceData.doSurveyReminder = !isDone;
+    applicationInstanceData.isSurveyToastDone = true;
+    return this.updateWithObservable(applicationInstanceData);
+  }
+
+  setSurveyToastDone() {
+    let applicationInstanceData = this.applicationInstanceData.getValue();
+    applicationInstanceData.isSurveyToastDone = true;
+    return this.updateWithObservable(applicationInstanceData);
+  }
+
 }
 
 export interface ApplicationInstanceData {
   dataBackupFilePath: string,
   isAutomaticBackupOn: boolean,
+  isSurveyToastDone: boolean,
+  isSurveyDone: boolean,
+  doSurveyReminder: boolean,
+  appOpenCount: number,
   createVersionedBackups: boolean,
   createdDate: Date,
   modifiedDate: Date,

src/app/shared/errors/app-error-modal/app-error-modal.component.html

@@ -15,7 +15,7 @@
                     <div class="alert alert-danger p-3 text-left">
                         <h2 class="h4">{{measurFormattedError.message}}</h2>
                     </div>
-                    <app-error-reporting [measurFormattedError]="measurFormattedError"></app-error-reporting>
+                    <app-error-reporting [inModal]="true" [measurFormattedError]="measurFormattedError"></app-error-reporting>
                 </div>
                 <div class="modal-footer justify-content-between px-3 p-2">
                     <button type="button" class="btn btn-secondary pull-right btn-sm mr-2" (click)="close()">

src/app/shared/errors/error-reporting/error-reporting.component.html

@@ -16,7 +16,7 @@ <h5 class="bold h5">Troubleshooting:</h5>
         </ul>
     </div>
     <div class="mx-auto text-left p-3">
-        <h5 class="bold h5">Submit a Bug Report</h5>
+        <h5 *ngIf="inModal" class="bold h5">Submit a Bug Report</h5>
         <h6 class="h6">To submit an issue, please send the information below to
             <a id="supportEmail"
                 href="mailto:[email protected]?subject=AMO Tools Support Request">measur-help&#64;ornl.gov</a>

src/app/shared/errors/error-reporting/error-reporting.component.ts

@@ -13,6 +13,8 @@ import { DirectoryDashboardService } from '../../../dashboard/directory-dashboar
 export class ErrorReportingComponent {
   @Input()
   measurFormattedError: MeasurFormattedError;
+  @Input()
+  inModal: boolean;
   measurPlatform: string = environment.name;
   appVersion: string = environment.version;