File
Implements
Metadata
| selector |
app-success-screen |
| styleUrls |
success-screen.component.css |
| templateUrl |
./success-screen.component.html |
Methods
|
togglePaymentInFlightExplain
|
togglePaymentInFlightExplain()
|
|
|
|
|
|
toggleSWNotification
|
toggleSWNotification()
|
|
|
|
|
|
showPaymentInFlightExplain
|
showPaymentInFlightExplain:
|
Default value : false
|
|
|
|
showSWNotification
|
showSWNotification:
|
Default value : true
|
|
|
import { DatePipe } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { LOCALE } from '../app.constants';
import { BankAccount, Payment } from '../models';
import { Template } from '../models/template.model';
import { DeviceService } from '../services/device.service';
import { AppState } from '../stores/app-state.store';
@Component({
selector: 'app-success-screen',
templateUrl: './success-screen.component.html',
styleUrls: ['./success-screen.component.css']
})
export class SuccessScreenComponent implements OnInit {
showSWNotification = true;
showPaymentInFlightExplain = false;
account: BankAccount;
template: Template;
payment: Payment;
constructor(private app: AppState, public device: DeviceService) {}
ngOnInit() {
this.payment = this.app.payment;
this.account = this.app.bankAccount;
this.template = this.app.template;
if (localStorage) {
const storedValue = localStorage.getItem('hide-secret-word-reminder');
if (storedValue && storedValue.length > 0) {
this.showSWNotification = storedValue !== 'true';
}
}
this.app.clear();
}
toggleSWNotification() {
this.showSWNotification = !this.showSWNotification;
}
togglePaymentInFlightExplain() {
this.showPaymentInFlightExplain = !this.showPaymentInFlightExplain;
}
}
<span *ngIf="payment && template">
<span *ngIf="showSWNotification">
<app-secret-word-reminder
[template]="template"
payment="payment"
(closeSWNotification)="toggleSWNotification()"
></app-secret-word-reminder>
</span>
<div class="scroller" id="successScreen" [ngClass]="{ iosTrue: device.iOS }">
<p class="status-icon-ctn"><i class="material-icons status-positive status-icon">done</i></p>
<h1 id="successHeader" class="status-header success-message-header-color">Payment Request Sent</h1>
<div id="swLabel" class="page-description">
<p class="para-medium">
We have received your request to create this payment.
<a id="explainRecivedPayment" (click)="togglePaymentInFlightExplain()" class="action-link">What Does This Mean?</a>
</p>
</div>
<!-- Title -->
<div class="itable-ctn">
<div class="itable-row"><p>Activity Summary</p></div>
<!-- Recipient -->
<div class="itable-row">
<div class="itable-col-one"><i class="material-icons">person</i></div>
<div class="itable-col-two"><p>Recipient</p></div>
<div class="itable-col-three">
<p id="recipientName">{{ template.name }}</p>
</div>
</div>
<!-- Amount -->
<div class="itable-row">
<div class="itable-col-one"><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">{{ payment.amount | currency: 'USD':'symbol':'1.2-2' }}</p>
</div>
</div>
<!-- Pay From Account -->
<div class="itable-row">
<div class="itable-col-one">
<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="account" [account]="account"></app-account-label></p>
</div>
</div>
<!-- Date -->
<div class="itable-row">
<div class="itable-col-one"><i class="material-icons">date_range</i></div>
<div class="itable-col-two"><p>Date</p></div>
<div id="paymentDate" class="itable-col-three">
<p *ngIf="payment.status === 'InFlight'">Pending</p>
<p *ngIf="payment.status !== 'InFlight'">
{{ payment.paymentDateFormatted }}
</p>
</div>
</div>
<!-- Note -->
<div class="itable-row">
<div class="itable-col-one"><i class="material-icons">comment</i></div>
<div class="itable-col-two"><p>Note</p></div>
<div class="itable-col-three">
<p id="PaymentMemo">{{ payment.memo }} <span *ngIf="!payment.memo || payment.memo.length === 0"> - </span></p>
</div>
</div>
<!-- Secret Word -->
<div class="itable-row">
<div class="itable-col-one"><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="secretWord">{{ template.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="template.defaultContactMethod === 'EMAIL'">{{ template.p2PPayToEmailAddress }}</p>
<p *ngIf="template.defaultContactMethod === 'PHONE'">{{ template.p2PPayToPhoneNumber | phone }}</p>
</div>
</div>
<a [routerLink]="['/start']">
<button id="sendMoreMoneyButton" type="button" class="action-button" tabindex="2">
<p class="button-inside">Send More Money</p>
</button>
</a>
</div>
<div class="action-ctn">
<p class="para-dark">
<a id="dontForgetPopup" (click)="toggleSWNotification()" class="action-link">Don't forget the secret word</a>
</p>
</div>
</div>
</span>
<ng-container *ngIf="showPaymentInFlightExplain">
<app-payment-in-flight-explain (closePaymentInFlightExplain)="togglePaymentInFlightExplain()">
</app-payment-in-flight-explain>
</ng-container>
Legend
Html element with directive