add subscription callback component and add checkput event

Author: chriskapp

projects/fusio-sdk/src/lib/component/subscription/callback/callback.component.css

@@ -0,0 +1,3 @@
+
+<ngb-alert type="success">Thank you for purchasing {{plan.name}}!</ngb-alert>
+<button class="btn btn-primary" [routerLink]="homePath">Home</button>

projects/fusio-sdk/src/lib/component/subscription/callback/callback.component.html

@@ -0,0 +1,46 @@
+import { Component, OnInit } from '@angular/core';
+import {ConsumerService} from "../../../service/consumer.service";
+import {ActivatedRoute} from "@angular/router";
+import {Plan} from "fusio-sdk/dist/src/generated/consumer/Plan";
+import {EventService} from "../../../service/event.service";
+import {ErrorService} from "../../../service/error.service";
+import {Message} from "fusio-sdk/dist/src/generated/consumer/Message";
+import {ConfigService} from "../../../service/config.service";
+
+@Component({
+  selector: 'fusio-subscription-callback',
+  templateUrl: './callback.component.html',
+  styleUrls: ['./callback.component.css']
+})
+export class CallbackComponent implements OnInit {
+
+  homePath?: string;
+  plan?: Plan;
+  response?: Message;
+
+  constructor(private consumer: ConsumerService, private event: EventService, private error: ErrorService, private config: ConfigService, private route: ActivatedRoute) { }
+
+  async ngOnInit(): Promise<void> {
+    this.homePath = this.config.getHomePath();
+
+    this.route.paramMap.subscribe(async params => {
+      const id = params.get('plan_id');
+      if (id) {
+        await this.loadPlan(id);
+      }
+    });
+  }
+
+  async loadPlan(id: string) {
+    try {
+      const plan = await this.consumer.getClient().getConsumerPlanByPlanId(id);
+      const response = await plan.consumerActionPlanGet();
+      this.plan = response.data;
+
+      this.event.dispatchPurchase(this.plan);
+    } catch (error) {
+      this.response = this.error.convert(error);
+    }
+  }
+
+}

projects/fusio-sdk/src/lib/component/subscription/callback/callback.component.ts

@@ -49,7 +49,7 @@ export class SubscriptionComponent implements OnInit {
 
   async doPurchase(plan: Plan) {
     try {
-      const path = this.location.prepareExternalUrl(this.config.getHomePath());
+      const path = this.location.prepareExternalUrl('/account/subscription/callback/' + plan.id);
       const redirectUrl = location.origin + path;
 
       const checkout = await this.consumer.getClient().getConsumerPaymentByProviderCheckout(this.config.getPaymentProvider());
@@ -59,7 +59,7 @@ export class SubscriptionComponent implements OnInit {
       });
 
       if (response.data.approvalUrl) {
-        this.event.dispatchPurchase(plan);
+        this.event.dispatchCheckout(plan);
 
         location.href = response.data.approvalUrl;
       }

projects/fusio-sdk/src/lib/component/subscription/subscription.component.ts

@@ -46,7 +46,12 @@ export interface EventListener {
   password_reset?: () => void,
 
   /**
-   * Invoked in case a user purchases a specific plan
+   * Invoked in case a user starts a checkout of a plan
+   */
+  checkout?: (plan: Plan) => void,
+
+  /**
+   * Invoked in case a user has purchased a plan
    */
   purchase?: (plan: Plan) => void,
 

projects/fusio-sdk/src/lib/config/config.ts

@@ -3,6 +3,9 @@ import {NgbModule} from "@ng-bootstrap/ng-bootstrap";
 import {CommonModule} from "@angular/common";
 import {FormsModule} from "@angular/forms";
 import {RouterModule} from '@angular/router';
+import {NgxCaptchaModule} from "ngx-captcha";
+import {GravatarModule} from "ngx-gravatar";
+import {Config, FUSIO_CONFIG} from "./config/config";
 import {EmptyComponent} from "./component/empty/empty.component";
 import {MessageComponent} from "./component/message/message.component";
 import {SearchComponent} from "./component/search/search.component";
@@ -19,10 +22,8 @@ import {RegisterComponent} from "./component/register/register.component";
 import {ActivateComponent} from "./component/register/activate/activate.component";
 import {AccountComponent} from './component/account/account.component';
 import {SecurityComponent} from './component/security/security.component';
-import {Config, FUSIO_CONFIG} from "./config/config";
-import {NgxCaptchaModule} from "ngx-captcha";
-import {GravatarModule} from "ngx-gravatar";
 import {SubscriptionComponent} from './component/subscription/subscription.component';
+import {CallbackComponent} from './component/subscription/callback/callback.component';
 import {DetailComponent as AppDetail} from './component/app/detail/detail.component';
 import {ListComponent as AppList} from './component/app/list/list.component';
 import {ModalComponent as AppModal} from './component/app/modal/modal.component';
@@ -50,6 +51,7 @@ import {AccountContainerComponent} from "./component/account-container/account-c
     SecurityComponent,
     SidebarComponent,
     SubscriptionComponent,
+    CallbackComponent,
     AppDetail,
     AppList,
     AppModal,
@@ -102,7 +104,7 @@ export class FusioSdkModule {
   }
 
   static forRoot(config?: Config): ModuleWithProviders<FusioSdkModule> {
-    return({
+    return ({
       ngModule: FusioSdkModule,
       providers: [{
         provide: FUSIO_CONFIG,

projects/fusio-sdk/src/lib/fusio-sdk.module.ts

@@ -53,6 +53,12 @@ export class EventService {
     }
   }
 
+  public dispatchCheckout(plan: Plan): void {
+    if (this.eventListener.checkout) {
+      this.eventListener.checkout.call(this, plan);
+    }
+  }
+
   public dispatchPurchase(plan: Plan): void {
     if (this.eventListener.purchase) {
       this.eventListener.purchase.call(this, plan);

projects/fusio-sdk/src/lib/service/event.service.ts

@@ -11,6 +11,7 @@ import {RegisterComponent} from "../component/register/register.component";
 import {ActivateComponent} from "../component/register/activate/activate.component";
 import {ResetComponent} from "../component/password/reset/reset.component";
 import {ConfirmComponent} from "../component/password/confirm/confirm.component";
+import {CallbackComponent} from "../component/subscription/callback/callback.component";
 import {ListComponent as AppListComponent} from '../component/app/list/list.component';
 import {ListComponent as EventListComponent} from '../component/event/list/list.component';
 
@@ -26,6 +27,7 @@ export class RouteBuilder {
         {path: 'event', component: EventListComponent, canActivate: [AuthenticationGuard]},
         {path: 'event/:id', component: EventListComponent, canActivate: [AuthenticationGuard]},
         {path: 'subscription', component: SubscriptionComponent, canActivate: [AuthenticationGuard]},
+        {path: 'subscription/callback/:plan_id', component: CallbackComponent, canActivate: [AuthenticationGuard]},
       ]},
       {path: 'login', component: LoginComponent},
       {path: 'login/:provider', component: ProviderComponent},

projects/fusio-sdk/src/lib/util/route-builder.ts

@@ -23,6 +23,7 @@ export * from './lib/component/search/search.component';
 export * from './lib/component/security/security.component';
 export * from './lib/component/sidebar/sidebar.component';
 export * from './lib/component/subscription/subscription.component';
+export * from './lib/component/subscription/callback/callback.component';
 
 export {DetailComponent as AppDetailComponent} from './lib/component/app/detail/detail.component';
 export {ListComponent as AppListComponent} from './lib/component/app/list/list.component';