Issue/159 updated api creation

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

@@ -0,0 +1,37 @@
+<div class="app-container" style="padding: 12px 20px">
+  <h1 mat-dialog-title style="text-align: center">Unlock Service</h1>
+  <mat-dialog-content>
+    <div class="paywall-container">
+      <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>
+      </div>
+      <h2>{{ 'paywall.speakToHuman' | transloco }}</h2>
+    </div>
+    <h3 class="paywall-contact">
+      <a href="tel:+1 415-993-5877"
+        >{{ 'phone' | transloco }}: +1 415-993-5877</a
+      >
+      |
+      <a href="mailto:info@dreamfactory.com"
+        >{{ 'email' | transloco }}: info@dreamfactory.com</a
+      >
+    </h3>
+    <div #calendlyWidget class="calendly-inline-widget"></div>
+  </mat-dialog-content>
+</div>

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

@@ -28,7 +28,7 @@ <h3>
             <input
               matInput
               [(ngModel)]="search"
-              placeholder="SQL..."
+              placeholder="SQL, AWS, MongoDB, etc."
               [ngModelOptions]="{ standalone: true }" />
           </mat-form-field>
           <!-- <mat-form-field class="dynamic-width" appearance="outline">
@@ -41,26 +41,53 @@ <h3>
               </mat-option>
             </mat-select>
           </mat-form-field> -->
-          <div class="grid-wrapper grid-col-auto">
-            <label
-              class="radio-card"
-              *ngFor="let type of filteredServiceTypes; let i = index">
-              <input
-                formControlName="type"
-                type="radio"
-                [value]="type.name"
-                (input)="nextStep(stepper)" />
-              <div class="card-content-wrapper">
-                <span class="check-icon"></span>
-                <div class="card-content">
-                  <img
-                    class="card-icon"
-                    [src]="getBackgroundImage(type.name)"
-                    [alt]="type.label" />
-                  <h4 class="text-center">{{ type.label }}</h4>
+          <div class="full-width">
+            <div class="grid-wrapper grid-col-auto">
+              <label
+                class="radio-card"
+                *ngFor="let type of filteredServiceTypes; let i = index">
+                <input
+                  formControlName="type"
+                  type="radio"
+                  [value]="type.name"
+                  (input)="nextStep(stepper)" />
+                <div class="card-content-wrapper" [class]="type.class">
+                  <span class="check-icon"></span>
+                  <div class="card-content">
+                    <img
+                      class="card-icon"
+                      [src]="getBackgroundImage(type.name)"
+                      [alt]="type.label" />
+                    <h4 class="text-center">{{ type.label }}</h4>
+                  </div>
                 </div>
-              </div>
-            </label>
+              </label>
+              <label
+                class="radio-card"
+                *ngFor="let type of notIncludedServices; let i = index">
+                <input
+                  formControlName="type"
+                  type="radio"
+                  [value]="type.name"
+                  (input)="nextStep(stepper)"
+                  [attr.disabled]="true" />
+                <div class="card-content-wrapper" [class]="type.class">
+                  <span class="check-icon"></span>
+                  <div class="card-content">
+                    <img
+                      class="card-icon"
+                      [src]="getBackgroundImage(type.name)"
+                      [alt]="type.label" />
+                    <h4 class="text-center">{{ type.label }}</h4>
+                  </div>
+                </div>
+                <ng-container *ngIf="type.class === 'not-included'">
+                  <button mat-button (click)="openDialog()" class="unlock-btn">
+                    Unlock Now
+                  </button>
+                </ng-container>
+              </label>
+            </div>
           </div>
           <div>
             <button mat-button matStepperNext type="button">Next</button>

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

@@ -15,9 +15,15 @@ label.radio-card {
     padding: 12px;
     display: grid;
     box-shadow: 0 2px 4px 0 rgba(219, 215, 215, 0.04);
+    border: 1px solid #e3e3e3;
     background-size: contain;
     background-repeat: no-repeat;
-    opacity: 0.8;
+
+    &.not-included {
+      opacity: 0.5;
+      cursor: default !important;
+      pointer-events: none !important;
+    }
   }
 
   .check-icon {
@@ -95,3 +101,14 @@ mat-icon {
   align-items: center;
   justify-content: center;
 }
+
+.calendly-inline-widget {
+  height: 500px;
+}
+
+.unlock-btn {
+  position: relative;
+  top: -95px;
+  right: -55px;
+  color: red;
+}

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

@@ -1,5 +1,11 @@
 import { NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
-import { Component, Inject, OnInit } from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  Inject,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
 import {
   FormBuilder,
   FormControl,
@@ -42,6 +48,7 @@ import { DfPaywallComponent } from 'src/app/shared/components/df-paywall/df-payw
 import { CommonModule } from '@angular/common';
 import { MatIconModule } from '@angular/material/icon';
 import { HttpClient } from '@angular/common/http';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 
 @UntilDestroy({ checkProperties: true })
 @Component({
@@ -79,6 +86,7 @@ export class DfServiceDetailsComponent implements OnInit {
   edit = false;
   isDatabase = false;
   serviceTypes: Array<ServiceType>;
+  notIncludedServices: Array<ServiceType>;
   serviceForm: FormGroup;
   faCircleInfo = faCircleInfo;
   serviceData: Service;
@@ -95,7 +103,8 @@ export class DfServiceDetailsComponent implements OnInit {
     private servicesService: DfBaseCrudService,
     private router: Router,
     private systemConfigDataService: DfSystemConfigDataService,
-    private http: HttpClient
+    private http: HttpClient,
+    public dialog: MatDialog
   ) {
     this.serviceForm = this.fb.group({
       type: ['', Validators.required],
@@ -129,16 +138,40 @@ export class DfServiceDetailsComponent implements OnInit {
         const { data, serviceTypes, groups } = route;
         const licenseType = env.platform?.license;
         this.serviceTypes = serviceTypes;
-        if (licenseType === 'SILVER') {
-          this.serviceTypes.push(
-            ...GOLD_SERVICES.filter(s => groups.includes(s.group))
-          );
-        }
-        if (licenseType === 'OPEN SOURCE') {
-          this.serviceTypes.push(
-            ...SILVER_SERVICES.filter(s => groups.includes(s.group)),
-            ...GOLD_SERVICES.filter(s => groups.includes(s.group))
-          );
+        this.notIncludedServices = [];
+        if (this.isDatabase) {
+          if (licenseType === 'SILVER') {
+            this.notIncludedServices.push(
+              ...GOLD_SERVICES.map(s => {
+                s.class = 'not-included';
+                return s;
+              }).filter(s => groups.includes(s.group))
+            );
+          }
+          if (licenseType === 'OPEN SOURCE') {
+            this.notIncludedServices.push(
+              ...SILVER_SERVICES.map(s => {
+                s.class = 'not-included';
+                return s;
+              }).filter(s => groups.includes(s.group)),
+              ...GOLD_SERVICES.map(s => {
+                s.class = 'not-included';
+                return s;
+              }).filter(s => groups.includes(s.group))
+            );
+          }
+        } else {
+          if (licenseType === 'SILVER') {
+            this.serviceTypes.push(
+              ...GOLD_SERVICES.filter(s => groups.includes(s.group))
+            );
+          }
+          if (licenseType === 'OPEN SOURCE') {
+            this.serviceTypes.push(
+              ...SILVER_SERVICES.filter(s => groups.includes(s.group)),
+              ...GOLD_SERVICES.filter(s => groups.includes(s.group))
+            );
+          }
         }
         this.serviceData = data;
         if (this.edit) {
@@ -183,7 +216,7 @@ export class DfServiceDetailsComponent implements OnInit {
 
   get subscriptionRequired() {
     return (
-      this.serviceForm.controls['type'].value && this.configSchema.length === 0
+      this.serviceForm.controls['type'].value && this.configSchema?.length === 0
     );
   }
 
@@ -260,7 +293,7 @@ export class DfServiceDetailsComponent implements OnInit {
   }
 
   getBackgroundImage(typeLable: string) {
-    const image = this.images.find(img => img.label == typeLable);
+    const image = this.images?.find(img => img.label == typeLable);
     if (!image) {
       return '';
     }
@@ -279,9 +312,40 @@ export class DfServiceDetailsComponent implements OnInit {
   nextStep(stepper: MatStepper) {
     stepper.next();
   }
+
+  openDialog() {
+    const dialogRef = this.dialog.open(DfPaywallModal);
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    dialogRef.afterClosed().subscribe(result => {});
+  }
 }
 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,
+    });
+  }
+}

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

@@ -84,7 +84,7 @@ <h3>API Scripting</h3>
       </ng-container>
       <mat-nav-list *ngIf="isLoggedIn$ | async">
         <button class="search-btn" mat-button (click)="handleSearchClick()">
-          {{ 'Search Features' | transloco }}
+          {{ 'searchFeatures' | transloco }}
           <span>
             <fa-icon [icon]="faMagnifyingGlass"></fa-icon>
           </span>

src/app/shared/types/service.ts

@@ -3,6 +3,7 @@ export interface ServiceType {
   label: string;
   description: string;
   group: string;
+  class?: string;
   configSchema: Array<ConfigSchema>;
 }
 

src/assets/i18n/en.json

@@ -101,6 +101,7 @@
   "toggleNav": "Toggle navigation",
   "desktopFile": "Upload File",
   "githubFile": "Github Import",
+  "searchFeatures": "Search Features",
   "scriptType": "Script Type",
   "scriptTypes": {
     "javascript": "JavaScript",