File
Implements
Metadata
| selector |
app-duplicate-payment-alert |
| styleUrls |
duplicate-payment-alert.component.css |
| templateUrl |
./duplicate-payment-alert.component.html |
Methods
|
continue
|
continue(payment: Payment)
|
|
|
Parameters :
| Name |
Type |
Optional |
| payment |
Payment
|
no
|
|
|
toggleViewPayments
|
toggleViewPayments()
|
|
|
|
|
|
Private
customerId
|
customerId:
|
|
|
|
isLoading
|
isLoading:
|
Default value : true
|
|
|
|
loaderHeader
|
loaderHeader: string
|
Type : string
|
Default value : 'Loading Duplicate Payment'
|
|
|
|
message
|
message: string
|
Type : string
|
Default value : 'Please wait a moment while we load the possible duplicated payment.'
|
|
|
|
paymentDetailsValue
|
paymentDetailsValue: string
|
Type : string
|
Default value : 'View Payment Details'
|
|
|
|
showPaymentDetails
|
showPaymentDetails:
|
Default value : false
|
|
|
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Observable, Subscription } from 'rxjs';
import { delay, first, map, switchMap } from 'rxjs/operators';
import { Payment } from '../models';
import { MessageContent } from '../models/message-content.model';
import { PaymentService } from '../services';
import { DeviceService } from '../services/device.service';
import { SessionStore, ErrorStore } from '../stores';
@Component({
selector: 'app-duplicate-payment-alert',
templateUrl: './duplicate-payment-alert.component.html',
styleUrls: ['./duplicate-payment-alert.component.css'],
})
export class DuplicatePaymentAlertComponent implements OnInit {
constructor(
public device: DeviceService,
private router: Router,
private paymentService: PaymentService,
private sessionStore: SessionStore,
private errorService: ErrorStore
) {}
loaderHeader = 'Loading Duplicate Payment';
message = 'Please wait a moment while we load the possible duplicated payment.';
isLoading = true;
model$: Observable<Payment>;
messageContent: MessageContent;
private customerId;
paymentDetailsValue = 'View Payment Details';
showPaymentDetails = false;
ngOnInit() {
this.model$ = this.sessionStore.session$.pipe(
first((session) => !!session && !!session.customerId),
switchMap((session) => {
this.customerId = session.customerId;
return this.paymentService.findDuplicate();
}),
first(),
delay(500),
map((foundPayment) => {
if (foundPayment) {
console.log(foundPayment);
this.isLoading = false;
return foundPayment;
} else {
this.errorService.showError(
'Failed To Display Duplicated Payment',
'Please Contact Your Financial Institution'
);
}
})
);
}
toggleViewPayments() {
this.showPaymentDetails = !this.showPaymentDetails;
this.paymentDetailsValue = this.showPaymentDetails ? 'Hide Payment Details' : 'View Payment Details';
}
continue(payment: Payment) {
console.log('acknowledging payment as duplicate of', payment);
this.loaderHeader = '';
this.message = '';
this.isLoading = true;
this.paymentService.acknowledgeDuplicate(this.customerId, payment);
console.log('ackowledged');
this.router.navigate(['/payment/create']);
}
back() {
this.router.navigate(['/start']);
}
}
<div class="scroller" id="collectedScreenCtn" [ngClass]="{ iosTrue: device.iOS }">
<app-loader *ngIf="isLoading" [header]="loaderHeader" [message]="message"></app-loader>
<div *ngIf="model$ | async as payment">
<div>
<h1 id="duplicatePaymentAlertHeader" class="page-headers bad-color">Duplicate Payment Alert</h1>
<div id="swLabel" class="page-description">
<p class="para-medium">
We've detected that you already have a payment scheduled for the same date and amount.
</p>
<p class="para-medium">
<b>Are you sure you'd like to continue and schedule this payment anyway?</b>
</p>
</div>
</div>
<div class="actions-ctn">
<!-- Send By Email -->
<div id="continueButton" class="action-row" (click)="continue(payment)">
<div class="action-row-inner">
<div class="action-label">
<p class="action-method">Yes, please continue to send money.</p>
</div>
</div>
</div>
<div id="cancelButton" class="action-row" (click)="back()">
<div class="action-row-inner">
<div class="action-label">
<p class="action-method">No, I don't want to schedule this payment.</p>
</div>
</div>
</div>
</div>
<div class="view-payment-details-btn-container">
<span class="view-payment-details-btn" (click)="toggleViewPayments()">
<span *ngIf="!showPaymentDetails" class="material-icons"> visibility </span>
<span *ngIf="showPaymentDetails" class="material-icons"> visibility_off </span>
{{ paymentDetailsValue }}
</span>
</div>
<div class="itable" *ngIf="showPaymentDetails">
<!-- 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>{{ payment.displayName }}</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>
{{ 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>
<app-account-label *ngIf="payment.payFromAccount" [account]="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>Delivery Date</p>
</div>
<div class="itable-col-three">
<p>
<span *ngIf="payment.paymentDate && payment.status !== 'InFlight'">
{{ payment.paymentDate | date: 'shortDate' }}
</span>
<span *ngIf="payment.status === 'InFlight'"> Pending </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>
{{ payment.memo }}
<span *ngIf="!payment.memo || payment.memo.length < 1"> - </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>
{{ payment.secret }}
</p>
</div>
</div>
<!-- Contact Info -->
<div class="itable-row">
<div class="itable-col-one"><i class="material-icons">email</i></div>
<div class="itable-col-two"><p>Contact Info</p></div>
<div id="contactInfo" class="itable-col-three">
<p *ngIf="payment.p2PPayToEmailAddress && !payment.p2PPayToPhoneNumber">
{{ payment.p2PPayToEmailAddress }}
</p>
<p *ngIf="payment.p2PPayToPhoneNumber && !payment.p2PPayToEmailAddress">
{{ payment.p2PPayToPhoneNumber | phone }}
</p>
</div>
</div>
</div>
</div>
</div>
Legend
Html element with directive