1. import { Component, Event, EventEmitter, Prop, State, Element } from '@stencil/core';
2. import { ISelfRegistrationInfo } from './selfRegistrationInfo';
3. import { getCountryName } from './../org-search/stateAndCountry';
4. import { IOrganizationInformation } from './../org-search-result/organizationInformation';
5.  
6. @Component({
7.     tag: 'confirm-self-registration-request',
8.     styleUrl: 'confirm-self-registration-request.scss',
9.     shadow: true
10. })
11. export class ConfirmSelfRegistrationRequest {
12.     @Prop() reviewHeader: string;
13.     @Prop() terms: string;
14.     @Prop({ reflectToAttr: true }) selfRegistrationInfo: ISelfRegistrationInfo;
15.     @State() termsAccepted: boolean = false;
16.     @Event({ bubbles: true, composed: true }) confirmEvent: EventEmitter;
17.     private timeout: any;
18.     @Element()
19.     private element: HTMLElement;
20.  
21.     getAddress(organization: IOrganizationInformation): string {
22.         const stateAndZip = [organization.orgState, organization.orgPostalCode]
23.             .filter(element => element)
24.             .map(element => element.trim())
25.             .join(' ');
26.         const addressLine = [organization.orgCity, stateAndZip];
27.         return addressLine
28.             .filter(element => element)
29.             .map(element => element.trim())
30.             .join(', ')
31.     };
32.  
33.     checkboxValueChanged(event): void {
34.         this.termsAccepted = event.target.checked;
35.     }
36.  
37.     onConfirmClick(event: Event) {
38.         event.preventDefault();
39.         this.confirmEvent.emit();
40.     }
41.  
42.     renderCaptcha()  {
43.         const recpatcha = window['grecaptcha'];
44.         console.log(typeof recpatcha.render);
45.         if (typeof recpatcha.render !== "function") {
46.             console.log('waiting till captcha is found');
47.             this.timeout = setInterval(() => {
48.                 this.renderCaptcha();
49.               }, 200)
50.               return;
51.         }
52.         clearTimeout(this.timeout);
53.         recpatcha.render(this.element.querySelector('#captcha'), {
54.             sitekey: '6Lf_op4UAAAAANXxRYbfMkXbR4CnXwI520y9JiWc',
55.  
56.             callback: function(response){
57.                 console.log('got cpatch response', response);
58.             }
59.         });
60.     }
61.  
62.     componentDidLoad() {
63.         this.renderCaptcha();
64.     }
65.  
66.     render() {
67.         return (
68.             <div class="login login-width" data-e2e-id="org-search">
69.                 <div class="login__panel" data-e2e-id="org-search-panel">
70.                     <form class="register__form" data-e2e-id="org-search-form">
71.                         <h1 class="review-header">{this.reviewHeader}</h1>
72.  
73.                         <div class="info">
74.                             <span class="info__label">First Name</span>
75.                             <span class="info__value">{this.selfRegistrationInfo.firstName}</span>
76.                         </div>
77.  
78.                         <div class="info">
79.                             <span class="info__label">Last Name</span>
80.                             <span class="info__value">{this.selfRegistrationInfo.lastName}</span>
81.                         </div>
82.  
83.                         <div class="info">
84.                             <span class="info__label">School/District Email</span>
85.                             <span class="info__value">{this.selfRegistrationInfo.email}</span>
86.                         </div>
87.  
88.                         <div class="info">
89.                             <span class="info__label">I am an administrator for a</span>
90.                             <span class="info__value">{this.selfRegistrationInfo.organizationInfo.orgType}</span>
91.                         </div>
92.  
93.                         <div class="info">
94.                             <span class="info__label">School/District</span>
95.                             <div class="info__org">
96.                                 <span class="info__value">{this.selfRegistrationInfo.organizationInfo.orgName}</span>
97.                                 <span class="info__value">{this.selfRegistrationInfo.organizationInfo.orgAddress}</span>
98.                                 <span class="info__value">{this.getAddress(this.selfRegistrationInfo.organizationInfo)}</span>
99.                                 <span class="info__value">{getCountryName(this.selfRegistrationInfo.organizationInfo.orgCountry)}</span>
100.                             </div>
101.                         </div>
102.  
103.  
104.                         <slot></slot>
105.                         <div class="icon-error">
106.                             <span class="icon-error_intervention icon-error--alignment"></span>
107.                             <span class="icon__text">The following site is for educator use only.</span>
108.                         </div>
109.  
110.                         <div class="terms__container">
111.                             <input type="checkbox"
112.                                 onChange={this.checkboxValueChanged.bind(this)}
113.                                 name="terms"
114.                                 value={this.terms}
115.                                 id="terms"
116.                                 checked={this.termsAccepted}/>
117.                             <label htmlFor="terms" class="terms__label">
118.                                 <span class="terms__text">{this.terms}</span>
119.                             </label>
120.                         </div>
121.  
122.                         <div class="form__row">
123.                             <button
124.                                 class="form__button"
125.                                 data-e2e-id="confirm-back-button"
126.                                 type="button"
127.                             >Back
128.                             </button>
129.                             <button
130.                                 class="form__button form__button-right"
131.                                 data-e2e-id="confirm-send-button"
132.                                 type="button"
133.                                 onClick={this.onConfirmClick.bind(this)}
134.                                 disabled={!this.termsAccepted}
135.                             >Confirm and Send
136.                             </button>
137.                         </div>
138.                     </form>
139.                 </div>
140.             </div>
141.  
142.         );
143.     }
144.  
145. }