adding warning message for user input dob not matching dob read from …

…CIPRS form
deardurham · Jan 25, 2025 · 26daa19 · 26daa19
1 parent 7b5d576
commit 26daa19
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 6 deletions.
diff --git a/dear_petition/petition/api/serializers.py b/dear_petition/petition/api/serializers.py
@@ -473,6 +473,7 @@ class Meta:
             "pk",
             "label",
             "date_uploaded",
+            "dob",
             "user",
             "records",
             "petitions",

diff --git a/src/components/pages/GenerationPage/GenerationInput/PetitionerInput.jsx b/src/components/pages/GenerationPage/GenerationInput/PetitionerInput.jsx
@@ -14,6 +14,8 @@ import {
 import Button, { ModalButton } from '../../../elements/Button';
 import { useModalContext } from '../../../elements/Button/ModalButton';
 import { CreateClient } from '../../../../features/CreateClient';
+import { colorWarningOnWhiteBackground } from '../../../../styles/colors';
+import { smallerThanTabletLandscape } from '../../../../styles/media';
 
 const TextInput = styled(Input)`
   input {
@@ -26,12 +28,32 @@ const TextInput = styled(Input)`
   }
 `;
 
-export const CreateClientModal = ({ onCreate }) => {
+const WarningMessage = styled.div`
+  margin-top: 0.5rem;
+  margin-bottom: 1rem;
+  p {
+    color: ${colorWarningOnWhiteBackground};
+    @media (${smallerThanTabletLandscape}) {
+      font-size: 1.4rem;
+    }
+    white-space: normal;
+  }
+`;
+
+const dobWarningMsg = `Warning: Date of birth entered does not match CIPRS form pdf.
+  Petitioner Information date of birth will be used.`;
+
+export const CreateClientModal = ({ onCreate, handleWarnings }) => {
   const modalElement = useRef();
   const { closeModal } = useModalContext();
   return (
     <div className="w-[550px] px-40 py-20" ref={modalElement}>
-      <CreateClient onClose={closeModal} category="client" onSubmitSuccess={(submitData) => onCreate(submitData)} />
+      <CreateClient
+        onClose={closeModal}
+        category="client"
+        onSubmitSuccess={(submitData) => onCreate(submitData)}
+        handleWarnings={handleWarnings}
+      />
     </div>
   );
 };
@@ -52,13 +74,14 @@ const getPetitionerData = (petitioner) => {
   return clientData;
 };
 
-export default function PetitionerInput({ petitioner, errors, onClearError }) {
+export default function PetitionerInput({ petitioner, batchDob, errors, onClearError }) {
   const { batchId } = useParams();
   const [triggerSuggestionsFetch] = useLazySearchClientsQuery();
   const [triggerAssignClientToBatch] = useAssignClientToBatchMutation();
   const [triggerClientUpdate] = useUpdateClientMutation();
   const [isEditing, setIsEditing] = useState(false);
   const [editErrors, setEditErrors] = useState({});
+  const [editWarnings, setEditWarnings] = useState({});
 
   const [petitionerData, setPetitionerData] = useState(getPetitionerData(petitioner));
   const { name, dob, ...address } = petitionerData;
@@ -67,6 +90,26 @@ export default function PetitionerInput({ petitioner, errors, onClearError }) {
   const clearError = (key) => setEditErrors((prev) => ({ ...prev, [key]: [] }));
   const clearAllErrors = () => setEditErrors({});
 
+  const addWarning = (key, warningMsg) => setEditWarnings((prev) => ({ ...prev, [key]: [warningMsg] }));
+  const clearWarning = (key) => setEditWarnings((prev) => ({ ...prev, [key]: [] }));
+
+  const handleWarnings = (data) => {
+    // this function is used to check warnings for all fields on create client save
+    // (note only dob field has a warning as of now)
+    const inputDob = data.dob;
+    handleDobWarning(inputDob);
+  };
+
+  const handleDobWarning = (inputDob) => {
+    // this function is split off from handleWarnings so it can also be used
+    // when editing existing client dob
+    if (inputDob !== batchDob) {
+      addWarning('dob', dobWarningMsg);
+    } else {
+      clearWarning('dob');
+    }
+  };
+
   const clientErrors = (errors?.client ?? editErrors?.client)?.map((errMsg) => (
     <p key={errMsg} className="text-red">
       {errMsg}
@@ -97,6 +140,7 @@ export default function PetitionerInput({ petitioner, errors, onClearError }) {
               addError('client', 'Unable to select new client. Please try searching and selecting the new client.');
             }
           }}
+          handleWarnings={handleWarnings}
         />
       </ModalButton>
       {petitioner && (
@@ -209,12 +253,20 @@ export default function PetitionerInput({ petitioner, errors, onClearError }) {
           <TextInput
             label="Date of Birth"
             value={dob}
-            onChange={(e) => setPetitionerData((prev) => ({ ...prev, dob: e.target.value }))}
+            onChange={(e) => {
+              setPetitionerData((prev) => ({ ...prev, dob: e.target.value }));
+              handleDobWarning(e.target.value);
+            }}
             errors={isEditing && editErrors.dob}
             onClearError={onClearError}
             disabled={!isEditing}
             type="date"
           />
+          {editWarnings.dob && (
+            <WarningMessage>
+              <p>{editWarnings.dob}</p>
+            </WarningMessage>
+          )}
           <AddressInput
             address={address}
             setAddress={setPetitionerData}

diff --git a/src/components/pages/GenerationPage/GenerationPage.jsx b/src/components/pages/GenerationPage/GenerationPage.jsx
@@ -84,7 +84,7 @@ function GenerationPage() {
     );
   }
 
-  const { attorney, client, label } = data;
+  const { attorney, client, dob, label } = data;
 
   const validateInput = () => {
     let hasErrors = false;
@@ -173,7 +173,7 @@ function GenerationPage() {
           />
         </InputSection>
         <InputSection label="Petitioner Information">
-          <PetitionerInput petitioner={client} errors={formErrors} onClearError={clearError} />
+          <PetitionerInput petitioner={client} batchDob={dob} errors={formErrors} onClearError={clearError} />
         </InputSection>
         <InputSection label="Documents">
           <div className="flex gap-4">

diff --git a/src/features/CreateClient.jsx b/src/features/CreateClient.jsx
@@ -14,6 +14,7 @@ export const CreateClient = ({
   onSubmitSuccess,
   submitAndKeepOpenTitle = '',
   submitAndCloseTitle = 'Submit',
+  handleWarnings,
 }) => {
   const [triggerCreate] = useCreateClientMutation();
   const { control, handleSubmit, reset } = useForm({
@@ -46,6 +47,7 @@ export const CreateClient = ({
   };
   const onSubmitAndClose = async (data) => {
     await onSubmit(data);
+    handleWarnings(data);
     onClose();
   };
   return (

diff --git a/src/styles/colors.js b/src/styles/colors.js
@@ -8,6 +8,7 @@ export const colorGreen = '#89af5b';
 export const colorRed = '#b04846';
 export const colorBlue = '#4082c3';
 export const colorYellow = '#d1d156';
+export const colorOrange = '#fc9a23';
 
 /* COLORS */
 export const colorPrimary = '#3d8f9d';
@@ -18,6 +19,7 @@ export const colorFontPrimary = colorBlack;
 export const colorSuccess = colorBlue;
 export const colorCaution = colorRed;
 export const colorWarning = colorYellow;
+export const colorWarningOnWhiteBackground = colorOrange;
 
 /**
  * greyScale