feat(patients): add related persons form feedback

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

@@ -108,10 +108,11 @@ describe('New Related Person Modal', () => {
       wrapper.update()
 
       const errorAlert = wrapper.find(Alert)
+
       expect(onSaveSpy).not.toHaveBeenCalled()
       expect(errorAlert).toHaveLength(1)
       expect(errorAlert.prop('message')).toEqual(
-        'patient.relatedPersons.error.relatedPersonRequired patient.relatedPersons.error.relationshipTypeRequired',
+        'patient.relatedPersons.error.relatedPersonErrorBanner',
       )
     })
   })

src/locales/enUs/translations/patient/index.ts

@@ -25,6 +25,7 @@ export default {
     relatedPerson: 'Related Person',
     relatedPersons: {
       error: {
+        relatedPersonErrorBanner: 'Unable to add new related person.',
         relatedPersonRequired: 'Related Person is required.',
         relationshipTypeRequired: 'Relationship Type is required.',
       },

src/patients/related-persons/NewRelatedPersonModal.tsx

@@ -17,6 +17,8 @@ const NewRelatedPersonModal = (props: Props) => {
   const { show, toggle, onCloseButtonClick, onSave } = props
   const { t } = useTranslation()
   const [errorMessage, setErrorMessage] = useState('')
+  const [isRelatedPersonInvalid, setIsRelatedPersonInvalid] = useState(false)
+  const [isRelationshipInvalid, setIsRelationshipInvalid] = useState(false)
   const [relatedPerson, setRelatedPerson] = useState({
     patientId: '',
     type: '',
@@ -49,11 +51,17 @@ const NewRelatedPersonModal = (props: Props) => {
               searchAccessor="fullName"
               placeholder={t('patient.relatedPerson')}
               onChange={onPatientSelect}
+              isInvalid={isRelatedPersonInvalid}
               onSearch={async (query: string) => PatientRepository.search(query)}
               renderMenuItemChildren={(patient: Patient) => (
                 <div>{`${patient.fullName} (${patient.code})`}</div>
               )}
             />
+            {isRelatedPersonInvalid && (
+              <div className="text-left ml-3 mt-1 text-small text-danger invalid-feedback d-block">
+                {t('patient.relatedPersons.error.relatedPersonRequired')}
+              </div>
+            )}
           </div>
         </div>
       </div>
@@ -64,6 +72,8 @@ const NewRelatedPersonModal = (props: Props) => {
             label={t('patient.relatedPersons.relationshipType')}
             value={relatedPerson.type}
             isEditable
+            isInvalid={isRelationshipInvalid}
+            feedback={t('patient.relatedPersons.error.relationshipTypeRequired')}
             isRequired
             onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
               onInputElementChange(event, 'type')
@@ -91,19 +101,21 @@ const NewRelatedPersonModal = (props: Props) => {
         icon: 'add',
         iconLocation: 'left',
         onClick: () => {
-          let newErrorMessage = ''
+          let isValid = true
           if (!relatedPerson.patientId) {
-            newErrorMessage += `${t('patient.relatedPersons.error.relatedPersonRequired')} `
+            isValid = false
+            setIsRelatedPersonInvalid(true)
           }
 
           if (!relatedPerson.type) {
-            newErrorMessage += `${t('patient.relatedPersons.error.relationshipTypeRequired')}`
+            isValid = false
+            setIsRelationshipInvalid(true)
           }
 
-          if (!newErrorMessage) {
+          if (isValid) {
             onSave(relatedPerson as RelatedPerson)
           } else {
-            setErrorMessage(newErrorMessage.trim())
+            setErrorMessage(t('patient.relatedPersons.error.relatedPersonErrorBanner'))
           }
         },
       }}