Settings and Notifier services updated

src/app/notifier.service.ts

@@ -9,7 +9,7 @@ export class NotifierService {
 
   constructor(private snackBar:MatSnackBar) { }
 
-  showNotification(displayMessage:string, buttonText: string, messageType: 'error' | 'success') {
+  showNotification(displayMessage:string, buttonText: string, messageType: 'error' | 'success' | 'warning') {
     this.snackBar.openFromComponent(NotifierComponent, {
       data: {
         message: displayMessage,
@@ -19,7 +19,16 @@ export class NotifierService {
       duration: 4000,
       verticalPosition: 'top',
       panelClass: [messageType] 
-    })
+    });
+    this.playSound();
+  }
+
+  playSound() {
+    console.log('Play sound called...');
+    let audio = new Audio();
+    audio.src = '../assets/notifier.mp3';
+    audio.load();
+    audio.play();
   }
 
 }

src/app/notifier/notifier.component.css

@@ -29,3 +29,9 @@
 	background: whitesmoke;
 	color: black;
 }
+
+::ng-deep .mat-snack-bar-container.warning {
+	background: antiquewhite;
+	color:   #fdebd0;
+	
+}

src/app/notifier/notifier.component.html

@@ -1,3 +1,4 @@
+
 <div class="notifier" >
 	<div class="notifier-type">
 		{{ data.type | titlecase }}

src/app/settings/settings.component.html

@@ -79,17 +79,6 @@
 				 style="align-items: center;">
 			<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>			
@@ -142,6 +131,18 @@
 								</td>
 							</tbody>
 						</table>
+					<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>	
 				</mat-dialog-content>		
 			</div>	

src/app/settings/settings.component.ts

@@ -112,7 +112,7 @@ export class SettingsComponent implements OnInit {
 	closeIntegration() {
 		if ( this.xeroAccCod == '' ) 
 			this.notifierService
-		    .showNotification("Warning: Payment confirmation disabled","Close",'success');
+		    .showNotification("Payment confirmation disabled!!","Close",'warning');
 		this.dialogRef.close();
 	}