From 03afd9101f2516a241ca47572f9e0dd4b27817dc Mon Sep 17 00:00:00 2001 From: Thomas <4159106+dtslvr@users.noreply.github.com> Date: Mon, 31 May 2021 21:06:39 +0200 Subject: [PATCH] Extend pricing page --- apps/api/src/app/user/user.service.ts | 2 +- .../src/app/pages/pricing/pricing-page.html | 249 ++++++++++++------ .../app/pages/pricing/pricing-page.module.ts | 10 +- .../src/app/pages/pricing/pricing-page.scss | 13 + .../src/lib/interfaces/user.interface.ts | 2 +- 5 files changed, 194 insertions(+), 82 deletions(-) diff --git a/apps/api/src/app/user/user.service.ts b/apps/api/src/app/user/user.service.ts index fc5a461c4..832200af8 100644 --- a/apps/api/src/app/user/user.service.ts +++ b/apps/api/src/app/user/user.service.ts @@ -58,7 +58,7 @@ export class UserService { }, subscription: { expiresAt: resetHours(add(new Date(), { days: 7 })), - type: 'Trial' + type: 'Premium' } }; } diff --git a/apps/client/src/app/pages/pricing/pricing-page.html b/apps/client/src/app/pages/pricing/pricing-page.html index 2e580c61a..1ade326bb 100644 --- a/apps/client/src/app/pages/pricing/pricing-page.html +++ b/apps/client/src/app/pages/pricing/pricing-page.html @@ -2,95 +2,178 @@

Pricing Plans

+

+ Our official + Ghostfolio cloud offering is the easiest way to get + started. Due to the time it saves, this will be the best option for most + people. The revenue is used for covering the hosting costs. +

+

+ If you prefer to run Ghostfolio on your own + infrastructure, please find the source code and further instructions on + GitHub. +

-
- -

Open Source

-

Host your Ghostfolio instance by yourself.

-
    -
  • - - Portfolio Performance -
    • -
  • - - Portfolio Summary -
    • -
  • - - Unlimited Transactions -
    • -
  • - - Advanced Insights -
    • -
-

- Free -

+
+ +
+

Open Source

+

+ For tech-savvy investors who prefer to run + Ghostfolio on their own infrastructure. +

+
    +
  • + + Unlimited Transactions +
    • +
  • + + Portfolio Performance +
    • +
  • + + Zen Mode +
    • +
  • + + Portfolio Summary +
    • +
  • + + Advanced Insights +
    • +
+
+

Self-hosted.

+

Free
-
+
-

- Diamond - -

-

- Get a fully managed Ghostfolio cloud offering. -

-
    -
  • - - Portfolio Performance -
    • -
  • - - Portfolio Summary -
    • -
  • - - Unlimited Transactions -
    • -
  • +
    +

    Basic

    +

    + For new investors who are just getting started with trading. +

    +
      +
    • + + Unlimited Transactions +
      • +
    • + + Portfolio Performance +
      • +
    • + + Zen Mode +
      • +
    • + +
      • +
    • + +
      • +
    +
    +

    Fully managed Ghostfolio cloud offering.

    +

    Free

    + +
+
+ +
+

+ Premium - Advanced Insights - - +

+

+ For ambitious investors who need the full picture of their + financial assets. +

+
    +
  • + + Unlimited Transactions +
    • +
  • + + Portfolio Performance +
    • +
  • + + Zen Mode +
    • +
  • + + Portfolio Summary +
    • +
  • + + Advanced Insights +
    • +
+
+

Fully managed Ghostfolio cloud offering.

{{ user?.settings.baseCurrency || baseCurrency }} - 2.99 + 0.00 3.99 / Month

@@ -99,4 +182,12 @@
+
+
+ + Create Account + +

It's free

+
+
diff --git a/apps/client/src/app/pages/pricing/pricing-page.module.ts b/apps/client/src/app/pages/pricing/pricing-page.module.ts index 810d9c0bf..02d59a364 100644 --- a/apps/client/src/app/pages/pricing/pricing-page.module.ts +++ b/apps/client/src/app/pages/pricing/pricing-page.module.ts @@ -1,6 +1,8 @@ import { CommonModule } from '@angular/common'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; import { MatCardModule } from '@angular/material/card'; +import { RouterModule } from '@angular/router'; import { PricingPageRoutingModule } from './pricing-page-routing.module'; import { PricingPageComponent } from './pricing-page.component'; @@ -8,7 +10,13 @@ import { PricingPageComponent } from './pricing-page.component'; @NgModule({ declarations: [PricingPageComponent], exports: [], - imports: [CommonModule, MatCardModule, PricingPageRoutingModule], + imports: [ + CommonModule, + MatButtonModule, + MatCardModule, + PricingPageRoutingModule, + RouterModule + ], providers: [], schemas: [CUSTOM_ELEMENTS_SCHEMA] }) diff --git a/apps/client/src/app/pages/pricing/pricing-page.scss b/apps/client/src/app/pages/pricing/pricing-page.scss index 23f5657f2..53f951997 100644 --- a/apps/client/src/app/pages/pricing/pricing-page.scss +++ b/apps/client/src/app/pages/pricing/pricing-page.scss @@ -2,6 +2,15 @@ color: rgb(var(--dark-primary-text)); display: block; + a { + color: rgba(var(--palette-primary-500), 1); + font-weight: bold; + + &:hover { + color: rgba(var(--palette-primary-300), 1); + } + } + .mat-card { &.active { border-color: rgba(var(--palette-primary-500), 1); @@ -11,4 +20,8 @@ :host-context(.is-dark-theme) { color: rgb(var(--light-primary-text)); + + a { + color: rgb(var(--light-primary-text)); + } } diff --git a/libs/common/src/lib/interfaces/user.interface.ts b/libs/common/src/lib/interfaces/user.interface.ts index e480bcd27..6b98ad786 100644 --- a/libs/common/src/lib/interfaces/user.interface.ts +++ b/libs/common/src/lib/interfaces/user.interface.ts @@ -12,6 +12,6 @@ export interface User { settings: UserSettings; subscription: { expiresAt: Date; - type: 'Trial'; + type: 'Basic' | 'Premium'; }; }