dreamfactorysoftware · oleksandrkits · Sep 23, 2025 · Sep 22, 2025 · Sep 23, 2025
diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
@@ -0,0 +1,29 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Node.js CI
+
+on:
+  push:
+    branches: ['develop']
+  pull_request:
+    branches: ['develop']
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [22.x]
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+      - run: npm ci
+      - run: npm run build --if-present
+
diff --git a/dist/1326.9e5d3c0d4b2d6a47.js b/dist/1326.9e5d3c0d4b2d6a47.js
diff --git a/dist/1326.9234d3c9df390cdf.js → dist/1326.aa84c706f59b3853.js b/dist/1326.9234d3c9df390cdf.js → dist/1326.aa84c706f59b3853.js
diff --git a/dist/index.html b/dist/index.html
@@ -9,5 +9,5 @@
   <body class="mat-typography">
     <df-root></df-root>
     <script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
-  <script src="runtime.1adb24c16ff25b9a.js" type="module"></script><script src="polyfills.def0190516b19e6b.js" type="module"></script><script src="main.1b31dd8117704925.js" type="module"></script></body>
+  <script src="runtime.92e02248302e3724.js" type="module"></script><script src="polyfills.def0190516b19e6b.js" type="module"></script><script src="main.1b31dd8117704925.js" type="module"></script></body>
 </html>
diff --git a/dist/runtime.1adb24c16ff25b9a.js b/dist/runtime.1adb24c16ff25b9a.js
diff --git a/dist/runtime.92e02248302e3724.js b/dist/runtime.92e02248302e3724.js
diff --git a/src/app/app.component.html b/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 />

diff --git a/src/app/app.component.ts b/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';

diff --git a/src/app/shared/components/df-engagement-banner/df-engagement-banner.component.html b/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>
diff --git a/src/app/shared/components/df-engagement-banner/df-engagement-banner.component.scss b/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;
+    }
+  }
+}
diff --git a/src/app/shared/components/df-engagement-banner/df-engagement-banner.component.ts b/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');
+  }
+}
diff --git a/src/assets/i18n/en.json b/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"
   }
 }