+
+
-
-
Zcash Price: {{order.price | number: '1.02' | currency: order.currency.toUpperCase()}}
-
-
Total:
{{order.totalZec | number: '1.08'}}
+
+
Invoice
+
Order ID: {{orderId}}
+
Date:{{order.timestamp | date}}
-
-
-
-
-
- Item
-
-
- Qty.
-
-
- Price ({{order.currency.toUpperCase()}})
-
-
-
-
- {{item.name}}
-
-
- {{item.qty}}
-
-
- {{( item.qty * item.cost ) | number : '1.02' | currency: order.currency.toUpperCase()}}
-
-
-
-
- Invoice Total:
-
-
+
+ Zcash Price: {{order.price | number: '1.02' | currency: order.currency.toUpperCase()}}
+
+ Total:
{{order.totalZec | number: '1.08'}}
+
+
+
+
+
+ Item
+
+
+ Qty.
+
+
+ Price ({{order.currency.toUpperCase()}})
+
+
+
+
+ {{item.name}}
+
+
+ {{item.qty}}
+
+
+ {{( item.qty * item.cost ) | number : '1.02' | currency: order.currency.toUpperCase()}}
+
+
+
+
+ Invoice Total:
+
+
-
-
- {{ order.total | number : '1.02' | currency: order.currency.toUpperCase()}}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ {{ order.total | currency: order.currency.toUpperCase()}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
- Incorrect Invoice ID.
-
-
- No information available.
-
-
-
-
- OK
-
+
+
+
+
+
+ Incorrect Invoice ID.
+
+
+ No information available.
+
+
+
+
+ OK
+
+
+
+
\ No newline at end of file
diff --git a/src/app/listorders/listorders.component.html b/src/app/listorders/listorders.component.html
index a065f6e..9440561 100644
--- a/src/app/listorders/listorders.component.html
+++ b/src/app/listorders/listorders.component.html
@@ -122,6 +122,20 @@
+
+ Invoice
+
+ Receipt
+
No orders
diff --git a/src/app/listorders/listorders.component.ts b/src/app/listorders/listorders.component.ts
index 9ad26f8..4996cdc 100644
--- a/src/app/listorders/listorders.component.ts
+++ b/src/app/listorders/listorders.component.ts
@@ -3,9 +3,13 @@ import { Observable } from 'rxjs';
import { Order } from '../order/order.model';
import { FullnodeService } from '../fullnode.service';
import { UserService } from '../user.service';
-import {Owner} from '../owner.model';
+import { Owner } from '../owner.model';
import { OrderService } from '../order/order.service';
+import { MatDialog, MatDialogConfig} from '@angular/material/dialog';
+import { PromptInvoiceComponent } from '../prompt-invoice/prompt-invoice.component';
+import { PromptReceiptComponent } from '../prompt-receipt/prompt-receipt.component';
+
import { faTimes } from '@fortawesome/free-solid-svg-icons';
import { faTimesCircle } from '@fortawesome/free-solid-svg-icons';
import { faCheck } from '@fortawesome/free-solid-svg-icons';
@@ -20,12 +24,14 @@ import { faTrash } from '@fortawesome/free-solid-svg-icons';
})
export class ListOrdersComponent implements OnInit, OnDestroy{
+// orderId;
public todayTotal: number = 0;
public total: number = 0;
public orders: Order[] = [];
public ownerUpdate: Observable
;
public ordersUpdate: Observable;
+
// ------------------------------------
//
faTimes = faTimes;
@@ -40,8 +46,9 @@ export class ListOrdersComponent implements OnInit, OnDestroy{
constructor(
public orderService: OrderService,
- public userService: UserService
- ){
+ public userService: UserService,
+ private dialog: MatDialog)
+ {
this.ownerUpdate = userService.ownerUpdate;
this.orderService.getAllOrders();
this.ordersUpdate = orderService.allOrdersUpdate;
@@ -83,4 +90,46 @@ export class ListOrdersComponent implements OnInit, OnDestroy{
}
+ invoice(order : Order) {
+// var zec = this.total/this.price;
+// this.order.totalZec = parseFloat(zec.toFixed(8));
+ const dialogConfig = new MatDialogConfig();
+
+ console.log("Order data:");
+ console.log(order);
+ console.log("order.total = " + order.total);
+
+ dialogConfig.disableClose = true;
+ dialogConfig.autoFocus = true;
+ dialogConfig.data = {
+ orderId: order._id
+ };
+
+ const dialogRef = this.dialog.open(PromptInvoiceComponent, dialogConfig);
+ dialogRef.afterClosed().subscribe((val) => {
+ console.log('Returning to order list');
+ });
+ }
+
+ receipt(order : Order) {
+// var zec = this.total/this.price;
+// this.order.totalZec = parseFloat(zec.toFixed(8));
+ const dialogConfig = new MatDialogConfig();
+
+ console.log("Order data:");
+ console.log(order);
+ console.log("order.total = " + order.total);
+
+ dialogConfig.disableClose = true;
+ dialogConfig.autoFocus = true;
+ dialogConfig.data = {
+ orderId: order._id
+ };
+
+ const dialogRef = this.dialog.open(PromptReceiptComponent, dialogConfig);
+ dialogRef.afterClosed().subscribe((val) => {
+ console.log('Returning to order list');
+ });
+ }
+
}
diff --git a/src/app/prompt-receipt/prompt-receipt.component.css b/src/app/prompt-receipt/prompt-receipt.component.css
new file mode 100644
index 0000000..b3176b0
--- /dev/null
+++ b/src/app/prompt-receipt/prompt-receipt.component.css
@@ -0,0 +1,49 @@
+
+::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;
+}
+
+.qr-code{
+ border-radius: 0.5rem;
+ border-bottom-left-radius: 0.5rem;
+ border-bottom-right-radius: 0.5rem;
+}
+
+
diff --git a/src/app/prompt-receipt/prompt-receipt.component.html b/src/app/prompt-receipt/prompt-receipt.component.html
new file mode 100644
index 0000000..85304b6
--- /dev/null
+++ b/src/app/prompt-receipt/prompt-receipt.component.html
@@ -0,0 +1,57 @@
+
+
+
+ Send the receipt link to your client:
+
+
+
+
+
+ Receipt URL:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ close Close
+
+
+
+
+
+
+
;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ PromptReceiptComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(PromptReceiptComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/prompt-receipt/prompt-receipt.component.ts b/src/app/prompt-receipt/prompt-receipt.component.ts
new file mode 100644
index 0000000..8a2376e
--- /dev/null
+++ b/src/app/prompt-receipt/prompt-receipt.component.ts
@@ -0,0 +1,62 @@
+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;
+
+@Component({
+ selector: 'app-prompt-receipt',
+ templateUrl: './prompt-receipt.component.html',
+ styleUrls: ['./prompt-receipt.component.css']
+})
+
+export class PromptReceiptComponent implements OnInit {
+ orderId: string;
+ receiptUrl: string;
+
+ // ------------------------------------
+ //
+ faCopy = faCopy;
+ // ------------------------------------
+
+ constructor(
+ private dialogRef: MatDialogRef,
+ @Inject(MAT_DIALOG_DATA) public data: {orderId: string},
+ private notifierService : NotifierService ) {
+ this.orderId = data.orderId;
+ this.receiptUrl = 'https://app.zgo.cash/receipt/'+this.orderId;
+
+ }
+
+ ngOnInit(): void {
+ }
+
+
+ confirm() {
+ this.dialogRef.close(true);
+ }
+
+ close() {
+ this.dialogRef.close(false);
+ }
+
+ copyUrl() {
+// console.log("Inside copyUrl()");
+ if (navigator.clipboard) {
+ };
+ try {
+ navigator.clipboard.writeText(this.receiptUrl);
+ this.notifierService
+ .showNotification("Receipt's URL copied to Clipboard!!","Close",'success');
+
+ } catch (err) {
+// console.error("Error", err);
+ this.notifierService
+ .showNotification("Functionality not available for your browser. Use send button instead.","Close",'error');
+ }
+ }
+}
diff --git a/src/app/receipt/receipt.component.css b/src/app/receipt/receipt.component.css
index 150ba86..b59d68e 100644
--- a/src/app/receipt/receipt.component.css
+++ b/src/app/receipt/receipt.component.css
@@ -1,36 +1,112 @@
-* {
- font-family: 'Spartan', sans-serif;
+
+.invoice {
+ font-family: Roboto Mono !important;
}
-.spacer{
- flex: 1 1 auto;
+.zecSign {
+ margin-bottom: -4px;
+ font-size: 18px;
+ height: 18px;
}
-.mat-card{
- font-family: 'Spartan', sans-serif;
- border: 1px solid #FF7522;
- width: 80%;
- text-align: left;
- margin: 5px;
- max-width: 500px;
+
+.invoiceHeader {
+ display: flex;
+ font-family: Spartan;
+ font-weight: 700;
+ font-size: 26px;
+ color: white;
+ justify-content: space-between;
+ line-height: 40px;
+ padding: 10px;
+ vertical-align: center;
+ max-width: 600px;
+ background: #ff5722;
}
-.mat-card-title{
- font-size: 16px;
+
+.invoiceDetail {
+ font-family: Roboto Mono !important;
+ padding: 10px;
+ max-width: 600px;
+}
+
+.invoiceHdrTxt1 {
+ font-family: Spartan !important;
+ text-align: center;
+ font-size: 30px;
font-weight: 700;
}
-.mat-card-subtitle{
- font-size: 12px;
- font-weight: 200;
+
+.invoiceHdrTxt2 {
+ font-family: Spartan !important;
+ text-align: center;
+ font-size: 16px;
+ font-weight: 400;
}
-.mat-card-content{
- font-size: 14px;
- text-align: justify;
+
+.invoiceHdrTxt3 {
+ font-family: Spartan !important;
+ text-align: center;
+ font-size: 12px;
+ font-weight: 300;
}
-span.tt{
- font-family: 'Roboto-Mono', monospace;
+
+.detailTitle1 {
+ border-top: solid 2px;
+ border-bottom: solid 2px;
+ border-color: navy;
+ text-align: left;
}
-img.total{
- margin-bottom:-2px;
+
+.detailTitle2 {
+ border-top: solid 2px;
+ border-bottom: solid 2px;
+ border-color: navy;
+ text-align: right;
}
-.small{
- font-size: 10px;
+
+.detailLineRight {
+ border-top: solid 2px;
+ border-bottom: solid 2px;
+ border-color: navy;
+ text-align: right;
+}
+
+.detailLineLeft {
+ border-top: solid 2px;
+ border-bottom: solid 2px;
+ border-color: navy;
+ text-align: right;
+}
+
+.invoice-title {
+ font-size: 16px;
+ font-weight: 700;
+ background: lightcyan;
+ line-height: 30px;
+ padding: 5px;
+}
+
+.invoice-detail {
+ line-height: 20px;
+ font-size: 16px;
+ font-weight: 400;
+ padding-top: 4px;
+ padding-bottom: 4px;
+}
+
+.invoice-total {
+ margin-top: 40px;
+}
+
+.qrcode {
+ display: flex;
+ float: right;
+}
+
+.zecData {
+ width: auto;
+ font-family: Spartan !important;
+ font-size: 16px;
+ font-weight: 700;
+ text-align: right;
}
diff --git a/src/app/receipt/receipt.component.html b/src/app/receipt/receipt.component.html
index bf950f6..c6c0ff4 100644
--- a/src/app/receipt/receipt.component.html
+++ b/src/app/receipt/receipt.component.html
@@ -1,44 +1,95 @@
-
-
-
-
- {{name}}
-
-
-
-
-
- Total:
-
- {{order.timestamp | date}}
-
-
- Order ID: {{orderId}}
- Zcash Price: {{order.price | currency: order.currency.toUpperCase()}}
-
-
-
-
- Item
-
-
- Qty.
-
-
- Price ({{order.currency.toUpperCase()}})
-
-
-
- {{item.name}}
- {{item.qty}}
- {{(item.qty * item.cost) | currency: order.currency.toUpperCase()}}
-
-
+
+
+
+
+
Receipt
+
Order ID: {{orderId}}
+
Date:{{order.timestamp | date}}
+
+
+
Zcash Price: {{order.price | number: '1.02' | currency: order.currency.toUpperCase()}}
+
+
Total:
{{order.totalZec | number: '1.08'}}
+
+
+
+
+
+
+ Item
+
+
+ Qty.
+
+
+ Price ({{order.currency.toUpperCase()}})
+
+
+
+
+ {{item.name}}
+
+
+ {{item.qty}}
+
+
+ {{( item.qty * item.cost ) | number : '1.02' | currency: order.currency.toUpperCase()}}
+
+
+
+
+ Total:
+
+
+
+
+
+ {{ order.total | currency: order.currency.toUpperCase()}}
+
+
+
+
+
+
-
-
-
+
+
+
+ Incorrect Receipt ID.
+
+
+ No information available.
+
+
+
+
+ OK
+
+
+
+
+
;
public nameUpdate: Observable;
name: string = '';
+ error: boolean = false;
order:Order = {
address: '',
session: '',
- {{name}}
-
{{order.totalZec | number: '1.08'}}
+ 
{{order.totalZec | number: '1.0-6'}}
-