Pmtservice component alpha version ready for testing

CHANGELOG.md

@@ -5,8 +5,6 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
-- First testing version of pmtservice for Xero accounting is running 
-
 ### Added
 
 - Added new service for Xero integration
@@ -20,6 +18,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Added
 
 - Convenience buttons on checkout for wallets that are not ZIP-321-compliant
+- PmtService Component first alpha version ready for testing
 
 ### Fixed
 

src/app/invoice/invoice.component.ts

@@ -66,6 +66,7 @@ export class InvoiceComponent implements OnInit {
 						logoHeight: 50,
 		        correctLevel: QRCode.CorrectLevel.H
 				});
+				this.error = false;
 			} else {
 				this.error = true;
 				this.codeString = 'Test';

src/app/pmtservice/pmtservice.component.css

@@ -22,3 +22,90 @@
     background: #ff5722;
 }
 
+.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;
+}
+
+.invoiceHdrTxt2 {
+	font-family: Spartan !important;
+	text-align: center; 
+	font-size:  16px;
+	font-weight: 400;
+}
+
+.invoiceHdrTxt3 {
+	font-family: Spartan !important;
+	text-align: center; 
+	font-size:  12px;
+	font-weight: 300;
+}
+
+.detailTitle1 {
+	border-top: solid 2px;
+	border-bottom: solid 2px;
+    border-color: navy;
+    text-align: left;
+}
+
+.detailTitle2 {
+	border-top: solid 2px;
+	border-bottom: solid 2px;
+    border-color: navy;
+    text-align: right;
+}
+
+.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;
+}

src/app/pmtservice/pmtservice.component.html

@@ -128,36 +128,100 @@
 			 <div style="height: 20px;">
 			</div>	
 		</div>	
-
+		<div class="invoiceDetail"
-		<div *ngIf="reportType==0">
+			 *ngIf="reportType==0" 
-		    <div style="height: 50px;">
+			 id="invoice">
+			<div class="invoiceHdrTxt1">Invoice</div>
+			<div class="invoiceHdrTxt2">Order ID: {{orderId}}</div>
+			<div class="invoiceHdrTxt3">Date:{{order.timestamp | date}}
 			</div>
-			<div style="font-weight: 700;
+				<div style="height: 10px;"></div>
-			 		font-size: 25px;
+				<div class="zecData">Zcash Price: {{order.price | number: '1.02' | currency: order.currency.toUpperCase()}}</div>
+				<div style="height: 2px;"></div>
+				<div class="zecData">Total: <img class="zecSign" src="/assets/zec_rv.png" />{{order.totalZec | number: '1.08'}}
+				</div>
+			<div>
+				<div style="height: 10px;"></div>
+				<table style="width: 100%;" 
+				       cellspacing="0">
+				    <tr class="invoice-title">
+						<th width="55%"
+							class="detailTitle1">
+							Item
+						</th>
+						<th width="15%"
+							class="detailTitle1">
+							Qty.
+						</th>
+						<th width="30%"
+							class="detailTitle2">
+							Price ({{order.currency.toUpperCase()}}) 
+						</th>
+					</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>
+				    <tr class="invoice-title">
+						<th width="55%"
+						    class="detailLineRight">
+							Invoice Total:
+						</th>
+						<th width="15%"
+						    class="detailLineLeft">
+
+						</th>
+						<th width="30%"
+						    class="detailLineRight">
+						   {{ order.total |  currency: order.currency.toUpperCase()}} 
+						</th>
+				    </tr>
+				</table>
+				<div style="height: 15px;"></div>
+				<table>
+					<tr>
+						<td width="75%"
+						    style="font-size: 20px;
+								   font-weight: 700;
+								   font-style: italic;
 								   text-align: center;">		
-			 Invoice Goes here!!!
+							<p *ngIf="order.paid">
+								<fa-icon [icon]="faCheck" 
+								         color="primary"></fa-icon>&nbsp;Payment confirmed</p>
+							<p *ngIf="!order.paid">
+								<fa-icon [style]="getIconStyle(order)"
+										 [icon]="faHourglass"></fa-icon>&nbsp;Payment pending!!</p>
+						</td>
+						<td width="25%">		
+							<div style="text-align: right;" 
+								 id="payment-qr" 
+								 *ngIf="!order.paid"></div>
+						</td>
+					</tr>
+				</table>	
+				<div style="height: 15px;"></div>
+				<div width="100%"
+						    style="font-size: 14px;
+								   font-weight: 700;
+								   font-style: italic;
+								   text-align: center;">		
+							Scan the QR code with your wallet to make payment
 				</div>	
-			 <div style="height: 40px;">
+
-			</div>	
-			Payment request was not processed!!
-			 <div style="height: 20px;">
 			</div>
 		</div>
 
-<!--		
-		<p>Owner      = {{ pmtData.ownerId }}</p>
-		<p>Owner ID   = xxxx</p>
-		<p>Type       = {{ inv_Type }}</p>
-		<p>Invoice ID = {{ inv_Id }}</p> 
-		<p>Invoice No = {{ inv_No }}</p>
-		<p>Contact    = {{ inv_Contact }}</p>
-		<p>Currency   = {{ inv_Currency }}</p>
-		<p>Total      = {{ inv_Total }}</p> 
-		<p>Date	      = {{ inv_Date }}</p>
-		<p>Status     = {{ inv_Status }}</p>
-		<p>Short Code = {{ invData.inv_shortCode }}</p>
-		<p>Process Date = {{ invData.inv_ProcDate }}</p>
--->
 
 	</div>
 </div>

src/app/pmtservice/pmtservice.component.ts

@@ -4,13 +4,15 @@ import { HttpClient, HttpParams, HttpHeaders } from "@angular/common/http";
 import { PmtData } from "./pmtservice.model";
 import { XeroInvoice } from "./xeroinvoice.model";
 import { Owner } from '../owner.model';
-import { Item } from '../items/item.model'
+// import { Item } from '../items/item.model'
 import { Order } from '../order/order.model'
 import { ConfigData } from '../configdata';
+import { faCheck, faHourglass } from '@fortawesome/free-solid-svg-icons';
 
+var QRCode = require('easyqrcodejs');
+var URLSafeBase64 = require('urlsafe-base64');
 var Buffer = require('buffer/').Buffer;
 
-
 @Component({
   selector: 'app-pmtservice',
   templateUrl: './pmtservice.component.html',
@@ -19,6 +21,9 @@ var Buffer = require('buffer/').Buffer;
 
 export class PmtserviceComponent implements OnInit {
 
+  faCheck = faCheck;
+  faHourglass = faHourglass;
+
   beUrl = ConfigData.Be_URL;
   private reqHeaders: HttpHeaders = new HttpHeaders();
 
@@ -45,6 +50,7 @@ export class PmtserviceComponent implements OnInit {
   };
 
   public owner: Owner = {
+         _id: '',
          address: '',
          name: '',
          currency: 'usd',
@@ -69,12 +75,41 @@ export class PmtserviceComponent implements OnInit {
          payconf: false,
          viewkey: ''
       }; 
+
+public order: Order = {
+         _id : '',
+         address: '',
+         session: '',
+         timestamp: '',
+         closed: false,
+         currency: '',
+         price: 0,
+         total: 0,
+         totalZec: 0,
+         paid: false,
+         externalInvoice: '',
+         shortCode: '',
+         lines: [
+            {
+               qty: 1,
+               name: '',
+               cost:0
+            }
+         ]
+      };
+
  private invData_raw : string = '';
  private invData_buff : any = null;
 
- public reportType = 0;
+ public reportType = 1000;
  public Status = 0;
 
+ zPrice: number = 1.0;
+ name: string = '';
+ error: boolean = false;
+ codeString: string = 'Test';
+ orderId : string = '';
+
   constructor(private activatedRoute : ActivatedRoute,
               private http : HttpClient ) {}
 
@@ -87,7 +122,7 @@ export class PmtserviceComponent implements OnInit {
       this.pmtData.amount = params["amount"];
       this.pmtData.currency = params["currency"];
       this.pmtData.shortcode = params["shortCode"];
-      console.log(this.pmtData);
+//      console.log(this.pmtData);
 
       this.getInvoiceData( this.pmtData );
 
@@ -101,7 +136,8 @@ export class PmtserviceComponent implements OnInit {
     // Verify owner id ( Status = 1 if not exists )
     //                 ( Status = 2 if service not available for user )
     //
-    console.log('getOwner -> ', reqData.ownerId);
+//    console.log('getOwner -> '+ reqData.ownerId);
+//    console.log('received amount -> ' + reqData.amount);
     const ownParams = new HttpParams().append('id', reqData.ownerId);
     let obs = this.http.get<{message:string, owner: any}>
                             ( this.beUrl+'api/ownerid', 
@@ -117,11 +153,6 @@ export class PmtserviceComponent implements OnInit {
 // ==> remove "== false" for production enviroment
 // 
             if ( this.owner.payconf == false) {
-               // verifiy if an order for requested invoice 
-               // already exist, If exists, delete it and create
-               // a new one if it has not been paid in ZGo
-               // otherwise report payment
-
                // process data
                console.log("Owner check passed!!!");
                this.getXeroInvoiceData( reqData );
@@ -140,26 +171,49 @@ export class PmtserviceComponent implements OnInit {
 
   getXeroInvoiceData( reqData : PmtData  )  { 
 
-    // Call Xero API 
+/*
+    // Call test Xero API 
     let url : string = "http://localhost:3000/xero/" + reqData.invoice;
     this.http
          .get<any>(url)
-         .subscribe( data => {
+*/
-               console.log('Data >>> ' + data);
+   console.log('>> find current zcash price');
-               this.invData_raw = data.message.replaceAll("'",'"');
+   this.getPrice(this.owner.currency);
-               this.invData_buff = JSON.parse(this.invData_raw);
+
-               console.log('Invoice : >> ' + this.invData_raw);
+    console.log('get Invoice -> ' + reqData.invoice);
-               this.invData.inv_Type = this.invData_buff.type;
+    let invParams = new HttpParams();
-               this.invData.inv_Id = this.invData_buff.invoiceID;
+    invParams = invParams.append('address', this.owner.address);
-               this.invData.inv_No = this.invData_buff.invoiceNumber;
+    invParams = invParams.append('inv', reqData.invoice);
-               this.invData.inv_Contact = this.invData_buff.contact.name;
+    let inv = this.http.get<{message:string, invData: any}>
-               this.invData.inv_Currency = this.invData_buff.currencyCode;
+                            ( this.beUrl+'api/invdata', 
-               this.invData.inv_CurrencyRate = this.invData_buff.currencyRate;
+                            { headers: this.reqHeaders,
-               this.invData.inv_Total = this.invData_buff.total;
+                              params: invParams, 
-               this.invData.inv_Status = this.invData_buff.status;
+                              observe: 'response'});
-               this.invData.inv_Date = new Date(this.invData_buff.date);
+    inv.subscribe( invDataResponse => {
+//                  console.log('Response from ZGo-Xero');
+//                  console.log(invDataResponse.status);
+                  this.invData_buff = invDataResponse.body;
+                  this.invData.inv_Type = this.invData_buff.invdata.inv_Type;
+                  this.invData.inv_Id = this.invData_buff.invdata.inv_Id;
+                  this.invData.inv_No = this.invData_buff.invdata.inv_No;
+                  this.invData.inv_Contact = this.invData_buff.invdata.inv_Contact;
+                  this.invData.inv_Currency = this.invData_buff.invdata.inv_Currency;
+                  this.invData.inv_CurrencyRate = this.invData_buff.invdata.inv_CurrencyRate;
+                  this.invData.inv_Total = this.invData_buff.invdata.inv_Total;
+                  this.invData.inv_Status = this.invData_buff.invdata.inv_Status;
+                  this.invData.inv_Date = this.invData_buff.invdata.inv_Date;
                   this.invData.inv_shortCode = reqData.shortcode;
-               // invoice number found, test if it's type is correct
+ /*              
+                  console.log('>>> inv_Type -> ' + this.invData.inv_Type);
+                  console.log('>>> inv_Id -> ' + this.invData.inv_Id);
+                  console.log('>>> inv_No -> ' + this.invData.inv_No);
+                  console.log('>>> inv_Contact -> ' + this.invData.inv_Contact);
+                  console.log('>>> inv_Currency-> ' + this.invData.inv_Currency);
+                  console.log('>>> inv_CurrencyRate -> ' + this.invData.inv_CurrencyRate);
+                  console.log('>>> inv_Total -> ' + this.invData.inv_Total);
+                  console.log('>>> inv_Status-> ' + this.invData.inv_Status);
+                  console.log('>>> inv_Date -> ' + this.invData.inv_Date);
+*/
                   if ( this.invData.inv_Type == 'ACCREC' ) {
                      console.log('Invoice type is correct!!');
                      // Test if invoice is not already paid
@@ -171,9 +225,9 @@ export class PmtserviceComponent implements OnInit {
                            // Test if requested amount is as reported by Xero
                            if ( this.invData.inv_Total == reqData.amount ) {
                               console.log('Invoice amount Ok - create Order');
-//
+     // =====> Create order here
-// =====> Create order here
+                              this.createOrder();
-//
+   //
                            } else {
                               console.log('Invoice amount does not match')
                               this.reportType = 8;
@@ -190,21 +244,86 @@ export class PmtserviceComponent implements OnInit {
                      console.log('Invoice type is invalid' );
                      this.reportType = 5;
                   }
-               // Save invData in database 
+               }, error => {
-          },
+                  console.log("Error while getting invData!!!");
-         error => {
+                  console.log(error);
-            if ( error.status == 404 ) {
-               this.reportType = 4;
-               console.log('Invoice not found (' + JSON.stringify(error) +')' );
-            } else {
-               this.reportType = 3;
-               console.log('Xero server inaccesible! (' + JSON.stringify(error) + ')');
-            }
-            return 2;
-        },
-         () => {
-            console.log("Request complete")
                });
   }
 
+
+  createOrder() {
+      this.reportType = 0;
+//      console.log('Starting order generation');
+//      console.log('>> find current zcash price');
+
+      this.order = {
+         _id: '',
+         address: this.owner.address,
+         session: 'Xero-' + this.owner._id,
+         currency: this.owner.currency,
+         timestamp: new Date(Date.now()).toISOString(),
+         closed: true,
+         totalZec: this.invData.inv_Total/this.zPrice,
+         price: this.zPrice,
+         total: this.invData.inv_Total,
+         paid: false,
+         externalInvoice: this.invData.inv_No,
+         shortCode: this.invData.inv_shortCode,
+         lines: [{qty: 1,
+                  name: 'Invoice from ' + this.owner.name + '[' + this.invData.inv_No + ']',
+                  cost: this.invData.inv_Total}]
+      };
+ 
+      let obs = this.http.post<{message: string, order: Order}>
+                (this.beUrl+'api/orderx', 
+                 {payload: this.order},
+                 { headers: this.reqHeaders }
+                );
+      obs.subscribe((orderData) => {
+//         console.log('Order created');
+
+//         console.log(orderData.order);
+         this.order = orderData.order
+         console.log('>> order -> ' + JSON.stringify(this.order));
+         this.orderId = String(this.order._id);
+
+//         console.log('Generating QRCode....')
+
+         this.codeString = `zcash:${this.order.address}?amount=${this.order.totalZec.toFixed(8)}&memo=${URLSafeBase64.encode(Buffer.from('ZGo Order::'.concat(this.orderId)))}`; 
+
+         var qrcode = new QRCode(document.getElementById("payment-qr"), {
+           text: this.codeString,
+               logo: "/assets/zcash.png",
+               width: 180,
+               height: 180,
+               logoWidth: 50,
+               logoHeight: 50,
+           correctLevel: QRCode.CorrectLevel.H
+         });
+
+      });
+   }
+
+   getIconStyle(order : Order) {
+      if( order.paid )
+        return "font-size: 14px; color: #72cc50; margin-bottom: -2px;";
+      return "color: #FB4F14; margin-bottom: -2px; cursor: pointer;";
+
+   }
+
+   getPrice(currency: string){
+      //var currency = 'usd';
+      const params = new HttpParams().append('currency', currency);
+      let obs = this.http.get<{message: string, price: any}>(this.beUrl+'api/price', { headers:this.reqHeaders, params: params, observe: 'response'});
+      obs.subscribe((PriceData) => {
+         if (PriceData.status == 200) {
+            this.zPrice = PriceData.body!.price.price;
+            console.log("price", this.zPrice);
+         } else {
+            console.log('No price found for currency', currency);
+            this.zPrice = 1.0;
+         }
+      });
+     return obs;
+   }
 }

src/app/pmtservice/url.txt

@@ -1 +1,3 @@
 http://localhost:4200/pmtservice?ownerid=62cca13f5530331e2a97c78e&invoiceNo=INV-0034&currency=USD&amount=753.95&shortCode=!w8T62
+
+https://test.zgo.cash/api/invdata?address=zs17faa6l5ma55s55exq9rnr32tu0wl8nmqg7xp3e6tz0m5ajn2a6yxlc09t03mqdmvyphavvf3sl8&inv=INV-0034

src/app/pmtservice/xeroinvoice.model.ts

@@ -1,13 +1,13 @@
 export interface XeroInvoice {
-    inv_Type : String;
+    inv_Type : string;
-    inv_Id : String;
+    inv_Id : string;
-    inv_No : String;
+    inv_No : string;
-    inv_Contact : String; 
+    inv_Contact : string; 
-    inv_Currency : String;
+    inv_Currency : string;
     inv_CurrencyRate : number;
     inv_Total : number;
-    inv_Status : String;
+    inv_Status : string;
     inv_Date : Date;
-    inv_shortCode : String;
+    inv_shortCode : string;
     inv_ProcDate : Date;
 }