diff --git a/ui/content/ContentValidator.ts b/ui/content/ContentValidator.ts index 1e2757b72..0c8e4ab58 100644 --- a/ui/content/ContentValidator.ts +++ b/ui/content/ContentValidator.ts @@ -29,6 +29,7 @@ const REQUIRED_COMMON_KEYS: (keyof CommonContent)[] = [ ]; const REQUIRED_PAGE_KEYS: (keyof MainPagesContent)[] = [ + "before-you-start", "get-self-test-kit-for-HIV", "kit-not-available-in-area", "go-to-clinic", diff --git a/ui/content/content.json b/ui/content/content.json index 65b05a7a4..31f5c4a70 100644 --- a/ui/content/content.json +++ b/ui/content/content.json @@ -124,6 +124,22 @@ } }, "pages": { + "before-you-start": { + "pageTitle": "Before you order a free HIV self-test kit - HomeTest - NHS", + "title": "Before you order a free HIV self-test kit", + "urgentCard": { + "heading": "Go to a sexual health clinic if:", + "hivExposureBullet": "you think you've been exposed to HIV in the last 72 hours, as they can give you emergency medicine called PEP", + "stiSymptomsBulletPrefix": "you think you have any", + "stiSymptomsLink": { + "text": "sexually transmitted infection (STI) symptoms", + "href": "https://www.nhs.uk/conditions/sexually-transmitted-infections-stis/" + }, + "transmissionInfo": "The virus can be spread by having vaginal, anal or oral sex without a condom or by sharing needles with someone who has HIV.", + "aeAdvicePrefix": "You can also get emergency HIV medicine from" + }, + "continueButton": "Continue to order a kit" + }, "get-self-test-kit-for-HIV": { "title": "Get a self-test kit for HIV", "ageRequirement": "You can use this service if you are aged 18 or over.", @@ -396,22 +412,16 @@ "suppliers": { "preventx": { "title": "Preventx terms of use", - "introduction": [ - "This is introduction paragraph for Preventx. https://www.sh.uk/" - ], + "introduction": ["This is introduction paragraph for Preventx. https://www.sh.uk/"], "sections": [ { "id": "preventx-first-section", "heading": "It is first section for Preventx", - "paragraphs": [ - "It is example of content for Preventx." - ], + "paragraphs": ["It is example of content for Preventx."], "subsections": [ { "heading": "It is the first subsection for Preventx", - "paragraphs": [ - "It is example of content for Preventx." - ] + "paragraphs": ["It is example of content for Preventx."] } ] } @@ -419,22 +429,16 @@ }, "sh:24": { "title": "SH:24 terms of use", - "introduction": [ - "This is introduction paragraph for SH:24. https://sh24.org.uk/" - ], + "introduction": ["This is introduction paragraph for SH:24. https://sh24.org.uk/"], "sections": [ { "id": "sh24-first-section", "heading": "It is first section for SH:24 ", - "paragraphs": [ - "It is example of content for SH:24." - ], + "paragraphs": ["It is example of content for SH:24."], "subsections": [ { "heading": "It is the first subsection for SH:24", - "paragraphs": [ - "It is example of content for SH:24." - ] + "paragraphs": ["It is example of content for SH:24."] } ] } @@ -454,15 +458,11 @@ { "id": "preventx-first-section", "heading": "It is first privacy section for Preventx", - "paragraphs": [ - "It is example of privacy policy content for Preventx." - ], + "paragraphs": ["It is example of privacy policy content for Preventx."], "subsections": [ { "heading": "It is the first privacy subsection for Preventx", - "paragraphs": [ - "It is example of privacy policy content for Preventx." - ] + "paragraphs": ["It is example of privacy policy content for Preventx."] } ] } @@ -477,15 +477,11 @@ { "id": "sh24-first-section", "heading": "It is first privacy section for SH:24", - "paragraphs": [ - "It is example of privacy policy content for SH:24." - ], + "paragraphs": ["It is example of privacy policy content for SH:24."], "subsections": [ { "heading": "It is the first privacy subsection for SH:24", - "paragraphs": [ - "It is example of privacy policy content for SH:24." - ] + "paragraphs": ["It is example of privacy policy content for SH:24."] } ] } diff --git a/ui/content/schema.ts b/ui/content/schema.ts index eaebc43b1..e5dcfa547 100644 --- a/ui/content/schema.ts +++ b/ui/content/schema.ts @@ -478,11 +478,29 @@ export interface GoToClinicContent { moreOptionsHeading: string; } +export interface BeforeYouStartContent { + pageTitle: string; + title: string; + urgentCard: { + heading: string; + hivExposureBullet: string; + stiSymptomsBulletPrefix: string; + stiSymptomsLink: { + text: string; + href: string; + }; + transmissionInfo: string; + aeAdvicePrefix: string; + }; + continueButton: string; +} + // ============================================================================ // Pages Container // ============================================================================ export interface PagesContent { + "before-you-start": BeforeYouStartContent; "get-self-test-kit-for-HIV": StartPageContent; "enter-delivery-address": EnterDeliveryAddressContent; "enter-address-manually": EnterAddressManuallyContent; @@ -521,8 +539,7 @@ export interface ContentFile { export type MainPagesContent = Omit< PagesContent, - | "home-test-privacy-policy" - | "home-test-terms-of-use" + "home-test-privacy-policy" | "home-test-terms-of-use" >; export interface MainContentFile { diff --git a/ui/hooks/index.ts b/ui/hooks/index.ts index f0702cb59..9422a31e3 100644 --- a/ui/hooks/index.ts +++ b/ui/hooks/index.ts @@ -5,4 +5,5 @@ export { useContent, useCommonContent, usePageContent } from "./useContent"; export type { UseContentReturn } from "./useContent"; export { useAsyncErrorHandler } from "./useAsyncErrorHandler"; +export { usePageTitle } from "./usePageTitle"; export { useThrowError } from "./useThrowError"; diff --git a/ui/hooks/useContent.ts b/ui/hooks/useContent.ts index c80c0b2cc..f46ddd63b 100644 --- a/ui/hooks/useContent.ts +++ b/ui/hooks/useContent.ts @@ -1,4 +1,5 @@ import type { + BeforeYouStartContent, BloodSampleGuideContent, CannotUseServiceUnder18Content, CheckYourAnswersContent, @@ -7,7 +8,6 @@ import type { EnterAddressManuallyContent, EnterDeliveryAddressContent, EnterMobilePhoneNumberContent, - ServiceErrorContent, GoToClinicContent, HomeTestPrivacyPolicyContent, HomeTestTermsOfUseContent, @@ -17,14 +17,15 @@ import type { OrderSubmittedContent, OrderTrackingContent, SelectDeliveryAddressContent, + ServiceErrorContent, StartPageContent, SuppliersLegalDocumentsContent, TestResultsContent, } from "@/content"; - import { content } from "@/content"; export const PageKeys = { + BeforeYouStart: "before-you-start", GetSelfTest: "get-self-test-kit-for-HIV", KitNotAvailableInArea: "kit-not-available-in-area", EnterDeliveryAddress: "enter-delivery-address", @@ -47,6 +48,7 @@ export type PageKey = (typeof PageKeys)[keyof typeof PageKeys]; export interface UseContentReturn { commonContent: CommonContent; + "before-you-start": BeforeYouStartContent; "get-self-test-kit-for-HIV": StartPageContent; "kit-not-available-in-area": KitNotAvailableInAreaContent; "enter-delivery-address": EnterDeliveryAddressContent; @@ -73,6 +75,7 @@ export interface UseContentReturn { export const useContent = (): UseContentReturn => { return { commonContent: content.commonContent, + "before-you-start": content.pages["before-you-start"], "get-self-test-kit-for-HIV": content.pages["get-self-test-kit-for-HIV"], "kit-not-available-in-area": content.pages["kit-not-available-in-area"], "enter-delivery-address": content.pages["enter-delivery-address"], diff --git a/ui/hooks/usePageTitle.ts b/ui/hooks/usePageTitle.ts new file mode 100644 index 000000000..610825949 --- /dev/null +++ b/ui/hooks/usePageTitle.ts @@ -0,0 +1,11 @@ +import { useEffect } from "react"; + +export function usePageTitle(title: string) { + useEffect(() => { + const previous = document.title; + document.title = title; + return () => { + document.title = previous; + }; + }, [title]); +} diff --git a/ui/src/__tests__/routes/get-self-test-kit-for-HIV-journey/BeforeYouStartPage.test.tsx b/ui/src/__tests__/routes/get-self-test-kit-for-HIV-journey/BeforeYouStartPage.test.tsx new file mode 100644 index 000000000..cc2bc4f38 --- /dev/null +++ b/ui/src/__tests__/routes/get-self-test-kit-for-HIV-journey/BeforeYouStartPage.test.tsx @@ -0,0 +1,113 @@ +import "@testing-library/jest-dom"; +import { fireEvent, render, screen } from "@testing-library/react"; +import { MemoryRouter } from "react-router-dom"; + +import BeforeYouStartPage from "@/routes/get-self-test-kit-for-HIV-journey/BeforeYouStartPage"; + +const mockNavigate = jest.fn(); + +jest.mock("react-router-dom", () => ({ + ...jest.requireActual("react-router-dom"), + useNavigate: () => mockNavigate, +})); + +const TestWrapper = ({ children }: { children: React.ReactNode }) => ( + {children} +); + +describe("BeforeYouStartPage", () => { + beforeEach(() => { + mockNavigate.mockClear(); + }); + + it("renders the page heading", () => { + render(, { wrapper: TestWrapper }); + + expect( + screen.getByRole("heading", { name: "Before you order a free HIV self-test kit", level: 1 }), + ).toBeInTheDocument(); + }); + + it("renders the urgent card heading", () => { + render(, { wrapper: TestWrapper }); + + expect( + screen.getByRole("heading", { name: "Urgent advice: Go to a sexual health clinic if:" }), + ).toBeInTheDocument(); + }); + + it("renders the HIV exposure bullet", () => { + render(, { wrapper: TestWrapper }); + + expect( + screen.getByText( + "you think you've been exposed to HIV in the last 72 hours, as they can give you emergency medicine called PEP", + ), + ).toBeInTheDocument(); + }); + + it("renders the STI symptoms link with the correct href", () => { + render(, { wrapper: TestWrapper }); + + const stiLink = screen.getByRole("link", { + name: "sexually transmitted infection (STI) symptoms", + }); + expect(stiLink).toBeInTheDocument(); + expect(stiLink).toHaveAttribute( + "href", + "https://www.nhs.uk/conditions/sexually-transmitted-infections-stis/", + ); + }); + + it("renders the Find a sexual health clinic ActionLink with the correct href", () => { + render(, { wrapper: TestWrapper }); + + const clinicLink = screen.getByRole("link", { name: "Find a sexual health clinic" }); + expect(clinicLink).toBeInTheDocument(); + expect(clinicLink).toHaveAttribute( + "href", + "https://www.nhs.uk/service-search/sexual-health-services/find-a-sexual-health-clinic/", + ); + }); + + it("renders the A&E link with the correct href", () => { + render(, { wrapper: TestWrapper }); + + const aeLink = screen.getByRole("link", { name: "your nearest A&E" }); + expect(aeLink).toBeInTheDocument(); + expect(aeLink).toHaveAttribute( + "href", + "https://www.nhs.uk/service-search/find-an-accident-and-emergency-service/", + ); + }); + + it("renders the Continue to order a kit button", () => { + render(, { wrapper: TestWrapper }); + + expect(screen.getByRole("button", { name: "Continue to order a kit" })).toBeInTheDocument(); + }); + + it("navigates to /get-self-test-kit-for-HIV when the Continue button is clicked", () => { + render(, { wrapper: TestWrapper }); + + fireEvent.click(screen.getByRole("button", { name: "Continue to order a kit" })); + + expect(mockNavigate).toHaveBeenCalledWith("/get-self-test-kit-for-HIV"); + }); + + it("renders the transmission info paragraph", () => { + render(, { wrapper: TestWrapper }); + + expect( + screen.getByText( + "The virus can be spread by having vaginal, anal or oral sex without a condom or by sharing needles with someone who has HIV.", + ), + ).toBeInTheDocument(); + }); + + it("sets the document title", () => { + render(, { wrapper: TestWrapper }); + + expect(document.title).toBe("Before you order a free HIV self-test kit - HomeTest - NHS"); + }); +}); diff --git a/ui/src/__tests__/routes/get-self-test-kit-for-HIV-journey/CannotUseServiceUnder18Page.test.tsx b/ui/src/__tests__/routes/get-self-test-kit-for-HIV-journey/CannotUseServiceUnder18Page.test.tsx index 1c542d63e..3384958a1 100644 --- a/ui/src/__tests__/routes/get-self-test-kit-for-HIV-journey/CannotUseServiceUnder18Page.test.tsx +++ b/ui/src/__tests__/routes/get-self-test-kit-for-HIV-journey/CannotUseServiceUnder18Page.test.tsx @@ -263,6 +263,6 @@ describe("Back Navigation", () => { fireEvent.click(screen.getByText("Back")); expect(goBackMock).not.toHaveBeenCalled(); - expect(goToStepMock).toHaveBeenCalledWith(RoutePath.GetSelfTestKitPage); + expect(goToStepMock).toHaveBeenCalledWith(RoutePath.BeforeYouStartPage); }); }); diff --git a/ui/src/__tests__/routes/get-self-test-kit-for-HIV-journey/CheckYourAnswersPage.test.tsx b/ui/src/__tests__/routes/get-self-test-kit-for-HIV-journey/CheckYourAnswersPage.test.tsx index eedcdbc49..d5f25323e 100644 --- a/ui/src/__tests__/routes/get-self-test-kit-for-HIV-journey/CheckYourAnswersPage.test.tsx +++ b/ui/src/__tests__/routes/get-self-test-kit-for-HIV-journey/CheckYourAnswersPage.test.tsx @@ -361,7 +361,7 @@ describe("CheckYourAnswersPage", () => { await waitFor(() => { expect(mockClearAddresses).toHaveBeenCalled(); - expect(mockResetNavigation).toHaveBeenCalledWith(RoutePath.GetSelfTestKitPage, { + expect(mockResetNavigation).toHaveBeenCalledWith(RoutePath.BeforeYouStartPage, { replace: true, }); expect(screen.getByTestId("order-reference")).toHaveTextContent(""); diff --git a/ui/src/app.tsx b/ui/src/app.tsx index ffe9e644d..b9ddf0377 100644 --- a/ui/src/app.tsx +++ b/ui/src/app.tsx @@ -14,6 +14,7 @@ import ServiceErrorPage from "./routes/ServiceErrorPage"; import SuppliersPrivacyPolicyPage from "./routes/SuppliersPrivacyPolicyPage"; import SuppliersTermsConditionsPage from "./routes/SuppliersTermsConditionsPage"; import TestResultsPage from "./routes/TestResultsPage"; +import BeforeYouStartPage from "./routes/get-self-test-kit-for-HIV-journey/BeforeYouStartPage"; import BloodSampleGuidePage from "./routes/get-self-test-kit-for-HIV-journey/BloodSampleGuidePage"; import CannotUseServiceUnder18Page from "./routes/get-self-test-kit-for-HIV-journey/CannotUseServiceUnder18Page"; import CheckYourAnswersPage from "./routes/get-self-test-kit-for-HIV-journey/CheckYourAnswersPage"; @@ -74,7 +75,11 @@ const router = createBrowserRouter([ children: [ { path: RoutePath.HomePage, - element: , + element: , + }, + { + path: RoutePath.BeforeYouStartPage, + element: , }, { path: RoutePath.OrderTrackingPage, diff --git a/ui/src/lib/models/route-paths.ts b/ui/src/lib/models/route-paths.ts index 44b4d17f6..8bc83dd1f 100644 --- a/ui/src/lib/models/route-paths.ts +++ b/ui/src/lib/models/route-paths.ts @@ -3,6 +3,7 @@ export enum RoutePath { HomePage = "/", LoginPage = "/login", CallbackPage = "/callback", + BeforeYouStartPage = "/before-you-start", GetSelfTestKitPage = "/get-self-test-kit-for-HIV", OrderTrackingPage = "/orders/:orderId/tracking", TestResultsPage = "/orders/:orderId/results", diff --git a/ui/src/routes/CallbackPage.tsx b/ui/src/routes/CallbackPage.tsx index 25addc74e..ab30de48d 100644 --- a/ui/src/routes/CallbackPage.tsx +++ b/ui/src/routes/CallbackPage.tsx @@ -1,14 +1,14 @@ "use client"; -import { useAuth } from "@/state"; -import { mapAuthUser } from "@/lib/auth/mapAuthUser"; -import { consumeLoginCsrf, verifyState } from "@/lib/auth/loginState"; import { useEffect, useRef } from "react"; +import { useNavigate } from "react-router-dom"; +import { useAsyncErrorHandler } from "@/hooks"; +import { consumeLoginCsrf, verifyState } from "@/lib/auth/loginState"; +import { mapAuthUser } from "@/lib/auth/mapAuthUser"; import { RoutePath } from "@/lib/models/route-paths"; import { backendUrl } from "@/settings"; -import { useNavigate } from "react-router-dom"; -import { useAsyncErrorHandler } from "@/hooks"; +import { useAuth } from "@/state"; function safeReturnTo(value: string | null | undefined) { if (!value) return null; @@ -74,7 +74,7 @@ export default function CallbackPage() { const userData = mapAuthUser(data); setUser(userData); - navigate(returnTo ?? RoutePath.GetSelfTestKitPage); + navigate(returnTo ?? RoutePath.BeforeYouStartPage); }); useEffect(() => { diff --git a/ui/src/routes/get-self-test-kit-for-HIV-journey/BeforeYouStartPage.tsx b/ui/src/routes/get-self-test-kit-for-HIV-journey/BeforeYouStartPage.tsx new file mode 100644 index 000000000..3b2b8e7bb --- /dev/null +++ b/ui/src/routes/get-self-test-kit-for-HIV-journey/BeforeYouStartPage.tsx @@ -0,0 +1,55 @@ +"use client"; + +import { ActionLink, Button, Card } from "nhsuk-react-components"; +import { useNavigate } from "react-router-dom"; + +import { useContent, usePageTitle } from "@/hooks"; +import FormPageLayout from "@/layouts/FormPageLayout"; +import { RoutePath } from "@/lib/models/route-paths"; + +export default function BeforeYouStartPage() { + const navigate = useNavigate(); + const { commonContent, "before-you-start": content } = useContent(); + + usePageTitle(content.pageTitle); + + return ( + +

{content.title}

+ + + {content.urgentCard.heading} + + +

{content.urgentCard.transmissionInfo}

+ + + {commonContent.links.sexualHealthClinic.text} + + +

+ {`${content.urgentCard.aeAdvicePrefix} `} + + {commonContent.links.nearestAE.text} + + {"."} +

+
+ + +
+ ); +} diff --git a/ui/src/routes/get-self-test-kit-for-HIV-journey/BloodSampleGuidePage.tsx b/ui/src/routes/get-self-test-kit-for-HIV-journey/BloodSampleGuidePage.tsx index 8dcbe4045..2102cd716 100644 --- a/ui/src/routes/get-self-test-kit-for-HIV-journey/BloodSampleGuidePage.tsx +++ b/ui/src/routes/get-self-test-kit-for-HIV-journey/BloodSampleGuidePage.tsx @@ -2,9 +2,9 @@ import { Details, Images } from "nhsuk-react-components"; +import { useContent } from "@/hooks"; import FormPageLayout from "@/layouts/FormPageLayout"; import { RoutePath } from "@/lib/models/route-paths"; -import { useContent } from "@/hooks"; import { useJourneyNavigationContext } from "@/state"; export default function BloodSampleGuidePage() { @@ -18,7 +18,7 @@ export default function BloodSampleGuidePage() { if (stepHistory.length > 1) { goBack(); } else { - goToStep(RoutePath.GetSelfTestKitPage); + goToStep(RoutePath.BeforeYouStartPage); } }} > diff --git a/ui/src/routes/get-self-test-kit-for-HIV-journey/CannotUseServiceUnder18Page.tsx b/ui/src/routes/get-self-test-kit-for-HIV-journey/CannotUseServiceUnder18Page.tsx index e13a02c84..32a262c2f 100644 --- a/ui/src/routes/get-self-test-kit-for-HIV-journey/CannotUseServiceUnder18Page.tsx +++ b/ui/src/routes/get-self-test-kit-for-HIV-journey/CannotUseServiceUnder18Page.tsx @@ -49,7 +49,7 @@ export default function CannotUseServiceUnder18Page() { if (stepHistory.length > 1) { goBack(); } else { - goToStep(RoutePath.GetSelfTestKitPage); + goToStep(RoutePath.BeforeYouStartPage); } }} > diff --git a/ui/src/routes/get-self-test-kit-for-HIV-journey/CheckYourAnswersPage.tsx b/ui/src/routes/get-self-test-kit-for-HIV-journey/CheckYourAnswersPage.tsx index 62a5a7acb..17b17b046 100644 --- a/ui/src/routes/get-self-test-kit-for-HIV-journey/CheckYourAnswersPage.tsx +++ b/ui/src/routes/get-self-test-kit-for-HIV-journey/CheckYourAnswersPage.tsx @@ -67,7 +67,7 @@ export default function CheckYourAnswersPage() { reset(); clearAddresses(); - resetNavigation(RoutePath.GetSelfTestKitPage, { replace: true }); + resetNavigation(RoutePath.BeforeYouStartPage, { replace: true }); }, [clearAddresses, hasSubmittedOrder, navigationType, reset, resetNavigation]); const handleChangeClick = (field: "address" | "mobile" | "comfort") => { diff --git a/ui/src/routes/get-self-test-kit-for-HIV-journey/EnterDeliveryAddressPage.tsx b/ui/src/routes/get-self-test-kit-for-HIV-journey/EnterDeliveryAddressPage.tsx index 0192bcee4..ffc7a2724 100644 --- a/ui/src/routes/get-self-test-kit-for-HIV-journey/EnterDeliveryAddressPage.tsx +++ b/ui/src/routes/get-self-test-kit-for-HIV-journey/EnterDeliveryAddressPage.tsx @@ -86,7 +86,7 @@ export default function EnterDeliveryAddressPage() { if (stepHistory.length > 1) { goBack(); } else { - goToStep(RoutePath.GetSelfTestKitPage); + goToStep(RoutePath.BeforeYouStartPage); } }} > diff --git a/ui/src/routes/get-self-test-kit-for-HIV-journey/OrderSubmittedPage.tsx b/ui/src/routes/get-self-test-kit-for-HIV-journey/OrderSubmittedPage.tsx index bad2a62ee..7d6bd84a3 100644 --- a/ui/src/routes/get-self-test-kit-for-HIV-journey/OrderSubmittedPage.tsx +++ b/ui/src/routes/get-self-test-kit-for-HIV-journey/OrderSubmittedPage.tsx @@ -14,7 +14,7 @@ export default function OrderSubmittedPage() { useLayoutEffect(() => { if (orderAnswers.orderReferenceNumber == null) { - resetNavigation(RoutePath.GetSelfTestKitPage, { replace: true }); + resetNavigation(RoutePath.BeforeYouStartPage, { replace: true }); } }, [orderAnswers.orderReferenceNumber, resetNavigation]); diff --git a/ui/src/state/NavigationContext.tsx b/ui/src/state/NavigationContext.tsx index cf2df6fe8..2379f78c6 100644 --- a/ui/src/state/NavigationContext.tsx +++ b/ui/src/state/NavigationContext.tsx @@ -14,7 +14,7 @@ import { useLocation, useNavigate } from "react-router-dom"; import { JourneyStepNames, RoutePath } from "@/lib/models/route-paths"; import sessionService from "@/lib/services/session-service"; -type Step = JourneyStepNames | RoutePath.GetSelfTestKitPage; +type Step = JourneyStepNames | RoutePath.GetSelfTestKitPage | RoutePath.BeforeYouStartPage; type ResetNavigationOptions = { replace?: boolean }; // Map the current browser path back to the journey step enum used by the context. @@ -23,6 +23,10 @@ const getStepFromPath = (path: string): Step => { return RoutePath.GetSelfTestKitPage; } + if (path === RoutePath.BeforeYouStartPage) { + return RoutePath.BeforeYouStartPage; + } + return ( (path.replace(`${RoutePath.GetSelfTestKitPage}/`, "") as JourneyStepNames) || RoutePath.GetSelfTestKitPage @@ -31,9 +35,10 @@ const getStepFromPath = (path: string): Step => { // Build a browser path from a journey step when navigating programmatically. const getPathForStep = (step: Step): string => { - return step === RoutePath.GetSelfTestKitPage - ? RoutePath.GetSelfTestKitPage - : `${RoutePath.GetSelfTestKitPage}/${step}`; + if (step === RoutePath.GetSelfTestKitPage || step === RoutePath.BeforeYouStartPage) { + return step; + } + return `${RoutePath.GetSelfTestKitPage}/${step}`; }; export interface NavigationState {