(fix) O3 4541 : Fix identifier deletion modal handling in registration form (#1528)

* fix: Refactor identifier deletion modal handling in IdentifierInput component

* fix: Update delete identifier modal to use closeModal function instead of deleteIdentifier for cancel action

* Fixup

---------

Co-authored-by: Dennis Kigen <kigen.work@gmail.com>

Author: Muppasanipraneeth

packages/esm-patient-registration-app/src/patient-registration/input/custom-input/identifier/identifier-input.component.tsx

@@ -3,13 +3,14 @@ import { useTranslation } from 'react-i18next';
 import { useField } from 'formik';
 import { Button } from '@carbon/react';
 import { TrashCan, Edit, Reset } from '@carbon/react/icons';
-import { ResourcesContext } from '../../../../offline.resources';
+import { type RegistrationConfig } from '../../../../config-schema';
 import { showModal, useConfig, UserHasAccess } from '@openmrs/esm-framework';
-import { shouldBlockPatientIdentifierInOfflineMode } from './utils';
 import { deleteIdentifierType, setIdentifierSource } from '../../../field/id/id-field.component';
-import { type PatientIdentifierValue } from '../../../patient-registration.types';
-import { PatientRegistrationContext } from '../../../patient-registration-context';
 import { Input } from '../../basic-input/input/input.component';
+import { PatientRegistrationContext } from '../../../patient-registration-context';
+import { ResourcesContext } from '../../../../offline.resources';
+import { shouldBlockPatientIdentifierInOfflineMode } from './utils';
+import { type PatientIdentifierValue } from '../../../patient-registration.types';
 import styles from '../../input.scss';
 
 interface IdentifierInputProps {
@@ -19,7 +20,7 @@ interface IdentifierInputProps {
 
 const IdentifierInput: React.FC<IdentifierInputProps> = ({ patientIdentifier, fieldName }) => {
   const { t } = useTranslation();
-  const { defaultPatientIdentifierTypes } = useConfig();
+  const { defaultPatientIdentifierTypes } = useConfig<RegistrationConfig>();
   const { identifierTypes } = useContext(ResourcesContext);
   const { isOffline, values, setFieldValue } = useContext(PatientRegistrationContext);
   const identifierType = useMemo(
@@ -70,15 +71,16 @@ const IdentifierInput: React.FC<IdentifierInputProps> = ({ patientIdentifier, fi
     */
 
     if (initialValue) {
-      const confirmDeleteIdentifierModal = showModal('delete-identifier-confirmation-modal', {
-        deleteIdentifier: (deleteIdentifier) => {
-          if (deleteIdentifier) {
+      const dispose = showModal('delete-identifier-confirmation-modal', {
+        closeModal: () => dispose(),
+        deleteIdentifier: (isConfirmed) => {
+          if (isConfirmed) {
             setFieldValue('identifiers', deleteIdentifierType(values.identifiers, fieldName));
           }
-          confirmDeleteIdentifierModal();
+          dispose();
         },
         identifierName,
-        initialValue,
+        identifierValue: initialValue,
       });
     } else {
       setFieldValue('identifiers', deleteIdentifierType(values.identifiers, fieldName));

packages/esm-patient-registration-app/src/widgets/delete-identifier-confirmation.modal.tsx

@@ -36,7 +36,7 @@ const DeleteIdentifierConfirmationModal: React.FC<DeleteIdentifierConfirmationMo
         </p>
       </ModalBody>
       <ModalFooter>
-        <Button kind="secondary" size="lg" onClick={() => deleteIdentifier(false)}>
+        <Button kind="secondary" size="lg" onClick={closeModal}>
           {t('cancel', 'Cancel')}
         </Button>
         <Button kind="danger" size="lg" onClick={() => deleteIdentifier(true)}>

packages/esm-patient-registration-app/src/widgets/delete-identifier-confirmation.test.tsx

@@ -5,6 +5,7 @@ import DeleteIdentifierConfirmationModal from './delete-identifier-confirmation.
 
 describe('DeleteIdentifierConfirmationModal', () => {
   const mockDeleteIdentifier = jest.fn();
+  const closeModal = jest.fn();
   const mockIdentifierName = 'Identifier Name';
   const mockIdentifierValue = 'Identifier Value';
 
@@ -13,7 +14,7 @@ describe('DeleteIdentifierConfirmationModal', () => {
 
     render(
       <DeleteIdentifierConfirmationModal
-        closeModal={jest.fn()}
+        closeModal={closeModal}
         deleteIdentifier={mockDeleteIdentifier}
         identifierName={mockIdentifierName}
         identifierValue={mockIdentifierValue}
@@ -22,7 +23,7 @@ describe('DeleteIdentifierConfirmationModal', () => {
 
     const cancelButton = screen.getByRole('button', { name: /cancel/i });
     await user.click(cancelButton);
-    expect(mockDeleteIdentifier).toHaveBeenCalledWith(false);
+    expect(closeModal).toHaveBeenCalledTimes(1);
 
     const removeButton = screen.getByRole('button', { name: /remove identifier/i });
     await user.click(removeButton);