Merge pull request #3633 from alberto-art3ch/WEB-954/migrate-subscription-management-savings-clients

WEB-954: Migrate Subscription management : clients and savings

Author: alberto-art3ch

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

@@ -7,13 +7,7 @@
  */
 
 import { ChangeDetectionStrategy, Component, Input, OnInit, inject } from '@angular/core';
-import {
-  UntypedFormBuilder,
-  UntypedFormControl,
-  UntypedFormGroup,
-  Validators,
-  ReactiveFormsModule
-} from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { Datatables } from 'app/core/utils/datatables';
 import { SettingsService } from 'app/settings/settings.service';
 import { MatCheckbox } from '@angular/material/checkbox';
@@ -35,14 +29,14 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ClientDatatableStepComponent implements OnInit {
-  private formBuilder = inject(UntypedFormBuilder);
+  private formBuilder = inject(FormBuilder);
   private settingsService = inject(SettingsService);
   private datatableService = inject(Datatables);
 
   /** Input Fields Data */
   @Input() datatableData: any;
   /** Create Input Form */
-  datatableForm: UntypedFormGroup;
+  datatableForm: FormGroup;
 
   datatableInputs: any = [];
 
@@ -53,12 +47,12 @@ export class ClientDatatableStepComponent implements OnInit {
       input.controlName = this.getInputName(input);
       if (!input.isColumnNullable) {
         if (this.isNumeric(input.columnDisplayType)) {
-          inputItems[input.controlName] = new UntypedFormControl(0, [Validators.required]);
+          inputItems[input.controlName] = new FormControl(0, [Validators.required]);
         } else {
-          inputItems[input.controlName] = new UntypedFormControl('', [Validators.required]);
+          inputItems[input.controlName] = new FormControl('', [Validators.required]);
         }
       } else {
-        inputItems[input.controlName] = new UntypedFormControl('');
+        inputItems[input.controlName] = new FormControl('');
       }
     });
     this.datatableForm = this.formBuilder.group(inputItems);

src/app/clients/client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component.ts

@@ -7,15 +7,16 @@
  */
 
 /** Angular Imports */
-import { ChangeDetectionStrategy, Component, OnInit, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, DestroyRef, OnInit, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import {
   MatDialogRef,
   MAT_DIALOG_DATA,
   MatDialogTitle,
   MatDialogActions,
   MatDialogClose
 } from '@angular/material/dialog';
-import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
+import { FormGroup, FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 
 /** Custom Services */
 import { SettingsService } from 'app/settings/settings.service';
@@ -41,16 +42,17 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 })
 export class ClientFamilyMemberDialogComponent implements OnInit {
   dialogRef = inject<MatDialogRef<ClientFamilyMemberDialogComponent>>(MatDialogRef);
-  private formBuilder = inject(UntypedFormBuilder);
+  private formBuilder = inject(FormBuilder);
   private dateUtils = inject(Dates);
   data = inject(MAT_DIALOG_DATA);
   private settingsService = inject(SettingsService);
+  private destroyRef = inject(DestroyRef);
 
   /** Maximum Due Date allowed. */
   maxDate = new Date();
 
   /** Add/Edit family member form. */
-  familyMemberForm: UntypedFormGroup;
+  familyMemberForm: FormGroup;
 
   ngOnInit() {
     this.maxDate = this.settingsService.businessDate;
@@ -72,14 +74,17 @@ export class ClientFamilyMemberDialogComponent implements OnInit {
     }
 
     // Add subscription to date of birth changes to update age
-    this.familyMemberForm.get('dateOfBirth').valueChanges.subscribe((dateOfBirth: any) => {
-      if (dateOfBirth) {
-        const age = this.calculateAge(dateOfBirth);
-        this.familyMemberForm.get('age').setValue(age);
-      } else {
-        this.familyMemberForm.get('age').setValue('');
-      }
-    });
+    this.familyMemberForm
+      .get('dateOfBirth')
+      .valueChanges.pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((dateOfBirth: any) => {
+        if (dateOfBirth) {
+          const age = this.calculateAge(dateOfBirth);
+          this.familyMemberForm.get('age').setValue(age);
+        } else {
+          this.familyMemberForm.get('age').setValue('');
+        }
+      });
 
     // If a date of birth is already set, calculate the age
     const currentDob = this.familyMemberForm.get('dateOfBirth').value;

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

@@ -10,22 +10,16 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  OnInit,
-  OnDestroy,
+  DestroyRef,
+  EventEmitter,
   Input,
+  OnInit,
   Output,
-  EventEmitter,
   inject
 } from '@angular/core';
-import {
-  UntypedFormBuilder,
-  UntypedFormGroup,
-  Validators,
-  UntypedFormControl,
-  ReactiveFormsModule
-} from '@angular/forms';
-import { Subject } from 'rxjs';
-import { filter, switchMap, takeUntil } from 'rxjs/operators';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormBuilder, FormGroup, Validators, FormControl, ReactiveFormsModule } from '@angular/forms';
+import { filter, switchMap } 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';
@@ -59,15 +53,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ClientGeneralStepComponent implements OnInit, OnDestroy {
-  private formBuilder = inject(UntypedFormBuilder);
+export class ClientGeneralStepComponent implements OnInit {
+  private formBuilder = inject(FormBuilder);
   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>();
+  private destroyRef = inject(DestroyRef);
 
   @Output() legalFormChangeEvent = new EventEmitter<{ legalForm: number }>();
 
@@ -82,7 +74,7 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy {
   /** Client Template */
   @Input() clientTemplate: any;
   /** Create Client Form */
-  createClientForm: UntypedFormGroup;
+  createClientForm: FormGroup;
 
   /** Office Options */
   officeOptions: any;
@@ -176,23 +168,23 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy {
   buildDependencies() {
     this.createClientForm
       .get('legalFormId')
-      .valueChanges.pipe(takeUntil(this.destroy$))
+      .valueChanges.pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((legalFormId: number) => {
         this.legalFormChangeEvent.emit({ legalForm: legalFormId });
         if (legalFormId === LegalFormId.PERSON) {
           this.createClientForm.removeControl('fullname');
           this.createClientForm.removeControl('clientNonPersonDetails');
           this.createClientForm.addControl(
             'firstname',
-            new UntypedFormControl('', [
+            new FormControl('', [
               Validators.required,
               Validators.pattern('(^[A-z]).*')
             ])
           );
-          this.createClientForm.addControl('middlename', new UntypedFormControl('', Validators.pattern('(^[A-z]).*')));
+          this.createClientForm.addControl('middlename', new FormControl('', Validators.pattern('(^[A-z]).*')));
           this.createClientForm.addControl(
             'lastname',
-            new UntypedFormControl('', [
+            new FormControl('', [
               Validators.required,
               Validators.pattern('(^[A-z]).*')
             ])
@@ -203,7 +195,7 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy {
           this.createClientForm.removeControl('lastname');
           this.createClientForm.addControl(
             'fullname',
-            new UntypedFormControl('', [
+            new FormControl('', [
               Validators.required,
               Validators.pattern('(^[A-z]).*')
             ])
@@ -226,20 +218,20 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy {
     this.createClientForm.get('legalFormId').patchValue(LegalFormId.PERSON);
     this.createClientForm
       .get('active')
-      .valueChanges.pipe(takeUntil(this.destroy$))
+      .valueChanges.pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((active: boolean) => {
         if (active) {
-          this.createClientForm.addControl('activationDate', new UntypedFormControl('', Validators.required));
+          this.createClientForm.addControl('activationDate', new FormControl('', Validators.required));
         } else {
           this.createClientForm.removeControl('activationDate');
         }
       });
     this.createClientForm
       .get('addSavings')
-      .valueChanges.pipe(takeUntil(this.destroy$))
+      .valueChanges.pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((active: boolean) => {
         if (active) {
-          this.createClientForm.addControl('savingsProductId', new UntypedFormControl('', Validators.required));
+          this.createClientForm.addControl('savingsProductId', new FormControl('', Validators.required));
         } else {
           this.createClientForm.removeControl('savingsProductId');
         }
@@ -249,18 +241,13 @@ export class ClientGeneralStepComponent implements OnInit, OnDestroy {
       .valueChanges.pipe(
         filter((officeId: number) => !!officeId),
         switchMap((officeId: number) => this.clientService.getClientWithOfficeTemplate(officeId)),
-        takeUntil(this.destroy$)
+        takeUntilDestroyed(this.destroyRef)
       )
       .subscribe((clientTemplate: any) => {
         this.staffOptions = clientTemplate.staffOptions;
       });
   }
 
-  ngOnDestroy() {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
   getDateLabel(legalFormId: number, values: string[]): string {
     return legalFormId === LegalFormId.PERSON ? values[0] : values[1];
   }

src/app/clients/clients-view/address-tab/address-tab.component.ts

@@ -7,9 +7,10 @@
  */
 
 /** Angular Imports */
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, DestroyRef, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { UntypedFormGroup } from '@angular/forms';
+import { FormGroup } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
 import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
@@ -65,6 +66,7 @@ export class AddressTabComponent {
   private dialog = inject(MatDialog);
   private translateService = inject(TranslateService);
   private postalCodeLookup = inject(PostalCodeLookupService);
+  private destroyRef = inject(DestroyRef);
 
   /** Client Address Data */
   clientAddressData: any;
@@ -82,14 +84,14 @@ export class AddressTabComponent {
    * @param {TranslateService} translateService Translate Service.
    */
   constructor() {
-    this.route.data.subscribe(
-      (data: { clientAddressData: any; clientAddressFieldConfig: any; clientAddressTemplateData: any }) => {
+    this.route.data
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((data: { clientAddressData: any; clientAddressFieldConfig: any; clientAddressTemplateData: any }) => {
         this.clientAddressData = data.clientAddressData;
         this.clientAddressFieldConfig = data.clientAddressFieldConfig;
         this.clientAddressTemplate = data.clientAddressTemplateData;
         this.clientId = this.route.parent.snapshot.paramMap.get('clientId');
-      }
-    );
+      });
   }
 
   /**
@@ -170,7 +172,7 @@ export class AddressTabComponent {
     let postalSub: Subscription;
 
     dialogRef.afterOpened().subscribe(() => {
-      const form: UntypedFormGroup = dialogRef.componentInstance.form;
+      const form: FormGroup = dialogRef.componentInstance.form;
       const postalCodeControl = form.get('postalCode');
       if (!postalCodeControl) return;
 
@@ -226,7 +228,7 @@ export class AddressTabComponent {
   /**
    * Gets the ISO country code for the currently selected country in the form.
    */
-  private getSelectedCountryCode(form: UntypedFormGroup): string | null {
+  private getSelectedCountryCode(form: FormGroup): string | null {
     const countryIdValue = form.get('countryId')?.value;
     if (!countryIdValue) return null;
 
@@ -245,7 +247,7 @@ export class AddressTabComponent {
    * Clears form fields that were previously set by auto-fill,
    * so stale data doesn't persist when a new lookup fails or returns different results.
    */
-  private clearAutoFilledFields(form: UntypedFormGroup) {
+  private clearAutoFilledFields(form: FormGroup) {
     for (const fieldName of this.autoFilledFields) {
       const control = form.get(fieldName);
       if (control) {
@@ -256,7 +258,7 @@ export class AddressTabComponent {
     this.autoFilledFields.clear();
   }
 
-  private applyResolvedAddress(form: UntypedFormGroup, address: ResolvedAddress) {
+  private applyResolvedAddress(form: FormGroup, address: ResolvedAddress) {
     const cityControl = form.get('city');
     if (cityControl && address.city) {
       cityControl.setValue(address.city);

src/app/clients/clients-view/charges/charges-overview/charges-overview.component.ts

@@ -7,7 +7,8 @@
  */
 
 /** Angular Imports */
-import { ChangeDetectionStrategy, Component, OnInit, ViewChild, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, DestroyRef, OnInit, ViewChild, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
 import {
@@ -58,6 +59,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 export class ChargesOverviewComponent implements OnInit {
   private route = inject(ActivatedRoute);
   dialog = inject(MatDialog);
+  private destroyRef = inject(DestroyRef);
 
   /** Columns to be displayed in charge overview table. */
   displayedColumns: string[] = [
@@ -82,7 +84,7 @@ export class ChargesOverviewComponent implements OnInit {
    * @param {MatDialog} dialog Dialog reference.
    */
   constructor() {
-    this.route.data.subscribe((data: { clientChargesData: any }) => {
+    this.route.data.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((data: { clientChargesData: any }) => {
       this.chargeOverviewData = data.clientChargesData;
     });
   }

src/app/clients/clients-view/charges/client-pay-charges/client-pay-charges.component.ts

@@ -7,8 +7,9 @@
  */
 
 /** Angular Imports */
-import { ChangeDetectionStrategy, Component, OnInit, inject } from '@angular/core';
-import { UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
+import { ChangeDetectionStrategy, Component, DestroyRef, OnInit, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
 /** Custom Services. */
@@ -31,11 +32,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 })
 export class ClientPayChargesComponent implements OnInit {
   private clientsService = inject(ClientsService);
-  private formBuilder = inject(UntypedFormBuilder);
+  private formBuilder = inject(FormBuilder);
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dateUtils = inject(Dates);
   private settingsService = inject(SettingsService);
+  private destroyRef = inject(DestroyRef);
 
   /** Transaction Form. */
   transactionForm: any;
@@ -53,7 +55,7 @@ export class ClientPayChargesComponent implements OnInit {
    * @param {SettingsService} settingsService Setting service
    */
   constructor() {
-    this.route.data.subscribe((data: { transactionData: any }) => {
+    this.route.data.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((data: { transactionData: any }) => {
       this.transactionData = data.transactionData;
     });
   }