From c5f05f3b78e5a177c6f443f5917657d68aadf1a7 Mon Sep 17 00:00:00 2001 From: Kevin McGahey Date: Tue, 26 Nov 2024 15:41:22 -0800 Subject: [PATCH 1/4] paywall screen update --- .../df-service-details/df-paywall-modal.html | 28 ++++++++----------- .../df-paywall/df-paywall.component.html | 27 +++++++----------- .../df-paywall/df-paywall.component.scss | 27 ++++++++++++++++-- src/assets/i18n/en.json | 14 ++++------ 4 files changed, 52 insertions(+), 44 deletions(-) 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..8ee48bd3 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,30 +6,24 @@

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 }}

- {{ 'phone' | transloco }}: +1 415-993-5877 + {{ 'phone' | transloco }}: +1 415-993-5877 | - {{ '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..89e4e6d4 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 }}

@@ -23,7 +18,5 @@

{{ 'paywall.speakToHuman' | transloco }}

{{ 'phone' | transloco }}: +1 415-993-5877 | - {{ 'email' | transloco }}: info@dreamfactory.com + {{ 'email' | transloco }}: info@dreamfactory.com

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..83e8227f 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/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": { From 7fe3a2ae37489886faeeb7ec703eceff9bde5395 Mon Sep 17 00:00:00 2001 From: Kevin McGahey Date: Tue, 26 Nov 2024 15:42:10 -0800 Subject: [PATCH 2/4] paywall screen update --- src/app/adf-services/df-service-details/df-paywall-modal.html | 4 +++- .../shared/components/df-paywall/df-paywall.component.html | 4 +++- .../shared/components/df-paywall/df-paywall.component.scss | 2 +- 3 files changed, 7 insertions(+), 3 deletions(-) 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 8ee48bd3..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 @@ -20,7 +20,9 @@

{{ 'paywall.learnMoreTitle' | transloco }}

{{ 'paywall.speakToHuman' | transloco }}

- {{ 'phone' | transloco }}: +1 415-993-5877 + {{ 'phone' | transloco }}: +1 415-993-5877 | {{ '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 89e4e6d4..88a99e58 100644 --- a/src/app/shared/components/df-paywall/df-paywall.component.html +++ b/src/app/shared/components/df-paywall/df-paywall.component.html @@ -18,5 +18,7 @@

{{ 'paywall.speakToHuman' | transloco }}

{{ 'phone' | transloco }}: +1 415-993-5877 | - {{ 'email' | transloco }}: info@dreamfactory.com + {{ 'email' | transloco }}: info@dreamfactory.com

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 83e8227f..531f0c60 100644 --- a/src/app/shared/components/df-paywall/df-paywall.component.scss +++ b/src/app/shared/components/df-paywall/df-paywall.component.scss @@ -24,7 +24,7 @@ display: flex; gap: 32px; justify-content: space-between; - + @media (max-width: 768px) { flex-direction: column; } From 17f83a2e13c02293cc93e51c6b80201964b97bc0 Mon Sep 17 00:00:00 2001 From: Kevin McGahey Date: Tue, 26 Nov 2024 15:51:30 -0800 Subject: [PATCH 3/4] add lock icon to paywalled tabs --- .../df-side-nav/df-side-nav.component.html | 1 + .../df-side-nav/df-side-nav.component.scss | 25 +++++++++++++++++++ .../df-side-nav/df-side-nav.component.ts | 8 +++++- src/app/shared/services/df-paywall.service.ts | 11 ++++++++ src/assets/img/lock-icon.svg | 4 +++ 5 files changed, 48 insertions(+), 1 deletion(-) create mode 100644 src/assets/img/lock-icon.svg 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..605931f5 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/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 From 06fea75cac959d603cce4e3b4bf42ac1156ebb8f Mon Sep 17 00:00:00 2001 From: Kevin McGahey Date: Tue, 26 Nov 2024 15:52:06 -0800 Subject: [PATCH 4/4] add lock icon to paywalled tabs --- .../shared/components/df-side-nav/df-side-nav.component.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 605931f5..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 @@ -177,7 +177,7 @@ $red-palette: mat.define-palette(mat.$red-palette); &.commercial-feature { opacity: 0.7; position: relative; - + &::after { content: ''; background-image: url('/assets/img/lock-icon.svg'); @@ -193,7 +193,7 @@ $red-palette: mat.define-palette(mat.$red-palette); &:hover { opacity: 1; - + &::after { opacity: 0.8; }