Pmtservice component alpha version ready for testing
This commit is contained in:
parent
ebd62fc176
commit
152bddca3b
7 changed files with 377 additions and 105 deletions
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -128,36 +128,100 @@
|
|||
<div style="height: 20px;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="reportType==0">
|
||||
<div style="height: 50px;">
|
||||
<div class="invoiceDetail"
|
||||
*ngIf="reportType==0"
|
||||
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;
|
||||
font-size: 25px;
|
||||
<div style="height: 10px;"></div>
|
||||
<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> Payment confirmed</p>
|
||||
<p *ngIf="!order.paid">
|
||||
<fa-icon [style]="getIconStyle(order)"
|
||||
[icon]="faHourglass"></fa-icon> 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>
|
||||
|
|
@ -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);
|
||||
this.invData_raw = data.message.replaceAll("'",'"');
|
||||
this.invData_buff = JSON.parse(this.invData_raw);
|
||||
console.log('Invoice : >> ' + this.invData_raw);
|
||||
this.invData.inv_Type = this.invData_buff.type;
|
||||
this.invData.inv_Id = this.invData_buff.invoiceID;
|
||||
this.invData.inv_No = this.invData_buff.invoiceNumber;
|
||||
this.invData.inv_Contact = this.invData_buff.contact.name;
|
||||
this.invData.inv_Currency = this.invData_buff.currencyCode;
|
||||
this.invData.inv_CurrencyRate = this.invData_buff.currencyRate;
|
||||
this.invData.inv_Total = this.invData_buff.total;
|
||||
this.invData.inv_Status = this.invData_buff.status;
|
||||
this.invData.inv_Date = new Date(this.invData_buff.date);
|
||||
*/
|
||||
console.log('>> find current zcash price');
|
||||
this.getPrice(this.owner.currency);
|
||||
|
||||
console.log('get Invoice -> ' + reqData.invoice);
|
||||
let invParams = new HttpParams();
|
||||
invParams = invParams.append('address', this.owner.address);
|
||||
invParams = invParams.append('inv', reqData.invoice);
|
||||
let inv = this.http.get<{message:string, invData: any}>
|
||||
( this.beUrl+'api/invdata',
|
||||
{ headers: this.reqHeaders,
|
||||
params: invParams,
|
||||
observe: 'response'});
|
||||
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 => {
|
||||
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")
|
||||
}, error => {
|
||||
console.log("Error while getting invData!!!");
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +1,3 @@
|
|||
http://localhost:4200/pmtservice?ownerid=62cca13f5530331e2a97c78e&invoiceNo=INV-0034¤cy=USD&amount=753.95&shortCode=!w8T62
|
||||
|
||||
https://test.zgo.cash/api/invdata?address=zs17faa6l5ma55s55exq9rnr32tu0wl8nmqg7xp3e6tz0m5ajn2a6yxlc09t03mqdmvyphavvf3sl8&inv=INV-0034
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
export interface XeroInvoice {
|
||||
inv_Type : String;
|
||||
inv_Id : String;
|
||||
inv_No : String;
|
||||
inv_Contact : String;
|
||||
inv_Currency : String;
|
||||
inv_Type : string;
|
||||
inv_Id : string;
|
||||
inv_No : string;
|
||||
inv_Contact : 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;
|
||||
}
|
||||
Loading…
Reference in a new issue