Feature/extend promotion system (#4008)

* Extend promotion system

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

@@ -23,10 +23,10 @@ import {
 import {
   InfoItem,
   Statistics,
-  Subscription
+  SubscriptionOffer
 } from '@ghostfolio/common/interfaces';
 import { permissions } from '@ghostfolio/common/permissions';
-import { SubscriptionOffer } from '@ghostfolio/common/types';
+import { SubscriptionOfferKey } from '@ghostfolio/common/types';
 
 import { Injectable, Logger } from '@nestjs/common';
 import { JwtService } from '@nestjs/jwt';
@@ -101,7 +101,7 @@ export class InfoService {
       isUserSignupEnabled,
       platforms,
       statistics,
-      subscriptions
+      subscriptionOffers
     ] = await Promise.all([
       this.benchmarkService.getBenchmarkAssetProfiles(),
       this.getDemoAuthToken(),
@@ -110,7 +110,7 @@ export class InfoService {
         orderBy: { name: 'asc' }
       }),
       this.getStatistics(),
-      this.getSubscriptions()
+      this.getSubscriptionOffers()
     ]);
 
     if (isUserSignupEnabled) {
@@ -125,7 +125,7 @@ export class InfoService {
       isReadOnlyMode,
       platforms,
       statistics,
-      subscriptions,
+      subscriptionOffers,
       baseCurrency: DEFAULT_CURRENCY,
       currencies: this.exchangeRateDataService.getCurrencies()
     };
@@ -314,8 +314,8 @@ export class InfoService {
     return statistics;
   }
 
-  private async getSubscriptions(): Promise<{
+  private async getSubscriptionOffers(): Promise<{
-    [offer in SubscriptionOffer]: Subscription;
+    [offer in SubscriptionOfferKey]: SubscriptionOffer;
   }> {
     if (!this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION')) {
       return undefined;

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

@@ -1,8 +1,16 @@
 import { ConfigurationService } from '@ghostfolio/api/services/configuration/configuration.service';
 import { PrismaService } from '@ghostfolio/api/services/prisma/prisma.service';
-import { DEFAULT_LANGUAGE_CODE } from '@ghostfolio/common/config';
+import { PropertyService } from '@ghostfolio/api/services/property/property.service';
+import {
+  DEFAULT_LANGUAGE_CODE,
+  PROPERTY_STRIPE_CONFIG
+} from '@ghostfolio/common/config';
 import { parseDate } from '@ghostfolio/common/helper';
-import { SubscriptionOffer, UserWithSettings } from '@ghostfolio/common/types';
+import { SubscriptionOffer } from '@ghostfolio/common/interfaces';
+import {
+  SubscriptionOfferKey,
+  UserWithSettings
+} from '@ghostfolio/common/types';
 import { SubscriptionType } from '@ghostfolio/common/types/subscription-type.type';
 
 import { Injectable, Logger } from '@nestjs/common';
@@ -17,7 +25,8 @@ export class SubscriptionService {
 
   public constructor(
     private readonly configurationService: ConfigurationService,
-    private readonly prismaService: PrismaService
+    private readonly prismaService: PrismaService,
+    private readonly propertyService: PropertyService
   ) {
     this.stripe = new Stripe(
       this.configurationService.get('STRIPE_SECRET_KEY'),
@@ -36,6 +45,18 @@ export class SubscriptionService {
     priceId: string;
     user: UserWithSettings;
   }) {
+    const subscriptionOffers: {
+      [offer in SubscriptionOfferKey]: SubscriptionOffer;
+    } =
+      ((await this.propertyService.getByKey(PROPERTY_STRIPE_CONFIG)) as any) ??
+      {};
+
+    const subscriptionOffer = Object.values(subscriptionOffers).find(
+      (subscriptionOffer) => {
+        return subscriptionOffer.priceId === priceId;
+      }
+    );
+
     const checkoutSessionCreateParams: Stripe.Checkout.SessionCreateParams = {
       cancel_url: `${this.configurationService.get('ROOT_URL')}/${
         user.Settings?.settings?.language ?? DEFAULT_LANGUAGE_CODE
@@ -47,6 +68,13 @@ export class SubscriptionService {
           quantity: 1
         }
       ],
+      locale:
+        (user.Settings?.settings
+          ?.language as Stripe.Checkout.SessionCreateParams.Locale) ??
+        DEFAULT_LANGUAGE_CODE,
+      metadata: subscriptionOffer
+        ? { subscriptionOffer: JSON.stringify(subscriptionOffer) }
+        : {},
       mode: 'payment',
       payment_method_types: ['card'],
       success_url: `${this.configurationService.get(
@@ -73,17 +101,25 @@ export class SubscriptionService {
 
   public async createSubscription({
     duration = '1 year',
+    durationExtension,
     price,
     userId
   }: {
     duration?: StringValue;
+    durationExtension?: StringValue;
     price: number;
     userId: string;
   }) {
+    let expiresAt = addMilliseconds(new Date(), ms(duration));
+
+    if (durationExtension) {
+      expiresAt = addMilliseconds(expiresAt, ms(durationExtension));
+    }
+
     await this.prismaService.subscription.create({
       data: {
+        expiresAt,
         price,
-        expiresAt: addMilliseconds(new Date(), ms(duration)),
         User: {
           connect: {
             id: userId
@@ -95,10 +131,21 @@ export class SubscriptionService {
 
   public async createSubscriptionViaStripe(aCheckoutSessionId: string) {
     try {
+      let durationExtension: StringValue;
+
       const session =
         await this.stripe.checkout.sessions.retrieve(aCheckoutSessionId);
 
+      const subscriptionOffer: SubscriptionOffer = JSON.parse(
+        session.metadata.subscriptionOffer ?? '{}'
+      );
+
+      if (subscriptionOffer) {
+        durationExtension = subscriptionOffer.durationExtension;
+      }
+
       await this.createSubscription({
+        durationExtension,
         price: session.amount_total / 100,
         userId: session.client_reference_id
       });
@@ -121,7 +168,7 @@ export class SubscriptionService {
         return new Date(a.expiresAt) > new Date(b.expiresAt) ? a : b;
       });
 
-      let offer: SubscriptionOffer = price ? 'renewal' : 'default';
+      let offer: SubscriptionOfferKey = price ? 'renewal' : 'default';
 
       if (isBefore(createdAt, parseDate('2023-01-01'))) {
         offer = 'renewal-early-bird-2023';

apps/client/src/app/app.component.html

@@ -33,6 +33,7 @@
     [deviceType]="deviceType"
     [hasPermissionToChangeDateRange]="hasPermissionToChangeDateRange"
     [hasPermissionToChangeFilters]="hasPermissionToChangeFilters"
+    [hasPromotion]="hasPromotion"
     [hasTabs]="hasTabs"
     [info]="info"
     [pageTitle]="pageTitle"

apps/client/src/app/app.component.ts

@@ -57,6 +57,7 @@ export class AppComponent implements OnDestroy, OnInit {
   public hasPermissionToAccessFearAndGreedIndex: boolean;
   public hasPermissionToChangeDateRange: boolean;
   public hasPermissionToChangeFilters: boolean;
+  public hasPromotion = false;
   public hasTabs = false;
   public info: InfoItem;
   public pageTitle: string;
@@ -136,6 +137,10 @@ export class AppComponent implements OnDestroy, OnInit {
       permissions.enableFearAndGreedIndex
     );
 
+    this.hasPromotion =
+      !!this.info?.subscriptionOffers?.default?.coupon ||
+      !!this.info?.subscriptionOffers?.default?.durationExtension;
+
     this.impersonationStorageService
       .onChangeHasImpersonation()
       .pipe(takeUntil(this.unsubscribeSubject))
@@ -231,6 +236,14 @@ export class AppComponent implements OnDestroy, OnInit {
         this.hasInfoMessage =
           this.canCreateAccount || !!this.user?.systemMessage;
 
+        this.hasPromotion =
+          !!this.info?.subscriptionOffers?.[
+            this.user?.subscription?.offer ?? 'default'
+          ]?.coupon ||
+          !!this.info?.subscriptionOffers?.[
+            this.user?.subscription?.offer ?? 'default'
+          ]?.durationExtension;
+
         this.initializeTheme(this.user?.settings.colorScheme);
 
         this.changeDetectorRef.markForCheck();

apps/client/src/app/components/header/header.component.html

@@ -88,15 +88,20 @@
         <li class="list-inline-item">
           <a
             class="d-none d-sm-block"
-            i18n
             mat-flat-button
             [ngClass]="{
               'font-weight-bold': currentRoute === routePricing,
               'text-decoration-underline': currentRoute === routePricing
             }"
             [routerLink]="routerLinkPricing"
-            >Pricing</a
           >
+            <span class="align-items-center d-flex">
+              <span i18n>Pricing</span>
+              @if (currentRoute !== routePricing && hasPromotion) {
+                <span class="badge badge-warning ml-1">%</span>
+              }
+            </span>
+          </a>
         </li>
       }
       <li class="list-inline-item">
@@ -290,12 +295,17 @@
           ) {
             <a
               class="d-flex d-sm-none"
-              i18n
               mat-menu-item
               [ngClass]="{ 'font-weight-bold': currentRoute === routePricing }"
               [routerLink]="routerLinkPricing"
-              >Pricing</a
             >
+              <span class="align-items-center d-flex">
+                <span i18n>Pricing</span>
+                @if (currentRoute !== routePricing && hasPromotion) {
+                  <span class="badge badge-warning ml-1">%</span>
+                }
+              </span>
+            </a>
           }
           <a
             class="d-flex d-sm-none"
@@ -358,15 +368,20 @@
         <li class="list-inline-item">
           <a
             class="d-sm-block"
-            i18n
             mat-flat-button
             [ngClass]="{
               'font-weight-bold': currentRoute === routePricing,
               'text-decoration-underline': currentRoute === routePricing
             }"
             [routerLink]="routerLinkPricing"
-            >Pricing</a
           >
+            <span class="align-items-center d-flex">
+              <span i18n>Pricing</span>
+              @if (currentRoute !== routePricing && hasPromotion) {
+                <span class="badge badge-warning ml-1">%</span>
+              }
+            </span>
+          </a>
         </li>
       }
       @if (hasPermissionToAccessFearAndGreedIndex) {

apps/client/src/app/components/header/header.component.ts

@@ -58,6 +58,7 @@ export class HeaderComponent implements OnChanges {
   @Input() deviceType: string;
   @Input() hasPermissionToChangeDateRange: boolean;
   @Input() hasPermissionToChangeFilters: boolean;
+  @Input() hasPromotion: boolean;
   @Input() hasTabs: boolean;
   @Input() info: InfoItem;
   @Input() pageTitle: string;

apps/client/src/app/components/user-account-membership/user-account-membership.component.ts

@@ -16,6 +16,7 @@ import {
   MatSnackBarRef,
   TextOnlySnackBar
 } from '@angular/material/snack-bar';
+import { StringValue } from 'ms';
 import { StripeService } from 'ngx-stripe';
 import { EMPTY, Subject } from 'rxjs';
 import { catchError, switchMap, takeUntil } from 'rxjs/operators';
@@ -31,6 +32,7 @@ export class UserAccountMembershipComponent implements OnDestroy {
   public coupon: number;
   public couponId: string;
   public defaultDateFormat: string;
+  public durationExtension: StringValue;
   public hasPermissionForSubscription: boolean;
   public hasPermissionToUpdateUserSettings: boolean;
   public price: number;
@@ -51,7 +53,7 @@ export class UserAccountMembershipComponent implements OnDestroy {
     private stripeService: StripeService,
     private userService: UserService
   ) {
-    const { baseCurrency, globalPermissions, subscriptions } =
+    const { baseCurrency, globalPermissions, subscriptionOffers } =
       this.dataService.fetchInfo();
 
     this.baseCurrency = baseCurrency;
@@ -76,11 +78,18 @@ export class UserAccountMembershipComponent implements OnDestroy {
             permissions.updateUserSettings
           );
 
-          this.coupon = subscriptions?.[this.user.subscription.offer]?.coupon;
+          this.coupon =
+            subscriptionOffers?.[this.user.subscription.offer]?.coupon;
           this.couponId =
-            subscriptions?.[this.user.subscription.offer]?.couponId;
+            subscriptionOffers?.[this.user.subscription.offer]?.couponId;
-          this.price = subscriptions?.[this.user.subscription.offer]?.price;
+          this.durationExtension =
-          this.priceId = subscriptions?.[this.user.subscription.offer]?.priceId;
+            subscriptionOffers?.[
+              this.user.subscription.offer
+            ]?.durationExtension;
+          this.price =
+            subscriptionOffers?.[this.user.subscription.offer]?.price;
+          this.priceId =
+            subscriptionOffers?.[this.user.subscription.offer]?.priceId;
 
           this.changeDetectorRef.markForCheck();
         }

apps/client/src/app/components/user-account-membership/user-account-membership.html

@@ -34,6 +34,16 @@
                   &nbsp;<span i18n>per year</span>
                 </div>
               }
+              @if (durationExtension) {
+                <div class="mt-1 text-center">
+                  <div
+                    class="badge badge-pill badge-warning font-weight-normal px-2 py-1"
+                  >
+                    <strong>Limited Offer!</strong> Get
+                    {{ durationExtension }} extra
+                  </div>
+                </div>
+              }
             }
             <div class="align-items-center d-flex justify-content-center mt-4">
               @if (!user?.subscription?.expiresAt) {

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

@@ -6,6 +6,7 @@ import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { translate } from '@ghostfolio/ui/i18n';
 
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { StringValue } from 'ms';
 import { StripeService } from 'ngx-stripe';
 import { Subject } from 'rxjs';
 import { catchError, switchMap, takeUntil } from 'rxjs/operators';
@@ -20,6 +21,7 @@ export class PricingPageComponent implements OnDestroy, OnInit {
   public baseCurrency: string;
   public coupon: number;
   public couponId: string;
+  public durationExtension: StringValue;
   public hasPermissionToUpdateUserSettings: boolean;
   public importAndExportTooltipBasic = translate(
     'DATA_IMPORT_AND_EXPORT_TOOLTIP_BASIC'
@@ -51,11 +53,12 @@ export class PricingPageComponent implements OnDestroy, OnInit {
   ) {}
 
   public ngOnInit() {
-    const { baseCurrency, subscriptions } = this.dataService.fetchInfo();
+    const { baseCurrency, subscriptionOffers } = this.dataService.fetchInfo();
     this.baseCurrency = baseCurrency;
 
-    this.coupon = subscriptions?.default?.coupon;
+    this.coupon = subscriptionOffers?.default?.coupon;
-    this.price = subscriptions?.default?.price;
+    this.durationExtension = subscriptionOffers?.default?.durationExtension;
+    this.price = subscriptionOffers?.default?.price;
 
     this.userService.stateChanged
       .pipe(takeUntil(this.unsubscribeSubject))
@@ -68,11 +71,18 @@ export class PricingPageComponent implements OnDestroy, OnInit {
             permissions.updateUserSettings
           );
 
-          this.coupon = subscriptions?.[this.user?.subscription?.offer]?.coupon;
+          this.coupon =
+            subscriptionOffers?.[this.user?.subscription?.offer]?.coupon;
           this.couponId =
-            subscriptions?.[this.user.subscription.offer]?.couponId;
+            subscriptionOffers?.[this.user.subscription.offer]?.couponId;
-          this.price = subscriptions?.[this.user?.subscription?.offer]?.price;
+          this.durationExtension =
-          this.priceId = subscriptions?.[this.user.subscription.offer]?.priceId;
+            subscriptionOffers?.[
+              this.user?.subscription?.offer
+            ]?.durationExtension;
+          this.price =
+            subscriptionOffers?.[this.user?.subscription?.offer]?.price;
+          this.priceId =
+            subscriptionOffers?.[this.user.subscription.offer]?.priceId;
 
           this.changeDetectorRef.markForCheck();
         }

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

@@ -101,6 +101,11 @@
                   </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>
@@ -159,6 +164,11 @@
                   </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>
@@ -289,6 +299,14 @@
                   </p>
                 </div>
               }
+              @if (durationExtension) {
+                <div class="mt-3">
+                  <div class="badge badge-warning font-weight-normal p-3 w-100">
+                    <strong>Limited Offer!</strong> Get
+                    {{ durationExtension }} extra
+                  </div>
+                </div>
+              }
             </mat-card-content>
           </mat-card>
         </div>

apps/client/src/app/pages/resources/personal-finance-tools/product-page.component.ts

@@ -35,9 +35,9 @@ export class GfProductPageComponent implements OnInit {
   ) {}
 
   public ngOnInit() {
-    const { subscriptions } = this.dataService.fetchInfo();
+    const { subscriptionOffers } = this.dataService.fetchInfo();
 
-    this.price = subscriptions?.default?.price;
+    this.price = subscriptionOffers?.default?.price;
 
     this.product1 = {
       founded: 2021,

libs/common/src/lib/interfaces/index.ts

@@ -46,7 +46,7 @@ import type { PortfolioPerformanceResponse } from './responses/portfolio-perform
 import type { PublicPortfolioResponse } from './responses/public-portfolio-response.interface';
 import type { ScraperConfiguration } from './scraper-configuration.interface';
 import type { Statistics } from './statistics.interface';
-import type { Subscription } from './subscription.interface';
+import type { SubscriptionOffer } from './subscription-offer.interface';
 import type { SymbolMetrics } from './symbol-metrics.interface';
 import type { SystemMessage } from './system-message.interface';
 import type { TabConfiguration } from './tab-configuration.interface';
@@ -102,8 +102,8 @@ export {
   ResponseError,
   ScraperConfiguration,
   Statistics,
+  SubscriptionOffer,
   SystemMessage,
-  Subscription,
   SymbolMetrics,
   TabConfiguration,
   ToggleOption,

libs/common/src/lib/interfaces/info-item.interface.ts

@@ -1,9 +1,9 @@
-import { SubscriptionOffer } from '@ghostfolio/common/types';
+import { SubscriptionOfferKey } from '@ghostfolio/common/types';
 
 import { Platform, SymbolProfile } from '@prisma/client';
 
 import { Statistics } from './statistics.interface';
-import { Subscription } from './subscription.interface';
+import { SubscriptionOffer } from './subscription-offer.interface';
 
 export interface InfoItem {
   baseCurrency: string;
@@ -18,5 +18,5 @@ export interface InfoItem {
   platforms: Platform[];
   statistics: Statistics;
   stripePublicKey?: string;
-  subscriptions: { [offer in SubscriptionOffer]: Subscription };
+  subscriptionOffers: { [offer in SubscriptionOfferKey]: SubscriptionOffer };
 }

libs/common/src/lib/interfaces/subscription-offer.interface.ts

@@ -0,0 +1,9 @@
+import { StringValue } from 'ms';
+
+export interface SubscriptionOffer {
+  coupon?: number;
+  couponId?: string;
+  durationExtension?: StringValue;
+  price: number;
+  priceId: string;
+}

libs/common/src/lib/interfaces/subscription.interface.ts

@@ -1,6 +0,0 @@
-export interface Subscription {
-  coupon?: number;
-  couponId?: string;
-  price: number;
-  priceId: string;
-}

libs/common/src/lib/interfaces/user.interface.ts

@@ -1,4 +1,4 @@
-import { SubscriptionOffer } from '@ghostfolio/common/types';
+import { SubscriptionOfferKey } from '@ghostfolio/common/types';
 import { SubscriptionType } from '@ghostfolio/common/types/subscription-type.type';
 
 import { Account, Tag } from '@prisma/client';
@@ -20,7 +20,7 @@ export interface User {
   systemMessage?: SystemMessage;
   subscription: {
     expiresAt?: Date;
-    offer: SubscriptionOffer;
+    offer: SubscriptionOfferKey;
     type: SubscriptionType;
   };
   tags: (Tag & { isUsed: boolean })[];

libs/common/src/lib/types/index.ts

@@ -15,7 +15,7 @@ import type { MarketState } from './market-state.type';
 import type { Market } from './market.type';
 import type { OrderWithAccount } from './order-with-account.type';
 import type { RequestWithUser } from './request-with-user.type';
-import type { SubscriptionOffer } from './subscription-offer.type';
+import type { SubscriptionOfferKey } from './subscription-offer-key.type';
 import type { UserWithSettings } from './user-with-settings.type';
 import type { ViewMode } from './view-mode.type';
 
@@ -37,7 +37,7 @@ export type {
   MarketState,
   OrderWithAccount,
   RequestWithUser,
-  SubscriptionOffer,
+  SubscriptionOfferKey,
   UserWithSettings,
   ViewMode
 };

libs/common/src/lib/types/subscription-offer.type.ts → libs/common/src/lib/types/subscription-offer-key.type.ts

@@ -1,4 +1,4 @@
-export type SubscriptionOffer =
+export type SubscriptionOfferKey =
   | 'default'
   | 'renewal'
   | 'renewal-early-bird-2023'

libs/common/src/lib/types/user-with-settings.type.ts

@@ -1,5 +1,5 @@
 import { UserSettings } from '@ghostfolio/common/interfaces';
-import { SubscriptionOffer } from '@ghostfolio/common/types';
+import { SubscriptionOfferKey } from '@ghostfolio/common/types';
 import { SubscriptionType } from '@ghostfolio/common/types/subscription-type.type';
 
 import { Access, Account, Settings, User } from '@prisma/client';
@@ -13,7 +13,7 @@ export type UserWithSettings = User & {
   Settings: Settings & { settings: UserSettings };
   subscription?: {
     expiresAt?: Date;
-    offer: SubscriptionOffer;
+    offer: SubscriptionOfferKey;
     type: SubscriptionType;
   };
 };