File
Implements
Metadata
| selector |
app-payment-detail |
| styleUrls |
payment-detail.component.css |
| templateUrl |
./payment-detail.component.html |
Methods
|
cancelPayment
|
cancelPayment()
|
|
|
|
|
|
dismissPaymentErrorMessage
|
dismissPaymentErrorMessage()
|
|
|
|
|
|
cancel$
|
cancel$: Observable<boolean>
|
Type : Observable<boolean>
|
|
|
|
dismiss$
|
dismiss$: Observable<boolean>
|
Type : Observable<boolean>
|
|
|
|
init$
|
init$: Observable<any>
|
Type : Observable<any>
|
|
|
|
model
|
model:
|
Default value : new PaymentDetailViewModel()
|
|
|
|
showCancelConfirmation
|
showCancelConfirmation:
|
|
|
|
templates$
|
templates$: Observable<[]>
|
Type : Observable<[]>
|
|
|
import { TemplateService } from './../../services/template.service';
import { DatePipe } from '@angular/common';
import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/switchMap';
import { map, switchMap, tap } from 'rxjs/operators';
import { Payment, Template } from '../../models';
import { PaymentService, PaymentStatusService } from '../../services';
import { DeviceService } from '../../services/device.service';
import { PaymentDetailViewModel } from './payment-detail.vm';
@Component({
selector: 'app-payment-detail',
templateUrl: './payment-detail.component.html',
styleUrls: ['./payment-detail.component.css'],
})
export class PaymentDetailComponent implements OnInit {
model = new PaymentDetailViewModel();
showCancelConfirmation: false;
init$: Observable<any>;
cancel$: Observable<boolean>;
dismiss$: Observable<boolean>;
templates$: Observable<Template[]>;
private payment: Payment;
private template: Template;
constructor(
private paymentService: PaymentService,
private route: ActivatedRoute,
private statusService: PaymentStatusService,
private ref: ChangeDetectorRef,
private router: Router,
public device: DeviceService,
private datePipe: DatePipe,
private templateService: TemplateService
) {}
ngOnInit() {
this.model.isLoading = true;
this.init$ = this.route.params.pipe(
switchMap((params: Params) => this.paymentService.getPayment(params['id'])),
switchMap((payment) => {
this.payment = payment;
this.templates$ = this.templateService.getAllTemplates();
return this.templateService.templates$;
}),
map((templates) => {
if (templates && templates.length > 0) {
this.template = templates
.filter((t) => t.id === this.payment.paymentTemplateId)
.reduce((p, c) => c, null);
}
return this.payment;
}),
tap((payment) => {
this.model = new PaymentDetailViewModel(this.statusService, payment, this.datePipe, this.template);
// Formats the date to not use local timezone
if (payment.networkSendDate && payment.networkSendDate.length > 0) {
const deliveryDate = payment.networkSendDate.toString().split('T');
payment.deliveryDate = deliveryDate[0].concat('T01:00:00');
}
console.log(this.model.payment);
this.ref.detectChanges();
})
);
}
back() {
this.router.navigate(['/payments']);
}
cancelPayment() {
this.model.isLoading = true;
this.model.loaderHeader = 'Canceling Payment';
this.model.message = 'Please wait a moment while we cancel this payment.';
this.cancel$ = this.paymentService.cancelPayment(this.model.payment.id).pipe(
tap((wasDeleted) => {
if (wasDeleted) {
this.router.navigate(['/payments']);
}
this.model.isLoading = false;
})
);
}
print() {
window.print();
}
dismissPaymentErrorMessage() {
this.showCancelConfirmation = false;
this.model.loaderHeader = 'Removing Error Message';
this.model.message = 'Please give us a moment to remove this error message.';
this.model.isLoading = true;
this.dismiss$ = this.paymentService.dismissPaymentErrorMessage(this.model.payment.hash).pipe(
tap((wasDismissed) => {
if (wasDismissed) {
this.back();
}
})
);
}
}
<ng-container *ngIf="init$ | async"></ng-container>
<ng-container *ngIf="cancel$ | async"></ng-container>
<ng-container *ngIf="dismiss$ | async"></ng-container>
<ng-container *ngIf="templates$ | async"></ng-container>
<div class="scroller" id="collectedScreenCtn" *ngIf="!model.isLoading" [ngClass]="{ iosTrue: device.iOS }">
<div class="exit-header-ctn">
<button id="closeButton" (click)="back()" class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">close</i>
</button>
</div>
<!-- Waiting Payment -->
<div *ngIf="model.isWaiting()" class="">
<p class="status-icon-ctn waiting no-print">
<i class="material-icons status-normal status-icon">hourglass_empty</i>
</p>
<h1 id="waitingForReplyHeader" class="status-header status-normal">Waiting For Reply</h1>
<div id="swLabel" class="page-description">
<p *ngIf="!model.isExpired" class="para-medium">
This payment will expire on
<span *ngIf="model.payment.p2PExpiresOn" class="expire-date">
{{ model.payment.p2PExpiresOn | date: 'shortDate' }}
</span>
<span *ngIf="!model.payment.p2PExpiresOn" class="expire-date">
{{ model.expirationDate | date: 'shortDate' }}
</span>
<br />
The recipient has <span class="days-left status-positive"> {{ model.daysLeft }} </span> days left to
collect.
</p>
<p *ngIf="model.isExpired" class="para-medium">
This payment expired on
<span class="expire-date"> {{ model.payment.p2PExpiresOn | date: 'shortDate' }} </span> <br />
The recipient cannot collect an
<span class="days-left status-negative"> {{ model.daysLeft }} </span> payment.
</p>
</div>
</div>
<!-- Payment In Flight -->
<div *ngIf="model.isPaymentInFlight() && !model.payment.error">
<p class="status-icon-ctn collected no-print">
<span class="circle-icon-status">
<i class="material-icons status-normal status-icon">construction</i>
</span>
</p>
<h1 class="status-header status-positive">Creating Payment</h1>
<div id="swLabel" class="page-description">
<p class="para-medium">We have received your request and are currently creating this payment.</p>
</div>
</div>
<div *ngIf="model.isPaymentInFlight() && model.payment.error">
<p class="status-icon-ctn waiting no-print no-print">
<i class="material-icons bad-color status-icon">error_outline</i>
</p>
<h1 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.payment.error }}</p>
</div>
</div>
<!-- Passed Payment -->
<div *ngIf="model.isDone()">
<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 class="status-header status-positive">Money Collected</h1>
<div id="swLabel" class="page-description">
<p class="para-medium">
The recipient of this payment has successfully collected the money you sent them.
</p>
</div>
</div>
<!-- Failed Payment -->
<div *ngIf="model.isPmtExpired()">
<p class="status-icon-ctn no-response no-print">
<i class="material-icons status-negative status-icon">close</i>
</p>
<h1 class="status-header status-negative">Recipient Never Accepted</h1>
<div id="swLabel" class="page-description">
<p class="para-medium">
The recipient of this payment failed to receive the money within the 10 days. Funds have returned to
your account.
</p>
</div>
</div>
<!-- Failed Attempts Payment -->
<div *ngIf="model.isFailedAttempts()">
<p class="status-icon-ctn no-response no-print">
<i class="material-icons status-negative status-icon">close</i>
</p>
<h1 class="status-header status-negative">Recipient Failed Secret</h1>
<div id="swLabel" class="page-description">
<p class="para-medium">
The recipient of this payment failed to provide the correct secret within the maximum number of
attempts.
</p>
</div>
</div>
<!-- Not Applicable Payment -->
<div *ngIf="model.isNotApplicable()">
<p class="status-icon-ctn no-response">
<i class="material-icons status-negative status-icon">priority_high</i>
</p>
<h1 class="status-header status-negative">Not Applicable</h1>
<div id="swLabel" class="page-description"><p class="para-medium">This is unkown status</p></div>
</div>
<!-- Processing Payment -->
<div *ngIf="model.isProcessing()">
<p class="status-icon-ctn no-response">
<i class="material-icons status-normal status-icon">hourglass_empty</i>
</p>
<h1 class="status-header status-normal">Processing</h1>
<div id="swLabel" class="page-description"><p class="para-medium">This payment is in progress.</p></div>
</div>
<!-- Canceled Payment -->
<div *ngIf="model.isCancelled()">
<p class="status-icon-ctn no-response"><i class="material-icons status-negative status-icon">close</i></p>
<h1 class="status-header status-negative">Payment Was Canceled</h1>
<div id="swLabel" class="page-description">
<p class="para-medium">This payment was canceled and funds have returned to your account.</p>
</div>
</div>
<!-- Uknown Error Has Occurred -->
<div *ngIf="model.isHandlingError()">
<p class="status-icon-ctn no-response">
<i class="material-icons status-negative status-icon">priority_high</i>
</p>
<h1 class="status-header status-negative">Error Detecting Payment Status</h1>
<div id="swLabel" class="page-description">
<p class="para-medium">Contact your financial institution if you continue to receive this error.</p>
</div>
</div>
<!-- Title -->
<div class="itable-ctn">
<div class="itable-row summary-title">
<p>Activity Summary</p>
<span (click)="print()" class="print-option no-print">
<i class="material-icons">print</i>
<span>Print Details</span>
</span>
</div>
<!-- Recipient -->
<div class="itable-row">
<div class="itable-col-one no-print"><i class="material-icons">person</i></div>
<div class="itable-col-two"><p>Recipient</p></div>
<div class="itable-col-three">
<p id="paymentRecipient">
{{ model.payment.displayName ? model.payment.displayName : model.payment.payToName }}
</p>
</div>
</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="paymentAmount">{{ model.payment.amount | currency: 'USD':'symbol':'1.2-2' }}</p>
</div>
</div>
<!-- Pay From Account -->
<div class="itable-row">
<div class="itable-col-one no-print">
<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"
class="svg-icon"
>
<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>From Account</p></div>
<div class="itable-col-three">
<p id="paymentAccount">
<app-account-label
*ngIf="model.payment.payFromAccount"
[account]="model.payment.account"
></app-account-label>
</p>
</div>
</div>
<!-- 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>Send On</p></div>
<div id="paymentDeliveryDate" class="itable-col-three">
<span *ngIf="model.isPaymentInFlight() && !model.payment.error"> Pending </span>
<span *ngIf="model.isPaymentInFlight() && model.payment.error"> Error </span>
<p *ngIf="model.payment.status !== 'InFlight'">
{{ model.payment.createOn | date: 'shortDate' }}
</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.payment.memo }}
<span *ngIf="!model.payment.memo || model.payment.memo.length === 0"> - </span>
</p>
</div>
</div>
<!-- Secret Word -->
<div class="itable-row">
<div class="itable-col-one no-print"><i class="material-icons">verified_user</i></div>
<div class="itable-col-two"><p>Secret Word</p></div>
<div class="itable-col-three">
<p id="secretWordLabel">{{ model.payment.secret }}</p>
</div>
</div>
<!-- Contact Info -->
<div class="itable-row">
<div class="itable-col-one no-print"><i class="material-icons">email</i></div>
<div class="itable-col-two"><p>Contact Info</p></div>
<div class="itable-col-three">
<p id="contactMethodLabel">{{ model.contactMethod | phone }}</p>
</div>
</div>
<!-- Waiting Payment Action -->
<div *ngIf="model.isWaiting() || (model.isProcessing && !model.isDone)">
<button
id="cancelPaymentButton"
(click)="cancelPayment()"
type="button"
class="action-button resend-money no-print"
tabindex="2"
>
<p class="button-inside">Cancel This Payment</p>
</button>
</div>
<!-- Error Payment In Flight Action -->
<div *ngIf="model.payment.error">
<button
id="dismissButton"
(click)="dismissPaymentErrorMessage()"
type="button"
class="action-button resend-money no-print"
tabindex="2"
>
<p class="button-inside">Dismiss</p>
</button>
</div>
</div>
</div>
<div *ngIf="model.isLoading">
<app-loader [header]="model.loaderHeader" [message]="model.message"></app-loader>
</div>
Legend
Html element with directive