diff --git a/dear_petition/petition/api/serializers.py b/dear_petition/petition/api/serializers.py index ba1afa3d..db885827 100644 --- 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 index 3a904233..9edc32ff 100644 --- 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 (
- onCreate(submitData)} /> + onCreate(submitData)} + handleWarnings={handleWarnings} + />
); }; @@ -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) => (

{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} /> {petitioner && ( @@ -209,12 +253,20 @@ export default function PetitionerInput({ petitioner, errors, onClearError }) { 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 && ( + +

{editWarnings.dob}

+ + )} { let hasErrors = false; @@ -173,7 +173,7 @@ function GenerationPage() { /> - +
diff --git a/src/features/CreateClient.jsx b/src/features/CreateClient.jsx index c71abbd6..5b957d1b 100644 --- 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 index 161cb494..96e88b0a 100644 --- 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