[DP-736] Bringing ai button back with paywall tracing implementation

.gitignore

@@ -39,3 +39,5 @@ testem.log
 # System files
 .DS_Store
 Thumbs.db
+
+.config/

environments/environment.ts

@@ -5,4 +5,4 @@ export const environment = {
     '36fda24fe5588fa4285ac6c6c2fdfbdb6b6bc9834699774c9bf777f706d05a88',
   dfFileManagerApiKey:
     'b5cb82af7b5d4130f36149f90aa2746782e59a872ac70454ac188743cb55b0ba',
-}; 
+};

src/app/adf-event-scripts/df-manage-scripts/df-manage-scripts.component.html

@@ -1,4 +1,6 @@
-<df-paywall *ngIf="paywall; else allowed"></df-paywall>
+<df-paywall
+  *ngIf="paywall; else allowed"
+  [serviceName]="'Event Scripts'"></df-paywall>
 <ng-template #allowed>
   <df-manage-services-table></df-manage-services-table>
 </ng-template>

src/app/adf-limits/df-manage-limits/df-manage-limits.component.html

@@ -1,4 +1,4 @@
-<df-paywall *ngIf="paywall; else allowed"></df-paywall>
+<df-paywall *ngIf="paywall; else allowed" [serviceName]="'Limits'"></df-paywall>
 <ng-template #allowed>
   <df-manage-limits-table>
     <ng-container topActions>

src/app/adf-reports/df-manage-service-report/df-manage-service-report.component.html

@@ -1,4 +1,6 @@
-<df-paywall *ngIf="paywall; else allowed"></df-paywall>
+<df-paywall
+  *ngIf="paywall; else allowed"
+  [serviceName]="'Reporting'"></df-paywall>
 <ng-template #allowed>
   <df-manage-service-report-table> </df-manage-service-report-table>
 </ng-template>

src/app/adf-scheduler/df-manage-scheduler/df-manage-scheduler.component.html

@@ -1,4 +1,6 @@
-<df-paywall *ngIf="paywall; else allowed"></df-paywall>
+<df-paywall
+  *ngIf="paywall; else allowed"
+  [serviceName]="'Scheduler'"></df-paywall>
 <ng-template #allowed>
   <df-manage-scheduler-table> </df-manage-scheduler-table>
 </ng-template>

src/app/adf-services/df-manage-services/df-manage-services-table.component.ts

@@ -124,9 +124,9 @@ export class DfManageServicesTableComponent extends DfManageTableComponent<Servi
     refresh?: true
   ): void {
     if (this.serviceTypes && this.serviceTypes.length !== 0) {
-      filter = `${filter ? `(${filter}) and ` : ''}(type in ("${this.serviceTypes
-        .map(src => src.name)
-        .join('","')}"))`;
+      filter = `${
+        filter ? `(${filter}) and ` : ''
+      }(type in ("${this.serviceTypes.map(src => src.name).join('","')}"))`;
     }
 
     this.serviceService

src/app/adf-services/df-manage-services/df-manage-services.component.html

@@ -1,4 +1,6 @@
-<df-paywall *ngIf="paywall; else allowed"></df-paywall>
+<df-paywall
+  *ngIf="paywall; else allowed"
+  [serviceName]="'Services'"></df-paywall>
 <ng-template #allowed>
   <df-manage-services-table></df-manage-services-table>
 </ng-template>

src/app/adf-services/df-service-details/df-service-details.component.html

@@ -87,7 +87,10 @@ <h4 class="text-center" style="color: black !important">
                   </div>
                 </div>
                 <ng-container *ngIf="type.class === 'not-included'">
-                  <button mat-button (click)="openDialog()" class="unlock-btn">
+                  <button
+                    mat-button
+                    (click)="openDialog(type.label || type.name)"
+                    class="unlock-btn">
                     Unlock Now
                   </button>
                 </ng-container>
@@ -569,7 +572,11 @@ <h4>Full Access</h4>
       <mat-label>{{
         'services.controls.serviceType.label' | transloco
       }}</mat-label>
-      <mat-select formControlName="type">
+      <mat-select
+        formControlName="type"
+        (selectionChange)="
+          onServiceTypeSelect(getServiceTypeLabel($event.value))
+        ">
         <mat-option *ngFor="let type of serviceTypes" [value]="type.name">
           {{ type.label }}
         </mat-option>
@@ -821,4 +828,7 @@ <h4>Full Access</h4>
     </div>
   </ng-template>
 </form>
-<df-paywall *ngIf="subscriptionRequired"></df-paywall>
+<df-paywall
+  *ngIf="subscriptionRequired"
+  [serviceName]="selectedServiceTypeLable || 'Unable to fetch service name'">
+</df-paywall>

src/app/adf-services/df-service-details/df-service-details.component.ts

@@ -3,6 +3,7 @@ import {
   Component,
   ElementRef,
   Inject,
+  Input,
   OnInit,
   ViewChild,
 } from '@angular/core';
@@ -85,6 +86,9 @@ import { MatCardModule } from '@angular/material/card';
 import { TitleCasePipe } from '@angular/common';
 import { MatDividerModule } from '@angular/material/divider';
 import { DfSystemService } from 'src/app/shared/services/df-system.service';
+import { DfUserDataService } from 'src/app/shared/services/df-user-data.service';
+import { DfPaywallService } from 'src/app/shared/services/df-paywall.service';
+import { DfPaywallModal } from 'src/app/shared/components/df-paywall-modal/df-paywall-modal.component';
 
 // Add this interface before the @Component decorator
 interface ComponentOption {
@@ -116,6 +120,14 @@ interface CategorizedField {
   advanced: ConfigSchema[];
 }
 
+interface ServiceResponse {
+  resource: Array<{
+    id: number;
+    name: string;
+    [key: string]: any;
+  }>;
+}
+
 @UntilDestroy({ checkProperties: true })
 @Component({
   selector: 'df-service-details',
@@ -167,6 +179,7 @@ export class DfServiceDetailsComponent implements OnInit {
   serviceForm: FormGroup;
   faCircleInfo = faCircleInfo;
   serviceData: Service;
+  selectedServiceTypeLable: string;
   configSchema: Array<ConfigSchema>;
   images: Array<ImageObject>;
   search = '';
@@ -800,8 +813,10 @@ export class DfServiceDetailsComponent implements OnInit {
     stepper.next();
   }
 
-  openDialog() {
-    const dialogRef = this.dialog.open(DfPaywallModal);
+  openDialog(serviceTypeName: string) {
+    const dialogRef = this.dialog.open(DfPaywallModal, {
+      data: { serviceName: serviceTypeName },
+    });
     dialogRef.afterClosed().subscribe();
   }
 
@@ -1189,42 +1204,19 @@ export class DfServiceDetailsComponent implements OnInit {
   onAccessLevelSelect(level: string) {
     this.selectedAccessLevel = level;
   }
+
+  getServiceTypeLabel(value: string): string {
+    const selectedType = this.serviceTypes.find(type => type.name === value);
+    return selectedType ? selectedType.label : value;
+  }
+
+  onServiceTypeSelect(selectedServiceTypeLable: string) {
+    this.selectedServiceTypeLable =
+      selectedServiceTypeLable || 'Unknown. Unable to identify Service Type';
+  }
 }
 interface ImageObject {
   alt: string;
   src: string;
   label: string;
 }
-
-@Component({
-  selector: 'df-paywall-modal',
-  templateUrl: 'df-paywall-modal.html',
-  styleUrls: ['./df-service-details.component.scss'],
-  standalone: true,
-  imports: [
-    MatDialogModule,
-    MatButtonModule,
-    DfPaywallComponent,
-    TranslocoPipe,
-  ],
-})
-// eslint-disable-next-line @angular-eslint/component-class-suffix
-export class DfPaywallModal {
-  @ViewChild('calendlyWidget') calendlyWidget: ElementRef;
-
-  ngAfterViewInit(): void {
-    (window as any)['Calendly'].initInlineWidget({
-      url: 'https://calendly.com/dreamfactory-platform/unlock-all-features',
-      parentElement: this.calendlyWidget.nativeElement,
-      autoLoad: false,
-    });
-  }
-}
-
-interface ServiceResponse {
-  resource: Array<{
-    id: number;
-    name: string;
-    [key: string]: any;
-  }>;
-}

src/app/ai/ai.component.html

@@ -0,0 +1,62 @@
+<div *ngIf="paywall" class="ai-paywall-container">
+  <div class="ai-intro-section">
+    <div class="ai-intro-content">
+      <h1 class="ai-title">AI Gateway Data Platform</h1>
+      <div class="ai-description">
+        <p class="lead-text">
+          Unlock the power of AI with your data! Our upcoming AI capabilities
+          will enable you to:
+        </p>
+        <ul class="feature-list">
+          <li>
+            ✨ <strong>Secure Dataset Exposure:</strong> Safely expose your
+            datasets to AI clients with full RBAC protections
+          </li>
+          <li>
+            🔐 <strong>Enterprise-Grade Security:</strong> Maintain complete
+            control over data access and permissions
+          </li>
+          <li>
+            🚀 <strong>Seamless Integration:</strong> Connect popular AI
+            platforms and tools directly to your DreamFactory APIs
+          </li>
+          <li>
+            📊 <strong>Intelligent Analytics:</strong> Generate insights and
+            recommendations powered by machine learning
+          </li>
+        </ul>
+        <div class="beta-callout">
+          <h3>🎯 Ready to Get Started?</h3>
+          <p>
+            Contact us below to join our exclusive AI beta program and be among
+            the first to experience these cutting-edge capabilities!
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <df-paywall [serviceName]="'AI'"></df-paywall>
+</div>
+<ng-template #allowed>
+  <div class="ai-container">
+    <h1>AI Assistant</h1>
+    <p>
+      Welcome to the AI section! This is where AI-powered features will be
+      implemented.
+    </p>
+    <div class="ai-content">
+      <div class="feature-card">
+        <h3>Smart Analytics</h3>
+        <p>AI-powered data insights and analytics</p>
+      </div>
+      <div class="feature-card">
+        <h3>Automated Tasks</h3>
+        <p>Intelligent automation and task management</p>
+      </div>
+      <div class="feature-card">
+        <h3>Predictive Modeling</h3>
+        <p>Advanced machine learning predictions</p>
+      </div>
+    </div>
+  </div>
+</ng-template>