From 796c39bec235784f78eee0896676ac21c76ae6dd Mon Sep 17 00:00:00 2001
From: Rene Vergara <rene@vergara.network>
Date: Mon, 23 May 2022 15:52:55 -0500
Subject: [PATCH] Add invoicing functionality for orders

---
 src/app/app.module.ts                         |  4 +-
 src/app/order/order.component.html            |  3 ++
 src/app/order/order.component.ts              | 27 ++++++++++-
 .../prompt-invoice.component.css              |  3 ++
 .../prompt-invoice.component.html             | 25 ++++++++++
 .../prompt-invoice.component.spec.ts          | 25 ++++++++++
 .../prompt-invoice.component.ts               | 46 +++++++++++++++++++
 7 files changed, 130 insertions(+), 3 deletions(-)
 create mode 100644 src/app/prompt-invoice/prompt-invoice.component.css
 create mode 100644 src/app/prompt-invoice/prompt-invoice.component.html
 create mode 100644 src/app/prompt-invoice/prompt-invoice.component.spec.ts
 create mode 100644 src/app/prompt-invoice/prompt-invoice.component.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 0b524b7..c9be349 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -40,6 +40,7 @@ import { ReceiptComponent } from './receipt/receipt.component';
 import { ReceiptQRComponent } from './receipt-qr/receipt-qr.component';
 import { InvoiceComponent } from './invoice/invoice.component';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { PromptInvoiceComponent } from './prompt-invoice/prompt-invoice.component';
 
 @NgModule({
   declarations: [
@@ -62,7 +63,8 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 	TermsComponent,
  ReceiptComponent,
  ReceiptQRComponent,
- InvoiceComponent
+ InvoiceComponent,
+ PromptInvoiceComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/order/order.component.html b/src/app/order/order.component.html
index 8bb1a87..b330646 100644
--- a/src/app/order/order.component.html
+++ b/src/app/order/order.component.html
@@ -31,6 +31,9 @@
 				<td>
 					<button mat-raised-button class="text" (click)="cancelOrder()">Cancel</button>
 				</td>
+				<td>
+					<button mat-raised-button class="text" (click)="invoice()"><fa-icon [icon]="faInvoice" size="2x"></fa-icon> Invoice</button>
+				</td>
 				<td align="right">
 					<button mat-raised-button class="text" color="primary" (click)="checkout()">Checkout</button>
 				</td>
diff --git a/src/app/order/order.component.ts b/src/app/order/order.component.ts
index 69ce473..25b0c42 100644
--- a/src/app/order/order.component.ts
+++ b/src/app/order/order.component.ts
@@ -3,11 +3,12 @@ import { MatDialog, MatDialogConfig} from '@angular/material/dialog';
 import { Observable } from 'rxjs';
 import { Order } from './order.model';
 import { FullnodeService } from '../fullnode.service';
-import { UserService } from '../user.service';
 import { OrderService } from './order.service';
 import { CancelComponent } from '../cancel/cancel.component';
 import { CheckoutComponent} from '../checkout/checkout.component';
+import { PromptInvoiceComponent } from '../prompt-invoice/prompt-invoice.component';
 import { ReceiptQRComponent} from '../receipt-qr/receipt-qr.component';
+import { faFileInvoiceDollar } from '@fortawesome/free-solid-svg-icons';
 
 @Component({
 	selector: 'app-order',
@@ -16,6 +17,7 @@ import { ReceiptQRComponent} from '../receipt-qr/receipt-qr.component';
 })
 
 export class OrderComponent implements OnInit{
+	faInvoice = faFileInvoiceDollar;
 	public order: Order = {
 		address: '',
 		session: '',
@@ -84,7 +86,7 @@ export class OrderComponent implements OnInit{
 
 	checkout() {
 		var zec = this.total/this.price;
-		this.order.totalZec = parseFloat(zec.toFixed(6));
+		this.order.totalZec = parseFloat(zec.toFixed(8));
 		const dialogConfig = new MatDialogConfig();
 		
 		dialogConfig.disableClose = true;
@@ -118,6 +120,27 @@ export class OrderComponent implements OnInit{
 		});
 	}
 
+	invoice() {
+		var zec = this.total/this.price;
+		this.order.totalZec = parseFloat(zec.toFixed(8));
+		const dialogConfig = new MatDialogConfig();
+		
+		dialogConfig.disableClose = true;
+		dialogConfig.autoFocus = true;
+		dialogConfig.data = {
+			orderId: this.order._id
+		};
+
+		const dialogRef = this.dialog.open(PromptInvoiceComponent, dialogConfig);
+		dialogRef.afterClosed().subscribe((val) => {
+			if (val) {
+				this.orderService.closeOrder();
+			} else {
+				console.log('Returning to order');
+			}
+		});
+	}
+
 	getCurrency(){
 		return this.order.currency.toUpperCase();
 	}
diff --git a/src/app/prompt-invoice/prompt-invoice.component.css b/src/app/prompt-invoice/prompt-invoice.component.css
new file mode 100644
index 0000000..0b79f36
--- /dev/null
+++ b/src/app/prompt-invoice/prompt-invoice.component.css
@@ -0,0 +1,3 @@
+.text {
+	font-family: 'Spartan', sans-serif;
+}
diff --git a/src/app/prompt-invoice/prompt-invoice.component.html b/src/app/prompt-invoice/prompt-invoice.component.html
new file mode 100644
index 0000000..598d131
--- /dev/null
+++ b/src/app/prompt-invoice/prompt-invoice.component.html
@@ -0,0 +1,25 @@
+<div align="center" mat-dialog-title class="text">
+	Send the invoice link to your client:
+</div>
+
+<mat-dialog-content class="text">
+	{{invoiceUrl}} <button mat-raised-button (click)="copyUrl()"><mat-icon class="icon">content_copy</mat-icon></button>
+</mat-dialog-content>
+
+<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>
diff --git a/src/app/prompt-invoice/prompt-invoice.component.spec.ts b/src/app/prompt-invoice/prompt-invoice.component.spec.ts
new file mode 100644
index 0000000..86c2b37
--- /dev/null
+++ b/src/app/prompt-invoice/prompt-invoice.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PromptInvoiceComponent } from './prompt-invoice.component';
+
+describe('PromptInvoiceComponent', () => {
+  let component: PromptInvoiceComponent;
+  let fixture: ComponentFixture<PromptInvoiceComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PromptInvoiceComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PromptInvoiceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/prompt-invoice/prompt-invoice.component.ts b/src/app/prompt-invoice/prompt-invoice.component.ts
new file mode 100644
index 0000000..447f047
--- /dev/null
+++ b/src/app/prompt-invoice/prompt-invoice.component.ts
@@ -0,0 +1,46 @@
+import { Inject, Component, OnInit} from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
+
+var URLSafeBase64 = require('urlsafe-base64');
+var Buffer = require('buffer/').Buffer;
+
+@Component({
+  selector: 'app-prompt-invoice',
+  templateUrl: './prompt-invoice.component.html',
+  styleUrls: ['./prompt-invoice.component.css']
+})
+export class PromptInvoiceComponent implements OnInit {
+	orderId: string;
+	invoiceUrl: string;
+
+	constructor(
+		private dialogRef: MatDialogRef<PromptInvoiceComponent>,
+		@Inject(MAT_DIALOG_DATA) public data: {orderId: string}
+	) {
+		this.orderId = data.orderId;
+		this.invoiceUrl = 'https://app.zgo.cash/invoice/'+this.orderId;
+	}
+
+	ngOnInit(): void {
+	}
+
+
+	confirm() {
+		this.dialogRef.close(true);
+	}
+
+	close() {
+		this.dialogRef.close(false);
+	}
+
+	copyUrl() {
+		if (!navigator.clipboard) {
+			alert("Copy functionality not supported");
+		}
+		try {
+			navigator.clipboard.writeText(this.invoiceUrl);
+		} catch (err) {
+			console.error("Error", err);
+		}
+	}
+}