monitor/src/app/contact/contact.component.ts

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 {Subscriber} from "rxjs";
import {properties} from "../../environments/environment";

@Component({
    selector: 'contact',
    templateUrl: './contact.component.html',
})
export class ContactComponent implements OnInit {
    public url: string = null;
    public pageTitle: string = "OpenAIRE - Monitor | Contact Us";
    public description: string = "OpenAIRE - Monitor . Any Questions? Contact us to learn more";
    public piwiksub: any;
    public showLoading = true;
    public errorMessage = '';
    public email: Email;
    public properties: EnvProperties = null;
    public pageContents = null;
    public divContents = null;
    public organizationTypes: string[] = [
        'Funding agency', 'University / Research Center',
        'Research Infrastructure', 'Government',
        'Non-profit', 'Industry', 'Other'
    ];
    public contactForm: FormGroup;
    @ViewChild('AlertModal') modal;

    constructor(private route: ActivatedRoute,
                private _router: Router,
                private _emailService: EmailService,
                private _meta: Meta,
                private _title: Title,
                private seoService: SEOService,
                private _piwikService: PiwikService,
                private fb: FormBuilder,
                private helper: HelperService) {
    }
    subscriptions = [];
    ngOnDestroy() {
        this.subscriptions.forEach(subscription => {
            if (subscription instanceof Subscriber) {
                subscription.unsubscribe();
            }
        });
    }
    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());
        }
        this.url = this.properties.domain + this.properties.baseLink + this._router.url;
        this.seoService.createLinkForCanonicalURL(this.url);
        this.updateUrl(this.url);
        this.updateTitle(this.pageTitle);
        this.updateDescription(this.description);
        this.reset();
        //this.getDivContents();
        // this.getPageContents();
        this.showLoading = false;

    }

    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) {
        HelperFunctions.scroll();
        if(event.valid === true) {
            this.sendMail(this.properties.admins);
        } else {
            this.errorMessage = 'Please fill in all the required fields!';
        }
    }
    
    private validatorType(options: string[]): ValidatorFn  {
        return  (control: AbstractControl): { [key: string]: boolean } | null => {
            if (options.filter(type => type === control.value).length === 0) {
                return {'type': false};
            }
            return null;
        }
    }

    public reset() {
        this.contactForm = this.fb.group( {
            name: this.fb.control('', Validators.required),
            surname: this.fb.control('', Validators.required),
            email: this.fb.control('', [Validators.required, Validators.email]),
            job: this.fb.control('', Validators.required),
            organization: this.fb.control('', Validators.required),
            organizationType: this.fb.control('', [Validators.required, this.validatorType(this.organizationTypes)]),
            message: this.fb.control('', Validators.required),
            recaptcha: this.fb.control('', Validators.required),
        });
        this.errorMessage = '';
    }
    
    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'");
    }
}