Invoice form working with notifications added

CHANGELOG.md

@@ -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.

src/app/invoice/invoice.component.css

@@ -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;
+}
+

src/app/invoice/invoice.component.html

@@ -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>
+		<p class="small">Zcash Price: {{order.price | number: '1.02' | currency: order.currency.toUpperCase()}}</p>
-		<div align="center">
+		<div class="invoice" align="center">
-			<table>
+			<table style="width: 100%;" 
-				<tr>
+			       cellspacing="0">
-					<th align="left">
+			    <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">
+				<tr class="invoice-detail" 
-					<td align="left">{{item.name}}</td>
+				    *ngFor="let item of order.lines">
-					<td align="center">{{item.qty}}</td>
+					<td width="55%" 
-					<td align="right">{{(item.qty * item.cost) | currency: order.currency.toUpperCase()}} </td>
+					    align="left">
-					<tr>
+					  {{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>

src/app/notifier/notifier.component.css

@@ -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;
+	background: antiquewhite;
-	color: black;
+	color: red;
 }
 
 ::ng-deep .mat-snack-bar-container.success {
-	background: lightgray;
+	background: whitesmoke;
 	color: black;
 }

src/app/prompt-invoice/prompt-invoice.component.css

@@ -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;
+}
+

src/app/prompt-invoice/prompt-invoice.component.html

@@ -1,16 +1,54 @@
-<div align="center" mat-dialog-title class="text">
+<div class="container" style="margin-top: 10px;">
+
+	<div class="invoice" >
 		Send the invoice link to your client:
 	</div>
 
-<mat-dialog-content class="text">
+	<table style="width:100%;
-	{{invoiceUrl}} <button mat-raised-button (click)="copyUrl()"><mat-icon class="icon">content_copy</mat-icon></button>
+				  margin-top: 10px;">
-</mat-dialog-content>
+		<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>
+
+			</td>
+			<td class="urlCopyBtn">
+		        <a (click)='copyUrl()' >	
+				   <fa-icon [icon]="faCopy" 
+				            class="copy-button">
+				   </fa-icon>
+			   </a>
+			</td>
+			
+		</tbody>
+	</table>
 
 	<mat-dialog-actions>
 		<table cellspacing="0" width="100%">
 			<tr>
 				<td>
-				<button mat-raised-button class="text" color="primary" (click)="confirm()">
+					<button mat-raised-button 
+							class="text" 
+							color="primary" (click)="confirm()">
 						<mat-icon class="icon">verified_user</mat-icon>Sent!
 					</button>
 				</td>
@@ -23,3 +61,4 @@
 		</table>
 
 	</mat-dialog-actions>
+</div>

src/app/prompt-invoice/prompt-invoice.component.ts

@@ -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}
+			@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) {
+//		console.log("Inside copyUrl()");
-			alert("Copy functionality not supported");
+		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');
 		}
 	}
 }