diff --git a/src/pages/fi/LapseApplicationDialog.tsx b/src/pages/fi/LapseApplicationDialog.tsx index 35d20c5..3528681 100644 --- a/src/pages/fi/LapseApplicationDialog.tsx +++ b/src/pages/fi/LapseApplicationDialog.tsx @@ -17,39 +17,45 @@ export function LapseApplicationDialog({ open, handleClose }: LapseApplicationDi const application = applicationContext.state.data; const { isLoading, lapseApplicationMutation } = useLapseApplication(); - const rootElement = document.getElementById("root-app"); return ( - - - - <div>{t("Are you sure you want to mark this application as lapsed? This action can't be undone. The application won't be listed in your application list anymore and you won't be able to approve or reject the application.")}</div> - - <div className="mt-4 grid grid-cols-1 gap-4 md:flex md:justify-end md:gap-0"> - <div> - <Button - primary={false} - disabled={isLoading} - className="md:mr-4" - label={t("Cancel")} - onClick={handleClose} - /> - </div> - - <div> - <Button label={t("Lapse")} disabled={isLoading} onClick={() => {if(application?.id) {lapseApplicationMutation(application?.id)}}}/> - </div> + <Box component="form" className="flex flex-col py-7 px-8" autoComplete="off"> + <Title type="section" label={t("Confirm you want to mark this application as lapsed")} className="mb-4" /> + + <div> + {t( + "Are you sure you want to mark this application as lapsed? This action can't be undone. The application won't be listed in your application list anymore and you won't be able to approve or reject the application.", + )} + </div> + + <div className="mt-4 grid grid-cols-1 gap-4 md:flex md:justify-end md:gap-0"> + <div> + <Button + primary={false} + disabled={isLoading} + className="md:mr-4" + label={t("Cancel")} + onClick={handleClose} + /> + </div> + + <div> + <Button + label={t("Lapse")} + disabled={isLoading} + onClick={() => { + if (application?.id) { + lapseApplicationMutation(application?.id); + } + }} + /> </div> - </Box> + </div> + </Box> </Dialog> ); } export default LapseApplicationDialog; - diff --git a/src/pages/fi/StageFive.tsx b/src/pages/fi/StageFive.tsx index 0232e70..0d182d5 100644 --- a/src/pages/fi/StageFive.tsx +++ b/src/pages/fi/StageFive.tsx @@ -14,14 +14,14 @@ import Text from "src/stories/text/Text"; import Title from "src/stories/title/Title"; import Approve from "../../assets/icons/approve.svg"; -import Reject from "../../assets/icons/reject.svg"; import Lapse from "../../assets/icons/lapse.svg"; +import Reject from "../../assets/icons/reject.svg"; import CreditProductReview from "../../components/CreditProductReview"; import useApproveApplication from "../../hooks/useApproveApplication"; import useLangContext from "../../hooks/useLangContext"; import { type ApproveApplicationInput, type FormApprovedInput, approveSchema } from "../../schemas/application"; -import RejectApplicationDialog from "./RejectApplicationDialog"; import LapseApplicationDialog from "./LapseApplicationDialog"; +import RejectApplicationDialog from "./RejectApplicationDialog"; export function StageFive() { const t = useT(); @@ -31,7 +31,6 @@ export function StageFive() { const [openDialog, setOpenDialog] = useState<boolean>(false); const [openLapseDialog, setOpenLapseDialog] = useState<boolean>(false); - const langContext = useLangContext(); const StepImage = langContext.state.selected.startsWith("en") ? StepImageEN : StepImageES; @@ -131,21 +130,27 @@ export function StageFive() { <Button primary={false} className="md:mr-4" label={t("Go Back")} onClick={onGoBackHandler} /> </div> + <div> + <Button className="md:mr-4" icon={Approve} label={t("Approve")} type="submit" disabled={isLoading} /> + </div> + <div> <Button className="md:mr-4" - icon={Approve} - label={t("Approve")} - type="submit" + label={t("Reject")} + icon={Reject} + onClick={onRejectApplication} disabled={isLoading} /> </div> - - <div> - <Button className="md:mr-4" label={t("Reject")} icon={Reject} onClick={onRejectApplication} disabled={isLoading} /> - </div> <div> - <Button className="md:mr-4" label={t("Lapse")} icon={Lapse} onClick={onLapseApplication} disabled={isLoading} /> + <Button + className="md:mr-4" + label={t("Lapse")} + icon={Lapse} + onClick={onLapseApplication} + disabled={isLoading} + /> </div> </div> <Text className="mb-10 text-m font-light"> diff --git a/src/routes/AppRouter.tsx b/src/routes/AppRouter.tsx index 92f4a5f..f21181f 100644 --- a/src/routes/AppRouter.tsx +++ b/src/routes/AppRouter.tsx @@ -32,6 +32,7 @@ import SecureApplicationContextProvider from "src/providers/SecureApplicationCon import StateContextProvider from "src/providers/StateContextProvider"; import ProtectedRoute from "src/routes/ProtectedRoute"; +import StageFiveLapsed from "src/pages/fi/StageFiveLapsed"; import { USER_TYPES } from "../constants"; import PageLayout from "../layout/PageLayout"; import SecureApplicationLayout from "../layout/SecureApplicationLayout"; @@ -52,7 +53,6 @@ import Applications from "../pages/ocp/Applications"; import { LoadCreditProduct } from "../pages/ocp/CreditProductForm"; import { LenderForm, LoadLender } from "../pages/ocp/LenderForm"; import Settings from "../pages/ocp/Settings"; -import StageFiveLapsed from "src/pages/fi/StageFiveLapsed"; // Create a React Query client const queryClient = new QueryClient({