Feature/add stripe checkout to pricing page (#1942)

* Add Stripe checkout directly to pricing page

* Update changelog

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added support for the _Stripe_ checkout to the pricing page
+
 ### Changed
 
 - Improved the management of platforms in the admin control panel

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

@@ -189,9 +189,11 @@ export class AccountPageComponent implements OnDestroy, OnInit {
       .createCheckoutSession({ couponId: this.couponId, priceId: this.priceId })
       .pipe(
         switchMap(({ sessionId }: { sessionId: string }) => {
-          return this.stripeService.redirectToCheckout({
+          return this.stripeService.redirectToCheckout({ sessionId });
-            sessionId
+        }),
-          });
+        catchError((error) => {
+          alert(error.message);
+          throw error;
         })
       )
       .subscribe((result) => {

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

@@ -32,7 +32,7 @@
                   <button
                     color="primary"
                     mat-flat-button
-                    (click)="onCheckout(priceId)"
+                    (click)="onCheckout()"
                   >
                     <ng-container
                       *ngIf="user.subscription.offer === 'default'"

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

@@ -3,8 +3,9 @@ import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { User } from '@ghostfolio/common/interfaces';
 import { translate } from '@ghostfolio/ui/i18n';
+import { StripeService } from 'ngx-stripe';
 import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { catchError, switchMap, takeUntil } from 'rxjs/operators';
 
 @Component({
   host: { class: 'page' },
@@ -15,6 +16,7 @@ import { takeUntil } from 'rxjs/operators';
 export class PricingPageComponent implements OnDestroy, OnInit {
   public baseCurrency: string;
   public coupon: number;
+  public couponId: string;
   public importAndExportTooltipBasic = translate(
     'DATA_IMPORT_AND_EXPORT_TOOLTIP_BASIC'
   );
@@ -26,6 +28,7 @@ export class PricingPageComponent implements OnDestroy, OnInit {
   );
   public isLoggedIn: boolean;
   public price: number;
+  public priceId: string;
   public user: User;
 
   private unsubscribeSubject = new Subject<void>();
@@ -33,6 +36,7 @@ export class PricingPageComponent implements OnDestroy, OnInit {
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
+    private stripeService: StripeService,
     private userService: UserService
   ) {}
 
@@ -50,13 +54,35 @@ export class PricingPageComponent implements OnDestroy, OnInit {
           this.user = state.user;
 
           this.coupon = subscriptions?.[this.user?.subscription?.offer]?.coupon;
+          this.couponId =
+            subscriptions?.[this.user.subscription.offer]?.couponId;
           this.price = subscriptions?.[this.user?.subscription?.offer]?.price;
+          this.priceId = subscriptions?.[this.user.subscription.offer]?.priceId;
 
           this.changeDetectorRef.markForCheck();
         }
       });
   }
 
+  public onCheckout() {
+    this.dataService
+      .createCheckoutSession({ couponId: this.couponId, priceId: this.priceId })
+      .pipe(
+        switchMap(({ sessionId }: { sessionId: string }) => {
+          return this.stripeService.redirectToCheckout({ sessionId });
+        }),
+        catchError((error) => {
+          alert(error.message);
+          throw error;
+        })
+      )
+      .subscribe((result) => {
+        if (result.error) {
+          alert(result.error.message);
+        }
+      });
+  }
+
   public ngOnDestroy() {
     this.unsubscribeSubject.next();
     this.unsubscribeSubject.complete();

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

@@ -336,7 +336,7 @@
                 *ngIf="user?.subscription?.type === 'Basic'"
                 class="mt-3 text-center"
               >
-                <a color="primary" mat-flat-button [routerLink]="['/account']">
+                <button color="primary" mat-flat-button (click)="onCheckout()">
                   <ng-container
                     *ngIf="user.subscription.offer === 'default'"
                     i18n
@@ -347,7 +347,7 @@
                     i18n
                     >Renew Plan</ng-container
                   >
-                </a>
+                </button>
                 <p class="m-0 text-muted">
                   <small i18n>One-time payment, no auto-renewal.</small>
                 </p>