Change from subscription to one time payment (#181)

CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Changed
+
+- Changed _Stripe_ mode from `subscription` to `payment`
+
+### Fixed
+
 - Fixed the base currency on the pricing page
 
 ## 1.20.0 - 21.06.2021

apps/api/src/app/subscription/subscription.service.ts

@@ -41,7 +41,7 @@ export class SubscriptionService {
       metadata: {
         user_id: userId
       },
-      mode: 'subscription',
+      mode: 'payment',
       payment_method_types: ['card'],
       success_url: `${this.configurationService.get(
         'ROOT_URL'

apps/client/src/app/pages/account/account-page.component.ts

@@ -12,7 +12,7 @@ import {
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { WebAuthnService } from '@ghostfolio/client/services/web-authn.service';
-import { DEFAULT_DATE_FORMAT } from '@ghostfolio/common/config';
+import { baseCurrency, DEFAULT_DATE_FORMAT } from '@ghostfolio/common/config';
 import { Access, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { Currency } from '@prisma/client';
@@ -30,11 +30,12 @@ export class AccountPageComponent implements OnDestroy, OnInit {
   signInWithFingerprintElement: MatSlideToggle;
 
   public accesses: Access[];
-  public baseCurrency: Currency;
+  public baseCurrency = baseCurrency;
   public coupon: number;
   public couponId: string;
   public currencies: Currency[] = [];
   public defaultDateFormat = DEFAULT_DATE_FORMAT;
+  public hasPermissionForSubscription;
   public hasPermissionToUpdateViewMode: boolean;
   public hasPermissionToUpdateUserSettings: boolean;
   public price: number;
@@ -56,10 +57,16 @@ export class AccountPageComponent implements OnDestroy, OnInit {
     this.dataService
       .fetchInfo()
       .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(({ currencies, subscriptions }) => {
+      .subscribe(({ currencies, globalPermissions, subscriptions }) => {
         this.coupon = subscriptions?.[0]?.coupon;
         this.couponId = subscriptions?.[0]?.couponId;
         this.currencies = currencies;
+
+        this.hasPermissionForSubscription = hasPermission(
+          globalPermissions,
+          permissions.enableSubscription
+        );
+
         this.price = subscriptions?.[0]?.price;
         this.priceId = subscriptions?.[0]?.priceId;
 

apps/client/src/app/pages/account/account-page.html

@@ -22,7 +22,9 @@
                 Valid until {{ user.subscription.expiresAt | date:
                 defaultDateFormat }}
               </div>
-              <div *ngIf="!user.subscription.expiresAt">
+              <div
+                *ngIf="hasPermissionForSubscription && !user.subscription.expiresAt"
+              >
                 <button
                   color="primary"
                   i18n
@@ -32,10 +34,10 @@
                   Upgrade
                 </button>
                 <div *ngIf="price" class="mt-1">
-                  {{ user.settings.baseCurrency }}
+                  {{ baseCurrency }}
                   <ng-container *ngIf="coupon"
-                    >{{ price - coupon }}
+                    >{{ price - coupon | number : '1.2-2' }}
-                    <del>{{ user.settings.baseCurrency }} {{ price }}</del>
+                    <del>{{ price }}</del>
                   </ng-container>
                   <ng-container *ngIf="!coupon">{{ price }}</ng-container>
                   <span i18n> per year</span>
@@ -62,18 +64,25 @@
                     >
                   </mat-select>
                 </mat-form-field>
-                <mat-form-field appearance="outline" class="w-100">
+                <div class="align-items-center d-flex overflow-hidden">
-                  <mat-label i18n>View Mode</mat-label>
+                  <mat-form-field appearance="outline" class="flex-grow-1">
-                  <mat-select
+                    <mat-label i18n>View Mode</mat-label>
-                    name="viewMode"
+                    <mat-select
-                    [disabled]="!hasPermissionToUpdateViewMode"
+                      name="viewMode"
-                    [value]="user.settings.viewMode"
+                      [disabled]="!hasPermissionToUpdateViewMode"
-                    (selectionChange)="onChangeUserSettings('viewMode', $event.value)"
+                      [value]="user.settings.viewMode"
-                  >
+                      (selectionChange)="onChangeUserSettings('viewMode', $event.value)"
-                    <mat-option value="DEFAULT">Default</mat-option>
+                    >
-                    <mat-option value="ZEN">Zen</mat-option>
+                      <mat-option value="DEFAULT">Default</mat-option>
-                  </mat-select>
+                      <mat-option value="ZEN">Zen</mat-option>
-                </mat-form-field>
+                    </mat-select>
+                  </mat-form-field>
+                  <ion-icon
+                    *ngIf="!hasPermissionToUpdateViewMode"
+                    class="h5 mb-0 mx-3 text-muted"
+                    name="diamond-outline"
+                  ></ion-icon>
+                </div>
               </form>
             </div>
           </div>

apps/client/src/app/pages/pricing/pricing-page.html

@@ -178,13 +178,10 @@
             <p>Fully managed <strong>Ghostfolio</strong> cloud offering.</p>
             <p class="h5 text-right" [hidden]="!price">
               <span class="font-weight-normal"
-                >{{ user?.settings.baseCurrency || baseCurrency }}
+                >{{ baseCurrency }}
                 <ng-container *ngIf="coupon"
-                  ><strong>{{ price - coupon }} </strong>
+                  ><strong>{{ price - coupon | number : '1.2-2' }} </strong>
-                  <del
+                  <del>{{ price }}</del>
-                    >{{ user?.settings.baseCurrency || baseCurrency }} {{ price
-                    }}</del
-                  >
                 </ng-container>
                 <ng-container *ngIf="!coupon"
                   ><strong>{{ price }}</strong></ng-container

libs/common/src/lib/config.ts

@@ -2,7 +2,7 @@ import { IDataGatheringItem } from '@ghostfolio/api/services/interfaces/interfac
 import { Currency } from '@prisma/client';
 import { DataSource } from '@prisma/client';
 
-export const baseCurrency = Currency.CHF;
+export const baseCurrency = Currency.USD;
 
 export const benchmarks: Partial<IDataGatheringItem>[] = [
   { dataSource: DataSource.YAHOO, symbol: 'VOO' }