Invoice form working with notifications added
This commit is contained in:
parent
8223e10a52
commit
a0b07d8315
7 changed files with 169 additions and 45 deletions
|
|
@ -13,6 +13,8 @@ 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-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.
|
||||
|
|
|
|||
|
|
@ -34,3 +34,19 @@ img.total{
|
|||
.small{
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.invoice {
|
||||
font-family: Roboto Mono !important;
|
||||
}
|
||||
|
||||
.invoice-title {
|
||||
font-size: 19px;
|
||||
font-weight: 700;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.invoice-detail {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,32 +10,46 @@
|
|||
<div align="center" *ngIf="!error" id="invoice">
|
||||
<mat-card>
|
||||
<mat-card-title>
|
||||
Total: <img class="total" src="/assets/spartan-zec.png" height="18px" />{{order.totalZec | number: '1.0-6'}}
|
||||
Total: <img class="total" src="/assets/zec_rv.png" height="18px" />{{order.totalZec | number: '1.08'}}
|
||||
</mat-card-title>
|
||||
<mat-card-subtitle>
|
||||
{{order.timestamp | date}}
|
||||
</mat-card-subtitle>
|
||||
<mat-card-content>
|
||||
<p class="small">Order ID: {{orderId}}</p>
|
||||
<p class="small">Zcash Price: {{order.price | currency: order.currency.toUpperCase()}}</p>
|
||||
<div align="center">
|
||||
<table>
|
||||
<tr>
|
||||
<th align="left">
|
||||
<p class="small">Zcash Price: {{order.price | number: '1.02' | currency: order.currency.toUpperCase()}}</p>
|
||||
<div class="invoice" align="center">
|
||||
<table style="width: 100%;"
|
||||
cellspacing="0">
|
||||
<tr class="invoice-title">
|
||||
<th width="55%"
|
||||
style="text-align: center;">
|
||||
Item
|
||||
</th>
|
||||
<th align="center">
|
||||
<th width="15%"
|
||||
style="text-align: center;">
|
||||
Qty.
|
||||
</th>
|
||||
<th align="right">
|
||||
<th width="30%"
|
||||
style="text-align: center;">
|
||||
Price ({{order.currency.toUpperCase()}})
|
||||
</th>
|
||||
</tr>
|
||||
<tr *ngFor="let item of order.lines">
|
||||
<td align="left">{{item.name}}</td>
|
||||
<td align="center">{{item.qty}}</td>
|
||||
<td align="right">{{(item.qty * item.cost) | currency: order.currency.toUpperCase()}} </td>
|
||||
<tr>
|
||||
<tr class="invoice-detail"
|
||||
*ngFor="let item of order.lines">
|
||||
<td width="55%"
|
||||
align="left">
|
||||
{{item.name}}
|
||||
</td>
|
||||
<td width="15%"
|
||||
align="center">
|
||||
{{item.qty}}
|
||||
</td>
|
||||
<td width="30%"
|
||||
align="right">
|
||||
{{( item.qty * item.cost ) | number : '1.02' | currency: order.currency.toUpperCase()}}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="qrcode" id="payment-qr" *ngIf="!order.paid"></div>
|
||||
<span *ngIf="order.paid"><fa-icon [icon]="faCheck" color="primary"></fa-icon>Payment confirmed</span>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
|
||||
.notifier {
|
||||
font-family: Spartan, sans-serif;
|
||||
font-family: Roboto, sans-serif;
|
||||
color: black;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
|
|
@ -21,11 +21,11 @@
|
|||
}
|
||||
|
||||
::ng-deep .mat-snack-bar-container.error {
|
||||
background: lightgray;
|
||||
color: black;
|
||||
background: antiquewhite;
|
||||
color: red;
|
||||
}
|
||||
|
||||
::ng-deep .mat-snack-bar-container.success {
|
||||
background: lightgray;
|
||||
background: whitesmoke;
|
||||
color: black;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,42 @@
|
|||
.text {
|
||||
font-family: 'Spartan', sans-serif;
|
||||
|
||||
::ng-deep .invoice {
|
||||
font-family: "Spartan";
|
||||
background: #ff5722;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
line-height: 20px;
|
||||
padding: 10px;
|
||||
|
||||
}
|
||||
|
||||
::ng-deep .invoice-content {
|
||||
font-family: Roboto mono;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.copy-button {
|
||||
color: dodgerblue;
|
||||
font-size: 20px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.urlLabel {
|
||||
font-family: "Spartan";
|
||||
font-size: 14px;
|
||||
color: dimgray;
|
||||
}
|
||||
|
||||
.urlDetail {
|
||||
font-family: "Spartan";
|
||||
font-size: 14px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.urlCopyBtn {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,25 +1,64 @@
|
|||
<div align="center" mat-dialog-title class="text">
|
||||
Send the invoice link to your client:
|
||||
</div>
|
||||
<div class="container" style="margin-top: 10px;">
|
||||
|
||||
<mat-dialog-content class="text">
|
||||
{{invoiceUrl}} <button mat-raised-button (click)="copyUrl()"><mat-icon class="icon">content_copy</mat-icon></button>
|
||||
</mat-dialog-content>
|
||||
<div class="invoice" >
|
||||
Send the invoice link to your client:
|
||||
</div>
|
||||
|
||||
<table style="width:100%;
|
||||
margin-top: 10px;">
|
||||
<thead style="width: 100%;">
|
||||
<tr>
|
||||
<th class="urlLabel"
|
||||
style="text-align: left;"
|
||||
width="94%">Invoice URL:
|
||||
</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<td class="urlDetail"
|
||||
style="text-align: left;"
|
||||
width="94%">
|
||||
<div>
|
||||
<textarea
|
||||
style="border: none;
|
||||
outline: none;
|
||||
width: 95%;"
|
||||
cdkTextareaAutosize
|
||||
cdkAutosizeMinRows="1"
|
||||
cdkAutosizeMaxRows="4">{{ invoiceUrl }}
|
||||
</textarea>
|
||||
</div>
|
||||
|
||||
<mat-dialog-actions>
|
||||
<table cellspacing="0" width="100%">
|
||||
<tr>
|
||||
<td>
|
||||
<button mat-raised-button class="text" color="primary" (click)="confirm()">
|
||||
<mat-icon class="icon">verified_user</mat-icon>Sent!
|
||||
</button>
|
||||
</td>
|
||||
<td align="right">
|
||||
<button mat-raised-button class="text" (click)="close()">
|
||||
<mat-icon class="icon">close</mat-icon>Cancel
|
||||
</button>
|
||||
<td class="urlCopyBtn">
|
||||
<a (click)='copyUrl()' >
|
||||
<fa-icon [icon]="faCopy"
|
||||
class="copy-button">
|
||||
</fa-icon>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</mat-dialog-actions>
|
||||
<mat-dialog-actions>
|
||||
<table cellspacing="0" width="100%">
|
||||
<tr>
|
||||
<td>
|
||||
<button mat-raised-button
|
||||
class="text"
|
||||
color="primary" (click)="confirm()">
|
||||
<mat-icon class="icon">verified_user</mat-icon>Sent!
|
||||
</button>
|
||||
</td>
|
||||
<td align="right">
|
||||
<button mat-raised-button class="text" (click)="close()">
|
||||
<mat-icon class="icon">close</mat-icon>Cancel
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</mat-dialog-actions>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
import { Inject, Component, OnInit} from '@angular/core';
|
||||
import { MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
|
||||
|
||||
import { NotifierService } from '../notifier.service';
|
||||
import { faCopy } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
var URLSafeBase64 = require('urlsafe-base64');
|
||||
var Buffer = require('buffer/').Buffer;
|
||||
|
||||
|
|
@ -9,14 +12,20 @@ var Buffer = require('buffer/').Buffer;
|
|||
templateUrl: './prompt-invoice.component.html',
|
||||
styleUrls: ['./prompt-invoice.component.css']
|
||||
})
|
||||
|
||||
export class PromptInvoiceComponent implements OnInit {
|
||||
orderId: string;
|
||||
invoiceUrl: string;
|
||||
|
||||
// ------------------------------------
|
||||
//
|
||||
faCopy = faCopy;
|
||||
// ------------------------------------
|
||||
|
||||
constructor(
|
||||
private dialogRef: MatDialogRef<PromptInvoiceComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data: {orderId: string}
|
||||
) {
|
||||
private dialogRef: MatDialogRef<PromptInvoiceComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data: {orderId: string},
|
||||
private notifierService : NotifierService ) {
|
||||
this.orderId = data.orderId;
|
||||
this.invoiceUrl = 'https://app.zgo.cash/invoice/'+this.orderId;
|
||||
}
|
||||
|
|
@ -34,13 +43,18 @@ export class PromptInvoiceComponent implements OnInit {
|
|||
}
|
||||
|
||||
copyUrl() {
|
||||
if (!navigator.clipboard) {
|
||||
alert("Copy functionality not supported");
|
||||
}
|
||||
// console.log("Inside copyUrl()");
|
||||
if (navigator.clipboard) {
|
||||
};
|
||||
try {
|
||||
navigator.clipboard.writeText(this.invoiceUrl);
|
||||
this.notifierService
|
||||
.showNotification("Invoice's URL copied to Clipboard!!","Close",'success');
|
||||
|
||||
} catch (err) {
|
||||
console.error("Error", err);
|
||||
// console.error("Error", err);
|
||||
this.notifierService
|
||||
.showNotification("Functionality not available for your browser. Use send button instead.","Close",'error');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue