diff --git a/services/ui-src/src/components/reports/ReportPageFooter.tsx b/services/ui-src/src/components/reports/ReportPageFooter.tsx index cdf57d37e..fcf800790 100644 --- a/services/ui-src/src/components/reports/ReportPageFooter.tsx +++ b/services/ui-src/src/components/reports/ReportPageFooter.tsx @@ -3,10 +3,11 @@ import { useNavigate } from "react-router-dom"; import { Box, Button, Flex, Image, Spinner } from "@chakra-ui/react"; // utils import { parseCustomHtml, useFindRoute, useStore } from "utils"; -import { CustomHtmlElement, FormJson } from "types"; +import { CustomHtmlElement, FormJson, ReportStatus } from "types"; // assets import nextIcon from "assets/icons/icon_next_white.png"; import previousIcon from "assets/icons/icon_previous_blue.png"; +import { INITIAL_REPORT_ROUTES } from "../../constants"; export const ReportPageFooter = ({ submitting, @@ -20,56 +21,57 @@ export const ReportPageFooter = ({ report?.formTemplate.flatRoutes, report?.formTemplate.basePath ); - const hidePrevious = previousRoute === "/mcpar" || previousRoute === "/mlr"; - const { userIsAdmin, userIsReadOnly } = useStore().user ?? {}; + const { userIsAdmin, userIsReadOnly, userIsEndUser } = useStore().user ?? {}; const isAdminUserType = userIsAdmin || userIsReadOnly; - const formIsDisabled = isAdminUserType && !form?.editableByAdmins; + const hidePrevious = INITIAL_REPORT_ROUTES.includes(previousRoute); + const reportWithSubmittedStatus = report?.status === ReportStatus.SUBMITTED; + const formIsDisabled = + (isAdminUserType && !form?.editableByAdmins) || + (userIsEndUser && reportWithSubmittedStatus); + const isReadOnly = !form?.id || formIsDisabled; + + const prevButton = ( + + ); + + const nextButtonNavOnly = ( + + ); + + const nextButtonSubmit = ( + + ); return ( - - - {!hidePrevious && ( - - )} - {!form?.id || formIsDisabled ? ( - - ) : ( - - )} - - + + {!hidePrevious ? prevButton : null} + {isReadOnly ? nextButtonNavOnly : nextButtonSubmit} + {praDisclosure && ( {parseCustomHtml(praDisclosure)} )} @@ -86,15 +88,8 @@ interface Props { const sx = { footerBox: { - marginTop: "3.5rem", - }, - buttonFlex: { - justifyContent: "space-between", - marginY: "1.5rem", - }, - floatButtonRight: { - justifyContent: "right", - marginY: "1.5rem", + marginTop: "2.5rem", + paddingTop: "1.5rem", }, arrowIcon: { width: "1rem", @@ -102,8 +97,12 @@ const sx = { button: { width: "8.25rem", }, + nextButton: { + minWidth: "8.25rem", + marginLeft: "auto", + }, praStatement: { fontSize: "0.875rem", - paddingTop: "2rem", + marginTop: "2rem", }, }; diff --git a/services/ui-src/src/constants.ts b/services/ui-src/src/constants.ts index 9a1b8da92..359902f20 100644 --- a/services/ui-src/src/constants.ts +++ b/services/ui-src/src/constants.ts @@ -79,3 +79,6 @@ export enum States { // TIMEOUT PARAMS export const IDLE_WINDOW = 30 * 60 * 1000; // ms export const PROMPT_AT = 29 * 60 * 1000; //ms + +// REPORT ROUTES FOR FIRST SECTION OF A PROGRAM +export const INITIAL_REPORT_ROUTES = ["/mcpar", "/mlr", "/naaar"];