add subscription component

Author: chriskapp

projects/fusio-sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-fusio-sdk",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "SDK to integrate Fusio into an Angular app",
   "keywords": [
     "Fusio",

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

@@ -0,0 +1,24 @@
+
+<fusio-message [response]="response"></fusio-message>
+
+<button class="btn btn-primary" (click)="doBillingPortal()">Billing portal</button>
+
+<hr>
+
+<div class="card float-start" style="width:14rem;margin-right:1rem;margin-bottom:1rem" *ngFor="let plan of plans">
+  <h5 class="card-header">{{plan.name}}</h5>
+  <div class="card-body">
+    <dl>
+      <dt>Price</dt>
+      <dd>{{ plan.price | currency : currencyCode }}</dd>
+      <dt>Points</dt>
+      <dd>{{ plan.points }}</dd>
+    </dl>
+    <p>{{ plan.description }}</p>
+    <div class="btn-group" role="group">
+      <a (click)="doPurchase(plan)" class="btn btn-primary">Purchase</a>
+    </div>
+  </div>
+</div>
+
+<div style="clear:both"></div>

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

@@ -0,0 +1,74 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {Plan} from "fusio-sdk/dist/src/generated/consumer/Plan";
+import {Message} from "fusio-sdk/dist/src/generated/consumer/Message";
+import {ConsumerService} from "../../service/consumer.service";
+import {LocationStrategy} from "@angular/common";
+import {ErrorConverter} from "../../util/error-converter";
+
+@Component({
+  selector: 'fusio-subscription',
+  templateUrl: './subscription.component.html',
+  styleUrls: ['./subscription.component.css']
+})
+export class SubscriptionComponent implements OnInit {
+
+  @Input()
+  provider: string = 'stripe';
+
+  @Input()
+  currencyCode: string = 'USD';
+
+  @Input()
+  redirectPath: string = '/account';
+
+  plans?: Array<Plan>
+  response?: Message;
+
+  constructor(private consumer: ConsumerService, private location: LocationStrategy) { }
+
+  async ngOnInit(): Promise<void> {
+    const plan = await this.consumer.getClient().getConsumerPlan();
+    const response = await plan.consumerActionPlanGetAll({count: 1024});
+    this.plans = response.data.entry;
+  }
+
+  async doBillingPortal() {
+    try {
+      const path = this.location.prepareExternalUrl(this.redirectPath);
+      const redirectUrl = location.origin + path;
+
+      const portal = await this.consumer.getClient().getConsumerPaymentByProviderPortal(this.provider);
+      const response = await portal.consumerActionPaymentPortal({
+        returnUrl: redirectUrl
+      });
+
+      if (response.data.redirectUrl) {
+        location.href = response.data.redirectUrl;
+      } else {
+        throw new Error('You can only visit the billing portal once you have successfully purchased a subscription');
+      }
+    } catch (error) {
+      this.response = ErrorConverter.convert(error);
+    }
+  }
+
+  async doPurchase(plan: Plan) {
+    try {
+      const path = this.location.prepareExternalUrl(this.redirectPath);
+      const redirectUrl = location.origin + path;
+
+      const checkout = await this.consumer.getClient().getConsumerPaymentByProviderCheckout(this.provider);
+      const response = await checkout.consumerActionPaymentCheckout({
+        planId: plan.id,
+        returnUrl: redirectUrl,
+      });
+
+      if (response.data.approvalUrl) {
+        location.href = response.data.approvalUrl;
+      }
+    } catch (error) {
+      this.response = ErrorConverter.convert(error);
+    }
+  }
+
+}

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

@@ -22,6 +22,7 @@ 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';
 
 @NgModule({
   declarations: [
@@ -40,6 +41,7 @@ import {GravatarModule} from "ngx-gravatar";
     SidebarComponent,
     AccountComponent,
     SecurityComponent,
+    SubscriptionComponent,
   ],
   imports: [
     BrowserModule,

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

@@ -21,6 +21,7 @@ export * from './lib/component/scopes/scopes.component';
 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/guard/authentication.guard';