src/app/common/components/shadowbox-header/shadowbox-header.component.scss

@@ -48,6 +48,7 @@ m-shadowboxHeader {
   z-index: 2;
   opacity: 0;
   transition: opacity 0.2s ease, width 0.4s ease;
+  cursor: pointer;
   &.m-shadowboxHeader__overflowFade--right {
     @include m-theme() {
       right: 0;

src/app/common/components/shadowbox-header/shadowbox-header.component.ts

@@ -70,9 +70,14 @@ export class ShadowboxHeaderComponent implements AfterViewInit {
 
   @HostListener('click', ['$event'])
   onClick($event) {
-    //  TODO allow click to go through
-    this.slideToActiveMetric(this.container, $event.target);
-    this.checkOverflow();
+    const targetMetric = $event.target;
+    console.log('clickevent', $event);
+    if (targetMetric.className === 'm-shadowboxHeader__overflowFade--left') {
+      this.slide('left');
+    } else {
+      this.slideToActiveMetric(this.container, targetMetric);
+      this.checkOverflow();
+    }
   }
 
   @HostListener('window:resize')

src/app/common/components/shadowbox-submit-button/shadowbox-submit-button.component.scss

@@ -64,7 +64,7 @@
       }
       &.red {
         @include m-theme() {
-          background-color: rgba(themed($m-red), 0.7);
+          background-color: rgba(themed($m-red), 0.9);
         }
       }
       &.grey {

src/app/common/components/shadowbox-submit-button/shadowbox-submit-button.component.spec.ts

@@ -18,7 +18,7 @@ describe('ShadowboxSubmitButtonComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
-  //   expect(component).toBeTruthy();
-  // });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

src/app/common/components/sidebar-menu/sidebar-menu.component.spec.ts

@@ -31,7 +31,7 @@ describe('SidebarMenuComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
-  //   expect(component).toBeTruthy();
-  // });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

src/app/helpers/scrollable-container-visibility.ts

 // credit to Adam Reis via https://stackoverflow.com/questions/16308037/detect-when-elements-within-a-scrollable-div-are-out-of-view
 
-export default function checkIfElementIsVerticallyInView(
+export default function isElementVerticallyInView(
   container: HTMLElement,
   element: HTMLElement,
   partial?: boolean // if true, returns false if el is partially obscured
 ) {
-  // Determine container top and bottom
-  const cTop = container.scrollTop;
-  const cBottom = cTop + container.clientHeight;
+  if (container && element) {
+    // Determine container top and bottom
+    const cTop = container.scrollTop;
+    const cBottom = cTop + container.clientHeight;
 
-  // Determine element top and bottom
-  const eTop = element.offsetTop;
-  const eBottom = eTop + element.clientHeight;
+    // Determine element top and bottom
+    const eTop = element.offsetTop;
+    const eBottom = eTop + element.clientHeight;
 
-  // Check if in view
-  const isTotal = eTop >= cTop && eBottom <= cBottom;
-  const isPartial =
-    partial &&
-    ((eTop < cTop && eBottom > cTop) || (eBottom > cBottom && eTop < cBottom));
+    // Check if in view
+    const isTotal = eTop >= cTop && eBottom <= cBottom;
+    const isPartial =
+      partial &&
+      ((eTop < cTop && eBottom > cTop) ||
+        (eBottom > cBottom && eTop < cBottom));
 
-  return isTotal || isPartial;
+    return isTotal || isPartial;
+  }
 }
 
-export function checkIfElementIsHorizontallyInView(
+export function isElementHorizontallyInView(
   container: HTMLElement,
   element: HTMLElement,
   partial?: boolean // if true, returns false if el is partially obscured
@@ -82,33 +85,34 @@ export function horizontallyScrollElementIntoView(
   element: HTMLElement,
   smooth?: boolean // true if you want the scroll to be animated
 ) {
-  // Determine container left and right
-  const cLeft = container.scrollLeft;
-  const cRight = cLeft + container.clientWidth;
-
-  // Determine element left and right
-  const eLeft = element.offsetLeft;
-  const eRight = eLeft + element.clientWidth;
-
-  let targetScrollLeft;
-
-  if (eLeft < cLeft || (eLeft < cLeft && eRight > cLeft)) {
-    // wholly or partially obscured on left
-    targetScrollLeft = container.scrollLeft - cLeft - eLeft;
-  } else if (eRight > cRight || (eRight > cRight && eLeft < cRight)) {
-    // wholly or partially obscured on right
-    targetScrollLeft = container.scrollLeft + eRight - cRight;
-  }
+  if (container && element) {
+    // Determine container left and right
+    const cLeft = container.scrollLeft;
+    const cRight = cLeft + container.clientWidth;
+
+    // Determine element left and right
+    const eLeft = element.offsetLeft;
+    const eRight = eLeft + element.clientWidth;
 
-  if (smooth) {
-    const opts: ScrollToOptions = {
-      top: 0,
-      left: targetScrollLeft,
-      behavior: 'smooth',
-    };
-    container.scrollTo(opts);
-  } else {
-    container.scrollLeft = targetScrollLeft;
+    let targetScrollLeft;
+
+    if (eLeft < cLeft || (eLeft < cLeft && eRight > cLeft)) {
+      // wholly or partially obscured on left
+      targetScrollLeft = container.scrollLeft - cLeft - eLeft;
+    } else if (eRight > cRight || (eRight > cRight && eLeft < cRight)) {
+      // wholly or partially obscured on right
+      targetScrollLeft = container.scrollLeft + eRight - cRight;
+    }
+
+    if (smooth) {
+      const opts: ScrollToOptions = {
+        top: 0,
+        left: targetScrollLeft,
+        behavior: 'smooth',
+      };
+      container.scrollTo(opts);
+    } else {
+      container.scrollLeft = targetScrollLeft;
+    }
   }
-  // }
 }

src/app/modules/wallet/v2/dashboard.component.ts

@@ -65,8 +65,6 @@ export class WalletDashboardComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    console.log('dashboard router config', this.router.config);
-
     if (!this.session.isLoggedIn()) {
       this.router.navigate(['/login']);
       return;

src/app/modules/wallet/v2/settings-cash/settings-cash.component.html

 <div class="mdl-spinner mdl-js-spinner is-active" [mdl] *ngIf="!loaded"></div>
 <div class="m-walletSettings" *ngIf="loaded">
+  <h4>Bank Information</h4>
+  <p>Add your bank account details where rewards are deposited.</p>
   <ng-container *ngIf="!account">
-    <h2>Bank Information</h2>
-    <p>Add your bank account details where rewards are deposited.</p>
     <div class="m-walletSettingsView--addAccount">
-      <m-shadowboxSubmitButton (click)="createAccount()" [disabled]="inProgress"
+      <m-shadowboxSubmitButton (click)="editBank()" [disabled]="inProgress"
         >Add your bank details</m-shadowboxSubmitButton
       >
     </div>
   </ng-container>
-  <ng-container *ngIf="hasAccount">
-    <div class="m-walletSettingsView--accountSplash" *ngIf="!editing">
-      <div>
-        <div>
+  <ng-container *ngIf="account">
+    <div class="m-walletSettingsView--accountSplash" *ngIf="!editingBank">
+      <div class="m-walletSettingsView--accountSplash__bankPreviewWrapper">
+        <span>
           {{ payoutMethod.account.bank_name }}
-        </div>
-        <div>****{{ payoutMethod.account.last4 }}</div>
-
-        <a (click)="edit()"> Update</a>
-        <a (click)="removeBank()"> remove</a>
+        </span>
+        <span>****{{ payoutMethod.account.last4 }}</span>
+      </div>
+      <div class="m-walletSettingsView--accountSplash__linkContainer">
+        <a (click)="editBank()">Update</a>
+        <a (click)="removeBank()">Remove</a>
       </div>
-      <m-shadowboxSubmitButton [color]="red" (click)="leaveMonetization()"
+    </div>
+    <div>
+      <h4>Leave Monetization Program</h4>
+      <p>
+        For security reasons, you won't be able to rejoin the monetization
+        program.
+      </p>
+      <m-shadowboxSubmitButton color="red" (click)="showModal = true"
         >Leave Monetization Program</m-shadowboxSubmitButton
       >
     </div>
-    <div class="m-walletSettingsView--editing" *ngIf="editing"></div>
+    <!-- <div class="m-walletSettingsView--editingBank" *ngIf="editingBank"></div> -->
   </ng-container>
 
   <m-walletModal [showModal]="showModal" (closeModal)="showModal = false">
@@ -32,13 +40,12 @@
       Are you sure you want to leave the monetization program? You won't be able
       to rejoin again.
     </p>
-    <p></p>
     <div class="m-walletSettings--cash__leaveModalButtons">
-      <m-shadowboxSubmitButton [color]="grey" (click)="showModal = false"
+      <m-shadowboxSubmitButton color="grey" (click)="showModal = false"
         >Cancel</m-shadowboxSubmitButton
       >
-      <m-shadowboxSubmitButton [color]="red" (click)="leaveMonetization()"
-        >Leave Monetization Program</m-shadowboxSubmitButton
+      <m-shadowboxSubmitButton color="red" (click)="leaveMonetization()"
+        >I'm sure</m-shadowboxSubmitButton
       >
     </div>
   </m-walletModal>

src/app/modules/wallet/v2/settings-cash/settings-cash.component.scss

+// additional shared styles located in dashboard.component.scss
+m-walletSettings--cash {
+  .m-walletSettingsView--accountSplash {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+    margin: 38px 0 59px 0;
+    max-width: 460px;
+  }
+  .m-walletSettingsView--accountSplash__bankPreviewWrapper {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+    flex: 3 0 auto;
+    margin-bottom: 10px;
+    span {
+      margin-right: 8px;
+    }
+  }
+  .m-walletSettingsView--accountSplash__linkContainer {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-around;
+    flex: 0 0 auto;
+    max-width: 146px;
+    a:last-child {
+      margin-left: 8px;
+    }
+  }
+
+  .m-walletSettings--cash__leaveModalButtons {
+    display: flex;
+    flex-flow: row wrap-reverse;
+    justify-content: center;
+  }
+}

src/app/modules/wallet/v2/settings-cash/settings-cash.component.ts

@@ -3,6 +3,7 @@ import { WalletDashboardService } from '../dashboard.service';
 import { FormToastService } from '../../../../common/services/form-toast.service';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
 import { Session } from '../../../../services/session';
+import { ConfigsService } from '../../../../common/services/configs.service';
 
 @Component({
   selector: 'm-walletSettings--cash',
@@ -11,7 +12,6 @@ import { Session } from '../../../../services/session';
 export class WalletSettingsCashComponent implements OnInit {
   // TODOOJM $account make this observable
   account: any;
-  // TODOOJM $account make this calculated by observable
   payoutMethod = {
     account: null,
     country: 'US',
@@ -19,7 +19,7 @@ export class WalletSettingsCashComponent implements OnInit {
 
   loaded: boolean = false;
   inProgress: boolean = true;
-  editing: boolean = false;
+  editingBank: boolean = false;
   showModal: boolean = false;
   form;
 
@@ -27,7 +27,8 @@ export class WalletSettingsCashComponent implements OnInit {
     protected walletService: WalletDashboardService,
     private formToastService: FormToastService,
     private cd: ChangeDetectorRef,
-    protected session: Session
+    protected session: Session,
+    private configs: ConfigsService
   ) {}
 
   ngOnInit() {
@@ -41,6 +42,7 @@ export class WalletSettingsCashComponent implements OnInit {
     this.walletService
       .getStripeAccount()
       .then((account: any) => {
+        console.log(this.account);
         this.account = account;
         this.payoutMethod.country = account.country;
         this.form.controls.country.setValue(account.country);
@@ -50,7 +52,6 @@ export class WalletSettingsCashComponent implements OnInit {
       })
       .catch(e => {
         this.formToastService.error(e.message);
-        // this.detectChanges();
       });
 
     this.form = new FormGroup({
@@ -65,8 +66,6 @@ export class WalletSettingsCashComponent implements OnInit {
     this.detectChanges();
   }
 
-  async createaccount() {}
-
   async addBank() {
     this.inProgress = true;
     this.detectChanges();
@@ -75,7 +74,7 @@ export class WalletSettingsCashComponent implements OnInit {
       .addStripeBank(this.form.value)
       .then((response: any) => {
         this.inProgress = false;
-        this.editing = false;
+        this.editingBank = false;
         this.formToastService.success(
           'Your bank account was successfully added.'
         );
@@ -94,8 +93,7 @@ export class WalletSettingsCashComponent implements OnInit {
     this.walletService
       .leaveMonetization()
       .then((response: any) => {
-        // TODOOJM what to do here?
-        // (<any>window).Minds.user.merchant = [];
+        this.configs.set('merchant', []);
         this.getAccount();
       })
       .catch(e => {
@@ -104,8 +102,8 @@ export class WalletSettingsCashComponent implements OnInit {
     this.detectChanges();
   }
 
-  edit() {
-    this.editing = true;
+  editBank() {
+    this.editingBank = true;
     this.detectChanges();
   }