diff --git a/app/components/MigrationDataOverview.tsx b/app/components/MigrationDataOverview.tsx index 685cba7dd..aeabebdd2 100644 --- a/app/components/MigrationDataOverview.tsx +++ b/app/components/MigrationDataOverview.tsx @@ -2,14 +2,18 @@ import type { Context } from "~/flows/contexts"; import { type Translations } from "~/services/cms/index.server"; import { getTranslationByKey } from "~/services/translations/getTranslationByKey"; import { lookupOrKey } from "~/util/lookupOrKey"; +import Button from "./Button"; import Heading from "./Heading"; type MigrationDataProps = { - readonly migrationData?: Context; + readonly userData?: Context; readonly translations: Translations; - readonly migrationOrderFields?: string[]; + readonly sortedFields?: string[]; + readonly buttonUrl?: string; }; +const MIGRATION_BUTTON_TEXT_TRANSLATION = "migrationButtonText"; + type ValueOfContext = Context[keyof Context]; const renderMigrationValue = ( @@ -34,34 +38,35 @@ const renderMigrationValue = ( return translation; }; -const getOrderFieldsData = ( - migrationData: Context, - migrationOrderFields?: string[], +const getSortedFieldsUserData = ( + userData: Context, + sortedFields?: string[], ) => { - if (typeof migrationOrderFields === "undefined") { - return migrationData; + if (typeof sortedFields === "undefined" || sortedFields.length === 0) { + return userData; } - return migrationOrderFields.reduce((orderedData, key) => { - if (key in migrationData) { - orderedData[key] = migrationData[key]; + return sortedFields.reduce((sortedUserData, key) => { + if (key in userData) { + sortedUserData[key] = userData[key]; } - return orderedData; + return sortedUserData; }, {} as Context); }; export default function MigrationDataOverview({ translations, - migrationData, - migrationOrderFields, + userData, + sortedFields, + buttonUrl, }: MigrationDataProps) { - if (!migrationData || Object.keys(migrationData).length === 0) return null; + if (!userData || Object.keys(userData).length === 0) return null; - const data = getOrderFieldsData(migrationData, migrationOrderFields); + const sortedFieldsUserData = getSortedFieldsUserData(userData, sortedFields); return (
- {Object.entries(data).map(([itemKey, itemValue]) => ( + {Object.entries(sortedFieldsUserData).map(([itemKey, itemValue]) => (
))} + + {buttonUrl && ( + + )}
); } diff --git a/app/components/__test__/MigrationDataOverview.test.tsx b/app/components/__test__/MigrationDataOverview.test.tsx index 9cb274692..08d53a735 100644 --- a/app/components/__test__/MigrationDataOverview.test.tsx +++ b/app/components/__test__/MigrationDataOverview.test.tsx @@ -1,15 +1,20 @@ import { render } from "@testing-library/react"; import MigrationDataOverview from "../MigrationDataOverview"; +// eslint-disable-next-line react/display-name +vi.mock("~/components/Button", () => ({ + default: () =>
Mock Button
, +})); + describe("MigrationDataOverview", () => { - it("should not render in case is missing migration data", () => { + it("should not render in case is missing migration userData", () => { const { container } = render(); expect(container).toBeEmptyDOMElement(); }); - it("should render the component based on the migration data and translations", () => { - const migrationData = { + it("should render the component based on the migration userData and translations", () => { + const migrationUserData = { bereich: "verspaetet", }; @@ -21,7 +26,7 @@ describe("MigrationDataOverview", () => { const { container, getByText } = render( , ); @@ -31,7 +36,7 @@ describe("MigrationDataOverview", () => { }); it("should render the component based on the migration data and the specific translation with .value", () => { - const migrationData = { + const migrationUserData = { startAirport: "BER", }; @@ -43,7 +48,7 @@ describe("MigrationDataOverview", () => { const { container, getByText } = render( , ); @@ -52,8 +57,8 @@ describe("MigrationDataOverview", () => { expect(getByText(translations["startAirport.value"])).toBeInTheDocument(); }); - it("should render the component based on the migration data when it contains nested objects and translations", () => { - const migrationData = { + it("should render the component based on the migration userData when it contains nested objects and translations", () => { + const migrationUserData = { zustaendigesAmtsgericht: { bezeichnung: "Amtsgericht Frankfurt am Main", strasseMitHausnummer: "Gerichtsstraße 2", @@ -68,7 +73,7 @@ describe("MigrationDataOverview", () => { const { container, getByText } = render( , ); @@ -77,18 +82,57 @@ describe("MigrationDataOverview", () => { getByText(translations["zustaendigesAmtsgericht"]), ).toBeInTheDocument(); expect( - getByText(migrationData["zustaendigesAmtsgericht"].bezeichnung), + getByText(migrationUserData["zustaendigesAmtsgericht"].bezeichnung), ).toBeInTheDocument(); expect( - getByText(migrationData["zustaendigesAmtsgericht"].strasseMitHausnummer), + getByText( + migrationUserData["zustaendigesAmtsgericht"].strasseMitHausnummer, + ), ).toBeInTheDocument(); expect( - getByText(migrationData["zustaendigesAmtsgericht"].plzUndStadt), + getByText(migrationUserData["zustaendigesAmtsgericht"].plzUndStadt), ).toBeInTheDocument(); }); - it("should render the component order the fields bases on the props migrationOrderFields", () => { - const migrationData = { + it("should render the component with fields sorted according to the sortedFields array", () => { + const migrationUserData = { + bereich: "verspaetet", + startAirport: "BER", + endAirport: "FRA", + }; + + const translations = { + bereich: "Problem", + "bereich.verspaetet": "Verspätete Beförderung", + startAirport: "Startflughafen", + "startAirport.value": "Berlin Brandenburg Flughafen (BER)", + endAirport: "Zielflughafen", + "endAirport.value": "Frankfurt Flughafen (FRA)", + }; + + const { queryAllByTestId } = render( + , + ); + + expect(queryAllByTestId("migration-field-value")[0].textContent).toEqual( + translations["startAirport"], + ); + + expect(queryAllByTestId("migration-field-value")[1].textContent).toEqual( + translations["endAirport"], + ); + + expect(queryAllByTestId("migration-field-value")[2].textContent).toEqual( + translations["bereich"], + ); + }); + + it("should render the component and order the fields based on the migrationUserData prop in case the sortedFields prop is an empty array.", () => { + const migrationUserData = { bereich: "verspaetet", startAirport: "BER", endAirport: "FRA", @@ -106,7 +150,8 @@ describe("MigrationDataOverview", () => { const { queryAllByTestId } = render( , ); @@ -122,4 +167,45 @@ describe("MigrationDataOverview", () => { translations["endAirport"], ); }); + + it("should render a Mock Button in case props buttonUrl has value", () => { + const migrationUserData = { + bereich: "verspaetet", + }; + + const translations = { + bereich: "Problem", + "bereich.verspaetet": "Verspätete Beförderung", + }; + + const { queryByText } = render( + , + ); + + expect(queryByText("Mock Button")).toBeInTheDocument(); + }); + + it("should not render a Mock Button in case props buttonUrl is not defined", () => { + const migrationUserData = { + bereich: "verspaetet", + }; + + const translations = { + bereich: "Problem", + "bereich.verspaetet": "Verspätete Beförderung", + }; + + const { queryByText } = render( + , + ); + + expect(queryByText("Mock Button")).not.toBeInTheDocument(); + }); }); diff --git a/app/flows/flows.server.ts b/app/flows/flows.server.ts index 4e84a7f83..5d72d69a8 100644 --- a/app/flows/flows.server.ts +++ b/app/flows/flows.server.ts @@ -15,7 +15,8 @@ import { prozesskostenhilfeFormular } from "./prozesskostenhilfeFormular"; export type FlowMigration = { source: FlowId; - orderFields: string[]; + sortedFields: string[]; + buttonUrl?: string; }; export type Flow = { diff --git a/app/flows/fluggastrechteFormular/grundvoraussetzungen/__test__/testcases.ts b/app/flows/fluggastrechteFormular/grundvoraussetzungen/__test__/testcases.ts index b88bc0a62..0733c167b 100644 --- a/app/flows/fluggastrechteFormular/grundvoraussetzungen/__test__/testcases.ts +++ b/app/flows/fluggastrechteFormular/grundvoraussetzungen/__test__/testcases.ts @@ -15,6 +15,8 @@ const happyPathSteps = [ "grundvoraussetzungen/prozessfaehig", "grundvoraussetzungen/ausgleichszahlung", "grundvoraussetzungen/zahlungsaufforderung", + "grundvoraussetzungen/daten-uebernahme", + "streitwert-kosten/gerichtskosten", ]; const cases = [ diff --git a/app/flows/fluggastrechteFormular/grundvoraussetzungen/flow.json b/app/flows/fluggastrechteFormular/grundvoraussetzungen/flow.json index 7b24d5e70..08b3cdaba 100644 --- a/app/flows/fluggastrechteFormular/grundvoraussetzungen/flow.json +++ b/app/flows/fluggastrechteFormular/grundvoraussetzungen/flow.json @@ -28,9 +28,8 @@ "guard": "grundvoraussetzungenDone" } ], - "BACK": "redirect-vorabcheck" + "BACK": "zahlungsaufforderung" } - }, - "redirect-vorabcheck": { "on": {} } + } } } diff --git a/app/flows/fluggastrechteFormular/index.ts b/app/flows/fluggastrechteFormular/index.ts index 227add5b0..6960ca7f5 100644 --- a/app/flows/fluggastrechteFormular/index.ts +++ b/app/flows/fluggastrechteFormular/index.ts @@ -38,7 +38,7 @@ export const fluggastrechtFlow = { cmsSlug: "form-flow-pages", migration: { source: "/fluggastrechte/vorabcheck", - orderFields: [ + sortedFields: [ "bereich", "startAirport", "endAirport", @@ -51,6 +51,7 @@ export const fluggastrechtFlow = { "ersatzflugStartenZweiStunden", "ersatzflugLandenVierStunden", ], + buttonUrl: "/fluggastrechte/vorabcheck/start", }, stringReplacements: (context: FluggastrechtContext) => ({ ...getStartAirportName(context), diff --git a/app/routes/fluggastrechte.formular.grundvoraussetzungen.redirect-vorabcheck.tsx b/app/routes/fluggastrechte.formular.grundvoraussetzungen.redirect-vorabcheck.tsx deleted file mode 100644 index 44413cdd3..000000000 --- a/app/routes/fluggastrechte.formular.grundvoraussetzungen.redirect-vorabcheck.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import { type LoaderFunction, redirect } from "@remix-run/node"; -//workaround to redirect to the vorabcheck -export const loader: LoaderFunction = async () => - redirect("/fluggastrechte/vorabcheck/start"); diff --git a/app/routes/shared/components/FormFlowPage.tsx b/app/routes/shared/components/FormFlowPage.tsx index d98779a93..6d49bb4ec 100644 --- a/app/routes/shared/components/FormFlowPage.tsx +++ b/app/routes/shared/components/FormFlowPage.tsx @@ -21,14 +21,13 @@ export function FormFlowPage() { csrf, formElements, heading, - migrationData, + migration, navItems, postFormContent, preHeading, stepData, translations, navigationA11yLabels, - migrationOrderFields, } = useLoaderData(); const stepId = splatFromParams(useParams()); const { pathname } = useLocation(); @@ -58,9 +57,10 @@ export function FormFlowPage() {
{arraySummaryData && Object.keys(arraySummaryData).length != 0 && (
diff --git a/app/routes/shared/formular.server.ts b/app/routes/shared/formular.server.ts index cdbf4256e..d084eca2e 100644 --- a/app/routes/shared/formular.server.ts +++ b/app/routes/shared/formular.server.ts @@ -247,11 +247,17 @@ export const loader = async ({ formElements, heading: cmsContent.heading, meta, - migrationData, - migrationOrderFields: - "migration" in currentFlow - ? currentFlow.migration.orderFields - : undefined, + migration: { + userData: migrationData, + sortedFields: + "migration" in currentFlow + ? currentFlow.migration.sortedFields + : undefined, + buttonUrl: + "migration" in currentFlow + ? currentFlow.migration.buttonUrl + : undefined, + }, navItems, postFormContent: cmsContent.postFormContent, preHeading: cmsContent.preHeading, diff --git a/app/services/session.server/__test__/getMigrationData.test.ts b/app/services/session.server/__test__/getMigrationData.test.ts index 8a215574a..6e0263ad2 100644 --- a/app/services/session.server/__test__/getMigrationData.test.ts +++ b/app/services/session.server/__test__/getMigrationData.test.ts @@ -13,7 +13,7 @@ const mockMigrationFlowDestination: Flow = { cmsSlug: "form-flow-pages", migration: { source: "/fluggastrechte/vorabcheck", - orderFields: [], + sortedFields: [], }, config: {}, guards: {}, diff --git a/tests/e2e/flowPages/fluggastrechte/formular/fluggastrechte.formular.spec.ts b/tests/e2e/flowPages/fluggastrechte/formular/fluggastrechte.formular.spec.ts index d26b9f89b..aa60a33ef 100644 --- a/tests/e2e/flowPages/fluggastrechte/formular/fluggastrechte.formular.spec.ts +++ b/tests/e2e/flowPages/fluggastrechte/formular/fluggastrechte.formular.spec.ts @@ -29,20 +29,6 @@ test.describe("Fluggastrechte Formular", () => { await startFluggastrechteFormular(page, formular); }); - test("redirect to vorabcheck when goes to /fluggastrechte/formular/grundvoraussetzungen/redirect-vorabcheck", async ({ - baseURL, - }) => { - const baseUrlWithoutSlash = getBaseUrlWithoutSlash(baseURL ?? ""); - const redirectCheckUrl = `${baseUrlWithoutSlash}${formular.url}/grundvoraussetzungen/redirect-vorabcheck`; - const redirectResponse = await fetch(redirectCheckUrl, { - method: "GET", - redirect: "manual", - }); - const redirectLocation = redirectResponse.headers.get("Location"); - - expect(redirectResponse.status).toEqual(302); - expect(redirectLocation).toEqual("/fluggastrechte/vorabcheck/start"); - }); test("redirect to vorabcheck/ergebnis/erfolg when goes to /fluggastrechte/formular/intro/redirect-vorabcheck-ergebnis", async ({ baseURL, }) => {