WEB-600 feat:External National ID System integration for client creation/editing (#3145)

improve

src/app/clients/client-stepper/client-general-step/client-general-step.component.html

@@ -39,9 +39,22 @@
     <mat-form-field class="flex-fill flex-23">
       <mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
       <input matInput formControlName="externalId" />
+      @if (!externalNationalIdService.isLoading && externalNationalIdService.statusMessageKey) {
+        <mat-hint>
+          <span
+            class="external-id-status"
+            [ngClass]="{
+              success: externalNationalIdService.statusMessageKey === 'External ID verified successfully',
+              error: externalNationalIdService.statusMessageKey !== 'External ID verified successfully'
+            }"
+          >
+            {{ 'labels.inputs.' + externalNationalIdService.statusMessageKey | translate }}
+          </span>
+        </mat-hint>
+      }
     </mat-form-field>
 
-    @if (createClientForm.contains('fullname')) {
+    @if (createClientForm.get('fullname')) {
       <mat-form-field class="flex-48">
         <mat-label>
           {{ 'labels.inputs.' + getDateLabel(createClientForm.value.legalFormId, ['Name', 'Entity Name']) | translate }}
@@ -62,13 +75,9 @@
       </mat-form-field>
     }
 
-    @if (
-      createClientForm.contains('firstname') ||
-      createClientForm.contains('middlename') ||
-      createClientForm.contains('lastname')
-    ) {
+    @if (createClientForm.get('firstname') || createClientForm.get('middlename') || createClientForm.get('lastname')) {
       <div class="name-fields-row">
-        @if (createClientForm.contains('firstname')) {
+        @if (createClientForm.get('firstname')) {
           <mat-form-field class="name-field first-name">
             <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
             <input matInput required formControlName="firstname" />
@@ -87,7 +96,7 @@
             }
           </mat-form-field>
         }
-        @if (createClientForm.contains('middlename')) {
+        @if (createClientForm.get('middlename')) {
           <mat-form-field class="name-field middle-name">
             <mat-label>{{ 'labels.inputs.Middle Name' | translate }}</mat-label>
             <input matInput formControlName="middlename" />
@@ -100,7 +109,7 @@
             }
           </mat-form-field>
         }
-        @if (createClientForm.contains('lastname')) {
+        @if (createClientForm.get('lastname')) {
           <mat-form-field class="name-field last-name">
             <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
             <input matInput required formControlName="lastname" />

src/app/clients/client-stepper/client-general-step/client-general-step.component.scss

@@ -123,6 +123,23 @@ mat-checkbox {
   }
 }
 
+.external-id-status {
+  font-size: 12px;
+  font-weight: 500;
+
+  &.loading {
+    color: #1976d2;
+  }
+
+  &.success {
+    color: #388e3c;
+  }
+
+  &.error {
+    color: #d32f2f;
+  }
+}
+
 @media (width <= 480px) {
   form {
     padding: 8px 0;

src/app/clients/client-stepper/client-general-step/client-general-step.component.ts

@@ -20,6 +20,7 @@ import { filter, switchMap, takeUntil } from 'rxjs/operators';
 import { ClientsService } from 'app/clients/clients.service';
 import { Dates } from 'app/core/utils/dates';
 import { LegalFormId } from 'app/clients/models/legal-form.enum';
+import { ExternalNationalIdService } from 'app/clients/services/external-national-id.service';
 
 /** Custom Services */
 import { SettingsService } from 'app/settings/settings.service';
@@ -37,6 +38,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   selector: 'mifosx-client-general-step',
   templateUrl: './client-general-step.component.html',
   styleUrls: ['./client-general-step.component.scss'],
+  providers: [ExternalNationalIdService],
   imports: [
     ...STANDALONE_SHARED_IMPORTS,
     MatDivider,
@@ -52,6 +54,7 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy {
   private dateUtils = inject(Dates);
   private settingsService = inject(SettingsService);
   private clientService = inject(ClientsService);
+  externalNationalIdService = inject(ExternalNationalIdService);
 
   /** Subject to trigger unsubscription on destroy */
   private destroy$ = new Subject<void>();
@@ -104,6 +107,7 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy {
     this.maxDate = this.settingsService.businessDate;
     this.setOptions();
     this.buildDependencies();
+    this.externalNationalIdService.watchExternalId(this.createClientForm, this.genderOptions);
   }
 
   /**