Add AccountCode field in settings component's integration tab

src/app/settings/settings.component.html

@@ -77,7 +77,20 @@
 		<mat-tab *ngIf="proVersion"
 		         label="Integrations"
 				 style="align-items: center;">
-			<div style="height: 20px;
+			<div class="container" style="margin-bottom:  20px;">
+				<mat-dialog-content [formGroup]="settingsForm">
+					<div style="height: 10px;
+								margin-top: 10px;">
+					</div>			
+					<mat-form-field  class="settings-field" [style.width.%]="100">
+						<mat-label>Account Code</mat-label>
+						<input matInput 
+							   width="100%"
+							   placeholder="9999999999" 
+							   formControlName="xeroAccCod"
+							   (change)="xeroAccCodChanged($event)">
+					</mat-form-field>
+					<div style="height: 10px;
 								margin-top: 10px;">
 					</div>			
 					<div class="container" 
@@ -91,8 +104,8 @@
 						</p>
 
 						<table *ngIf="linked2Xero"
-				       style="width:100%;
+						       [style.width.%]="100"
-							  margin-top: 10px;">
+						       style="margin-top: 10px;">
 							<thead style="width: 100%;">
 								<tr>
 									<th class="urlLabel"
@@ -127,19 +140,25 @@
 									   </fa-icon>
 								   </a>
 								</td>
-						
 							</tbody>
 						</table>
-
+					</div>	
+				</mat-dialog-content>		
 			</div>	
 			<div class="container" 
 			 	 style="display: flex;
 						justify-content: space-between;
 						align-items: center;">
 				<button mat-raised-button 
-						(click)="close()">
+						(click)="closeIntegration()">
 					Close
 				</button>
+				<button *ngIf="saveAccOk" 
+				        mat-raised-button 
+						color="primary" 
+						(click)="saveAccCod()">
+					Save Code
+				</button>
 			</div>
 			<div style="height: 20px;
 						margin-top: 10px;">

src/app/settings/settings.component.ts

@@ -28,6 +28,8 @@ export class SettingsComponent implements OnInit {
 	proVersion: boolean = false;
 	useVKey: boolean = false;
 	linkMsg: String = 'Link to Xero';
+	xeroAccCod: String = '';
+	saveAccOk: boolean = false;
 	
 	coins = [
 		{
@@ -103,6 +105,14 @@ export class SettingsComponent implements OnInit {
 	}
 
 	close() {
+
+		this.dialogRef.close();
+	}
+
+	closeIntegration() {
+		if ( this.xeroAccCod == '' ) 
+			this.notifierService
+		    .showNotification("Warning: Payment confirmation disabled","Close",'success');
 		this.dialogRef.close();
 	}
 
@@ -137,6 +147,10 @@ export class SettingsComponent implements OnInit {
 
 	}
 
+	saveAccCod() {
+
+	}
+
 	copyUrl() {
 //		console.log("Inside copyUrl()");
 		if (navigator.clipboard) {
@@ -152,6 +166,12 @@ export class SettingsComponent implements OnInit {
 			    .showNotification("Functionality not available for your browser. Use send button instead.","Close",'error');
 		}
 	}
+
+	xeroAccCodChanged( arg: any ) {
+//		console.log("Account Code changed: " + arg.target.value);
+//		console.log(arg);
+		this.saveAccOk = (arg.target.value !== '');
+	}
 }