diff --git a/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/edit-outcome.tsx b/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/edit-outcome.tsx index 0c2eb3b52..1df54a955 100644 --- a/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/edit-outcome.tsx +++ b/frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/edit-outcome.tsx @@ -45,6 +45,15 @@ const defaultAuthorization: DrugAuthorization = { date: new Date(), }; +type modalProps = { + title: string; + description: string; + confirmText: string; + cancelText: string; + confirm: () => void | null; + cancel: () => void | null; +}; + export const EditOutcome: FC = ({ id, index, outcome, assignedOfficer: officer, agency, update, toggle }) => { //-- select data from redux const speciesList = useAppSelector(selectSpeciesCodeDropdown); @@ -58,6 +67,18 @@ export const EditOutcome: FC = ({ id, index, outcome, assignedOfficer: of const showSectionErrors = isInEdit.showSectionErrors; const [showModal, setShowModal] = useState(false); + const [modalContent, setModalContent] = useState({ + title: "", + description: "", + confirmText: "", + cancelText: "", + confirm: () => { + return null; + }, + cancel: () => { + return null; + }, + }); //-- new input data const [data, applyData] = useState({ ...outcome }); @@ -318,6 +339,14 @@ export const EditOutcome: FC = ({ id, index, outcome, assignedOfficer: of }; const handleCancel = () => { + setModalContent({ + title: "Cancel changes?", + description: "Your changes will be lost.", + confirmText: "No, go back", + cancelText: "Yes, cancel changes", + confirm: close, + cancel: cancel, + }); setShowModal(true); }; const close = () => { @@ -329,16 +358,35 @@ export const EditOutcome: FC = ({ id, index, outcome, assignedOfficer: of toggle(""); }; + const showEditWarning = (onConfirm: Function, onCancel?: Function) => { + setModalContent({ + title: "Confirm changes?", + description: + "Editing the outcome or date of this report might affect public reporting statistics. Are you sure you want to continue?", + confirmText: "Yes", + cancelText: "No", + confirm: () => { + if (onConfirm) { + onConfirm(); + } + setShowModal(false); + }, + cancel: () => { + if (onCancel) { + onCancel(); + } + setShowModal(false); + }, + }); + setShowModal(true); + }; + return ( <> - = ({ id, index, outcome, assignedOfficer: of options={outcomes} enableValidation={false} placeholder={"Select"} + value={getDropdownOption(data.outcome, outcomes)} onChange={(evt) => { - updateModel("outcome", evt?.value); + showEditWarning(() => { + updateModel("outcome", evt?.value); + }); }} defaultOption={getDropdownOption(data.outcome, outcomes)} /> @@ -540,7 +591,9 @@ export const EditOutcome: FC = ({ id, index, outcome, assignedOfficer: of id="equipment-day-set" maxDate={new Date()} onChange={(input: Date) => { - handleOutcomeDateChange(input); + showEditWarning(() => { + handleOutcomeDateChange(input); + }); }} selectedDate={data?.date} placeholder={"Select"} diff --git a/frontend/src/app/components/modal/instances/standalone-cancel-confirm-modal.tsx b/frontend/src/app/components/modal/instances/standalone-cancel-confirm-modal.tsx index f62fff3c5..8466bd337 100644 --- a/frontend/src/app/components/modal/instances/standalone-cancel-confirm-modal.tsx +++ b/frontend/src/app/components/modal/instances/standalone-cancel-confirm-modal.tsx @@ -10,11 +10,21 @@ type props = { show: boolean; title: string; description: string; - close: () => void | null; - closeAndCancel: () => void | null; + confirmText: string; + cancelText: string; + confirm: () => void | null; + cancel: () => void | null; }; -export const StandaloneConfirmCancelModal: FC = ({ show, title, description, close, closeAndCancel }) => { +export const StandaloneConfirmCancelModal: FC = ({ + show, + title, + description, + confirmText, + cancelText, + confirm, + cancel, +}) => { return ( = ({ show, title, descripti - + );