Merged PR 1946: fix(remission-list, remission-return-receipt-details, libs-dialog): improve error handling with dedicated error dialog

fix(remission-list, remission-return-receipt-details, libs-dialog): improve error handling with dedicated error dialog

- Add RemissionResponseArgsErrorMessage constants for standardized error messages
- Create FeedbackErrorDialogComponent for consistent error display across the app
- Implement enhanced error handling in RemissionListComponent.handleRemitItemsError()
- Update RemissionReturnReceiptDetailsItemComponent to use new error dialog pattern
- Add injectFeedbackErrorDialog convenience function for easy error dialog injection
- Include comprehensive unit tests for new dialog component
- Replace generic error handling with specific ResponseArgsError handling
- Clear remission state when "AlreadyCompleted" error occurs

The new error dialog provides a standardized way to display backend error
messages to users with consistent styling and behavior. Error handling now
properly differentiates between different error types and takes appropriate
actions like clearing state for completed remissions.

Ref: #5331

libs/ui/dialog/src/lib/feedback-error-dialog/feedback-error-dialog.component.html

@@ -0,0 +1,17 @@
+<div class="w-full flex flex-col gap-4 items-center justify-center">
+  <span
+    class="bg-isa-accent-red rounded-[6.25rem] flex flex-row items-center justify-center p-3"
+  >
+    <ng-icon
+      class="text-isa-white"
+      size="1.5rem"
+      name="isaActionClose"
+    ></ng-icon>
+  </span>
+  <p
+    class="isa-text-body-1-bold text-isa-neutral-900"
+    data-what="error-message"
+  >
+    {{ data.errorMessage }}
+  </p>
+</div>

libs/ui/dialog/src/lib/feedback-error-dialog/feedback-error-dialog.component.spec.ts

@@ -0,0 +1,56 @@
+import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
+import {
+  FeedbackErrorDialogComponent,
+  FeedbackErrorDialogData,
+} from './feedback-error-dialog.component';
+import { DialogRef, DIALOG_DATA } from '@angular/cdk/dialog';
+import { NgIcon } from '@ng-icons/core';
+import { DialogComponent } from '../dialog.component';
+
+// Test suite for FeedbackErrorDialogComponent
+describe('FeedbackErrorDialogComponent', () => {
+  let spectator: Spectator<FeedbackErrorDialogComponent>;
+  const mockData: FeedbackErrorDialogData = {
+    errorMessage: 'Something went wrong',
+  };
+
+  const createComponent = createComponentFactory({
+    component: FeedbackErrorDialogComponent,
+    imports: [NgIcon],
+    providers: [
+      {
+        provide: DialogRef,
+        useValue: { close: jest.fn() },
+      },
+      {
+        provide: DIALOG_DATA,
+        useValue: mockData,
+      },
+      {
+        provide: DialogComponent,
+        useValue: {},
+      },
+    ],
+  });
+
+  beforeEach(() => {
+    spectator = createComponent();
+    jest.clearAllMocks();
+  });
+
+  it('should create', () => {
+    expect(spectator.component).toBeTruthy();
+  });
+
+  it('should display the error message passed in data', () => {
+    const messageElement = spectator.query('[data-what="error-message"]');
+    expect(messageElement).toHaveText('Something went wrong');
+  });
+
+  it('should render the close icon', () => {
+    // The icon should be present with isaActionClose
+    const iconElement = spectator.query('ng-icon');
+    expect(iconElement).toBeTruthy();
+    expect(iconElement).toHaveAttribute('name', 'isaActionClose');
+  });
+});

libs/ui/dialog/src/lib/feedback-error-dialog/feedback-error-dialog.component.ts

@@ -0,0 +1,30 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { DialogContentDirective } from '../dialog-content.directive';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { isaActionClose } from '@isa/icons';
+
+/**
+ * Input data for the error message dialog
+ */
+export interface FeedbackErrorDialogData {
+  /** The Error message text to display in the dialog */
+  errorMessage: string;
+}
+
+/**
+ * A simple feedback dialog component that displays an error message and an error icon.
+ */
+@Component({
+  selector: 'ui-feedback-error-dialog',
+  templateUrl: './feedback-error-dialog.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgIcon],
+  providers: [provideIcons({ isaActionClose })],
+  host: {
+    '[class]': '["ui-feedback-error-dialog"]',
+  },
+})
+export class FeedbackErrorDialogComponent extends DialogContentDirective<
+  FeedbackErrorDialogData,
+  void
+> {}

libs/ui/dialog/src/lib/injects.spec.ts

@@ -7,6 +7,7 @@ import {
   injectTextInputDialog,
   injectNumberInputDialog,
   injectConfirmationDialog,
+  injectFeedbackErrorDialog,
 } from './injects';
 import { MessageDialogComponent } from './message-dialog/message-dialog.component';
 import { DialogComponent } from './dialog.component';
@@ -17,6 +18,7 @@ import { TextInputDialogComponent } from './text-input-dialog/text-input-dialog.
 import { FeedbackDialogComponent } from './feedback-dialog/feedback-dialog.component';
 import { NumberInputDialogComponent } from './number-input-dialog/number-input-dialog.component';
 import { ConfirmationDialogComponent } from './confirmation-dialog/confirmation-dialog.component';
+import { FeedbackErrorDialogComponent } from './feedback-error-dialog/feedback-error-dialog.component';
 
 // Test component extending DialogContentDirective for testing
 @Component({ template: '' })
@@ -290,4 +292,23 @@ describe('Dialog Injects', () => {
       expect(injector.get(DIALOG_CONTENT)).toBe(ConfirmationDialogComponent);
     });
   });
+
+  describe('injectFeedbackErrorDialog', () => {
+    it('should create a dialog injector for FeedbackErrorDialogComponent', () => {
+      // Act
+      const openFeedbackErrorDialog = TestBed.runInInjectionContext(() =>
+        injectFeedbackErrorDialog(),
+      );
+      openFeedbackErrorDialog({
+        data: {
+          errorMessage: 'Test error message',
+        },
+      });
+
+      // Assert
+      const callOptions = mockDialogOpen.mock.calls[0][1];
+      const injector = callOptions.injector;
+      expect(injector.get(DIALOG_CONTENT)).toBe(FeedbackErrorDialogComponent);
+    });
+  });
 });

libs/ui/dialog/src/lib/injects.ts

@@ -21,6 +21,10 @@ import {
   ConfirmationDialogComponent,
   ConfirmationDialogData,
 } from './confirmation-dialog/confirmation-dialog.component';
+import {
+  FeedbackErrorDialogComponent,
+  FeedbackErrorDialogData,
+} from './feedback-error-dialog/feedback-error-dialog.component';
 
 export interface InjectDialogOptions {
   /** Optional title override for the dialog */
@@ -173,3 +177,17 @@ export const injectFeedbackDialog = (
     classList: ['gap-0'],
     ...options,
   });
+
+/**
+ * Convenience function that returns a pre-configured FeedbackErrorDialog injector
+ * @returns A function to open a feedback error dialog
+ */
+export const injectFeedbackErrorDialog = (
+  options?: OpenDialogOptions<FeedbackErrorDialogData>,
+) =>
+  injectDialog(FeedbackErrorDialogComponent, {
+    disableClose: false,
+    minWidth: '20rem',
+    classList: ['gap-0'],
+    ...options,
+  });