Bugfix/house validator (#3943)

* added house validator for address

* fixed placeID for house entrance and corpus

* test fix

* rabbit fixes

* district fix

* district dto fix

* dirty form fix

* artifact code remove
tests

Author: witolDark

src/app/chat/service/chats/telegram-socket.service.spec.ts

@@ -1,9 +1,8 @@
 import { TestBed } from '@angular/core/testing';
 import { NgZone } from '@angular/core';
 import { TelegramSocketService } from './telegram-socket.service';
-import { IMessage } from '@stomp/stompjs';
+import { Client, IFrame, IMessage } from '@stomp/stompjs';
 import { Subject } from 'rxjs';
-import { Client, IFrame } from '@stomp/stompjs';
 
 class FakeStompClient {
   onConnect?: (frame: any) => void;

src/app/ubs/shared/components/address-input/address-input.component.html

@@ -108,7 +108,6 @@
 
     <mat-select
       *ngIf="allowDistrictEdit"
-      formControlName="district"
       class="shadow-none form-control"
       (selectionChange)="onDistrictChange($event.value.nameUk, $event.value.nameEn)"
       [placeholder]="district.value ? district.value + ', ' + ('personal-info.info-district-placeholder' | translate) : ''"

src/app/ubs/shared/components/address-input/address-input.component.spec.ts

@@ -3,7 +3,7 @@ import { AddressInputComponent } from './address-input.component';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { ReactiveFormsModule, FormBuilder } from '@angular/forms';
+import { ReactiveFormsModule, FormBuilder, AbstractControl } from '@angular/forms';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { BehaviorSubject, of } from 'rxjs';
 import { LanguageService } from 'src/app/shared/i18n/language.service';
@@ -580,11 +580,13 @@ describe('AddressInputComponent', () => {
   });
 
   it('should update and validate form on value change in addressData when address data changes', fakeAsync(() => {
+    spyOn(component.addressData, 'getPlaceIdByAddress').and.returnValue(Promise.resolve(['testPlaceId', ['street_address']]));
+    component.districtsForKyiv = [{ nameEn: 'Shevchenkivskyi' } as DistrictsDtos];
     spyOn(component, 'onChange');
     spyOn(component.addressData, 'getValues').and.returnValue({ houseNumber: '1' } as any);
     component['initListeners']();
     fixture.detectChanges();
-    tick();
+    tick(1000);
 
     const mockAddressData = {
       regionUk: 'Київська область',
@@ -600,7 +602,7 @@ describe('AddressInputComponent', () => {
     };
 
     component.addressData['addressChange'].next(mockAddressData as any);
-    tick();
+    tick(1000);
     fixture.detectChanges();
 
     expect(component.blockAutoComplete).toBeTrue();
@@ -799,7 +801,6 @@ describe('AddressInputComponent', () => {
     expect(component.addressData.setStreet).toHaveBeenCalledWith({ placeEn: mockGeocoderResult, placeUk: mockGeocoderResult });
     expect(component.district.enabled).toBeTrue();
     expect(component['delayAutocomplete']).toHaveBeenCalled();
-    expect(component.placeId.value).toBe(mockStreet.place_id);
   }));
 
   it('should disable district and reset data if street selection is null', () => {
@@ -843,4 +844,59 @@ describe('AddressInputComponent', () => {
 
     expect(component.blockAutoComplete).toBeFalse();
   }));
+
+  describe('AddressValidator.validate', () => {
+    let control: AbstractControl;
+
+    beforeEach(() => {
+      control = {} as AbstractControl;
+    });
+
+    it('should return null if form is pristine', () => {
+      component.addressForm = { pristine: true } as any;
+
+      const result = component.validate(control);
+
+      expect(result).toBeNull();
+    });
+
+    it('should return disableSubmit error while validating', () => {
+      component.addressForm = { pristine: false } as any;
+      (component as any).isValidating = true;
+
+      const result = component.validate(control);
+
+      expect(result).toEqual({ disableSubmit: true });
+    });
+
+    it('should return null if form and address data are valid', () => {
+      component.addressForm = {
+        pristine: false,
+        valid: true
+      } as any;
+
+      component.addressData = {
+        isValid: () => true
+      } as any;
+
+      const result = component.validate(control);
+
+      expect(result).toBeNull();
+    });
+
+    it('should return incorrectAddress error if form or address data is invalid', () => {
+      component.addressForm = {
+        pristine: false,
+        valid: false
+      } as any;
+
+      component.addressData = {
+        isValid: () => false
+      } as any;
+
+      const result = component.validate(control);
+
+      expect(result).toEqual({ incorrectAddress: true });
+    });
+  });
 });

src/app/ubs/shared/components/address-input/address-input.component.ts

@@ -15,7 +15,7 @@ import { LocalStorageService } from 'src/app/shared/services/localstorage/local-
 import { Coordinates } from 'src/app/greencity/modules/user/models/edit-profile.model';
 import { select, Store } from '@ngrx/store';
 import { BehaviorSubject, combineLatest, filter, from, Subject } from 'rxjs';
-import { debounceTime, switchMap, take, takeUntil } from 'rxjs/operators';
+import { debounceTime, switchMap, take, takeUntil, tap } from 'rxjs/operators';
 import { LanguageService } from 'src/app/shared/i18n/language.service';
 import { emptyOrValid } from '@ubs/shared/validators/empthy-or-valid.validator';
 import { addressesSelector } from 'src/app/store/selectors/order.selectors';
@@ -82,6 +82,7 @@ export class AddressInputComponent implements OnInit, AfterViewInit, OnDestroy,
   private readonly numericPattern = Patterns.numeric;
   private readonly $destroy: Subject<void> = new Subject();
   private viewInitialized = false;
+  private isValidating = false;
   private googlePlacesService: google.maps.places.PlacesService;
   private readonly showMapSelected$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
 
@@ -139,6 +140,7 @@ export class AddressInputComponent implements OnInit, AfterViewInit, OnDestroy,
     return this.addressForm.get('placeId') as FormControl;
   }
 
+  private onValidatorChange?: () => void;
   onChange = (address) => {};
   onTouched = () => {};
 
@@ -160,6 +162,9 @@ export class AddressInputComponent implements OnInit, AfterViewInit, OnDestroy,
     this.showMapSelected$.next(this.isShowMap);
     this.initForm();
     this.initListeners();
+    this.addressForm.statusChanges.pipe(takeUntil(this.$destroy)).subscribe(() => {
+      this.onValidatorChange?.();
+    });
   }
 
   ngAfterViewInit(): void {
@@ -185,7 +190,23 @@ export class AddressInputComponent implements OnInit, AfterViewInit, OnDestroy,
   }
 
   validate(control: AbstractControl): ValidationErrors {
-    return (this.addressForm.valid && this.addressData.isValid()) || this.addressForm.pristine ? null : { incorrectAddress: true };
+    if (this.addressForm.pristine) {
+      return null;
+    }
+
+    if (this.isValidating) {
+      return { disableSubmit: true };
+    }
+
+    if (this.addressForm.valid && this.addressData.isValid()) {
+      return null;
+    }
+
+    return { incorrectAddress: true };
+  }
+
+  registerOnValidatorChange(fn: () => void) {
+    this.onValidatorChange = fn;
   }
 
   writeValue(obj: any): void {}
@@ -255,8 +276,15 @@ export class AddressInputComponent implements OnInit, AfterViewInit, OnDestroy,
 
     this.addressData
       .getAddressChange()
-      .pipe(takeUntil(this.$destroy))
-      .subscribe((addressData) => {
+      .pipe(
+        tap(() => {
+          this.isValidating = true;
+          this.onValidatorChange?.();
+        }),
+        debounceTime(1000),
+        takeUntil(this.$destroy)
+      )
+      .subscribe(async (addressData) => {
         this.blockAutoComplete = true;
 
         const region = this.currentLanguage === 'uk' ? addressData.regionUk : addressData.regionEn;
@@ -271,8 +299,18 @@ export class AddressInputComponent implements OnInit, AfterViewInit, OnDestroy,
         }
         this.houseNumber.setValue(addressData.houseNumber);
 
-        this.onChange(this.addressData.getValues());
-        this.cdr.detectChanges();
+        if (this.addressForm.valid) {
+          const [placeId, types] = await this.addressData.getPlaceIdByAddress();
+          if (types.includes('street_address')) {
+            this.placeId.setValue(placeId);
+            this.onChange(this.addressData.getValues());
+          } else {
+            this.houseNumber.setErrors({ invalidHouseNumber: true });
+          }
+          this.isValidating = false;
+          this.onValidatorChange?.();
+          this.cdr.markForCheck();
+        }
 
         this.delayAutocomplete();
       });
@@ -319,7 +357,7 @@ export class AddressInputComponent implements OnInit, AfterViewInit, OnDestroy,
             });
           }
         },
-        error: (error) => {
+        error: () => {
           this.ngZone.run(() => {
             this.isMapLoaded$.next(false);
             this.cleanupGoogleMapUtilities();
@@ -489,7 +527,6 @@ export class AddressInputComponent implements OnInit, AfterViewInit, OnDestroy,
       await this.addressData.setCity({ placeUk, placeEn });
       await this.addressData.setStreet({ placeUk, placeEn });
 
-      this.placeId.setValue(street.place_id);
       this.allowDistrictEdit && this.district.enable();
       this.district.markAsTouched();
     } else {
@@ -537,9 +574,8 @@ export class AddressInputComponent implements OnInit, AfterViewInit, OnDestroy,
   }
 
   onDistrictChange(district: string, districtEn: string): void {
-    this.allowDistrictEdit && this.addressData.setCustomDistrict(district, districtEn);
-
     this.OnChangeAndTouched();
+    this.allowDistrictEdit && this.addressData.setCustomDistrict(district, districtEn);
   }
 
   onHouseCorpusChange(): void {
@@ -566,7 +602,6 @@ export class AddressInputComponent implements OnInit, AfterViewInit, OnDestroy,
     if (typeof window?.google?.maps === 'undefined' || !this.isMapLoaded$.value || !this.map?.googleMap) {
       return;
     }
-
     this.addressCoords = $event.latLng.toJSON();
 
     this.addressData.setCoordinates(this.addressCoords, { fetch: true });
@@ -673,9 +708,10 @@ export class AddressInputComponent implements OnInit, AfterViewInit, OnDestroy,
     }
     this.onChange(this.addressData.getValues());
     this.markAsTouched();
+    this.addressForm.markAsDirty();
   }
 
-  //Set users current location
+  // Set users current location
   private setCurrentLocation(): void {
     navigator.geolocation.getCurrentPosition(
       (position) => this.handleGeolocationSuccess(position),

src/app/ubs/shared/components/ubs-add-address-pop-up/ubs-add-address-pop-up.component.html

@@ -1,4 +1,4 @@
-<form [formGroup]="addAddressForm" class="row adress">
+<form id="address-form" [formGroup]="addAddressForm" class="row adress">
   <div class="w-100">
     <h2 *ngIf="!data.edit" class="personal-info-pop-up-title">{{ 'personal-info.pop-up-title' | translate }}</h2>
     <h2 *ngIf="data.edit" class="personal-info-pop-up-title">{{ 'personal-info.pop-up-title-edit' | translate }}</h2>
@@ -18,7 +18,13 @@ <h2 *ngIf="data.edit" class="personal-info-pop-up-title">{{ 'personal-info.pop-u
   <button class="ubs-secondary-global-button m-btn" (click)="onNoClick()">
     {{ 'personal-info.pop-up-cancel' | translate }}
   </button>
-  <button class="ubs-primary-global-button m-btn" (click)="chooseActions()" [disabled]="addAddressForm.invalid || !addAddressForm.touched">
+  <button
+    class="ubs-primary-global-button m-btn"
+    type="submit"
+    form="address-form"
+    (click)="chooseActions()"
+    [disabled]="addAddressForm.invalid || !addAddressForm.touched"
+  >
     {{ (data.edit ? 'personal-info.pop-up-save-changes' : 'personal-info.pop-up-add-address') | translate }}
   </button>
 </div>

src/app/ubs/shared/components/ubs-add-address-pop-up/ubs-add-address-pop-up.component.ts

@@ -1,10 +1,9 @@
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Component, Inject, OnInit } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { Address, AddressData, CourierLocations, DistrictsDtos } from 'src/app/ubs/ubs/models/ubs.interface';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { Address, AddressData, CourierLocations } from 'src/app/ubs/ubs/models/ubs.interface';
 import { Store } from '@ngrx/store';
 import { CreateAddress, DeleteAddress, UpdateAddress } from 'src/app/store/actions/order.actions';
-import { CAddressData } from 'src/app/ubs/ubs/models/ubs.model';
 import { UpdateOrderAddress } from 'src/app/store/actions/bigOrderTable.actions';
 import { SetCursorWaite } from 'src/app/store/actions/ubs-admin.actions';
 
@@ -17,26 +16,6 @@ export class UBSAddAddressPopUpComponent implements OnInit {
   addAddressForm: FormGroup;
   currentLanguage: string;
   locations: CourierLocations;
-  districtList: DistrictsDtos[];
-  addressData: CAddressData;
-
-  autocompleteRegionRequest = {
-    input: '',
-    types: ['administrative_area_level_1'],
-    componentRestrictions: { country: 'uk' }
-  };
-
-  autocompleteCityRequest = {
-    input: '',
-    types: ['(cities)'],
-    componentRestrictions: { country: 'uk' }
-  };
-
-  autocompleteStreetRequest = {
-    input: '',
-    types: ['address'],
-    componentRestrictions: { country: 'uk' }
-  };
 
   constructor(
     private fb: FormBuilder,

src/app/ubs/shared/components/ubs-input-error/ubs-input-error.component.ts

@@ -4,16 +4,9 @@ import { Patterns } from 'src/assets/patterns/patterns';
 import { inputsName } from 'src/app/greencity/modules/user/models/error-type.model';
 
 enum errorType {
-  email = 'email',
-  pattern = 'pattern',
-  wrongNumber = 'wrongNumber',
-  minlength = 'minlength',
-  maxlength = 'maxlength',
   required = 'required',
-  newPasswordMatchesOld = 'newPasswordMatchesOld',
-  confirmPasswordMistmatch = 'confirmPasswordMistmatch',
-  requiredFromDropdown = 'requiredFromDropdown',
-  emailExist = 'emailExist'
+  pattern = 'pattern',
+  maxlength = 'maxlength'
 }
 
 @Component({
@@ -32,6 +25,7 @@ export class UBSInputErrorComponent implements OnInit {
     emailEmployee: 'input-error.email-required-employee',
     phoneEmployee: 'input-error.phone-required-employee',
     houseNumber: 'input-error.house-number',
+    invalidHouseNumber: 'input-error.invalid-house-number',
     minlength: 'input-error.minlength-short',
     maxlength: 'input-error.max-length',
     maxlengthEmail: 'input-error.max-length-email',
@@ -64,8 +58,8 @@ export class UBSInputErrorComponent implements OnInit {
   }
 
   getType() {
-    Object.values(errorType).forEach((err) => {
-      if (this.formElement.errors?.[err]) {
+    if (this.formElement.errors) {
+      Object.keys(this.formElement.errors).forEach((err) => {
         switch (err) {
           case errorType.required:
             this.errorMessage = this.getRequiredErrorMessage(this.formElement.errors.required, this.inputName);
@@ -79,8 +73,8 @@ export class UBSInputErrorComponent implements OnInit {
           default:
             this.errorMessage = this.validationErrors[err];
         }
-      }
-    });
+      });
+    }
   }
 
   getRequiredErrorMessage(required: boolean, inputName: string): string {

src/app/ubs/ubs/components/ubs-personal-information/ubs-order-address/ubs-order-address.component.ts

@@ -135,7 +135,7 @@ export class UbsOrderAddressComponent implements OnInit, OnDestroy {
         switchMap((clonedAddress) => {
           if (!clonedAddress.placeId) {
             const latLng = { lat: clonedAddress.coordinates.latitude, lng: clonedAddress.coordinates.longitude };
-            return from(this.addressData.getAddressPlaceId(latLng)).pipe(
+            return from(this.addressData.getPlaceIdByCoordinates(latLng)).pipe(
               switchMap((placeId: string) => {
                 clonedAddress.placeId = placeId;
                 return of(clonedAddress);