MycroftAI
/
selene-ui
mirror of https://github.com/MycroftAI/selene-ui.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

changed to use the membership options from the shared module and take the account's memberhsip object as input

pull/1/head
Chris Veilleux 2019-02-20 20:52:39 -06:00
parent 6c3417bb96
commit eb0c887681
3 changed files with 11 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
projects/account/src/app/profile/profile.module.ts
View File

@ -19,6 +19,7 @@ import { LoginComponent } from './login/login.component';
import { ProfileComponent } from './profile.component'; import { ProfileComponent } from './profile.component';
import { ProfileService } from './profile.service'; import { ProfileService } from './profile.service';
import { SubscriptionComponent } from './subscription/subscription.component'; import { SubscriptionComponent } from './subscription/subscription.component';
import { SharedModule } from 'shared';
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -41,7 +42,8 @@ import { SubscriptionComponent } from './subscription/subscription.component';
MatExpansionModule, MatExpansionModule,
MatFormFieldModule, MatFormFieldModule,
MatInputModule, MatInputModule,
MatToolbarModule MatToolbarModule,
SharedModule
], ],
providers: [ providers: [
ProfileService ProfileService

9
projects/account/src/app/profile/subscription/subscription.component.html
View File

@ -4,14 +4,7 @@
</mat-toolbar> </mat-toolbar>
<div fxLayout="column" fxLayoutAlign="center center"> <div fxLayout="column" fxLayoutAlign="center center">
<span>Mycroft supporters gain access to premium services, such as voices.</span> <span>Mycroft supporters gain access to premium services, such as voices.</span>
<mat-button-toggle-group [vertical]="alignVertical"> <shared-membership-options [accountMembership]="accountMembership"></shared-membership-options>
<ng-container *ngFor="let subscription of subscriptionTypes">
<mat-button-toggle style="padding: 8px">
<div class="mat-h3">{{subscription.name}}</div>
<div class="mat-body">{{subscription.price}} USD</div>
</mat-button-toggle>
</ng-container>
</mat-button-toggle-group>
<span id="subscription-date" class="mat-body">Proudly supporting Mycroft for {{subscriptionDuration}}</span> <span id="subscription-date" class="mat-body">Proudly supporting Mycroft for {{subscriptionDuration}}</span>
</div> </div>
</mat-card> </mat-card>

11
projects/account/src/app/profile/subscription/subscription.component.ts
View File

@ -1,7 +1,9 @@
import { Component, OnDestroy } from '@angular/core'; import { Component, Input, OnDestroy } from '@angular/core';
import { MediaChange, MediaObserver } from '@angular/flex-layout'; import { MediaChange, MediaObserver } from '@angular/flex-layout';
import { Subscription } from 'rxjs'; import { Subscription } from 'rxjs';
import { Membership } from '../profile.service';
export interface SubscriptionType { export interface SubscriptionType {
name: string; name: string;
price: string; price: string;
@ -9,17 +11,17 @@ export interface SubscriptionType {
} }
const nonSupporter: SubscriptionType = { const nonSupporter: SubscriptionType = {
name: 'NON-SUPPORTER', name: 'Maybe Later',
price: '$0', price: '$0',
period: null period: null
}; };
const monthlySupporter: SubscriptionType = { const monthlySupporter: SubscriptionType = {
name: 'MONTHLY SUPPORTER', name: 'Monthly Supporter',
price: '$1.99', price: '$1.99',
period: 'month' period: 'month'
}; };
const yearlySupporter: SubscriptionType = { const yearlySupporter: SubscriptionType = {
name: 'YEARLY SUPPORTER', name: 'Yearly Supporter',
price: '$19.99', price: '$19.99',
period: 'year' period: 'year'
}; };
@ -31,6 +33,7 @@ const yearlySupporter: SubscriptionType = {
styleUrls: ['./subscription.component.scss'] styleUrls: ['./subscription.component.scss']
}) })
export class SubscriptionComponent implements OnDestroy { export class SubscriptionComponent implements OnDestroy {
@Input() accountMembership: Membership;
public subscriptionTypes: SubscriptionType[]; public subscriptionTypes: SubscriptionType[];
public subscriptionDuration = '3 years 10 months'; public subscriptionDuration = '3 years 10 months';
public alignVertical: boolean; public alignVertical: boolean;