feat(patients): add error message for missing required fields

src/__tests__/patients/related-persons/NewRelatedPersonModal.test.tsx

@@ -1,7 +1,7 @@
 import '../../../__mocks__/matchMediaMock'
 import React from 'react'
 import { ReactWrapper, mount } from 'enzyme'
-import { Modal, Button } from '@hospitalrun/components'
+import { Modal, Button, Alert } from '@hospitalrun/components'
 import { act } from '@testing-library/react'
 import NewRelatedPersonModal from '../../../patients/related-persons/NewRelatedPersonModal'
 import TextInputWithLabelFormGroup from '../../../components/input/TextInputWithLabelFormGroup'
@@ -116,9 +116,8 @@ describe('New Related Person Modal', () => {
     })
 
     it('should render an add new related person button button', () => {
-      const addNewButton = wrapper.findWhere((w) => w.text() === 'patient.relatedPersons.new')
-
-      expect(addNewButton).toHaveLength(1)
+      const modal = wrapper.find(Modal)
+      expect(modal.prop('successButton').children).toEqual('patient.relatedPersons.new')
     })
   })
 
@@ -206,5 +205,23 @@ describe('New Related Person Modal', () => {
         address: 'address',
       })
     })
+
+    it('should display an error message if given name or relationship type is not entered.', () => {
+      act(() => {
+        wrapper
+          .find(Modal)
+          .prop('successButton')
+          .onClick({} as React.MouseEvent<HTMLButtonElement, MouseEvent>)
+      })
+
+      wrapper.update()
+
+      const errorAlert = wrapper.find(Alert)
+      expect(onSaveSpy).not.toHaveBeenCalled()
+      expect(errorAlert).toHaveLength(1)
+      expect(errorAlert.prop('message')).toEqual(
+        'patient.relatedPersons.error.givenNameRequired. patient.relatedPersons.error.relationshipTypeRequired.',
+      )
+    })
   })
 })

src/locales/en-US/translation.json

@@ -31,6 +31,10 @@
     "contactInformation": "Contact Information",
     "unknownDateOfBirth": "Unknown",
     "relatedPersons": {
+      "error": {
+        "givenNameRequired": "Given Name is required.",
+        "relationshipTypeRequired": "Relationship Type is required."
+      },
       "label": "Related Persons",
       "new": "New Related Person",
       "relationshipType": "Relationship Type"
@@ -55,7 +59,8 @@
     "search": "Search"
   },
   "states": {
-    "success": "Success!"
+    "success": "Success!",
+    "error": "Error!"
   },
   "scheduling": {
     "label": "Scheduling",

src/patients/related-persons/NewRelatedPersonModal.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Modal } from '@hospitalrun/components'
+import { Modal, Alert } from '@hospitalrun/components'
 import { useTranslation } from 'react-i18next'
 import TextInputWithLabelFormGroup from 'components/input/TextInputWithLabelFormGroup'
 import TextFieldWithLabelFormGroup from 'components/input/TextFieldWithLabelFormGroup'
@@ -15,6 +15,7 @@ interface Props {
 const NewRelatedPersonModal = (props: Props) => {
   const { show, toggle, onCloseButtonClick, onSave } = props
   const { t } = useTranslation()
+  const [errorMessage, setErrorMessage] = useState('')
   const [relatedPerson, setRelatedPerson] = useState({
     prefix: '',
     givenName: '',
@@ -39,6 +40,7 @@ const NewRelatedPersonModal = (props: Props) => {
 
   const body = (
     <form>
+      {errorMessage && <Alert color="danger" title={t('states.error')} message={errorMessage} />}
       <div className="row">
         <div className="col-md-2">
           <TextInputWithLabelFormGroup
@@ -136,7 +138,7 @@ const NewRelatedPersonModal = (props: Props) => {
     <Modal
       show={show}
       toggle={toggle}
-      title="New Related Person"
+      title={t('patient.relatedPersons.new')}
       body={body}
       closeButton={{
         children: t('actions.cancel'),
@@ -148,7 +150,22 @@ const NewRelatedPersonModal = (props: Props) => {
         color: 'success',
         icon: 'add',
         iconLocation: 'left',
-        onClick: () => onSave(relatedPerson as RelatedPerson),
+        onClick: () => {
+          let newErrorMessage = ''
+          if (!relatedPerson.givenName) {
+            newErrorMessage += `${t('patient.relatedPersons.error.givenNameRequired')} `
+          }
+
+          if (!relatedPerson.type) {
+            newErrorMessage += `${t('patient.relatedPersons.error.relationshipTypeRequired')}`
+          }
+
+          if (!newErrorMessage) {
+            onSave(relatedPerson as RelatedPerson)
+          } else {
+            setErrorMessage(newErrorMessage.trim())
+          }
+        },
       }}
     />
   )