Commit 575782fe authored by Emiliano Balbuena's avatar Emiliano Balbuena

(wip): Pro Subscription component

1 merge request!459WIP: (feat): Minds Pro
Pipeline #72477591 passed with stages
in 33 minutes and 7 seconds
......@@ -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>
......
......@@ -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;
......
......@@ -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,
],
......
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;
}
}
<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>
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();
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment