import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { Payment, Template } from '../../../models';
import 'rxjs/add/operator/switchMap';
import { DeliveryDateService, PaymentService, TemplateService } from '../../../providers';
import { DeviceService } from '../../../providers/services/device.service';
import { IPaymentUpdate } from '../../../models/i-payment-update.model';
import { LimitsResult } from '../../../models/limits-result.model';
import { LimitsService } from '../../../providers/services/limits.service';
import { debounceTime, filter, switchMap, tap } from 'rxjs/operators';
import { Observable } from 'rxjs/Observable';
@Component({
selector: 'app-payment-detail',
templateUrl: './payment-detail.component.html',
styleUrls: ['./payment-detail.component.css'],
})
export class PaymentDetailComponent implements OnInit {
model: Payment;
original: Payment;
payment: Payment;
isEdit = false;
isLoading = false;
loaderHeader = 'Updating Payment';
message = 'Saving the changes you made to this payment';
location: any;
showCancelConfirmation = false;
inputValue = '';
limitResult: LimitsResult;
loadingLimits = false;
private template: Template;
amountSubject = new BehaviorSubject(0);
limit$: Observable<any>;
amount$: Observable<any>;
inflightSendOnDate$: Observable<any>;
inflightDeliveryDate$: Observable<any>;
paymentOnHold: boolean;
get canModify(): boolean {
if (this.model && this.model.status && this.model.status.length > 0) {
return this.model.status.toLowerCase() === 'pending' ? true : false;
}
return false;
}
constructor(
public device: DeviceService,
private paymentService: PaymentService,
private route: ActivatedRoute,
private router: Router,
private limitsService: LimitsService,
private templateService: TemplateService,
private deliveryDateService: DeliveryDateService
) { }
ngOnInit() {
this.amount$ = this.amountSubject.pipe(
debounceTime(500),
filter((val) => !!val),
filter((val) => val !== this.original.amount),
tap((val) => {
console.log('val', val);
this.loadingLimits = false;
this.limitResult = null;
this.checkLimit(val);
})
);
this.route.params
.pipe(
filter((params) => !!params['id']),
switchMap((params: Params) => {
return this.paymentService.getPaymentById(params['id'])
}),
filter((payment) => !!payment),
tap((payment) => {
console.log('payment', payment);
this.original = Object.assign({}, payment) as Payment;
this.model = Object.assign({}, payment) as Payment;
if (this.model.status === 'InFlight') {
this.setInflightDates();
}
}),
switchMap(() => {
return this.templateService.templates$;
}),
filter((templates) => !!templates && templates.length > 0),
tap((templates) => {
this.template = templates
.filter((t) => t.id === this.original.paymentTemplateId) // find template
.reduce((p, c) => c, null); // transform to single template instead of array
console.log('template', this.template);
})
)
.subscribe();
this.isOnHold();
}
setInflightDates() {
this.inflightSendOnDate$ = this.deliveryDateService.earliestStandardElectronicScheduleForDate$.pipe(
tap((results) => {
this.model.expectedSendOnDate = results;
}));
this.inflightDeliveryDate$ = this.deliveryDateService.expectedDeliveryDate$.pipe(
tap((results) => {
this.model.expectedDeliveryDate = results;
}));
}
nextAmount() {
console.log('next amount', this.model.amount);
this.amountSubject.next(this.model.amount);
}
cancelChanges() {
this.model = Object.assign({}, this.original) as Payment;
this.isEdit = false;
this.limitResult = null;
}
cancelPayment() {
this.showCancelConfirmation = false;
this.loaderHeader = 'Canceling Transfer';
this.message = 'Please give us a moment to cancel this transfer.';
this.isLoading = true;
this.paymentService.cancelPayment(this.model.id).subscribe((wasDeleted) => {
if (wasDeleted) {
this.back();
}
});
}
dismissPaymentErrorMessage() {
this.showCancelConfirmation = false;
this.loaderHeader = 'Removing Error Message';
this.message = 'Please give us a moment to remove this error message.';
this.isLoading = true;
this.paymentService
.dismissPaymentErrorMessage(this.model.hash)
.subscribe((wasDismissed) => {
if (wasDismissed) {
this.back();
}
});
}
isOnHold() {
if (this.model && this.model.status && (this.model.status.toLocaleLowerCase() === 'alliedhold' ||
this.model.status.toLocaleLowerCase() === 'bankhold' ||
this.model.status.toLocaleLowerCase() === 'hold' ||
this.model.status.toLocaleLowerCase() === 'credithold')) {
return this.paymentOnHold = true;
} return this.paymentOnHold = false;
}
isEditing() {
this.isEdit = true;
}
showCancel() {
this.showCancelConfirmation = true;
}
hideCancel() {
this.showCancelConfirmation = false;
}
back() {
this.router.navigate(['/payments']);
}
checkLimit(amount) {
this.loadingLimits = true;
this.limit$ = this.limitsService.verify(amount, this.template).pipe(
tap((result) => {
console.log(result);
this.limitResult = result;
this.loadingLimits = false;
})
);
}
update() {
console.log('update called!');
this.isLoading = true;
const patch = {
amount: this.model.amount,
} as IPaymentUpdate;
this.paymentService.updatePayment(this.model.id, patch).subscribe((wasUpdated) => {
this.isLoading = false;
if (!wasUpdated) {
return console.log('Failed to update payment!');
}
this.isEdit = false;
});
}
log(any) {
console.log(any);
}
print() {
window.print();
}
}
<ng-container *ngIf="amount$ | async"></ng-container>
<ng-container *ngIf="limit$ | async"></ng-container>
<ng-container *ngIf="inflightSendOnDate$ | async"></ng-container>
<ng-container *ngIf="inflightDeliveryDate$ | async"></ng-container>
<span *ngIf="showCancelConfirmation">
<app-payment-cancel
[payment]="model"
(cancelPayment)="cancelPayment($event)"
(cancelDelete)="hideCancel()"
>
</app-payment-cancel>
</span>
<div class="scroller" id="collectedScreenCtn" [ngClass]="{ iosTrue: device.iOS }">
<app-loader *ngIf="isLoading" [header]="loaderHeader" [message]="message"></app-loader>
<div *ngIf="!isLoading && model">
<div class="exit-header-ctn no-print">
<button id="closeButton" (click)="back()" class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">close</i>
</button>
</div>
<div *ngIf="!isEdit">
<!-- Payment In Flight -->
<div *ngIf="model.status === 'InFlight' && !model.error">
<p class="status-icon-ctn waiting no-print">
<i class="material-icons status-normal status-icon">construction</i>
</p>
<h1 class="status-header status-normal">Creating Transfer</h1>
<div id="swLabel" class="page-description">
<p class="para-medium">
We have received your request and are currently creating this transfer.
</p>
</div>
</div>
<div *ngIf="model.status === 'InFlight' && model.error">
<p class="status-icon-ctn waiting no-print">
<i class="material-icons bad-color status-icon">error_outline</i>
</p>
<h1 id="errorHeader" class="status-header bad-color">An Error Has Occurred</h1>
<div id="swLabel" class="page-description">
<p class="para-medium">
We apologize for the inconvenience but we have encountered an error while creating
your payment.
</p>
<p class="para-medium">
<span class="font-bold">Error Message:</span> <br />{{ model.error }}
</p>
</div>
</div>
<!-- Waiting Payment -->
<div *ngIf="model.status === 'Pending'">
<p class="status-icon-ctn waiting no-print">
<i class="material-icons status-normal status-icon">hourglass_empty</i>
</p>
<h1 id="waitingPaymentHeader" class="status-header status-normal">Transfer Created</h1>
<div id="swLabel" class="page-description">
<p class="transfer-scheduled-label para-medium">
Your transfer has been scheduled and you can expect to see the funds in
<b><app-payment-payto-label [payment]="model"></app-payment-payto-label></b> within
1-3 business days
</p>
</div>
</div>
<!-- Passed Payment -->
<div *ngIf="model.status === 'Done'">
<p class="status-icon-ctn collected no-print">
<span class="circle-icon-status">
<i class="material-icons status-positive status-icon">done</i>
</span>
</p>
<h1 id="passedPaymentHeader" class="status-header status-positive">Money Transferred</h1>
<div id="swLabel" class="page-description">
<p class="payment-transfered-label para-medium">
Your payment has successfully transferred from your two accounts.
</p>
</div>
</div>
<!-- Processing Payment -->
<div *ngIf="model.status === 'Processing'">
<p class="status-icon-ctn no-response no-print">
<i class="material-icons status-normal status-icon">hourglass_empty</i>
</p>
<h1 id="processingPaymentHeader" class="status-header status-normal">Processing</h1>
<div id="swLabel" class="page-description">
<p class="para-medium">Your payment has been created and will be completed soon.</p>
</div>
</div>
<!-- Payment On Hold -->
<div
*ngIf="paymentOnHold === true">
<p class="status-icon-ctn no-response no-print">
<i class="material-icons status-normal status-icon">hourglass_bottom</i>
</p>
<h1 id="paymentOnHoldHeader" class="status-header status-normal">Payment On Hold</h1>
<div id="swLabel" class="page-description">
<p class="para-medium">Your payment has been been placed on hold. Please contact us if this issue continues.</p>
</div>
</div>
<!-- Title -->
<div class="itable-ctn">
<div class="itable-row summary-title">
<p>Activity Summary</p>
<span class="printButton" (click)="print()" class="print-option no-print">
<i class="material-icons">print</i>
<span>Print Details</span>
</span>
</div>
<!-- Amount -->
<div class="itable-row">
<div class="itable-col-one no-print">
<i class="material-icons">attach_money</i>
</div>
<div class="itable-col-two">
<p>Amount</p>
</div>
<div class="itable-col-three">
<p id="amountLabel">{{ model.amount | currency: 'USD':'symbol':'1.2-2' }}</p>
</div>
</div>
<!-- Debit Account -->
<div class="itable-row">
<div class="itable-col-one no-print">
<i class="material-icons">arrow_back</i>
</div>
<div class="itable-col-two">
<p>From Account</p>
</div>
<div class="itable-col-three">
<p>
<app-payment-payfrom-label [payment]="model"></app-payment-payfrom-label>
</p>
</div>
</div>
<!-- Credit Account -->
<div class="itable-row">
<div class="itable-col-one no-print">
<i class="material-icons">arrow_forward</i>
</div>
<div class="itable-col-two">
<p>To Account</p>
</div>
<div class="itable-col-three">
<p>
<app-payment-payto-label [payment]="model"></app-payment-payto-label>
</p>
</div>
</div>
<!-- Send On Date -->
<div class="itable-row">
<div class="itable-col-one no-print">
<i class="material-icons">date_range</i>
</div>
<div class="itable-col-two">
<p *ngIf="model.status === 'InFlight'">Estimated Send On Date</p>
<p *ngIf="model.paymentDate && model.status !== 'InFlight'">Send On Date</p>
</div>
<div class="itable-col-three">
<p id="paymentDateLabel">
<span *ngIf="model.paymentDate && model.status !== 'InFlight'">
{{ model.paymentDate | date: 'shortDate' }}
</span>
<span *ngIf="model.status === 'InFlight' && !model.error"> {{model.expectedSendOnDate}} </span>
<span *ngIf="model.status === 'InFlight' && model.error"> Error </span>
</p>
</div>
</div>
<!-- Estimated Delivery Date -->
<div class="itable-row">
<div class="itable-col-one no-print">
<i class="material-icons">date_range</i>
</div>
<div class="itable-col-two">
<p *ngIf="model.status === 'InFlight'">Estimated Delivery Date</p>
<p *ngIf="model.expectedDeliveryDate && model.status !== 'InFlight'">Delivery Date</p>
</div>
<div class="itable-col-three">
<p id="deliveryDateLabel">
<span *ngIf="model.expectedDeliveryDate && model.status !== 'InFlight'">
{{ model.expectedDeliveryDate | date: 'shortDate' }}
</span>
<span *ngIf="model.status === 'InFlight' && !model.error"> {{model.expectedDeliveryDate}} </span>
<span *ngIf="model.status === 'InFlight' && model.error"> Error </span>
</p>
</div>
</div>
<!-- Note -->
<div class="itable-row">
<div class="itable-col-one no-print">
<i class="material-icons">comment</i>
</div>
<div class="itable-col-two">
<p>Note</p>
</div>
<div class="itable-col-three">
<p id="memoLabel">
{{ model.memo }}
<span *ngIf="!model.memo || model.memo.length < 1"> - </span>
</p>
</div>
</div>
<button
*ngIf="canModify"
type="submit"
class="action-button no-print"
tabindex="4"
(click)="isEditing()"
id="changeAmountButton"
>
<span class="button-inside">Change Amount</span>
</button>
<button
*ngIf="model.error"
class="action-button no-print"
tabindex="4"
(click)="dismissPaymentErrorMessage()"
id="dismissButton"
>
<span class="button-inside">Dismiss</span>
</button>
</div>
<!-- Waiting Payment Action -->
<div [hidden]="model.error" *ngIf="model.canCancel === true" class="action-ctn no-print">
<p class="para-dark">
<a id="showCancelButton" (click)="showCancel(model.id)">
<i class="material-icons action-link">money_off</i> Cancel Transfer
</a>
</p>
</div>
</div>
<!-- Editing Screen -->
<div *ngIf="isEdit" class="no-print">
<div *ngIf="canModify">
<p class="status-icon-ctn waiting">
<i class="material-icons status-normal status-icon">attach_money</i>
</p>
<h1 class="status-header status-normal">Editing Transfer</h1>
<div id="swLabel" class="page-description">
<p [attr.data-original-amount]="original.amount" class="para-medium">
You are currently sending
{{ original.amount | currency: 'USD':'symbol':'1.2-2' }} to
<app-payment-payto-label [payment]="model"></app-payment-payto-label> from your
<app-payment-payfrom-label [payment]="model"></app-payment-payfrom-label> account
</p>
</div>
</div>
<div class="form-ctn">
<form id="changeAmountForm" (ngSubmit)="update($event, form)" #form="ngForm" autocomplete="off" novalidate>
<!-- Change Amount Field -->
<span>
<p class="input-label form-first-child">Change Amount</p>
<app-atm-input
name="amount"
class="badged-inputs"
[(ngModel)]="model.amount"
(keyup)="nextAmount()"
id="changeAmountInput"
>
</app-atm-input>
</span>
<div class="limit-alert-ctn" [ngClass]="{ show: loadingLimits }">
<div class="limit-alert-loader">
<app-loading-linear
[loadingLinearMessage]="'Checking your limits'"
*ngIf="loadingLimits"
></app-loading-linear>
</div>
<div
*ngIf="!loadingLimits && limitResult && !limitResult.isAllowed"
class="alert alert-danger alert-amount limit-alert"
>
{{ limitResult.errors[0].message }}
</div>
</div>
<button
type="submit"
class="action-button"
tabindex="4"
[disabled]="
form.pristine ||
form.invalid ||
loadingLimits ||
(limitResult && !limitResult.isAllowed)
"
id="submitButton"
>
<span class="button-inside">Save Changes </span>
</button>
</form>
</div>
</div>
<div *ngIf="isEdit" class="action-ctn no-print">
<p class="para-dark">
<a id="cancelChangesButton" (click)="cancelChanges()"> Cancel Changes </a>
</p>
</div>
</div>
</div>
.large-icon {
font-size: 18px;
}
.action-link {
font-size: 20px;
vertical-align: bottom;
margin-bottom: -2px;
}
.account-label-ctn {
display: inline-block;
width: 100%;
overflow: hidden;
}
.account-page-description {
color: #707173;
width: 80%;
text-align: center;
margin: 0px auto;
}
.account-display-name {
max-width: 64%;
overflow: hidden;
vertical-align: middle;
display: inline-block;
height: 12px;
font-size: 12px;
line-height: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.account-masked-number {
overflow: hidden;
vertical-align: middle;
display: inline-block;
font-size: 12px;
height: 12px;
line-height: 12px;
}
.payment-payfrom-ctn {
margin-bottom: -5px;
}
.payment-payto-ctn {
margin-bottom: 5px;
}
.limit-alert {
margin-top: 10px;
}
@media only screen and (min-width: 500px) {
.form-ctn {
max-width: 365px;
}
}
.iosTrue {
height: calc(100vh - 126px);
}
@media only screen and (min-width: 550px) {
.iosTrue {
height: calc(100vh - 92px);
}
}
/* Print button */
.print-btn,
.print-btn:hover {
width: 46px;
height: 46px;
position: fixed;
bottom: 35px;
right: 15px;
z-index: 9999;
min-width: 36px;
padding: 0;
border-radius: 0;
margin: 4px;
background-color: #be2438;
border: none;
vertical-align: middle;
cursor: pointer;
border-radius: 50%;
}
@media print {
.itable-ctn {
max-width: 400px;
}
.status-header {
margin-top: 40px;
}
.itable-col-three {
width: 59%;
}
}