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

@@ -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

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>

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;