From 37ac2b5aa0574c807e5b222ba5fd139f4f22cb88 Mon Sep 17 00:00:00 2001
From: Ruben Guarachi Torres <rubencgt@gmail.com>
Date: Tue, 24 Mar 2020 03:55:08 +0100
Subject: [PATCH] feat(patient): provide better feedback on patient form
 (#1938)

---
 .../patients/GeneralInformation.test.tsx        |  4 ++--
 src/__tests__/patients/new/NewPatient.test.tsx  |  3 ++-
 .../input/TextInputWithLabelFormGroup.tsx       | 17 ++++++++++++++++-
 src/locales/enUs/translations/patient/index.ts  |  4 +++-
 src/locales/ptBr/translations/patient/index.ts  |  5 ++++-
 src/patients/GeneralInformation.tsx             | 13 ++++++++++++-
 src/patients/edit/EditPatient.tsx               |  8 +++++++-
 src/patients/new/NewPatient.tsx                 |  8 +++++++-
 8 files changed, 53 insertions(+), 9 deletions(-)

diff --git a/src/__tests__/patients/GeneralInformation.test.tsx b/src/__tests__/patients/GeneralInformation.test.tsx
index 7178d093a5..7351e4cbb0 100644
--- a/src/__tests__/patients/GeneralInformation.test.tsx
+++ b/src/__tests__/patients/GeneralInformation.test.tsx
@@ -17,14 +17,14 @@ describe('Error handling', () => {
         <GeneralInformation
           patient={{} as Patient}
           isEditable
-          errorMessage="patient.errors.patientGivenNameRequired"
+          errorMessage="patient.errors.patientGivenNameRequiredOnCreate"
         />
       </Router>,
     )
 
     const errorMessage = wrapper.find(Alert)
     expect(errorMessage).toBeTruthy()
-    expect(errorMessage.prop('message')).toMatch('patient.errors.patientGivenNameRequired')
+    expect(errorMessage.prop('message')).toMatch('patient.errors.patientGivenNameRequiredOnCreate')
   })
 })
 
diff --git a/src/__tests__/patients/new/NewPatient.test.tsx b/src/__tests__/patients/new/NewPatient.test.tsx
index 44db300b88..5010329724 100644
--- a/src/__tests__/patients/new/NewPatient.test.tsx
+++ b/src/__tests__/patients/new/NewPatient.test.tsx
@@ -95,8 +95,9 @@ describe('New Patient', () => {
 
     wrapper.update()
     expect(wrapper.find(GeneralInformation).prop('errorMessage')).toMatch(
-      'patient.errors.patientGivenNameRequired',
+      'patient.errors.patientGivenNameRequiredOnCreate',
     )
+    expect(wrapper.update.isInvalid === true)
   })
 
   it('should dispatch createPatient when save button is clicked', async () => {
diff --git a/src/components/input/TextInputWithLabelFormGroup.tsx b/src/components/input/TextInputWithLabelFormGroup.tsx
index 58c213c46d..2e68c196d6 100644
--- a/src/components/input/TextInputWithLabelFormGroup.tsx
+++ b/src/components/input/TextInputWithLabelFormGroup.tsx
@@ -10,16 +10,31 @@ interface Props {
   placeholder?: string
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
   isRequired?: boolean
+  feedback?: string
+  isInvalid?: boolean
 }
 
 const TextInputWithLabelFormGroup = (props: Props) => {
-  const { value, label, name, isEditable, onChange, placeholder, type, isRequired } = props
+  const {
+    value,
+    label,
+    name,
+    isEditable,
+    onChange,
+    placeholder,
+    type,
+    isRequired,
+    feedback,
+    isInvalid,
+  } = props
   const id = `${name}TextInput`
   return (
     <div className="form-group">
       <Label text={label} htmlFor={id} isRequired={isRequired} />
       <TextInput
+        feedback={feedback}
         id={id}
+        isInvalid={isInvalid}
         value={value}
         disabled={!isEditable}
         onChange={onChange}
diff --git a/src/locales/enUs/translations/patient/index.ts b/src/locales/enUs/translations/patient/index.ts
index c04efe8379..3397b5d2b2 100644
--- a/src/locales/enUs/translations/patient/index.ts
+++ b/src/locales/enUs/translations/patient/index.ts
@@ -69,7 +69,9 @@ export default {
       private: 'Private',
     },
     errors: {
-      patientGivenNameRequired: 'Patient Given Name is required.',
+      patientGivenNameRequiredOnCreate: 'Could not create new patient.',
+      patientGivenNameRequiredOnUpdate: 'Could not update patient.',
+      patientGivenNameFeedback: 'Given Name is required.',
     },
   },
 }
diff --git a/src/locales/ptBr/translations/patient/index.ts b/src/locales/ptBr/translations/patient/index.ts
index 86eeba97df..71b1bbcb40 100644
--- a/src/locales/ptBr/translations/patient/index.ts
+++ b/src/locales/ptBr/translations/patient/index.ts
@@ -64,7 +64,10 @@ export default {
       private: 'Particular',
     },
     errors: {
-      patientGivenNameRequired: 'Nome do Paciente é necessário.',
+      patientGivenNameRequiredOnCreate: 'Nome do Paciente é necessário.',
+      // todo Portuguese translation
+      patientGivenNameRequiredOnUpdate: '',
+      patientGivenNameFeedback: '',
     },
   },
 }
diff --git a/src/patients/GeneralInformation.tsx b/src/patients/GeneralInformation.tsx
index 0899f33d34..bd580ea680 100644
--- a/src/patients/GeneralInformation.tsx
+++ b/src/patients/GeneralInformation.tsx
@@ -14,11 +14,20 @@ interface Props {
   isEditable?: boolean
   errorMessage?: string
   onFieldChange?: (key: string, value: string | boolean) => void
+  isInvalid?: boolean
+  patientGivenNameFeedback?: string
 }
 
 const GeneralInformation = (props: Props) => {
   const { t } = useTranslation()
-  const { patient, isEditable, onFieldChange, errorMessage } = props
+  const {
+    patient,
+    isEditable,
+    onFieldChange,
+    errorMessage,
+    isInvalid,
+    patientGivenNameFeedback,
+  } = props
 
   const onSelectChange = (event: React.ChangeEvent<HTMLSelectElement>, fieldName: string) =>
     onFieldChange && onFieldChange(fieldName, event.target.value)
@@ -72,6 +81,8 @@ const GeneralInformation = (props: Props) => {
                 onInputElementChange(event, 'givenName')
               }}
               isRequired
+              isInvalid={isInvalid}
+              feedback={patientGivenNameFeedback}
             />
           </div>
           <div className="col-md-4">
diff --git a/src/patients/edit/EditPatient.tsx b/src/patients/edit/EditPatient.tsx
index 89e9bbce82..ea45f85338 100644
--- a/src/patients/edit/EditPatient.tsx
+++ b/src/patients/edit/EditPatient.tsx
@@ -27,6 +27,8 @@ const EditPatient = () => {
 
   const [patient, setPatient] = useState({} as Patient)
   const [errorMessage, setErrorMessage] = useState('')
+  const [isInvalid, setIsInvalid] = useState(false)
+  const [patientGivenNameFeedback, setPatientGivenNameFeedback] = useState('')
   const { patient: reduxPatient, isLoading } = useSelector((state: RootState) => state.patient)
 
   useTitle(
@@ -68,7 +70,9 @@ const EditPatient = () => {
 
   const onSave = () => {
     if (!patient.givenName) {
-      setErrorMessage(t('patient.errors.patientGivenNameRequired'))
+      setErrorMessage(t('patient.errors.patientGivenNameRequiredOnUpdate'))
+      setIsInvalid(true)
+      setPatientGivenNameFeedback(t('patient.errors.patientGivenNameFeedback'))
     } else {
       dispatch(
         updatePatient(
@@ -100,6 +104,8 @@ const EditPatient = () => {
         patient={patient}
         onFieldChange={onFieldChange}
         errorMessage={errorMessage}
+        isInvalid={isInvalid}
+        patientGivenNameFeedback={patientGivenNameFeedback}
       />
       <div className="row float-right">
         <div className="btn-group btn-group-lg">
diff --git a/src/patients/new/NewPatient.tsx b/src/patients/new/NewPatient.tsx
index 70cc1de882..5e60756fbe 100644
--- a/src/patients/new/NewPatient.tsx
+++ b/src/patients/new/NewPatient.tsx
@@ -23,6 +23,8 @@ const NewPatient = () => {
 
   const [patient, setPatient] = useState({} as Patient)
   const [errorMessage, setErrorMessage] = useState('')
+  const [isInvalid, setIsInvalid] = useState(false)
+  const [patientGivenNameFeedback, setPatientGivenNameFeedback] = useState('')
 
   useTitle(t('patients.newPatient'))
   useAddBreadcrumbs(breadcrumbs, true)
@@ -42,7 +44,9 @@ const NewPatient = () => {
 
   const onSave = () => {
     if (!patient.givenName) {
-      setErrorMessage(t('patient.errors.patientGivenNameRequired'))
+      setErrorMessage(t('patient.errors.patientGivenNameRequiredOnCreate'))
+      setIsInvalid(true)
+      setPatientGivenNameFeedback(t('patient.errors.patientGivenNameFeedback'))
     } else {
       dispatch(
         createPatient(
@@ -70,6 +74,8 @@ const NewPatient = () => {
         patient={patient}
         onFieldChange={onFieldChange}
         errorMessage={errorMessage}
+        isInvalid={isInvalid}
+        patientGivenNameFeedback={patientGivenNameFeedback}
       />
       <div className="row float-right">
         <div className="btn-group btn-group-lg mt-3">