From d6904e74e4ec21da57529046243e1166c6287c8f Mon Sep 17 00:00:00 2001
From: Cristopher Fiorini <37425501+cfiorini74@users.noreply.github.com>
Date: Sat, 28 Mar 2020 21:41:01 -0400
Subject: [PATCH] feat(patients): better form feedback for add allergy (#1945)

---
 src/__tests__/patients/allergies/NewAllergyModal.test.tsx | 2 +-
 src/locales/enUs/translations/patient/index.ts            | 1 +
 src/patients/allergies/NewAllergyModal.tsx                | 8 +++++++-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/__tests__/patients/allergies/NewAllergyModal.test.tsx b/src/__tests__/patients/allergies/NewAllergyModal.test.tsx
index e4601bc4f5..7b7ff15dc0 100644
--- a/src/__tests__/patients/allergies/NewAllergyModal.test.tsx
+++ b/src/__tests__/patients/allergies/NewAllergyModal.test.tsx
@@ -84,7 +84,7 @@ describe('New Allergy Modal', () => {
 
       expect(wrapper.find(Alert)).toHaveLength(1)
       expect(wrapper.find(Alert).prop('title')).toEqual('states.error')
-      expect(wrapper.find(Alert).prop('message')).toContain('patient.allergies.error.nameRequired')
+      expect(wrapper.find(Alert).prop('message')).toContain('patient.allergies.error.unableToAdd')
     })
   })
 })
diff --git a/src/locales/enUs/translations/patient/index.ts b/src/locales/enUs/translations/patient/index.ts
index 3397b5d2b2..cd0a98c971 100644
--- a/src/locales/enUs/translations/patient/index.ts
+++ b/src/locales/enUs/translations/patient/index.ts
@@ -42,6 +42,7 @@ export default {
       new: 'Add Allergy',
       error: {
         nameRequired: 'Name is required.',
+        unableToAdd: 'Unable to add allergy.',
       },
       warning: {
         noAllergies: 'No Allergies',
diff --git a/src/patients/allergies/NewAllergyModal.tsx b/src/patients/allergies/NewAllergyModal.tsx
index e1ffd080ba..62e717f859 100644
--- a/src/patients/allergies/NewAllergyModal.tsx
+++ b/src/patients/allergies/NewAllergyModal.tsx
@@ -14,6 +14,8 @@ const NewAllergyModal = (props: NewAllergyModalProps) => {
   const { show, onCloseButtonClick, onSave } = props
   const [allergy, setAllergy] = useState({ name: '' })
   const [errorMessage, setErrorMessage] = useState('')
+  const [isAllergyNameInvalid, setIsAllergynameInvalid] = useState(false)
+  const [nameRequiredFeedback, setNameRequiredFeedback] = useState('')
   const { t } = useTranslation()
 
   useEffect(() => {
@@ -29,7 +31,9 @@ const NewAllergyModal = (props: NewAllergyModalProps) => {
   const onSaveButtonClick = () => {
     let newErrorMessage = ''
     if (!allergy.name) {
-      newErrorMessage += `${t('patient.allergies.error.nameRequired')} `
+      newErrorMessage += `${t('patient.allergies.error.unableToAdd')} `
+      setIsAllergynameInvalid(true)
+      setNameRequiredFeedback(`${t('patient.allergies.error.nameRequired')} `)
     }
 
     if (newErrorMessage) {
@@ -49,6 +53,7 @@ const NewAllergyModal = (props: NewAllergyModalProps) => {
       {errorMessage && <Alert color="danger" title={t('states.error')} message={errorMessage} />}
       <form>
         <TextInputWithLabelFormGroup
+          feedback={nameRequiredFeedback}
           name="name"
           isRequired
           label={t('patient.allergies.allergyName')}
@@ -56,6 +61,7 @@ const NewAllergyModal = (props: NewAllergyModalProps) => {
           placeholder={t('patient.allergies.allergyName')}
           value={allergy.name}
           onChange={onNameChange}
+          isInvalid={isAllergyNameInvalid}
         />
       </form>
     </>