diff --git a/src/components/ProgressBar/ProgressBar.test.tsx b/src/components/ProgressBar/ProgressBar.test.tsx index bd4762f56..1370f1bd7 100644 --- a/src/components/ProgressBar/ProgressBar.test.tsx +++ b/src/components/ProgressBar/ProgressBar.test.tsx @@ -13,10 +13,11 @@ import { ContextState, Context as AuthCtx, Status as AuthStatus } from "../Conte type Props = { section: string; + userRole?: UserRole; data: object; }; -const BaseComponent: FC = ({ section, data = {} }: Props) => { +const BaseComponent: FC = ({ section, userRole = "Submitter", data = {} }: Props) => { const formValue = useMemo( () => ({ status: FormStatus.LOADED, @@ -28,10 +29,10 @@ const BaseComponent: FC = ({ section, data = {} }: Props) => { const authValue = useMemo( () => ({ status: AuthStatus.LOADED, - user: null, + user: { role: userRole } as User, isLoggedIn: true, }), - [] + [userRole] ); return ( @@ -224,4 +225,44 @@ describe("ProgressBar General Tests", () => { ); } ); + + it.each(["In Progress", "Inquired"])( + "shows the default review section title (from config) when submit button is visible and status is %s", + (status) => { + const data = { + status, + questionnaireData: { + sections: keys.map((s) => ({ name: s, status: "Completed" })), + }, + }; + + const { getByTestId } = render( + + ); + + const reviewSection = getByTestId(`progress-bar-section-${keys.length - 1}`); + + expect(reviewSection.textContent).toBe("Review and Submit"); + } + ); + + it.each(["In Progress", "Inquired"])( + "shows the review section title as 'Review' when submit button is not visible and status is %s", + (status) => { + const data = { + status, + questionnaireData: { + sections: keys.map((s) => ({ name: s, status: "Completed" })), + }, + }; + + const { getByTestId } = render( + + ); + + const reviewSection = getByTestId(`progress-bar-section-${keys.length - 1}`); + + expect(reviewSection.textContent).toBe("Review"); + } + ); }); diff --git a/src/components/ProgressBar/ProgressBar.tsx b/src/components/ProgressBar/ProgressBar.tsx index 75fad1680..97653b250 100644 --- a/src/components/ProgressBar/ProgressBar.tsx +++ b/src/components/ProgressBar/ProgressBar.tsx @@ -13,6 +13,8 @@ import config from "../../config/SectionConfig"; import { Status, useFormContext } from "../Contexts/FormContext"; import StatusAdornment from "./StatusAdornment"; import useFormMode from "../../hooks/useFormMode"; +import { useAuthContext } from "../Contexts/AuthContext"; +import { CanSubmitSubmissionRequestRoles } from "../../config/AuthRoles"; type Props = { section: string; @@ -77,6 +79,8 @@ const StyledButton = styled(ListItemButton)({ * @returns {JSX.Element} */ const ProgressBar: FC = ({ section }) => { + const { user } = useAuthContext(); + const sectionKeys = Object.keys(config); const { data, status: formStatus } = useFormContext(); @@ -112,7 +116,15 @@ const ProgressBar: FC = ({ section }) => { const reviewSection = newSections.find((s) => s.id === "review"); const reviewUnlocked = completedSections === sectionKeys.length - 1; if (reviewSection) { - const showReviewTitle = formMode === "View Only" || formMode === "Review"; + const meetsReviewCriteria = formMode === "View Only" || formMode === "Review"; + + const canSeeSubmitButton = + CanSubmitSubmissionRequestRoles.includes(user?.role) && + (data?.status === "In Progress" || + (data?.status === "Inquired" && user?.role === "Federal Lead")); + + const showReviewTitle = meetsReviewCriteria && !canSeeSubmitButton; + const reviewIcon = reviewUnlocked ? "Review" : "ReviewDisabled"; reviewSection.icon = ["Approved"].includes(status) && reviewUnlocked ? "Completed" : reviewIcon; @@ -121,7 +133,7 @@ const ProgressBar: FC = ({ section }) => { } setSections(newSections); - }, [section, sectionStatuses, formMode, formStatus]); + }, [section, sectionStatuses, formMode, formStatus, data?.status, user?.role]); return (