Add contact in get-started

src/app/app.component.ts

@@ -17,7 +17,6 @@ import {Composer} from "./openaireLibrary/utils/email/composer";
 import {NotificationHandler} from "./openaireLibrary/utils/notification-handler";
 import {EmailService} from "./openaireLibrary/utils/email/email.service";
 import {StringUtils} from "./openaireLibrary/utils/string-utils.class";
-import {HelperFunctions} from "./openaireLibrary/utils/HelperFunctions.class";
 import {QuickContactComponent} from "./openaireLibrary/sharedComponents/quick-contact/quick-contact.component";
 import {AlertModal} from "./openaireLibrary/utils/modal/alert";
 
@@ -124,7 +123,8 @@ export class AppComponent {
         logoUrl: this.logoPath + 'logo-large-monitor.png',
         logoSmallUrl:this.logoPath + 'logo-small-monitor.png',
         position:'left',
-        badge:true
+        badge:true,
+        menuPosition: 'center'
       };
       this.buildMenu();
       this.reset();
@@ -152,7 +152,7 @@ export class AppComponent {
       items: []
     });
     this.menuItems.push({
-      rootItem: new MenuItem("stakeholders", "Browse", "", "browse", false, [], null, {}),
+      rootItem: new MenuItem("stakeholders", "Browse", "", "/browse", false, [], null, {}),
       items: []
     });
     this.menuItems.push({

src/app/contact/contact.component.html

@@ -1,5 +1,6 @@
 <schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other" [description]="description"></schema2jsonld>
-<div id="contact-us" class="uk-background-fixed uk-background-center-right uk-background-norepeat uk-background-contain">
+<div id="contact-us"
+     class="uk-background-fixed uk-background-center-right uk-background-norepeat uk-background-contain">
   <div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
     <div class="uk-padding-small">
       <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
@@ -7,19 +8,17 @@
   </div>
   <div class="uk-section uk-padding-remove-top uk-container uk-container-large">
     <div class="uk-padding-small uk-width-1-2@l uk-width-2-3@m uk-width-1-1">
-      <div class="uk-position-relative">
+      <contact-us [organizationTypes]="organizationTypes" [sending]="sending"
-        <contact-us [organizationTypes]="organizationTypes" [sending]="sending"
+                  [contactForm]="contactForm" (sendEmitter)="send($event)">
-                    [contactForm]="contactForm" (sendEmitter)="send($event)">
+        <h1 page-title class="uk-margin-auto">
-          <h1 page-title class="uk-margin-auto">
+          Contact us<span class="uk-text-primary">.</span>
-            Contact us<span class="uk-text-primary">.</span>
+        </h1>
-          </h1>
+        <div page-description class="uk-text-large uk-width-2-3@s">
-          <div page-description class="uk-text-large uk-width-2-3@s">
+          We would be happy to open a discussion with you to better understand your needs and share examples of how
-            We would be happy to open a discussion with you to better understand your needs and share examples of how
+          OpenAIRE MONITOR
-            OpenAIRE MONITOR
+          can help your organization in your open science needs.
-            can help your organization in your open science needs.
+        </div>
-          </div>
+      </contact-us>
-        </contact-us>
-      </div>
     </div>
   </div>
 </div>

src/app/contact/contact.component.ts

@@ -1,15 +1,13 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {EmailService} from "../openaireLibrary/utils/email/email.service";
-import {Email} from "../openaireLibrary/utils/email/email";
 import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties";
 import {Composer} from "../openaireLibrary/utils/email/composer";
 import {Meta, Title} from "@angular/platform-browser";
 import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service";
-import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
 import {HelperService} from "../openaireLibrary/utils/helper/helper.service";
 import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
-import {AbstractControl, FormBuilder, FormGroup, ValidatorFn, Validators} from "@angular/forms";
+import {FormBuilder, FormGroup, Validators} from "@angular/forms";
 import {Subscriber} from "rxjs";
 import {properties} from "../../environments/environment";
 import {Breadcrumb} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.component";
@@ -26,9 +24,8 @@ export class ContactComponent implements OnInit {
     public pageTitle: string = "OpenAIRE - Monitor | Contact Us";
     public description: string = "OpenAIRE - Monitor . Any Questions? Contact us to learn more";
     public piwiksub: any;
-    public sending = true;
+    public sending = false;
-    public email: Email;
+    public properties: EnvProperties = properties;
-    public properties: EnvProperties = null;
     public pageContents = null;
     public divContents = null;
     public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'Contact us'}];
@@ -39,7 +36,8 @@ export class ContactComponent implements OnInit {
     ];
     public contactForm: FormGroup;
     @ViewChild('modal') modal;
-
+    private subscriptions = [];
+    
     constructor(private route: ActivatedRoute,
                 private _router: Router,
                 private emailService: EmailService,
@@ -50,7 +48,7 @@ export class ContactComponent implements OnInit {
                 private fb: FormBuilder,
                 private helper: HelperService) {
     }
-    subscriptions = [];
+    
     ngOnDestroy() {
         this.subscriptions.forEach(subscription => {
             if (subscription instanceof Subscriber) {
@@ -58,9 +56,8 @@ export class ContactComponent implements OnInit {
             }
         });
     }
+    
     ngOnInit() {
-        this.properties = properties;
-        this.email = {body: '', subject: '', recipients: []};
         if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
             this.subscriptions.push(this._piwikService.trackView(this.properties, this.pageTitle, this.properties.piwikSiteId).subscribe());
         }
@@ -72,8 +69,6 @@ export class ContactComponent implements OnInit {
         this.reset();
         //this.getDivContents();
         // this.getPageContents();
-        this.sending = false;
-
     }
 
     private getPageContents() {
@@ -89,7 +84,6 @@ export class ContactComponent implements OnInit {
     }
 
     public send(event) {
-        HelperFunctions.scroll();
         if(event.valid === true) {
             this.sendMail(this.properties.admins);
         }

src/app/get-started/get-started.component.html

@@ -1,6 +1,6 @@
 <schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other" [description]="description"></schema2jsonld>
-<div class="uk-background-muted">
+<div class="">
-	<div class="uk-container uk-container-large uk-section uk-padding-remove-bottom">
+	<div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
 		<div class="uk-padding-small">
 			<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
 		</div>
@@ -14,7 +14,7 @@
 		</div>
 	</div>
 </div>
-<div class="mixed-bacgkround">
+<div class="mixed-background">
 	<div class="uk-background-muted">
 		<div class="uk-container uk-container-large uk-section">
 			<div class="uk-padding-small uk-text-center uk-width-1-2 uk-margin-auto uk-grid uk-child-width-1-2" uk-grid>
@@ -46,15 +46,19 @@
 <div class="uk-container uk-container-large uk-section uk-padding-remove-top">
 	<div class="uk-padding-small uk-text-center">
 		<h2 class="uk-h1">Provide some information<span class="uk-text-primary">.</span></h2>
-		<div>
+		<div class="uk-flex uk-flex-center uk-width-1-1">
-			TODO: Contact form + SEND button
+			<div class="uk-width-1-2@m uk-width-1-1 uk-margin-large-top">
+				<contact-us [organizationTypes]="organizationTypes" [sending]="sending"
+										[contactForm]="contactForm" alignButton="center" (sendEmitter)="send($event)">
+				</contact-us>
+			</div>
 		</div>
 	</div>
 </div>
 <div class="uk-container uk-container-large uk-section">
-	<div class="uk-grid uk-grid-medium uk-padding-small" uk-grid>
+	<div class="uk-grid uk-grid-medium" uk-grid>
-		<div class="uk-width-2-3@m uk-width-1-1@s">
+		<div class="uk-width-1-2@m uk-width-1-1">
-			<h2 class="uk-h1">We need a title that <br> suggest to learn the full <br> process in the about<span class="uk-text-primary">.</span></h2>
+			<h2 class="uk-h1">We need a title that suggest to learn the full process in the about<span class="uk-text-primary">.</span></h2>
 			<a class="uk-display-inline-block uk-text-uppercase uk-button-text"
         routerLinkActive="router-link-active" routerLink="/about/learn-how">
 					<span class="uk-flex uk-flex-middle">
@@ -62,8 +66,14 @@
 					</span>
         </a>
 		</div>
-		<div class="uk-width-1-3@m uk-width-1-1@s uk-text-center">
+		<div class="uk-width-expand uk-flex uk-flex-center">
 			<img src="../../assets/common-assets/monitor-assets/how/steps.svg" loading="lazy">
 		</div>
 	</div>
-</div>
+</div>
+<modal-alert #modal (alertOutput)="goToHome()">
+	<div class="uk-padding-small uk-padding-remove-horizontal">
+		Our team will respond to your submission soon.<br>
+		Press OK to redirect to OpenAIRE Monitor home page.
+	</div>
+</modal-alert>

src/app/get-started/get-started.component.ts

@@ -13,166 +13,152 @@ import {AbstractControl, FormBuilder, FormGroup, ValidatorFn, Validators} from "
 import {Subscriber} from "rxjs";
 import {properties} from "../../environments/environment";
 import {Breadcrumb} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.component";
+import {NotificationHandler} from "../openaireLibrary/utils/notification-handler";
+import {StringUtils} from "../openaireLibrary/utils/string-utils.class";
 
 @Component({
-    selector: 'get-started',
+  selector: 'get-started',
-    templateUrl: './get-started.component.html',
+  templateUrl: './get-started.component.html',
 })
 export class GetStartedComponent implements OnInit {
-    public url: string = null;
+  public url: string = null;
-    public pageTitle: string = "OpenAIRE - Monitor | Get Started";
+  public pageTitle: string = "OpenAIRE - Monitor | Get Started";
-    public description: string = "OpenAIRE - Monitor . Any Questions? Contact us to learn more";
+  public description: string = "OpenAIRE - Monitor . Any Questions? Contact us to learn more";
-    public piwiksub: any;
+  public piwiksub: any;
-    public showLoading = true;
+  public sending = false;
-    public errorMessage = '';
+  public properties: EnvProperties = properties;
-    public email: Email;
+  public pageContents = null;
-    public properties: EnvProperties = null;
+  public divContents = null;
-    public pageContents = null;
+  public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'Get started'}];
-    public divContents = null;
+  public organizationTypes: string[] = [
-    public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'Get started'}];
+    'Funding agency', 'University / Research Center',
-    public organizationTypes: string[] = [
+    'Research Infrastructure', 'Government',
-        'Funding agency', 'University / Research Center',
+    'Non-profit', 'Industry', 'Other'
-        'Research Infrastructure', 'Government',
+  ];
-        'Non-profit', 'Industry', 'Other'
+  public contactForm: FormGroup;
-    ];
+  @ViewChild('modal') modal;
-    public contactForm: FormGroup;
+  private subscriptions = [];
-    @ViewChild('AlertModal') modal;
+  
-
+  constructor(private route: ActivatedRoute,
-    constructor(private route: ActivatedRoute,
+              private _router: Router,
-                private _router: Router,
+              private _emailService: EmailService,
-                private _emailService: EmailService,
+              private _meta: Meta,
-                private _meta: Meta,
+              private _title: Title,
-                private _title: Title,
+              private seoService: SEOService,
-                private seoService: SEOService,
+              private _piwikService: PiwikService,
-                private _piwikService: PiwikService,
+              private fb: FormBuilder,
-                private fb: FormBuilder,
+              private helper: HelperService) {
-                private helper: HelperService) {
+  }
+  
+  ngOnDestroy() {
+    this.subscriptions.forEach(subscription => {
+      if (subscription instanceof Subscriber) {
+        subscription.unsubscribe();
+      }
+    });
+  }
+  
+  ngOnInit() {
+    if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
+      this.subscriptions.push(this._piwikService.trackView(this.properties, this.pageTitle, this.properties.piwikSiteId).subscribe());
     }
-    subscriptions = [];
+    this.url = this.properties.domain + this.properties.baseLink + this._router.url;
-    ngOnDestroy() {
+    this.seoService.createLinkForCanonicalURL(this.url);
-        this.subscriptions.forEach(subscription => {
+    this.updateUrl(this.url);
-            if (subscription instanceof Subscriber) {
+    this.updateTitle(this.pageTitle);
-                subscription.unsubscribe();
+    this.updateDescription(this.description);
-            }
+    this.reset();
-        });
+    //this.getDivContents();
+    // this.getPageContents();
+  }
+  
+  private getPageContents() {
+    this.subscriptions.push(this.helper.getPageHelpContents(this.properties, 'monitor', this._router.url).subscribe(contents => {
+      this.pageContents = contents;
+    }));
+  }
+  
+  private getDivContents() {
+    this.subscriptions.push(this.helper.getDivHelpContents(this.properties, 'monitor', this._router.url).subscribe(contents => {
+      this.divContents = contents;
+    }));
+  }
+  
+  public send(event) {
+    if (event.valid === true) {
+      this.sendMail(this.properties.admins);
     }
-    ngOnInit() {
+  }
-        this.properties = properties;
+  
-        this.email = {body: '', subject: '', recipients: []};
+  public reset() {
-        if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
+    this.contactForm = this.fb.group({
-            this.subscriptions.push(this._piwikService.trackView(this.properties, this.pageTitle, this.properties.piwikSiteId).subscribe());
+      name: this.fb.control('', Validators.required),
-        }
+      surname: this.fb.control('', Validators.required),
-        this.url = this.properties.domain + this.properties.baseLink + this._router.url;
+      email: this.fb.control('', [Validators.required, Validators.email]),
-        this.seoService.createLinkForCanonicalURL(this.url);
+      job: this.fb.control('', Validators.required),
-        this.updateUrl(this.url);
+      organization: this.fb.control('', Validators.required),
-        this.updateTitle(this.pageTitle);
+      organizationType: this.fb.control('', [Validators.required, StringUtils.validatorType(this.organizationTypes)]),
-        this.updateDescription(this.description);
+      message: this.fb.control('', Validators.required),
-        this.reset();
+      recaptcha: this.fb.control('', Validators.required),
-        //this.getDivContents();
+    });
-        // this.getPageContents();
+  }
-        this.showLoading = false;
+  
-
+  private sendMail(admins: any) {
-    }
+    this.sending = true;
-
+    this.subscriptions.push(this._emailService.contact(this.properties,
-    private getPageContents() {
+      Composer.composeEmailForMonitor(this.contactForm.value, admins),
-        this.subscriptions.push(this.helper.getPageHelpContents(this.properties, 'monitor', this._router.url).subscribe(contents => {
+      this.contactForm.value.recaptcha).subscribe(
-            this.pageContents = contents;
+      res => {
-        }));
+        if (res) {
-    }
+          this.sending = false;
-
+          this.reset();
-    private getDivContents() {
+          this.modalOpen();
-        this.subscriptions.push(this.helper.getDivHelpContents(this.properties, 'monitor', this._router.url).subscribe(contents => {
-            this.divContents = contents;
-        }));
-    }
-
-    public send(event) {
-        HelperFunctions.scroll();
-        if(event.valid === true) {
-            this.sendMail(this.properties.admins);
         } else {
-            this.errorMessage = 'Please fill in all the required fields!';
+          this.handleError('Email <b>sent failed!</b> Please try again.');
         }
+      },
+      error => {
+        this.handleError('Email <b>sent failed!</b> Please try again.', error);
+  
+      }
+    ));
+  }
+  
+  public modalOpen() {
+    this.modal.okButton = true;
+    this.modal.alertTitle = 'Your request has been successfully submitted';
+    this.modal.alertMessage = false;
+    this.modal.cancelButton = false;
+    this.modal.okButtonLeft = false;
+    this.modal.okButtonText = 'OK';
+    this.modal.open();
+  }
+  
+  handleError(message: string, error = null) {
+    if(error) {
+      console.error(error);
     }
-    
+    NotificationHandler.rise(message, 'danger');
-    private validatorType(options: string[]): ValidatorFn  {
+    this.sending = false;
-        return  (control: AbstractControl): { [key: string]: boolean } | null => {
+    this.contactForm.get('recaptcha').setValue('');
-            if (options.filter(type => type === control.value).length === 0) {
+  }
-                return {'type': false};
+  
-            }
+  public goToHome() {
-            return null;
+    this._router.navigate(['/']);
-        }
+  }
-    }
+  
-
+  private updateDescription(description: string) {
-    public reset() {
+    this._meta.updateTag({content: description}, "name='description'");
-        this.contactForm = this.fb.group( {
+    this._meta.updateTag({content: description}, "property='og:description'");
-            name: this.fb.control('', Validators.required),
+  }
-            surname: this.fb.control('', Validators.required),
+  
-            email: this.fb.control('', [Validators.required, Validators.email]),
+  private updateTitle(title: string) {
-            job: this.fb.control('', Validators.required),
+    var _title = ((title.length > 50) ? title.substring(0, 50) : title);
-            organization: this.fb.control('', Validators.required),
+    this._title.setTitle(_title);
-            organizationType: this.fb.control('', [Validators.required, this.validatorType(this.organizationTypes)]),
+    this._meta.updateTag({content: _title}, "property='og:title'");
-            message: this.fb.control('', Validators.required),
+  }
-            recaptcha: this.fb.control('', Validators.required),
+  
-        });
+  private updateUrl(url: string) {
-        this.errorMessage = '';
+    this._meta.updateTag({content: url}, "property='og:url'");
-    }
+  }
-    
-    private sendMail(admins: any) {
-        this.showLoading = true;
-        this.subscriptions.push(this._emailService.contact(this.properties,
-            Composer.composeEmailForMonitor(this.contactForm.value, admins),
-          this.contactForm.value.recaptcha).subscribe(
-            res => {
-                this.showLoading = false;
-                if (res) {
-                    this.reset();
-                    this.modalOpen();
-                } else {
-                    this.errorMessage = 'Email sent failed! Please try again.';
-                    this.contactForm.get('recaptcha').setValue('');
-                }
-            },
-            error => {
-                this.handleError('Email sent failed! Please try again.', error);
-                this.showLoading = false;
-                this.contactForm.get('recaptcha').setValue('');
-            }
-        ));
-    }
-
-    public modalOpen() {
-        this.modal.okButton = true;
-        this.modal.alertTitle = 'Your request has been successfully submitted';
-        this.modal.alertMessage = false;
-        this.modal.cancelButton = false;
-        this.modal.okButtonLeft = false;
-        this.modal.okButtonText = 'OK';
-        this.modal.open();
-    }
-
-    handleError(message: string, error) {
-        this.errorMessage = message;
-        console.log('Server responded: ' + error);
-        this.showLoading = false;
-    }
-
-    public goToHome() {
-        this._router.navigate(['/']);
-    }
-
-    private updateDescription(description: string) {
-        this._meta.updateTag({content: description}, "name='description'");
-        this._meta.updateTag({content: description}, "property='og:description'");
-    }
-
-    private updateTitle(title: string) {
-        var _title = ((title.length > 50) ? title.substring(0, 50) : title);
-        this._title.setTitle(_title);
-        this._meta.updateTag({content: _title}, "property='og:title'");
-    }
-
-    private updateUrl(url: string) {
-        this._meta.updateTag({content: url}, "property='og:url'");
-    }
 }

src/app/home/home.component.html

@@ -2,15 +2,17 @@
   <div class="uk-section home-background">
     <div class="mask"></div>
     <div class="uk-container uk-container-large">
-      <h1 class="uk-heading-large">
+      <div class="uk-width-1-2">
-        A new era of <br><span class="uk-text-primary">monitoring</span> <br>research<span class="uk-text-primary">.</span>
+        <h1 class="uk-heading-large">
-      </h1>
+          A new era of <span class="uk-text-primary">monitoring</span> research<span class="uk-text-primary">.</span>
-      <div class="uk-text-large uk-margin-medium-top">
+        </h1>
-        <div>Work together with us to view, understand and visualize</div>
+        <div class="uk-text-large uk-margin-medium-top">
-        <div>research statistics and indicators.</div>
+          <div>Work together with us to view, understand and visualize</div>
-      </div>
+          <div>research statistics and indicators.</div>
-      <div class="uk-margin-medium-top" style="z-index: 1">
+        </div>
-        <a class="uk-button uk-button-primary uk-text-uppercase" routerLink="/get-started">Get Started</a>
+        <div class="uk-margin-medium-top" style="z-index: 1">
+          <a class="uk-button uk-button-primary uk-text-uppercase" routerLink="/get-started">Get Started</a>
+        </div>
       </div>
     </div>
   </div>

src/app/openaireLibrary

@@ -1 +1 @@
-Subproject commit ada419f8e82836c19633544aeddcc7ca31a5699b
+Subproject commit d590732aba2a632036b006fb3de683cdb5df8ade