Checkout dialog box working
This commit is contained in:
parent
a0b07d8315
commit
ed7ceb7594
7 changed files with 99 additions and 42 deletions
|
|
@ -13,8 +13,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
||||||
|
|
||||||
|
|
||||||
### Changed
|
### Changed
|
||||||
- (2022-07-22) Invoice dialog completed. Notifications to inform
|
- (2022-07-23) - Checkout dialog with QR image redesigned.
|
||||||
successful/fail of URL copy to clipboard added.
|
- Invoice dialog completed. Notifications to inform
|
||||||
|
successful/failed URL-copy-to-clipboard added.
|
||||||
- (2022-07-22) Notifier service created - replaces snackbar used for
|
- (2022-07-22) Notifier service created - replaces snackbar used for
|
||||||
reporting invalid viewing key.
|
reporting invalid viewing key.
|
||||||
Notifier component created - used to apply custom style to message sent by Notifier service.
|
Notifier component created - used to apply custom style to message sent by Notifier service.
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,14 @@
|
||||||
.text {
|
.text {
|
||||||
font-family: 'Spartan', sans-serif;
|
font-family: 'Spartan', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.askPayment {
|
||||||
|
font-family: "Spartan";
|
||||||
|
background: #ff5722;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 18px;
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
line-height: 20px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,28 +1,37 @@
|
||||||
<div align="center" mat-dialog-title>
|
<div class="container" style="margin-top: 10px;">
|
||||||
<h4 class="text">Scan to make payment</h4>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<mat-dialog-content>
|
<div class="askPayment">
|
||||||
<div align="center"
|
Scan to make payment
|
||||||
id="checkout-qr">
|
|
||||||
</div>
|
</div>
|
||||||
</mat-dialog-content>
|
<pre></pre>
|
||||||
<mat-dialog-actions>
|
<table style="align-content: center;">
|
||||||
<table cellspacing="0"
|
|
||||||
width="100%">
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td width="10%"></td>
|
||||||
<button mat-raised-button color="primary" (click)="confirm()">
|
<td width="80%">
|
||||||
<mat-icon>verified_user</mat-icon>
|
<div id="checkout-qr"></div>
|
||||||
</button>
|
|
||||||
|
|
||||||
</td>
|
|
||||||
<td align="right">
|
|
||||||
<button mat-raised-button (click)="close()">
|
|
||||||
<mat-icon>close</mat-icon>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
</td>
|
</td>
|
||||||
|
<td width="10%"></td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</mat-dialog-actions>
|
|
||||||
|
<mat-dialog-actions>
|
||||||
|
<table cellspacing="0"
|
||||||
|
width="100%">
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<button mat-raised-button color="primary" (click)="confirm()">
|
||||||
|
<mat-icon>verified_user</mat-icon>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
<td align="right">
|
||||||
|
<button mat-raised-button (click)="close()">
|
||||||
|
<mat-icon>close</mat-icon>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</mat-dialog-actions>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -32,12 +32,18 @@ export class CheckoutComponent implements OnInit{
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
var qrcode = new QRCode(document.getElementById("checkout-qr"), {
|
var qrcode = new QRCode(document.getElementById("checkout-qr"),
|
||||||
text: this.codeString,
|
{
|
||||||
logo: "/assets/zcash.png",
|
text: this.codeString,
|
||||||
logoWidth: 80,
|
logo: "/assets/zcash.png",
|
||||||
logoHeight: 80
|
width: 220,
|
||||||
});
|
height: 220,
|
||||||
|
logoWidth: 60,
|
||||||
|
logoHeight: 60,
|
||||||
|
correctLevel: QRCode.CorrectLevel.H
|
||||||
|
});
|
||||||
|
console.log(">>> " + qrcode);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
confirm() {
|
confirm() {
|
||||||
|
|
|
||||||
|
|
@ -40,3 +40,10 @@
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.qr-code{
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
border-bottom-left-radius: 0.5rem;
|
||||||
|
border-bottom-right-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,3 +2,21 @@
|
||||||
.text {
|
.text {
|
||||||
font-family: 'Spartan', sans-serif;
|
font-family: 'Spartan', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.receipt {
|
||||||
|
font-family: "Spartan";
|
||||||
|
background: #ff5722;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 18px;
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
line-height: 20px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qrbody {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #e8eaf0;
|
||||||
|
}
|
||||||
|
|
@ -1,13 +1,18 @@
|
||||||
<div align="center" mat-dialog-title>
|
<div class="container" style="margin-top: 10px;">
|
||||||
<h4 class="text">Scan for your Receipt</h4>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<mat-dialog-content>
|
<div class="receipt">
|
||||||
<div class="qrcode" id="receipt-qr"> </div>
|
Scan for your Receipt
|
||||||
</mat-dialog-content>
|
</div>
|
||||||
|
|
||||||
<mat-dialog-actions>
|
<div class="qrbody">
|
||||||
<button mat-raised-button class="text" (click)="close()">
|
<div id="receipt-qr"> </div>
|
||||||
<mat-icon class="icon">close</mat-icon>Close
|
</div>
|
||||||
</button>
|
|
||||||
</mat-dialog-actions>
|
<mat-dialog-actions>
|
||||||
|
<button mat-raised-button class="text" (click)="close()">
|
||||||
|
<mat-icon class="icon">close</mat-icon>Close
|
||||||
|
</button>
|
||||||
|
</mat-dialog-actions>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
Loading…
Reference in a new issue