From e1443b3517e7e56e17abaf981d38ec4b3f4818fb Mon Sep 17 00:00:00 2001
From: bmoore235 <42285881+bmoore235@users.noreply.github.com>
Date: Mon, 30 Mar 2020 22:16:29 -0400
Subject: [PATCH] feat(newrelatedpersonmodal): update Error Feedback

re #1925
---
 .../NewRelatedPersonModal.test.tsx            |  3 ++-
 .../enUs/translations/patient/index.ts        |  1 +
 .../related-persons/NewRelatedPersonModal.tsx | 22 ++++++++++++++-----
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/__tests__/patients/related-persons/NewRelatedPersonModal.test.tsx b/src/__tests__/patients/related-persons/NewRelatedPersonModal.test.tsx
index 1f7b48a2f3..fd4c6c5957 100644
--- a/src/__tests__/patients/related-persons/NewRelatedPersonModal.test.tsx
+++ b/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',
       )
     })
   })
diff --git a/src/locales/enUs/translations/patient/index.ts b/src/locales/enUs/translations/patient/index.ts
index cd0a98c971..0592498163 100644
--- a/src/locales/enUs/translations/patient/index.ts
+++ b/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.',
       },
diff --git a/src/patients/related-persons/NewRelatedPersonModal.tsx b/src/patients/related-persons/NewRelatedPersonModal.tsx
index 53ad24a2d5..fd1b52fad1 100644
--- a/src/patients/related-persons/NewRelatedPersonModal.tsx
+++ b/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'))
           }
         },
       }}