moved the membership-options component back into the profile component since it is only used there.

projects/account/src/app/profile/membership-options/membership-options.component.html

@@ -1,7 +1,7 @@
 <mat-button-toggle-group
         class="options-button-group"
         [vertical]="alignVertical"
-        [value]="accountMembership"
+        [value]="selectedMembershipType"
         (change)="onMembershipSelect($event)"
 >
     <mat-button-toggle

projects/account/src/app/profile/membership-options/membership-options.component.ts

@@ -0,0 +1,51 @@
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { MediaChange, MediaObserver } from '@angular/flex-layout';
+import { MatButtonToggleChange } from '@angular/material';
+
+import { Subscription } from 'rxjs';
+
+import { AccountMembership, MembershipType, ProfileService } from '../profile.service';
+
+
+@Component({
+    selector: 'account-membership-options',
+    templateUrl: './membership-options.component.html',
+    styleUrls: ['./membership-options.component.scss']
+})
+export class MembershipOptionsComponent implements OnInit, OnDestroy {
+    @Input() accountMembership: AccountMembership;
+    public alignVertical: boolean;
+    @Input() membershipTypes: MembershipType[];
+    public mediaWatcher: Subscription;
+    @Output() membershipChange = new EventEmitter<string>();
+    public selectedMembershipType: string;
+
+    constructor(public mediaObserver: MediaObserver, private profileService: ProfileService) {
+        this.mediaWatcher = mediaObserver.media$.subscribe(
+            (change: MediaChange) => {
+                this.alignVertical = ['xs', 'sm'].includes(change.mqAlias);
+            }
+        );
+    }
+
+    ngOnInit(): void {
+        this.profileService.selectedMembershipType.subscribe(
+            (membershipType) => { this.selectedMembershipType = membershipType; }
+        );
+        this.profileService.setSelectedMembershipType(
+            this.accountMembership,
+            this.membershipTypes
+        );
+
+    }
+
+    ngOnDestroy(): void {
+      this.mediaWatcher.unsubscribe();
+    }
+
+    onMembershipSelect(newMembershipType: MatButtonToggleChange) {
+        this.profileService.selectedMembershipType.next(newMembershipType.value);
+        this.membershipChange.emit(newMembershipType.value);
+    }
+
+}

projects/account/src/app/profile/profile.module.ts

@@ -4,42 +4,60 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import {
+    MatBottomSheetModule,
     MatButtonModule,
+    MatButtonToggleModule,
     MatCardModule,
+    MatDialogModule,
     MatFormFieldModule,
     MatInputModule,
     MatToolbarModule
 } from '@angular/material';
 
+import { NgxStripeModule } from 'ngx-stripe';
+
 import { AgreementsComponent } from './agreements/agreements.component';
 import { DeleteComponent } from './delete/delete.component';
+import { environment} from '../../environments/environment';
 import { LoginComponent } from './login/login.component';
+import { MembershipComponent } from './membership/membership.component';
+import { MembershipOptionsComponent } from './membership-options/membership-options.component';
+import { PaymentComponent } from './payment/payment.component';
 import { ProfileComponent } from './profile.component';
 import { ProfileService } from './profile.service';
-import { MembershipComponent } from './membership/membership.component';
-import { SharedModule } from 'shared';
+import { ProfileRoutingModule } from './profile-routing.module';
+import { VerifyCardDialogComponent } from './payment/verify-card-dialog.component';
 
 @NgModule({
     declarations: [
         AgreementsComponent,
         DeleteComponent,
         LoginComponent,
+        MembershipComponent,
+        MembershipOptionsComponent,
+        PaymentComponent,
         ProfileComponent,
-        MembershipComponent
+        VerifyCardDialogComponent
     ],
     entryComponents: [
-        LoginComponent
+        LoginComponent,
+        PaymentComponent,
+        VerifyCardDialogComponent
     ],
     imports: [
         CommonModule,
         FlexLayoutModule,
         FontAwesomeModule,
+        MatBottomSheetModule,
         MatButtonModule,
+        MatButtonToggleModule,
         MatCardModule,
+        MatDialogModule,
         MatFormFieldModule,
         MatInputModule,
         MatToolbarModule,
-        SharedModule
+        NgxStripeModule.forRoot(environment.stripeApiKey),
+        ProfileRoutingModule
     ],
     providers: [
         ProfileService

projects/shared/src/lib/membership-options/membership-options.component.ts

@@ -1,42 +0,0 @@
-import { Component, EventEmitter, Input, OnDestroy, Output } from '@angular/core';
-import { MediaChange, MediaObserver } from '@angular/flex-layout';
-import { MatButtonToggleChange } from '@angular/material';
-
-import { Subscription } from 'rxjs';
-
-export interface MembershipType {
-    type: string;
-    rate: string;
-    ratePeriod: string;
-    stripePlan: string;
-}
-
-@Component({
-    selector: 'shared-membership-options',
-    templateUrl: './membership-options.component.html',
-    styleUrls: ['./membership-options.component.scss']
-})
-export class MembershipOptionsComponent implements OnDestroy {
-    @Input() accountMembership: string;
-    public alignVertical: boolean;
-    @Input() membershipTypes: MembershipType[];
-    public mediaWatcher: Subscription;
-    @Output() membershipSelected = new EventEmitter<string>();
-
-    constructor(public mediaObserver: MediaObserver) {
-        this.mediaWatcher = mediaObserver.media$.subscribe(
-            (change: MediaChange) => {
-                this.alignVertical = ['xs', 'sm'].includes(change.mqAlias);
-            }
-        );
-    }
-
-    onMembershipSelect(membershipType: MatButtonToggleChange) {
-        this.membershipSelected.emit(membershipType.value);
-    }
-
-    ngOnDestroy(): void {
-      this.mediaWatcher.unsubscribe();
-    }
-
-}

projects/shared/src/lib/shared.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'lib-shared',
+  selector: 'shared-base',
   template: `
     <p>
       shared works!

projects/shared/src/lib/shared.module.ts

@@ -13,7 +13,6 @@ import {
 import { FacebookButtonComponent } from './facebook-button/facebook-button.component';
 import { GithubButtonComponent } from './github-button/github-button.component';
 import { GoogleButtonComponent } from './google-button/google-button.component';
-import { MembershipOptionsComponent } from './membership-options/membership-options.component';
 import { SharedComponent } from './shared.component';
 
 export function getAuthServiceConfigs() {
@@ -38,7 +37,6 @@ export function getAuthServiceConfigs() {
         FacebookButtonComponent,
         GithubButtonComponent,
         GoogleButtonComponent,
-        MembershipOptionsComponent,
         SharedComponent
     ],
     imports: [
@@ -52,7 +50,6 @@ export function getAuthServiceConfigs() {
         FacebookButtonComponent,
         GithubButtonComponent,
         GoogleButtonComponent,
-        MembershipOptionsComponent,
         SharedComponent
     ],
     providers: [