import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { AppStateStore } from '../../../providers/stores/app-state.store';
import { Template } from '../../../models/template.model';
@Component({
selector: 'app-plaid',
templateUrl: './template-success.component.html',
styleUrls: ['./template-success.component.css']
})
export class TemplateSuccessComponent implements OnInit {
template: Template;
isLoading = false;
loaderHeader = 'Adding New Account';
message = 'Adding your account';
showMicroConfirmation = true;
bankName: string;
constructor(
private router: Router,
private app: AppStateStore,
private route: ActivatedRoute
) {}
ngOnInit() {
this.template = this.app.template;
this.route.params.subscribe(params => {
this.bankName = params['bankName'] as string;
console.log(this.bankName);
});
}
hideMicro() {
this.showMicroConfirmation = false;
}
showMicro() {
this.showMicroConfirmation = true;
}
return() {
this.router.navigate(['/templates']);
}
}
<span *ngIf="showMicroConfirmation">
<app-template-micro-deposit-notification (cancelMicro)="hideMicro()"></app-template-micro-deposit-notification>
</span>
<div class="scroller " id="successScreen ">
<div class="exit-header-ctn">
<button id="closeButton" (click)="return()" class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">close</i>
</button>
</div>
<p class="status-icon-ctn ">
<i class="material-icons status-positive status-icon ">done</i>
</p>
<h1 id="accountAddedHeader" class="status-header status-positive ">Account Added!</h1>
<div id="swLabel " class="page-description ">
<p class="para-medium">Please come back and verify the two micro deposits to start using this account.</p>
</div>
<!-- Title -->
<div class="itable-ctn">
<div class="itable-row">
<p id="activitySummaryLabel">Activity Summary</p>
</div>
<!-- Account Name -->
<div class="itable-row ">
<div class="itable-col-one ">
<!-- Account Name SVG Icon -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24"
style="enable-background:new 0 0 24 24;" xml:space="preserve" class="svg-icon">
<style type="text/css">
.st0 {
fill: none;
}
</style>
<g id="Layer_1">
<path class="st0" d="M1,0h24v24H1V0z" />
<path d="M20.1,17h-4.3v-6.8h4.3V17z M17.1,15.9h1.8v-4.7h-1.8V15.9z M14.1,17H9.9v-6.8h4.3V17z M11.1,15.9h1.8v-4.7h-1.8V15.9z
M8.1,17H3.9v-6.8h4.3V17z M5.1,15.9h1.8v-4.7H5.1V15.9z" />
</g>
<g id="Layer_3">
<path d="M22.1,22.6H1.9v-4.3h20.3V22.6z M3.1,21.4h17.8v-1.8H3.1V21.4z" />
</g>
<g id="Layer_2">
<path d="M22.1,8.6H1.9v-3L12,0.3l10.1,5.3V8.6z M3.1,7.4h17.8v-1L12,1.7L3.1,6.4V7.4z" />
</g>
</svg>
</div>
<div class="itable-col-two ">
<p>Account Name</p>
</div>
<div class="itable-col-three ">
<p id="accountNameLabel">{{template.name}}</p>
</div>
</div>
<!-- Display Name -->
<div class="itable-row ">
<div class="itable-col-one ">
<i class="material-icons ">account_balance</i>
</div>
<div class="itable-col-two ">
<p>Nickname</p>
</div>
<div class="itable-col-three ">
<p id="displayNameLabel">{{template.displayName}}</p>
</div>
</div>
<!-- Routing Number -->
<div class="itable-row ">
<div class="itable-col-one ">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: none;
}
.st1 {
enable-background: new;
}
</style>
<path class="st0" d="M-0.2,0.2h24v24h-24C-0.2,24.2-0.2,0.2-0.2,0.2z M-0.2,0.2h24v24h-24C-0.2,24.2-0.2,0.2-0.2,0.2z M0.6,1h22.5
v22.5H0.6V1z" />
<g class="st1">
<path d="M17.9,18.8h-3.7l-4-7.1v7.1H7V3.7h4.6c1.8,0,3.2,0.4,4.1,1.1c0.9,0.7,1.4,1.8,1.4,3.2c0,1-0.3,1.9-0.9,2.7
s-1.4,1.2-2.4,1.3L17.9,18.8z M10.2,10.1h0.5c1.3,0,2.2-0.1,2.6-0.4s0.6-0.8,0.6-1.5c0-0.7-0.2-1.3-0.7-1.6
c-0.5-0.3-1.3-0.5-2.5-0.5h-0.5V10.1z" />
</g>
</svg>
</div>
<div class="itable-col-two ">
<p>Routing Number</p>
</div>
<div class="itable-col-three ">
<p id="routingNumberLabel">{{template.routingNumber}}</p>
</div>
</div>
<!-- Finacncial Institution -->
<div class="itable-row ">
<div class="itable-col-one ">
<i class="material-icons ">attach_money</i>
</div>
<div class="itable-col-two ">
<p>Financial Institution</p>
</div>
<div class="itable-col-three ">
<p id="bankNameLabel">{{bankName}}</p>
</div>
</div>
<!-- Account Number -->
<div class="itable-row ">
<div class="itable-col-one ">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: none;
}
.st1 {
enable-background: new;
}
</style>
<path class="st0" d="M-0.2,0.2h24v24h-24C-0.2,24.2-0.2,0.2-0.2,0.2z M-0.2,0.2h24v24h-24C-0.2,24.2-0.2,0.2-0.2,0.2z M0.6,1h22.5
v22.5H0.6V1z" />
<g class="st1">
<path d="M4.2,18.8L9.9,3.7h3.7l5.8,15.1h-3.7l-1.2-3.2H8.7l-1.1,3.2H4.2z M13.8,13.1l-1.7-4.9c0-0.1-0.1-0.4-0.2-0.7
c-0.1-0.4-0.2-0.8-0.2-1.3c-0.1,0.5-0.2,0.9-0.3,1.3c-0.1,0.4-0.1,0.6-0.2,0.8l-1.6,4.8H13.8z" />
</g>
</svg>
</div>
<div class="itable-col-two ">
<p>Account Number</p>
</div>
<div class="itable-col-three ">
<p id="accountNumberLabel">{{template.accountNumber}}</p>
</div>
</div>
<!-- Type -->
<div class="itable-row ">
<div class="itable-col-one ">
<i class="material-icons ">title</i>
</div>
<div class="itable-col-two ">
<p>Account Type</p>
</div>
<div class="itable-col-three ">
<p id="accountTypeButton">{{template.accountType}}</p>
</div>
</div>
<a [routerLink]="[ '/templates'] ">
<button id="viewAccountsButton" type="button " class="action-button ">
<p class="button-inside ">View Accounts</p>
</button>
</a>
</div>
</div>