File
Implements
Metadata
| selector |
app-ach-setup-review |
| styleUrls |
./ach-setup-review.component.css |
| templateUrl |
./ach-setup-review.component.html |
Methods
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
createClicked
|
createClicked:
|
Default value : false
|
|
|
|
errorMessage
|
errorMessage: string
|
Type : string
|
Default value : ''
|
|
|
|
problemCreatingAch
|
problemCreatingAch:
|
Default value : false
|
|
|
|
selectionChangeEffectiveDateToCurrentBusinessDate
|
selectionChangeEffectiveDateToCurrentBusinessDate: string
|
Type : string
|
|
|
|
selectionNoSettleBank
|
selectionNoSettleBank: string
|
Type : string
|
|
|
|
selectionRemoveJulianDateFromAchFile
|
selectionRemoveJulianDateFromAchFile: string
|
Type : string
|
|
|
|
selectionUseDifferentAccountNumberForP2P
|
selectionUseDifferentAccountNumberForP2P: string
|
Type : string
|
|
|
|
subscription
|
subscription: Subscription
|
Type : Subscription
|
|
|
|
wasCreated
|
wasCreated:
|
Default value : false
|
|
|
import { Component, OnInit, OnDestroy } from '@angular/core';
import { filter, catchError } from 'rxjs/operators';
import { AchConfiguration } from '../models/ach-configuration';
import { AchSetupService } from '../providers/ach-setup.service';
import { Location } from '@angular/common';
import { Subscription } from 'rxjs';
import { LoaderStore } from '../../loader/loader.store';
@Component({
selector: 'app-ach-setup-review',
templateUrl: './ach-setup-review.component.html',
styleUrls: ['./ach-setup-review.component.css']
})
export class AchSetupReviewComponent implements OnInit, OnDestroy {
subscription: Subscription;
config: AchConfiguration;
createClicked = false;
wasCreated = false;
problemCreatingAch = false;
errorMessage = '';
json: string;
selectionNoSettleBank: string;
selectionRemoveJulianDateFromAchFile: string;
selectionChangeEffectiveDateToCurrentBusinessDate: string;
selectionUseDifferentAccountNumberForP2P: string;
constructor(
public achSetupService: AchSetupService,
private location: Location,
private loader: LoaderStore
) {}
ngOnInit() {
this.subscription = this.achSetupService.state$
.pipe(filter(config => config !== null && config !== undefined))
.subscribe(config => {
this.config = config;
this.json = JSON.stringify(config);
this.selectionNoSettleBank = this.config.noSettleBank ? 'Yes' : 'No';
this.selectionRemoveJulianDateFromAchFile = this.config.achOverrideSettings
.shouldRemoveJulianDateFromAchFile
? 'Yes'
: 'No';
this.selectionChangeEffectiveDateToCurrentBusinessDate = this.config.achOverrideSettings
.shouldChangeEffectiveDateToCurrentBusinessDate
? 'Yes'
: 'No';
this.selectionUseDifferentAccountNumberForP2P = this.config.achOverrideSettings
.shouldUseDifferentAccountNumberForP2P
? 'Yes'
: 'No';
this.loader.hide();
});
}
ngOnDestroy(): void {
this.subscription.unsubscribe();
}
edit() {
this.location.back();
}
create() {
this.createClicked = true;
this.loader.show('Applying ACH settings...');
this.achSetupService.set(this.config);
this.achSetupService.create().subscribe(
wasCreated => {
this.wasCreated = wasCreated;
const message = wasCreated ? 'ACH setup successfully' : 'failed to setup ACH';
console.log(message);
this.createClicked = false;
this.loader.hide();
if (wasCreated) {
console.log('Clearing state due to successful ACH setup');
this.achSetupService.clearState();
}
},
error => {
console.log(error);
this.wasCreated = false;
this.createClicked = false;
this.problemCreatingAch = true;
this.errorMessage = error;
this.loader.hide();
}
);
}
}
<section fxLayout="column" fxLayoutAlign="start center" *ngIf="!wasCreated">
<div *ngIf="problemCreatingAch" class="errors">
There was a problem applying the ACH setup. Please double check your entries.
</div>
<div fxLayout="row" fxLayoutAlign="space-around center">
<!-- <pre *ngIf="config " fxFill>
{{config | json}}
</pre> -->
<div *ngIf="config" class="review-section">
<h4>Financial Institution</h4>
<div class="indented-section">
<div>
<h5>Domain:</h5> {{config.domain}}
</div>
<div>
<h5>No Settle Bank:</h5> {{selectionNoSettleBank}}
</div>
</div>
<h4>Collection</h4>
<div class="indented-section">
<div>
<h5>Collection Financial Institution:</h5> {{config.collectionFi}}
</div>
<div>
<h5>Collection File Financial Institution:</h5> {{config.collectionFileFi}}
</div>
</div>
<h4>Settlement</h4>
<div class="indented-section">
<div>
<h5>Settlement Financial Institution:</h5> {{config.settlementFi}}
</div>
<div>
<h5>Settlement File Financial Institution:</h5> {{config.settlementFileFi}}
</div>
</div>
<h4>Fee Account</h4>
<div class="indented-section">
<div>
<h5>Account Type:</h5> {{config.feeAccountType}}
</div>
<div>
<h5>Account Number:</h5> {{config.feeAccount}}
</div>
<div>
<h5>Routing Number:</h5> {{config.feeRoutingNumber}}
</div>
</div>
<h4>One Record</h4>
<div class="indented-section">
<div>
<h5>File Type:</h5> {{config.oneRecordSettings.fileType}}
</div>
<div>
<h5>Immediate Destination Name:</h5> {{config.oneRecordSettings.immediateDestinationName}}
</div>
<div>
<h5>Immediate Destination #:</h5> {{config.oneRecordSettings.immediateDestinationCode}}
</div>
<div>
<h5>Immediate Origin Name:</h5> {{config.oneRecordSettings.immediateOriginName}}
</div>
<div>
<h5>Immediate Origin #:</h5> {{config.oneRecordSettings.immediateOriginCode}}
</div>
</div>
<h4>File Delivery Method</h4>
<div class="indented-section">
<div>
<h5>Method:</h5> {{config.deliverySettings.method}}
</div>
<div>
<h5>ACH Notification Contact Name:</h5> {{config.deliverySettings.achNotificationContactName}}
</div>
<div>
<h5>ACH Notification E-mail Address:</h5> {{config.deliverySettings.achNotificationEmailAddress}}
</div>
<div>
<h5>SFTP URL:</h5> {{config.deliverySettings.sftpUrl}}
</div>
<div>
<h5>SFTP Port:</h5> {{config.deliverySettings.sftpPort}}
</div>
<div>
<h5>SFTP Username:</h5> {{config.deliverySettings.sftpUsername}}
</div>
<div>
<h5>SFTP Password:</h5> {{config.deliverySettings.sftpPassword}}
</div>
<div>
<h5>SFTP Path:</h5> {{config.deliverySettings.sftpPath}}
</div>
<div>
<h5>Filename Prefix:</h5> {{config.deliverySettings.filenamePrefix}}
</div>
<div>
<h5>Filename Format:</h5> {{config.deliverySettings.filenameFormat}}
</div>
<div>
<h5>Filename Extension:</h5> {{config.deliverySettings.filenameExtension}}
</div>
</div>
<h4>Ach Override</h4>
<div class="indented-section">
<div>
<h5>Remove Julian Date:</h5> {{selectionRemoveJulianDateFromAchFile}}
</div>
<div>
<h5>Change Effective Date to Current Business Date:</h5>
{{selectionChangeEffectiveDateToCurrentBusinessDate}}
</div>
<div>
<h5>Use Different Account Number for P2P:</h5>
{{selectionUseDifferentAccountNumberForP2P}}
</div>
<div>
<h5>Account Number for P2P:</h5>
{{config.achOverrideSettings.accountNumberForP2P}}
</div>
</div>
</div>
</div>
<div>
<button mat-raised-button class="review-edit-button" color="secondary" [disabled]="createClicked" (click)="edit()">Edit</button>
<button mat-raised-button class="review-create-button" color="primary" [disabled]="createClicked" (click)="create()">Create</button>
</div>
</section>
<section fxLayout="column" fxLayoutAlign="start center" *ngIf="wasCreated">
<div class="mdl-grid content success-message" fxFill fxLayout="column" fxLayoutAlign="space-around center">
<h1>ACH settings applied successfully</h1>
</div>
</section>
h4 {
clear: both;
margin: .75em 1em .25em 1em;
}
.review-section {
margin: 1em;
border-top: 0;
margin-top: -0.5em;
padding-top: 0;
}
.indented-section {
position: relative;
left: 2em;
}
.indented-section div {
clear: both;
}
.indented-section div h5 {
display: inline;
}
.review-edit-button {
margin: .5em;
}
.review-create-button {
margin: .5em;
}
.errors {
margin: 1em;
color: red;
font-weight: bold;
}
.success-message h1 {
color: green;
font-weight: bold;
}
Legend
Html element with directive