From eb0c8876810b8ef4eec016babcd9a7e6abe4340d Mon Sep 17 00:00:00 2001
From: Chris Veilleux <veilleux.chris@gmail.com>
Date: Wed, 20 Feb 2019 20:52:39 -0600
Subject: [PATCH] changed to use the membership options from the shared module
 and take the account's memberhsip object as input

---
 projects/account/src/app/profile/profile.module.ts    |  4 +++-
 .../profile/subscription/subscription.component.html  |  9 +--------
 .../profile/subscription/subscription.component.ts    | 11 +++++++----
 3 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/projects/account/src/app/profile/profile.module.ts b/projects/account/src/app/profile/profile.module.ts
index ce4457a..1454c24 100644
--- a/projects/account/src/app/profile/profile.module.ts
+++ b/projects/account/src/app/profile/profile.module.ts
@@ -19,6 +19,7 @@ import { LoginComponent } from './login/login.component';
 import { ProfileComponent } from './profile.component';
 import { ProfileService } from './profile.service';
 import { SubscriptionComponent } from './subscription/subscription.component';
+import { SharedModule } from 'shared';
 
 @NgModule({
     declarations: [
@@ -41,7 +42,8 @@ import { SubscriptionComponent } from './subscription/subscription.component';
         MatExpansionModule,
         MatFormFieldModule,
         MatInputModule,
-        MatToolbarModule
+        MatToolbarModule,
+        SharedModule
     ],
     providers: [
         ProfileService
diff --git a/projects/account/src/app/profile/subscription/subscription.component.html b/projects/account/src/app/profile/subscription/subscription.component.html
index 7ed5b13..2ee8724 100644
--- a/projects/account/src/app/profile/subscription/subscription.component.html
+++ b/projects/account/src/app/profile/subscription/subscription.component.html
@@ -4,14 +4,7 @@
     </mat-toolbar>
     <div fxLayout="column" fxLayoutAlign="center center">
         <span>Mycroft supporters gain access to premium services, such as voices.</span>
-        <mat-button-toggle-group [vertical]="alignVertical">
-            <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>
+        <shared-membership-options [accountMembership]="accountMembership"></shared-membership-options>
         <span id="subscription-date" class="mat-body">Proudly supporting Mycroft for {{subscriptionDuration}}</span>
     </div>
 </mat-card>
diff --git a/projects/account/src/app/profile/subscription/subscription.component.ts b/projects/account/src/app/profile/subscription/subscription.component.ts
index f0f013e..d83ef70 100644
--- a/projects/account/src/app/profile/subscription/subscription.component.ts
+++ b/projects/account/src/app/profile/subscription/subscription.component.ts
@@ -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 { Subscription } from 'rxjs';
 
+import { Membership } from '../profile.service';
+
 export interface SubscriptionType {
     name: string;
     price: string;
@@ -9,17 +11,17 @@ export interface SubscriptionType {
 }
 
 const nonSupporter: SubscriptionType = {
-  name: 'NON-SUPPORTER',
+  name: 'Maybe Later',
   price: '$0',
   period: null
 };
 const monthlySupporter: SubscriptionType = {
-  name: 'MONTHLY SUPPORTER',
+  name: 'Monthly Supporter',
   price: '$1.99',
   period: 'month'
 };
 const yearlySupporter: SubscriptionType = {
-  name: 'YEARLY SUPPORTER',
+  name: 'Yearly Supporter',
   price: '$19.99',
   period: 'year'
 };
@@ -31,6 +33,7 @@ const yearlySupporter: SubscriptionType = {
   styleUrls: ['./subscription.component.scss']
 })
 export class SubscriptionComponent implements OnDestroy {
+    @Input() accountMembership: Membership;
     public subscriptionTypes: SubscriptionType[];
     public subscriptionDuration = '3 years 10 months';
     public alignVertical: boolean;