refactor: modal dialog improvements

projects/organization-management/src/app/pages/organization-settings/organization-settings-page.component.html

@@ -58,8 +58,8 @@ <h3>{{ 'account.organization.org_settings.preferences.subtitle' | translate }}</
     confirmText: 'account.update.button.label' | translate,
     rejectText: 'account.cancel.button.label' | translate,
     titleText: 'account.organization.budget_price_type.notification_modal.header' | translate,
-    faIconClass: 'text-warning pr-2',
-    faIcon: ['fas', 'triangle-exclamation']
+    icon: ['fas', 'triangle-exclamation'],
+    iconClass: 'text-warning pr-2'
   }"
   (confirmed)="submit()"
   (closed)="resetValue()"

src/app/pages/registration/services/registration-form-configuration/registration-form-configuration.service.spec.ts

@@ -1,8 +1,10 @@
 import { TestBed } from '@angular/core/testing';
 import { ActivatedRouteSnapshot, Params, UrlSegment } from '@angular/router';
-import { instance, mock, when } from 'ts-mockito';
+import { of } from 'rxjs';
+import { anyString, instance, mock, when } from 'ts-mockito';
 
 import { AccountFacade } from 'ish-core/facades/account.facade';
+import { AppFacade } from 'ish-core/facades/app.facade';
 import { FeatureToggleModule } from 'ish-core/feature-toggle.module';
 import { extractKeys } from 'ish-shared/formly/dev/testing/formly-testing-utils';
 import { FieldLibrary } from 'ish-shared/formly/field-library/field-library';
@@ -15,10 +17,13 @@ import {
 describe('Registration Form Configuration Service', () => {
   let registrationConfigurationService: RegistrationFormConfigurationService;
   let accountFacade: AccountFacade;
+  let appFacade: AppFacade;
   let fieldLibrary: FieldLibrary;
 
   beforeEach(() => {
     accountFacade = mock(AccountFacade);
+    appFacade = mock(AppFacade);
+    when(appFacade.serverSetting$(anyString())).thenReturn(of(true));
     fieldLibrary = mock(FieldLibrary);
     when(fieldLibrary.getConfigurationGroup('companyInfo')).thenReturn([
       {
@@ -56,6 +61,7 @@ describe('Registration Form Configuration Service', () => {
       imports: [FeatureToggleModule.forTesting()],
       providers: [
         { provide: AccountFacade, useFactory: () => instance(accountFacade) },
+        { provide: AppFacade, useFactory: () => instance(appFacade) },
         { provide: FieldLibrary, useFactory: () => instance(fieldLibrary) },
         RegistrationFormConfigurationService,
       ],

src/app/pages/registration/services/registration-form-configuration/registration-form-configuration.service.ts

@@ -1,5 +1,6 @@
 /* eslint-disable ish-custom-rules/no-intelligence-in-artifacts */
 import { Injectable } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormGroup, Validators } from '@angular/forms';
 import { ActivatedRouteSnapshot, Router } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@@ -9,6 +10,7 @@ import { filter, map, switchMap, take, tap } from 'rxjs/operators';
 import { v4 as uuid } from 'uuid';
 
 import { AccountFacade } from 'ish-core/facades/account.facade';
+import { AppFacade } from 'ish-core/facades/app.facade';
 import { FeatureToggleService } from 'ish-core/feature-toggle.module';
 import { Address } from 'ish-core/models/address/address.model';
 import { Credentials } from 'ish-core/models/credentials/credentials.model';
@@ -28,13 +30,21 @@ export interface RegistrationConfigType {
 @Injectable()
 // eslint-disable-next-line ish-custom-rules/project-structure
 export class RegistrationFormConfigurationService {
+  private isApprovalServiceRunning = true;
+
   constructor(
     private accountFacade: AccountFacade,
+    private appFacade: AppFacade,
     private router: Router,
     private modalService: NgbModal,
     private featureToggle: FeatureToggleService,
     private fieldLibrary: FieldLibrary
-  ) {}
+  ) {
+    this.appFacade
+      .serverSetting$('services.OrderApprovalServiceDefinition.runnable')
+      .pipe(takeUntilDestroyed())
+      .subscribe((enabled: boolean) => (this.isApprovalServiceRunning = enabled));
+  }
 
   extractConfig(route: ActivatedRouteSnapshot) {
     return {
@@ -345,42 +355,44 @@ export class RegistrationFormConfigurationService {
   }
 
   private getCustomerPreferencesConfig(): FormlyFieldConfig[] {
-    return [
-      {
-        type: 'ish-registration-heading-field',
-        props: {
-          headingSize: 'h2',
-          heading: 'account.organization.org_settings.preferences.subtitle',
-        },
-      },
-      {
-        type: 'ish-fieldset-field',
-        props: {
-          fieldsetClass: 'row',
-          childClass: 'col-md-10 col-lg-8 col-xl-6',
-        },
-        fieldGroup: [
+    return this.isApprovalServiceRunning
+      ? [
           {
-            type: 'ish-radio-group-field',
-            key: 'budgetPriceType',
-            defaultValue: 'gross',
+            type: 'ish-registration-heading-field',
             props: {
-              title: 'account.customer.price_type.label',
-              customDescription: 'account.registration.budget_price_type.info',
-              options: [
-                {
-                  value: 'gross',
-                  label: 'account.customer.price_type.gross.label',
-                },
-                {
-                  value: 'net',
-                  label: 'account.customer.price_type.net.label',
-                },
-              ],
+              headingSize: 'h2',
+              heading: 'account.organization.org_settings.preferences.subtitle',
             },
           },
-        ],
-      },
-    ];
+          {
+            type: 'ish-fieldset-field',
+            props: {
+              fieldsetClass: 'row',
+              childClass: 'col-md-10 col-lg-8 col-xl-6',
+            },
+            fieldGroup: [
+              {
+                type: 'ish-radio-group-field',
+                key: 'budgetPriceType',
+                defaultValue: 'gross',
+                props: {
+                  title: 'account.customer.price_type.label',
+                  customDescription: 'account.registration.budget_price_type.info',
+                  options: [
+                    {
+                      value: 'gross',
+                      label: 'account.customer.price_type.gross.label',
+                    },
+                    {
+                      value: 'net',
+                      label: 'account.customer.price_type.net.label',
+                    },
+                  ],
+                },
+              },
+            ],
+          },
+        ]
+      : [];
   }
 }

src/app/shared/components/common/modal-dialog/modal-dialog.component.html

@@ -1,9 +1,7 @@
 <ng-template #template>
   <div class="modal-header">
-    <h2 *ngIf="options?.titleText" class="modal-title">
-      <fa-icon *ngIf="options?.faIcon" class="{{ options.faIconClass }}" [icon]="options.faIcon" />{{
-        options.titleText
-      }}
+    <h2 *ngIf="options.titleText" class="modal-title">
+      <fa-icon *ngIf="options.icon" [icon]="options.icon" class="{{ options.iconClass }} " />{{ options.titleText }}
     </h2>
     <button type="button" class="close" [title]="'dialog.close.text' | translate" (click)="hide()">
       <span aria-hidden="true">&times;</span>

src/app/shared/components/common/modal-dialog/modal-dialog.component.ts

@@ -35,13 +35,13 @@ export interface ModalOptions extends NgbModalOptions {
    */
   rejectText?: string;
   /**
-   * Optional fa icon styling classes.
+   * Optional icon properties to display an icon in front of the title, e.g. ['fas', 'triangle-exclamation'],
    */
-  faIconClass?: string;
+  icon?: IconProp;
   /**
-   * Optional icon parameters.
+   * Optional icon styling classes, e.g. faIconClass: 'text-warning pr-2'
    */
-  faIcon?: IconProp;
+  iconClass?: string;
 }
 
 /**
@@ -63,7 +63,7 @@ export interface ModalOptions extends NgbModalOptions {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ModalDialogComponent<T> implements OnDestroy {
-  @Input() options: ModalOptions;
+  @Input({ required: true }) options: ModalOptions;
 
   @Output() confirmed = new EventEmitter<T>();
 

src/app/shared/formly/types/radio-group-field/radio-group-field.component.html

@@ -12,3 +12,5 @@
     <label class="form-check-label pr-3" [attr.for]="id">{{ opt.label }}</label>
   </ng-container>
 </ng-container>
+
+{{ props | json }}

src/app/shared/formly/types/radio-group-field/radio-group-field.component.spec.ts

@@ -2,11 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { FormlyModule } from '@ngx-formly/core';
 import { FormlySelectModule } from '@ngx-formly/core/select';
-import { TranslateModule } from '@ngx-translate/core';
-import { of } from 'rxjs';
-import { instance, mock, when } from 'ts-mockito';
 
-import { AccountFacade } from 'ish-core/facades/account.facade';
 import { FormlyTestingComponentsModule } from 'ish-shared/formly/dev/testing/formly-testing-components.module';
 import { FormlyTestingContainerComponent } from 'ish-shared/formly/dev/testing/formly-testing-container/formly-testing-container.component';
 
@@ -16,11 +12,8 @@ describe('Radio Group Field Component', () => {
   let component: FormlyTestingContainerComponent;
   let fixture: ComponentFixture<FormlyTestingContainerComponent>;
   let element: HTMLElement;
-  let accountFacade: AccountFacade;
 
   beforeEach(async () => {
-    accountFacade = mock(AccountFacade);
-
     await TestBed.configureTestingModule({
       declarations: [RadioGroupFieldComponent],
       imports: [
@@ -30,14 +23,11 @@ describe('Radio Group Field Component', () => {
         FormlySelectModule,
         FormlyTestingComponentsModule,
         ReactiveFormsModule,
-        TranslateModule.forRoot(),
       ],
-      providers: [{ provide: AccountFacade, useFactory: () => instance(mock(AccountFacade)) }],
     }).compileComponents();
   });
 
   beforeEach(() => {
-    when(accountFacade.isLoggedIn$).thenReturn(of(false));
     const testComponentInputs = {
       model: { budgetPriceType: 'net' },
       fields: [