add plan and features to the frontend

config/locales/js-en.yml

@@ -56,8 +56,7 @@ en:
       active: "Active %{label} %{name}"
 
     backup:
-      attachments_disabled:
-        Attachments may not be included since they exceed the maximum overall size allowed.
+      attachments_disabled: Attachments may not be included since they exceed the maximum overall size allowed.
         You can change this via the configuration (requires a server restart).
       info: >
         You can trigger a backup here. The process can take some time depending on the amount
@@ -246,6 +245,8 @@ en:
             label_maximum_users: "Maximum active users"
             label_starts_at: "Starts at"
             label_expires_at: "Expires at"
+            label_plan: "Plan"
+            label_additional_features: "Additional features"
             receive_newsletter: I want to receive the OpenProject <a target="_blank" href="%{link}">newsletter</a>.
             taken_domain: There can only be one active trial per domain.
             domain_mismatch: The current request host name does not match the configured host name. Please double check your system settings.
@@ -1332,8 +1333,7 @@ en:
           title: "Placeholder user"
           title_no_ee: "Placeholder user (Enterprise edition only add-on)"
           description: "Has no access to the project and no emails are sent out."
-          description_no_ee:
-            'Has no access to the project and no emails are sent out.
+          description_no_ee: 'Has no access to the project and no emails are sent out.
             <br>Check out the <a href="%{eeHref}" target="_blank">Enterprise edition</a>'
 
       principal:

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

@@ -30,7 +30,6 @@ import { ChangeDetectionStrategy, Component, ElementRef } from '@angular/core';
 import { I18nService } from 'core-app/core/i18n/i18n.service';
 import { EEActiveTrialBase } from 'core-app/features/enterprise/enterprise-active-trial/ee-active-trial.base';
 
-
 @Component({
   selector: 'opce-enterprise-active-saved-trial',
   templateUrl: './ee-active-trial.component.html',
@@ -56,8 +55,14 @@ export class EEActiveSavedTrialComponent extends EEActiveTrialBase {
 
   public reprieveDaysLeft = this.elementRef.nativeElement.dataset.reprieveDaysLeft;
 
-  constructor(readonly elementRef:ElementRef,
-    readonly I18n:I18nService) {
+  public plan:string = this.elementRef.nativeElement.dataset.plan;
+
+  public additionalFeatures:string = this.elementRef.nativeElement.dataset.additionalFeatures;
+
+  constructor(
+    readonly elementRef:ElementRef,
+    readonly I18n:I18nService,
+  ) {
     super(I18n);
   }
 

frontend/src/app/features/enterprise/enterprise-active-trial/ee-active-trial.base.ts

@@ -38,6 +38,8 @@ export class EEActiveTrialBase extends UntilDestroyedMixin {
     label_domain: this.I18n.t('js.admin.enterprise.trial.form.label_domain'),
     label_starts_at: this.I18n.t('js.admin.enterprise.trial.form.label_starts_at'),
     label_subscriber: this.I18n.t('js.admin.enterprise.trial.form.label_subscriber'),
+    label_plan: this.I18n.t('js.admin.enterprise.trial.form.label_plan'),
+    label_additional_features: this.I18n.t('js.admin.enterprise.trial.form.label_additional_features'),
     text_expired: this.I18n.t('js.admin.enterprise.text_expired'),
     text_reprieve_days_left: (days:number) => this.I18n.t('js.admin.enterprise.text_reprieve_days_left', { days }),
   };

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

@@ -64,6 +64,22 @@
           </div>
         </div>
       </div>
+            <div class="attributes-key-value" *ngIf="plan">
+                <div class="attributes-key-value--key" [textContent]="text.label_plan"></div>
+                <div class="attributes-key-value--value-container">
+                <div class="attributes-key-value--value -text">
+                  <span [textContent]="plan"></span>
+                </div>
+              </div>
+              </div>
+            <div class="attributes-key-value" *ngIf="additionalFeatures">
+                <div class="attributes-key-value--key" [textContent]="text.label_additional_features"></div>
+                <div class="attributes-key-value--value-container">
+                <div class="attributes-key-value--value -text">
+                  <span [textContent]="additionalFeatures"></span>
+                </div>
+              </div>
+              </div>
     </div>
   </div>
 </div>

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

@@ -28,6 +28,7 @@
 
 import {
   ChangeDetectorRef,
+  ChangeDetectionStrategy,
   Component,
   ElementRef,
   OnInit,
@@ -48,6 +49,7 @@ import { IEnterpriseData } from 'core-app/features/enterprise/enterprise-trial.m
   selector: 'enterprise-active-trial',
   templateUrl: './ee-active-trial.component.html',
   styleUrls: ['./ee-active-trial.component.sass'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class EEActiveTrialComponent extends EEActiveTrialBase implements OnInit {
   public subscriber:string;
@@ -64,12 +66,18 @@ export class EEActiveTrialComponent extends EEActiveTrialBase implements OnInit
 
   public expiresAt:string;
 
-  constructor(readonly elementRef:ElementRef,
+  public plan:string;
+
+  public additionalFeatures:string;
+
+  constructor(
+    readonly elementRef:ElementRef,
     readonly cdRef:ChangeDetectorRef,
     readonly I18n:I18nService,
     readonly http:HttpClient,
     readonly Gon:GonService,
-    public eeTrialService:EnterpriseTrialService) {
+    public eeTrialService:EnterpriseTrialService,
+  ) {
     super(I18n);
   }
 
@@ -90,7 +98,7 @@ export class EEActiveTrialComponent extends EEActiveTrialBase implements OnInit
   }
 
   private initialize():void {
-    const eeTrialKey = this.Gon.get('ee_trial_key') as { value:string }|undefined;
+    const eeTrialKey = this.Gon.get('ee_trial_key') as { value:string } | undefined;
     const { data } = this.eeTrialService.current;
 
     if (eeTrialKey && !data) {