feat(ever-merchant): validated save payment gateways

merchant/tablet-ionic/src/components/settings-page-components/settings/payments/mutation/mutation.html

@@ -14,6 +14,7 @@ <h4 class="custom-title-popup mb-0">
 			[defaultCompanyBrandLogo]="defaultCompanyBrandLogo"
 			[defaultCurrency]="defaultCurrency"
 			(configureObject)="updateConfigureObject($event)"
+			[(isValid)]="isValid"
 		></e-cu-stripe-gateway>
 	</div>
 
@@ -23,6 +24,7 @@ <h4 class="custom-title-popup mb-0">
 		</button>
 
 		<button
+			[disabled]="!isValid"
 			(click)="cancelModal(newConfigureObject)"
 			class="button button-brand"
 		>

merchant/tablet-ionic/src/components/settings-page-components/settings/payments/mutation/mutation.scss

@@ -8,4 +8,10 @@
 	.body {
 		height: 80%;
 	}
+
+	button:disabled {
+		cursor: default;
+		opacity: 0.4;
+		pointer-events: none;
+	}
 }

merchant/tablet-ionic/src/components/settings-page-components/settings/payments/mutation/mutation.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component } from '@angular/core';
 import { ModalController } from '@ionic/angular';
 import PaymentGateways, {
 	paymentGatewaysToString
@@ -21,6 +21,7 @@ export class PaymentMutationComponent {
 	currenciesCodes: string[] = [];
 	paymentGateways = PaymentGateways;
 	newConfigureObject = new Subject();
+	isValid: boolean;
 
 	constructor(
 		public modalController: ModalController,

merchant/tablet-ionic/src/components/settings-page-components/settings/payments/payments.ts

@@ -50,6 +50,14 @@ export class SettingsPaymentsComponent implements OnInit {
 		this.showPaymentsGateways = true;
 	}
 
+	get isValid() {
+		return (
+			this.hasChanged &&
+			(!this.currWarehouse.isPaymentEnabled ||
+				this.myPaymentsGateways.length > 0)
+		);
+	}
+
 	getPaymentName(pg: PaymentGateways) {
 		return paymentGatewaysToString(pg);
 	}

merchant/tablet-ionic/src/components/settings-page-components/settings/payments/stripe/stripe.html

@@ -115,8 +115,8 @@
 									src="{{ companyBrandLogo?.value }}"
 									alt="Invalid image"
 									class="img-rounded"
-									(error)="invalidUrl = true"
-									(load)="invalidUrl = false"
+									(error)="onUrlChanges(true)"
+									(load)="onUrlChanges(false)"
 								/>
 							</div>
 

merchant/tablet-ionic/src/components/settings-page-components/settings/payments/stripe/stripe.ts

@@ -1,4 +1,11 @@
-import { Component, OnInit, Input, OnDestroy, Output } from '@angular/core';
+import {
+	Component,
+	OnInit,
+	Input,
+	OnDestroy,
+	Output,
+	EventEmitter
+} from '@angular/core';
 import {
 	FormGroup,
 	AbstractControl,
@@ -8,6 +15,7 @@ import {
 import { Subject } from 'rxjs';
 import PaymentGateways from '@modules/server.common/enums/PaymentGateways';
 import { IPaymentGatewayCreateObject } from '@modules/server.common/interfaces/IPaymentGateway';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
 	selector: 'e-cu-stripe-gateway',
@@ -29,7 +37,11 @@ export class StripeGatewayComponent implements OnInit, OnDestroy {
 		publishableKey: string;
 		allowRememberMe: boolean;
 	};
+	@Input()
+	isValid: boolean;
 
+	@Output()
+	isValidChange = new EventEmitter();
 	@Output()
 	configureObject = new Subject();
 
@@ -40,14 +52,16 @@ export class StripeGatewayComponent implements OnInit, OnDestroy {
 	companyBrandLogo: AbstractControl;
 	publishableKey: AbstractControl;
 	allowRememberMe: AbstractControl;
-
 	invalidUrl: boolean;
 
+	private _ngDestroy$ = new Subject<void>();
+
 	constructor(private formBuilder: FormBuilder) {}
 
 	ngOnInit() {
 		this.buildForm(this.formBuilder);
 		this.bindFormControls();
+		this.onFormChanges();
 	}
 
 	bindFormControls() {
@@ -66,6 +80,12 @@ export class StripeGatewayComponent implements OnInit, OnDestroy {
 		this.configureObject.next(this.getConfigureObject());
 	}
 
+	private onUrlChanges(isInvalid: boolean) {
+		this.invalidUrl = isInvalid;
+		this.isValid = this.form.valid && !isInvalid;
+		this.isValidChange.emit(this.isValid);
+	}
+
 	private buildForm(formBuilder: FormBuilder) {
 		this.form = formBuilder.group({
 			payButtontext: [
@@ -96,4 +116,13 @@ export class StripeGatewayComponent implements OnInit, OnDestroy {
 			configureObject: this.form.getRawValue()
 		};
 	}
+
+	private onFormChanges() {
+		this.form.statusChanges
+			.pipe(takeUntil(this._ngDestroy$))
+			.subscribe((value) => {
+				this.isValid = this.form.valid && !this.invalidUrl;
+				this.isValidChange.emit(this.isValid);
+			});
+	}
 }

merchant/tablet-ionic/src/components/settings-page-components/settings/settings.html

@@ -114,7 +114,7 @@ <h4 class="row-title">
 				<ion-button
 					[disabled]="
 						hasChanges(
-							paymentsSettings.hasChanged,
+							paymentsSettings.isValid,
 							productsDelivery.dirty,
 							productsTakeaway.dirty,
 							orderBarcodeType.dirty,