Program registration attribute portal (#5858)

* Frontend alligning to new registration attribute & fsp config change

Renamed portal models according to new data structure, registration attribtes & new fsp conig

Added missing import

Check voucher support with fspName instead of label

* Styling changes

---------

Co-authored-by: Ruben <vandervalk@geoit.nl>

interfaces/Portal/src/app/components/registration-activity-overview/registration-activity-overview.component.ts

@@ -17,8 +17,8 @@ import { AuthService } from '../../auth/auth.service';
 import Permission from '../../auth/permission.enum';
 import EventType from '../../enums/event-type.enum';
 import { Attribute } from '../../models/attribute.model';
-import { AnswerType } from '../../models/fsp.model';
 import { Person } from '../../models/person.model';
+import { RegistrationAttributeType } from '../../models/registration-attribute.model';
 import { RegistrationActivityDetailAccordionComponent } from '../../program/registration-activity-detail-accordion/registration-activity-detail-accordion.component';
 import { EnumService } from '../../services/enum.service';
 import { MessagesService } from '../../services/messages.service';
@@ -199,7 +199,7 @@ export class RegistrationActivityOverviewComponent implements OnInit {
             (attr) => attr.name === change.attributes.fieldName,
           );
 
-          if (attribute?.type === AnswerType.Boolean) {
+          if (attribute?.type === RegistrationAttributeType.Boolean) {
             const booleanLabel = {
               true: this.translate.instant(
                 'page.program.program-people-affected.column.custom-attribute-true',

interfaces/Portal/src/app/components/registration-personal-information/registration-personal-information.component.ts

@@ -52,7 +52,7 @@ export class RegistrationPersonalInformationComponent implements OnInit {
   ];
 
   private canUpdatePaData: boolean;
-  private canUpdatePaFsp: boolean;
+  private canUpdatePaProgramFspConfig: boolean;
   private canViewPersonalData: boolean;
   private canUpdateRegistrationAttributeFinancial: boolean;
   private canUpdatePersonalData: boolean;
@@ -161,15 +161,13 @@ export class RegistrationPersonalInformationComponent implements OnInit {
     }
 
     if (
-      this.person.financialServiceProvider &&
+      this.person.financialServiceProviderName &&
       this.program.financialServiceProviderConfigurations
     ) {
       this.personalInfoTable.push({
         label: this.getLabel('fsp'),
         value: this.translatableString.get(
-          this.program.financialServiceProviderConfigurations.find(
-            (i) => i.name === this.person.financialServiceProvider,
-          )?.displayName,
+          this.person.programFinancialServiceProviderConfigurationLabel,
         ),
       });
     }
@@ -193,7 +191,7 @@ export class RegistrationPersonalInformationComponent implements OnInit {
         canUpdateRegistrationAttributeFinancial:
           this.canUpdateRegistrationAttributeFinancial,
         canUpdatePersonalData: this.canUpdatePersonalData,
-        canUpdatePaFsp: this.canUpdatePaFsp,
+        canUpdatePaProgramFspConfig: this.canUpdatePaProgramFspConfig,
         canViewMessageHistory: this.canViewMessageHistory,
         canViewPaymentData: this.canViewPaymentData,
       },
@@ -206,9 +204,10 @@ export class RegistrationPersonalInformationComponent implements OnInit {
     this.canUpdatePaData = this.authService.hasAllPermissions(this.program.id, [
       Permission.RegistrationAttributeUPDATE,
     ]);
-    this.canUpdatePaFsp = this.authService.hasAllPermissions(this.program.id, [
-      Permission.RegistrationFspUPDATE,
-    ]);
+    this.canUpdatePaProgramFspConfig = this.authService.hasAllPermissions(
+      this.program.id,
+      [Permission.RegistrationFspUPDATE],
+    );
     this.canViewPersonalData = this.authService.hasAllPermissions(
       this.program.id,
       [Permission.RegistrationPersonalREAD],

interfaces/Portal/src/app/components/registration-profile/registration-profile.component.html

@@ -20,7 +20,7 @@
       <ng-container
         *ngIf="
           canViewPhysicalCards(person.programId) &&
-          fspHasPhysicalCardSupport(person.financialServiceProvider)
+          fspHasPhysicalCardSupport(person.financialServiceProviderName)
         "
       >
         <div class="ion-margin-vertical ion-padding-vertical">

interfaces/Portal/src/app/components/registration-profile/registration-profile.component.ts

@@ -65,7 +65,7 @@ export class RegistrationProfileComponent implements OnInit {
   }
 
   public fspHasPhysicalCardSupport(
-    fspName: Person['financialServiceProvider'],
+    fspName: Person['financialServiceProviderName'],
   ): boolean {
     return PaymentUtils.hasPhysicalCardSupport(fspName);
   }

interfaces/Portal/src/app/components/update-fsp/update-fsp.component.html

@@ -11,64 +11,24 @@
       <div>
         <ion-item class="ion-margin-bottom">
           <ion-select
-            *ngIf="fspConfigList?.length > 0"
+            *ngIf="programFspConfigList?.length > 0"
             style="max-width: 100%"
             ngDefaultControl
             name="propertyInput"
             [(ngModel)]="propertyModel"
             [value]="value"
             [placeholder]="placeholder"
             interface="popover"
-            (ionChange)="onFspChange($event)"
+            (ionChange)="onFspSelectionChange($event)"
           >
             <ion-select-option
-              *ngFor="let fspItem of fspList"
-              value="{{ fspItem.fsp }}"
+              *ngFor="let fspConfigItem of programFspConfigList"
+              value="{{ fspConfigItem.name }}"
             >
-              {{ fspItem.displayName }}
+              {{ fspConfigItem.translatedLabel }}
             </ion-select-option>
           </ion-select>
         </ion-item>
-        <ng-container *ngIf="propertyModel !== startingFspName">
-          <ion-text
-            class="ion-padding"
-            *ngIf="attributeDifference.length > 0"
-          >
-            {{
-              'page.program.program-people-affected.edit-person-affected-popup.fspChangeWarning'
-                | translate
-            }}<br />
-            <div>
-              <ul>
-                <li *ngFor="let attr of attributeDifference">
-                  {{ attr.label | translate }}
-                </li>
-              </ul>
-            </div>
-          </ion-text>
-          <p *ngIf="selectedFspAttributes.length > 0">
-            {{
-              'page.program.program-people-affected.edit-person-affected-popup.fspNewAttributesExplanation'
-                | translate
-            }}
-          </p>
-          <div
-            class="input-item divider-bottom ion-padding"
-            *ngFor="let attribute of selectedFspAttributes"
-          >
-            <app-update-property-item
-              [type]="attribute.type"
-              [label]="attribute.label"
-              [value]="attributeValues[attribute.name]"
-              [options]="attribute.options"
-              [explanation]="explanation | translate"
-              [placeholder]="attribute.placeholder?.en"
-              class="ion-margin-vertical"
-              (ionChange)="onAttributeChange(attribute.name, $event)"
-              [showSubmit]="false"
-            ></app-update-property-item>
-          </div>
-        </ng-container>
       </div>
       <ion-row class="ion-justify-content-end">
         <ion-button

interfaces/Portal/src/app/components/update-fsp/update-fsp.component.ts

@@ -3,15 +3,12 @@ import { NgModel } from '@angular/forms';
 import { AlertController } from '@ionic/angular';
 import { TranslateService } from '@ngx-translate/core';
 import FspName from 'src/app/enums/fsp-name.enum';
+import { Person } from 'src/app/models/person.model';
 import { TranslatableStringService } from 'src/app/services/translatable-string.service';
-import {
-  AnswerType,
-  FinancialServiceProviderConfiguration,
-} from '../../models/fsp.model';
+import { FinancialServiceProviderConfiguration } from '../../models/fsp.model';
 import { ErrorHandlerService } from '../../services/error-handler.service';
 import { ProgramsServiceApiService } from '../../services/programs-service-api.service';
 import { actionResult } from '../../shared/action-result';
-import { CheckAttributeInputUtils } from '../../shared/utils/check-attribute-input.utils';
 
 @Component({
   selector: 'app-update-fsp',
@@ -44,7 +41,7 @@ export class UpdateFspComponent implements OnInit {
   public inProgress: boolean;
 
   @Input()
-  public fspConfigList: FinancialServiceProviderConfiguration[];
+  public programFspConfigList: FinancialServiceProviderConfiguration[];
 
   @Input()
   public referenceId: string;
@@ -73,22 +70,27 @@ export class UpdateFspComponent implements OnInit {
   public selectedFspName: string;
   public attributesToSave: object = {};
   public enableUpdateBtn = true;
+  public reason = 'Financial service provider change';
 
   ngOnInit() {
     this.propertyModel = this.value;
     this.startingFspName = this.value;
-    this.getFspAttributes(this.value);
+    this.setSelectedFspAndPrepareDropdown(this.value);
     this.startingAttributes = [...this.selectedFspAttributes];
     this.enableUpdateBtn = false;
   }
 
   public updateChosenFsp() {
+    const programFspConfigName: keyof Person =
+      'programFinancialServiceProviderConfigurationName';
+
     this.programsService
-      .updateChosenFsp(
-        this.referenceId,
+      .updatePaAttribute(
         this.programId,
+        this.referenceId,
+        programFspConfigName, // Not sure how this should be done in a strongly typed way in our Portal way of working
         this.selectedFspName,
-        this.attributesToSave,
+        this.reason,
       )
       .then(
         () => {
@@ -116,75 +118,27 @@ export class UpdateFspComponent implements OnInit {
       );
   }
 
-  public onFspChange({ detail }) {
-    this.getFspAttributes(detail.value);
-    this.checkAttributesCorrectlyFilled();
+  public onFspSelectionChange({ detail }) {
+    this.setSelectedFspAndPrepareDropdown(detail.value);
+    this.enableUpdateBtn = this.startingFspName !== this.selectedFspName;
   }
 
-  public getFspAttributes(fspString: FspName) {
-    this.selectedFspAttributes = [];
-    this.attributesToSave = {};
-    if (this.fspConfigList) {
-      this.fspConfigList = this.fspConfigList.map((fspItem) => ({
-        ...fspItem,
-        displayName: this.translatableString.get(fspItem.displayName),
-      }));
+  public setSelectedFspAndPrepareDropdown(fspString: FspName) {
+    if (this.programFspConfigList) {
+      this.programFspConfigList = this.programFspConfigList.map(
+        (programFspConfig) => ({
+          ...programFspConfig,
+          translatedLabel: this.translatableString.get(programFspConfig.label),
+        }),
+      );
 
-      const selectedFsp = this.fspConfigList.find(
+      const selectedFsp = this.programFspConfigList.find(
         (fspItem) => fspItem.name === fspString,
       );
 
       if (selectedFsp) {
         this.selectedFspName = selectedFsp.name;
-        this.selectedFspAttributes = selectedFsp.editableAttributes.map(
-          (attr) => ({
-            ...attr,
-            label: this.translatableString.get(attr.label),
-          }),
-        );
-
-        // Preload attributesToSave ..
-        this.attributesToSave = this.selectedFspAttributes.reduce(
-          (obj, key) => {
-            obj[key.name] =
-              //.. with prefilled value if available
-              this.attributeValues[key.name] ||
-              // .. and with empty string / null otherwise
-              (key.type === AnswerType.Text ? '' : null);
-            return obj;
-          },
-          {},
-        );
-      }
-
-      this.attributeDifference = this.startingAttributes.filter(
-        (attr) => !this.selectedFspAttributes.includes(attr),
-      );
-    }
-  }
-
-  public onAttributeChange(attrName, { detail }) {
-    this.attributesToSave = {
-      ...this.attributesToSave,
-      [attrName]: detail.value.trim(),
-    };
-
-    this.checkAttributesCorrectlyFilled();
-  }
-
-  private checkAttributesCorrectlyFilled() {
-    for (const attr of this.selectedFspAttributes) {
-      if (
-        !CheckAttributeInputUtils.isAttributeCorrectlyFilled(
-          attr.type,
-          attr.pattern,
-          this.attributesToSave[attr.name],
-        )
-      ) {
-        this.enableUpdateBtn = false;
-        return;
       }
     }
-    this.enableUpdateBtn = true;
   }
 }

interfaces/Portal/src/app/components/update-property-item/update-property-item.component.html

@@ -9,7 +9,7 @@
       interface="popover"
       class="ion-margin-top"
       [disabled]="isDisabled"
-      [multiple]="type === answerType.MultiSelect"
+      [multiple]="type === registrationAttributeType.MultiSelect"
     >
       <ion-select-option
         *ngFor="let option of translatedOptions()"
@@ -36,7 +36,7 @@
       <ion-row class="ion-no-padding">
         <ion-col class="ion-no-padding">
           <ng-container [ngSwitch]="type">
-            <ng-container *ngSwitchCase="answerType.Number">
+            <ng-container *ngSwitchCase="registrationAttributeType.Number">
               <ion-input
                 ngDefaultControl
                 name="propertyInput"
@@ -53,7 +53,7 @@
                 data-testid="update-property-item-numeric-input"
               ></ion-input>
             </ng-container>
-            <ng-container *ngSwitchCase="answerType.PhoneNumber">
+            <ng-container *ngSwitchCase="registrationAttributeType.PhoneNumber">
               <ion-input
                 ngDefaultControl
                 name="propertyInput"
@@ -68,7 +68,7 @@
                 fill="outline"
               ></ion-input>
             </ng-container>
-            <ng-container *ngSwitchCase="answerType.Enum">
+            <ng-container *ngSwitchCase="registrationAttributeType.Enum">
               <ng-container
                 *ngTemplateOutlet="
                   selectInput;
@@ -80,7 +80,7 @@
                 "
               ></ng-container>
             </ng-container>
-            <ng-container *ngSwitchCase="answerType.MultiSelect">
+            <ng-container *ngSwitchCase="registrationAttributeType.MultiSelect">
               <ng-container
                 *ngTemplateOutlet="
                   selectInput;
@@ -92,7 +92,7 @@
                 "
               ></ng-container>
             </ng-container>
-            <ng-container *ngSwitchCase="answerType.Boolean">
+            <ng-container *ngSwitchCase="registrationAttributeType.Boolean">
               <ion-checkbox
                 ngDefaultControl
                 [(ngModel)]="propertyModel"
@@ -140,7 +140,9 @@
               (confirm)="doUpdate($event)"
               [subHeader]="reasonSubheader"
               [inputProps]="reasonInputProps"
-              [bypassModalComponent]="type === answerType.Boolean"
+              [bypassModalComponent]="
+                type === registrationAttributeType.Boolean
+              "
               class="ion-margin-start ion-float-right ion-text-uppercase"
               fill="clear"
               type="submit"