File
Implements
Metadata
| selector |
app-secret-word-reminder |
| styleUrls |
secret-word-reminder.component.css |
| templateUrl |
./secret-word-reminder.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Methods
|
getSmsLinkIPhone
|
getSmsLinkIPhone()
|
|
|
|
|
|
stopPropagation
|
stopPropagation(event: Event)
|
|
|
Parameters :
| Name |
Type |
Optional |
| event |
Event
|
no
|
|
|
storeAnswer
|
storeAnswer(value: )
|
|
|
|
|
|
toggleSWNotification
|
toggleSWNotification(event: Event)
|
|
|
Parameters :
| Name |
Type |
Optional |
| event |
Event
|
no
|
|
|
isCopied
|
isCopied:
|
Default value : false
|
|
|
|
isHidden
|
isHidden:
|
Default value : true
|
|
|
|
reminderToggle
|
reminderToggle:
|
Default value : false
|
|
|
|
smsMessage
|
smsMessage: string
|
Type : string
|
Default value : 'Hello, the secret word is'
|
|
|
import { Component, EventEmitter, OnInit, Output, Renderer, Input } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { ClipboardService } from '../../directives/clipboard';
import { Payment, Template } from '../../models';
import { DeviceService } from '../../services/device.service';
import { AppState } from '../../stores/app-state.store';
@Component({
selector: 'app-secret-word-reminder',
templateUrl: './secret-word-reminder.component.html',
styleUrls: ['./secret-word-reminder.component.css']
})
export class SecretWordReminderComponent implements OnInit {
@Output()
closeSWNotification = new EventEmitter();
reminderToggle = false;
@Input()
template: Template;
@Input()
payment: Payment;
smsMessage = 'Hello, the secret word is';
isCopied = false;
isHidden = true;
constructor(
private app: AppState,
private sanitizer: DomSanitizer,
private clipboard: ClipboardService,
private renderer: Renderer,
private device: DeviceService
) {}
ngOnInit() {
if (localStorage) {
const storedValue = localStorage.getItem('hide-secret-word-reminder');
if (storedValue && storedValue.length > 0) {
this.reminderToggle = storedValue === 'true';
}
}
}
toggleSWNotification(event: Event) {
this.closeSWNotification.emit();
}
stopPropagation(event: Event) {
event.stopPropagation();
}
storeAnswer(value) {
this.reminderToggle = value;
if (localStorage) {
localStorage.setItem('hide-secret-word-reminder', `${value}`);
} else {
console.log('localStorage not available');
}
}
getSmsLink() {
return this.sanitizer.bypassSecurityTrustUrl(
`sms:${this.template.p2PPayToPhoneNumber}?body=${this.smsMessage} ${this.template.secret}`
);
}
getSmsLinkIPhone() {
return this.sanitizer.bypassSecurityTrustUrl(
`sms:${this.template.p2PPayToPhoneNumber}&body=${this.smsMessage} ${this.template.secret}`
);
}
copy() {
this.clipboard.copyFromContent(this.template.secret, this.renderer);
this.isCopied = true;
setTimeout(() => {
this.isCopied = false;
}, 2000);
}
}
<div *ngIf="template" class="overlay scroller" (click)="toggleSWNotification($event)">
<div class="pop-up-ctn" id="secretWordReminder">
<div class="pop-up-ctn-header" (click)="stopPropagation($event)">
<p id="secretWordReminderHeader" class="header-text">Secret Word Reminder</p>
</div>
<div class="pop-up-ctn-body" (click)="stopPropagation($event)">
<h1 class="status-header">Don't Forget To Send The Secret Word</h1>
<div class="page-description">
<p class="para-medium">Please take a moment to send {{template.name}} the unique secret word you created.</p>
</div>
<p class="para-dark this-sw">Secret word for this recipient is:</p>
<div id="sw-actions-ctn">
<!-- Secret word on display/copy to clipboard -->
<div id="sw-preview" (click)="copy()">
<p id="sw-display" [class.copied]="isCopied">{{template.secret}}</p>
<p *ngIf="!isCopied" id="sw-action">Tap to copy secret word</p>
<p *ngIf="isCopied" id="sw-display">Copied!</p>
<p *ngIf="isCopied" id="sw-action">Ready to paste secret word</p>
</div>
<!-- Send By Email -->
<a target="_top" *ngIf="!isHidden" href="mailto:{{template.p2PPayToEmailAddress}}?Subject=Secret Word Reminder &body=Hello, the secret word is {{template.secret}}.">
<div id="sw-send-row">
<div id="sw-send-row-inner">
<div id="sw-send-label">
<p>Send this secret word with an email</p>
</div>
</div>
</div>
</a>
<!-- Send By Text -->
<a target="_top" *ngIf="!isHidden" [href]="getSmsLink()" class="send-sw" [ngClass]="{'iosFalse': device.iOS}">
<div id="sw-send-row-second">
<div id="sw-send-row-inner">
<div id="sw-send-label">
<p>Send this secret word with a text</p>
</div>
</div>
</div>
</a>
<!-- Send By Text Iphone -->
<a target="_top" *ngIf="!isHidden" [href]="getSmsLinkIPhone()" class="send-sw-iphone" [ngClass]="{'iosTrue': device.iOS}">
<div id="sw-send-row-second">
<div id="sw-send-row-inner">
<div id="sw-send-label">
<p>Send this secret word with a text</p>
</div>
</div>
</div>
</a>
</div>
<button id="secretContinueButton" type="button" class="action-button" tabindex="1" (click)="toggleSWNotification($event)">
<p class="button-inside">Continue</p>
</button>
<div id="sw-turn-off-notification">
<label id="shutOff">
<input [ngModel]="reminderToggle" (ngModelChange)="storeAnswer($event)" type="checkbox" value="shut-off" for="shutOff">
<span class="custom-checkbox">
<i class="material-icons">check</i>
</span>Shut off this reminder notification
</label>
</div>
</div>
</div>
Legend
Html element with directive