Add buttons to checkout component

This commit is contained in:
Rene V. Vergara A. 2022-08-04 16:31:37 -05:00
parent de1a19ffd0
commit 8243b4e3f8
2 changed files with 80 additions and 7 deletions

View file

@ -1,4 +1,5 @@
<div class="container" style="margin-top: 10px;">
<div class="container" style="font-family: 'Spartan', sans-serif;
margin-top: 10px;">
<div class="askPayment">
Scan to make payment
@ -14,7 +15,7 @@
</tr>
</table>
<mat-dialog-actions>
<div style="margin-top: 10px;">
<table cellspacing="0"
width="100%">
<tr>
@ -32,6 +33,31 @@
</td>
</tr>
</table>
</mat-dialog-actions>
</div>
<div style="text-align: center;
margin-top: 10px;
line-height: 30px;">
Can't scan?<br>Use this <a [href]="zcashUrl">wallet link</a>, or
<div style="display: flex;
justify-content: space-between;">
<button style="margin-top: 20px;
font-weight: 700;
background-color: lightgray;"
mat-raised-button
(click)="copyAddress()">Copy Address</button>
<button style="margin-top: 20px;
font-weight: 700;
background-color: lightgray;"
mat-raised-button
(click)="copyAmount()">Copy Amount</button>
</div>
<button style="margin-top: 20px;
font-weight: 700;
background-color: lightgray;"
mat-raised-button
(click)="copyMemo()">Copy Memo</button>
</div>
</div>

View file

@ -2,6 +2,8 @@ import { Inject, Component, OnInit, ViewEncapsulation} from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
import { NotifierService } from '../notifier.service';
var QRCode = require('easyqrcodejs');
var URLSafeBase64 = require('urlsafe-base64');
var Buffer = require('buffer/').Buffer;
@ -22,8 +24,9 @@ export class CheckoutComponent implements OnInit{
constructor(
private dialogRef: MatDialogRef<CheckoutComponent>,
private sanitizer: DomSanitizer,
@Inject(MAT_DIALOG_DATA) public data: { totalZec: number, addr: string, orderId: string}
) {
@Inject(MAT_DIALOG_DATA) public data: { totalZec: number, addr: string, orderId: string},
private notifierService : NotifierService ) {
console.log("Entra a Constructor")
this.address = data.addr;
this.total = data.totalZec;
@ -37,8 +40,8 @@ export class CheckoutComponent implements OnInit{
{
text: this.codeString,
logo: "/assets/zcash.png",
width: 220,
height: 220,
width: 230,
height: 230,
logoWidth: 60,
logoHeight: 60,
correctLevel: QRCode.CorrectLevel.H
@ -54,4 +57,48 @@ export class CheckoutComponent implements OnInit{
close() {
this.dialogRef.close(false);
}
copyAddress() {
if (!navigator.clipboard) {
// alert("Copy functionality not supported");
this.notifierService
.showNotification("Copy functionality not supported","Close","error");
}
try {
navigator.clipboard.writeText(this.address);
} catch (err) {
this.notifierService
.showNotification("Error copying address","Close","error");
// console.error("Error", err);
}
}
copyAmount() {
if (!navigator.clipboard) {
// alert("Copy functionality not supported");
this.notifierService
.showNotification("Copy functionality not supported","Close","error");
}
try {
navigator.clipboard.writeText(this.total.toString());
} catch (err) {
this.notifierService
.showNotification("Error while copying ammount","Close","error");
// console.error("Error", err);
}
}
copyMemo() {
if (!navigator.clipboard) {
// alert("Copy functionality not supported");
this.notifierService
.showNotification("Copy functionality not supported","Close","error");
}
try {
navigator.clipboard.writeText("ZGo Order::" + this.orderId);
} catch (err) {
this.notifierService
.showNotification("Error while copying Memo","Close","error");
// console.error("Error", err);
}
}
}