[32911] EE Trial: Use previously entered form data (#8267)

https://community.openproject.com/wp/32911
[ci skip]

frontend/src/app/components/enterprise/enterprise-active-trial/ee-active-trial.component.html

@@ -1,47 +1,47 @@
 <div class="enterprise--active-token">
   <div class="attributes-group">
     <div class="attributes-key-value">
-      <div class="attributes-key-value--key">{{ text.label_subscriber }}</div>
+      <div class="attributes-key-value--key" [textContent]="text.label_subscriber"></div>
       <div class="attributes-key-value--value-container">
         <div class="attributes-key-value--value -text">
-          <span>{{ subscriber }}</span>
+          <span [textContent]="subscriber"></span>
         </div>
       </div>
-      <div class="attributes-key-value--key">{{ text.label_email }}</div>
+      <div class="attributes-key-value--key" [textContent]="text.label_email"> </div>
       <div class="attributes-key-value--value-container">
         <div class="attributes-key-value--value -text">
-          <span>{{ email }}</span>
+          <span [textContent]="email"></span>
         </div>
       </div>
-      <div *ngIf="company" class="attributes-key-value--key">{{ text.label_company }}</div>
+      <div *ngIf="company" class="attributes-key-value--key" [textContent]="text.label_company"></div>
       <div *ngIf="company" class="attributes-key-value--value-container">
         <div class="attributes-key-value--value -text">
-          <span>{{ company }}</span>
+          <span [textContent]="company"></span>
         </div>
       </div>
-      <div *ngIf="domain" class="attributes-key-value--key">{{ text.label_domain }}</div>
+      <div *ngIf="domain" class="attributes-key-value--key" [textContent]="text.label_domain"></div>
       <div *ngIf="domain" class="attributes-key-value--value-container">
         <div class="attributes-key-value--value -text">
-          <span>{{ domain }}</span>
+          <span [textContent]="domain"></span>
         </div>
       </div>
-      <div *ngIf="userCount" class="attributes-key-value--key">{{ text.label_maximum_users }}</div>
+      <div *ngIf="userCount" class="attributes-key-value--key" [textContent]="text.label_maximum_users"> </div>
       <div *ngIf="userCount" class="attributes-key-value--value-container">
         <div class="attributes-key-value--value -text">
-          <span>{{ userCount }}</span>
+          <span [textContent]="userCount"></span>
         </div>
       </div>
-      <div *ngIf="startsAt" class="attributes-key-value--key">{{ text.label_starts_at }}</div>
+      <div *ngIf="startsAt" class="attributes-key-value--key" [textContent]="text.label_starts_at"> </div>
       <div *ngIf="startsAt" class="attributes-key-value--value-container">
         <div class="attributes-key-value--value -text">
-          <span>{{ startsAt }}</span>
+          <span [textContent]="startsAt"></span>
         </div>
       </div>
       <!-- only show if token expires -->
-      <div *ngIf="expiresAt" class="attributes-key-value--key">{{ text.label_expires_at }}</div>
+      <div *ngIf="expiresAt" class="attributes-key-value--key" [textContent]="text.label_expires_at"></div>
       <div *ngIf="expiresAt" class="attributes-key-value--value-container">
         <div class="attributes-key-value--value -text">
-          <span>{{ expiresAt }}</span>
+          <span [textContent]="expiresAt"></span>
         </div>
       </div>
     </div>

frontend/src/app/components/enterprise/enterprise-active-trial/ee-active-trial.component.ts

@@ -60,6 +60,7 @@ export class EEActiveTrialComponent extends EEActiveTrialBase implements OnInit
   ngOnInit() {
     if (!this.subscriber) {
       this.eeTrialService.userData$
+        .values$()
         .pipe(
           distinctUntilChanged(),
           this.untilDestroyed()
@@ -76,7 +77,7 @@ export class EEActiveTrialComponent extends EEActiveTrialBase implements OnInit
   private initialize():void {
     let eeTrialKey = this.Gon.get('ee_trial_key') as any;
 
-    if (eeTrialKey && !this.eeTrialService.userData) {
+    if (eeTrialKey && !this.eeTrialService.userData$.hasValue()) {
       // after reload: get data from Augur using the trial key saved in gon
       this.eeTrialService.trialLink = this.eeTrialService.baseUrlAugur + '/public/v1/trials/' + eeTrialKey.value;
       this.getUserDataFromAugur();
@@ -90,7 +91,7 @@ export class EEActiveTrialComponent extends EEActiveTrialBase implements OnInit
       .get<any>(this.eeTrialService.trialLink + '/details')
       .toPromise()
       .then((userForm:any) => {
-        this.formatUserData(userForm);
+        this.eeTrialService.userData$.putValue(userForm);
         this.eeTrialService.retryConfirmation();
       })
       .catch((error:HttpErrorResponse) => {

frontend/src/app/components/enterprise/enterprise-modal/enterprise-trial-form/ee-trial-form.component.ts

@@ -29,7 +29,7 @@
 import {Component, ElementRef} from "@angular/core";
 import {FormBuilder, Validators} from "@angular/forms";
 import {I18nService} from "app/modules/common/i18n/i18n.service";
-import {EnterpriseTrialService} from "core-components/enterprise/enterprise-trial.service";
+import {EnterpriseTrialData, EnterpriseTrialService} from "core-components/enterprise/enterprise-trial.service";
 
 const termsOfServiceURL = 'https://www.openproject.com/terms-of-service/';
 const legalNoticeURL = 'https://www.openproject.com/legal-notice/';
@@ -40,13 +40,15 @@ const newsletterURL = 'https://www.openproject.com/newsletter/';
   templateUrl: './ee-trial-form.component.html'
 })
 export class EETrialFormComponent {
-  // enterprise trial form
+  // Retain used values
+  userData:Partial<EnterpriseTrialData> = this.eeTrialService.userData$.getValueOr({});
+
   trialForm = this.formBuilder.group({
-    company: ['', Validators.required],
-    first_name: ['', Validators.required],
-    last_name: ['', Validators.required],
+    company: [this.userData.company, Validators.required],
+    first_name: [this.userData.first_name, Validators.required],
+    last_name: [this.userData.last_name, Validators.required],
     email: ['', [Validators.required, Validators.email]],
-    domain: ['', Validators.required],
+    domain: [this.userData.domain, Validators.required],
     general_consent: [null, Validators.required],
     newsletter_consent: null,
   });
@@ -64,7 +66,7 @@ export class EETrialFormComponent {
     label_email: this.I18n.t('js.admin.enterprise.trial.form.label_email'),
     label_domain: this.I18n.t('js.admin.enterprise.trial.form.label_domain'),
     privacy_policy: this.I18n.t('js.admin.enterprise.trial.form.privacy_policy'),
-    receive_newsletter: this.I18n.t('js.admin.enterprise.trial.form.receive_newsletter',{ link: newsletterURL }),
+    receive_newsletter: this.I18n.t('js.admin.enterprise.trial.form.receive_newsletter', { link: newsletterURL }),
     terms_of_service: this.I18n.t('js.admin.enterprise.trial.form.terms_of_service')
   };
 

frontend/src/app/components/enterprise/enterprise-trial.service.ts

@@ -4,14 +4,24 @@ import {HttpClient, HttpErrorResponse} from "@angular/common/http";
 import {PathHelperService} from "core-app/modules/common/path-helper/path-helper.service";
 import {NotificationsService} from "core-app/modules/common/notifications/notifications.service";
 import {FormGroup} from "@angular/forms";
-import {BehaviorSubject} from 'rxjs';
+import {input} from "reactivestates";
+
+export interface EnterpriseTrialData {
+  id?:string;
+  company:string;
+  first_name:string;
+  last_name:string;
+  email:string;
+  domain:string;
+  general_consent?:boolean;
+  newsletter_consent?:boolean;
+}
 
 @Injectable()
 export class EnterpriseTrialService {
   // user data needs to be sync in ee-active-trial.component.ts
-  private userDataSubject = new BehaviorSubject<any>({});
-  public userData$ = this.userDataSubject.asObservable();
-  public userData:any;
+  userData$ = input<EnterpriseTrialData>();
+
   public baseUrlAugur:string;
 
 
@@ -39,8 +49,7 @@ export class EnterpriseTrialService {
   // send POST request with form object
   // receive an enterprise trial link to access a token
   public sendForm(form:FormGroup) {
-    this.userData = form.value;
-    this.userDataSubject.next(this.userData);
+    this.userData$.putValue(form.value);
 
     this.cancelled = false;
     this.http.post(this.baseUrlAugur + '/public/v1/trials', form.value)
@@ -114,7 +123,7 @@ export class EnterpriseTrialService {
       this.pathHelper.api.v3.appBasePath + '/admin/enterprise/save_trial_key',
       { trial_key: trialKey },
       { withCredentials: true }
-      )
+    )
       .toPromise()
       .catch((e:any) => {
         this.notificationsService.addError(e.error.message || e.message || e);
@@ -127,7 +136,7 @@ export class EnterpriseTrialService {
       this.pathHelper.api.v3.appBasePath + '/admin/enterprise',
       { enterprise_token: { encoded_token: token } },
       { withCredentials: true }
-      )
+    )
       .toPromise()
       .catch((error:HttpErrorResponse) => {
         this.notificationsService.addError(error.error.description || I18n.t('js.error.internal'));
@@ -142,7 +151,7 @@ export class EnterpriseTrialService {
       this.cancelled = true;
     } else {
       this.getToken();
-      setTimeout( () => {
+      setTimeout(() => {
         this.retryConfirmation(delay, retries - 1);
       }, delay);
     }