Compare commits
3 commits
04ae91b9b7
...
1f39c6f8f9
Author | SHA1 | Date | |
---|---|---|---|
1f39c6f8f9 | |||
14bb45cb95 | |||
75e83ac339 |
6 changed files with 277 additions and 91 deletions
|
@ -39,8 +39,8 @@
|
||||||
"budgets": [
|
"budgets": [
|
||||||
{
|
{
|
||||||
"type": "initial",
|
"type": "initial",
|
||||||
"maximumWarning": "500kb",
|
"maximumWarning": "5mb",
|
||||||
"maximumError": "1mb"
|
"maximumError": "10mb"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "anyComponentStyle",
|
"type": "anyComponentStyle",
|
||||||
|
|
|
@ -45,4 +45,15 @@
|
||||||
color: dodgerblue;
|
color: dodgerblue;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.small {
|
||||||
|
font-size: 12px;
|
||||||
|
background: #dddddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading {
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar {
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
|
@ -77,98 +77,147 @@
|
||||||
<mat-tab *ngIf="proVersion"
|
<mat-tab *ngIf="proVersion"
|
||||||
label="Integrations"
|
label="Integrations"
|
||||||
style="align-items: center;">
|
style="align-items: center;">
|
||||||
<div class="container" style="margin-bottom: 20px;">
|
<mat-tab-group mat-tab-align-tabs="start">
|
||||||
<mat-dialog-content [formGroup]="accCodForm">
|
<mat-tab label="Xero">
|
||||||
<div style="height: 10px;
|
<div class="container" style="margin-bottom: 20px;">
|
||||||
margin-top: 10px;">
|
<mat-dialog-content [formGroup]="accCodForm">
|
||||||
</div>
|
<div style="height: 10px;
|
||||||
<div class="container"
|
margin-top: 10px;">
|
||||||
style="height: 300;">
|
</div>
|
||||||
<p style="text-align:center">
|
<div class="container"
|
||||||
<a mat-raised-button
|
style="height: 300;">
|
||||||
color="primary"
|
<p style="text-align:center">
|
||||||
href="{{this.xeroLink}}">
|
<a mat-raised-button
|
||||||
{{ linkMsg }}
|
color="primary"
|
||||||
</a>
|
href="{{this.xeroLink}}">
|
||||||
</p>
|
{{ linkMsg }}
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
<table *ngIf="linked2Xero"
|
<table *ngIf="linked2Xero"
|
||||||
[style.width.%]="100"
|
[style.width.%]="100"
|
||||||
style="margin-top: 10px;">
|
style="margin-top: 10px;">
|
||||||
<thead style="width: 100%;">
|
<thead style="width: 100%;">
|
||||||
<tr>
|
<tr>
|
||||||
<th class="urlLabel"
|
<th class="urlLabel"
|
||||||
style="text-align: left;"
|
style="text-align: left;"
|
||||||
width="94%">Payment Service URL:
|
width="94%">Payment Service URL:
|
||||||
</th>
|
</th>
|
||||||
<th></th>
|
<th></th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<td class="urlDetail"
|
<td class="urlDetail"
|
||||||
style="text-align: left;"
|
style="text-align: left;"
|
||||||
width="94%">
|
width="94%">
|
||||||
<div>
|
<div>
|
||||||
<textarea disabled
|
<textarea disabled
|
||||||
style="font-size: 10px !important;
|
style="font-size: 10px !important;
|
||||||
border: none;
|
border: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
min-height: 150px;
|
min-height: 150px;
|
||||||
width: 95%;"
|
width: 95%;"
|
||||||
cdkTextareaAutosize
|
cdkTextareaAutosize
|
||||||
cdkAutosizeMinRows="6"
|
cdkAutosizeMinRows="6"
|
||||||
cdkAutosizeMaxRows="10">{{ pmtServiceURL }}
|
cdkAutosizeMaxRows="10">{{ pmtServiceURL }}
|
||||||
</textarea>
|
</textarea>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</td>
|
</td>
|
||||||
<td class="urlCopyBtn">
|
<td class="urlCopyBtn">
|
||||||
<a (click)='copyUrl()' >
|
<a (click)='copyUrl()' >
|
||||||
<fa-icon [icon]="faCopy"
|
<fa-icon [icon]="faCopy"
|
||||||
class="copy-button">
|
class="copy-button">
|
||||||
</fa-icon>
|
</fa-icon>
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<div style="height: 10px;
|
<div style="height: 10px;
|
||||||
margin-top: 10px;">
|
margin-top: 10px;">
|
||||||
</div>
|
</div>
|
||||||
<mat-form-field *ngIf="linked2Xero"
|
<mat-form-field *ngIf="linked2Xero"
|
||||||
class="settings-field"
|
class="settings-field"
|
||||||
[style.width.%]="100">
|
[style.width.%]="100">
|
||||||
<mat-label>Account Code</mat-label>
|
<mat-label>Account Code</mat-label>
|
||||||
<input matInput
|
<input matInput
|
||||||
width="100%"
|
width="100%"
|
||||||
placeholder="9999999999"
|
placeholder="9999999999"
|
||||||
formControlName="xAcc"
|
formControlName="xAcc"
|
||||||
(keyup)="checkStatus($event)">
|
(keyup)="checkStatus($event)">
|
||||||
<!--
|
</mat-form-field>
|
||||||
(change)="xeroAccCodChanged($event)">
|
|
||||||
-->
|
</div>
|
||||||
</mat-form-field>
|
</mat-dialog-content>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</mat-dialog-content>
|
<div class="container"
|
||||||
</div>
|
style="display: flex;
|
||||||
<div class="container"
|
justify-content: space-between;
|
||||||
style="display: flex;
|
align-items: center;">
|
||||||
justify-content: space-between;
|
<button mat-raised-button
|
||||||
align-items: center;">
|
(click)="closeIntegration()">
|
||||||
<button mat-raised-button
|
Close
|
||||||
(click)="closeIntegration()">
|
</button>
|
||||||
Close
|
<button *ngIf="saveAccOk"
|
||||||
</button>
|
mat-raised-button
|
||||||
<button *ngIf="saveAccOk"
|
color="primary"
|
||||||
mat-raised-button
|
(click)="saveAccCod()">
|
||||||
color="primary"
|
Save Code
|
||||||
(click)="saveAccCod()">
|
</button>
|
||||||
Save Code
|
</div>
|
||||||
</button>
|
<div style="height: 20px;
|
||||||
</div>
|
margin-top: 10px;">
|
||||||
<div style="height: 20px;
|
</div>
|
||||||
margin-top: 10px;">
|
</mat-tab>
|
||||||
</div>
|
<mat-tab label="WooCommerce">
|
||||||
|
<div *ngIf="wooOwner == ''">
|
||||||
|
<button mat-raised-button color="primary" (click)="generateWooToken()">
|
||||||
|
Generate Token
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<table *ngIf="wooOwner != ''">
|
||||||
|
<tr>
|
||||||
|
<td class="heading">Owner:</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="small">{{wooOwner}}</td>
|
||||||
|
<td class="urlCopyBtn">
|
||||||
|
<a (click)='copyWooOwner()' >
|
||||||
|
<fa-icon [icon]="faCopy"
|
||||||
|
class="copy-button">
|
||||||
|
</fa-icon>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="heading">Token:</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="small">{{wooToken}}</td>
|
||||||
|
<td class="urlCopyBtn">
|
||||||
|
<a (click)='copyWooToken()' >
|
||||||
|
<fa-icon [icon]="faCopy"
|
||||||
|
class="copy-button">
|
||||||
|
</fa-icon>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="heading">URL:</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="small">{{wooUrl}}</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
<div class="toolbar" align="center">
|
||||||
|
<button mat-raised-button
|
||||||
|
(click)="close()">
|
||||||
|
Close
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</mat-tab>
|
||||||
|
</mat-tab-group>
|
||||||
</mat-tab>
|
</mat-tab>
|
||||||
</mat-tab-group>
|
</mat-tab-group>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -5,6 +5,7 @@ import { UntypedFormBuilder, Validators, UntypedFormGroup, FormControl } from '@
|
||||||
import { Observable } from 'rxjs';
|
import { Observable } from 'rxjs';
|
||||||
import { Owner } from '../owner.model';
|
import { Owner } from '../owner.model';
|
||||||
import { XeroService } from '../xero.service';
|
import { XeroService } from '../xero.service';
|
||||||
|
import { WoocommerceService } from '../woocommerce.service';
|
||||||
|
|
||||||
import { NotifierService } from '../notifier.service';
|
import { NotifierService } from '../notifier.service';
|
||||||
import { faCopy } from '@fortawesome/free-solid-svg-icons';
|
import { faCopy } from '@fortawesome/free-solid-svg-icons';
|
||||||
|
@ -56,6 +57,13 @@ export class SettingsComponent implements OnInit {
|
||||||
xeroLink: string = '';
|
xeroLink: string = '';
|
||||||
localToken: string = '';
|
localToken: string = '';
|
||||||
clientId: string = '';
|
clientId: string = '';
|
||||||
|
wooOwner: string = '';
|
||||||
|
wooToken: string = '';
|
||||||
|
wooUrl: string = '';
|
||||||
|
wooOwnerUpdate: Observable<string>;
|
||||||
|
wooTokenUpdate: Observable<string>;
|
||||||
|
wooUrlUpdate: Observable<string>;
|
||||||
|
|
||||||
clientIdUpdate: Observable<string>;
|
clientIdUpdate: Observable<string>;
|
||||||
accCodeUpdate: Observable<string>;
|
accCodeUpdate: Observable<string>;
|
||||||
linked2Xero : boolean = false;
|
linked2Xero : boolean = false;
|
||||||
|
@ -65,6 +73,7 @@ export class SettingsComponent implements OnInit {
|
||||||
private notifierService : NotifierService,
|
private notifierService : NotifierService,
|
||||||
private fb: UntypedFormBuilder,
|
private fb: UntypedFormBuilder,
|
||||||
public xeroService: XeroService,
|
public xeroService: XeroService,
|
||||||
|
public wooService: WoocommerceService,
|
||||||
private dialogRef: MatDialogRef<SettingsComponent>,
|
private dialogRef: MatDialogRef<SettingsComponent>,
|
||||||
@Inject(MAT_DIALOG_DATA) public data: Owner) {
|
@Inject(MAT_DIALOG_DATA) public data: Owner) {
|
||||||
this.useZats = data.zats;
|
this.useZats = data.zats;
|
||||||
|
@ -102,6 +111,19 @@ export class SettingsComponent implements OnInit {
|
||||||
console.log("xeroAccCod -> [" + this.xeroAccCod + "]");
|
console.log("xeroAccCod -> [" + this.xeroAccCod + "]");
|
||||||
this.accCodForm.get('xAcc')!.setValue(this.xeroAccCod);
|
this.accCodForm.get('xAcc')!.setValue(this.xeroAccCod);
|
||||||
});
|
});
|
||||||
|
this.wooOwnerUpdate = wooService.ownerUpdate;
|
||||||
|
this.wooTokenUpdate = wooService.tokenUpdate;
|
||||||
|
this.wooUrlUpdate = wooService.siteurlUpdate;
|
||||||
|
wooService.getWooToken(this.owner._id!);
|
||||||
|
this.wooOwnerUpdate.subscribe(owData => {
|
||||||
|
this.wooOwner = owData;
|
||||||
|
});
|
||||||
|
this.wooTokenUpdate.subscribe(tkData => {
|
||||||
|
this.wooToken = tkData;
|
||||||
|
});
|
||||||
|
this.wooUrlUpdate.subscribe(uData => {
|
||||||
|
this.wooUrl = uData;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
|
@ -128,7 +150,7 @@ export class SettingsComponent implements OnInit {
|
||||||
closeIntegration() {
|
closeIntegration() {
|
||||||
if ( (this.xeroAccCod == '') && (this.linked2Xero) )
|
if ( (this.xeroAccCod == '') && (this.linked2Xero) )
|
||||||
this.notifierService
|
this.notifierService
|
||||||
.showNotification("Payment confirmation disabled!!","Close",'warning');
|
.showNotification("Xero Payment confirmation disabled!!","Close",'warning');
|
||||||
this.dialogRef.close();
|
this.dialogRef.close();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -179,6 +201,29 @@ export class SettingsComponent implements OnInit {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
copyWooOwner(){
|
||||||
|
try {
|
||||||
|
navigator.clipboard.writeText(this.wooOwner);
|
||||||
|
this.notifierService.showNotification("Owner ID copied to clipboard", "Close", "success");
|
||||||
|
} catch (err) {
|
||||||
|
this.notifierService.showNotification("Copying not available in your browser", "Close", "error");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
copyWooToken(){
|
||||||
|
try {
|
||||||
|
navigator.clipboard.writeText(this.wooToken);
|
||||||
|
this.notifierService.showNotification("WooCommerce Token copied to clipboard", "Close", "success");
|
||||||
|
} catch (err) {
|
||||||
|
this.notifierService.showNotification("Copying not available in your browser", "Close", "error");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
generateWooToken(){
|
||||||
|
this.wooService.createWooToken(this.owner._id!);
|
||||||
|
this.wooService.getWooToken(this.owner._id!);
|
||||||
|
}
|
||||||
|
|
||||||
saveAccCod() {
|
saveAccCod() {
|
||||||
|
|
||||||
this.xeroAccCod = this.accCodForm.value.xAcc;
|
this.xeroAccCod = this.accCodForm.value.xAcc;
|
||||||
|
|
16
src/app/woocommerce.service.spec.ts
Normal file
16
src/app/woocommerce.service.spec.ts
Normal file
|
@ -0,0 +1,16 @@
|
||||||
|
import { TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { WoocommerceService } from './woocommerce.service';
|
||||||
|
|
||||||
|
describe('WoocommerceService', () => {
|
||||||
|
let service: WoocommerceService;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
TestBed.configureTestingModule({});
|
||||||
|
service = TestBed.inject(WoocommerceService);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should be created', () => {
|
||||||
|
expect(service).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
65
src/app/woocommerce.service.ts
Normal file
65
src/app/woocommerce.service.ts
Normal file
|
@ -0,0 +1,65 @@
|
||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { BehaviorSubject, Observable } from 'rxjs';
|
||||||
|
import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
|
||||||
|
|
||||||
|
import { ConfigData } from './configdata';
|
||||||
|
|
||||||
|
var Buffer = require('buffer/').Buffer;
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: 'root'
|
||||||
|
})
|
||||||
|
export class WoocommerceService {
|
||||||
|
beUrl = ConfigData.Be_URL;
|
||||||
|
private reqHeaders: HttpHeaders;
|
||||||
|
private ownerId: string = '';
|
||||||
|
private token: string = '';
|
||||||
|
private siteurl: string = '';
|
||||||
|
private _ownerIdUpdated: BehaviorSubject<string> = new BehaviorSubject(this.ownerId);
|
||||||
|
private _tokenUpdated: BehaviorSubject<string> = new BehaviorSubject(this.token);
|
||||||
|
private _siteurlUpdated: BehaviorSubject<string> = new BehaviorSubject(this.siteurl);
|
||||||
|
public readonly ownerUpdate: Observable<string> = this._ownerIdUpdated.asObservable();
|
||||||
|
public readonly tokenUpdate: Observable<string> = this._tokenUpdated.asObservable();
|
||||||
|
public readonly siteurlUpdate: Observable<string> = this._siteurlUpdated.asObservable();
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private http: HttpClient
|
||||||
|
) {
|
||||||
|
var auth = 'Basic ' + Buffer.from(ConfigData.UsrPwd).toString('base64');
|
||||||
|
this.reqHeaders = new HttpHeaders().set('Authorization', auth);
|
||||||
|
this._ownerIdUpdated.next(Object.assign({}, this).ownerId);
|
||||||
|
this._tokenUpdated.next(Object.assign({}, this).token);
|
||||||
|
this._siteurlUpdated.next(Object.assign({}, this).siteurl);
|
||||||
|
}
|
||||||
|
|
||||||
|
getWooToken(ownerId: string) {
|
||||||
|
const params = new HttpParams().append('ownerid', ownerId);
|
||||||
|
let obs = this.http.get<{ownerid: string, token: string, siteurl: string}>(this.beUrl + 'api/wootoken', {headers: this.reqHeaders, params: params, observe: 'response'});
|
||||||
|
obs.subscribe(tokenResponse => {
|
||||||
|
if (tokenResponse.status == 200) {
|
||||||
|
this.ownerId = tokenResponse.body!.ownerid;
|
||||||
|
this.token = tokenResponse.body!.token;
|
||||||
|
this.siteurl = tokenResponse.body!.siteurl;
|
||||||
|
this._ownerIdUpdated.next(Object.assign({}, this).ownerId);
|
||||||
|
this._tokenUpdated.next(Object.assign({}, this).token);
|
||||||
|
this._siteurlUpdated.next(Object.assign({}, this).siteurl);
|
||||||
|
} else {
|
||||||
|
console.log('No WooCommerce token found');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return obs;
|
||||||
|
}
|
||||||
|
|
||||||
|
createWooToken(ownerId: string) {
|
||||||
|
const params = new HttpParams().append('ownerid', ownerId);
|
||||||
|
let obs = this.http.post(this.beUrl+'api/wootoken', {}, {headers: this.reqHeaders, params: params, observe: 'response'});
|
||||||
|
obs.subscribe(responseData => {
|
||||||
|
if (responseData.status == 202) {
|
||||||
|
console.log('WooToken created.');
|
||||||
|
} else {
|
||||||
|
console.log('WooToken creation failed.');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in a new issue