You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

382 lines
16 KiB

<div class="container">
<div class="row">
<div class="col">
<h1 class="d-none d-sm-block h3 mb-4 text-center" i18n>Pricing Plans</h1>
<div class="mb-4">
<p i18n>
Our official Ghostfolio Premium cloud offering is the easiest way to
get started. Due to the time it saves, this will be the best option
for most people. Revenue is used to cover operational costs for the
hosting infrastructure and professional data providers, and to fund
ongoing development.
</p>
<p i18n>
If you prefer to run Ghostfolio on your own infrastructure, please
find the source code and further instructions on
<a href="https://github.com/ghostfolio/ghostfolio">GitHub</a>.
</p>
</div>
<div class="row">
<div class="col-xs-12 col-lg-4 mb-3">
<mat-card appearance="outlined" class="h-100">
<mat-card-content class="d-flex flex-column h-100">
<div class="flex-grow-1">
<h4>Open Source</h4>
<p i18n>
For tech-savvy investors who prefer to run Ghostfolio 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" name="checkmark-circle-outline" />
<span i18n>Unlimited Transactions</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon class="mr-1" name="checkmark-circle-outline" />
<span i18n>Unlimited Accounts</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon class="mr-1" name="checkmark-circle-outline" />
<span i18n>Portfolio Performance</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon class="mr-1" name="checkmark-circle-outline" />
<span i18n>Portfolio Summary</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon class="mr-1" name="checkmark-circle-outline" />
<span i18n>Portfolio Allocations</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon class="mr-1" name="checkmark-circle-outline" />
<span i18n>Performance Benchmarks</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon class="mr-1" name="checkmark-circle-outline" />
<span i18n>FIRE Calculator</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon class="mr-1" name="checkmark-circle-outline" />
<span i18n>Data Import and Export</span>
<span
class="align-items-center d-flex ml-1"
matTooltipPosition="above"
[matTooltip]="importAndExportTooltipOSS"
>
<ion-icon name="information-circle-outline" />
</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon class="mr-1" name="checkmark-circle-outline" />
<a i18n [routerLink]="routerLinkFeatures"
>and more Features...</a
>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon class="mr-1" name="checkmark-circle-outline" />
<span i18n>Community Support</span>
</li>
</ul>
</div>
<p i18n>Self-hosted, update manually.</p>
<p class="h5 text-right" i18n>Free</p>
@if (user?.subscription?.type === 'Basic') {
<div class="d-none d-lg-block hidden mt-3 text-center">
<a color="primary" mat-flat-button>&nbsp;</a>
<p class="m-0 text-muted">
<small>&nbsp;</small>
</p>
</div>
}
@if (durationExtension) {
<div class="d-none d-lg-block hidden mt-3">
<div class="badge p-3 w-100">&nbsp;</div>
</div>
}
</mat-card-content>
</mat-card>
</div>
<div class="col-xs-12 col-lg-4 mb-3">
<mat-card
appearance="outlined"
class="h-100"
[ngClass]="{ active: user?.subscription?.type === 'Basic' }"
>
<mat-card-content class="d-flex flex-column h-100">
<div class="flex-grow-1">
<div class="align-items-center d-flex mb-2">
<h4 class="flex-grow-1 m-0">Basic</h4>
@if (user?.subscription?.type === 'Basic') {
<div>
<ion-icon class="mr-1" name="checkmark-outline" />
</div>
}
</div>
<p i18n>
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" name="checkmark-circle-outline" />
<span i18n>Unlimited Transactions</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon class="mr-1" name="checkmark-circle-outline" />
<span i18n>Unlimited Accounts</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon class="mr-1" name="checkmark-circle-outline" />
<span i18n>Portfolio Performance</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon class="mr-1" name="checkmark-circle-outline" />
<span i18n>Data Import and Export</span>
<span
class="align-items-center d-flex ml-1"
matTooltipPosition="above"
[matTooltip]="importAndExportTooltipBasic"
>
<ion-icon name="information-circle-outline" />
</span>
</li>
</ul>
</div>
<p i18n>Fully managed Ghostfolio cloud offering.</p>
<p class="h5 text-right" i18n>Free</p>
@if (user?.subscription?.type === 'Basic') {
<div class="d-none d-lg-block hidden mt-3 text-center">
<a color="primary" mat-flat-button>&nbsp;</a>
<p class="m-0 text-muted">
<small>&nbsp;</small>
</p>
</div>
}
@if (durationExtension) {
<div class="d-none d-lg-block hidden mt-3">
<div class="badge p-3 w-100">&nbsp;</div>
</div>
}
</mat-card-content>
</mat-card>
</div>
<div class="col-xs-12 col-lg-4 mb-3">
<mat-card
appearance="outlined"
class="h-100"
[ngClass]="{ active: user?.subscription?.type === 'Premium' }"
>
<mat-card-content class="d-flex flex-column h-100">
@if (label) {
<div class="badge-container position-absolute text-right">
<span class="badge badge-warning m-1">{{ label }}</span>
</div>
}
<div class="flex-grow-1">
<div class="align-items-center d-flex mb-2">
<h4 class="align-items-center d-flex flex-grow-1 m-0">
<span>Premium</span>
<gf-premium-indicator class="ml-1" [enableLink]="false" />
</h4>
@if (user?.subscription?.type === 'Premium') {
<div>
<ion-icon class="mr-1" name="checkmark-outline" />
</div>
}
</div>
<p i18n>
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" name="checkmark-circle-outline" />
<span i18n>Unlimited Transactions</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon class="mr-1" name="checkmark-circle-outline" />
<span i18n>Unlimited Accounts</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon class="mr-1" name="checkmark-circle-outline" />
<span i18n>Portfolio Performance</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon class="mr-1" name="checkmark-circle-outline" />
<span i18n>Portfolio Summary</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon class="mr-1" name="checkmark-circle-outline" />
<span i18n>Portfolio Allocations</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon class="mr-1" name="checkmark-circle-outline" />
<span i18n>Performance Benchmarks</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon class="mr-1" name="checkmark-circle-outline" />
<span i18n>FIRE Calculator</span>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon class="mr-1" name="checkmark-circle-outline" />
<span i18n>Data Import and Export</span>
<span
class="align-items-center d-flex ml-1"
matTooltipPosition="above"
[matTooltip]="importAndExportTooltipPremium"
>
<ion-icon name="information-circle-outline" />
</span>
</li>
<li
class="align-items-center d-flex"
[ngClass]="{
'mb-1': !user?.settings?.isExperimentalFeatures
}"
>
<ion-icon class="mr-1" name="checkmark-circle-outline" />
<span i18n>Professional Data Provider</span>
<span
class="align-items-center d-flex ml-1"
matTooltipPosition="above"
[matTooltip]="professionalDataProviderTooltipPremium"
>
<ion-icon name="information-circle-outline" />
</span>
</li>
@if (user?.settings?.isExperimentalFeatures) {
<li class="align-items-center d-flex line-height-1 mb-1">
<ion-icon
class="hidden mr-1"
name="checkmark-circle-outline"
/>
<small class="text-muted"
><ng-container i18n>with API access for</ng-container>
Open Source</small
>
</li>
}
<li class="align-items-center d-flex mb-1">
<ion-icon class="mr-1" name="checkmark-circle-outline" />
<a i18n [routerLink]="routerLinkFeatures"
>and more Features...</a
>
</li>
<li class="align-items-center d-flex mb-1">
<ion-icon class="mr-1" name="checkmark-circle-outline" />
<span i18n>Email and Chat Support</span>
</li>
</ul>
</div>
<p i18n>Fully managed Ghostfolio cloud offering.</p>
<p class="h5 text-right" [hidden]="!price">
<span class="font-weight-normal">
@if (coupon) {
<del class="text-muted"
>{{ baseCurrency }}&nbsp;{{ price }}</del
>&nbsp;{{ baseCurrency }}&nbsp;<strong>{{
price - coupon
}}</strong>
} @else {
{{ baseCurrency }}&nbsp;<strong>{{ price }}</strong>
}
<span>&nbsp;</span>
<span i18n>per year</span></span
>
</p>
@if (
hasPermissionToUpdateUserSettings &&
user?.subscription?.type === 'Basic'
) {
<div class="mt-3 text-center">
<button
color="primary"
mat-flat-button
(click)="onCheckout()"
>
@if (user.subscription.offer.isRenewal) {
<ng-container i18n>Renew Plan</ng-container>
} @else {
<ng-container i18n>Upgrade Plan</ng-container>
}
</button>
<p class="m-0 text-muted">
<small i18n>One-time payment, no auto-renewal.</small>
</p>
</div>
}
@if (durationExtension) {
<div class="mt-3">
<div
class="badge badge-warning font-weight-normal line-height-1 p-3 w-100"
>
<strong i18n>Limited Offer!</strong>
<ng-container i18n
>Get {{ durationExtension }} extra</ng-container
>
</div>
</div>
}
</mat-card-content>
</mat-card>
</div>
</div>
</div>
</div>
@if (user?.subscription?.type === 'Basic') {
<div class="row">
<div class="col mt-3">
<p>
<ng-container i18n>If you plan to open an account at</ng-container>
<ng-container>&nbsp;</ng-container>
@for (
broker of referralBrokers;
track broker;
let i = $index;
let last = $last
) {
<i>{{ broker }}</i>
@if (last) {
<span>, </span>
} @else {
@if (i === referralBrokers.length - 2) {
<ng-container i18n> or </ng-container>
} @else {
<span>, </span>
}
}
}
<ng-container i18n>please</ng-container>
<ng-container>&nbsp;</ng-container>
<a href="mailto:hi@ghostfol.io?Subject=Referral link for..." i18n
>contact us</a
>
<ng-container>&nbsp;</ng-container>
<ng-container i18n
>to use our referral link and get a Ghostfolio Premium membership
for one year</ng-container
>. <ng-container i18n>Looking for a student discount?</ng-container>
<ng-container>&nbsp;</ng-container>
<ng-container i18n>Request it</ng-container>
<ng-container>&nbsp;</ng-container>
<a href="mailto:hi@ghostfol.io?Subject=Student Discount" i18n>here</a>
<ng-container>&nbsp;</ng-container>
<ng-container i18n>with your university e-mail address</ng-container>.
</p>
</div>
</div>
} @else if (!user) {
<div class="row">
<div class="col mt-3 text-center">
<a
color="primary"
i18n
mat-flat-button
[routerLink]="routerLinkRegister"
>
Get Started
</a>
<p class="m-0 text-muted"><small i18n>It’s free.</small></p>
</div>
</div>
}
</div>