Enhance viewing key saving

src/app/invoice/invoice.component.html

@@ -89,14 +89,14 @@
 				</tr>
 			</table>	
 			<div style="height: 15px;"></div>
-			<div width="100%"
+			<div *ngIf="!order.paid" width="100%"
 					    style="font-size: 14px;
 							   font-weight: 700;
 							   font-style: italic;
 							   text-align: center;">		
 						{{ vE.invoiceScanQrcode }}
 			</div>	
-			<div style="text-align: center;
+			<div *ngIf="!order.paid" style="text-align: center;
 						margin-top: 10px;
 						line-height: 30px;">
 				<div style="font-family: 'Spartan';
@@ -172,4 +172,4 @@
 		</mat-card-actions>
 	</div>
 </div>
-</div>
+</div>

src/app/order/order.component.ts

@@ -214,7 +214,8 @@ export class OrderComponent implements OnInit{
 		dialogConfig.disableClose = true;
 		dialogConfig.autoFocus = true;
 		dialogConfig.data = {
-			orderId: this.order._id
+			orderId: this.order._id,
+			orderToken: this.order.token
 		};
 
         //console.log ('order_id :  ' + this.order._id);

src/app/settings/settings.component.html

@@ -42,7 +42,7 @@
 					<mat-form-field class="full-width" 
 									appearance="fill">
 						<mat-label>{{ vE.settingsVkeyLbl }}</mat-label>
-						<textarea matInput placeholder="{{ vE.settingsVkeyPlaceholder }}" 
+						<textarea matInput [readonly]="vKaccess" placeholder="{{ vE.settingsVkeyPlaceholder }}" 
 								formControlName="vKey">
 						</textarea>
 					</mat-form-field>

src/app/settings/settings.component.ts

@@ -29,7 +29,6 @@ export class SettingsComponent implements OnInit {
 	owner: Owner;
 	useZats: boolean;
 	proVersion: boolean = false;
-	useVKey: boolean = false;
 	linkMsg: string = '';
 	xeroAccCod: string = '';
 	saveAccOk: boolean = false;
@@ -117,6 +116,7 @@ export class SettingsComponent implements OnInit {
     };
     //
     languageRdy = new Subject<boolean>();
+	vKaccess = true;
 
     // ------------------------------------------------------------
 	constructor(
@@ -128,13 +128,11 @@ export class SettingsComponent implements OnInit {
 		private dialogRef: MatDialogRef<SettingsComponent>,
 		@Inject(MAT_DIALOG_DATA) public data: {o: Owner}) {
 			this.useZats = data.o.zats;
-			this.useVKey = data.o.payconf;
 			this.settingsForm = fb.group({
 					name: [data.o.name, Validators.required],
 					currency: [data.o.currency, Validators.required],
 					useZats: [data.o.zats,  Validators.required],
 					useVKey: [data.o.payconf, Validators.required],
-	//				proVersion: [data.invoices, Validators.required],
 					vKey: [data.o.viewkey]
 				});
 			this.accCodForm = fb.group ({
@@ -142,7 +140,8 @@ export class SettingsComponent implements OnInit {
 				});
 
 			if (data.o.payconf) {
-				this.settingsForm.get('vKey')!.enable();
+				this.vKaccess = false;
+				//this.settingsForm.get('vKey')!.enable();
 			}
 			this.owner = data.o;
 			this.viewkey = data.o.viewkey;
@@ -181,23 +180,24 @@ export class SettingsComponent implements OnInit {
 
 	ngOnInit() {
 
-	      this.settingsForm.get('vKey')!.disable();
+		//this.settingsForm.get('vKey')!.disable();
-  			// 
+		// 
-  			this.chgUILanguage();
+		this.vKaccess = true;
-         //console.log('SETTINGS: Return from chgUILanguage()');
+		this.chgUILanguage();
-         //
+		//console.log('SETTINGS: Return from chgUILanguage()');
-         this.languageRdy.subscribe (
+		//
-         	  data => {
+		this.languageRdy.subscribe (
-			      	this.linkMsg = this.vE.settingsLink2Xero; 
+			data => {
-			      	this.pmtServiceURL + '';
+				this.linkMsg = this.vE.settingsLink2Xero; 
-			      	if ( this.linked2Xero ) {
+				this.pmtServiceURL + '';
-		   	   		this.linkMsg = this.vE.settingsRelink2Xero; //'Relink to Xero';
+				if ( this.linked2Xero ) {
-		      			this.pmtServiceURL = 
+					this.linkMsg = this.vE.settingsRelink2Xero; //'Relink to Xero';
-		      				'https://zgo.cash/pmtservice?owner=' + 
+					this.pmtServiceURL = 
-		      	         this.owner._id + 
+						'https://zgo.cash/pmtservice?owner=' + 
-		      	         '&invoiceNo=[INVOICENUMBER]&currency=[CURRENCY]&amount=[AMOUNTDUE]&shortCode=[SHORTCODE]';
+					this.owner._id + 
-	      			}
+						'&invoiceNo=[INVOICENUMBER]&currency=[CURRENCY]&amount=[AMOUNTDUE]&shortCode=[SHORTCODE]';
-         	  });
+				}
+			});
 	}
 
 	safeURL(s: string){
@@ -206,7 +206,7 @@ export class SettingsComponent implements OnInit {
 
 	close() {
 
-		this.dialogRef.close();
+		this.dialogRef.close(null);
 	}
 
 	closeIntegration() {
@@ -223,8 +223,8 @@ export class SettingsComponent implements OnInit {
 		this.owner.currency = this.settingsForm.value.currency;
 		this.owner.zats = this.settingsForm.value.useZats;
 		this.owner.payconf = this.settingsForm.value.useVKey;
-		this.viewkey = this.settingsForm.value.vKey;
+		this.owner.viewkey = this.settingsForm.value.vKey;
-		//this.owner.invoices = this.settingsForm.value.proVersion
+		console.log('Settings component key: ' + this.owner.viewkey);
 		this.dialogRef.close(this.owner);
 	}
 
@@ -237,15 +237,16 @@ export class SettingsComponent implements OnInit {
 	}
 
 	onChangeVKeyOn(ob: MatSlideToggleChange) {
-//		console.log("Viewing key switch is " + 
+		//		console.log("Viewing key switch is " + 
-//			        ( ob.checked ? "[ON]." : "[OFF]." ) );
+		//			        ( ob.checked ? "[ON]." : "[OFF]." ) );
-        
-        this.useVKey = ob.checked;
 
-	    if ( ob.checked ) 
+		if ( ob.checked ) {
-	      this.settingsForm.get('vKey')!.enable();
+			//this.settingsForm.get('vKey')!.enable();
-	    else 
+			this.vKaccess = false;
-	      this.settingsForm.get('vKey')!.disable();
+		} else { 
+			//this.settingsForm.get('vKey')!.disable();
+			this.vKaccess = true;
+		}
 
 	}
 

src/app/user.service.ts

@@ -162,17 +162,54 @@ export class UserService{
 	}
 
 	saveOwnerSettings(o: Owner) {
-		let obs = this.http.post(this.beUrl + 'api/ownersettings', {payload: o}, {headers: this.reqHeaders, params: this.reqParams});
+		console.log('saveOwnerSettings: ' + o.viewkey);
+		if(o.viewkey.length > 20) {
+			this.saveOwnerViewingKey(o.viewkey).subscribe({
+				next: () => {
+					let obs = this.http.post(this.beUrl + 'api/ownersettings', {payload: o}, {headers: this.reqHeaders, params: this.reqParams});
+					obs.subscribe({
+						next: () => {
+							this.getOwner();
+						},
+						error: (error) => {
+							if ( error.status == 500 ){
+								this.notifierService.showNotification("Saving settings failed", "Close", "error")
+							}
+						}
+					});
+				}
+			});
+		} else {
+			let obs = this.http.post(this.beUrl + 'api/ownersettings', {payload: o}, {headers: this.reqHeaders, params: this.reqParams});
+			obs.subscribe({
+				next: () => {
+					this.getOwner();
+				},
+				error: (error) => {
+					if ( error.status == 500 ){
+						this.notifierService.showNotification("Saving settings failed", "Close", "error")
+					}
+				}
+			});
+		}
+	}
+
+	saveOwnerViewingKey(vk: string){
+		let obs = this.http.post(this.beUrl + 'api/ownervk', {payload: vk}, {headers: this.reqHeaders, params: this.reqParams});
 		obs.subscribe({
 			next: () => {
 				this.getOwner();
 			},
 			error: (error) => {
-				if ( error.status == 500 ){
+				if (error.status == 400) {
-					this.notifierService.showNotification("Saving settings failed", "Close", "error")
+					this.notifierService.showNotification('Invalid viewing key, changes not saved', 'Close', 'error');
+				} else if (error.status == 403) {
+					this.notifierService.showNotification('Viewing key does not match shop, changes not saved', 'Close', 'error');
 				}
 			}
-		})
+		});
+
+		return obs;
 	}
 
 	getOwner() {