Merge pull request #452 from dreamfactorysoftware/DP-771

[DP-771] Add banner to Open Source and Heroku trial

Author: oleksandrkits

src/app/app.component.html

@@ -1,3 +1,4 @@
+<df-engagement-banner></df-engagement-banner>
 <ng-container
   *ngIf="(licenseCheck$ | async)?.disableUi === 'true'; else enabled">
   <router-outlet />

src/app/app.component.ts

@@ -8,6 +8,7 @@ import {
   NavigationEnd,
 } from '@angular/router';
 import { DfSideNavComponent } from './shared/components/df-side-nav/df-side-nav.component';
+import { DfEngagementBannerComponent } from './shared/components/df-engagement-banner/df-engagement-banner.component';
 import { DfLicenseCheckService } from './shared/services/df-license-check.service';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { AuthService } from './shared/services/auth.service';
@@ -22,7 +23,13 @@ import { filter } from 'rxjs/operators';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   standalone: true,
-  imports: [DfSideNavComponent, RouterOutlet, NgIf, AsyncPipe],
+  imports: [
+    DfSideNavComponent,
+    DfEngagementBannerComponent,
+    RouterOutlet,
+    NgIf,
+    AsyncPipe,
+  ],
 })
 export class AppComponent implements OnInit {
   title = 'df-admin-interface';

src/app/shared/components/df-engagement-banner/df-engagement-banner.component.html

@@ -0,0 +1,13 @@
+<ng-container *ngIf="showBanner">
+  <div class="engagement-banner">
+    <div class="banner-content">
+      <span class="banner-text">
+        {{ 'engagementBanner.message' | transloco }}
+      </span>
+      <button class="cta-button" (click)="openCalendly()">
+        {{ 'engagementBanner.ctaButton' | transloco }}
+      </button>
+    </div>
+  </div>
+  <div class="banner-spacer"></div>
+</ng-container>

src/app/shared/components/df-engagement-banner/df-engagement-banner.component.scss

@@ -0,0 +1,79 @@
+.engagement-banner {
+  background-color: #ffd9b3;
+  color: #2d2d2d;
+  padding: 12px 20px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  font-family: inherit;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1100;
+
+  .banner-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 15px;
+    max-width: 1200px;
+    margin: 0 auto;
+    position: relative;
+  }
+
+  .banner-text {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.4;
+  }
+
+  .cta-button {
+    background-color: #7c3aed;
+    color: white;
+    border: none;
+    padding: 8px 20px;
+    border-radius: 4px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+    white-space: nowrap;
+
+    &:hover {
+      background-color: #6a28d9;
+    }
+
+    &:focus {
+      outline: 2px solid #7c3aed;
+      outline-offset: 2px;
+    }
+  }
+}
+
+.banner-spacer {
+  height: 56px;
+}
+
+@media (max-width: 768px) {
+  .banner-spacer {
+    height: 72px;
+  }
+  .engagement-banner {
+    padding: 10px 15px;
+
+    .banner-content {
+      flex-direction: column;
+      gap: 10px;
+      padding-right: 40px;
+    }
+
+    .banner-text {
+      font-size: 13px;
+      text-align: center;
+    }
+
+    .cta-button {
+      padding: 8px 16px;
+      font-size: 13px;
+    }
+  }
+}

src/app/shared/components/df-engagement-banner/df-engagement-banner.component.ts

@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DfSystemConfigDataService } from '../../services/df-system-config-data.service';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { TranslocoModule } from '@ngneat/transloco';
+
+@UntilDestroy({ checkProperties: true })
+@Component({
+  selector: 'df-engagement-banner',
+  templateUrl: './df-engagement-banner.component.html',
+  styleUrls: ['./df-engagement-banner.component.scss'],
+  standalone: true,
+  imports: [CommonModule, TranslocoModule],
+})
+export class DfEngagementBannerComponent implements OnInit {
+  showBanner = false;
+  calendlyUrl =
+    'https://calendly.com/dreamfactory-platform/expert-consultation-lab-setup';
+
+  constructor(private systemConfigService: DfSystemConfigDataService) {}
+
+  ngOnInit() {
+    this.systemConfigService.environment$
+      .pipe(untilDestroyed(this))
+      .subscribe(environment => {
+        const license = environment.platform?.license?.toUpperCase();
+        const isTrial = environment.platform?.isTrial ?? false;
+
+        this.showBanner = license === 'OPEN SOURCE' || isTrial;
+      });
+  }
+
+  openCalendly() {
+    window.open(this.calendlyUrl, '_blank');
+  }
+}

src/assets/i18n/en.json

@@ -442,5 +442,9 @@
   "language": "Change language",
   "languages": {
     "en": "English"
+  },
+  "engagementBanner": {
+    "message": "Testing DreamFactory? Let's show you what's possible. Book your free walkthrough",
+    "ctaButton": "Schedule Now"
   }
 }