diff --git a/src/app/adf-services/df-service-details/df-paywall-modal.html b/src/app/adf-services/df-service-details/df-paywall-modal.html index 18618ad7..521015b4 100644 --- a/src/app/adf-services/df-service-details/df-paywall-modal.html +++ b/src/app/adf-services/df-service-details/df-paywall-modal.html @@ -6,19 +6,15 @@

Unlock Service

{{ 'paywall.header' | transloco }}

{{ 'paywall.subheader' | transloco }}

-
-

{{ 'paywall.hostedTrial' | transloco }}

-

{{ 'paywall.bookTime' | transloco }}

-
-
-

{{ 'paywall.ossVersion' | transloco }}

-

- {{ 'paywall.signup' | transloco }}{{ 'paywall.trial' | transloco }}{{ 'paywall.gain' | transloco }} -

+
+
+

{{ 'paywall.hostedTrial' | transloco }}

+

+
+
+

{{ 'paywall.learnMoreTitle' | transloco }}

+

{{ 'paywall.gain' | transloco }}

+

{{ 'paywall.speakToHuman' | transloco }}

@@ -29,7 +25,7 @@

> | - {{ 'email' | transloco }}: info\@dreamfactory.com + {{ 'email' | transloco }}: info@dreamfactory.com

diff --git a/src/app/shared/components/df-paywall/df-paywall.component.html b/src/app/shared/components/df-paywall/df-paywall.component.html index ec006e31..88a99e58 100644 --- a/src/app/shared/components/df-paywall/df-paywall.component.html +++ b/src/app/shared/components/df-paywall/df-paywall.component.html @@ -2,20 +2,15 @@

{{ 'paywall.header' | transloco }}

{{ 'paywall.subheader' | transloco }}

-
-

{{ 'paywall.hostedTrial' | transloco }}

-

{{ 'paywall.bookTime' | transloco }}

-
-
-

{{ 'paywall.ossVersion' | transloco }}

-

- {{ 'paywall.signup' | transloco - }}{{ 'paywall.trial' | transloco }}{{ 'paywall.gain' | transloco }} -

+
+
+

{{ 'paywall.hostedTrial' | transloco }}

+

+
+
+

{{ 'paywall.learnMoreTitle' | transloco }}

+

{{ 'paywall.gain' | transloco }}

+

{{ 'paywall.speakToHuman' | transloco }}

diff --git a/src/app/shared/components/df-paywall/df-paywall.component.scss b/src/app/shared/components/df-paywall/df-paywall.component.scss index bfde44d5..531f0c60 100644 --- a/src/app/shared/components/df-paywall/df-paywall.component.scss +++ b/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; } 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 eedb30b6..b69c2508 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 @@ -153,6 +153,7 @@

mat-flat-button class="nav-item" [class.active]="isActive(item)" + [class.commercial-feature]="isCommercialFeature(item.path)" (click)="handleNavClick(item)"> diff --git a/src/app/shared/components/df-side-nav/df-side-nav.component.scss b/src/app/shared/components/df-side-nav/df-side-nav.component.scss index b648f954..a6095235 100644 --- a/src/app/shared/components/df-side-nav/df-side-nav.component.scss +++ b/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 { diff --git a/src/app/shared/components/df-side-nav/df-side-nav.component.ts b/src/app/shared/components/df-side-nav/df-side-nav.component.ts index 2e27db9b..89401259 100644 --- a/src/app/shared/components/df-side-nav/df-side-nav.component.ts +++ b/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); + } } diff --git a/src/app/shared/services/df-paywall.service.ts b/src/app/shared/services/df-paywall.service.ts index def180e1..a10c7d56 100644 --- a/src/app/shared/services/df-paywall.service.ts +++ b/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 diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index 70f4ef3e..ad539901 100644 --- a/src/assets/i18n/en.json +++ b/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 here 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": { diff --git a/src/assets/img/lock-icon.svg b/src/assets/img/lock-icon.svg new file mode 100644 index 00000000..45a8365b --- /dev/null +++ b/src/assets/img/lock-icon.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file