Add new teaser video on the boards page when there is no EE token

config/locales/js-en.yml

@@ -49,8 +49,10 @@ en:
 
     boards:
       upsale:
-        boards: 'Need to freely structure your work in a board view?'
+        teaser_text: 'Improve your agile project management with this flexible Boards view. Create as many boards as you like for anything you would like to keep track of.'
-        check_out_link: 'Check out the Enterprise Edition.'
+        upgrade_to_ee_text: 'Boards is an Enterprise feature. Please upgrade to a paid plan.'
+        upgrade: 'Upgrade now'
+        personal_demo: 'Get a personal demo'
       lists:
         delete: 'Delete list'
         edit_version: 'Edit version'

frontend/src/app/globals/constants.const.ts

@@ -1 +1,3 @@
 export const enterpriseEditionUrl = "https://www.openproject.org/enterprise-edition/?op_edtion=community-edition";
+
+export const enterpriseDemoUrl = "https://www.openproject.org/enterprise-demo/";

frontend/src/app/modules/boards/board-constants.const.ts

@@ -0,0 +1 @@
+export const boardTeaserVideoURL = "https://player.vimeo.com/video/337280106";

frontend/src/app/modules/boards/index-page/boards-index-page.component.html

@@ -103,8 +103,28 @@
   </div>
 </div>
 
-<enterprise-banner *ngIf="!showBoardIndexView()"
+<div *ngIf="!showBoardIndexView()"
-                   [linkMessage]="text.upsaleCheckOutLink"
+     class="boards--teaser-container">
-                   [textMessage]="text.upsaleBoards"
+  <p>{{ text.teaser_text }}</p>
-                   opReferrer="boards">
+  <p>{{ text.enterprise }}</p>
-</enterprise-banner>
+
+  <a class="button -alt-highlight -with-icon icon-checkmark"
+     [href]="eeLink()"
+     target='blank'>
+    {{ text.upgrade }}
+  </a>
+
+  <a class="button -highlight-inverted"
+     [href]="demoLink()" >
+    {{ text.personal_demo }}
+  </a>
+
+  <div class="boards--teaser-video-container">
+    <iframe [src]="teaserVideoURL()"
+            class="boards--teaser-video"
+            frameborder="0"
+            allow="autoplay; fullscreen"
+            allowfullscreen>
+    </iframe>
+  </div>
+</div>

frontend/src/app/modules/boards/index-page/boards-index-page.component.sass

@@ -1,2 +1,10 @@
 .boards--listing-group
   position: relative
+
+.boards--teaser-video-container
+  height: 50vh
+  text-align: center
+
+  .boards--teaser-video
+    width: 100%
+    height: 100%

frontend/src/app/modules/boards/index-page/boards-index-page.component.ts

@@ -1,4 +1,4 @@
-import {AfterContentInit, AfterViewInit, Component, Injector, OnDestroy, OnInit} from "@angular/core";
+import {AfterViewInit, Component, Injector, OnDestroy, OnInit} from "@angular/core";
 import {Observable} from "rxjs";
 import {I18nService} from "core-app/modules/common/i18n/i18n.service";
 import {BoardService} from "core-app/modules/boards/board/board.service";
@@ -11,6 +11,9 @@ import {BannersService} from "core-app/modules/common/enterprise/banners.service
 import {LoadingIndicatorService} from "core-app/modules/common/loading-indicator/loading-indicator.service";
 import {AuthorisationService} from "core-app/modules/common/model-auth/model-auth.service";
 import {componentDestroyed} from "ng2-rx-componentdestroyed";
+import {enterpriseDemoUrl, enterpriseEditionUrl} from "core-app/globals/constants.const";
+import {DomSanitizer} from "@angular/platform-browser";
+import {boardTeaserVideoURL} from "core-app/modules/boards/board-constants.const";
 
 @Component({
   templateUrl: './boards-index-page.component.html',
@@ -31,8 +34,11 @@ export class BoardsIndexPageComponent implements OnInit, OnDestroy, AfterViewIni
     areYouSure: this.I18n.t('js.text_are_you_sure'),
     deleteSuccessful: this.I18n.t('js.notice_successful_delete'),
     noResults: this.I18n.t('js.notice_no_results_to_display'),
-    upsaleBoards: this.I18n.t('js.boards.upsale.boards'),
+
-    upsaleCheckOutLink: this.I18n.t('js.boards.upsale.check_out_link')
+    teaser_text: this.I18n.t('js.boards.upsale.teaser_text'),
+    enterprise: this.I18n.t('js.boards.upsale.upgrade_to_ee_text'),
+    upgrade: this.I18n.t('js.boards.upsale.upgrade'),
+    personal_demo: this.I18n.t('js.boards.upsale.personal_demo'),
   };
 
   public canAdd = false;
@@ -47,7 +53,8 @@ export class BoardsIndexPageComponent implements OnInit, OnDestroy, AfterViewIni
               private readonly loadingIndicatorService:LoadingIndicatorService,
               private readonly authorisationService:AuthorisationService,
               private readonly injector:Injector,
-              private readonly bannerService:BannersService) {
+              private readonly bannerService:BannersService,
+              private readonly domSanitizer:DomSanitizer) {
   }
 
   ngOnInit():void {
@@ -88,4 +95,16 @@ export class BoardsIndexPageComponent implements OnInit, OnDestroy, AfterViewIni
   public showBoardIndexView() {
     return !this.bannerService.eeShowBanners;
   }
+
+  public eeLink() {
+    return enterpriseEditionUrl + '&op_referrer=boards';
+  }
+
+  public demoLink() {
+    return enterpriseDemoUrl;
+  }
+
+  public teaserVideoURL() {
+    return this.domSanitizer.bypassSecurityTrustResourceUrl(boardTeaserVideoURL);
+  }
 }