open-source-mirrors
/
ghostfolio
mirror of https://github.com/ghostfolio/ghostfolio
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Extend pricing page

Browse Source
pull/130/head
Thomas 4 years ago
parent 7c22969de1
commit 9144a8c23f
5 changed files with 194 additions and 82 deletions
Show Stats Download Patch File Download Diff File

2
apps/api/src/app/user/user.service.ts
Unescape View File

@ -58,7 +58,7 @@ export class UserService {
},
subscription: {
expiresAt: resetHours(add(new Date(), { days: 7 })),
type: 'Trial'
type: 'Premium'
}
};
}

249
apps/client/src/app/pages/pricing/pricing-page.html
Unescape View File

@ -2,95 +2,178 @@
<div class="row">
<div class="col">
<h3 class="d-flex justify-content-center mb-3" i18n>Pricing Plans</h3>
<p>
Our official
<strong>Ghostfolio</strong> 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.
</p>
<p class="mb-5">
If you prefer to run <strong>Ghostfolio</strong> on your own
infrastructure, please find the source code and further instructions on
<a href="https://github.com/ghostfolio/ghostfolio">GitHub</a>.
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<mat-card class="mb-3">
<h4 i18n>Open Source</h4>
<p>Host your <strong>Ghostfolio</strong> instance by yourself.</p>
<ul class="list-unstyled mb-3">
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1 text-muted"
name="checkmark-circle-outline"
></ion-icon>
<span>Portfolio Performance</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1 text-muted"
name="checkmark-circle-outline"
></ion-icon>
<span>Portfolio Summary</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1 text-muted"
name="checkmark-circle-outline"
></ion-icon>
<span>Unlimited Transactions</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1 text-muted"
name="checkmark-circle-outline"
></ion-icon>
<span>Advanced Insights</span>
</li>
</ul>
<p class="h5 text-right">
<span>Free</span>
</p>
<div class="col-xs-12 col-md-4 mb-3">
<mat-card class="d-flex flex-column h-100">
<div class="flex-grow-1">
<h4 i18n>Open Source</h4>
<p>
For tech-savvy investors who prefer to run
<strong>Ghostfolio</strong> on their own infrastructure.
</p>
<ul class="list-unstyled mb-3">
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1 text-muted"
name="checkmark-circle-outline"
></ion-icon>
<span>Unlimited Transactions</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1 text-muted"
name="checkmark-circle-outline"
></ion-icon>
<span>Portfolio Performance</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1 text-muted"
name="checkmark-circle-outline"
></ion-icon>
<span>Zen Mode</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1 text-muted"
name="checkmark-circle-outline"
></ion-icon>
<span>Portfolio Summary</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1 text-muted"
name="checkmark-circle-outline"
></ion-icon>
<span>Advanced Insights</span>
</li>
</ul>
</div>
<p>Self-hosted.</p>
<p class="h5 text-right">Free</p>
</mat-card>
</div>
<div class="col-xs-12 col-md-6">
<div class="col-xs-12 col-md-4 mb-3">
<mat-card
class="mb-3"
[ngClass]="{ 'active': user?.subscription?.type === 'Trial' }"
class="d-flex flex-column h-100"
[ngClass]="{ 'active': user?.subscription?.type === 'Basic' }"
>
<h4 class="align-items-center d-flex" i18n>
Diamond
<ion-icon
class="ml-1 text-muted"
name="diamond-outline"
></ion-icon>
</h4>
<p>
Get a fully managed <strong>Ghostfolio</strong> cloud offering.
</p>
<ul class="list-unstyled mb-3">
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1 text-muted"
name="checkmark-circle-outline"
></ion-icon>
<span>Portfolio Performance</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1 text-muted"
name="checkmark-circle-outline"
></ion-icon>
<span>Portfolio Summary</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1 text-muted"
name="checkmark-circle-outline"
></ion-icon>
<span>Unlimited Transactions</span>
</li>
<li class="align-items-center d-flex mb-1">
<div class="flex-grow-1">
<h4 class="align-items-center d-flex" i18n>Basic</h4>
<p>
For new investors who are just getting started with trading.
</p>
<ul class="list-unstyled mb-3">
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1 text-muted"
name="checkmark-circle-outline"
></ion-icon>
<span>Unlimited Transactions</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1 text-muted"
name="checkmark-circle-outline"
></ion-icon>
<span>Portfolio Performance</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1 text-muted"
name="checkmark-circle-outline"
></ion-icon>
<span>Zen Mode</span>
</li>
<li>
<ion-icon
class="invisible"
name="checkmark-circle-outline"
></ion-icon>
</li>
<li>
<ion-icon
class="invisible"
name="checkmark-circle-outline"
></ion-icon>
</li>
</ul>
</div>
<p>Fully managed <strong>Ghostfolio</strong> cloud offering.</p>
<p class="h5 text-right">Free</p>
</mat-card>
</div>
<div class="col-xs-12 col-md-4 mb-3">
<mat-card
class="d-flex flex-column h-100"
[ngClass]="{ 'active': user?.subscription?.type === 'Premium' }"
>
<div class="flex-grow-1">
<h4 class="align-items-center d-flex" i18n>
Premium
<ion-icon
class="mr-1 text-muted"
name="checkmark-circle-outline"
class="ml-1 text-muted"
name="diamond-outline"
></ion-icon>
<span>Advanced Insights</span>
</li>
</ul>
</h4>
<p>
For ambitious investors who need the full picture of their
financial assets.
</p>
<ul class="list-unstyled mb-3">
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1 text-muted"
name="checkmark-circle-outline"
></ion-icon>
<span>Unlimited Transactions</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1 text-muted"
name="checkmark-circle-outline"
></ion-icon>
<span>Portfolio Performance</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1 text-muted"
name="checkmark-circle-outline"
></ion-icon>
<span>Zen Mode</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1 text-muted"
name="checkmark-circle-outline"
></ion-icon>
<span>Portfolio Summary</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon
class="mr-1 text-muted"
name="checkmark-circle-outline"
></ion-icon>
<span>Advanced Insights</span>
</li>
</ul>
</div>
<p>Fully managed <strong>Ghostfolio</strong> cloud offering.</p>
<p class="h5 text-right">
<span class="font-weight-normal"
>{{ user?.settings.baseCurrency || baseCurrency }}
<strong>2.99</strong>
<strong>0.00</strong>
<del class="ml-1 text-muted">3.99</del> / Month</span
>
</p>
@ -99,4 +182,12 @@
</div>
</div>
</div>
<div *ngIf="!user" class="row">
<div class="col mt-3 text-center">
<a color="primary" i18n mat-flat-button [routerLink]="['/start']">
Create Account
</a>
<p class="text-muted"><small>It's free</small></p>
</div>
</div>
</div>

10
apps/client/src/app/pages/pricing/pricing-page.module.ts
Unescape View File

@ -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]
})

13
apps/client/src/app/pages/pricing/pricing-page.scss
Unescape View File

@ -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));
}
}

2
libs/common/src/lib/interfaces/user.interface.ts
Unescape View File

@ -12,6 +12,6 @@ export interface User {
settings: UserSettings;
subscription: {
expiresAt: Date;
type: 'Trial';
type: 'Basic' | 'Premium';
};
}

Write Preview
Loading…
Cancel
Save