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
|
||||
- (2022-07-22) Invoice dialog completed. Notifications to inform
|
||||
successful/fail of URL copy to clipboard added.
|
||||
- (2022-07-23) - Checkout dialog with QR image redesigned.
|
||||
- Invoice dialog completed. Notifications to inform
|
||||
successful/failed URL-copy-to-clipboard added.
|
||||
- (2022-07-22) Notifier service created - replaces snackbar used for
|
||||
reporting invalid viewing key.
|
||||
Notifier component created - used to apply custom style to message sent by Notifier service.
|
||||
|
|
|
|||
|
|
@ -1,3 +1,14 @@
|
|||
.text {
|
||||
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>
|
||||
<h4 class="text">Scan to make payment</h4>
|
||||
</div>
|
||||
<div class="container" style="margin-top: 10px;">
|
||||
|
||||
<mat-dialog-content>
|
||||
<div align="center"
|
||||
id="checkout-qr">
|
||||
<div class="askPayment">
|
||||
Scan to make payment
|
||||
</div>
|
||||
</mat-dialog-content>
|
||||
<mat-dialog-actions>
|
||||
<table cellspacing="0"
|
||||
width="100%">
|
||||
<pre></pre>
|
||||
<table style="align-content: center;">
|
||||
<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 width="10%"></td>
|
||||
<td width="80%">
|
||||
<div id="checkout-qr"></div>
|
||||
</td>
|
||||
<td width="10%"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</mat-dialog-actions>
|
||||
</table>
|
||||
|
||||
<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() {
|
||||
var qrcode = new QRCode(document.getElementById("checkout-qr"), {
|
||||
text: this.codeString,
|
||||
logo: "/assets/zcash.png",
|
||||
logoWidth: 80,
|
||||
logoHeight: 80
|
||||
});
|
||||
var qrcode = new QRCode(document.getElementById("checkout-qr"),
|
||||
{
|
||||
text: this.codeString,
|
||||
logo: "/assets/zcash.png",
|
||||
width: 220,
|
||||
height: 220,
|
||||
logoWidth: 60,
|
||||
logoHeight: 60,
|
||||
correctLevel: QRCode.CorrectLevel.H
|
||||
});
|
||||
console.log(">>> " + qrcode);
|
||||
|
||||
}
|
||||
|
||||
confirm() {
|
||||
|
|
|
|||
|
|
@ -40,3 +40,10 @@
|
|||
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 {
|
||||
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>
|
||||
<h4 class="text">Scan for your Receipt</h4>
|
||||
</div>
|
||||
<div class="container" style="margin-top: 10px;">
|
||||
|
||||
<mat-dialog-content>
|
||||
<div class="qrcode" id="receipt-qr"> </div>
|
||||
</mat-dialog-content>
|
||||
<div class="receipt">
|
||||
Scan for your Receipt
|
||||
</div>
|
||||
|
||||
<mat-dialog-actions>
|
||||
<button mat-raised-button class="text" (click)="close()">
|
||||
<mat-icon class="icon">close</mat-icon>Close
|
||||
</button>
|
||||
</mat-dialog-actions>
|
||||
<div class="qrbody">
|
||||
<div id="receipt-qr"> </div>
|
||||
</div>
|
||||
|
||||
<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