File
Implements
Methods
|
setInflightDates
|
setInflightDates()
|
|
|
|
|
|
togglePaymentInFlightExplain
|
togglePaymentInFlightExplain()
|
|
|
|
|
|
inflightDeliveryDate$
|
Type : Observable<any>
|
|
|
|
inflightSendOnDate$
|
Type : Observable<any>
|
|
|
|
showPaymentInFlightExplain
|
Default value : false
|
|
|
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { tap } from 'rxjs/operators';
import { Payment } from '../../models/payment.model';
import { DeliveryDateService } from '../../providers';
import { DeviceService } from '../../providers/services/device.service';
import { AppStateStore } from '../../providers/stores/app-state.store';
@Component({
selector: 'app-success-screen',
templateUrl: './success-screen.component.html',
styleUrls: ['./success-screen.component.css'],
})
export class SuccessScreenComponent implements OnInit {
payment: Payment;
constructor(
private app: AppStateStore,
public device: DeviceService,
private deliveryDateService: DeliveryDateService
) {}
showPaymentInFlightExplain = false;
inflightSendOnDate$: Observable<any>;
inflightDeliveryDate$: Observable<any>;
ngOnInit() {
this.payment = this.app.payment;
this.setInflightDates();
this.app.clear();
if (this.payment.status === 'In Flight') {
return;
}
}
print() {
window.print();
}
togglePaymentInFlightExplain() {
this.showPaymentInFlightExplain = !this.showPaymentInFlightExplain;
}
setInflightDates() {
this.inflightSendOnDate$ = this.deliveryDateService.earliestStandardElectronicScheduleForDate$.pipe(
tap((results) => {
this.payment.expectedSendOnDate = results;
}));
this.inflightDeliveryDate$ = this.deliveryDateService.expectedDeliveryDate$.pipe(
tap((results) => {
this.payment.expectedDeliveryDate = results;
}));
}
}
<ng-container *ngIf="inflightSendOnDate$ | async"></ng-container>
<ng-container *ngIf="inflightDeliveryDate$ | async"></ng-container>
<div class="scroller" id="successScreen" [ngClass]="{ iosTrue: device.iOS }">
<p class="status-icon-ctn no-print">
<i class="material-icons status-positive status-icon">done</i>
</p>
<h1 id="transferRequestSentHeader" class="status-header status-positive">Transfer Request Sent</h1>
<div id="swLabel" class="page-description">
<p class="para-medium">We have received your request to create this transfer.
<a id="inFlightExplainButton" (click)="togglePaymentInFlightExplain()" class="action-link">What Does This Mean?</a></p>
</div>
<!-- Title -->
<div class="itable-ctn">
<div class="itable-row summary-title">
<p>Activity Summary</p>
<span id="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="paymentAmountLabel">{{ 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 id="fromAccountLabel" class="itable-col-three">
<p
*ngIf="
!payment.payFromAccountDisplayName || payment.payFromAccountDisplayName.length < 1
"
>
{{ payment.payFromAccountName }}
</p>
<p
*ngIf="
payment.payFromAccountDisplayName && payment.payFromAccountDisplayName.length > 0
"
>
{{ payment.payFromAccountDisplayName }}
</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 id="toAccountLabel" class="itable-col-three">
<p *ngIf="!payment.displayName || payment.displayName.length < 1">
{{ payment.payToName }}
</p>
<p *ngIf="payment.displayName && payment.displayName.length > 0">
{{ payment.displayName }}
</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 *ngIf="payment.status === 'InFlight'">Estimated Send On Date</p>
<p *ngIf="payment.paymentDate && payment.status !== 'InFlight'">Send On Date</p>
</div>
<div class="itable-col-three">
<p *ngIf="payment.status === 'InFlight'">{{payment.expectedSendOnDate}}</p>
<p id="paymentDateLabel" [attr.data-payment-date]="payment.paymentDate" *ngIf="payment.paymentDate && payment.status !== 'InFlight'">
{{ payment.paymentDate | date: 'shortDate' }}
</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 *ngIf="payment.status === 'InFlight'">Estimated Delivery Date</p>
<p *ngIf="payment.expectedDeliveryDate && payment.status !== 'InFlight'">Delivery Date</p>
</div>
<div class="itable-col-three">
<p *ngIf="payment.status === 'InFlight'">{{ payment.expectedDeliveryDate }}</p>
<p id="expectedDeliveryDateLabel" [attr.data-expected-delivery-date]="payment.expectedDeliveryDate" *ngIf="payment.expectedDeliveryDate && payment.status !== 'InFlight'">
{{ payment.expectedDeliveryDate | 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="paymentMemoLabel">
{{ payment.memo }}
<span *ngIf="!payment.memo || payment.memo.length < 1"> - </span>
</p>
</div>
</div>
<a class="no-print" [routerLink]="['/start']">
<button class="transferMoreButton" type="button" class="action-button" tabindex="2">
<p class="button-inside">Transfer More Money</p>
</button>
</a>
</div>
<ng-container *ngIf="showPaymentInFlightExplain">
<app-payment-in-flight-explain (closePaymentInFlightExplain)="togglePaymentInFlightExplain()">
</app-payment-in-flight-explain>
</ng-container>
</div>
a:hover {
cursor: pointer;
}
.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: absolute;
bottom: 15px;
right: 15px;
z-index: 99;
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%;
}
}
Legend
Html element with directive