src/app/payments/payment-list/payment-list.component.ts
| selector | app-payment-list |
| styleUrls | payment-list.component.css |
| templateUrl | ./payment-list.component.html |
constructor(paymentService: PaymentService, statusService: PaymentStatusService, router: Router, session: SessionStore, materialService: MaterialService, device: DeviceService)
|
|||||||||||||||||||||
|
Parameters :
|
item
|
Type: |
payments
|
Type: |
view
|
$event type: EventEmitter
|
| activateAmountSort |
activateAmountSort()
|
|
Returns :
void
|
| activateDeliverySort |
activateDeliverySort()
|
|
Returns :
void
|
| activatePayFromSort |
activatePayFromSort()
|
|
Returns :
void
|
| activatePayToSort |
activatePayToSort()
|
|
Returns :
void
|
| activateSendOnSort |
activateSendOnSort()
|
|
Returns :
void
|
| clearSearch |
clearSearch()
|
|
Returns :
void
|
| Private closeTabAfterDownloadStarts | ||||||
closeTabAfterDownloadStarts(exportWindow: Window)
|
||||||
|
Parameters :
Returns :
void
|
| deactivateAll |
deactivateAll()
|
|
Returns :
void
|
| export | ||||||
export(type: string)
|
||||||
|
Parameters :
Returns :
void
|
| goToStart |
goToStart()
|
|
Returns :
void
|
| hideSortBy |
hideSortBy()
|
|
Returns :
void
|
| isCancelled | ||||||
isCancelled(payment: Payment)
|
||||||
|
Parameters :
Returns :
boolean
|
| isDone | ||||||
isDone(payment: Payment)
|
||||||
|
Parameters :
Returns :
boolean
|
| isFailedAttempts | ||||||
isFailedAttempts(payment: Payment)
|
||||||
|
Parameters :
Returns :
boolean
|
| isNotApplicable | ||||||
isNotApplicable(payment: Payment)
|
||||||
|
Parameters :
Returns :
boolean
|
| isPaymentInFlight | ||||||
isPaymentInFlight(payment: Payment)
|
||||||
|
Parameters :
Returns :
boolean
|
| isPmtExpired | ||||||
isPmtExpired(payment: Payment)
|
||||||
|
Parameters :
Returns :
boolean
|
| isProcessing | ||||||
isProcessing(payment: Payment)
|
||||||
|
Parameters :
Returns :
boolean
|
| isWaiting | ||||||
isWaiting(payment: Payment)
|
||||||
|
Parameters :
Returns :
boolean
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| Private openNewTab |
openNewTab()
|
|
Returns :
Window
|
print()
|
|
Returns :
void
|
| select | ||||||
select(payment: Payment)
|
||||||
|
Parameters :
Returns :
void
|
| sortBy |
sortBy()
|
|
Returns :
void
|
| Private sumPayments |
sumPayments(accumulator: number, currentValue: number)
|
|
Returns :
number
|
| toggleExportOption |
toggleExportOption()
|
|
Returns :
void
|
| totalAmount |
totalAmount()
|
|
Returns :
number
|
| viewRecentPayments |
viewRecentPayments()
|
|
Returns :
void
|
| viewScheduledPayments |
viewScheduledPayments()
|
|
Returns :
void
|
| cssclass |
cssclass:
|
Type : string
|
Default value : 'short-spinner'
|
| exportUrls |
exportUrls:
|
Type : IExportUrls
|
| filterValue |
filterValue:
|
Type : string
|
| isLoading |
isLoading:
|
Default value : false
|
| isSortAmountActive |
isSortAmountActive:
|
Default value : false
|
| isSortAmountActiveAsc |
isSortAmountActiveAsc:
|
Default value : true
|
| isSortDeliveryActive |
isSortDeliveryActive:
|
Default value : false
|
| isSortDeliveryActiveAsc |
isSortDeliveryActiveAsc:
|
Default value : true
|
| isSorting |
isSorting:
|
Default value : false
|
| isSortPayFromActive |
isSortPayFromActive:
|
Default value : false
|
| isSortPayFromActiveAsc |
isSortPayFromActiveAsc:
|
Default value : true
|
| isSortPayToActive |
isSortPayToActive:
|
Default value : false
|
| isSortPayToActiveAsc |
isSortPayToActiveAsc:
|
Default value : true
|
| isSortSendOnActive |
isSortSendOnActive:
|
Default value : true
|
| isSortSendOnActiveAsc |
isSortSendOnActiveAsc:
|
Default value : false
|
| loaderHeader |
loaderHeader:
|
Type : string
|
Default value : 'Retrieving Data'
|
| lowercase |
lowercase:
|
Default value : false
|
| message |
message:
|
Type : string
|
Default value : 'Please wait a moment while we retrieve your information.'
|
| model$ |
model$:
|
Type : Observable<[]>
|
| payment |
payment:
|
Type : Payment[]
|
| paymentSubscription |
paymentSubscription:
|
Type : Subscription
|
| recentPayments |
recentPayments:
|
Default value : new Array<Payment>()
|
| scheduledPayments |
scheduledPayments:
|
Default value : new Array<Payment>()
|
| searchText |
searchText:
|
Type : string
|
Default value : ''
|
| showAddExportOptions |
showAddExportOptions:
|
Default value : false
|
| totalAmountOfScheduledPayments |
totalAmountOfScheduledPayments:
|
| viewingRecentPayments |
viewingRecentPayments:
|
Default value : false
|
| viewingScheduledPayments |
viewingScheduledPayments:
|
Default value : true
|
| hasPayments |
gethasPayments()
|
import { P2P_STATUS } from './../../app.constants';
import { Component, EventEmitter, Input, OnInit, Output, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';
import { filter, map, tap } from 'rxjs/operators';
import { EXPORT_TYPES, ORDER_BYS, ORDER_BY_DIRECTIONS, PAYMENT_STATUS } from '../../app.constants';
import { PaymentState } from '../../enums';
import { Payment } from '../../models';
import { IExportUrls } from '../../models/i-export-urls.model';
import { MaterialService, PaymentService, PaymentStatusService } from '../../services';
import { DeviceService } from '../../services/device.service';
import { SessionStore } from '../../stores';
import { Subscription } from 'rxjs/Subscription';
import { Observable } from 'rxjs';
const states = PaymentState;
const exportWindowLoader = '<h3 style="text-align:center;">Please wait...</h3>';
@Component({
selector: 'app-payment-list',
templateUrl: './payment-list.component.html',
styleUrls: ['./payment-list.component.css'],
})
export class PaymentListComponent implements OnInit {
@Input()
payments: Payment[];
@Input()
item: Payment[];
@Output()
view = new EventEmitter();
payment: Payment[];
model$: Observable<Payment[]>;
scheduledPayments = new Array<Payment>();
recentPayments = new Array<Payment>();
filterValue: string;
lowercase = false;
searchText = '';
viewingScheduledPayments = true;
viewingRecentPayments = false;
totalAmountOfScheduledPayments;
showAddExportOptions = false;
exportUrls: IExportUrls;
isSorting = false;
isSortPayToActive = false;
isSortSendOnActive = true;
isSortDeliveryActive = false;
isSortPayFromActive = false;
isSortAmountActive = false;
isSortPayToActiveAsc = true;
isSortSendOnActiveAsc = false;
isSortDeliveryActiveAsc = true;
isSortPayFromActiveAsc = true;
isSortAmountActiveAsc = true;
loaderHeader = 'Retrieving Data';
message = 'Please wait a moment while we retrieve your information.';
isLoading = false;
cssclass = 'short-spinner';
paymentSubscription: Subscription;
constructor(
private paymentService: PaymentService,
private statusService: PaymentStatusService,
private router: Router,
private session: SessionStore,
private materialService: MaterialService,
private device: DeviceService
) {}
ngOnInit() {
this.isLoading = true;
this.session.session$.subscribe((session) => {
this.exportUrls = session.exportUrls;
});
this.model$ = this.paymentService.getPayments(false).pipe(
filter((payments) => payments !== null && payments !== undefined),
map((payments) => {
this.payments = payments;
this.scheduledPayments = this.payments
.filter(
(p) =>
p.p2PStatus !== P2P_STATUS.FAILED_MAX_ATTEMPTS &&
p.p2PStatus !== P2P_STATUS.TIMED_OUT &&
p.p2PStatus !== P2P_STATUS.RETURNED
)
.filter(
(p) =>
p.status === PAYMENT_STATUS.INFLIGHT ||
p.status === PAYMENT_STATUS.PENDING ||
p.status === PAYMENT_STATUS.ALLIEDHOLD ||
p.status === PAYMENT_STATUS.BANKHOLD ||
p.status === PAYMENT_STATUS.HOLD ||
p.status === PAYMENT_STATUS.CREDITHOLD ||
p.status === PAYMENT_STATUS.PROCESSING
);
this.recentPayments = this.payments.filter(
(p) =>
p.p2PStatus === P2P_STATUS.FAILED_MAX_ATTEMPTS ||
p.p2PStatus === P2P_STATUS.TIMED_OUT ||
p.p2PStatus === P2P_STATUS.RETURNED ||
p.status === PAYMENT_STATUS.DONE ||
p.status === PAYMENT_STATUS.CANCELLED ||
p.status === PAYMENT_STATUS.REJECTED ||
p.status === PAYMENT_STATUS.REVERSED ||
p.status === PAYMENT_STATUS.REVERSING ||
p.status === PAYMENT_STATUS.PROCESSING
);
// remove any from recent that exist in scheduled
this.recentPayments = this.recentPayments.filter(
(p) => !this.scheduledPayments.some((s) => s.id === p.id)
);
this.materialService.render();
this.totalAmount();
this.isLoading = false;
return payments;
})
);
// this.activateSendOnSort();
}
clearSearch() {
this.searchText = '';
}
print() {
window.print();
this.showAddExportOptions = false;
}
export(type: string) {
const exportWindow = this.openNewTab();
exportWindow.document.write(exportWindowLoader);
switch (type) {
case EXPORT_TYPES.PDF:
exportWindow.location.href = this.exportUrls.pdf;
break;
case EXPORT_TYPES.XLS:
exportWindow.location.href = this.exportUrls.xls;
this.closeTabAfterDownloadStarts(exportWindow);
break;
case EXPORT_TYPES.CSV:
exportWindow.location.href = this.exportUrls.csv;
this.closeTabAfterDownloadStarts(exportWindow);
break;
}
this.showAddExportOptions = false;
}
private closeTabAfterDownloadStarts(exportWindow: Window) {
if (this.device.iOS) {
// do not close tab on iOS. Allow user to export and save file
return;
}
setTimeout(() => {
exportWindow.close();
}, 3000);
}
private openNewTab(): Window {
return window.open('', '_blank');
}
select(payment: Payment) {
if (payment.id === '00000000-0000-0000-0000-000000000000') {
this.router.navigate([`/payments/${payment.hash}`]);
} else {
this.router.navigate([`/payments/${payment.id}`]);
}
}
isWaiting(payment: Payment): boolean {
return this.statusService.getState(payment) === states.WAITING;
}
isPaymentInFlight(payment: Payment): boolean {
return this.statusService.getState(payment) === states.INFLIGHT;
}
isPmtExpired(payment: Payment): boolean {
return this.statusService.getState(payment) === states.EXPIRED;
}
isFailedAttempts(payment: Payment): boolean {
return this.statusService.getState(payment) === states.FAILED_MAX_ATTEMPTS;
}
isNotApplicable(payment: Payment): boolean {
return this.statusService.getState(payment) === states.NOTAPPLICABLE;
}
isProcessing(payment: Payment): boolean {
return this.statusService.getState(payment) === states.PROCESSING;
}
isCancelled(payment: Payment): boolean {
return this.statusService.getState(payment) === states.CANCELLED;
}
isDone(payment: Payment): boolean {
return this.statusService.getState(payment) === states.DONE;
}
toggleExportOption() {
!this.showAddExportOptions ? (this.showAddExportOptions = true) : (this.showAddExportOptions = false);
}
viewScheduledPayments() {
this.viewingScheduledPayments = true;
this.viewingRecentPayments = false;
}
viewRecentPayments() {
this.viewingScheduledPayments = false;
this.viewingRecentPayments = true;
}
totalAmount() {
if (!this.hasPayments) {
return 0;
}
const total = this.scheduledPayments
.filter((payment) => !payment.error)
.map((payment) => payment.amount)
.reduce(this.sumPayments, 0);
this.totalAmountOfScheduledPayments = Math.round(total * 100) / 100;
}
private get hasPayments(): boolean {
return (
this.scheduledPayments !== null &&
this.scheduledPayments !== undefined &&
this.scheduledPayments.length > 0
);
}
private sumPayments(accumulator: number, currentValue: number) {
return accumulator + currentValue;
}
deactivateAll() {
this.isSortPayToActive = false;
this.isSortSendOnActive = false;
this.isSortDeliveryActive = false;
this.isSortPayFromActive = false;
this.isSortAmountActive = false;
}
activatePayToSort() {
this.deactivateAll();
this.isSortPayToActive = true;
this.isLoading = true;
if (!this.isSortPayToActiveAsc) {
this.isSortPayToActiveAsc = true;
} else {
this.isSortPayToActiveAsc = false;
}
this.isSortSendOnActiveAsc = true;
this.isSortDeliveryActiveAsc = true;
this.isSortPayFromActiveAsc = true;
this.isSortAmountActiveAsc = true;
}
activateSendOnSort() {
this.deactivateAll();
this.isSortSendOnActive = true;
this.isLoading = true;
this.isSortSendOnActiveAsc = false;
this.isSortPayToActiveAsc = true;
this.isSortDeliveryActiveAsc = true;
this.isSortPayFromActiveAsc = true;
this.isSortAmountActiveAsc = true;
}
activateDeliverySort() {
this.deactivateAll();
this.isSortDeliveryActive = true;
this.isLoading = true;
if (!this.isSortDeliveryActiveAsc) {
this.isSortDeliveryActiveAsc = true;
} else {
this.isSortDeliveryActiveAsc = false;
}
this.isSortPayToActiveAsc = true;
this.isSortSendOnActiveAsc = true;
this.isSortPayFromActiveAsc = true;
this.isSortAmountActiveAsc = true;
}
activatePayFromSort() {
this.deactivateAll();
this.isSortPayFromActive = true;
this.isLoading = true;
if (!this.isSortPayFromActiveAsc) {
this.isSortPayFromActiveAsc = true;
} else {
this.isSortPayFromActiveAsc = false;
}
this.isSortPayToActiveAsc = true;
this.isSortDeliveryActiveAsc = true;
this.isSortSendOnActiveAsc = true;
this.isSortAmountActiveAsc = true;
}
activateAmountSort() {
this.deactivateAll();
this.isSortAmountActive = true;
this.isLoading = true;
if (!this.isSortAmountActiveAsc) {
this.isSortAmountActiveAsc = true;
} else {
this.isSortAmountActiveAsc = false;
}
this.isSortPayToActiveAsc = true;
this.isSortDeliveryActiveAsc = true;
this.isSortPayFromActiveAsc = true;
this.isSortSendOnActiveAsc = true;
}
sortBy() {
this.isSorting = true;
}
hideSortBy() {
this.isSorting = false;
}
goToStart() {
this.router.navigate(['/start']);
}
}
<div class="toolbar no-print" [hidden]="scheduledPayments.length === 0 && recentPayments.length === 0">
<span class="search-bar">
<p><i class="material-icons">search</i></p>
<input id="searchInput" type="text" placeholder="Name, Date, Amount or Memo" [(ngModel)]="searchText" />
<i id="clearSearchButton" class="material-icons search-clear" *ngIf="searchText" (click)="clearSearch()"
>clear</i
>
</span>
<span class="toolbar-option-ctn">
<span id="sortButton" (click)="sortBy()" class="toolbar-option" style="display: none">
<i class="material-icons">filter_list</i> <span class="is-desktop">Sort By</span>
</span>
<span id="printButton" (click)="print()" class="toolbar-option">
<i id="printButtonIcon" class="material-icons">print</i> <span class="is-desktop">Print</span>
</span>
<span id="exportButton" (click)="toggleExportOption()" class="toolbar-option last-option">
<i id="exportButtonIcon" class="material-icons">list_alt</i> <span class="is-desktop">Export</span>
</span>
</span>
<span
*ngIf="showAddExportOptions"
class="toolbar-option-ctn export-options-ctn"
(clickoutside)="toggleExportOption()"
>
<span id="exportPdf" [attr.data-export-url]="exportUrls.pdf" (click)="export('PDF')" class="export-option"
>PDF</span
>
<span
id="exportExcel"
[attr.data-export-url]="exportUrls.xls"
(click)="export('XLS')"
class="export-option"
>EXCEL</span
>
<span
id="exportCsv"
[attr.data-export-url]="exportUrls.csv"
(click)="export('CSV')"
class="export-option last-option"
>CSV</span
>
</span>
</div>
<div
class="payment-category-tab-container no-print"
[hidden]="scheduledPayments.length === 0 && recentPayments.length === 0"
>
<div
id="scheduledTotalTab"
[attr.data-total-amount-of-scheduled-payments]="totalAmountOfScheduledPayments"
class="tab"
[ngClass]="viewingScheduledPayments ? 'active-tab' : ''"
(click)="viewScheduledPayments()"
>
Scheduled
<span *ngIf="totalAmountOfScheduledPayments > 0"
>Total: {{ totalAmountOfScheduledPayments | currency: 'USD':'symbol':'1.2-2' }}</span
>
</div>
<div
id="recentPaymentsTab"
class="tab"
[ngClass]="viewingRecentPayments ? 'active-tab' : ''"
(click)="viewRecentPayments()"
>
Recent
</div>
</div>
<div class="list-scroller">
<div
id="listOfPaymentsCtn"
class="items-list-ctn"
*ngIf="model$ | async as payments"
[ngClass]="{ iosTrue: device.iOS }"
>
<!-- Scheduled Payments -->
<div
class="payment-header-row"
[hidden]="
(scheduledPayments.length === 0 && recentPayments.length === 0) ||
(recentPayments.length === 0 && viewingRecentPayments && searchText.length === 0) ||
(scheduledPayments.length > 0 && (scheduledPayments | paymentsFilter: searchText).length === 0) ||
(recentPayments.length > 0 && (recentPayments | paymentsFilter: searchText).length === 0)
"
>
<div class="payment-header-cell pay-to-header-cell">To</div>
<div class="payment-header-cell delivery-date-header-cell">Send On</div>
<div class="payment-header-cell amount-header-cell">Amount</div>
<div class="payment-header-cell pay-from-header-cell">From Account</div>
<div class="payment-header-cell status-header-cell">Status</div>
<div class="payment-header-cell note-header-cell">Note</div>
</div>
<!-- Scheduled Payments Rows -->
<div *ngIf="viewingScheduledPayments && !isLoading">
<a (click)="select(payment)" *ngFor="let payment of scheduledPayments | paymentsFilter: searchText">
<div
[attr.data-pay-to-name]="payment.displayName ? payment.displayName : payment.payToName"
[attr.data-id]="payment.id"
class="payment-row"
[attr.data-in-flight-key]="payment.inFlightKey"
[attr.data-hash]="payment.hash"
>
<div class="payment-cell pay-to-cell">
<span class="mobile-column-title">Pay To:</span>
<span class="pay-to" [class.bad-color]="payment.error">{{
payment.displayName ? payment.displayName : payment.payToName
}}</span>
</div>
<div class="payment-cell delivery-date-cell">
<span class="delivery-status-pending" *ngIf="payment.status === 'InFlight' && !payment.error">
Pending
</span>
<span
class="delivery-status-error bad-color"
*ngIf="payment.status === 'InFlight' && payment.error"
>
Error
</span>
<span
class="delivery-status-date"
*ngIf="payment.createOn && payment.status !== 'InFlight'"
[class.bad-color]="payment.error"
>
{{ payment.createOn | date: 'shortDate' }}
</span>
</div>
<div
class="payment-cell amount-cell"
[attr.data-amount]="payment.displayName ? payment.displayName : payment.payToName"
[class.bad-color]="payment.error"
>
{{ payment.amount | currency: 'USD':'symbol':'1.2-2' }}
</div>
<div class="payment-cell pay-from-cell" [class.bad-color]="payment.error">
<app-account-label *ngIf="payment.account" [account]="payment.account"></app-account-label>
</div>
<div class="payment-cell status-cell items-list-status">
<span class="payment-waiting" *ngIf="isWaiting(payment)">
<i class="material-icons status-normal no-print">timelapse</i>
<span class="items-list-status-description">Waiting on recipient</span>
</span>
<span class="payment-accepted" *ngIf="isDone(payment)">
<i class="material-icons status-positive no-print">check_circle</i>
<span class="items-list-status-description">Accepted</span>
</span>
<span class="payment-pmt-expired" *ngIf="isPmtExpired(payment)">
<i class="material-icons status-negative no-print">cancel</i>
<span class="items-list-status-description">Did Not Respond</span>
</span>
<span class="payment-pmt-expired" *ngIf="isFailedAttempts(payment)">
<i class="material-icons status-negative no-print">cancel</i>
<span class="items-list-status-description">Failed Secret</span>
</span>
<span class="payment-not-applicable" *ngIf="isNotApplicable(payment)">
<i class="material-icons status-normal no-print">timelapse</i>
<span class="items-list-status-description">Not Applicable</span>
</span>
<span class="payment-processing" *ngIf="isProcessing(payment)">
<i class="material-icons status-normal no-print">timelapse</i>
<span class="items-list-status-description">Processing</span>
</span>
<span class="payment-cancelled" *ngIf="isCancelled(payment)">
<i class="material-icons status-normal no-print">cancel</i>
<span class="items-list-status-description">Canceled Transaction</span>
</span>
<span class="payment-in-flight" *ngIf="payment.status === 'InFlight' && !payment.error">
<i class="material-icons status-normal no-print">build_circle</i>
<span class="items-list-status-description">Creating Payment</span>
</span>
<span class="payment-error" *ngIf="payment.status === 'InFlight' && payment.error">
<i class="material-icons status-normal no-print bad-color">error</i>
<span class="items-list-status-description bad-color">An Error Has Occurred</span>
</span>
</div>
<div class="payment-cell note-cell">
<span class="mobile-column-title">Note:</span>
<span class="payment-memo" [class.bad-color]="payment.error">{{ payment.memo }}</span>
<span *ngIf="!payment.memo || payment.memo.length < 1"> - </span>
</div>
</div>
</a>
<!-- Empty Schedule Payments Screen -->
<div
*ngIf="scheduledPayments.length === 0 && viewingScheduledPayments"
class="empty-page-ctn schedule-empty"
>
<svg
class="empty-payments"
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 100 100"
style="enable-background: new 0 0 100 100"
xml:space="preserve"
>
<style type="text/css">
.st0 {
fill: #707173;
}
</style>
<rect x="0.2" y="29.2" class="st0" width="58.1" height="8.8" />
<rect x="0.2" y="10.5" class="st0" width="58.1" height="8.8" />
<rect x="0.2" y="48.2" class="st0" width="58.1" height="8.8" />
<rect x="0.2" y="67.3" class="st0" width="38.3" height="8.8" />
<polygon class="st0" points="47.8,74.4 54.2,67.9 69,81.6 94.3,56.1 100.2,62.6 68.5,94.8 " />
<g>
<path
class="st0"
d="M77.7,57.1v-5.4c-3.8-0.2-7.6-1.2-9.7-2.5l1.7-6.7c2.4,1.3,5.8,2.5,9.5,2.5c3.3,0,5.5-1.3,5.5-3.6
c0-2.2-1.8-3.6-6.1-5c-6.1-2.1-10.3-4.9-10.3-10.5c0-5,3.6-9,9.7-10.2v-5.4h5.6v5c3.8,0.2,6.4,1,8.3,1.9l-1.7,6.5
c-1.5-0.6-4.1-1.9-8.2-1.9c-3.7,0-4.9,1.6-4.9,3.2c0,1.9,2,3.1,6.9,4.9c6.8,2.4,9.6,5.6,9.6,10.7c0,5.1-3.6,9.4-10.2,10.6v5.8H77.7
z"
/>
</g>
</svg>
<h3 class="status-header status-normal">No Scheduled Payments</h3>
<div class="page-description">
<p class="para-medium">You currently have no scheduled payments.</p>
</div>
<button id="sendMoneyAction" type="button" class="action-button" (click)="goToStart()">
<p class="button-inside">Send Money</p>
</button>
</div>
</div>
<!-- Recent Payments Rows -->
<div *ngIf="viewingRecentPayments && !isLoading">
<a (click)="select(payment)" *ngFor="let payment of recentPayments | paymentsFilter: searchText">
<div
class="payment-row"
[attr.data-pay-to-name]="payment.displayName ? payment.displayName : payment.payToName"
[attr.data-id]="payment.id"
[attr.data-in-flight-key]="payment.inFlightKey"
[attr.data-hash]="payment.hash"
>
<div class="payment-cell pay-to-cell">
<span class="mobile-column-title">Pay To:</span
>{{ payment.displayName ? payment.displayName : payment.payToName }}
</div>
<div class="payment-cell delivery-date-cell">{{ payment.createOn | date: 'shortDate' }}</div>
<div class="payment-cell amount-cell">{{ payment.amount | currency: 'USD':'symbol':'1.2-2' }}</div>
<div class="payment-cell pay-from-cell">
<span class="mobile-column-title">From Account:</span>
<app-account-label *ngIf="payment.account" [account]="payment.account"></app-account-label>
</div>
<div class="payment-cell status-cell items-list-status">
<span *ngIf="isWaiting(payment)">
<i class="material-icons status-normal no-print">timelapse</i>
<span class="items-list-status-description">Waiting on recipient </span>
</span>
<span *ngIf="isDone(payment)">
<i class="material-icons status-positive no-print">check_circle</i>
<span class="items-list-status-description">Accepted</span>
</span>
<span *ngIf="isPmtExpired(payment)">
<i class="material-icons status-negative no-print">cancel</i>
<span class="items-list-status-description">Did Not Respond</span>
</span>
<span *ngIf="isFailedAttempts(payment)">
<i class="material-icons status-negative no-print">cancel</i>
<span class="items-list-status-description">Failed Secret</span>
</span>
<span *ngIf="isNotApplicable(payment)">
<i class="material-icons status-normal no-print">timelapse</i>
<span class="items-list-status-description">Not Applicable</span>
</span>
<span *ngIf="isProcessing(payment)">
<i class="material-icons status-normal no-print">timelapse</i>
<span class="items-list-status-description">Processing</span>
</span>
<span *ngIf="isCancelled(payment)">
<i class="material-icons status-normal no-print">cancel</i>
<span class="items-list-status-description">Canceled Transaction</span>
</span>
</div>
<div class="payment-cell note-cell">
<span [attr.data-memo]="payment.memo" class="mobile-column-title">Note:</span>{{ payment.memo }}
<span *ngIf="!payment.memo || payment.memo.length < 1"> - </span>
</div>
</div>
</a>
</div>
</div>
<app-loader
*ngIf="isLoading"
[cssclass]="cssclass"
[header]="loaderHeader"
[message]="message"
></app-loader>
<div *ngIf="!isLoading">
<!-- Empty Search Screen -->
<div
id="emptySearchCtn"
class="empty-page-ctn search-empty"
[hidden]="scheduledPayments.length === 0 && recentPayments.length === 0"
*ngIf="
(scheduledPayments | paymentsFilter: searchText).length === 0 &&
(recentPayments | paymentsFilter: searchText).length === 0
"
>
<i class="material-icons status-normal">search</i>
<h3 class="status-header status-normal">No Results</h3>
<div class="page-description">
<p id="noResultsLabel" class="para-medium">
Sorry, no search results found for <span class="bold-text search-text">{{ searchText }}</span>
</p>
</div>
<button id="clearSearchButton" type="button" class="action-button" (click)="clearSearch()">
<p class="button-inside">Clear Search</p>
</button>
</div>
<!-- Empty Customer Entered Screen -->
<div
id="emptyPaymentsListCtn"
*ngIf="recentPayments.length === 0 && viewingRecentPayments && searchText.length === 0"
class="empty-page-ctn"
>
<svg
class="empty-payments"
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 100 100"
style="enable-background: new 0 0 100 100"
xml:space="preserve"
>
<style type="text/css">
.st0 {
fill: #707173;
}
</style>
<rect x="0.2" y="29.2" class="st0" width="58.1" height="8.8" />
<rect x="0.2" y="10.5" class="st0" width="58.1" height="8.8" />
<rect x="0.2" y="48.2" class="st0" width="58.1" height="8.8" />
<rect x="0.2" y="67.3" class="st0" width="38.3" height="8.8" />
<polygon class="st0" points="47.8,74.4 54.2,67.9 69,81.6 94.3,56.1 100.2,62.6 68.5,94.8 " />
<g>
<path
class="st0"
d="M77.7,57.1v-5.4c-3.8-0.2-7.6-1.2-9.7-2.5l1.7-6.7c2.4,1.3,5.8,2.5,9.5,2.5c3.3,0,5.5-1.3,5.5-3.6
c0-2.2-1.8-3.6-6.1-5c-6.1-2.1-10.3-4.9-10.3-10.5c0-5,3.6-9,9.7-10.2v-5.4h5.6v5c3.8,0.2,6.4,1,8.3,1.9l-1.7,6.5
c-1.5-0.6-4.1-1.9-8.2-1.9c-3.7,0-4.9,1.6-4.9,3.2c0,1.9,2,3.1,6.9,4.9c6.8,2.4,9.6,5.6,9.6,10.7c0,5.1-3.6,9.4-10.2,10.6v5.8H77.7
z"
/>
</g>
</svg>
<h3 class="status-header status-normal">No Recent Payments At This Time</h3>
<div class="page-description">
<p class="para-medium">We only show your past 90 days of history here.</p>
</div>
<button id="sendMoneyButton" type="button" class="action-button" (click)="goToStart()">
<p class="button-inside">Send Money</p>
</button>
</div>
</div>
</div>