Front End for WooCommerce config

src/app/settings/settings.component.css

@@ -45,4 +45,15 @@
 	color: dodgerblue;
 }
 
+.small {
+	font-size: 12px;
+	background: #dddddd;
+}
 
+.heading {
+	padding-top: 10px;
+}
+
+.toolbar {
+	padding: 12px;
+}

src/app/settings/settings.component.html

@@ -170,7 +170,52 @@
 					</div>			
 				</mat-tab>
 				<mat-tab label="WooCommerce">
-					<p>Woo va aqui</p>
+					<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>

src/app/settings/settings.component.ts

@@ -5,6 +5,7 @@ import { UntypedFormBuilder, Validators, UntypedFormGroup, FormControl } from '@
 import { Observable } from 'rxjs';
 import { Owner } from '../owner.model';
 import { XeroService } from '../xero.service';
+import { WoocommerceService } from '../woocommerce.service';
 
 import { NotifierService } from '../notifier.service';
 import { faCopy } from '@fortawesome/free-solid-svg-icons';
@@ -56,6 +57,13 @@ export class SettingsComponent implements OnInit {
 	xeroLink: string = '';
 	localToken: string = '';
 	clientId: string = '';
+	wooOwner: string = '';
+	wooToken: string = '';
+	wooUrl: string = '';
+	wooOwnerUpdate: Observable<string>;
+	wooTokenUpdate: Observable<string>;
+	wooUrlUpdate: Observable<string>;
+
 	clientIdUpdate: Observable<string>;
 	accCodeUpdate: Observable<string>;
 	linked2Xero : boolean = false;
@@ -65,6 +73,7 @@ export class SettingsComponent implements OnInit {
 		private notifierService : NotifierService,
 		private fb: UntypedFormBuilder,
 		public xeroService: XeroService,
+		public wooService: WoocommerceService,
 		private dialogRef: MatDialogRef<SettingsComponent>,
 		@Inject(MAT_DIALOG_DATA) public data: Owner) {
 			this.useZats = data.zats;
@@ -102,6 +111,19 @@ export class SettingsComponent implements OnInit {
 				console.log("xeroAccCod -> [" + 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() {
@@ -128,7 +150,7 @@ export class SettingsComponent implements OnInit {
 	closeIntegration() {
 		if ( (this.xeroAccCod == '') && (this.linked2Xero) ) 
 			this.notifierService
-		    .showNotification("Payment confirmation disabled!!","Close",'warning');
+		    .showNotification("Xero Payment confirmation disabled!!","Close",'warning');
 		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() {
 
 	  this.xeroAccCod = 	this.accCodForm.value.xAcc;

src/app/woocommerce.service.spec.ts

@@ -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();
+  });
+});

src/app/woocommerce.service.ts

@@ -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.');
+			}
+		});
+
+	}
+}