Develop paywall

src/app/adf-services/df-service-details/df-paywall-modal.html

@@ -6,19 +6,15 @@ <h1 mat-dialog-title style="text-align: center">Unlock Service</h1>
       <h2>{{ 'paywall.header' | transloco }}</h2>
       <h2>{{ 'paywall.subheader' | transloco }}</h2>
       <div class="details-section">
-        <div class="dynamic-width">
-          <h4>{{ 'paywall.hostedTrial' | transloco }}</h4>
-          <p>{{ 'paywall.bookTime' | transloco }}</p>
-        </div>
-        <div class="dynamic-width">
-          <h4>{{ 'paywall.ossVersion' | transloco }}</h4>
-          <p>
-            {{ 'paywall.signup' | transloco }}<a
-              href="https://genie.dreamfactory.com/?utm_source=platform&utm_medium=paywall&utm_campaign=hosted"
-              target="_blank"
-              >{{ 'paywall.trial' | transloco }}</a
-            >{{ 'paywall.gain' | transloco }}
-          </p>
+        <div class="info-columns">
+          <div class="info-column">
+            <h4>{{ 'paywall.hostedTrial' | transloco }}</h4>
+            <p [innerHTML]="'paywall.bookTime' | transloco"></p>
+          </div>
+          <div class="info-column">
+            <h4>{{ 'paywall.learnMoreTitle' | transloco }}</h4>
+            <p>{{ 'paywall.gain' | transloco }}</p>
+          </div>
         </div>
       </div>
       <h2>{{ 'paywall.speakToHuman' | transloco }}</h2>
@@ -29,7 +25,7 @@ <h3 class="paywall-contact">
       >
       |
       <a href="mailto:info@dreamfactory.com">
-        {{ 'email' | transloco }}: info\&#64;dreamfactory.com
+        {{ 'email' | transloco }}: info&#64;dreamfactory.com
       </a>
     </h3>
     <div #calendlyWidget class="calendly-inline-widget"></div>

src/app/shared/components/df-paywall/df-paywall.component.html

@@ -2,20 +2,15 @@
   <h2>{{ 'paywall.header' | transloco }}</h2>
   <h2>{{ 'paywall.subheader' | transloco }}</h2>
   <div class="details-section">
-    <div class="dynamic-width">
-      <h4>{{ 'paywall.hostedTrial' | transloco }}</h4>
-      <p>{{ 'paywall.bookTime' | transloco }}</p>
-    </div>
-    <div class="dynamic-width">
-      <h4>{{ 'paywall.ossVersion' | transloco }}</h4>
-      <p>
-        {{ 'paywall.signup' | transloco
-        }}<a
-          href="https://genie.dreamfactory.com/?utm_source=platform&utm_medium=paywall&utm_campaign=hosted"
-          target="_blank"
-          >{{ 'paywall.trial' | transloco }}</a
-        >{{ 'paywall.gain' | transloco }}
-      </p>
+    <div class="info-columns">
+      <div class="info-column">
+        <h4>{{ 'paywall.hostedTrial' | transloco }}</h4>
+        <p [innerHTML]="'paywall.bookTime' | transloco"></p>
+      </div>
+      <div class="info-column">
+        <h4>{{ 'paywall.learnMoreTitle' | transloco }}</h4>
+        <p>{{ 'paywall.gain' | transloco }}</p>
+      </div>
     </div>
   </div>
   <h2>{{ 'paywall.speakToHuman' | transloco }}</h2>

src/app/shared/components/df-paywall/df-paywall.component.scss

@@ -2,19 +2,42 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
 }
 
 .calendly-inline-widget {
   min-width: 320px;
   width: 100%;
-  height: 100%;
+  height: 700px;
+  margin: 20px 0;
 }
+
 .details-section {
   margin: 32px 0;
   max-width: 690px;
+  width: 100%;
 }
+
+.info-columns {
+  display: flex;
+  gap: 32px;
+  justify-content: space-between;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+}
+
+.info-column {
+  flex: 1;
+  min-width: 0;
+}
+
 .paywall-contact {
   width: 100%;
   text-align: center;
-  padding-bottom: 32px;
+  padding: 32px 0;
+  margin-top: 20px;
 }

src/app/shared/components/df-side-nav/df-side-nav.component.html

@@ -153,6 +153,7 @@ <h1 class="page-header">
         mat-flat-button
         class="nav-item"
         [class.active]="isActive(item)"
+        [class.commercial-feature]="isCommercialFeature(item.path)"
         (click)="handleNavClick(item)">
         <span class="nav-item">
           <ng-container *ngIf="item?.icon">

src/app/shared/components/df-side-nav/df-side-nav.component.scss

@@ -174,6 +174,31 @@ $red-palette: mat.define-palette(mat.$red-palette);
       .expansion-panel {
         background-color: #f6f2fa;
       }
+      &.commercial-feature {
+        opacity: 0.7;
+        position: relative;
+
+        &::after {
+          content: '';
+          background-image: url('/assets/img/lock-icon.svg');
+          background-size: contain;
+          width: 14px;
+          height: 14px;
+          position: absolute;
+          right: 12px;
+          top: 50%;
+          transform: translateY(-50%);
+          opacity: 0.6;
+        }
+
+        &:hover {
+          opacity: 1;
+
+          &::after {
+            opacity: 0.8;
+          }
+        }
+      }
     }
   }
   .sidenav-content {

src/app/shared/components/df-side-nav/df-side-nav.component.ts

@@ -43,6 +43,7 @@ import { DfThemeToggleComponent } from '../df-theme-toggle/df-theme-toggle.compo
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { DfSnackbarService } from 'src/app/shared/services/df-snackbar.service';
+import { DfPaywallService } from '../../services/df-paywall.service';
 @UntilDestroy({ checkProperties: true })
 @Component({
   selector: 'df-side-nav',
@@ -99,7 +100,8 @@ export class DfSideNavComponent implements OnInit {
     private transloco: TranslocoService,
     private themeService: DfThemeService,
     private searchService: DfSearchService,
-    private snackbarService: DfSnackbarService
+    private snackbarService: DfSnackbarService,
+    private paywallService: DfPaywallService
   ) {}
 
   ngOnInit(): void {
@@ -218,4 +220,8 @@ export class DfSideNavComponent implements OnInit {
   get availableLanguages() {
     return this.transloco.getAvailableLangs() as string[];
   }
+
+  isCommercialFeature(route: string): boolean {
+    return this.paywallService.isCommercialFeature(route);
+  }
 }

src/app/shared/services/df-paywall.service.ts

@@ -7,6 +7,17 @@ import { DfErrorService } from './df-error.service';
   providedIn: 'root',
 })
 export class DfPaywallService {
+  private commercialFeatures = [
+    'event-scripts',
+    'rate-limiting',
+    'scheduler',
+    'reporting',
+  ];
+
+  isCommercialFeature(route: string): boolean {
+    return this.commercialFeatures.some(feature => route.includes(feature));
+  }
+
   constructor(
     private systemConfigDataService: DfSystemConfigDataService,
     private errorService: DfErrorService

src/assets/i18n/en.json

@@ -374,14 +374,12 @@
   },
   "paywall": {
     "header": "Access to this feature is available via our commercial product.",
-    "subheader": "Gain access to the features you want now. No credit card required.",
-    "hostedTrial": "Are you currently on a hosted trial?",
-    "bookTime": "Book some time with our team below and gain access to enterprise features including restricted administrators, request limiting, API scheduling, and lifecycle reporting.",
-    "ossVersion": "Using our OSS version?",
-    "signup": "Sign up for a ",
-    "trial": "free hosted trial",
-    "gain": " and gain access to additional connectors, or schedule time with our team below to install an on-premise enterprise instance and test all enterprise features.",
-    "speakToHuman": "Speak to a human"
+    "subheader": "Gain access to the features you want now.",
+    "hostedTrial": "What is in the commercial tool?",
+    "bookTime": "A comprehensive matrix of all the features in our commercial offering can be found <a href=\"https://dreamfactory.com\" target=\"_blank\">here</a> on our website.",
+    "learnMoreTitle": "Want to learn more?",
+    "gain": "Schedule time with our team to discuss enterprise features including restricted administrators, request limiting, API scheduling, and lifecycle reporting.",
+    "speakToHuman": "Free consultation with an engineer"
   },
   "language": "Change language",
   "languages": {