-
-
-
![]()
-
{{ type.label }}
+
+
+
-
+
+
+
diff --git a/src/app/adf-services/df-service-details/df-service-details.component.scss b/src/app/adf-services/df-service-details/df-service-details.component.scss
index ce960eb2..aa697ac7 100644
--- a/src/app/adf-services/df-service-details/df-service-details.component.scss
+++ b/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;
+}
diff --git a/src/app/adf-services/df-service-details/df-service-details.component.ts b/src/app/adf-services/df-service-details/df-service-details.component.ts
index 59bb671f..bb14e433 100644
--- a/src/app/adf-services/df-service-details/df-service-details.component.ts
+++ b/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;
+ notIncludedServices: Array;
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,
+ });
+ }
+}
diff --git a/src/app/shared/components/df-side-nav/df-side-nav.component.html b/src/app/shared/components/df-side-nav/df-side-nav.component.html
index 5019b45b..24a94b22 100644
--- a/src/app/shared/components/df-side-nav/df-side-nav.component.html
+++ b/src/app/shared/components/df-side-nav/df-side-nav.component.html
@@ -84,7 +84,7 @@ API Scripting