(wip): Pro Subscription component

src/app/modules/pro/marketing.component.html

@@ -16,7 +16,7 @@
  </div>
 
  <div class="m-marketing--hero--actions m-marketing--action-button">
- <!--<m-plus&#45;&#45;subscription></m-plus&#45;&#45;subscription>-->
+ <m-pro--subscription></m-pro--subscription>
  </div>
  </div>
  </div>

src/app/modules/pro/marketing.component.ts

@@ -3,7 +3,7 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
 @Component({
  selector: 'm-pro--marketing',
  templateUrl: 'marketing.component.html',
- changeDetection: ChangeDetectionStrategy.OnPush
+ changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProMarketingComponent {
  minds = window.Minds;

src/app/modules/pro/pro.module.ts

@@ -5,6 +5,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { CommonModule } from '../../common/common.module';
 import { ProService } from './pro.service';
 import { ProMarketingComponent } from './marketing.component';
+import { ProSubscriptionComponent } from './subscription.component';
 
 const routes: Routes = [
  {
@@ -26,9 +27,9 @@ const routes: Routes = [
  ],
  declarations: [
  ProMarketingComponent,
+ ProSubscriptionComponent,
  ],
- exports: [
- ],
+ exports: [],
  entryComponents: [
  ProMarketingComponent,
  ],

src/app/modules/pro/pro.service.ts

 import { Injectable } from '@angular/core';
+import { Client } from '../../services/api/client';
 
 @Injectable()
 export class ProService {
+ constructor(
+ protected client: Client,
+ ) { }
 
+ async isActive(): Promise<boolean> {
+ const result: any = await this.client.get('api/v2/pro');
+
+ if (!result || typeof result.isActive === 'undefined') {
+ throw new Error('Unable to check your Pro status');
+ }
+
+ return Boolean(result.isActive);
+ }
+
+ async enable(): Promise<boolean> {
+ // TODO: Payments
+ await this.client.post('api/v2/pro/enable');
+ return true;
+ }
+
+ async disable(): Promise<boolean> {
+ await this.client.delete('api/v2/pro');
+ return true;
+ }
 }

src/app/modules/pro/subscription.component.html

+<div *ngIf="isLoggedIn">
+ <ng-container *ngIf="!inProgress; else inProgressSpinner">
+ <button
+ *ngIf="!active"
+ class="mdl-button mdl-button--colored mdl-color--green"
+ [disabled]="inProgress || criticalError"
+ (click)="enable()"
+ >Become Pro</button>
+
+ <button
+ *ngIf="active"
+ class="mdl-button mdl-button--colored mdl-color--red"
+ [disabled]="inProgress || criticalError"
+ (click)="disable()"
+ >Cancel Pro</button>
+
+ <span
+ *ngIf="error"
+ class="m-pro-subscription--error"
+ >
+ {{ error }}
+ </span>
+ </ng-container>
+
+ <ng-template #inProgressSpinner>
+ <div class="m-pro-subscription--in-progress">
+ <div class="mdl-spinner mdl-js-spinner is-active" [mdl]></div>
+ </div>
+ </ng-template>
+</div>

src/app/modules/pro/subscription.component.ts

+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { Session } from '../../services/session';
+import { ProService } from './pro.service';
+
+@Component({
+ selector: 'm-pro--subscription',
+ templateUrl: 'subscription.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ProSubscriptionComponent implements OnInit {
+
+ isLoggedIn: boolean = false;
+
+ inProgress: boolean = false;
+
+ active: boolean;
+
+ criticalError: boolean = false;
+
+ error: string = '';
+
+ constructor(
+ protected service: ProService,
+ protected session: Session,
+ protected cd: ChangeDetectorRef,
+ ) {
+ }
+
+ ngOnInit() {
+ this.isLoggedIn = this.session.isLoggedIn();
+
+ if (this.isLoggedIn) {
+ this.load();
+ }
+ }
+
+ async load() {
+ this.inProgress = true;
+ this.error = '';
+ this.detectChanges();
+
+ try {
+ this.active = await this.service.isActive();
+ } catch (e) {
+ this.criticalError = true;
+ this.error = (e && e.message) || 'Unknown error';
+ }
+
+ this.inProgress = false;
+ this.detectChanges();
+ }
+
+ async enable() {
+ this.inProgress = true;
+ this.error = '';
+ this.detectChanges();
+
+ try {
+ await this.service.enable();
+ this.active = true;
+ } catch (e) {
+ this.active = false;
+ this.error = (e && e.message) || 'Unknown error';
+ }
+
+ this.inProgress = false;
+ this.detectChanges();
+ }
+
+ async disable() {
+ this.inProgress = true;
+ this.error = '';
+ this.detectChanges();
+
+ try {
+ await this.service.disable();
+ this.active = false;
+ } catch (e) {
+ this.active = true;
+ this.error = (e && e.message) || 'Unknown error';
+ }
+
+ this.inProgress = false;
+ this.detectChanges();
+ }
+
+ detectChanges() {
+ this.cd.markForCheck();
+ this.cd.detectChanges();
+ }
+}