File
Implements
Methods
|
continue
|
continue(payment: Payment)
|
|
|
Parameters :
| Name |
Type |
Optional |
| payment |
Payment
|
No
|
|
|
toggleViewPayments
|
toggleViewPayments()
|
|
|
|
|
|
loaderHeader
|
Type : string
|
Default value : 'Loading Duplicate Payment'
|
|
|
|
message
|
Type : string
|
Default value : 'Please wait a moment while we load the possible duplicated payment.'
|
|
|
|
paymentDetailsValue
|
Type : string
|
|
|
|
Private
request
|
Type : Subscription
|
|
|
import { Component, OnInit } from '@angular/core';
import { Payment } from '../../models';
import { DeviceService } from '../../providers/services/device.service';
import { Router } from '@angular/router';
import { Observable, Subscription } from 'rxjs';
import { ErrorStore, PaymentService, SessionStore } from '../../providers';
import { AppStateStore } from '../../providers/stores/app-state.store';
import { filter, first, map, switchMap, tap } from 'rxjs/operators';
import { MessageContent } from '../../models/message-content.model';
@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
) {}
private request: Subscription;
loaderHeader = 'Loading Duplicate Payment';
message = 'Please wait a moment while we load the possible duplicated payment.';
isLoading: boolean;
model$: Observable<Payment>;
messageContent: MessageContent;
private customerId;
paymentDetailsValue: string;
showPaymentDetails: boolean;
ngOnInit() {
this.isLoading = true;
this.paymentDetailsValue = 'View Payment Details';
this.showPaymentDetails = false;
this.model$ = this.sessionStore.session$.pipe(
first((session) => !!session && !!session.customerId),
switchMap((session) => {
this.customerId = session.customerId;
return this.paymentService.findDuplicate();
}),
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() {
if (this.paymentDetailsValue === 'View Payment Details') {
this.paymentDetailsValue = 'Hide Payment Details';
this.showPaymentDetails = true;
return;
}
this.paymentDetailsValue = 'View Payment Details';
this.showPaymentDetails = false;
}
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 *ngIf="!isLoading">
<div>
<h1 id="duplicateTransferAlertHeader" class="page-headers bad-color">Duplicate Transfer Alert</h1>
<div id="swLabel" class="page-description">
<p id="sameTransferLabel" class="para-medium">
We've detected that you already have a transfer scheduled for the same date and amount.
</p>
<p class="para-medium">
<b>Are you sure you'd like to continue and schedule this transfer anyway?</b>
</p>
</div>
</div>
<div class="actions-ctn">
<!-- Send By Email -->
<div id="continuePaymentButton" 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="cancelPaymentButton" 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 transfer.</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" >
<!-- 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">{{ payment.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]="payment"></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]="payment"></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>Send On Date</p>
</div>
<div class="itable-col-three">
<p>
<span id="sentOnDateLabel" *ngIf="payment.paymentDate && payment.status !== 'InFlight'">
{{ payment.paymentDate | date: 'shortDate' }}
</span>
<span *ngIf="payment.status === 'InFlight'"> Pending </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>Delivery Date</p>
</div>
<div class="itable-col-three">
<p>
<span id="deliveryDateLabel" *ngIf="payment.expectedDeliveryDate && payment.status !== 'InFlight'">
{{ payment.expectedDeliveryDate | 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 id="paymentMemoLabel">
{{ payment.memo }}
<span *ngIf="!payment.memo || payment.memo.length < 1"> - </span>
</p>
</div>
</div>
</div>
</div>
</div>
.page-description {
max-width: 360px;
}
.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;
}
@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);
}
}
.itable {
margin: auto;
width: 90%;
max-width: 360px;
}
.actions-ctn {
max-width: 360px;
width: 90%;
margin: 0px auto;
border: 1px solid #ccc;
border-bottom: none;
border-radius: 3px;
}
.action-row {
padding: 10px 0px;
border-bottom: 1px solid #ccc;
width: 100%;
cursor: pointer;
}
.action-row p,
.action-row-second p {
margin-bottom: 0px;
color: #707173;
}
.action-row-inner {
text-align: center;
padding: 0px 10px;
}
.action-row:hover {
background-color: rgba(158, 158, 158, 0.2);
}
.view-payment-details-btn-container {
text-align: center;
margin-top: 15px;
}
.view-payment-details-btn {
color: #dc1b52 !important;
padding: 1px;
cursor: pointer;
}
.view-payment-details-btn .material-icons {
font-size: 22px;
vertical-align: bottom;
margin-bottom: -2px;
margin-right: 2px;
}
Legend
Html element with directive