From 4c00fa23999197fee73c62caa865366f624610ef Mon Sep 17 00:00:00 2001
From: tomi korkalainen <tomi.korkalainen@cgi.com>
Date: Thu, 3 Nov 2022 15:47:39 +0200
Subject: [PATCH 01/14] wip

---
 .../layout/HassuMuiThemeProvider.tsx          |  30 +++++
 src/components/layout/tabs/Tabs.tsx           |   2 +-
 .../SuunnitteluvaihePageLayout.tsx            | 102 +++++++++++++++
 .../SuunnitteluvaiheenPerustiedot.tsx         |  22 +---
 .../SuunnitteluvaiheenVuorovaikuttaminen.tsx  |   8 +-
 .../yllapito/projekti/[oid]/suunnittelu.tsx   | 122 ------------------
 .../projekti/[oid]/suunnittelu/index.tsx      |  42 ++++++
 .../vuorovaikuttaminen/[kierrosId].tsx        |  69 ++++++++++
 8 files changed, 250 insertions(+), 147 deletions(-)
 create mode 100644 src/components/projekti/suunnitteluvaihe/SuunnitteluvaihePageLayout.tsx
 delete mode 100644 src/pages/yllapito/projekti/[oid]/suunnittelu.tsx
 create mode 100644 src/pages/yllapito/projekti/[oid]/suunnittelu/index.tsx
 create mode 100644 src/pages/yllapito/projekti/[oid]/suunnittelu/vuorovaikuttaminen/[kierrosId].tsx

diff --git a/src/components/layout/HassuMuiThemeProvider.tsx b/src/components/layout/HassuMuiThemeProvider.tsx
index e75f99a47..f55b05beb 100644
--- a/src/components/layout/HassuMuiThemeProvider.tsx
+++ b/src/components/layout/HassuMuiThemeProvider.tsx
@@ -226,6 +226,36 @@ export const createLocalizedTheme = (locale: Localization) =>
             },
           },
         },
+        MuiTab: {
+          styleOverrides: {
+            root: {
+              paddingTop: "18px",
+              paddingBottom: "18px",
+              paddingLeft: "40px",
+              paddingRight: "40px",
+              textTransform: "none",
+              fontWeight: 400,
+              fontSize: "1rem",
+              lineHeight: 1.5,
+              color: "#242222",
+              opacity: 1,
+              "&.Mui-selected": {
+                color: "#0064AF",
+              },
+            },
+          },
+        },
+        MuiTabs: {
+          styleOverrides: {
+            root: {
+              borderBottom: "1px #979797 solid",
+            },
+            indicator: {
+              backgroundColor: "#0064AF",
+              height: "3px",
+            },
+          },
+        },
         MuiFormControlLabel: {
           styleOverrides: {
             root: {
diff --git a/src/components/layout/tabs/Tabs.tsx b/src/components/layout/tabs/Tabs.tsx
index 4a5eda0d3..0e5c45494 100644
--- a/src/components/layout/tabs/Tabs.tsx
+++ b/src/components/layout/tabs/Tabs.tsx
@@ -19,7 +19,7 @@ const TabStyle = {
       color: "#999999",
     },
   },
-} as const;
+};
 
 export type TabStyle = keyof typeof TabStyle;
 
diff --git a/src/components/projekti/suunnitteluvaihe/SuunnitteluvaihePageLayout.tsx b/src/components/projekti/suunnitteluvaihe/SuunnitteluvaihePageLayout.tsx
new file mode 100644
index 000000000..9d084d3b5
--- /dev/null
+++ b/src/components/projekti/suunnitteluvaihe/SuunnitteluvaihePageLayout.tsx
@@ -0,0 +1,102 @@
+import React, { ReactElement, FC, useMemo, ReactNode } from "react";
+import ProjektiPageLayout from "@components/projekti/ProjektiPageLayout";
+import Section from "@components/layout/Section";
+import { useProjekti } from "src/hooks/useProjekti";
+import { TabProps, Tabs, Tab } from "@mui/material";
+import { useRouter } from "next/router";
+import Link, { LinkProps } from "next/link";
+import { UrlObject } from "url";
+import { ParsedUrlQueryInput } from "querystring";
+
+export default function SuunnitteluPageLayoutWrapper({ children }: { children?: ReactNode }) {
+  const { data: projekti } = useProjekti();
+
+  const vuorovaikutusKierrosNumerot = useMemo(
+    () => projekti?.suunnitteluVaihe?.vuorovaikutukset?.map((vuorovaikutus) => vuorovaikutus.vuorovaikutusNumero) || [1],
+    [projekti?.suunnitteluVaihe?.vuorovaikutukset]
+  );
+
+  if (!projekti) {
+    return <></>;
+  }
+
+  return (
+    <SuunnitteluPageLayout projektiOid={projekti.oid} vuorovaikutusKierrosNumerot={vuorovaikutusKierrosNumerot} disableTabs={!projekti}>
+      {children}
+    </SuunnitteluPageLayout>
+  );
+}
+
+function SuunnitteluPageLayout({
+  projektiOid,
+  vuorovaikutusKierrosNumerot,
+  disableTabs,
+  children,
+}: {
+  projektiOid: string;
+  vuorovaikutusKierrosNumerot: number[];
+  disableTabs?: boolean;
+  children?: ReactNode;
+}): ReactElement {
+  const router = useRouter();
+
+  const tabProps: LinkTabProps[] = useMemo(() => {
+    const vuorovaikutusTabs = vuorovaikutusKierrosNumerot.map<LinkTabProps>((kierrosId) => {
+      return {
+        linkProps: {
+          href: {
+            pathname: `/yllapito/projekti/[oid]/suunnittelu/vuorovaikuttaminen/[kierrosId]`,
+            query: { oid: projektiOid, kierrosId: kierrosId.toString() },
+          },
+        },
+        label: `${kierrosId}. vuorovaikuttaminen`,
+        disabled: disableTabs,
+        id: `${kierrosId}_vuorovaikuttaminen_tab`,
+      };
+    });
+    return [
+      {
+        linkProps: {
+          href: {
+            pathname: `/yllapito/projekti/[oid]/suunnittelu`,
+            query: { oid: projektiOid },
+          },
+        },
+        label: "Suunnitteluvaiheen perustiedot",
+        disabled: disableTabs,
+        id: "perustiedot_tab",
+      },
+      ...vuorovaikutusTabs,
+    ];
+  }, [projektiOid, vuorovaikutusKierrosNumerot, disableTabs]);
+
+  const value = useMemo(
+    () =>
+      tabProps.findIndex((tProps) => {
+        const url = tProps.linkProps.href as UrlObject;
+        return url.pathname === router.pathname && (url.query as ParsedUrlQueryInput).kierrosId === router.query.kierrosId;
+      }),
+    [router.pathname, router.query.kierrosId, tabProps]
+  );
+
+  return (
+    <ProjektiPageLayout title="Suunnittelu">
+      <Section noDivider>
+        <Tabs value={value}>
+          {tabProps.map((tProps, index) => (
+            <LinkTab key={index} {...tProps} />
+          ))}
+        </Tabs>
+      </Section>
+      {children}
+    </ProjektiPageLayout>
+  );
+}
+
+type LinkTabProps = TabProps & { linkProps: LinkProps };
+
+const LinkTab: FC<LinkTabProps> = ({ linkProps, ...tabProps }) => (
+  <Link {...linkProps} passHref>
+    <Tab {...tabProps} />
+  </Link>
+);
diff --git a/src/components/projekti/suunnitteluvaihe/SuunnitteluvaiheenPerustiedot.tsx b/src/components/projekti/suunnitteluvaihe/SuunnitteluvaiheenPerustiedot.tsx
index 73ff0da76..f0a127190 100644
--- a/src/components/projekti/suunnitteluvaihe/SuunnitteluvaiheenPerustiedot.tsx
+++ b/src/components/projekti/suunnitteluvaihe/SuunnitteluvaiheenPerustiedot.tsx
@@ -6,7 +6,7 @@ import Textarea from "@components/form/Textarea";
 import { AloitusKuulutusTila, api, Kieli, SuunnitteluVaiheInput, SuunnitteluVaiheTila, TallennaProjektiInput } from "@services/api";
 import Section from "@components/layout/Section";
 import lowerCase from "lodash/lowerCase";
-import { ReactElement, useEffect, useMemo, useState } from "react";
+import { ReactElement, useMemo, useState } from "react";
 import Notification, { NotificationType } from "@components/notification/Notification";
 import TextInput from "@components/form/TextInput";
 import { DialogActions, DialogContent, Stack } from "@mui/material";
@@ -33,25 +33,17 @@ type FormValues = RequiredProjektiFields & {
   >;
 };
 
-interface Props {
-  isDirtyHandler: (isDirty: boolean) => void;
-}
-
-export default function SuunnitteluvaiheenPerustiedot({ isDirtyHandler }: Props): ReactElement {
+export default function SuunnitteluvaiheenPerustiedot(): ReactElement {
   const { data: projekti, mutate: reloadProjekti } = useProjekti({ revalidateOnMount: true });
-  return <>{projekti && <SuunnitteluvaiheenPerustiedotForm {...{ projekti, reloadProjekti, isDirtyHandler }} />}</>;
+  return <>{projekti && <SuunnitteluvaiheenPerustiedotForm {...{ projekti, reloadProjekti }} />}</>;
 }
 
 type SuunnitteluvaiheenPerustiedotFormProps = {
   projekti: ProjektiLisatiedolla;
   reloadProjekti: KeyedMutator<ProjektiLisatiedolla | null>;
-} & Props;
+};
 
-function SuunnitteluvaiheenPerustiedotForm({
-  projekti,
-  reloadProjekti,
-  isDirtyHandler,
-}: SuunnitteluvaiheenPerustiedotFormProps): ReactElement {
+function SuunnitteluvaiheenPerustiedotForm({ projekti, reloadProjekti }: SuunnitteluvaiheenPerustiedotFormProps): ReactElement {
   const [isFormSubmitting, setIsFormSubmitting] = useState(false);
   const { showSuccessMessage, showErrorMessage } = useSnackbars();
   const [openHyvaksy, setOpenHyvaksy] = useState(false);
@@ -156,10 +148,6 @@ function SuunnitteluvaiheenPerustiedotForm({
     reset(formData);
   };
 
-  useEffect(() => {
-    isDirtyHandler(isDirty);
-  }, [isDirty, isDirtyHandler]);
-
   const kielitiedot = projekti.kielitiedot;
   const ensisijainenKieli = projekti.kielitiedot ? projekti.kielitiedot.ensisijainenKieli : Kieli.SUOMI;
   const toissijainenKieli = kielitiedot?.toissijainenKieli;
diff --git a/src/components/projekti/suunnitteluvaihe/SuunnitteluvaiheenVuorovaikuttaminen.tsx b/src/components/projekti/suunnitteluvaihe/SuunnitteluvaiheenVuorovaikuttaminen.tsx
index b68a8654b..cd3bd3ebb 100644
--- a/src/components/projekti/suunnitteluvaihe/SuunnitteluvaiheenVuorovaikuttaminen.tsx
+++ b/src/components/projekti/suunnitteluvaihe/SuunnitteluvaiheenVuorovaikuttaminen.tsx
@@ -12,7 +12,7 @@ import {
   KirjaamoOsoite,
 } from "@services/api";
 import Section from "@components/layout/Section";
-import React, { ReactElement, useEffect, useState, useMemo, useCallback } from "react";
+import React, { ReactElement, useState, useMemo, useCallback } from "react";
 import Button from "@components/button/Button";
 import useSnackbars from "src/hooks/useSnackbars";
 import log from "loglevel";
@@ -60,7 +60,6 @@ export type VuorovaikutusFormValues = ProjektiFields & {
 };
 
 interface Props {
-  isDirtyHandler: (isDirty: boolean) => void;
   vuorovaikutusnro: number;
 }
 
@@ -95,7 +94,6 @@ type SuunnitteluvaiheenVuorovaikuttaminenFormProps = {
 } & Props;
 
 function SuunnitteluvaiheenVuorovaikuttaminenForm({
-  isDirtyHandler,
   vuorovaikutusnro,
   projekti,
   reloadProjekti,
@@ -239,10 +237,6 @@ function SuunnitteluvaiheenVuorovaikuttaminenForm({
     return handleSubmit(saveAndPublish);
   }, [handleSubmit, saveAndPublish]);
 
-  useEffect(() => {
-    isDirtyHandler(isDirty);
-  }, [isDirty, isDirtyHandler]);
-
   const handleClickOpenHyvaksy = () => {
     setOpenHyvaksy(true);
   };
diff --git a/src/pages/yllapito/projekti/[oid]/suunnittelu.tsx b/src/pages/yllapito/projekti/[oid]/suunnittelu.tsx
deleted file mode 100644
index 8c7c13609..000000000
--- a/src/pages/yllapito/projekti/[oid]/suunnittelu.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import React, { ReactElement, useCallback, useMemo, useState } from "react";
-import ProjektiPageLayout from "@components/projekti/ProjektiPageLayout";
-import Section from "@components/layout/Section";
-import Tabs, { HassuTabProps } from "@components/layout/tabs/Tabs";
-import SuunnitteluvaiheenPerustiedot from "@components/projekti/suunnitteluvaihe/SuunnitteluvaiheenPerustiedot";
-import SuunnitteluvaiheenVuorovaikuttaminen from "@components/projekti/suunnitteluvaihe/SuunnitteluvaiheenVuorovaikuttaminen";
-import { ProjektiLisatiedolla, useProjekti } from "src/hooks/useProjekti";
-import TallentamattomiaMuutoksiaDialog from "@components/TallentamattomiaMuutoksiaDialog";
-import SuunnitteluvaiheenPerustiedotLukutila from "@components/projekti/lukutila/SuunnitteluvaiheenPerustiedotLukutila";
-import VuorovaikuttaminenLukutila from "@components/projekti/lukutila/VuorovaikuttaminenLukutila";
-import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
-import { SuunnitteluVaiheTila } from "../../../../../common/graphql/apiModel";
-
-export default function SuunnitteluWrapper() {
-  const { data: projekti } = useProjekti();
-
-  if (!projekti) {
-    return <></>;
-  }
-
-  return <Suunnittelu projekti={projekti} />;
-}
-
-function Suunnittelu({ projekti }: { projekti: ProjektiLisatiedolla }): ReactElement {
-  const [currentTab, setCurrentTab] = useState<number | string>(0);
-  const [open, setOpen] = useState(false);
-  const [isDirty, setIsDirty] = useState(false);
-  const [selectedValue, setSelectedValue] = useState<number | string>(0);
-
-  const handleClickClose = () => {
-    setOpen(false);
-  };
-
-  const handleClickOk = useCallback(() => {
-    setIsDirty(false);
-    setCurrentTab(selectedValue);
-    setOpen(false);
-  }, [selectedValue, setIsDirty]);
-
-  const handleChange = useCallback(
-    (_event: React.SyntheticEvent<Element, Event>, value: string | number) => {
-      if (isDirty) {
-        setOpen(true);
-        setSelectedValue(value);
-      } else {
-        setOpen(false);
-        setCurrentTab(value);
-      }
-    },
-    [isDirty]
-  );
-
-  const vuorovaikutusTabs = useMemo(() => {
-    const tabs: HassuTabProps[] = [
-      {
-        label: "Suunnitteluvaiheen perustiedot",
-        tabId: "perustiedot_tab",
-        content: projektiOnEpaaktiivinen(projekti) ? (
-          <SuunnitteluvaiheenPerustiedotLukutila />
-        ) : (
-          <SuunnitteluvaiheenPerustiedot isDirtyHandler={setIsDirty} />
-        ),
-      },
-    ];
-    if (!projekti) {
-      return tabs;
-    }
-
-    if (projektiOnEpaaktiivinen(projekti)) {
-      projekti?.suunnitteluVaihe?.vuorovaikutukset?.forEach((vuorovaikutus) => {
-        tabs.push({
-          label: "1. Vuorovaikuttaminen",
-          tabId: "1_vuorovaikuttaminen_tab",
-          disabled: false,
-          content: <VuorovaikuttaminenLukutila vuorovaikutusnro={vuorovaikutus.vuorovaikutusNumero} />,
-        });
-      });
-    } else if (!projekti.suunnitteluVaihe?.vuorovaikutukset?.length) {
-      tabs.push({
-        label: "1. Vuorovaikuttaminen",
-        tabId: "1_vuorovaikuttaminen_tab",
-        disabled: !projekti.suunnitteluVaihe,
-        content: <SuunnitteluvaiheenVuorovaikuttaminen isDirtyHandler={setIsDirty} vuorovaikutusnro={1} />,
-      });
-    } else {
-      projekti?.suunnitteluVaihe?.vuorovaikutukset?.forEach((vuorovaikutus) => {
-        const tab = {
-          label: `${vuorovaikutus.vuorovaikutusNumero}. Vuorovaikuttaminen`,
-          tabId: `${vuorovaikutus.vuorovaikutusNumero}_vuorovaikuttaminen_tab`,
-          disabled: !projekti.suunnitteluVaihe,
-          content: (
-            <SuunnitteluvaiheenVuorovaikuttaminen vuorovaikutusnro={vuorovaikutus.vuorovaikutusNumero} isDirtyHandler={setIsDirty} />
-          ),
-        };
-        tabs.push(tab);
-      });
-    }
-    return tabs;
-  }, [projekti]);
-
-  const migroitu = projekti?.suunnitteluVaihe?.tila == SuunnitteluVaiheTila.MIGROITU;
-
-  return (
-    <ProjektiPageLayout title="Suunnittelu">
-      {!migroitu && (
-        <>
-          <Section noDivider>
-            <Tabs tabStyle="Underlined" value={currentTab} onChange={handleChange} tabs={vuorovaikutusTabs} />
-          </Section>
-          <TallentamattomiaMuutoksiaDialog open={open} handleClickClose={handleClickClose} handleClickOk={handleClickOk} />
-        </>
-      )}
-      {migroitu && (
-        <Section noDivider>
-          <>
-            <p>Tämä projekti on tuotu toisesta järjestelmästä, joten kaikki toiminnot eivät ole mahdollisia.</p>
-          </>
-        </Section>
-      )}
-    </ProjektiPageLayout>
-  );
-}
diff --git a/src/pages/yllapito/projekti/[oid]/suunnittelu/index.tsx b/src/pages/yllapito/projekti/[oid]/suunnittelu/index.tsx
new file mode 100644
index 000000000..dc1d70494
--- /dev/null
+++ b/src/pages/yllapito/projekti/[oid]/suunnittelu/index.tsx
@@ -0,0 +1,42 @@
+import React, { ReactElement } from "react";
+import { ProjektiLisatiedolla, useProjekti } from "src/hooks/useProjekti";
+import SuunnitteluPageLayoutWrapper from "@components/projekti/suunnitteluvaihe/SuunnitteluvaihePageLayout";
+import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
+import SuunnitteluvaiheenPerustiedotLukutila from "@components/projekti/lukutila/SuunnitteluvaiheenPerustiedotLukutila";
+import SuunnitteluvaiheenPerustiedot from "@components/projekti/suunnitteluvaihe/SuunnitteluvaiheenPerustiedot";
+import { SuunnitteluVaiheTila } from "@services/api";
+
+export default function SuunnitteluWrapper() {
+  const { data: projekti } = useProjekti();
+
+  if (!projekti) {
+    return <></>;
+  }
+
+  return <Suunnittelu projekti={projekti} />;
+}
+
+function Suunnittelu({ projekti }: { projekti: ProjektiLisatiedolla }): ReactElement {
+  const migroitu = projekti?.suunnitteluVaihe?.tila == SuunnitteluVaiheTila.MIGROITU;
+  const epaaktiivinen = projektiOnEpaaktiivinen(projekti);
+
+  if (migroitu) {
+    return (
+      <SuunnitteluPageLayoutWrapper>
+        <p>Tämä projekti on tuotu toisesta järjestelmästä, joten kaikki toiminnot eivät ole mahdollisia.</p>
+      </SuunnitteluPageLayoutWrapper>
+    );
+  }
+
+  if (epaaktiivinen) {
+    <SuunnitteluPageLayoutWrapper>
+      <SuunnitteluvaiheenPerustiedotLukutila />
+    </SuunnitteluPageLayoutWrapper>;
+  }
+
+  return (
+    <SuunnitteluPageLayoutWrapper>
+      <SuunnitteluvaiheenPerustiedot />
+    </SuunnitteluPageLayoutWrapper>
+  );
+}
diff --git a/src/pages/yllapito/projekti/[oid]/suunnittelu/vuorovaikuttaminen/[kierrosId].tsx b/src/pages/yllapito/projekti/[oid]/suunnittelu/vuorovaikuttaminen/[kierrosId].tsx
new file mode 100644
index 000000000..9dd8398bb
--- /dev/null
+++ b/src/pages/yllapito/projekti/[oid]/suunnittelu/vuorovaikuttaminen/[kierrosId].tsx
@@ -0,0 +1,69 @@
+import React, { ReactElement } from "react";
+import { ProjektiLisatiedolla, useProjekti } from "src/hooks/useProjekti";
+import SuunnitteluPageLayout from "@components/projekti/suunnitteluvaihe/SuunnitteluvaihePageLayout";
+import { useRouter } from "next/router";
+import { isInteger } from "lodash";
+import VuorovaikuttaminenLukutila from "@components/projekti/lukutila/VuorovaikuttaminenLukutila";
+import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
+import SuunnitteluvaiheenVuorovaikuttaminen from "@components/projekti/suunnitteluvaihe/SuunnitteluvaiheenVuorovaikuttaminen";
+import { SuunnitteluVaiheTila } from "@services/api";
+
+export default function VuorovaikutusKierrosWrapper() {
+  const { data: projekti } = useProjekti();
+
+  if (!projekti) {
+    return <></>;
+  }
+
+  return <VuorovaikutusKierros projekti={projekti} />;
+}
+
+function VuorovaikutusKierros({ projekti }: { projekti: ProjektiLisatiedolla }): ReactElement {
+  const router = useRouter();
+
+  const vuorovaikutukset = projekti.suunnitteluVaihe?.vuorovaikutukset;
+
+  const kierrosId = router.query.kierrosId;
+
+  // Check that kierrosId query param is string that is parseable to number
+  const validatedKierrosId =
+    typeof kierrosId === "string" &&
+    !isInteger(kierrosId) &&
+    vuorovaikutukset?.some((vuorovaikutus) => vuorovaikutus.vuorovaikutusNumero === parseInt(kierrosId) || kierrosId === "1")
+      ? parseInt(kierrosId)
+      : undefined;
+
+  const migroitu = projekti?.suunnitteluVaihe?.tila == SuunnitteluVaiheTila.MIGROITU;
+
+  const epaaktiivinen = projektiOnEpaaktiivinen(projekti);
+
+  if (epaaktiivinen) {
+    return (
+      <SuunnitteluPageLayout>
+        {validatedKierrosId ? (
+          <VuorovaikuttaminenLukutila vuorovaikutusnro={validatedKierrosId} />
+        ) : (
+          <p>Virheellinen vuorovaikutusnumero</p>
+        )}
+      </SuunnitteluPageLayout>
+    );
+  }
+
+  if (migroitu) {
+    return (
+      <SuunnitteluPageLayout>
+        <p>Tämä projekti on tuotu toisesta järjestelmästä, joten kaikki toiminnot eivät ole mahdollisia.</p>
+      </SuunnitteluPageLayout>
+    );
+  }
+
+  return (
+    <SuunnitteluPageLayout>
+      {validatedKierrosId ? (
+        <SuunnitteluvaiheenVuorovaikuttaminen vuorovaikutusnro={validatedKierrosId} />
+      ) : (
+        <p>Virheellinen vuorovaikutusnumero</p>
+      )}
+    </SuunnitteluPageLayout>
+  );
+}

From dfa87766532fc9068a7ee18e440d39053b007fa4 Mon Sep 17 00:00:00 2001
From: tomi korkalainen <tomi.korkalainen@cgi.com>
Date: Fri, 4 Nov 2022 11:13:35 +0200
Subject: [PATCH 02/14] korvaa tabit vuorovaikutussivulla

---
 src/components/layout/Breadcrumbs.tsx         | 61 +++++++++++++------
 .../layout/HassuMuiThemeProvider.tsx          |  4 ++
 .../projekti/ProjektiSideNavigation.tsx       |  3 +-
 .../SuunnitteluvaihePageLayout.tsx            | 15 +++--
 src/hooks/useIsOnAllowedProjektiRoute.tsx     | 16 ++---
 .../vuorovaikuttaminen/[kierrosId].tsx        | 13 +---
 src/util/getValidatedKierrosId.ts             | 13 ++++
 7 files changed, 78 insertions(+), 47 deletions(-)
 create mode 100644 src/util/getValidatedKierrosId.ts

diff --git a/src/components/layout/Breadcrumbs.tsx b/src/components/layout/Breadcrumbs.tsx
index 67ead1e1f..e383228ac 100644
--- a/src/components/layout/Breadcrumbs.tsx
+++ b/src/components/layout/Breadcrumbs.tsx
@@ -6,9 +6,18 @@ import { Container, styled } from "@mui/material";
 import { ProjektiLisatiedolla, useProjekti } from "src/hooks/useProjekti";
 import { ProjektiJulkinen } from "@services/api";
 import { useProjektiJulkinen } from "src/hooks/useProjektiJulkinen";
+import { getValidatedKierrosId } from "src/util/getValidatedKierrosId";
+import classNames from "classnames";
+import { ParsedUrlQueryInput } from "querystring";
 
 interface RouteLabels {
-  [key: string]: { label: string; hideWhenNotCurrentRoute?: boolean; preventTranslation?: boolean };
+  [key: string]: {
+    label: string;
+    hideWhenNotCurrentRoute?: boolean;
+    preventTranslation?: boolean;
+    disableRoute?: boolean;
+    queryParams?: ParsedUrlQueryInput;
+  };
 }
 
 const Breadcrumbs = () => {
@@ -40,7 +49,7 @@ function BreadcrumbsVirkamies(): ReactElement {
   const routeLabels: RouteLabels = useMemo(() => {
     let routes: RouteLabels = {};
     if (router.isReady) {
-      const routeLabels = getVirkamiesRouteLabels(projekti);
+      const routeLabels = getVirkamiesRouteLabels(router, projekti);
       routes = generateRoutes(router, routeLabels);
     }
     return routes;
@@ -49,23 +58,34 @@ function BreadcrumbsVirkamies(): ReactElement {
   return <BreadcrumbComponent isYllapito routeLabels={routeLabels} />;
 }
 
-const getVirkamiesRouteLabels: (projekti: ProjektiLisatiedolla | null | undefined) => RouteLabels = (projekti) => {
+const getVirkamiesRouteLabels: (router: NextRouter, projekti: ProjektiLisatiedolla | null | undefined) => RouteLabels = (
+  router,
+  projekti
+) => {
   const projektiLabel = projekti?.velho.nimi || projekti?.oid || "...";
+  const kierrosId = projekti && getValidatedKierrosId(router, projekti);
   return {
     "/yllapito": { label: "Etusivu", hideWhenNotCurrentRoute: true },
     "/yllapito/perusta": { label: "Projektin perustaminen" },
     "/yllapito/perusta/[oid]": { label: projektiLabel },
     "/yllapito/projekti": { label: "Projektit" },
-    "/yllapito/projekti/[oid]": { label: projektiLabel },
-    "/yllapito/projekti/[oid]/aloituskuulutus": { label: "Aloituskuulutus" },
-    "/yllapito/projekti/[oid]/kasittelyntila": { label: "Käsittelyn tila" },
-    "/yllapito/projekti/[oid]/henkilot": { label: "Henkilöt ja käyttöoikeushallinta" },
-    "/yllapito/projekti/[oid]/suunnittelu": { label: "Suunnittelu ja vuorovaikutus" },
-    "/yllapito/projekti/[oid]/suunnittelu/vuorovaikuttaminen": { label: "Vuorovaikutus" },
-    "/yllapito/projekti/[oid]/suunnittelu/vuorovaikuttaminen/[kierrosId]": { label: "Vuorovaikutus" },
-    "/yllapito/projekti/[oid]/nahtavillaolo": { label: "Nähtävilläolovaihe" },
-    "/yllapito/projekti/[oid]/hyvaksymispaatos": { label: "Hyväksymispäätös" },
-    "/yllapito/projekti/[oid]/jatkaminen1": { label: "1. jatkaminen" },
+    "/yllapito/projekti/[oid]": { label: projektiLabel, queryParams: { oid: projekti?.oid } },
+    "/yllapito/projekti/[oid]/aloituskuulutus": { label: "Aloituskuulutus", queryParams: { oid: projekti?.oid } },
+    "/yllapito/projekti/[oid]/kasittelyntila": { label: "Käsittelyn tila", queryParams: { oid: projekti?.oid } },
+    "/yllapito/projekti/[oid]/henkilot": { label: "Henkilöt ja käyttöoikeushallinta", queryParams: { oid: projekti?.oid } },
+    "/yllapito/projekti/[oid]/suunnittelu": { label: "Suunnittelu ja vuorovaikutus", queryParams: { oid: projekti?.oid } },
+    "/yllapito/projekti/[oid]/suunnittelu/vuorovaikuttaminen": {
+      label: "Vuorovaikutus",
+      disableRoute: true,
+      queryParams: { oid: projekti?.oid },
+    },
+    "/yllapito/projekti/[oid]/suunnittelu/vuorovaikuttaminen/[kierrosId]": {
+      label: kierrosId ? `${kierrosId}. vuorovaikuttaminen` : "Vuorovaikuttaminen",
+      queryParams: { oid: projekti?.oid, kierrosId },
+    },
+    "/yllapito/projekti/[oid]/nahtavillaolo": { label: "Nähtävilläolovaihe", queryParams: { oid: projekti?.oid } },
+    "/yllapito/projekti/[oid]/hyvaksymispaatos": { label: "Hyväksymispäätös", queryParams: { oid: projekti?.oid } },
+    "/yllapito/projekti/[oid]/jatkaminen1": { label: "1. jatkaminen", queryParams: { oid: projekti?.oid } },
     "/yllapito/ohjeet": { label: "Ohjeet" },
     "/_error": { label: "Virhe" },
   };
@@ -109,9 +129,8 @@ export const generateRoutes = (nextRouter: NextRouter, labels: RouteLabels): Rou
     const jointPathname = joinPath(pathnameSplitted, index);
     if (isRouteVisible(jointPathname)) {
       const routeLabel = labels[jointPathname];
-      const label = routeLabel?.label || pathname;
-      const preventTranslation = !!routeLabel ? routeLabel.preventTranslation : true;
-      reducer[jointPathname] = { label, preventTranslation };
+      const { label = pathname, preventTranslation = true, disableRoute, queryParams } = routeLabel || {};
+      reducer[jointPathname] = { label, preventTranslation, disableRoute, queryParams };
     }
     return reducer;
   }, {});
@@ -128,16 +147,18 @@ const BreadcrumbComponent: FC<{ routeLabels: RouteLabels; isYllapito?: boolean }
           <li className="mr-1 truncate-ellipsis max-w-xs">
             <Link href={isYllapito ? "/yllapito" : "/"}>{t("common:sivustonimi")}</Link>
           </li>
-          {Object.entries(routeLabels).map(([pathname, { label, preventTranslation }]) => (
+          {Object.entries(routeLabels).map(([pathname, { label, preventTranslation, disableRoute, queryParams }]) => (
             <ListItem className="mr-1 truncate-ellipsis max-w-xs" key={pathname}>
-              {!isCurrentRoute(pathname, router) ? (
-                <Link href={{ pathname, query: router.query }}>
+              {!isCurrentRoute(pathname, router) && !disableRoute ? (
+                <Link href={{ pathname, query: queryParams }}>
                   <a>
                     <span>{!isYllapito && !preventTranslation ? t(`common:polut.${label}`) : label}</span>
                   </a>
                 </Link>
               ) : (
-                <span className="font-bold">{!isYllapito && !preventTranslation ? t(`common:polut.${label}`) : label}</span>
+                <span className={classNames(isCurrentRoute(pathname, router) && "font-bold")}>
+                  {!isYllapito && !preventTranslation ? t(`common:polut.${label}`) : label}
+                </span>
               )}
             </ListItem>
           ))}
diff --git a/src/components/layout/HassuMuiThemeProvider.tsx b/src/components/layout/HassuMuiThemeProvider.tsx
index f55b05beb..367bddd40 100644
--- a/src/components/layout/HassuMuiThemeProvider.tsx
+++ b/src/components/layout/HassuMuiThemeProvider.tsx
@@ -246,6 +246,10 @@ export const createLocalizedTheme = (locale: Localization) =>
           },
         },
         MuiTabs: {
+          defaultProps: {
+            variant: "scrollable",
+            scrollButtons: "auto",
+          },
           styleOverrides: {
             root: {
               borderBottom: "1px #979797 solid",
diff --git a/src/components/projekti/ProjektiSideNavigation.tsx b/src/components/projekti/ProjektiSideNavigation.tsx
index 15f2dd4c4..cdc1131cc 100644
--- a/src/components/projekti/ProjektiSideNavigation.tsx
+++ b/src/components/projekti/ProjektiSideNavigation.tsx
@@ -35,6 +35,7 @@ const ProjektiSideNavigation: FC<{ projekti: ProjektiLisatiedolla }> = ({ projek
             .filter((route) => isVisible(projekti, route))
             .map((route, index) => {
               const statusDisabled = !projektiMeetsMinimumStatus(projekti, route.requiredStatus);
+              const isSelected = route.requireExactMatch ? route.pathname === router.pathname : router.pathname.startsWith(route.pathname!);
               return (
                 <li key={index}>
                   <HassuLink
@@ -42,7 +43,7 @@ const ProjektiSideNavigation: FC<{ projekti: ProjektiLisatiedolla }> = ({ projek
                     href={!statusDisabled ? { pathname: route.pathname, query: { oid: projekti.oid } } : undefined}
                     className={classNames(
                       "block pr-12 p-4 border-l-4",
-                      router.pathname === route.pathname ? "border-primary bg-gray-light" : "border-transparent",
+                      isSelected ? "border-primary bg-gray-light" : "border-transparent",
                       statusDisabled ? "text-gray" : "hover:bg-gray-light"
                     )}
                   >
diff --git a/src/components/projekti/suunnitteluvaihe/SuunnitteluvaihePageLayout.tsx b/src/components/projekti/suunnitteluvaihe/SuunnitteluvaihePageLayout.tsx
index 9d084d3b5..e0a3da5aa 100644
--- a/src/components/projekti/suunnitteluvaihe/SuunnitteluvaihePageLayout.tsx
+++ b/src/components/projekti/suunnitteluvaihe/SuunnitteluvaihePageLayout.tsx
@@ -70,14 +70,13 @@ function SuunnitteluPageLayout({
     ];
   }, [projektiOid, vuorovaikutusKierrosNumerot, disableTabs]);
 
-  const value = useMemo(
-    () =>
-      tabProps.findIndex((tProps) => {
-        const url = tProps.linkProps.href as UrlObject;
-        return url.pathname === router.pathname && (url.query as ParsedUrlQueryInput).kierrosId === router.query.kierrosId;
-      }),
-    [router.pathname, router.query.kierrosId, tabProps]
-  );
+  const value = useMemo(() => {
+    const indexOfTab = tabProps.findIndex((tProps) => {
+      const url = tProps.linkProps.href as UrlObject;
+      return url.pathname === router.pathname && (url.query as ParsedUrlQueryInput).kierrosId === router.query.kierrosId;
+    });
+    return indexOfTab === -1 ? false : indexOfTab;
+  }, [router.pathname, router.query.kierrosId, tabProps]);
 
   return (
     <ProjektiPageLayout title="Suunnittelu">
diff --git a/src/hooks/useIsOnAllowedProjektiRoute.tsx b/src/hooks/useIsOnAllowedProjektiRoute.tsx
index 2ccaec013..09ff88289 100644
--- a/src/hooks/useIsOnAllowedProjektiRoute.tsx
+++ b/src/hooks/useIsOnAllowedProjektiRoute.tsx
@@ -7,8 +7,9 @@ export interface Route {
   title: string;
   requiredStatus: Status;
   pathname?: string;
-  visible?: (projekti: ProjektiLisatiedolla | null | undefined) => Boolean;
+  visible?: (projekti: ProjektiLisatiedolla | null | undefined) => boolean;
   id: string;
+  requireExactMatch?: boolean;
 }
 
 export const routes: Route[] = [
@@ -23,6 +24,7 @@ export const routes: Route[] = [
     id: "projektin_tiedot",
     requiredStatus: Status.EI_JULKAISTU,
     pathname: `/yllapito/projekti/[oid]`,
+    requireExactMatch: true,
   },
   {
     title: "Käsittelyn tila",
@@ -63,7 +65,7 @@ export const routes: Route[] = [
   },
 ];
 
-function isJatkopaatos1Visible(projekti: ProjektiLisatiedolla | null | undefined): Boolean {
+function isJatkopaatos1Visible(projekti: ProjektiLisatiedolla | null | undefined): boolean {
   return projekti?.status === Status.JATKOPAATOS_1;
 }
 
@@ -97,11 +99,11 @@ export const useIsAllowedOnCurrentProjektiRoute: () => isAllowedOnRouteResponse
     const pathnameForAllowedRoute = isAllowedOnRoute
       ? undefined
       : routes.reduce<string | undefined>((allowedPathname, route) => {
-        if (projektiMeetsMinimumStatus(projekti, route.requiredStatus)) {
-          allowedPathname = route.pathname;
-        }
-        return allowedPathname;
-      }, undefined);
+          if (projektiMeetsMinimumStatus(projekti, route.requiredStatus)) {
+            allowedPathname = route.pathname;
+          }
+          return allowedPathname;
+        }, undefined);
     return { isAllowedOnRoute, pathnameForAllowedRoute };
   }, [projekti, router.pathname]);
 };
diff --git a/src/pages/yllapito/projekti/[oid]/suunnittelu/vuorovaikuttaminen/[kierrosId].tsx b/src/pages/yllapito/projekti/[oid]/suunnittelu/vuorovaikuttaminen/[kierrosId].tsx
index 9dd8398bb..f3dc5aca6 100644
--- a/src/pages/yllapito/projekti/[oid]/suunnittelu/vuorovaikuttaminen/[kierrosId].tsx
+++ b/src/pages/yllapito/projekti/[oid]/suunnittelu/vuorovaikuttaminen/[kierrosId].tsx
@@ -2,11 +2,11 @@ import React, { ReactElement } from "react";
 import { ProjektiLisatiedolla, useProjekti } from "src/hooks/useProjekti";
 import SuunnitteluPageLayout from "@components/projekti/suunnitteluvaihe/SuunnitteluvaihePageLayout";
 import { useRouter } from "next/router";
-import { isInteger } from "lodash";
 import VuorovaikuttaminenLukutila from "@components/projekti/lukutila/VuorovaikuttaminenLukutila";
 import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
 import SuunnitteluvaiheenVuorovaikuttaminen from "@components/projekti/suunnitteluvaihe/SuunnitteluvaiheenVuorovaikuttaminen";
 import { SuunnitteluVaiheTila } from "@services/api";
+import { getValidatedKierrosId } from "src/util/getValidatedKierrosId";
 
 export default function VuorovaikutusKierrosWrapper() {
   const { data: projekti } = useProjekti();
@@ -21,17 +21,8 @@ export default function VuorovaikutusKierrosWrapper() {
 function VuorovaikutusKierros({ projekti }: { projekti: ProjektiLisatiedolla }): ReactElement {
   const router = useRouter();
 
-  const vuorovaikutukset = projekti.suunnitteluVaihe?.vuorovaikutukset;
-
-  const kierrosId = router.query.kierrosId;
-
   // Check that kierrosId query param is string that is parseable to number
-  const validatedKierrosId =
-    typeof kierrosId === "string" &&
-    !isInteger(kierrosId) &&
-    vuorovaikutukset?.some((vuorovaikutus) => vuorovaikutus.vuorovaikutusNumero === parseInt(kierrosId) || kierrosId === "1")
-      ? parseInt(kierrosId)
-      : undefined;
+  const validatedKierrosId = getValidatedKierrosId(router, projekti);
 
   const migroitu = projekti?.suunnitteluVaihe?.tila == SuunnitteluVaiheTila.MIGROITU;
 
diff --git a/src/util/getValidatedKierrosId.ts b/src/util/getValidatedKierrosId.ts
new file mode 100644
index 000000000..84dda2532
--- /dev/null
+++ b/src/util/getValidatedKierrosId.ts
@@ -0,0 +1,13 @@
+import { isInteger } from "lodash";
+import { NextRouter } from "next/router";
+import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
+
+export const getValidatedKierrosId = (router: NextRouter, projekti: ProjektiLisatiedolla) => {
+  const kierrosId = router.query.kierrosId;
+  const vuorovaikutukset = projekti.suunnitteluVaihe?.vuorovaikutukset;
+  return typeof kierrosId === "string" &&
+    !isInteger(kierrosId) &&
+    vuorovaikutukset?.some((vuorovaikutus) => vuorovaikutus.vuorovaikutusNumero === parseInt(kierrosId) || kierrosId === "1")
+    ? parseInt(kierrosId)
+    : undefined;
+};

From 2ff7f346ba2eb9d3ee3e145d887f632dc0bb4bfe Mon Sep 17 00:00:00 2001
From: tomi korkalainen <tomi.korkalainen@cgi.com>
Date: Fri, 4 Nov 2022 15:25:43 +0200
Subject: [PATCH 03/14] muokkaa nahtavillaolovaiheen tabit kuntoon

---
 i18n.js                                       |   2 +-
 src/components/layout/Breadcrumbs.tsx         |   1 +
 .../layout/HassuMuiThemeProvider.tsx          |   2 +-
 src/components/layout/LinkTab.tsx             |  11 +
 src/components/projekti/ProjektiConsumer.tsx  |  16 ++
 .../nahtavillaolo/NahtavillaoloPageLayout.tsx | 172 +++++++++++++++
 .../kuulutuksentiedot/KuulutuksenTiedot.tsx   |  22 +-
 .../Muokkausnakyma.tsx                        |  16 +-
 .../NahtavilleAsetettavatAineistot.tsx        |   8 +-
 .../SuunnitteluvaihePageLayout.tsx            |  46 ++--
 .../yllapito/projekti/[oid]/nahtavillaolo.tsx | 196 ------------------
 .../projekti/[oid]/nahtavillaolo/aineisto.tsx |  27 +++
 .../projekti/[oid]/nahtavillaolo/index.tsx    |  27 +++
 13 files changed, 284 insertions(+), 262 deletions(-)
 create mode 100644 src/components/layout/LinkTab.tsx
 create mode 100644 src/components/projekti/ProjektiConsumer.tsx
 create mode 100644 src/components/projekti/nahtavillaolo/NahtavillaoloPageLayout.tsx
 delete mode 100644 src/pages/yllapito/projekti/[oid]/nahtavillaolo.tsx
 create mode 100644 src/pages/yllapito/projekti/[oid]/nahtavillaolo/aineisto.tsx
 create mode 100644 src/pages/yllapito/projekti/[oid]/nahtavillaolo/index.tsx

diff --git a/i18n.js b/i18n.js
index 49abe987f..973c91234 100644
--- a/i18n.js
+++ b/i18n.js
@@ -8,7 +8,7 @@ module.exports = {
     "/yllapito/perusta": ["velho-haku"],
     "/suunnitelma/[oid]/nahtavillaolo": ["aineisto"],
     "/suunnitelma/[oid]/lausuntopyyntoaineistot": ["aineisto"],
-    "/yllapito/projekti/[oid]/nahtavillaolo": ["aineisto"],
+    "/yllapito/projekti/[oid]/nahtavillaolo/aineisto": ["aineisto"],
     "/yllapito/projekti/[oid]/hyvaksymispaatos": ["aineisto"],
     "/yllapito/projekti/[oid]/jatkaminen1": ["aineisto"],
     "/suunnitelma/[oid]/hyvaksymismenettelyssa": ["hyvaksymismenettelyssa"],
diff --git a/src/components/layout/Breadcrumbs.tsx b/src/components/layout/Breadcrumbs.tsx
index e383228ac..0865500d7 100644
--- a/src/components/layout/Breadcrumbs.tsx
+++ b/src/components/layout/Breadcrumbs.tsx
@@ -84,6 +84,7 @@ const getVirkamiesRouteLabels: (router: NextRouter, projekti: ProjektiLisatiedol
       queryParams: { oid: projekti?.oid, kierrosId },
     },
     "/yllapito/projekti/[oid]/nahtavillaolo": { label: "Nähtävilläolovaihe", queryParams: { oid: projekti?.oid } },
+    "/yllapito/projekti/[oid]/nahtavillaolo/aineisto": { label: "Aineisto", queryParams: { oid: projekti?.oid } },
     "/yllapito/projekti/[oid]/hyvaksymispaatos": { label: "Hyväksymispäätös", queryParams: { oid: projekti?.oid } },
     "/yllapito/projekti/[oid]/jatkaminen1": { label: "1. jatkaminen", queryParams: { oid: projekti?.oid } },
     "/yllapito/ohjeet": { label: "Ohjeet" },
diff --git a/src/components/layout/HassuMuiThemeProvider.tsx b/src/components/layout/HassuMuiThemeProvider.tsx
index 367bddd40..96ae51049 100644
--- a/src/components/layout/HassuMuiThemeProvider.tsx
+++ b/src/components/layout/HassuMuiThemeProvider.tsx
@@ -239,7 +239,7 @@ export const createLocalizedTheme = (locale: Localization) =>
               lineHeight: 1.5,
               color: "#242222",
               opacity: 1,
-              "&.Mui-selected": {
+              "&.Mui-selected:not(.Mui-disabled)": {
                 color: "#0064AF",
               },
             },
diff --git a/src/components/layout/LinkTab.tsx b/src/components/layout/LinkTab.tsx
new file mode 100644
index 000000000..eee57fe7f
--- /dev/null
+++ b/src/components/layout/LinkTab.tsx
@@ -0,0 +1,11 @@
+import { Tab, TabProps } from "@mui/material";
+import Link, { LinkProps } from "next/link";
+import React, { FC } from "react";
+
+export type LinkTabProps = TabProps & { linkProps: LinkProps };
+
+export const LinkTab: FC<LinkTabProps> = ({ linkProps, ...tabProps }) => (
+  <Link {...linkProps} passHref>
+    <Tab {...tabProps} />
+  </Link>
+);
diff --git a/src/components/projekti/ProjektiConsumer.tsx b/src/components/projekti/ProjektiConsumer.tsx
new file mode 100644
index 000000000..11f4c7699
--- /dev/null
+++ b/src/components/projekti/ProjektiConsumer.tsx
@@ -0,0 +1,16 @@
+import React, { ReactElement } from "react";
+import { ProjektiLisatiedolla, useProjekti } from "src/hooks/useProjekti";
+
+interface ProjektiConsumerProps {
+  children?: (p: ProjektiLisatiedolla) => ReactElement | null;
+}
+
+const ProjektiConsumer = ({ children }: ProjektiConsumerProps) => {
+  const { data: projekti } = useProjekti();
+  if (!projekti || !children) {
+    return <></>;
+  }
+  return <>{children(projekti)}</>;
+};
+
+export default ProjektiConsumer;
diff --git a/src/components/projekti/nahtavillaolo/NahtavillaoloPageLayout.tsx b/src/components/projekti/nahtavillaolo/NahtavillaoloPageLayout.tsx
new file mode 100644
index 000000000..a257d7b95
--- /dev/null
+++ b/src/components/projekti/nahtavillaolo/NahtavillaoloPageLayout.tsx
@@ -0,0 +1,172 @@
+import React, { ReactElement, useMemo, ReactNode } from "react";
+import ProjektiPageLayout from "@components/projekti/ProjektiPageLayout";
+import Section from "@components/layout/Section";
+import { Tabs } from "@mui/material";
+import { useRouter } from "next/router";
+import { UrlObject } from "url";
+import { LinkTab, LinkTabProps } from "@components/layout/LinkTab";
+import ProjektiConsumer from "../ProjektiConsumer";
+import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
+import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
+import { NahtavillaoloVaiheTila } from "@services/api";
+import dayjs from "dayjs";
+import Notification, { NotificationType } from "@components/notification/Notification";
+import FormatDate from "@components/FormatDate";
+
+const InfoElement = ({ projekti }: { projekti: ProjektiLisatiedolla }) => {
+  const julkaisut = projekti?.nahtavillaoloVaiheJulkaisut;
+
+  const julkaisu = julkaisut?.[julkaisut.length - 1];
+
+  if (julkaisu?.tila === NahtavillaoloVaiheTila.HYVAKSYTTY) {
+    // Toistaiseksi tarkastellaan julkaisupaivatietoa, koska ei ole olemassa erillista tilaa julkaistulle kuulutukselle
+    const julkaisupvm = dayjs(julkaisu.kuulutusPaiva);
+    if (dayjs().isBefore(julkaisupvm, "day")) {
+      return (
+        <Notification type={NotificationType.WARN}>
+          {`Kuulutusta ei ole vielä julkaistu. Kuulutuspäivä ${julkaisupvm.format("DD.MM.YYYY")}.`}
+        </Notification>
+      );
+    } else {
+      return (
+        <Notification type={NotificationType.INFO_GREEN}>
+          Kuulutus on julkaistu {julkaisupvm.format("DD.MM.YYYY")}. Projekti näytetään kuulutuspäivästä lasketun määräajan jälkeen palvelun
+          julkisella puolella suunnittelussa olevana. Kuulutusvaihe päättyy <FormatDate date={julkaisu.kuulutusVaihePaattyyPaiva} />.
+        </Notification>
+      );
+    }
+  } else if (julkaisu?.tila === NahtavillaoloVaiheTila.ODOTTAA_HYVAKSYNTAA) {
+    if (projekti?.nykyinenKayttaja.onProjektipaallikko || projekti?.nykyinenKayttaja.onYllapitaja) {
+      return (
+        <Notification type={NotificationType.WARN}>
+          {
+            "Kuulutus odottaa hyväksyntää. Tarkasta kuulutus ja a) hyväksy tai a) palauta kuulutus korjattavaksi, jos havaitset puutteita tai virheen."
+          }
+        </Notification>
+      );
+    } else {
+      return (
+        <Notification type={NotificationType.WARN}>
+          Kuulutus on hyväksyttävänä projektipäälliköllä. Jos kuulutusta tarvitsee muokata, ota yhteys projektipäällikköön.
+        </Notification>
+      );
+    }
+  } else if (julkaisu?.tila === NahtavillaoloVaiheTila.PALAUTETTU) {
+    return (
+      <>
+        {projekti?.nahtavillaoloVaihe?.palautusSyy && (
+          <Notification type={NotificationType.WARN}>
+            {"Aloituskuulutus on palautettu korjattavaksi. Palautuksen syy: " + projekti.nahtavillaoloVaihe.palautusSyy}
+          </Notification>
+        )}
+      </>
+    );
+  } else {
+    return <></>;
+  }
+};
+
+export default function NahtavillaoloPageLayoutWrapper({ children }: { children?: ReactNode }) {
+  return (
+    <ProjektiConsumer>
+      {(projekti) => (
+        <NahtavillaoloPageLayout projekti={projekti} disableTabs={!projekti}>
+          {children}
+        </NahtavillaoloPageLayout>
+      )}
+    </ProjektiConsumer>
+  );
+}
+
+function NahtavillaoloPageLayout({
+  projekti,
+  disableTabs,
+  children,
+}: {
+  projekti: ProjektiLisatiedolla;
+  disableTabs?: boolean;
+  children?: ReactNode;
+}): ReactElement {
+  const router = useRouter();
+
+  const tabProps: LinkTabProps[] = useMemo(() => {
+    return [
+      {
+        linkProps: {
+          href: {
+            pathname: `/yllapito/projekti/[oid]/nahtavillaolo/aineisto`,
+            query: { oid: projekti.oid },
+          },
+        },
+        label: "Nähtäville asetettavat aineistot",
+        disabled: disableTabs,
+        id: "aineisto_tab",
+      },
+      {
+        linkProps: {
+          href: {
+            pathname: `/yllapito/projekti/[oid]/nahtavillaolo`,
+            query: { oid: projekti.oid },
+          },
+        },
+        label: "Kuulutuksen tiedot",
+        disabled: disableTabs,
+        id: "kuulutuksentiedot_tab",
+      },
+    ];
+  }, [projekti.oid, disableTabs]);
+
+  const value = useMemo(() => {
+    const indexOfTab = tabProps.findIndex((tProps) => {
+      const url = tProps.linkProps.href as UrlObject;
+      return url.pathname === router.pathname;
+    });
+    return indexOfTab === -1 ? false : indexOfTab;
+  }, [router.pathname, tabProps]);
+
+  const nahtavillaolovaiheJulkaisu = projekti.nahtavillaoloVaiheJulkaisut?.[projekti.nahtavillaoloVaiheJulkaisut.length - 1];
+  const migroitu = nahtavillaolovaiheJulkaisu?.tila == NahtavillaoloVaiheTila.MIGROITU;
+  const epaaktiivinen = projektiOnEpaaktiivinen(projekti);
+
+  return (
+    <ProjektiPageLayout title="Nähtävilläolovaihe">
+      <Section noDivider>
+        {!migroitu && !epaaktiivinen && (
+          <>
+            <InfoElement projekti={projekti} />
+            <Notification type={NotificationType.INFO} hideIcon>
+              <div>
+                <h3 className="vayla-small-title">Ohjeet</h3>
+                <ul className="list-disc block pl-5">
+                  <li>Lisää nähtäville asetettavat aineistot sekä lausuntopyynnön lisäaineistot kuulutuksen ensimmäiseltä välilehdeltä.</li>
+                  <li>Siirry Kuulutuksen tiedot-välilehdelle täyttämään kuulutuksen perustiedot.</li>
+                  <li>
+                    Anna päivämäärä, jolloin suunnittelun nähtäville asettamisesta kuulutetaan. Projekti ja sen nähtävilläolon kuulutus
+                    julkaistaan samana päivänä Valtion liikenneväylien suunnittelu -palvelun kansalaispuolella.
+                  </li>
+                  <li>
+                    Muokkaa tai täydennä halutessasi tiivistetty sisällönkuvaus hankkeesta. Jos projektista tulee tehdä kuulutus suomen
+                    lisäksi toisella kielellä, eikä tälle ole kenttää, tarkista projektin tiedot -sivulta projektin kieliasetus.
+                  </li>
+                  <li>Valitse kuulutuksessa esitettävät yhteystiedot.</li>
+                  <li>Lähetä nähtäville asettamisen kuulutus projektipäällikölle hyväksyttäväksi.</li>
+                  <li>
+                    {
+                      "Projekti näytetään kuulutuspäivästä lasketun määräajan jälkeen palvelun julkisella puolella 'Hyväksyntämenettelyssä' -olevana."
+                    }
+                  </li>
+                </ul>
+              </div>
+            </Notification>
+          </>
+        )}
+        <Tabs value={value}>
+          {tabProps.map((tProps, index) => (
+            <LinkTab key={index} {...tProps} />
+          ))}
+        </Tabs>
+      </Section>
+      {!migroitu ? children : <p>Tämä projekti on tuotu toisesta järjestelmästä, joten kaikki toiminnot eivät ole mahdollisia.</p>}
+    </ProjektiPageLayout>
+  );
+}
diff --git a/src/components/projekti/nahtavillaolo/kuulutuksentiedot/KuulutuksenTiedot.tsx b/src/components/projekti/nahtavillaolo/kuulutuksentiedot/KuulutuksenTiedot.tsx
index ce6994771..ac6075cec 100644
--- a/src/components/projekti/nahtavillaolo/kuulutuksentiedot/KuulutuksenTiedot.tsx
+++ b/src/components/projekti/nahtavillaolo/kuulutuksentiedot/KuulutuksenTiedot.tsx
@@ -1,7 +1,7 @@
 import { yupResolver } from "@hookform/resolvers/yup";
 import { Kieli, KirjaamoOsoite, TallennaProjektiInput } from "@services/api";
 import Notification, { NotificationType } from "@components/notification/Notification";
-import React, { useEffect, useMemo } from "react";
+import React, { useMemo } from "react";
 import { UseFormProps, useForm, FormProvider } from "react-hook-form";
 import { ProjektiLisatiedolla, useProjekti } from "src/hooks/useProjekti";
 import { nahtavillaoloKuulutusSchema } from "src/schemas/nahtavillaoloKuulutus";
@@ -25,21 +25,11 @@ export type KuulutuksenTiedotFormValues = Required<{
   [K in keyof PickedTallennaProjektiInput]: NonNullable<PickedTallennaProjektiInput[K]>;
 }>;
 
-interface Props {
-  setIsDirty: (value: React.SetStateAction<boolean>) => void;
-}
-
-export default function KuulutuksenTiedot({ setIsDirty }: Props) {
+export default function KuulutuksenTiedot() {
   const { data: projekti } = useProjekti({ revalidateOnMount: true });
   const { data: kirjaamoOsoitteet } = useKirjaamoOsoitteet();
 
-  return (
-    <>
-      {projekti && kirjaamoOsoitteet && (
-        <KuulutuksenTiedotForm setIsDirty={setIsDirty} projekti={projekti} kirjaamoOsoitteet={kirjaamoOsoitteet} />
-      )}
-    </>
-  );
+  return <>{projekti && kirjaamoOsoitteet && <KuulutuksenTiedotForm projekti={projekti} kirjaamoOsoitteet={kirjaamoOsoitteet} />}</>;
 }
 
 interface KuulutuksenTiedotFormProps {
@@ -47,7 +37,7 @@ interface KuulutuksenTiedotFormProps {
   kirjaamoOsoitteet: KirjaamoOsoite[];
 }
 
-function KuulutuksenTiedotForm({ projekti, kirjaamoOsoitteet, setIsDirty }: KuulutuksenTiedotFormProps & Props) {
+function KuulutuksenTiedotForm({ projekti, kirjaamoOsoitteet }: KuulutuksenTiedotFormProps) {
   const pdfFormRef = React.useRef<React.ElementRef<typeof PdfPreviewForm>>(null);
 
   const defaultValues: KuulutuksenTiedotFormValues = useMemo(() => {
@@ -114,10 +104,6 @@ function KuulutuksenTiedotForm({ projekti, kirjaamoOsoitteet, setIsDirty }: Kuul
     formState: { isDirty },
   } = useFormReturn;
 
-  useEffect(() => {
-    setIsDirty(isDirty);
-  }, [isDirty, setIsDirty]);
-
   useLeaveConfirm(isDirty);
 
   const voiMuokata = !projekti?.nahtavillaoloVaiheJulkaisut || projekti.nahtavillaoloVaiheJulkaisut.length < 1;
diff --git a/src/components/projekti/nahtavillaolo/nahtavilleAsetettavatAineistot/Muokkausnakyma.tsx b/src/components/projekti/nahtavillaolo/nahtavilleAsetettavatAineistot/Muokkausnakyma.tsx
index dfd8da3f8..d0cae9aef 100644
--- a/src/components/projekti/nahtavillaolo/nahtavilleAsetettavatAineistot/Muokkausnakyma.tsx
+++ b/src/components/projekti/nahtavillaolo/nahtavilleAsetettavatAineistot/Muokkausnakyma.tsx
@@ -1,6 +1,6 @@
 import { yupResolver } from "@hookform/resolvers/yup";
 import { Aineisto, AineistoInput, TallennaProjektiInput } from "@services/api";
-import React, { ReactElement, useEffect, useMemo } from "react";
+import React, { ReactElement, useMemo } from "react";
 import { UseFormProps, useForm, FormProvider } from "react-hook-form";
 import { useProjekti } from "src/hooks/useProjekti";
 import { nahtavillaoloAineistotSchema } from "src/schemas/nahtavillaoloAineistot";
@@ -37,20 +37,16 @@ const getDefaultValueForAineistoNahtavilla = (aineistot: Aineisto[] | undefined
   }, {});
 };
 
-interface Props {
-  setIsDirty: (value: React.SetStateAction<boolean>) => void;
-}
-
-export default function Muokkausnakyma({ setIsDirty }: Props): ReactElement {
+export default function Muokkausnakyma(): ReactElement {
   const { data: projekti } = useProjekti({ revalidateOnMount: true });
-  return <>{projekti && <MuokkausnakymaLomake setIsDirty={setIsDirty} projekti={projekti} />}</>;
+  return <>{projekti && <MuokkausnakymaLomake projekti={projekti} />}</>;
 }
 
 interface MuokkausnakymaLomakeProps {
   projekti: ProjektiLisatiedolla;
 }
 
-function MuokkausnakymaLomake({ projekti, setIsDirty }: MuokkausnakymaLomakeProps & Props) {
+function MuokkausnakymaLomake({ projekti }: MuokkausnakymaLomakeProps) {
   const defaultValues: NahtavilleAsetettavatAineistotFormValues = useMemo(() => {
     const lisaAineisto: AineistoInput[] =
       projekti.nahtavillaoloVaihe?.lisaAineisto?.map(({ dokumenttiOid, nimi, jarjestys }) => ({
@@ -78,10 +74,6 @@ function MuokkausnakymaLomake({ projekti, setIsDirty }: MuokkausnakymaLomakeProp
     formState: { isDirty },
   } = useFormReturn;
 
-  useEffect(() => {
-    setIsDirty(isDirty);
-  }, [isDirty, setIsDirty]);
-
   useLeaveConfirm(isDirty);
 
   return (
diff --git a/src/components/projekti/nahtavillaolo/nahtavilleAsetettavatAineistot/NahtavilleAsetettavatAineistot.tsx b/src/components/projekti/nahtavillaolo/nahtavilleAsetettavatAineistot/NahtavilleAsetettavatAineistot.tsx
index ab52dbac9..643ee7ba6 100644
--- a/src/components/projekti/nahtavillaolo/nahtavilleAsetettavatAineistot/NahtavilleAsetettavatAineistot.tsx
+++ b/src/components/projekti/nahtavillaolo/nahtavilleAsetettavatAineistot/NahtavilleAsetettavatAineistot.tsx
@@ -3,13 +3,9 @@ import { useProjekti } from "src/hooks/useProjekti";
 import Lukunakyma from "./Lukunakyma";
 import Muokkausnakyma from "./Muokkausnakyma";
 
-interface Props {
-  setIsDirty: (value: React.SetStateAction<boolean>) => void;
-}
-
-export default function NahtavilleAsetettavatAineistot({ setIsDirty }: Props) {
+export default function NahtavilleAsetettavatAineistot() {
   const { data: projekti } = useProjekti();
 
   const voiMuokata = !projekti?.nahtavillaoloVaiheJulkaisut?.length;
-  return voiMuokata ? <Muokkausnakyma setIsDirty={setIsDirty} /> : <Lukunakyma />;
+  return voiMuokata ? <Muokkausnakyma /> : <Lukunakyma />;
 }
diff --git a/src/components/projekti/suunnitteluvaihe/SuunnitteluvaihePageLayout.tsx b/src/components/projekti/suunnitteluvaihe/SuunnitteluvaihePageLayout.tsx
index e0a3da5aa..4156b68a2 100644
--- a/src/components/projekti/suunnitteluvaihe/SuunnitteluvaihePageLayout.tsx
+++ b/src/components/projekti/suunnitteluvaihe/SuunnitteluvaihePageLayout.tsx
@@ -1,44 +1,42 @@
-import React, { ReactElement, FC, useMemo, ReactNode } from "react";
+import React, { ReactElement, useMemo, ReactNode } from "react";
 import ProjektiPageLayout from "@components/projekti/ProjektiPageLayout";
 import Section from "@components/layout/Section";
-import { useProjekti } from "src/hooks/useProjekti";
-import { TabProps, Tabs, Tab } from "@mui/material";
+import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
+import { Tabs } from "@mui/material";
 import { useRouter } from "next/router";
-import Link, { LinkProps } from "next/link";
 import { UrlObject } from "url";
 import { ParsedUrlQueryInput } from "querystring";
+import { LinkTab, LinkTabProps } from "@components/layout/LinkTab";
+import ProjektiConsumer from "../ProjektiConsumer";
 
 export default function SuunnitteluPageLayoutWrapper({ children }: { children?: ReactNode }) {
-  const { data: projekti } = useProjekti();
-
-  const vuorovaikutusKierrosNumerot = useMemo(
-    () => projekti?.suunnitteluVaihe?.vuorovaikutukset?.map((vuorovaikutus) => vuorovaikutus.vuorovaikutusNumero) || [1],
-    [projekti?.suunnitteluVaihe?.vuorovaikutukset]
-  );
-
-  if (!projekti) {
-    return <></>;
-  }
-
   return (
-    <SuunnitteluPageLayout projektiOid={projekti.oid} vuorovaikutusKierrosNumerot={vuorovaikutusKierrosNumerot} disableTabs={!projekti}>
-      {children}
-    </SuunnitteluPageLayout>
+    <ProjektiConsumer>
+      {(projekti) => (
+        <SuunnitteluPageLayout projektiOid={projekti.oid} projekti={projekti} disableTabs={!projekti}>
+          {children}
+        </SuunnitteluPageLayout>
+      )}
+    </ProjektiConsumer>
   );
 }
 
 function SuunnitteluPageLayout({
   projektiOid,
-  vuorovaikutusKierrosNumerot,
+  projekti,
   disableTabs,
   children,
 }: {
   projektiOid: string;
-  vuorovaikutusKierrosNumerot: number[];
+  projekti: ProjektiLisatiedolla;
   disableTabs?: boolean;
   children?: ReactNode;
 }): ReactElement {
   const router = useRouter();
+  const vuorovaikutusKierrosNumerot = useMemo(
+    () => projekti?.suunnitteluVaihe?.vuorovaikutukset?.map((vuorovaikutus) => vuorovaikutus.vuorovaikutusNumero) || [1],
+    [projekti?.suunnitteluVaihe?.vuorovaikutukset]
+  );
 
   const tabProps: LinkTabProps[] = useMemo(() => {
     const vuorovaikutusTabs = vuorovaikutusKierrosNumerot.map<LinkTabProps>((kierrosId) => {
@@ -91,11 +89,3 @@ function SuunnitteluPageLayout({
     </ProjektiPageLayout>
   );
 }
-
-type LinkTabProps = TabProps & { linkProps: LinkProps };
-
-const LinkTab: FC<LinkTabProps> = ({ linkProps, ...tabProps }) => (
-  <Link {...linkProps} passHref>
-    <Tab {...tabProps} />
-  </Link>
-);
diff --git a/src/pages/yllapito/projekti/[oid]/nahtavillaolo.tsx b/src/pages/yllapito/projekti/[oid]/nahtavillaolo.tsx
deleted file mode 100644
index e98596614..000000000
--- a/src/pages/yllapito/projekti/[oid]/nahtavillaolo.tsx
+++ /dev/null
@@ -1,196 +0,0 @@
-import React, { ReactElement, useCallback, useMemo, useState } from "react";
-import ProjektiPageLayout from "@components/projekti/ProjektiPageLayout";
-import Notification, { NotificationType } from "@components/notification/Notification";
-import Tabs from "@components/layout/tabs/Tabs";
-import KuulutuksenTiedot from "@components/projekti/nahtavillaolo/kuulutuksentiedot/KuulutuksenTiedot";
-import NahtavilleAsetettavatAineistot from "@components/projekti/nahtavillaolo/nahtavilleAsetettavatAineistot/NahtavilleAsetettavatAineistot";
-import { ProjektiLisatiedolla, useProjekti } from "src/hooks/useProjekti";
-import { NahtavillaoloVaiheTila } from "@services/api";
-import dayjs from "dayjs";
-import SectionContent from "@components/layout/SectionContent";
-import FormatDate from "@components/FormatDate";
-import TallentamattomiaMuutoksiaDialog from "@components/TallentamattomiaMuutoksiaDialog";
-import NahtavillaoloAineistotLukutila from "@components/projekti/lukutila/NahtavillaoloAineistotLukutila";
-import Lukunakyma from "@components/projekti/nahtavillaolo/kuulutuksentiedot/Lukunakyma";
-import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
-import Section from "@components/layout/Section";
-
-type Props2 = {
-  projekti: ProjektiLisatiedolla;
-};
-
-function InfoElement({ projekti }: Props2) {
-  const julkaisut = projekti?.nahtavillaoloVaiheJulkaisut;
-
-  const julkaisu = julkaisut?.[julkaisut.length - 1];
-
-  if (julkaisu?.tila === NahtavillaoloVaiheTila.HYVAKSYTTY) {
-    // Toistaiseksi tarkastellaan julkaisupaivatietoa, koska ei ole olemassa erillista tilaa julkaistulle kuulutukselle
-    const julkaisupvm = dayjs(julkaisu.kuulutusPaiva);
-    if (dayjs().isBefore(julkaisupvm, "day")) {
-      return (
-        <Notification type={NotificationType.WARN}>
-          {`Kuulutusta ei ole vielä julkaistu. Kuulutuspäivä ${julkaisupvm.format("DD.MM.YYYY")}.`}
-        </Notification>
-      );
-    } else {
-      return (
-        <Notification type={NotificationType.INFO_GREEN}>
-          Kuulutus on julkaistu {julkaisupvm.format("DD.MM.YYYY")}. Projekti näytetään kuulutuspäivästä lasketun määräajan jälkeen palvelun
-          julkisella puolella suunnittelussa olevana. Kuulutusvaihe päättyy <FormatDate date={julkaisu.kuulutusVaihePaattyyPaiva} />.
-        </Notification>
-      );
-    }
-  } else if (julkaisu?.tila === NahtavillaoloVaiheTila.ODOTTAA_HYVAKSYNTAA) {
-    if (projekti?.nykyinenKayttaja.onProjektipaallikko || projekti?.nykyinenKayttaja.onYllapitaja) {
-      return (
-        <Notification type={NotificationType.WARN}>
-          {
-            "Kuulutus odottaa hyväksyntää. Tarkasta kuulutus ja a) hyväksy tai a) palauta kuulutus korjattavaksi, jos havaitset puutteita tai virheen."
-          }
-        </Notification>
-      );
-    } else {
-      return (
-        <Notification type={NotificationType.WARN}>
-          Kuulutus on hyväksyttävänä projektipäälliköllä. Jos kuulutusta tarvitsee muokata, ota yhteys projektipäällikköön.
-        </Notification>
-      );
-    }
-  } else if (julkaisu?.tila === NahtavillaoloVaiheTila.PALAUTETTU) {
-    return (
-      <>
-        {projekti?.nahtavillaoloVaihe?.palautusSyy && (
-          <Notification type={NotificationType.WARN}>
-            {"Aloituskuulutus on palautettu korjattavaksi. Palautuksen syy: " + projekti.nahtavillaoloVaihe.palautusSyy}
-          </Notification>
-        )}
-      </>
-    );
-  } else {
-    return <></>;
-  }
-}
-
-export default function NahtavillaoloWrapper(): ReactElement {
-  const { data: projekti } = useProjekti();
-
-  if (!projekti) {
-    return <></>;
-  }
-  return <Nahtavillaolo projekti={projekti} />;
-}
-
-function Nahtavillaolo({ projekti }: { projekti: ProjektiLisatiedolla }): ReactElement {
-  const [currentTab, setCurrentTab] = useState<number | string>(0);
-  const [open, setOpen] = useState(false);
-  const [isDirty, setIsDirty] = useState(false);
-  const [selectedValue, setSelectedValue] = useState<number | string>(0);
-
-  const handleClickClose = useCallback(() => {
-    setOpen(false);
-  }, []);
-
-  const handleClickOk = useCallback(() => {
-    setIsDirty(false);
-    setCurrentTab(selectedValue);
-    setOpen(false);
-  }, [selectedValue, setIsDirty]);
-
-  const handleChange = useCallback(
-    (_event: React.SyntheticEvent<Element, Event>, value: string | number) => {
-      if (isDirty) {
-        setOpen(true);
-        setSelectedValue(value);
-      } else {
-        setOpen(false);
-        setCurrentTab(value);
-      }
-    },
-    [isDirty]
-  );
-
-  const epaaktiivinen = projektiOnEpaaktiivinen(projekti);
-
-  const nahtavillaolovaiheJulkaisu = projekti.nahtavillaoloVaiheJulkaisut?.[projekti.nahtavillaoloVaiheJulkaisut.length - 1];
-
-  const tabs = useMemo(
-    () => [
-      {
-        label: "Nähtäville asetettavat aineistot",
-        content:
-          epaaktiivinen && nahtavillaolovaiheJulkaisu ? (
-            <NahtavillaoloAineistotLukutila oid={projekti.oid} nahtavillaoloVaiheJulkaisu={nahtavillaolovaiheJulkaisu} />
-          ) : (
-            <NahtavilleAsetettavatAineistot setIsDirty={setIsDirty} />
-          ),
-        tabId: "aineisto_tab",
-      },
-      {
-        label: "Kuulutuksen tiedot",
-        content:
-          epaaktiivinen && nahtavillaolovaiheJulkaisu ? (
-            <Lukunakyma projekti={projekti} nahtavillaoloVaiheJulkaisu={nahtavillaolovaiheJulkaisu} />
-          ) : (
-            <KuulutuksenTiedot setIsDirty={setIsDirty} />
-          ),
-        tabId: "kuulutuksentiedot_tab",
-      },
-    ],
-    [epaaktiivinen, nahtavillaolovaiheJulkaisu, projekti]
-  );
-
-  const migroitu = nahtavillaolovaiheJulkaisu?.tila == NahtavillaoloVaiheTila.MIGROITU;
-
-  return (
-    <ProjektiPageLayout title="Nähtävilläolovaihe">
-      {!migroitu && (
-        <>
-          {" "}
-          <SectionContent largeGaps>
-            {!epaaktiivinen && (
-              <>
-                <InfoElement projekti={projekti} />
-                <Notification type={NotificationType.INFO} hideIcon>
-                  <div>
-                    <h3 className="vayla-small-title">Ohjeet</h3>
-                    <ul className="list-disc block pl-5">
-                      <li>
-                        Lisää nähtäville asetettavat aineistot sekä lausuntopyynnön lisäaineistot kuulutuksen ensimmäiseltä välilehdeltä.
-                      </li>
-                      <li>Siirry Kuulutuksen tiedot-välilehdelle täyttämään kuulutuksen perustiedot.</li>
-                      <li>
-                        Anna päivämäärä, jolloin suunnittelun nähtäville asettamisesta kuulutetaan. Projekti ja sen nähtävilläolon kuulutus
-                        julkaistaan samana päivänä Valtion liikenneväylien suunnittelu -palvelun kansalaispuolella.
-                      </li>
-                      <li>
-                        Muokkaa tai täydennä halutessasi tiivistetty sisällönkuvaus hankkeesta. Jos projektista tulee tehdä kuulutus suomen
-                        lisäksi toisella kielellä, eikä tälle ole kenttää, tarkista projektin tiedot -sivulta projektin kieliasetus.
-                      </li>
-                      <li>Valitse kuulutuksessa esitettävät yhteystiedot.</li>
-                      <li>Lähetä nähtäville asettamisen kuulutus projektipäällikölle hyväksyttäväksi.</li>
-                      <li>
-                        {
-                          "Projekti näytetään kuulutuspäivästä lasketun määräajan jälkeen palvelun julkisella puolella 'Hyväksyntämenettelyssä' -olevana."
-                        }
-                      </li>
-                    </ul>
-                  </div>
-                </Notification>
-              </>
-            )}
-            <Tabs tabStyle="Underlined" value={currentTab} onChange={handleChange} tabs={tabs} />
-          </SectionContent>
-          <TallentamattomiaMuutoksiaDialog open={open} handleClickClose={handleClickClose} handleClickOk={handleClickOk} />
-        </>
-      )}
-      {migroitu && (
-        <Section noDivider>
-          <>
-            <p>Tämä projekti on tuotu toisesta järjestelmästä, joten kaikki toiminnot eivät ole mahdollisia.</p>
-          </>
-        </Section>
-      )}
-    </ProjektiPageLayout>
-  );
-}
diff --git a/src/pages/yllapito/projekti/[oid]/nahtavillaolo/aineisto.tsx b/src/pages/yllapito/projekti/[oid]/nahtavillaolo/aineisto.tsx
new file mode 100644
index 000000000..69ec39f41
--- /dev/null
+++ b/src/pages/yllapito/projekti/[oid]/nahtavillaolo/aineisto.tsx
@@ -0,0 +1,27 @@
+import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
+import ProjektiConsumerComponent from "@components/projekti/ProjektiConsumer";
+import NahtavillaoloPageLayout from "@components/projekti/nahtavillaolo/NahtavillaoloPageLayout";
+import React, { ReactElement } from "react";
+import NahtavilleAsetettavatAineistot from "@components/projekti/nahtavillaolo/nahtavilleAsetettavatAineistot/NahtavilleAsetettavatAineistot";
+import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
+import NahtavillaoloAineistotLukutila from "@components/projekti/lukutila/NahtavillaoloAineistotLukutila";
+
+export default function NahtavillaoloWrapper() {
+  return <ProjektiConsumerComponent>{(projekti) => <Nahtavillaolo projekti={projekti} />}</ProjektiConsumerComponent>;
+}
+
+const Nahtavillaolo = ({ projekti }: { projekti: ProjektiLisatiedolla }): ReactElement => {
+  const epaaktiivinen = projektiOnEpaaktiivinen(projekti);
+
+  const nahtavillaolovaiheJulkaisu = projekti.nahtavillaoloVaiheJulkaisut?.[projekti.nahtavillaoloVaiheJulkaisut.length - 1];
+
+  return (
+    <NahtavillaoloPageLayout>
+      {epaaktiivinen && nahtavillaolovaiheJulkaisu ? (
+        <NahtavillaoloAineistotLukutila oid={projekti.oid} nahtavillaoloVaiheJulkaisu={nahtavillaolovaiheJulkaisu} />
+      ) : (
+        <NahtavilleAsetettavatAineistot />
+      )}
+    </NahtavillaoloPageLayout>
+  );
+};
diff --git a/src/pages/yllapito/projekti/[oid]/nahtavillaolo/index.tsx b/src/pages/yllapito/projekti/[oid]/nahtavillaolo/index.tsx
new file mode 100644
index 000000000..9756100d5
--- /dev/null
+++ b/src/pages/yllapito/projekti/[oid]/nahtavillaolo/index.tsx
@@ -0,0 +1,27 @@
+import React, { ReactElement } from "react";
+import KuulutuksenTiedot from "@components/projekti/nahtavillaolo/kuulutuksentiedot/KuulutuksenTiedot";
+import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
+import Lukunakyma from "@components/projekti/nahtavillaolo/kuulutuksentiedot/Lukunakyma";
+import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
+import ProjektiConsumerComponent from "@components/projekti/ProjektiConsumer";
+import NahtavillaoloPageLayout from "@components/projekti/nahtavillaolo/NahtavillaoloPageLayout";
+
+export default function NahtavillaoloWrapper() {
+  return <ProjektiConsumerComponent>{(projekti) => <Nahtavillaolo projekti={projekti} />}</ProjektiConsumerComponent>;
+}
+
+const Nahtavillaolo = ({ projekti }: { projekti: ProjektiLisatiedolla }): ReactElement => {
+  const epaaktiivinen = projektiOnEpaaktiivinen(projekti);
+
+  const nahtavillaolovaiheJulkaisu = projekti.nahtavillaoloVaiheJulkaisut?.[projekti.nahtavillaoloVaiheJulkaisut.length - 1];
+
+  return (
+    <NahtavillaoloPageLayout>
+      {epaaktiivinen && nahtavillaolovaiheJulkaisu ? (
+        <Lukunakyma projekti={projekti} nahtavillaoloVaiheJulkaisu={nahtavillaolovaiheJulkaisu} />
+      ) : (
+        <KuulutuksenTiedot />
+      )}
+    </NahtavillaoloPageLayout>
+  );
+};

From 0d15ea41eeae24e11259afa61a14335bb4adb618 Mon Sep 17 00:00:00 2001
From: tomi korkalainen <tomi.korkalainen@cgi.com>
Date: Mon, 7 Nov 2022 11:08:51 +0200
Subject: [PATCH 04/14] hyvaksymisvaiheen tabit

---
 .../hyvaksyminen/HyvaksyminenPageLayout.tsx   | 151 ++++++++++++++++
 .../hyvaksyminen/aineistot/Muokkausnakyma.tsx |  16 +-
 .../projekti/hyvaksyminen/aineistot/index.tsx |   8 +-
 .../hyvaksyminen/kuulutuksenTiedot/index.tsx  |  16 +-
 .../projekti/[oid]/hyvaksymispaatos.tsx       | 169 ------------------
 .../[oid]/hyvaksymispaatos/aineisto.tsx       |  28 +++
 .../projekti/[oid]/hyvaksymispaatos/index.tsx |  28 +++
 7 files changed, 217 insertions(+), 199 deletions(-)
 create mode 100644 src/components/projekti/hyvaksyminen/HyvaksyminenPageLayout.tsx
 delete mode 100644 src/pages/yllapito/projekti/[oid]/hyvaksymispaatos.tsx
 create mode 100644 src/pages/yllapito/projekti/[oid]/hyvaksymispaatos/aineisto.tsx
 create mode 100644 src/pages/yllapito/projekti/[oid]/hyvaksymispaatos/index.tsx

diff --git a/src/components/projekti/hyvaksyminen/HyvaksyminenPageLayout.tsx b/src/components/projekti/hyvaksyminen/HyvaksyminenPageLayout.tsx
new file mode 100644
index 000000000..43a684e53
--- /dev/null
+++ b/src/components/projekti/hyvaksyminen/HyvaksyminenPageLayout.tsx
@@ -0,0 +1,151 @@
+import React, { ReactElement, useMemo, ReactNode } from "react";
+import ProjektiPageLayout from "@components/projekti/ProjektiPageLayout";
+import Section from "@components/layout/Section";
+import { Link, Tabs } from "@mui/material";
+import { useRouter } from "next/router";
+import { UrlObject } from "url";
+import { LinkTab, LinkTabProps } from "@components/layout/LinkTab";
+import ProjektiConsumer from "../ProjektiConsumer";
+import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
+import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
+import { HyvaksymisPaatosVaiheTila, NahtavillaoloVaiheTila } from "@services/api";
+import Notification, { NotificationType } from "@components/notification/Notification";
+import { examineKuulutusPaiva } from "src/util/aloitusKuulutusUtil";
+import FormatDate from "@components/FormatDate";
+
+export default function HyvaksyminenPageLayoutWrapper({ children }: { children?: ReactNode }) {
+  return (
+    <ProjektiConsumer>
+      {(projekti) => (
+        <HyvaksyminenPageLayout projekti={projekti} disableTabs={!projekti}>
+          {children}
+        </HyvaksyminenPageLayout>
+      )}
+    </ProjektiConsumer>
+  );
+}
+
+function HyvaksyminenPageLayout({
+  projekti,
+  disableTabs,
+  children,
+}: {
+  projekti: ProjektiLisatiedolla;
+  disableTabs?: boolean;
+  children?: ReactNode;
+}): ReactElement {
+  const router = useRouter();
+
+  const nahtavillaolovaiheJulkaisu = projekti.nahtavillaoloVaiheJulkaisut?.[projekti.nahtavillaoloVaiheJulkaisut.length - 1];
+  const migroitu = nahtavillaolovaiheJulkaisu?.tila == NahtavillaoloVaiheTila.MIGROITU;
+  const epaaktiivinen = projektiOnEpaaktiivinen(projekti);
+
+  const kertaalleenLahetettyHyvaksyttavaksi = useMemo(
+    () => projekti?.hyvaksymisPaatosVaiheJulkaisut && projekti.hyvaksymisPaatosVaiheJulkaisut.length >= 1,
+    [projekti.hyvaksymisPaatosVaiheJulkaisut]
+  );
+
+  const hyvaksymisPaatosVaiheJulkaisu = projekti?.hyvaksymisPaatosVaiheJulkaisut
+    ? projekti.hyvaksymisPaatosVaiheJulkaisut[projekti.hyvaksymisPaatosVaiheJulkaisut.length - 1]
+    : null;
+
+  let { kuulutusPaiva, published } = examineKuulutusPaiva(hyvaksymisPaatosVaiheJulkaisu?.kuulutusPaiva);
+
+  const tabProps: LinkTabProps[] = useMemo(() => {
+    const result: LinkTabProps[] = [
+      {
+        linkProps: {
+          href: {
+            pathname: `/yllapito/projekti/[oid]/hyvaksymispaatos/aineisto`,
+            query: { oid: projekti.oid },
+          },
+        },
+        label: "Päätös ja liitteenä oleva aineisto",
+        disabled: disableTabs,
+        id: "aineisto_tab",
+      },
+      {
+        linkProps: {
+          href: {
+            pathname: `/yllapito/projekti/[oid]/hyvaksymispaatos`,
+            query: { oid: projekti.oid },
+          },
+        },
+        label: "Kuulutuksen tiedot",
+        disabled: disableTabs,
+        id: "kuulutuksentiedot_tab",
+      },
+    ];
+    if (kertaalleenLahetettyHyvaksyttavaksi) {
+      result.reverse();
+    }
+
+    return result;
+  }, [projekti.oid, disableTabs, kertaalleenLahetettyHyvaksyttavaksi]);
+
+  const value = useMemo(() => {
+    const indexOfTab = tabProps.findIndex((tProps) => {
+      const url = tProps.linkProps.href as UrlObject;
+      return url.pathname === router.pathname;
+    });
+    return indexOfTab === -1 ? false : indexOfTab;
+  }, [router.pathname, tabProps]);
+
+  return (
+    <ProjektiPageLayout title="Kuulutus hyväksymispäätöksestä">
+      <Section noDivider>
+        {!migroitu && !epaaktiivinen && !kertaalleenLahetettyHyvaksyttavaksi && (
+          <Notification closable type={NotificationType.INFO} hideIcon>
+            <div>
+              <h3 className="vayla-small-title">Ohjeet</h3>
+              <ul className="list-disc block pl-5">
+                <li>Aloita lisäämällä päätös ja sen liitteenä olevat aineistot kuulutuksen ensimmäiseltä välilehdeltä.</li>
+                <li>Jatka täyttämään kuulutuksen perustiedot valitsemalla &quot;Tallenna luonnos&quot;.</li>
+                <li>
+                  Anna päivämäärä, jolloin suunnitelman hyväksymispäätöksestä kuulutetaan. Kuulutus julkaistaan samana päivänä Valtion
+                  liikenneväylien suunnittelu -palvelun kansalaispuolella.
+                </li>
+                <li>
+                  Pääkäyttäjä lisää projektille Liikenne- ja viestintäviraston päätöksen ja asianumeron{" "}
+                  <Link underline="none" href={`/yllapito/projekti/${projekti?.oid}/kasittelyntila`}>
+                    Käsittelyn tila
+                  </Link>{" "}
+                  -sivulla.
+                </li>
+                <li>Valitse hallinto-oikeus, jolta muutoksenhakua voidaan hakea.</li>
+                <li>Valitse ja lisää kuulutuksessa esitettävät yhteystiedot ja ilmoituksen vastaanottajat.</li>
+                <li>Esikatsele ja lähetä hyväksymispäätöksen kuulutus hyväksyttäväksi projektipäällikölle.</li>
+              </ul>
+            </div>
+          </Notification>
+        )}
+        {!epaaktiivinen && (
+          <Section noDivider>
+            {!published && hyvaksymisPaatosVaiheJulkaisu?.tila === HyvaksymisPaatosVaiheTila.HYVAKSYTTY && (
+              <Notification type={NotificationType.WARN}>Kuulutusta ei ole vielä julkaistu. Kuulutuspäivä {kuulutusPaiva}.</Notification>
+            )}
+            {published && hyvaksymisPaatosVaiheJulkaisu?.tila === HyvaksymisPaatosVaiheTila.HYVAKSYTTY && (
+              <Notification type={NotificationType.INFO_GREEN}>
+                Kuulutus nähtäville asettamisesta on julkaistu {kuulutusPaiva}. Projekti näytetään kuulutuspäivästä lasketun määräajan
+                jälkeen palvelun julkisella puolella suunnittelussa olevana. Kuulutusvaihe päättyy{" "}
+                <FormatDate date={hyvaksymisPaatosVaiheJulkaisu.kuulutusVaihePaattyyPaiva} />.
+              </Notification>
+            )}
+            {hyvaksymisPaatosVaiheJulkaisu && hyvaksymisPaatosVaiheJulkaisu?.tila === HyvaksymisPaatosVaiheTila.ODOTTAA_HYVAKSYNTAA && (
+              <Notification type={NotificationType.WARN}>
+                Kuulutus nähtäville asettamisesta odottaa hyväksyntää. Tarkasta kuulutus ja a) hyväksy tai b) palauta kuulutus
+                korjattavaksi, jos havaitset puutteita tai virheen.
+              </Notification>
+            )}
+          </Section>
+        )}
+        <Tabs value={value}>
+          {tabProps.map((tProps, index) => (
+            <LinkTab key={index} {...tProps} />
+          ))}
+        </Tabs>
+      </Section>
+      {!migroitu ? children : <p>Tämä projekti on tuotu toisesta järjestelmästä, joten kaikki toiminnot eivät ole mahdollisia.</p>}
+    </ProjektiPageLayout>
+  );
+}
diff --git a/src/components/projekti/hyvaksyminen/aineistot/Muokkausnakyma.tsx b/src/components/projekti/hyvaksyminen/aineistot/Muokkausnakyma.tsx
index 090405ef1..f5220899d 100644
--- a/src/components/projekti/hyvaksyminen/aineistot/Muokkausnakyma.tsx
+++ b/src/components/projekti/hyvaksyminen/aineistot/Muokkausnakyma.tsx
@@ -1,6 +1,6 @@
 import { yupResolver } from "@hookform/resolvers/yup";
 import { Aineisto, AineistoInput, TallennaProjektiInput } from "@services/api";
-import React, { ReactElement, useEffect, useMemo } from "react";
+import React, { ReactElement, useMemo } from "react";
 import { UseFormProps, useForm, FormProvider } from "react-hook-form";
 import { useProjekti } from "src/hooks/useProjekti";
 import { nahtavillaoloAineistotSchema } from "src/schemas/nahtavillaoloAineistot";
@@ -37,21 +37,17 @@ const getDefaultValueForAineistoNahtavilla = (aineistot: Aineisto[] | undefined
   }, {});
 };
 
-interface Props {
-  setIsDirty: (value: React.SetStateAction<boolean>) => void;
-}
-
-export default function Muokkausnakyma({ setIsDirty }: Props): ReactElement {
+export default function Muokkausnakyma(): ReactElement {
   const { data: projekti } = useProjekti({ revalidateOnMount: true });
 
-  return <>{projekti && <MuokkausnakymaForm projekti={projekti} setIsDirty={setIsDirty} />}</>;
+  return <>{projekti && <MuokkausnakymaForm projekti={projekti} />}</>;
 }
 
 interface MuokkausnakymaFormProps {
   projekti: ProjektiLisatiedolla;
 }
 
-function MuokkausnakymaForm({ projekti, setIsDirty }: MuokkausnakymaFormProps & Props) {
+function MuokkausnakymaForm({ projekti }: MuokkausnakymaFormProps) {
   const defaultValues: HyvaksymisPaatosVaiheAineistotFormValues = useMemo(() => {
     const hyvaksymisPaatos: AineistoInput[] =
       projekti.hyvaksymisPaatosVaihe?.hyvaksymisPaatos?.map(({ dokumenttiOid, nimi, jarjestys }) => ({
@@ -81,10 +77,6 @@ function MuokkausnakymaForm({ projekti, setIsDirty }: MuokkausnakymaFormProps &
 
   const { isAllowedOnRoute } = useIsAllowedOnCurrentProjektiRoute();
 
-  useEffect(() => {
-    setIsDirty(isDirty);
-  }, [isDirty, setIsDirty]);
-
   useLeaveConfirm(isDirty);
 
   return (
diff --git a/src/components/projekti/hyvaksyminen/aineistot/index.tsx b/src/components/projekti/hyvaksyminen/aineistot/index.tsx
index 4f2cc2325..4e4235df2 100644
--- a/src/components/projekti/hyvaksyminen/aineistot/index.tsx
+++ b/src/components/projekti/hyvaksyminen/aineistot/index.tsx
@@ -3,13 +3,9 @@ import { useProjekti } from "src/hooks/useProjekti";
 import Lukunakyma from "./Lukunakyma";
 import Muokkausnakyma from "./Muokkausnakyma";
 
-interface Props {
-  setIsDirty: (value: React.SetStateAction<boolean>) => void;
-}
-
-export default function Aineistot({ setIsDirty }: Props) {
+export default function Aineistot() {
   const { data: projekti } = useProjekti();
 
   const voiMuokata = !projekti?.hyvaksymisPaatosVaiheJulkaisut?.length;
-  return voiMuokata ? <Muokkausnakyma setIsDirty={setIsDirty} /> : <Lukunakyma />;
+  return voiMuokata ? <Muokkausnakyma /> : <Lukunakyma />;
 }
diff --git a/src/components/projekti/hyvaksyminen/kuulutuksenTiedot/index.tsx b/src/components/projekti/hyvaksyminen/kuulutuksenTiedot/index.tsx
index d59254faf..67ad74592 100644
--- a/src/components/projekti/hyvaksyminen/kuulutuksenTiedot/index.tsx
+++ b/src/components/projekti/hyvaksyminen/kuulutuksenTiedot/index.tsx
@@ -1,7 +1,7 @@
 import { yupResolver } from "@hookform/resolvers/yup";
 import { HyvaksymisPaatosVaiheInput, KirjaamoOsoite, TallennaProjektiInput, YhteystietoInput } from "@services/api";
 import Notification, { NotificationType } from "@components/notification/Notification";
-import React, { ReactElement, useEffect, useMemo } from "react";
+import React, { ReactElement, useMemo } from "react";
 import { FormProvider, useForm, UseFormProps } from "react-hook-form";
 import { ProjektiLisatiedolla, useProjekti } from "src/hooks/useProjekti";
 import { hyvaksymispaatosKuulutusSchema } from "src/schemas/hyvaksymispaatosKuulutus";
@@ -26,14 +26,10 @@ export type KuulutuksenTiedotFormValues = Pick<TallennaProjektiInput, "oid"> & {
   };
 };
 
-interface Props {
-  setIsDirty: (value: React.SetStateAction<boolean>) => void;
-}
-
-export default function KuulutuksenTiedot({ setIsDirty }: Props): ReactElement {
+export default function KuulutuksenTiedot(): ReactElement {
   const { data: projekti } = useProjekti({ revalidateOnMount: true });
   const { data: kirjaamoOsoitteet } = useKirjaamoOsoitteet();
-  return <>{projekti && kirjaamoOsoitteet && <KuulutuksenTiedotForm {...{ kirjaamoOsoitteet, projekti, setIsDirty }} />}</>;
+  return <>{projekti && kirjaamoOsoitteet && <KuulutuksenTiedotForm kirjaamoOsoitteet={kirjaamoOsoitteet} projekti={projekti} />}</>;
 }
 
 interface KuulutuksenTiedotFormProps {
@@ -41,7 +37,7 @@ interface KuulutuksenTiedotFormProps {
   kirjaamoOsoitteet: KirjaamoOsoite[];
 }
 
-function KuulutuksenTiedotForm({ projekti, kirjaamoOsoitteet, setIsDirty }: KuulutuksenTiedotFormProps & Props) {
+function KuulutuksenTiedotForm({ projekti, kirjaamoOsoitteet }: KuulutuksenTiedotFormProps) {
   const pdfFormRef = React.useRef<React.ElementRef<typeof PdfPreviewForm>>(null);
 
   const defaultValues: KuulutuksenTiedotFormValues = useMemo(() => {
@@ -85,10 +81,6 @@ function KuulutuksenTiedotForm({ projekti, kirjaamoOsoitteet, setIsDirty }: Kuul
     formState: { isDirty },
   } = useFormReturn;
 
-  useEffect(() => {
-    setIsDirty(isDirty);
-  }, [isDirty, setIsDirty]);
-
   useLeaveConfirm(isDirty);
 
   const voiMuokata = !projekti?.hyvaksymisPaatosVaiheJulkaisut || projekti.hyvaksymisPaatosVaiheJulkaisut.length < 1;
diff --git a/src/pages/yllapito/projekti/[oid]/hyvaksymispaatos.tsx b/src/pages/yllapito/projekti/[oid]/hyvaksymispaatos.tsx
deleted file mode 100644
index 843d5b327..000000000
--- a/src/pages/yllapito/projekti/[oid]/hyvaksymispaatos.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-import React, { ReactElement, useCallback, useState } from "react";
-import ProjektiPageLayout from "@components/projekti/ProjektiPageLayout";
-import Notification, { NotificationType } from "@components/notification/Notification";
-import Tabs, { TabProps } from "@components/layout/tabs/Tabs";
-import KuulutuksenTiedot from "@components/projekti/hyvaksyminen/kuulutuksenTiedot/index";
-import PaatosAineistot from "@components/projekti/hyvaksyminen/aineistot/index";
-import { useProjekti } from "src/hooks/useProjekti";
-import { Link } from "@mui/material";
-import { HyvaksymisPaatosVaiheTila } from "@services/api";
-import { examineKuulutusPaiva } from "src/util/aloitusKuulutusUtil";
-import FormatDate from "@components/FormatDate";
-import Section from "@components/layout/Section";
-import TallentamattomiaMuutoksiaDialog from "@components/TallentamattomiaMuutoksiaDialog";
-import HyvaksymisVaiheAineistotLukutila from "@components/projekti/lukutila/HyvakysmisVaiheAineistotLukutila";
-import Lukunakyma from "@components/projekti/hyvaksyminen/kuulutuksenTiedot/Lukunakyma";
-import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
-
-export default function Hyvaksymispaatos(): ReactElement {
-  const [currentTab, setCurrentTab] = useState<number | string>(0);
-  const [open, setOpen] = useState(false);
-  const [isDirty, setIsDirty] = useState(false);
-  const [selectedValue, setSelectedValue] = useState<number | string>(0);
-
-  const handleClickClose = () => {
-    setOpen(false);
-  };
-
-  const handleClickOk = useCallback(() => {
-    setIsDirty(false);
-    setCurrentTab(selectedValue);
-    setOpen(false);
-  }, [selectedValue, setIsDirty]);
-
-  const handleChange: TabProps["onChange"] = (_event, value) => {
-    if (isDirty) {
-      setOpen(true);
-      setSelectedValue(value);
-    } else {
-      setOpen(false);
-      setCurrentTab(value);
-    }
-  };
-
-  const { data: projekti } = useProjekti();
-
-  const kertaalleenLahetettyHyvaksyttavaksi =
-    projekti?.hyvaksymisPaatosVaiheJulkaisut && projekti.hyvaksymisPaatosVaiheJulkaisut.length >= 1;
-
-  const hyvaksymisPaatosVaiheJulkaisu = projekti?.hyvaksymisPaatosVaiheJulkaisut
-    ? projekti.hyvaksymisPaatosVaiheJulkaisut[projekti.hyvaksymisPaatosVaiheJulkaisut.length - 1]
-    : null;
-
-  let { kuulutusPaiva, published } = examineKuulutusPaiva(hyvaksymisPaatosVaiheJulkaisu?.kuulutusPaiva);
-
-  if (!projekti) {
-    return <></>;
-  }
-
-  const epaaktiivinen = projektiOnEpaaktiivinen(projekti);
-  const migroitu = hyvaksymisPaatosVaiheJulkaisu?.tila == HyvaksymisPaatosVaiheTila.MIGROITU;
-  if (migroitu) {
-    return (
-      <ProjektiPageLayout title="Kuulutus hyväksymispäätöksestä">
-        <Section noDivider>
-          <>
-            <p>Tämä projekti on tuotu toisesta järjestelmästä, joten kaikki toiminnot eivät ole mahdollisia.</p>
-          </>
-        </Section>
-      </ProjektiPageLayout>
-    );
-  }
-  return (
-    <ProjektiPageLayout title="Kuulutus hyväksymispäätöksestä">
-      {!epaaktiivinen && !kertaalleenLahetettyHyvaksyttavaksi && (
-        <Notification closable type={NotificationType.INFO} hideIcon>
-          <div>
-            <h3 className="vayla-small-title">Ohjeet</h3>
-            <ul className="list-disc block pl-5">
-              <li>Aloita lisäämällä päätös ja sen liitteenä olevat aineistot kuulutuksen ensimmäiseltä välilehdeltä.</li>
-              <li>Jatka täyttämään kuulutuksen perustiedot valitsemalla &quot;Tallenna luonnos&quot;.</li>
-              <li>
-                Anna päivämäärä, jolloin suunnitelman hyväksymispäätöksestä kuulutetaan. Kuulutus julkaistaan samana päivänä Valtion
-                liikenneväylien suunnittelu -palvelun kansalaispuolella.
-              </li>
-              <li>
-                Pääkäyttäjä lisää projektille Liikenne- ja viestintäviraston päätöksen ja asianumeron{" "}
-                <Link underline="none" href={`/yllapito/projekti/${projekti?.oid}/kasittelyntila`}>
-                  Käsittelyn tila
-                </Link>{" "}
-                -sivulla.
-              </li>
-              <li>Valitse hallinto-oikeus, jolta muutoksenhakua voidaan hakea.</li>
-              <li>Valitse ja lisää kuulutuksessa esitettävät yhteystiedot ja ilmoituksen vastaanottajat.</li>
-              <li>Esikatsele ja lähetä hyväksymispäätöksen kuulutus hyväksyttäväksi projektipäällikölle.</li>
-            </ul>
-          </div>
-        </Notification>
-      )}
-      {!epaaktiivinen && (
-        <Section noDivider>
-          {!published && hyvaksymisPaatosVaiheJulkaisu?.tila === HyvaksymisPaatosVaiheTila.HYVAKSYTTY && (
-            <Notification type={NotificationType.WARN}>Kuulutusta ei ole vielä julkaistu. Kuulutuspäivä {kuulutusPaiva}.</Notification>
-          )}
-          {published && hyvaksymisPaatosVaiheJulkaisu?.tila === HyvaksymisPaatosVaiheTila.HYVAKSYTTY && (
-            <Notification type={NotificationType.INFO_GREEN}>
-              Kuulutus nähtäville asettamisesta on julkaistu {kuulutusPaiva}. Projekti näytetään kuulutuspäivästä lasketun määräajan jälkeen
-              palvelun julkisella puolella suunnittelussa olevana. Kuulutusvaihe päättyy{" "}
-              <FormatDate date={hyvaksymisPaatosVaiheJulkaisu.kuulutusVaihePaattyyPaiva} />.
-            </Notification>
-          )}
-          {hyvaksymisPaatosVaiheJulkaisu && hyvaksymisPaatosVaiheJulkaisu?.tila === HyvaksymisPaatosVaiheTila.ODOTTAA_HYVAKSYNTAA && (
-            <Notification type={NotificationType.WARN}>
-              Kuulutus nähtäville asettamisesta odottaa hyväksyntää. Tarkasta kuulutus ja a) hyväksy tai b) palauta kuulutus korjattavaksi,
-              jos havaitset puutteita tai virheen.
-            </Notification>
-          )}
-        </Section>
-      )}
-      <Tabs
-        tabStyle="Underlined"
-        value={currentTab}
-        onChange={handleChange}
-        tabs={
-          kertaalleenLahetettyHyvaksyttavaksi
-            ? [
-                {
-                  label: "Kuulutuksen tiedot",
-                  content:
-                    epaaktiivinen && hyvaksymisPaatosVaiheJulkaisu ? (
-                      <Lukunakyma projekti={projekti} hyvaksymisPaatosVaiheJulkaisu={hyvaksymisPaatosVaiheJulkaisu} />
-                    ) : (
-                      <KuulutuksenTiedot setIsDirty={setIsDirty} />
-                    ),
-                  tabId: "kuulutuksentiedot_luku_tab",
-                },
-                {
-                  label: "Päätös ja liitteenä oleva aineisto",
-                  content:
-                    epaaktiivinen && hyvaksymisPaatosVaiheJulkaisu ? (
-                      <HyvaksymisVaiheAineistotLukutila oid={projekti.oid} hyvaksymisPaatosVaiheJulkaisu={hyvaksymisPaatosVaiheJulkaisu} />
-                    ) : (
-                      <PaatosAineistot setIsDirty={setIsDirty} />
-                    ),
-                  tabId: "aineisto_luku_tab",
-                },
-              ]
-            : [
-                {
-                  label: "Päätös ja liitteenä oleva aineisto",
-                  content: <PaatosAineistot setIsDirty={setIsDirty} />,
-                  tabId: "aineisto_tab",
-                },
-                {
-                  label: "Kuulutuksen tiedot",
-                  content:
-                    epaaktiivinen && hyvaksymisPaatosVaiheJulkaisu ? (
-                      <Lukunakyma projekti={projekti} hyvaksymisPaatosVaiheJulkaisu={hyvaksymisPaatosVaiheJulkaisu} />
-                    ) : (
-                      <KuulutuksenTiedot setIsDirty={setIsDirty} />
-                    ),
-                  tabId: "kuulutuksentiedot_tab",
-                },
-              ]
-        }
-      />
-      <TallentamattomiaMuutoksiaDialog open={open} handleClickClose={handleClickClose} handleClickOk={handleClickOk} />
-    </ProjektiPageLayout>
-  );
-}
diff --git a/src/pages/yllapito/projekti/[oid]/hyvaksymispaatos/aineisto.tsx b/src/pages/yllapito/projekti/[oid]/hyvaksymispaatos/aineisto.tsx
new file mode 100644
index 000000000..f5e8b6a03
--- /dev/null
+++ b/src/pages/yllapito/projekti/[oid]/hyvaksymispaatos/aineisto.tsx
@@ -0,0 +1,28 @@
+import React, { VFC } from "react";
+import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
+import HyvaksyminenPageLayout from "@components/projekti/hyvaksyminen/HyvaksyminenPageLayout";
+import ProjektiConsumer from "@components/projekti/ProjektiConsumer";
+import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
+import HyvaksymisVaiheAineistotLukutila from "@components/projekti/lukutila/HyvakysmisVaiheAineistotLukutila";
+import PaatosAineistot from "@components/projekti/hyvaksyminen/aineistot/index";
+
+export default function HyvaksymisPaatosWrapper() {
+  return <ProjektiConsumer>{(projekti) => <Hyvaksymispaatos projekti={projekti} />}</ProjektiConsumer>;
+}
+
+const Hyvaksymispaatos: VFC<{ projekti: ProjektiLisatiedolla }> = ({ projekti }) => {
+  const hyvaksymisPaatosVaiheJulkaisu = projekti?.hyvaksymisPaatosVaiheJulkaisut
+    ? projekti.hyvaksymisPaatosVaiheJulkaisut[projekti.hyvaksymisPaatosVaiheJulkaisut.length - 1]
+    : null;
+
+  const epaaktiivinen = projektiOnEpaaktiivinen(projekti);
+  return (
+    <HyvaksyminenPageLayout>
+      {epaaktiivinen && hyvaksymisPaatosVaiheJulkaisu ? (
+        <HyvaksymisVaiheAineistotLukutila oid={projekti.oid} hyvaksymisPaatosVaiheJulkaisu={hyvaksymisPaatosVaiheJulkaisu} />
+      ) : (
+        <PaatosAineistot />
+      )}
+    </HyvaksyminenPageLayout>
+  );
+};
diff --git a/src/pages/yllapito/projekti/[oid]/hyvaksymispaatos/index.tsx b/src/pages/yllapito/projekti/[oid]/hyvaksymispaatos/index.tsx
new file mode 100644
index 000000000..deed0a375
--- /dev/null
+++ b/src/pages/yllapito/projekti/[oid]/hyvaksymispaatos/index.tsx
@@ -0,0 +1,28 @@
+import React, { VFC } from "react";
+import KuulutuksenTiedot from "@components/projekti/hyvaksyminen/kuulutuksenTiedot/index";
+import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
+import HyvaksyminenPageLayout from "@components/projekti/hyvaksyminen/HyvaksyminenPageLayout";
+import ProjektiConsumer from "@components/projekti/ProjektiConsumer";
+import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
+import Lukunakyma from "@components/projekti/hyvaksyminen/kuulutuksenTiedot/Lukunakyma";
+
+export default function HyvaksymisPaatosWrapper() {
+  return <ProjektiConsumer>{(projekti) => <Hyvaksymispaatos projekti={projekti} />}</ProjektiConsumer>;
+}
+
+const Hyvaksymispaatos: VFC<{ projekti: ProjektiLisatiedolla }> = ({ projekti }) => {
+  const hyvaksymisPaatosVaiheJulkaisu = projekti?.hyvaksymisPaatosVaiheJulkaisut
+    ? projekti.hyvaksymisPaatosVaiheJulkaisut[projekti.hyvaksymisPaatosVaiheJulkaisut.length - 1]
+    : null;
+
+  const epaaktiivinen = projektiOnEpaaktiivinen(projekti);
+  return (
+    <HyvaksyminenPageLayout>
+      {epaaktiivinen && hyvaksymisPaatosVaiheJulkaisu ? (
+        <Lukunakyma projekti={projekti} hyvaksymisPaatosVaiheJulkaisu={hyvaksymisPaatosVaiheJulkaisu} />
+      ) : (
+        <KuulutuksenTiedot />
+      )}
+    </HyvaksyminenPageLayout>
+  );
+};

From 9da8b42121b7c0b240b380edc3367faedd1e7bc2 Mon Sep 17 00:00:00 2001
From: tomi korkalainen <tomi.korkalainen@cgi.com>
Date: Mon, 7 Nov 2022 12:54:04 +0200
Subject: [PATCH 05/14] aloita paatoskomponenttien muutokset - muuta kansion
 nimi hyvaksyminen -> paatos

---
 .../projekti/common/SuunnitelmatJaAineistot.tsx   |  2 +-
 .../jatkopaatos1/kuulutuksenTiedot/index.tsx      |  2 +-
 .../HyvaksyminenPageLayout.tsx                    |  0
 .../aineistot/HyvaksymisPaatosTiedostot.tsx       |  0
 .../aineistot/HyvaksymisPaatosVaihePainikkeet.tsx |  0
 .../aineistot/Hyvaksymispaatos.tsx                |  0
 .../aineistot/Lukunakyma.tsx                      |  0
 .../aineistot/Muokkausnakyma.tsx                  |  0
 .../{hyvaksyminen => paatos}/aineistot/index.tsx  |  0
 .../IlmoituksenVastaanottajat.tsx                 |  0
 .../KuulutuksenJaIlmoituksenEsikatselu.tsx        |  0
 .../KuulutuksessaEsitettavatYhteystiedot.tsx      |  0
 .../kuulutuksenTiedot/KuulutusJaJulkaisuPaiva.tsx |  0
 .../kuulutuksenTiedot/Lukunakyma.tsx              |  0
 .../kuulutuksenTiedot/Modaalit.tsx                |  0
 .../kuulutuksenTiedot/MuutoksenHaku.tsx           |  0
 .../kuulutuksenTiedot/PaatoksenPaiva.tsx          |  0
 .../kuulutuksenTiedot/Painikkeet.tsx              |  0
 .../kuulutuksenTiedot/index.tsx                   |  2 +-
 .../projekti/[oid]/hyvaksymispaatos/aineisto.tsx  |  4 ++--
 .../projekti/[oid]/hyvaksymispaatos/index.tsx     |  6 +++---
 src/pages/yllapito/projekti/[oid]/jatkaminen1.tsx | 15 +++++++++------
 22 files changed, 17 insertions(+), 14 deletions(-)
 rename src/components/projekti/{hyvaksyminen => paatos}/HyvaksyminenPageLayout.tsx (100%)
 rename src/components/projekti/{hyvaksyminen => paatos}/aineistot/HyvaksymisPaatosTiedostot.tsx (100%)
 rename src/components/projekti/{hyvaksyminen => paatos}/aineistot/HyvaksymisPaatosVaihePainikkeet.tsx (100%)
 rename src/components/projekti/{hyvaksyminen => paatos}/aineistot/Hyvaksymispaatos.tsx (100%)
 rename src/components/projekti/{hyvaksyminen => paatos}/aineistot/Lukunakyma.tsx (100%)
 rename src/components/projekti/{hyvaksyminen => paatos}/aineistot/Muokkausnakyma.tsx (100%)
 rename src/components/projekti/{hyvaksyminen => paatos}/aineistot/index.tsx (100%)
 rename src/components/projekti/{hyvaksyminen => paatos}/kuulutuksenTiedot/IlmoituksenVastaanottajat.tsx (100%)
 rename src/components/projekti/{hyvaksyminen => paatos}/kuulutuksenTiedot/KuulutuksenJaIlmoituksenEsikatselu.tsx (100%)
 rename src/components/projekti/{hyvaksyminen => paatos}/kuulutuksenTiedot/KuulutuksessaEsitettavatYhteystiedot.tsx (100%)
 rename src/components/projekti/{hyvaksyminen => paatos}/kuulutuksenTiedot/KuulutusJaJulkaisuPaiva.tsx (100%)
 rename src/components/projekti/{hyvaksyminen => paatos}/kuulutuksenTiedot/Lukunakyma.tsx (100%)
 rename src/components/projekti/{hyvaksyminen => paatos}/kuulutuksenTiedot/Modaalit.tsx (100%)
 rename src/components/projekti/{hyvaksyminen => paatos}/kuulutuksenTiedot/MuutoksenHaku.tsx (100%)
 rename src/components/projekti/{hyvaksyminen => paatos}/kuulutuksenTiedot/PaatoksenPaiva.tsx (100%)
 rename src/components/projekti/{hyvaksyminen => paatos}/kuulutuksenTiedot/Painikkeet.tsx (100%)
 rename src/components/projekti/{hyvaksyminen => paatos}/kuulutuksenTiedot/index.tsx (98%)

diff --git a/src/components/projekti/common/SuunnitelmatJaAineistot.tsx b/src/components/projekti/common/SuunnitelmatJaAineistot.tsx
index f101b3967..169351c78 100644
--- a/src/components/projekti/common/SuunnitelmatJaAineistot.tsx
+++ b/src/components/projekti/common/SuunnitelmatJaAineistot.tsx
@@ -20,7 +20,7 @@ import { Column } from "react-table";
 import { useHassuTable } from "src/hooks/useHassuTable";
 import { useProjekti } from "src/hooks/useProjekti";
 import { formatDateTime } from "src/util/dateUtils";
-import HyvaksymisPaatosTiedostot from "../hyvaksyminen/aineistot/HyvaksymisPaatosTiedostot";
+import HyvaksymisPaatosTiedostot from "../paatos/aineistot/HyvaksymisPaatosTiedostot";
 
 interface AineistoNahtavilla {
   [kategoriaId: string]: AineistoInput[];
diff --git a/src/components/projekti/jatkopaatos1/kuulutuksenTiedot/index.tsx b/src/components/projekti/jatkopaatos1/kuulutuksenTiedot/index.tsx
index 147e369ab..dd4ba8b9f 100644
--- a/src/components/projekti/jatkopaatos1/kuulutuksenTiedot/index.tsx
+++ b/src/components/projekti/jatkopaatos1/kuulutuksenTiedot/index.tsx
@@ -8,7 +8,7 @@ import JatkoPaatos1KuulutusPainikkeet from "./JatkoPaatos1KuulutusPainikkeet";
 import KuulutuksenJaIlmoituksenEsikatselu from "./KuulutuksenJaIlmoituksenEsikatselu";
 import KuulutuksessaEsitettavatYhteystiedot from "./KuulutuksessaEsitettavatYhteystiedot";
 import KuulutusJaJulkaisuPaiva from "./KuulutusJaJulkaisuPaiva";
-import PaatoksenPaiva from "../../hyvaksyminen/kuulutuksenTiedot/PaatoksenPaiva";
+import PaatoksenPaiva from "../../paatos/kuulutuksenTiedot/PaatoksenPaiva";
 import MuutoksenHaku from "./MuutoksenHaku";
 import IlmoituksenVastaanottajatKomponentti from "./IlmoituksenVastaanottajat";
 import Lukunakyma from "./Lukunakyma";
diff --git a/src/components/projekti/hyvaksyminen/HyvaksyminenPageLayout.tsx b/src/components/projekti/paatos/HyvaksyminenPageLayout.tsx
similarity index 100%
rename from src/components/projekti/hyvaksyminen/HyvaksyminenPageLayout.tsx
rename to src/components/projekti/paatos/HyvaksyminenPageLayout.tsx
diff --git a/src/components/projekti/hyvaksyminen/aineistot/HyvaksymisPaatosTiedostot.tsx b/src/components/projekti/paatos/aineistot/HyvaksymisPaatosTiedostot.tsx
similarity index 100%
rename from src/components/projekti/hyvaksyminen/aineistot/HyvaksymisPaatosTiedostot.tsx
rename to src/components/projekti/paatos/aineistot/HyvaksymisPaatosTiedostot.tsx
diff --git a/src/components/projekti/hyvaksyminen/aineistot/HyvaksymisPaatosVaihePainikkeet.tsx b/src/components/projekti/paatos/aineistot/HyvaksymisPaatosVaihePainikkeet.tsx
similarity index 100%
rename from src/components/projekti/hyvaksyminen/aineistot/HyvaksymisPaatosVaihePainikkeet.tsx
rename to src/components/projekti/paatos/aineistot/HyvaksymisPaatosVaihePainikkeet.tsx
diff --git a/src/components/projekti/hyvaksyminen/aineistot/Hyvaksymispaatos.tsx b/src/components/projekti/paatos/aineistot/Hyvaksymispaatos.tsx
similarity index 100%
rename from src/components/projekti/hyvaksyminen/aineistot/Hyvaksymispaatos.tsx
rename to src/components/projekti/paatos/aineistot/Hyvaksymispaatos.tsx
diff --git a/src/components/projekti/hyvaksyminen/aineistot/Lukunakyma.tsx b/src/components/projekti/paatos/aineistot/Lukunakyma.tsx
similarity index 100%
rename from src/components/projekti/hyvaksyminen/aineistot/Lukunakyma.tsx
rename to src/components/projekti/paatos/aineistot/Lukunakyma.tsx
diff --git a/src/components/projekti/hyvaksyminen/aineistot/Muokkausnakyma.tsx b/src/components/projekti/paatos/aineistot/Muokkausnakyma.tsx
similarity index 100%
rename from src/components/projekti/hyvaksyminen/aineistot/Muokkausnakyma.tsx
rename to src/components/projekti/paatos/aineistot/Muokkausnakyma.tsx
diff --git a/src/components/projekti/hyvaksyminen/aineistot/index.tsx b/src/components/projekti/paatos/aineistot/index.tsx
similarity index 100%
rename from src/components/projekti/hyvaksyminen/aineistot/index.tsx
rename to src/components/projekti/paatos/aineistot/index.tsx
diff --git a/src/components/projekti/hyvaksyminen/kuulutuksenTiedot/IlmoituksenVastaanottajat.tsx b/src/components/projekti/paatos/kuulutuksenTiedot/IlmoituksenVastaanottajat.tsx
similarity index 100%
rename from src/components/projekti/hyvaksyminen/kuulutuksenTiedot/IlmoituksenVastaanottajat.tsx
rename to src/components/projekti/paatos/kuulutuksenTiedot/IlmoituksenVastaanottajat.tsx
diff --git a/src/components/projekti/hyvaksyminen/kuulutuksenTiedot/KuulutuksenJaIlmoituksenEsikatselu.tsx b/src/components/projekti/paatos/kuulutuksenTiedot/KuulutuksenJaIlmoituksenEsikatselu.tsx
similarity index 100%
rename from src/components/projekti/hyvaksyminen/kuulutuksenTiedot/KuulutuksenJaIlmoituksenEsikatselu.tsx
rename to src/components/projekti/paatos/kuulutuksenTiedot/KuulutuksenJaIlmoituksenEsikatselu.tsx
diff --git a/src/components/projekti/hyvaksyminen/kuulutuksenTiedot/KuulutuksessaEsitettavatYhteystiedot.tsx b/src/components/projekti/paatos/kuulutuksenTiedot/KuulutuksessaEsitettavatYhteystiedot.tsx
similarity index 100%
rename from src/components/projekti/hyvaksyminen/kuulutuksenTiedot/KuulutuksessaEsitettavatYhteystiedot.tsx
rename to src/components/projekti/paatos/kuulutuksenTiedot/KuulutuksessaEsitettavatYhteystiedot.tsx
diff --git a/src/components/projekti/hyvaksyminen/kuulutuksenTiedot/KuulutusJaJulkaisuPaiva.tsx b/src/components/projekti/paatos/kuulutuksenTiedot/KuulutusJaJulkaisuPaiva.tsx
similarity index 100%
rename from src/components/projekti/hyvaksyminen/kuulutuksenTiedot/KuulutusJaJulkaisuPaiva.tsx
rename to src/components/projekti/paatos/kuulutuksenTiedot/KuulutusJaJulkaisuPaiva.tsx
diff --git a/src/components/projekti/hyvaksyminen/kuulutuksenTiedot/Lukunakyma.tsx b/src/components/projekti/paatos/kuulutuksenTiedot/Lukunakyma.tsx
similarity index 100%
rename from src/components/projekti/hyvaksyminen/kuulutuksenTiedot/Lukunakyma.tsx
rename to src/components/projekti/paatos/kuulutuksenTiedot/Lukunakyma.tsx
diff --git a/src/components/projekti/hyvaksyminen/kuulutuksenTiedot/Modaalit.tsx b/src/components/projekti/paatos/kuulutuksenTiedot/Modaalit.tsx
similarity index 100%
rename from src/components/projekti/hyvaksyminen/kuulutuksenTiedot/Modaalit.tsx
rename to src/components/projekti/paatos/kuulutuksenTiedot/Modaalit.tsx
diff --git a/src/components/projekti/hyvaksyminen/kuulutuksenTiedot/MuutoksenHaku.tsx b/src/components/projekti/paatos/kuulutuksenTiedot/MuutoksenHaku.tsx
similarity index 100%
rename from src/components/projekti/hyvaksyminen/kuulutuksenTiedot/MuutoksenHaku.tsx
rename to src/components/projekti/paatos/kuulutuksenTiedot/MuutoksenHaku.tsx
diff --git a/src/components/projekti/hyvaksyminen/kuulutuksenTiedot/PaatoksenPaiva.tsx b/src/components/projekti/paatos/kuulutuksenTiedot/PaatoksenPaiva.tsx
similarity index 100%
rename from src/components/projekti/hyvaksyminen/kuulutuksenTiedot/PaatoksenPaiva.tsx
rename to src/components/projekti/paatos/kuulutuksenTiedot/PaatoksenPaiva.tsx
diff --git a/src/components/projekti/hyvaksyminen/kuulutuksenTiedot/Painikkeet.tsx b/src/components/projekti/paatos/kuulutuksenTiedot/Painikkeet.tsx
similarity index 100%
rename from src/components/projekti/hyvaksyminen/kuulutuksenTiedot/Painikkeet.tsx
rename to src/components/projekti/paatos/kuulutuksenTiedot/Painikkeet.tsx
diff --git a/src/components/projekti/hyvaksyminen/kuulutuksenTiedot/index.tsx b/src/components/projekti/paatos/kuulutuksenTiedot/index.tsx
similarity index 98%
rename from src/components/projekti/hyvaksyminen/kuulutuksenTiedot/index.tsx
rename to src/components/projekti/paatos/kuulutuksenTiedot/index.tsx
index 67ad74592..3ca6600d3 100644
--- a/src/components/projekti/hyvaksyminen/kuulutuksenTiedot/index.tsx
+++ b/src/components/projekti/paatos/kuulutuksenTiedot/index.tsx
@@ -18,7 +18,7 @@ import useKirjaamoOsoitteet from "src/hooks/useKirjaamoOsoitteet";
 import PdfPreviewForm from "@components/projekti/PdfPreviewForm";
 import useLeaveConfirm from "src/hooks/useLeaveConfirm";
 import useIsAllowedOnCurrentProjektiRoute from "src/hooks/useIsOnAllowedProjektiRoute";
-import PaatoksenPaiva from "@components/projekti/hyvaksyminen/kuulutuksenTiedot/PaatoksenPaiva";
+import PaatoksenPaiva from "@components/projekti/paatos/kuulutuksenTiedot/PaatoksenPaiva";
 
 export type KuulutuksenTiedotFormValues = Pick<TallennaProjektiInput, "oid"> & {
   hyvaksymisPaatosVaihe: Omit<HyvaksymisPaatosVaiheInput, "hallintoOikeus"> & {
diff --git a/src/pages/yllapito/projekti/[oid]/hyvaksymispaatos/aineisto.tsx b/src/pages/yllapito/projekti/[oid]/hyvaksymispaatos/aineisto.tsx
index f5e8b6a03..4872fb416 100644
--- a/src/pages/yllapito/projekti/[oid]/hyvaksymispaatos/aineisto.tsx
+++ b/src/pages/yllapito/projekti/[oid]/hyvaksymispaatos/aineisto.tsx
@@ -1,10 +1,10 @@
 import React, { VFC } from "react";
 import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
-import HyvaksyminenPageLayout from "@components/projekti/hyvaksyminen/HyvaksyminenPageLayout";
+import HyvaksyminenPageLayout from "@components/projekti/paatos/HyvaksyminenPageLayout";
 import ProjektiConsumer from "@components/projekti/ProjektiConsumer";
 import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
 import HyvaksymisVaiheAineistotLukutila from "@components/projekti/lukutila/HyvakysmisVaiheAineistotLukutila";
-import PaatosAineistot from "@components/projekti/hyvaksyminen/aineistot/index";
+import PaatosAineistot from "@components/projekti/paatos/aineistot/index";
 
 export default function HyvaksymisPaatosWrapper() {
   return <ProjektiConsumer>{(projekti) => <Hyvaksymispaatos projekti={projekti} />}</ProjektiConsumer>;
diff --git a/src/pages/yllapito/projekti/[oid]/hyvaksymispaatos/index.tsx b/src/pages/yllapito/projekti/[oid]/hyvaksymispaatos/index.tsx
index deed0a375..fe993865a 100644
--- a/src/pages/yllapito/projekti/[oid]/hyvaksymispaatos/index.tsx
+++ b/src/pages/yllapito/projekti/[oid]/hyvaksymispaatos/index.tsx
@@ -1,10 +1,10 @@
 import React, { VFC } from "react";
-import KuulutuksenTiedot from "@components/projekti/hyvaksyminen/kuulutuksenTiedot/index";
+import KuulutuksenTiedot from "@components/projekti/paatos/kuulutuksenTiedot/index";
 import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
-import HyvaksyminenPageLayout from "@components/projekti/hyvaksyminen/HyvaksyminenPageLayout";
+import HyvaksyminenPageLayout from "@components/projekti/paatos/HyvaksyminenPageLayout";
 import ProjektiConsumer from "@components/projekti/ProjektiConsumer";
 import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
-import Lukunakyma from "@components/projekti/hyvaksyminen/kuulutuksenTiedot/Lukunakyma";
+import Lukunakyma from "@components/projekti/paatos/kuulutuksenTiedot/Lukunakyma";
 
 export default function HyvaksymisPaatosWrapper() {
   return <ProjektiConsumer>{(projekti) => <Hyvaksymispaatos projekti={projekti} />}</ProjektiConsumer>;
diff --git a/src/pages/yllapito/projekti/[oid]/jatkaminen1.tsx b/src/pages/yllapito/projekti/[oid]/jatkaminen1.tsx
index 5f43f7326..0e9aad750 100644
--- a/src/pages/yllapito/projekti/[oid]/jatkaminen1.tsx
+++ b/src/pages/yllapito/projekti/[oid]/jatkaminen1.tsx
@@ -1,10 +1,10 @@
-import React, { ReactElement, useCallback, useState } from "react";
+import React, { useCallback, useState, VFC } from "react";
 import ProjektiPageLayout from "@components/projekti/ProjektiPageLayout";
 import Notification, { NotificationType } from "@components/notification/Notification";
 import Tabs, { TabProps } from "@components/layout/tabs/Tabs";
 import KuulutuksenTiedot from "@components/projekti/jatkopaatos1/kuulutuksenTiedot/index";
 import PaatosAineistot from "@components/projekti/jatkopaatos1/aineistot/index";
-import { useProjekti } from "src/hooks/useProjekti";
+import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
 import { Link } from "@mui/material";
 import { HyvaksymisPaatosVaiheTila } from "@services/api";
 import { examineKuulutusPaiva } from "src/util/aloitusKuulutusUtil";
@@ -14,8 +14,13 @@ import TallentamattomiaMuutoksiaDialog from "@components/TallentamattomiaMuutoks
 import Jatkopaatos1VaiheAineistotLukutila from "@components/projekti/lukutila/JatkoPaatos1VaiheAineistotLukutila";
 import Lukunakyma from "@components/projekti/jatkopaatos1/kuulutuksenTiedot/Lukunakyma";
 import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
+import ProjektiConsumer from "@components/projekti/ProjektiConsumer";
 
-export default function Jatkopaatos1(): ReactElement {
+export default function Jatkopaatos1Wrapper() {
+  return <ProjektiConsumer>{(projekti) => <Jatkopaatos1 projekti={projekti} />}</ProjektiConsumer>;
+}
+
+const Jatkopaatos1: VFC<{ projekti: ProjektiLisatiedolla }> = ({ projekti }) => {
   const [currentTab, setCurrentTab] = useState<number | string>(0);
   const [open, setOpen] = useState(false);
   const [isDirty, setIsDirty] = useState(false);
@@ -41,8 +46,6 @@ export default function Jatkopaatos1(): ReactElement {
     }
   };
 
-  const { data: projekti } = useProjekti();
-
   const kertaalleenLahetettyHyvaksyttavaksi = projekti?.jatkoPaatos1VaiheJulkaisut && projekti.jatkoPaatos1VaiheJulkaisut.length >= 1;
 
   const jatkopaatos1VaiheJulkaisu = projekti?.jatkoPaatos1VaiheJulkaisut
@@ -154,4 +157,4 @@ export default function Jatkopaatos1(): ReactElement {
       <TallentamattomiaMuutoksiaDialog open={open} handleClickClose={handleClickClose} handleClickOk={handleClickOk} />
     </ProjektiPageLayout>
   );
-}
+};

From 3be143b5a52491959bd186a2678840516fc06daa Mon Sep 17 00:00:00 2001
From: tomi korkalainen <tomi.korkalainen@cgi.com>
Date: Mon, 7 Nov 2022 13:33:39 +0200
Subject: [PATCH 06/14] =?UTF-8?q?poista=20jatkopaatos=20komponentit=20-=20?=
 =?UTF-8?q?muutokset=20tehd=C3=A4=C3=A4n=20paatos-kansion=20komponentteihi?=
 =?UTF-8?q?n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../jatkopaatos1/aineistot/Jatkopaatos1.tsx   |  49 ----
 .../aineistot/Jatkopaatos1Tiedostot.tsx       |  80 ------
 .../aineistot/Jatkopaatos1VaihePainikkeet.tsx |  65 -----
 .../jatkopaatos1/aineistot/Lukunakyma.tsx     | 101 -------
 .../jatkopaatos1/aineistot/Muokkausnakyma.tsx | 111 --------
 .../projekti/jatkopaatos1/aineistot/index.tsx |  15 --
 .../IlmoituksenVastaanottajat.tsx             | 250 ------------------
 .../JatkoPaatos1KuulutusPainikkeet.tsx        | 205 --------------
 .../KuulutuksenJaIlmoituksenEsikatselu.tsx    | 131 ---------
 .../KuulutuksessaEsitettavatYhteystiedot.tsx  | 205 --------------
 .../KuulutusJaJulkaisuPaiva.tsx               |  67 -----
 .../kuulutuksenTiedot/Lukunakyma.tsx          | 222 ----------------
 .../kuulutuksenTiedot/Modaalit.tsx            | 145 ----------
 .../kuulutuksenTiedot/MuutoksenHaku.tsx       |  61 -----
 .../kuulutuksenTiedot/Voimassaolovuosi.tsx    |  71 -----
 .../jatkopaatos1/kuulutuksenTiedot/index.tsx  | 143 ----------
 ...kutila.tsx => PaatosAineistotLukutila.tsx} |   4 +-
 .../projekti/[oid]/hyvaksyminen/aineisto.tsx  |  27 ++
 .../index.tsx                                 |  15 +-
 .../[oid]/hyvaksymispaatos/aineisto.tsx       |  28 --
 .../yllapito/projekti/[oid]/jatkaminen1.tsx   | 160 -----------
 .../projekti/[oid]/jatkaminen1/aineisto.tsx   |  27 ++
 .../projekti/[oid]/jatkaminen1/index.tsx      |  27 ++
 23 files changed, 90 insertions(+), 2119 deletions(-)
 delete mode 100644 src/components/projekti/jatkopaatos1/aineistot/Jatkopaatos1.tsx
 delete mode 100644 src/components/projekti/jatkopaatos1/aineistot/Jatkopaatos1Tiedostot.tsx
 delete mode 100644 src/components/projekti/jatkopaatos1/aineistot/Jatkopaatos1VaihePainikkeet.tsx
 delete mode 100644 src/components/projekti/jatkopaatos1/aineistot/Lukunakyma.tsx
 delete mode 100644 src/components/projekti/jatkopaatos1/aineistot/Muokkausnakyma.tsx
 delete mode 100644 src/components/projekti/jatkopaatos1/aineistot/index.tsx
 delete mode 100644 src/components/projekti/jatkopaatos1/kuulutuksenTiedot/IlmoituksenVastaanottajat.tsx
 delete mode 100644 src/components/projekti/jatkopaatos1/kuulutuksenTiedot/JatkoPaatos1KuulutusPainikkeet.tsx
 delete mode 100644 src/components/projekti/jatkopaatos1/kuulutuksenTiedot/KuulutuksenJaIlmoituksenEsikatselu.tsx
 delete mode 100644 src/components/projekti/jatkopaatos1/kuulutuksenTiedot/KuulutuksessaEsitettavatYhteystiedot.tsx
 delete mode 100644 src/components/projekti/jatkopaatos1/kuulutuksenTiedot/KuulutusJaJulkaisuPaiva.tsx
 delete mode 100644 src/components/projekti/jatkopaatos1/kuulutuksenTiedot/Lukunakyma.tsx
 delete mode 100644 src/components/projekti/jatkopaatos1/kuulutuksenTiedot/Modaalit.tsx
 delete mode 100644 src/components/projekti/jatkopaatos1/kuulutuksenTiedot/MuutoksenHaku.tsx
 delete mode 100644 src/components/projekti/jatkopaatos1/kuulutuksenTiedot/Voimassaolovuosi.tsx
 delete mode 100644 src/components/projekti/jatkopaatos1/kuulutuksenTiedot/index.tsx
 rename src/components/projekti/lukutila/{HyvakysmisVaiheAineistotLukutila.tsx => PaatosAineistotLukutila.tsx} (81%)
 create mode 100644 src/pages/yllapito/projekti/[oid]/hyvaksyminen/aineisto.tsx
 rename src/pages/yllapito/projekti/[oid]/{hyvaksymispaatos => hyvaksyminen}/index.tsx (58%)
 delete mode 100644 src/pages/yllapito/projekti/[oid]/hyvaksymispaatos/aineisto.tsx
 delete mode 100644 src/pages/yllapito/projekti/[oid]/jatkaminen1.tsx
 create mode 100644 src/pages/yllapito/projekti/[oid]/jatkaminen1/aineisto.tsx
 create mode 100644 src/pages/yllapito/projekti/[oid]/jatkaminen1/index.tsx

diff --git a/src/components/projekti/jatkopaatos1/aineistot/Jatkopaatos1.tsx b/src/components/projekti/jatkopaatos1/aineistot/Jatkopaatos1.tsx
deleted file mode 100644
index b3a33cfff..000000000
--- a/src/components/projekti/jatkopaatos1/aineistot/Jatkopaatos1.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React, { useState } from "react";
-import Button from "@components/button/Button";
-import AineistojenValitseminenDialog from "@components/projekti/common/AineistojenValitseminenDialog";
-import { AineistoInput } from "@services/api";
-import { useFormContext } from "react-hook-form";
-import { find } from "lodash";
-import Jatkopaatos1Tiedostot from "./Jatkopaatos1Tiedostot";
-
-type FormFields = {
-  hyvaksymisPaatos: AineistoInput[];
-};
-
-export default function Jatkopaatos1() {
-  const [aineistoDialogOpen, setAineistoDialogOpen] = useState(false);
-  const { setValue, watch } = useFormContext<FormFields>();
-  const aineistot = watch("hyvaksymisPaatos");
-
-  return (
-    <>
-      <h4 className="vayla-small-title mt-8 pt-8">Päätös ja jatkopäätös *</h4>
-      <p>
-        Liitä Liikenne- ja viestintäviraston päätökset suunnitelman hyväksymisestä sekä päätös suunnitelman voimassaoloajan pidentämisestä.
-        Jatkopäätöksen päivämäärä sekä asiatunnus löytyvät automaattisesti Kuulutuksen tiedot -välilehdeltä.
-      </p>
-      <div className="m-6">
-        {!aineistot && <div>Ei hyvaksymispäätöstä</div>}
-        <Jatkopaatos1Tiedostot />
-      </div>
-
-      <Button type="button" onClick={() => setAineistoDialogOpen(true)} id="tuo_paatos_button">
-        Tuo päätös
-      </Button>
-      <AineistojenValitseminenDialog
-        open={aineistoDialogOpen}
-        infoText="Valitse yksi tai useampi päätöstiedosto."
-        onClose={() => setAineistoDialogOpen(false)}
-        onSubmit={(newAineistot) => {
-          const value = aineistot || [];
-          newAineistot.forEach((aineisto) => {
-            if (!find(value, { dokumenttiOid: aineisto.dokumenttiOid })) {
-              value.push({ ...aineisto, kategoriaId: null, jarjestys: value.length });
-            }
-          });
-          setValue("hyvaksymisPaatos", value, { shouldDirty: true });
-        }}
-      />
-    </>
-  );
-}
diff --git a/src/components/projekti/jatkopaatos1/aineistot/Jatkopaatos1Tiedostot.tsx b/src/components/projekti/jatkopaatos1/aineistot/Jatkopaatos1Tiedostot.tsx
deleted file mode 100644
index 7618e139e..000000000
--- a/src/components/projekti/jatkopaatos1/aineistot/Jatkopaatos1Tiedostot.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import IconButton from "@components/button/IconButton";
-import HassuTable from "@components/HassuTable";
-import HassuAineistoNimiExtLink from "@components/projekti/HassuAineistoNimiExtLink";
-import { Aineisto, AineistoInput } from "@services/api";
-import React, { useMemo } from "react";
-import { FieldArrayWithId, useFieldArray, useFormContext } from "react-hook-form";
-import { Column } from "react-table";
-import { useHassuTable } from "src/hooks/useHassuTable";
-import { useProjekti } from "src/hooks/useProjekti";
-import { formatDateTime } from "src/util/dateUtils";
-
-interface FormValues {
-  jatkopaatos1: AineistoInput[];
-}
-
-type FormAineisto = FieldArrayWithId<FormValues, "jatkopaatos1", "id"> & Pick<Aineisto, "tila" | "tuotu" | "tiedosto">;
-
-export default function AineistoTable() {
-  const { data: projekti } = useProjekti();
-  const { control, formState, register } = useFormContext<FormValues>();
-  const { fields, remove } = useFieldArray({ name: "jatkopaatos1", control });
-
-  const enrichedFields: FormAineisto[] = useMemo(
-    () =>
-      fields.map((field) => {
-        const aineistoData = projekti?.jatkoPaatos1Vaihe?.hyvaksymisPaatos || [];
-        const { tila, tuotu, tiedosto } = aineistoData.find(({ dokumenttiOid }) => dokumenttiOid === field.dokumenttiOid) || {};
-
-        return { tila, tuotu, tiedosto, ...field };
-      }),
-    [fields, projekti]
-  );
-
-  const columns = useMemo<Column<FormAineisto>[]>(
-    () => [
-      {
-        Header: "Tiedosto",
-        width: 250,
-        accessor: (aineisto) => {
-          const index = enrichedFields.findIndex((row) => row.dokumenttiOid === aineisto.dokumenttiOid);
-          const errorMessage = (formState.errors.jatkopaatos1?.[index] as any | undefined)?.message;
-          return (
-            <>
-              <HassuAineistoNimiExtLink aineistoNimi={aineisto.nimi} tiedostoPolku={aineisto.tiedosto} />
-              {errorMessage && <p className="text-red">{errorMessage}</p>}
-              <input type="hidden" {...register(`jatkopaatos1.${index}.dokumenttiOid`)} />
-              <input type="hidden" {...register(`jatkopaatos1.${index}.nimi`)} />
-            </>
-          );
-        },
-      },
-      {
-        Header: "Tuotu",
-        accessor: (aineisto) => (aineisto.tuotu ? formatDateTime(aineisto.tuotu) : undefined),
-      },
-      {
-        Header: "Poista",
-        accessor: (aineisto) => {
-          const index = enrichedFields.findIndex((row) => row.dokumenttiOid === aineisto.dokumenttiOid);
-          return (
-            <IconButton
-              type="button"
-              onClick={() => {
-                remove(index);
-              }}
-              icon="trash"
-            />
-          );
-        },
-      },
-      { Header: "id", accessor: "id" },
-      { Header: "dokumenttiOid", accessor: "dokumenttiOid" },
-    ],
-    [enrichedFields, formState.errors.jatkopaatos1, register, remove]
-  );
-  const tableProps = useHassuTable<FormAineisto>({
-    tableOptions: { columns, data: enrichedFields || [], initialState: { hiddenColumns: ["dokumenttiOid", "id"] } },
-  });
-  return <HassuTable {...tableProps} />;
-}
diff --git a/src/components/projekti/jatkopaatos1/aineistot/Jatkopaatos1VaihePainikkeet.tsx b/src/components/projekti/jatkopaatos1/aineistot/Jatkopaatos1VaihePainikkeet.tsx
deleted file mode 100644
index 6b8263704..000000000
--- a/src/components/projekti/jatkopaatos1/aineistot/Jatkopaatos1VaihePainikkeet.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import Button from "@components/button/Button";
-import HassuSpinner from "@components/HassuSpinner";
-import Section from "@components/layout/Section";
-import { Stack } from "@mui/material";
-import { api, TallennaProjektiInput } from "@services/api";
-import log from "loglevel";
-import React, { useState } from "react";
-import { useFormContext } from "react-hook-form";
-import { useProjekti } from "src/hooks/useProjekti";
-import useSnackbars from "src/hooks/useSnackbars";
-import deleteFieldArrayIds from "src/util/deleteFieldArrayIds";
-import { JatkoPaatos1VaiheAineistotFormValues } from "./Muokkausnakyma";
-
-const mapFormValuesToTallennaProjektiInput = ({
-  oid,
-  hyvaksymisPaatos,
-  aineistoNahtavilla,
-}: JatkoPaatos1VaiheAineistotFormValues): TallennaProjektiInput => {
-  const aineistoNahtavillaFlat = Object.values(aineistoNahtavilla).flat();
-  deleteFieldArrayIds(aineistoNahtavillaFlat);
-  deleteFieldArrayIds(hyvaksymisPaatos);
-
-  return { oid, jatkoPaatos1Vaihe: { aineistoNahtavilla: aineistoNahtavillaFlat, hyvaksymisPaatos } };
-};
-
-export default function Jatkopaatos1Painikkeet() {
-  const { mutate: reloadProjekti } = useProjekti();
-  const [isFormSubmitting, setIsFormSubmitting] = useState(false);
-  const { showSuccessMessage, showErrorMessage } = useSnackbars();
-
-  const { handleSubmit, reset } = useFormContext<JatkoPaatos1VaiheAineistotFormValues>();
-
-  const saveSuunnitteluvaihe = async (formData: TallennaProjektiInput) => {
-    await api.tallennaProjekti(formData);
-    if (reloadProjekti) await reloadProjekti();
-  };
-
-  const saveDraft = async (formData: JatkoPaatos1VaiheAineistotFormValues) => {
-    setIsFormSubmitting(true);
-    try {
-      await saveSuunnitteluvaihe(mapFormValuesToTallennaProjektiInput(formData));
-      reloadProjekti();
-      reset(formData);
-      showSuccessMessage("Tallennus onnistui!");
-    } catch (e) {
-      log.error("OnSubmit Error", e);
-      showErrorMessage("Tallennuksessa tapahtui virhe");
-    }
-    setIsFormSubmitting(false);
-  };
-
-  return (
-    <>
-      <Section noDivider>
-        <Stack justifyContent={{ md: "flex-end" }} direction={{ xs: "column", md: "row" }}>
-          <Button id="save_jatkopaatos1vaihe_draft" onClick={handleSubmit(saveDraft)}>Tallenna Luonnos</Button>
-          <Button id="save_and_send_for_acceptance" primary disabled onClick={undefined}>
-            Lähetä Hyväksyttäväksi
-          </Button>
-        </Stack>
-      </Section>
-      <HassuSpinner open={isFormSubmitting} />
-    </>
-  );
-}
diff --git a/src/components/projekti/jatkopaatos1/aineistot/Lukunakyma.tsx b/src/components/projekti/jatkopaatos1/aineistot/Lukunakyma.tsx
deleted file mode 100644
index 73d273826..000000000
--- a/src/components/projekti/jatkopaatos1/aineistot/Lukunakyma.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import HassuAccordion, { AccordionItem } from "@components/HassuAccordion";
-import Section from "@components/layout/Section";
-import HassuAineistoNimiExtLink from "@components/projekti/HassuAineistoNimiExtLink";
-import { Stack } from "@mui/material";
-import { HyvaksymisPaatosVaiheJulkaisu, HyvaksymisPaatosVaiheTila } from "@services/api";
-import { AineistoKategoria, aineistoKategoriat, getNestedAineistoMaaraForCategory } from "common/aineistoKategoriat";
-import useTranslation from "next-translate/useTranslation";
-import React, { FC, useMemo } from "react";
-import { useProjekti } from "src/hooks/useProjekti";
-import { formatDate, formatDateTime } from "src/util/dateUtils";
-import { examineJulkaisuPaiva } from "../../../../util/dateUtils";
-
-export default function Lukunakyma() {
-  const { data: projekti } = useProjekti();
-
-  const julkaisu = useMemo(() => projekti?.jatkoPaatos1VaiheJulkaisut?.[projekti.jatkoPaatos1VaiheJulkaisut.length - 1], [projekti]);
-
-  const { published } = examineJulkaisuPaiva(julkaisu?.tila === HyvaksymisPaatosVaiheTila.HYVAKSYTTY, julkaisu?.kuulutusPaiva);
-
-  if (!projekti || !julkaisu) {
-    return null;
-  }
-
-  return (
-    <>
-      <Section smallGaps>
-        <h4 className="vayla-smallest-title">Päätös ja sen liitteenä oleva aineisto</h4>
-        {published && (
-          <p>
-            Aineistot ovat nähtävillä palvelun julkisella puolella
-            {" " + formatDate(julkaisu.kuulutusVaihePaattyyPaiva) + " "}
-            saakka.
-          </p>
-        )}
-        <p>Päätös</p>
-        {julkaisu && julkaisu.hyvaksymisPaatos && (
-          <Stack direction="column" rowGap={2}>
-            {julkaisu.hyvaksymisPaatos.map((aineisto) => (
-              <span key={aineisto.dokumenttiOid}>
-                <HassuAineistoNimiExtLink tiedostoPolku={aineisto.tiedosto} aineistoNimi={aineisto.nimi} sx={{ mr: 3 }} target="_blank" />
-                {aineisto.tuotu && formatDateTime(aineisto.tuotu)}
-              </span>
-            ))}
-          </Stack>
-        )}
-        <p className="mt-8">Päätöksen liitteenä oleva aineisto</p>
-        <AineistoNahtavillaAccordion
-          kategoriat={aineistoKategoriat.listKategoriat()}
-          julkaisu={julkaisu as HyvaksymisPaatosVaiheJulkaisu}
-        />
-      </Section>
-    </>
-  );
-}
-
-interface AineistoNahtavillaAccordionProps {
-  julkaisu: HyvaksymisPaatosVaiheJulkaisu;
-  kategoriat: AineistoKategoria[];
-}
-
-const AineistoNahtavillaAccordion: FC<AineistoNahtavillaAccordionProps> = ({ julkaisu, kategoriat }) => {
-  const { t } = useTranslation("aineisto");
-  const accordionItems: AccordionItem[] = useMemo(
-    () =>
-      kategoriat
-        .filter((kategoria) => julkaisu.aineistoNahtavilla?.some((aineisto) => aineisto.kategoriaId === kategoria.id))
-        .map<AccordionItem>((kategoria) => ({
-          id: kategoria.id,
-          title: (
-            <span>
-              {t(`aineisto-kategoria-nimi.${kategoria.id}`)}
-              {" (" + getNestedAineistoMaaraForCategory(julkaisu.aineistoNahtavilla || [], kategoria) + ")"}
-            </span>
-          ),
-          content: (
-            <>
-              {julkaisu.aineistoNahtavilla && (
-                <Stack direction="column" rowGap={2}>
-                  {julkaisu.aineistoNahtavilla
-                    .filter((aineisto) => aineisto.kategoriaId === kategoria.id)
-                    .map((aineisto) => (
-                      <span key={aineisto.dokumenttiOid}>
-                        <HassuAineistoNimiExtLink
-                          tiedostoPolku={aineisto.tiedosto}
-                          aineistoNimi={aineisto.nimi}
-                          sx={{ mr: 3 }}
-                          target="_blank"
-                        />
-                        {aineisto.tuotu && formatDateTime(aineisto.tuotu)}
-                      </span>
-                    ))}
-                </Stack>
-              )}
-              {kategoria.alaKategoriat && <AineistoNahtavillaAccordion julkaisu={julkaisu} kategoriat={kategoria.alaKategoriat} />}
-            </>
-          ),
-        })),
-    [t, julkaisu, kategoriat]
-  );
-  return !!accordionItems.length ? <HassuAccordion items={accordionItems} /> : null;
-};
diff --git a/src/components/projekti/jatkopaatos1/aineistot/Muokkausnakyma.tsx b/src/components/projekti/jatkopaatos1/aineistot/Muokkausnakyma.tsx
deleted file mode 100644
index 611d2a091..000000000
--- a/src/components/projekti/jatkopaatos1/aineistot/Muokkausnakyma.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { yupResolver } from "@hookform/resolvers/yup";
-import { Aineisto, AineistoInput, TallennaProjektiInput } from "@services/api";
-import React, { ReactElement, useEffect, useMemo } from "react";
-import { UseFormProps, useForm, FormProvider } from "react-hook-form";
-import { useProjekti } from "src/hooks/useProjekti";
-import { nahtavillaoloAineistotSchema } from "src/schemas/nahtavillaoloAineistot";
-import Jatkopaatos1VaihePainikkeet from "./Jatkopaatos1VaihePainikkeet";
-import SuunnitelmatJaAineistot from "../../common/SuunnitelmatJaAineistot";
-import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
-import { aineistoKategoriat } from "common/aineistoKategoriat";
-import useLeaveConfirm from "src/hooks/useLeaveConfirm";
-import useIsAllowedOnCurrentProjektiRoute from "src/hooks/useIsOnAllowedProjektiRoute";
-
-interface AineistoNahtavilla {
-  [kategoriaId: string]: AineistoInput[];
-}
-
-type FormData = {
-  aineistoNahtavilla: AineistoNahtavilla;
-  hyvaksymisPaatos: AineistoInput[];
-};
-
-export type JatkoPaatos1VaiheAineistotFormValues = Pick<TallennaProjektiInput, "oid"> & FormData;
-
-const getDefaultValueForAineistoNahtavilla = (aineistot: Aineisto[] | undefined | null) => {
-  return aineistoKategoriat.listKategoriaIds().reduce<AineistoNahtavilla>((aineistoNahtavilla, currentKategoriaId) => {
-    aineistoNahtavilla[currentKategoriaId] =
-      aineistot
-        ?.filter((aineisto) => aineisto.kategoriaId === currentKategoriaId)
-        .map<AineistoInput>((aineisto) => ({
-          dokumenttiOid: aineisto.dokumenttiOid,
-          nimi: aineisto.nimi,
-          jarjestys: aineisto.jarjestys,
-          kategoriaId: aineisto.kategoriaId,
-        })) || [];
-    return aineistoNahtavilla;
-  }, {});
-};
-
-interface Props {
-  setIsDirty: (value: React.SetStateAction<boolean>) => void;
-}
-
-export default function Muokkausnakyma({ setIsDirty }: Props): ReactElement {
-  const { data: projekti } = useProjekti({ revalidateOnMount: true });
-
-  return <>{projekti && <MuokkausnakymaForm projekti={projekti} setIsDirty={setIsDirty} />}</>;
-}
-
-interface MuokkausnakymaFormProps {
-  projekti: ProjektiLisatiedolla;
-}
-
-function MuokkausnakymaForm({ projekti, setIsDirty }: MuokkausnakymaFormProps & Props) {
-  const defaultValues: JatkoPaatos1VaiheAineistotFormValues = useMemo(() => {
-    const hyvaksymisPaatos: AineistoInput[] =
-      projekti.jatkoPaatos1Vaihe?.hyvaksymisPaatos?.map(({ dokumenttiOid, nimi, jarjestys }) => ({
-        dokumenttiOid,
-        jarjestys,
-        nimi,
-      })) || [];
-
-    return {
-      oid: projekti.oid,
-      aineistoNahtavilla: getDefaultValueForAineistoNahtavilla(projekti.jatkoPaatos1Vaihe?.aineistoNahtavilla),
-      hyvaksymisPaatos,
-    };
-  }, [projekti]);
-
-  const formOptions: UseFormProps<JatkoPaatos1VaiheAineistotFormValues> = {
-    resolver: yupResolver(nahtavillaoloAineistotSchema, { abortEarly: false, recursive: true }),
-    mode: "onChange",
-    reValidateMode: "onChange",
-    defaultValues,
-  };
-
-  const useFormReturn = useForm<JatkoPaatos1VaiheAineistotFormValues>(formOptions);
-  const {
-    formState: { isDirty },
-  } = useFormReturn;
-
-  const { isAllowedOnRoute } = useIsAllowedOnCurrentProjektiRoute();
-
-  useEffect(() => {
-    setIsDirty(isDirty);
-  }, [isDirty, setIsDirty]);
-
-  useLeaveConfirm(isDirty);
-
-  return (
-    <FormProvider {...useFormReturn}>
-      <form>
-        <fieldset disabled={!isAllowedOnRoute || !projekti.nykyinenKayttaja.omaaMuokkausOikeuden}>
-          <SuunnitelmatJaAineistot
-            sectionTitle="Päätös ja päätöksen liitteenä oleva aineistot"
-            sectionInfoText="Liitä kuulutukselle Liikenne- ja viestintäviraston päätös sekä jatkopäätös. Liitettävät päätökset sekä päätösten liitteenä olevat aineistot haetaan Projektivelhosta. Päätökset ja sen liitteenä oleva aineisto julkaistaan palvelun julkisella puolella kuulutuksen julkaisupäivänä."
-            dialogInfoText="Valitse tiedostot,
-            jotka haluat tuoda päätöksen liitteeksi."
-            sectionSubtitle="Päätöksen liitteenä oleva aineisto"
-            paatos={{
-              paatosInfoText:
-                "Liitä Liikenne- ja viestintäviraston päätökset suunnitelman hyväksymisestä sekä päätös suunnitelman voimassaoloajan pidentämisestä. Jatkopäätöksen päivämäärä sekä asiatunnus löytyvät automaattisesti Kuulutuksen tiedot -välilehdeltä.",
-              paatosSubtitle: "Päätös ja jatkopäätös *",
-            }}
-          />
-          <Jatkopaatos1VaihePainikkeet />
-        </fieldset>
-      </form>
-    </FormProvider>
-  );
-}
diff --git a/src/components/projekti/jatkopaatos1/aineistot/index.tsx b/src/components/projekti/jatkopaatos1/aineistot/index.tsx
deleted file mode 100644
index d850398ca..000000000
--- a/src/components/projekti/jatkopaatos1/aineistot/index.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-import { useProjekti } from "src/hooks/useProjekti";
-import Lukunakyma from "./Lukunakyma";
-import Muokkausnakyma from "./Muokkausnakyma";
-
-interface Props {
-  setIsDirty: (value: React.SetStateAction<boolean>) => void;
-}
-
-export default function Aineistot({ setIsDirty }: Props) {
-  const { data: projekti } = useProjekti();
-
-  const voiMuokata = !projekti?.jatkoPaatos1VaiheJulkaisut?.length;
-  return voiMuokata ? <Muokkausnakyma setIsDirty={setIsDirty} /> : <Lukunakyma />;
-}
diff --git a/src/components/projekti/jatkopaatos1/kuulutuksenTiedot/IlmoituksenVastaanottajat.tsx b/src/components/projekti/jatkopaatos1/kuulutuksenTiedot/IlmoituksenVastaanottajat.tsx
deleted file mode 100644
index ee3db87c0..000000000
--- a/src/components/projekti/jatkopaatos1/kuulutuksenTiedot/IlmoituksenVastaanottajat.tsx
+++ /dev/null
@@ -1,250 +0,0 @@
-import Button from "@components/button/Button";
-import Select from "@components/form/Select";
-import TextInput from "@components/form/TextInput";
-import React, { Fragment, ReactElement } from "react";
-import { Controller, FieldError, useFieldArray, useFormContext } from "react-hook-form";
-import { formatProperNoun } from "common/util/formatProperNoun";
-import useTranslation from "next-translate/useTranslation";
-import IconButton from "@components/button/IconButton";
-import { KuntaVastaanottajaInput, HyvaksymisPaatosVaihe, ViranomaisVastaanottajaInput, Projekti, Kieli } from "@services/api";
-import Section from "@components/layout/Section";
-import SectionContent from "@components/layout/SectionContent";
-import HassuGrid from "@components/HassuGrid";
-import dayjs from "dayjs";
-import useKirjaamoOsoitteet from "src/hooks/useKirjaamoOsoitteet";
-import { Link } from "@mui/material";
-import { kuntametadata } from "common/kuntametadata";
-import useKansalaiskieli from "src/hooks/useKansalaiskieli";
-
-interface HelperType {
-  kunnat?: FieldError | { nimi?: FieldError | undefined; sahkoposti?: FieldError | undefined }[] | undefined;
-  viranomaiset?: FieldError | null | undefined;
-}
-
-interface Props {
-  jatkoPaatos1Vaihe?: HyvaksymisPaatosVaihe | null | undefined;
-  projekti: Projekti | null | undefined;
-}
-
-type FormFields = {
-  jatkoPaatos1Vaihe: {
-    ilmoituksenVastaanottajat: {
-      kunnat: Array<KuntaVastaanottajaInput>;
-      viranomaiset: Array<ViranomaisVastaanottajaInput>;
-    };
-  };
-};
-
-export default function IlmoituksenVastaanottajat({ projekti }: Props): ReactElement {
-  const { t } = useTranslation("commonFI");
-  const { data: kirjaamoOsoitteet } = useKirjaamoOsoitteet();
-
-  const julkinen = false; //TODO
-
-  const {
-    register,
-    control,
-    formState: { errors },
-    setValue,
-    watch,
-  } = useFormContext<FormFields>();
-
-  const kieli = useKansalaiskieli();
-
-  const ilmoituksenVastaanottajat = watch("jatkoPaatos1Vaihe.ilmoituksenVastaanottajat");
-
-  const { fields: kuntaFields } = useFieldArray({
-    control,
-    name: "jatkoPaatos1Vaihe.ilmoituksenVastaanottajat.kunnat",
-  });
-
-  const {
-    fields: viranomaisFields,
-    append,
-    remove,
-  } = useFieldArray({
-    control,
-    name: "jatkoPaatos1Vaihe.ilmoituksenVastaanottajat.viranomaiset",
-  });
-
-  const getKuntanimi = (index: number, lang: Kieli) => {
-    const nimi = kuntametadata.nameForKuntaId(ilmoituksenVastaanottajat?.kunnat?.[index].id, lang);
-    if (!nimi) {
-      return;
-    }
-
-    return formatProperNoun(nimi);
-  };
-
-  if (!projekti) {
-    return <></>;
-  }
-  if (!kirjaamoOsoitteet) {
-    return <></>;
-  }
-
-  return (
-    <>
-      {julkinen && (
-        <Section>
-          <h4 className="vayla-small-title">Ilmoituksen vastaanottajat</h4>
-          <SectionContent>
-            <p>
-              Ilmoitukset on lähetetty eteenpäin alla oleville viranomaisille ja kunnille. Jos ilmoituksen tila on ‘Ei lähetetty’, tarkasta
-              sähköpostiosoite. Ota tarvittaessa yhteys pääkäyttäjään.
-            </p>
-          </SectionContent>
-          <SectionContent>
-            <div className="grid grid-cols-4 gap-x-6 mb-4">
-              <h6 className="font-bold">Viranomaiset</h6>
-              <p></p>
-              <p style={{ color: "#7A7A7A" }}>Ilmoituksen tila</p>
-              <p style={{ color: "#7A7A7A" }}>Lähetysaika</p>
-
-              {projekti.jatkoPaatos1Vaihe?.ilmoituksenVastaanottajat?.viranomaiset?.map((viranomainen, index) => (
-                <React.Fragment key={index}>
-                  <p className="odd:bg-white even:bg-grey col-span-2">
-                    {t(`viranomainen.${viranomainen.nimi}`)}, {viranomainen.sahkoposti}
-                  </p>
-                  <p className="odd:bg-white even:bg-grey">{viranomainen.lahetetty ? "Lähetetty" : "Ei lähetetty"}</p>
-                  <p className="odd:bg-white even:bg-grey">
-                    {viranomainen.lahetetty ? dayjs(viranomainen.lahetetty).format("DD.MM.YYYY HH:mm") : null}
-                  </p>
-                </React.Fragment>
-              ))}
-            </div>
-          </SectionContent>
-          <SectionContent>
-            <h6 className="font-bold">Kunnat</h6>
-            <div className="content grid grid-cols-4 mb-4">
-              <p className="vayla-table-header">Kunta</p>
-              <p className="vayla-table-header">Sähköpostiosoite</p>
-              <p className="vayla-table-header">Ilmoituksen tila</p>
-              <p className="vayla-table-header">Lähetysaika</p>
-              {projekti.jatkoPaatos1Vaihe?.ilmoituksenVastaanottajat?.kunnat?.map((kunta, index) => (
-                <Fragment key={index}>
-                  <p className={getStyleForRow(index)}>{kuntametadata.nameForKuntaId(kunta.id, kieli)}</p>
-                  <p className={getStyleForRow(index)}>{kunta.sahkoposti}</p>
-                  <p className={getStyleForRow(index)}>{kunta.lahetetty ? "Lahetetty" : "Ei lähetetty"}</p>
-                  <p className={getStyleForRow(index)}>{kunta.lahetetty ? dayjs(kunta.lahetetty).format("DD.MM.YYYY HH:mm") : null}</p>
-                </Fragment>
-              ))}
-            </div>
-          </SectionContent>
-        </Section>
-      )}
-      <div style={julkinen ? { display: "none" } : {}}>
-        <Section>
-          <h4 className="vayla-small-title">Ilmoituksen vastaanottajat</h4>
-          <SectionContent>
-            <p>
-              Kuulutuksesta lähetetään sähköpostitse tiedote viranomaiselle sekä projektia koskeville kunnille. Kunnat on haettu
-              Projektivelhosta. Jos tiedote pitää lähettää useammalle kuin yhdelle viranomaisorganisaatiolle, lisää uusi rivi Lisää uusi
-              -painikkeella.
-            </p>
-            <p>
-              Jos kuntatiedoissa on virhe tai kuntia puuttuu, tee korjaus Projektivelhoon ja päivitä järjesteltämästä{" "}
-              <Link underline="none" href={`/yllapito/projekti/${projekti.oid}`}>
-                Projektin tiedot
-              </Link>{" "}
-              -sivu.
-            </p>
-          </SectionContent>
-
-          <>
-            <SectionContent>
-              <h6 className="font-bold">Viranomaiset</h6>
-              {(errors.jatkoPaatos1Vaihe?.ilmoituksenVastaanottajat as HelperType)?.viranomaiset && (
-                <p className="text-red">{(errors.jatkoPaatos1Vaihe?.ilmoituksenVastaanottajat as HelperType).viranomaiset?.message}</p>
-              )}
-              {viranomaisFields.map((viranomainen, index) => (
-                <HassuGrid key={viranomainen.id} cols={{ lg: 3 }}>
-                  <Select
-                    label="Viranomainen *"
-                    options={kirjaamoOsoitteet?.map(({ nimi }) => ({
-                      label: nimi ? t(`viranomainen.${nimi}`) : "",
-                      value: nimi,
-                    }))}
-                    {...register(`jatkoPaatos1Vaihe.ilmoituksenVastaanottajat.viranomaiset.${index}.nimi`, {
-                      onChange: (event) => {
-                        const sahkoposti = kirjaamoOsoitteet?.find(({ nimi }) => nimi === event.target.value)?.sahkoposti;
-                        setValue(`jatkoPaatos1Vaihe.ilmoituksenVastaanottajat.viranomaiset.${index}.sahkoposti`, sahkoposti || "");
-                      },
-                    })}
-                    error={errors?.jatkoPaatos1Vaihe?.ilmoituksenVastaanottajat?.viranomaiset?.[index]?.nimi}
-                    addEmptyOption
-                  />
-                  <Controller
-                    control={control}
-                    name={`jatkoPaatos1Vaihe.ilmoituksenVastaanottajat.viranomaiset.${index}.sahkoposti`}
-                    render={({ field }) => (
-                      <>
-                        <TextInput label="Sähköpostiosoite *" value={field.value} disabled />
-                        <input type="hidden" {...field} />
-                      </>
-                    )}
-                  />
-                  {!!index && (
-                    <>
-                      <div className="hidden lg:block" style={{ alignSelf: "flex-end" }}>
-                        <IconButton
-                          icon="trash"
-                          onClick={(event) => {
-                            event.preventDefault();
-                            remove(index);
-                          }}
-                        />
-                      </div>
-                      <div className="block lg:hidden">
-                        <Button
-                          onClick={(event) => {
-                            event.preventDefault();
-                            remove(index);
-                          }}
-                          endIcon="trash"
-                        >
-                          Poista
-                        </Button>
-                      </div>
-                    </>
-                  )}
-                </HassuGrid>
-              ))}
-            </SectionContent>
-            <Button
-              type="button"
-              onClick={() => {
-                // @ts-ignore
-                append({ nimi: "", sahkoposti: "" });
-              }}
-            >
-              Lisää uusi +
-            </Button>
-          </>
-          <SectionContent>
-            <h6 className="font-bold">Kunnat</h6>
-
-            {kuntaFields.map((kunta, index) => (
-              <HassuGrid key={kunta.id} cols={{ lg: 3 }}>
-                <input type="hidden" {...register(`jatkoPaatos1Vaihe.ilmoituksenVastaanottajat.kunnat.${index}.id`)} readOnly />
-                <TextInput label="Kunta *" value={getKuntanimi(index, kieli)} disabled />
-                <TextInput
-                  label="Sähköpostiosoite *"
-                  error={errors?.jatkoPaatos1Vaihe?.ilmoituksenVastaanottajat?.kunnat?.[index]?.sahkoposti}
-                  {...register(`jatkoPaatos1Vaihe.ilmoituksenVastaanottajat.kunnat.${index}.sahkoposti`)}
-                />
-              </HassuGrid>
-            ))}
-          </SectionContent>
-        </Section>
-      </div>
-    </>
-  );
-}
-
-function getStyleForRow(index: number): string | undefined {
-  if (index % 2 == 0) {
-    return "vayla-table-even";
-  }
-  return "vayla-table-odd";
-}
diff --git a/src/components/projekti/jatkopaatos1/kuulutuksenTiedot/JatkoPaatos1KuulutusPainikkeet.tsx b/src/components/projekti/jatkopaatos1/kuulutuksenTiedot/JatkoPaatos1KuulutusPainikkeet.tsx
deleted file mode 100644
index f4eacd2a3..000000000
--- a/src/components/projekti/jatkopaatos1/kuulutuksenTiedot/JatkoPaatos1KuulutusPainikkeet.tsx
+++ /dev/null
@@ -1,205 +0,0 @@
-import Button from "@components/button/Button";
-import HassuSpinner from "@components/HassuSpinner";
-import Section from "@components/layout/Section";
-import { Stack } from "@mui/material";
-import { api, Status } from "@services/api";
-import log from "loglevel";
-import { useRouter } from "next/router";
-import React, { useState, useCallback, useRef, useEffect } from "react";
-import { useFormContext } from "react-hook-form";
-import { useProjekti } from "src/hooks/useProjekti";
-import useSnackbars from "src/hooks/useSnackbars";
-import { TilasiirtymaToiminto, TilasiirtymaTyyppi, HyvaksymisPaatosVaiheTila, Projekti } from "@services/api";
-import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
-import { KuulutuksenTiedotFormValues } from "./index";
-import Modaalit from "./Modaalit";
-import { projektiMeetsMinimumStatus } from "src/hooks/useIsOnAllowedProjektiRoute";
-
-type PalautusValues = {
-  syy: string;
-};
-interface Props {
-  projekti: ProjektiLisatiedolla;
-}
-
-export default function JatkoPaatos1KuulutusPainikkeet({ projekti }: Props) {
-  const { mutate: reloadProjekti } = useProjekti();
-  const [isFormSubmitting, setIsFormSubmitting] = useState(false);
-  const { showSuccessMessage, showErrorMessage } = useSnackbars();
-  const [open, setOpen] = useState<boolean>(false);
-  const [openHyvaksy, setOpenHyvaksy] = useState<boolean>(false);
-  const router = useRouter();
-
-  const mounted = useRef(false);
-
-  useEffect(() => {
-    mounted.current = true; // Will set it to true on mount ...
-    return () => {
-      mounted.current = false;
-    }; // ... and to false on unmount
-  }, []);
-
-  const { handleSubmit, reset } = useFormContext<KuulutuksenTiedotFormValues>();
-
-  const saveHyvaksymisPaatosVaihe = useCallback(
-    async (formData: KuulutuksenTiedotFormValues) => {
-      await api.tallennaProjekti(formData);
-      if (reloadProjekti) await reloadProjekti();
-      reset(formData);
-    },
-    [reloadProjekti, reset]
-  );
-
-  const saveDraft = useCallback(async (formData: KuulutuksenTiedotFormValues) => {
-    setIsFormSubmitting(true);
-    try {
-      await saveHyvaksymisPaatosVaihe(formData);
-      showSuccessMessage("Tallennus onnistui!");
-    } catch (e) {
-      log.error("OnSubmit Error", e);
-      showErrorMessage("Tallennuksessa tapahtui virhe");
-    }
-    if (mounted.current) {
-      setIsFormSubmitting(false);
-    }
-  }, [saveHyvaksymisPaatosVaihe, showErrorMessage, showSuccessMessage]);
-
-  const vaihdaJatkoPaatos1VaiheenTila = useCallback(
-    async (toiminto: TilasiirtymaToiminto, viesti: string, syy?: string) => {
-      if (!projekti) {
-        return;
-      }
-      setIsFormSubmitting(true);
-      try {
-        await api.siirraTila({ oid: projekti.oid, toiminto, syy, tyyppi: TilasiirtymaTyyppi.JATKOPAATOS_1 });
-        await reloadProjekti();
-        showSuccessMessage(`${viesti} onnistui`);
-      } catch (error) {
-        log.error(error);
-        showErrorMessage("Toiminnossa tapahtui virhe");
-      }
-      if (mounted.current) {
-        setIsFormSubmitting(false);
-        setOpen(false);
-        setOpenHyvaksy(false);
-      }
-    },
-    [setIsFormSubmitting, reloadProjekti, showSuccessMessage, showErrorMessage, setOpen, projekti]
-  );
-
-  const lahetaHyvaksyttavaksi = useCallback(
-    async (formData: KuulutuksenTiedotFormValues) => {
-      log.debug("tallenna tiedot ja lähetä hyväksyttäväksi");
-      setIsFormSubmitting(true);
-      try {
-        await saveHyvaksymisPaatosVaihe(formData);
-        await vaihdaJatkoPaatos1VaiheenTila(TilasiirtymaToiminto.LAHETA_HYVAKSYTTAVAKSI, "Lähetys");
-      } catch (error) {
-        log.error("Virhe hyväksyntään lähetyksessä", error);
-        showErrorMessage("Hyväksyntään lähetyksessä tapahtui virhe");
-      }
-      if (mounted.current) {
-        setIsFormSubmitting(false);
-      }
-    },
-    [setIsFormSubmitting, saveHyvaksymisPaatosVaihe, vaihdaJatkoPaatos1VaiheenTila, showErrorMessage]
-  );
-
-  const palautaMuokattavaksi = useCallback(
-    async (data: PalautusValues) => {
-      log.debug("palauta muokattavaksi: ", data);
-      await vaihdaJatkoPaatos1VaiheenTila(TilasiirtymaToiminto.HYLKAA, "Palautus", data.syy);
-    },
-    [vaihdaJatkoPaatos1VaiheenTila]
-  );
-
-  const palautaMuokattavaksiJaPoistu = useCallback(
-    async (data: PalautusValues) => {
-      log.debug("palauta muokattavaksi ja poistu: ", data);
-      await vaihdaJatkoPaatos1VaiheenTila(TilasiirtymaToiminto.HYLKAA, "Palautus", data.syy);
-      const siirtymaTimer = setTimeout(() => {
-        setIsFormSubmitting(true);
-        router.push(`/yllapito/projekti/${projekti?.oid}`);
-      }, 1000);
-      return () => {
-        setIsFormSubmitting(false);
-        clearTimeout(siirtymaTimer);
-      };
-    },
-    [vaihdaJatkoPaatos1VaiheenTila, setIsFormSubmitting, projekti, router]
-  );
-
-  const hyvaksyKuulutus = useCallback(async () => {
-    log.debug("hyväksy kuulutus");
-    await vaihdaJatkoPaatos1VaiheenTila(TilasiirtymaToiminto.HYVAKSY, "Hyväksyminen");
-  }, [vaihdaJatkoPaatos1VaiheenTila]);
-
-  const voiMuokata = !projekti?.jatkoPaatos1VaiheJulkaisut || projekti.jatkoPaatos1VaiheJulkaisut.length < 1;
-
-  const voiHyvaksya =
-    projekti.jatkoPaatos1VaiheJulkaisut &&
-    projekti.jatkoPaatos1VaiheJulkaisut.length &&
-    projekti.jatkoPaatos1VaiheJulkaisut[projekti.jatkoPaatos1VaiheJulkaisut.length - 1].tila ===
-      HyvaksymisPaatosVaiheTila.ODOTTAA_HYVAKSYNTAA &&
-    projekti?.nykyinenKayttaja.onProjektipaallikko;
-
-  return (
-    <>
-      {!!voiHyvaksya && (
-        <Section noDivider>
-          <Stack direction={["column", "column", "row"]} justifyContent={[undefined, undefined, "flex-end"]}>
-            <Button
-              id="button_reject"
-              onClick={(e) => {
-                e.preventDefault();
-                setOpen(true);
-              }}
-            >
-              Palauta
-            </Button>
-            <Button
-              id="button_open_acceptance_dialog"
-              primary
-              onClick={(e) => {
-                e.preventDefault();
-                setOpenHyvaksy(true);
-              }}
-            >
-              Hyväksy ja lähetä
-            </Button>
-          </Stack>
-        </Section>
-      )}
-      {!!voiMuokata && (
-        <>
-          <Section noDivider>
-            <Stack justifyContent={{ md: "flex-end" }} direction={{ xs: "column", md: "row" }}>
-              <Button id="save_jatkopaatos1vaihe_draft" onClick={handleSubmit(saveDraft)}>
-                Tallenna Luonnos
-              </Button>
-              <Button
-                id="save_and_send_for_acceptance"
-                primary
-                disabled={!projektiMeetsMinimumStatus(projekti, Status.HYVAKSYTTY)}
-                onClick={handleSubmit(lahetaHyvaksyttavaksi)}
-              >
-                Lähetä Hyväksyttäväksi
-              </Button>
-            </Stack>
-          </Section>
-          <HassuSpinner open={isFormSubmitting} />
-        </>
-      )}
-      <Modaalit
-        projekti={projekti as Projekti}
-        open={open}
-        openHyvaksy={openHyvaksy}
-        setOpen={setOpen}
-        setOpenHyvaksy={setOpenHyvaksy}
-        hyvaksyKuulutus={handleSubmit(hyvaksyKuulutus)}
-        palautaMuokattavaksiJaPoistu={palautaMuokattavaksiJaPoistu}
-        palautaMuokattavaksi={palautaMuokattavaksi}
-      />
-    </>
-  );
-}
diff --git a/src/components/projekti/jatkopaatos1/kuulutuksenTiedot/KuulutuksenJaIlmoituksenEsikatselu.tsx b/src/components/projekti/jatkopaatos1/kuulutuksenTiedot/KuulutuksenJaIlmoituksenEsikatselu.tsx
deleted file mode 100644
index 0834774a5..000000000
--- a/src/components/projekti/jatkopaatos1/kuulutuksenTiedot/KuulutuksenJaIlmoituksenEsikatselu.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import React from "react";
-import Section from "@components/layout/Section";
-import { Kieli, AsiakirjaTyyppi } from "@services/api";
-import Notification, { NotificationType } from "@components/notification/Notification";
-import lowerCase from "lodash/lowerCase";
-import Button from "@components/button/Button";
-import { Box } from "@mui/material";
-import { useProjekti } from "src/hooks/useProjekti";
-import { KuulutuksenTiedotFormValues } from "./index";
-import { useFormContext } from "react-hook-form";
-
-type Props = {
-  esikatselePdf: (formData: KuulutuksenTiedotFormValues, asiakirjaTyyppi: AsiakirjaTyyppi, kieli: Kieli) => void;
-};
-
-export default function KuulutuksenJaIlmoituksenEsikatselu({ esikatselePdf }: Props) {
-  const { data: projekti } = useProjekti();
-
-  const { handleSubmit } = useFormContext<KuulutuksenTiedotFormValues>();
-
-  const ensisijainenKieli = projekti?.kielitiedot?.ensisijainenKieli;
-  const toissijainenKieli = projekti?.kielitiedot?.toissijainenKieli;
-
-  if (!projekti) {
-    return null;
-  }
-
-  return (
-    <Section>
-      <h4 className="vayla-small-title">Kuulutuksen ja ilmoituksen esikatselu</h4>
-      <Notification type={NotificationType.INFO_GRAY}>Esikatsele kuulutus ja ilmoitus ennen hyväksyntään lähettämistä. </Notification>
-      <div style={{ marginTop: "4em" }}>
-        {ensisijainenKieli && (
-          <div>
-            <p className="mb-10">Esikatsele tiedostot ensisijaisella kielellä ({lowerCase(ensisijainenKieli)})</p>
-            <Box sx={{ flexDirection: "row-reverse" }}>
-              <Button
-                style={{ display: "inline", marginBottom: "2em", marginRight: "2em" }}
-                id={"preview_kuulutus_pdf_" + ensisijainenKieli}
-                type="submit"
-                onClick={handleSubmit((formData) => {
-                  console.log(formData);
-                  esikatselePdf(formData, AsiakirjaTyyppi.HYVAKSYMISPAATOSKUULUTUS, ensisijainenKieli);
-                })}
-              >
-                Kuulutuksen esikatselu
-              </Button>
-              <Button
-                style={{ display: "inline", marginBottom: "2em", marginRight: "2em" }}
-                id={"preview_ilmoitus_kunnille_pdf_" + ensisijainenKieli}
-                type="button"
-                onClick={handleSubmit((formData) =>
-                  esikatselePdf(formData, AsiakirjaTyyppi.ILMOITUS_HYVAKSYMISPAATOSKUULUTUKSESTA_KUNNILLE, ensisijainenKieli)
-                )}
-              >
-                Ilmoitus kunnille esikatselu
-              </Button>
-              <Button
-                style={{ display: "inline", marginBottom: "2em", marginRight: "2em" }}
-                id={"preview_ilmoitus_toiselle_viranomaiselle_pdf_" + ensisijainenKieli}
-                type="button"
-                onClick={handleSubmit((formData) =>
-                  esikatselePdf(formData, AsiakirjaTyyppi.ILMOITUS_HYVAKSYMISPAATOSKUULUTUKSESTA_TOISELLE_VIRANOMAISELLE, ensisijainenKieli)
-                )}
-              >
-                Lähetekirjeen esikatselu
-              </Button>
-              <Button
-                disabled
-                style={{ display: "inline", marginBottom: "2em", marginRight: "2em" }}
-                id={"preview_ilmoitus_toiselle_viranomaiselle_pdf_" + toissijainenKieli}
-                type="button"
-                onClick={handleSubmit((formData) =>
-                  esikatselePdf(formData, AsiakirjaTyyppi.ILMOITUS_HYVAKSYMISPAATOSKUULUTUKSESTA_KUNNILLE, ensisijainenKieli)
-                )}
-              >
-                Ilmoitus maakuntaliitoille esikatselu
-              </Button>
-            </Box>
-          </div>
-        )}
-        {toissijainenKieli && (
-          <div>
-            <p className="mb-10">Esikatsele tiedostot toissijaisella kielellä ({lowerCase(toissijainenKieli)})</p>
-            <Box sx={{ flexDirection: "row-reverse" }}>
-              <Button
-                style={{ display: "inline", marginBottom: "2em", marginRight: "2em" }}
-                id={"preview_kuulutus_pdf_" + toissijainenKieli}
-                type="button"
-                onClick={handleSubmit((formData) => esikatselePdf(formData, AsiakirjaTyyppi.HYVAKSYMISPAATOSKUULUTUS, toissijainenKieli))}
-              >
-                Kuulutuksen esikatselu
-              </Button>
-              <Button
-                style={{ display: "inline", marginBottom: "2em", marginRight: "2em" }}
-                id={"preview_ilmoitus_kunnille_pdf_" + toissijainenKieli}
-                type="button"
-                onClick={handleSubmit((formData) =>
-                  esikatselePdf(formData, AsiakirjaTyyppi.ILMOITUS_HYVAKSYMISPAATOSKUULUTUKSESTA_KUNNILLE, toissijainenKieli)
-                )}
-              >
-                Ilmoitus kunnille esikatselu
-              </Button>
-              <Button
-                style={{ display: "inline", marginBottom: "2em", marginRight: "2em" }}
-                id={"preview_ilmoitus_toiselle_viranomaiselle_pdf_" + toissijainenKieli}
-                type="button"
-                onClick={handleSubmit((formData) =>
-                  esikatselePdf(formData, AsiakirjaTyyppi.ILMOITUS_HYVAKSYMISPAATOSKUULUTUKSESTA_TOISELLE_VIRANOMAISELLE, toissijainenKieli)
-                )}
-              >
-                Lähetekirjeen esikatselu
-              </Button>
-              <Button
-                disabled
-                style={{ display: "inline", marginBottom: "2em", marginRight: "2em" }}
-                id={"preview_ilmoitus_toiselle_viranomaiselle_pdf_" + toissijainenKieli}
-                type="button"
-                onClick={handleSubmit((formData) =>
-                  esikatselePdf(formData, AsiakirjaTyyppi.ILMOITUS_HYVAKSYMISPAATOSKUULUTUKSESTA_KUNNILLE, toissijainenKieli)
-                )}
-              >
-                Ilmoitus maakuntaliitoille esikatselu
-              </Button>
-            </Box>
-          </div>
-        )}
-      </div>
-    </Section>
-  );
-}
diff --git a/src/components/projekti/jatkopaatos1/kuulutuksenTiedot/KuulutuksessaEsitettavatYhteystiedot.tsx b/src/components/projekti/jatkopaatos1/kuulutuksenTiedot/KuulutuksessaEsitettavatYhteystiedot.tsx
deleted file mode 100644
index bf75f43ba..000000000
--- a/src/components/projekti/jatkopaatos1/kuulutuksenTiedot/KuulutuksessaEsitettavatYhteystiedot.tsx
+++ /dev/null
@@ -1,205 +0,0 @@
-import { Controller, useFieldArray, useFormContext } from "react-hook-form";
-import SectionContent from "@components/layout/SectionContent";
-import { HyvaksymisPaatosVaiheTila, KayttajaTyyppi, Projekti, ProjektiKayttaja, YhteystietoInput } from "@services/api";
-import Section from "@components/layout/Section";
-import { Fragment, ReactElement } from "react";
-import Button from "@components/button/Button";
-import HassuStack from "@components/layout/HassuStack";
-import CheckBox from "@components/form/CheckBox";
-import FormGroup from "@components/form/FormGroup";
-import TextInput from "@components/form/TextInput";
-import HassuGrid from "@components/HassuGrid";
-import { maxPhoneLength } from "src/schemas/puhelinNumero";
-import IconButton from "@components/button/IconButton";
-import replace from "lodash/replace";
-import { useProjekti } from "src/hooks/useProjekti";
-import { KuulutuksenTiedotFormValues } from "./index";
-import { formatNimi } from "../../../../util/userUtil";
-
-const defaultYhteystieto: YhteystietoInput = {
-  etunimi: "",
-  sukunimi: "",
-  organisaatio: "",
-  puhelinnumero: "",
-  sahkoposti: "",
-};
-
-interface Props {}
-
-export function hasHyvaksyttyJatkoPaatos1VaiheJulkaisu(projekti: Projekti | null | undefined) {
-  return (
-    (projekti?.jatkoPaatos1VaiheJulkaisut?.filter((julkaisu) => julkaisu.tila == HyvaksymisPaatosVaiheTila.HYVAKSYTTY) || []).length > 0
-  );
-}
-
-export default function EsitettavatYhteystiedot({}: Props): ReactElement {
-  const { data: projekti } = useProjekti();
-
-  const eiVoiMuokata = hasHyvaksyttyJatkoPaatos1VaiheJulkaisu(projekti);
-
-  const {
-    register,
-    formState: { errors },
-    control,
-  } = useFormContext<KuulutuksenTiedotFormValues>();
-
-  const { fields, append, remove } = useFieldArray({
-    control,
-    name: "jatkoPaatos1Vaihe.kuulutusYhteystiedot.yhteysTiedot",
-  });
-
-  const kuulutusYhteysHenkilot: ProjektiKayttaja[] = projekti?.jatkoPaatos1Vaihe?.kuulutusYhteystiedot?.yhteysHenkilot
-    ? projekti.jatkoPaatos1Vaihe?.kuulutusYhteystiedot?.yhteysHenkilot
-        .map((hlo) => {
-          const yhteysHenkiloTietoineen: ProjektiKayttaja | undefined = (projekti?.kayttoOikeudet || []).find(
-            (ko) => ko.kayttajatunnus === hlo
-          );
-          if (!yhteysHenkiloTietoineen) {
-            return {} as ProjektiKayttaja;
-          }
-          return yhteysHenkiloTietoineen as ProjektiKayttaja;
-        })
-        .filter((pk) => pk.etunimi && pk.sukunimi)
-    : ([] as ProjektiKayttaja[]);
-
-  if (eiVoiMuokata) {
-    return (
-      <Section>
-        <SectionContent>
-          <p className="vayla-label mb-5">Vuorovaikuttamisen yhteyshenkilöt</p>
-          {projekti?.jatkoPaatos1Vaihe?.kuulutusYhteystiedot?.yhteysTiedot?.map((yhteystieto, index) => (
-            <p style={{ margin: 0 }} key={index}>
-              {formatNimi(yhteystieto)}, puh. {yhteystieto.puhelinnumero},{" "}
-              {yhteystieto?.sahkoposti ? replace(yhteystieto?.sahkoposti, "@", "[at]") : ""} ({yhteystieto.organisaatio})
-            </p>
-          ))}
-          {kuulutusYhteysHenkilot.map((yhteystieto, index) => (
-            <p style={{ margin: 0 }} key={index}>
-              {formatNimi(yhteystieto)}, puh. {yhteystieto.puhelinnumero},{" "}
-              {yhteystieto.email ? replace(yhteystieto.email, "@", "[at]") : ""} ({yhteystieto.organisaatio})
-            </p>
-          ))}
-        </SectionContent>
-      </Section>
-    );
-  }
-
-  return (
-    <Section>
-      <SectionContent>
-        <h4 className="vayla-small-title">Kuulutuksessa esitettävät yhteystiedot</h4>
-        <p>
-          Voit valita kutsussa esitettäviin yhteystietoihin projektiin tallennetun henkilön tai lisätä uuden yhteystiedon. Projektipäällikön
-          tiedot esitetään aina. Projektiin tallennettujen henkilöiden yhteystiedot haetaan Projektin henkilöt -sivulle tallennetuista
-          tiedoista.
-        </p>
-        {projekti?.kayttoOikeudet && projekti.kayttoOikeudet.length > 0 ? (
-          <Controller
-            control={control}
-            name={`jatkoPaatos1Vaihe.kuulutusYhteystiedot.yhteysHenkilot`}
-            render={({ field: { onChange, value, ...field } }) => (
-              <FormGroup label="Projektiin tallennetut henkilöt" inlineFlex>
-                {projekti.kayttoOikeudet?.map(({ etunimi, sukunimi, tyyppi, kayttajatunnus }, index) => {
-                  const tunnuslista: string[] = value || [];
-                  const nimi = formatNimi({ sukunimi, etunimi });
-                  return (
-                    <Fragment key={index}>
-                      {tyyppi === KayttajaTyyppi.PROJEKTIPAALLIKKO ? (
-                        <CheckBox label={nimi} disabled checked {...field} />
-                      ) : (
-                        <CheckBox
-                          label={nimi}
-                          onChange={(event) => {
-                            if (!event.target.checked) {
-                              onChange(tunnuslista.filter((tunnus) => tunnus !== kayttajatunnus));
-                            } else {
-                              onChange([...tunnuslista, kayttajatunnus]);
-                            }
-                          }}
-                          checked={tunnuslista.includes(kayttajatunnus)}
-                          {...field}
-                        />
-                      )}
-                    </Fragment>
-                  );
-                })}
-              </FormGroup>
-            )}
-          />
-        ) : (
-          <p>Projektilla ei ole tallennettuja henkilöitä</p>
-        )}
-      </SectionContent>
-      <SectionContent>
-        <p>Uusi yhteystieto</p>
-        <p>
-          Lisää uudelle yhteystiedolle rivi Lisää uusi-painikkeella. Huomioi, että uusi yhteystieto ei tallennu Projektin henkilöt -sivulle
-          eikä henkilölle tule käyttöoikeuksia projektiin.
-        </p>
-      </SectionContent>
-      {fields.map((field, index) => (
-        <HassuStack key={field.id} direction={["column", "column", "row"]}>
-          <HassuGrid sx={{ width: "100%" }} cols={[1, 1, 3]}>
-            <TextInput
-              label="Etunimi *"
-              {...register(`jatkoPaatos1Vaihe.kuulutusYhteystiedot.yhteysTiedot.${index}.etunimi`)}
-              error={(errors as any).jatkoPaatos1Vaihe?.kuulutusYhteystiedot?.[index]?.etunimi}
-            />
-            <TextInput
-              label="Sukunimi *"
-              {...register(`jatkoPaatos1Vaihe.kuulutusYhteystiedot.yhteysTiedot.${index}.sukunimi`)}
-              error={(errors as any).jatkoPaatos1Vaihe?.kuulutusYhteystiedot?.[index]?.sukunimi}
-            />
-            <TextInput
-              label="Organisaatio / kunta *"
-              {...register(`jatkoPaatos1Vaihe.kuulutusYhteystiedot.yhteysTiedot.${index}.organisaatio`)}
-              error={(errors as any).jatkoPaatos1Vaihe?.kuulutusYhteystiedot?.[index]?.organisaatio}
-            />
-            <TextInput
-              label="Puhelinnumero *"
-              {...register(`jatkoPaatos1Vaihe.kuulutusYhteystiedot.yhteysTiedot.${index}.puhelinnumero`)}
-              error={(errors as any).jatkoPaatos1Vaihe?.kuulutusYhteystiedot?.[index]?.puhelinnumero}
-              maxLength={maxPhoneLength}
-            />
-            <TextInput
-              label="Sähköpostiosoite *"
-              {...register(`jatkoPaatos1Vaihe.kuulutusYhteystiedot.yhteysTiedot.${index}.sahkoposti`)}
-              error={(errors as any).jatkoPaatos1Vaihe?.kuulutusYhteystiedot?.[index]?.sahkoposti}
-            />
-          </HassuGrid>
-
-          <div>
-            <div className="hidden lg:block lg:mt-8">
-              <IconButton
-                icon="trash"
-                onClick={(event) => {
-                  event.preventDefault();
-                  remove(index);
-                }}
-              />
-            </div>
-            <div className="block lg:hidden">
-              <Button
-                onClick={(event) => {
-                  event.preventDefault();
-                  remove(index);
-                }}
-                endIcon="trash"
-              >
-                Poista
-              </Button>
-            </div>
-          </div>
-        </HassuStack>
-      ))}
-      <Button
-        onClick={(event) => {
-          event.preventDefault();
-          append(defaultYhteystieto);
-        }}
-      >
-        Lisää uusi +
-      </Button>
-    </Section>
-  );
-}
diff --git a/src/components/projekti/jatkopaatos1/kuulutuksenTiedot/KuulutusJaJulkaisuPaiva.tsx b/src/components/projekti/jatkopaatos1/kuulutuksenTiedot/KuulutusJaJulkaisuPaiva.tsx
deleted file mode 100644
index dae42bd72..000000000
--- a/src/components/projekti/jatkopaatos1/kuulutuksenTiedot/KuulutusJaJulkaisuPaiva.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import Section from "@components/layout/Section";
-import SectionContent from "@components/layout/SectionContent";
-import React, { useCallback } from "react";
-import { useFormContext } from "react-hook-form";
-import dayjs from "dayjs";
-import log from "loglevel";
-import { api, LaskuriTyyppi } from "@services/api";
-import useSnackbars from "src/hooks/useSnackbars";
-import HassuGrid from "@components/HassuGrid";
-import { HassuDatePickerWithController } from "@components/form/HassuDatePicker";
-
-type Props = {};
-
-type FormFields = {
-  jatkoPaatos1Vaihe: {
-    kuulutusPaiva: string | null;
-    kuulutusVaihePaattyyPaiva: string | null;
-  };
-};
-
-export default function KuulutusJaJulkaisuPaiva({}: Props) {
-  const { setValue } = useFormContext<FormFields>();
-
-  const { showErrorMessage } = useSnackbars();
-
-  const getPaattymispaiva = useCallback(
-    async (value: string) => {
-      try {
-        const paattymispaiva = await api.laskePaattymisPaiva(value, LaskuriTyyppi.HYVAKSYMISPAATOKSEN_KUULUTUSAIKA);
-        setValue("jatkoPaatos1Vaihe.kuulutusVaihePaattyyPaiva", paattymispaiva);
-      } catch (error) {
-        showErrorMessage("Kuulutuksen päättymispäivän laskennassa tapahtui virhe");
-        log.error("Kuulutusvaiheen päättymispäivän laskennassa virhe", error);
-      }
-    },
-    [setValue, showErrorMessage]
-  );
-
-  return (
-    <Section noDivider>
-      <SectionContent>
-        <h4 className="vayla-small-title">Kuulutus ja julkaisupäivä</h4>
-        <p>Anna päivämäärä, jolle kuulutus päivätään ja julkaistaan palvelun julkisella puolella.</p>
-        <HassuGrid cols={{ lg: 3 }}>
-          <HassuDatePickerWithController
-            label="Kuulutuspäivä"
-            minDate={dayjs().startOf("day")}
-            onChange={(date) => {
-              if (date?.isValid()) {
-                getPaattymispaiva(date.format("YYYY-MM-DD"));
-              }
-            }}
-            textFieldProps={{ required: true }}
-            controllerProps={{
-              name: "jatkoPaatos1Vaihe.kuulutusPaiva",
-            }}
-          />
-          <HassuDatePickerWithController
-            controllerProps={{ name: "jatkoPaatos1Vaihe.kuulutusVaihePaattyyPaiva" }}
-            label="Kuulutusvaihe päättyy"
-            disabled
-          />
-        </HassuGrid>
-      </SectionContent>
-    </Section>
-  );
-}
diff --git a/src/components/projekti/jatkopaatos1/kuulutuksenTiedot/Lukunakyma.tsx b/src/components/projekti/jatkopaatos1/kuulutuksenTiedot/Lukunakyma.tsx
deleted file mode 100644
index d976c776e..000000000
--- a/src/components/projekti/jatkopaatos1/kuulutuksenTiedot/Lukunakyma.tsx
+++ /dev/null
@@ -1,222 +0,0 @@
-import { HyvaksymisPaatosVaiheJulkaisu, Kieli } from "@services/api";
-import React, { ReactElement } from "react";
-import replace from "lodash/replace";
-import { examineKuulutusPaiva } from "src/util/aloitusKuulutusUtil";
-import FormatDate from "@components/FormatDate";
-import Section from "@components/layout/Section";
-import SectionContent from "@components/layout/SectionContent";
-import ExtLink from "@components/ExtLink";
-import useTranslation from "next-translate/useTranslation";
-import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
-import { splitFilePath } from "../../../../util/fileUtil";
-import { Link } from "@mui/material";
-import lowerCase from "lodash/lowerCase";
-import IlmoituksenVastaanottajatLukutila from "../../common/IlmoituksenVastaanottajatLukutila";
-import ButtonFlatWithIcon from "@components/button/ButtonFlat";
-import { ProjektiTestCommand } from "../../../../../common/testUtil.dev";
-import { formatDate } from "src/util/dateUtils";
-import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
-import { formatNimi } from "../../../../util/userUtil";
-
-interface Props {
-  jatkoPaatos1VaiheJulkaisu?: HyvaksymisPaatosVaiheJulkaisu | null;
-  projekti: ProjektiLisatiedolla;
-}
-
-export default function HyvaksymisKuulutusLukunakyma({ jatkoPaatos1VaiheJulkaisu, projekti }: Props): ReactElement {
-  const { t } = useTranslation("common");
-  const getPdft = (kieli: Kieli | undefined | null) => {
-    if (!jatkoPaatos1VaiheJulkaisu || !jatkoPaatos1VaiheJulkaisu.hyvaksymisPaatosVaihePDFt || !kieli) {
-      return undefined;
-    }
-    return jatkoPaatos1VaiheJulkaisu?.hyvaksymisPaatosVaihePDFt[kieli];
-  };
-  const ensisijaisetPDFt = getPdft(jatkoPaatos1VaiheJulkaisu?.kielitiedot?.ensisijainenKieli);
-  const toissijaisetPDFt = getPdft(jatkoPaatos1VaiheJulkaisu?.kielitiedot?.toissijainenKieli);
-
-  if (!jatkoPaatos1VaiheJulkaisu || !projekti) {
-    return <></>;
-  }
-
-  const epaaktiivinen = projektiOnEpaaktiivinen(projekti);
-
-  let { kuulutusPaiva, published } = examineKuulutusPaiva(jatkoPaatos1VaiheJulkaisu.kuulutusPaiva);
-  let hyvaksymisPaatosVaiheHref: string | undefined;
-  if (published) {
-    hyvaksymisPaatosVaiheHref = window.location.protocol + "//" + window.location.host + "/suunnitelma/" + projekti.oid + "/jatkaminen1";
-  }
-
-  return (
-    <>
-      <Section>
-        <div className="grid grid-cols-1 md:grid-cols-4">
-          <p className="vayla-label md:col-span-1">Kuulutuspäivä</p>
-          <p className="vayla-label md:col-span-3">Kuulutusvaihe päättyy</p>
-          <p className="md:col-span-1 mb-0">{kuulutusPaiva}</p>
-          <p className="md:col-span-1 mb-0">
-            <FormatDate date={jatkoPaatos1VaiheJulkaisu.kuulutusVaihePaattyyPaiva} />
-          </p>
-          {process.env.ENVIRONMENT != "prod" && (
-            <div className="md:col-span-2 mb-0">
-              <ButtonFlatWithIcon
-                icon="history"
-                onClick={(e) => {
-                  e.preventDefault();
-                  window.location.assign(ProjektiTestCommand.oid(projekti.oid).jatkopaatos1Menneisyyteen());
-                }}
-              >
-                Siirrä päivän verran menneisyyteen (TESTAAJILLE)
-              </ButtonFlatWithIcon>
-              <ButtonFlatWithIcon
-                icon="history"
-                onClick={(e) => {
-                  e.preventDefault();
-                  window.location.assign(ProjektiTestCommand.oid(projekti.oid).jatkopaatos1VuosiMenneisyyteen());
-                }}
-              >
-                Siirrä vuoden verran menneisyyteen (TESTAAJILLE)
-              </ButtonFlatWithIcon>
-            </div>
-          )}
-        </div>
-        <div className="grid grid-cols-1 md:grid-cols-4">
-          <p className="vayla-label md:col-span-1">Päätöksen päivä</p>
-          <p className="vayla-label md:col-span-3">Päätöksen asianumero</p>
-          <p className="md:col-span-1 mb-0">
-            <FormatDate date={projekti.kasittelynTila?.hyvaksymispaatos?.paatoksenPvm} />
-          </p>
-          <p className="md:col-span-3 mb-0">{projekti.kasittelynTila?.hyvaksymispaatos?.asianumero}</p>
-        </div>
-        <p>Päätös ja sen liitteet löytyvät Päätös ja sen liitteenä oleva aineisto -välilehdeltä.</p>
-      </Section>
-      <Section>
-        <h4 className="vayla-label">Muutoksenhaku</h4>
-        <p>
-          Päätökseen voi valittamalla hakea muutosta {t(`hallinto-oikeus-ablatiivi.${jatkoPaatos1VaiheJulkaisu.hallintoOikeus}`)} 30 päivän
-          kuluessa päätöksen tiedoksiannosta. Valitusosoituksen tiedosto löytyy Päätös ja sen liitteenä oleva aineisto -välilehdeltä.
-        </p>
-      </Section>
-      <Section>
-        <SectionContent>
-          <p className="vayla-label">Kuulutuksen yhteyshenkilöt</p>
-          <p></p>
-          {jatkoPaatos1VaiheJulkaisu.yhteystiedot?.map((yhteystieto, index) => (
-            <p style={{ margin: 0 }} key={index}>
-              {formatNimi(yhteystieto)}, puh. {yhteystieto.puhelinnumero},{" "}
-              {yhteystieto?.sahkoposti ? replace(yhteystieto?.sahkoposti, "@", "[at]") : ""} ({yhteystieto.organisaatio})
-            </p>
-          ))}
-        </SectionContent>
-        {epaaktiivinen ? (
-          <SectionContent>
-            <p className="vayla-label">Kuulutus julkisella puolella</p>
-            <p>
-              Kuulutus on ollut nähtävillä julkisella puolella {formatDate(jatkoPaatos1VaiheJulkaisu.kuulutusPaiva)}—
-              {formatDate(jatkoPaatos1VaiheJulkaisu.kuulutusVaihePaattyyPaiva)} välisen ajan.
-            </p>
-          </SectionContent>
-        ) : (
-          <SectionContent>
-            <p className="vayla-label">Kuulutus julkisella puolella</p>
-            {!published && <p>Linkki julkiselle puolelle muodostetaan kuulutuspäivänä. Kuulutuspäivä on {kuulutusPaiva}.</p>}
-            {published && (
-              <p>
-                <ExtLink href={hyvaksymisPaatosVaiheHref}>Kuulutus palvelun julkisella puolella</ExtLink>
-              </p>
-            )}
-          </SectionContent>
-        )}
-        {epaaktiivinen ? (
-          <SectionContent>
-            <p className="vayla-label">Ladattavat kuulutukset ja julkaisut</p>
-            <p>Kuulutukset löytyvät asianhallinnasta.</p>
-          </SectionContent>
-        ) : (
-          <SectionContent>
-            <p className="vayla-label">Ladattavat kuulutukset ja ilmoitukset</p>
-            <p>Kuulutus ja ilmoitus ensisijaisella kielellä ({lowerCase(jatkoPaatos1VaiheJulkaisu.kielitiedot?.ensisijainenKieli)})</p>
-            {ensisijaisetPDFt && (
-              <div className="flex flex-col mb-4">
-                <div>
-                  <Link underline="none" href={ensisijaisetPDFt.hyvaksymisKuulutusPDFPath} target="_blank">
-                    {splitFilePath(ensisijaisetPDFt.hyvaksymisKuulutusPDFPath).fileName}
-                  </Link>
-                </div>
-                <div>
-                  <Link underline="none" href={ensisijaisetPDFt.ilmoitusHyvaksymispaatoskuulutuksestaKunnillePDFPath} target="_blank">
-                    {splitFilePath(ensisijaisetPDFt.ilmoitusHyvaksymispaatoskuulutuksestaKunnillePDFPath).fileName}
-                  </Link>
-                </div>
-                <div>
-                  <Link
-                    underline="none"
-                    href={ensisijaisetPDFt.ilmoitusHyvaksymispaatoskuulutuksestaToiselleViranomaisellePDFPath}
-                    target="_blank"
-                  >
-                    {splitFilePath(ensisijaisetPDFt.ilmoitusHyvaksymispaatoskuulutuksestaToiselleViranomaisellePDFPath).fileName}
-                  </Link>
-                </div>
-                <div>
-                  <Link underline="none" href={ensisijaisetPDFt.hyvaksymisIlmoitusLausunnonantajillePDFPath} target="_blank">
-                    {splitFilePath(ensisijaisetPDFt.hyvaksymisIlmoitusLausunnonantajillePDFPath).fileName}
-                  </Link>
-                </div>
-                <div>
-                  <Link underline="none" href={ensisijaisetPDFt.hyvaksymisIlmoitusMuistuttajillePDFPath} target="_blank">
-                    {splitFilePath(ensisijaisetPDFt.hyvaksymisIlmoitusMuistuttajillePDFPath).fileName}
-                  </Link>
-                </div>
-              </div>
-            )}
-
-            {jatkoPaatos1VaiheJulkaisu.kielitiedot?.toissijainenKieli && (
-              <div className="content mb-4">
-                <p>Kuulutus ja ilmoitus toissijaisella kielellä ({lowerCase(jatkoPaatos1VaiheJulkaisu.kielitiedot?.toissijainenKieli)})</p>
-                {toissijaisetPDFt && (
-                  <div className="flex flex-col">
-                    <div>
-                      <Link underline="none" href={toissijaisetPDFt.hyvaksymisKuulutusPDFPath} target="_blank">
-                        {splitFilePath(toissijaisetPDFt.hyvaksymisKuulutusPDFPath).fileName}
-                      </Link>
-                    </div>
-                    <div>
-                      <Link underline="none" href={toissijaisetPDFt.ilmoitusHyvaksymispaatoskuulutuksestaKunnillePDFPath} target="_blank">
-                        {splitFilePath(toissijaisetPDFt.ilmoitusHyvaksymispaatoskuulutuksestaKunnillePDFPath).fileName}
-                      </Link>
-                    </div>
-                    <div>
-                      <Link
-                        underline="none"
-                        href={toissijaisetPDFt.ilmoitusHyvaksymispaatoskuulutuksestaToiselleViranomaisellePDFPath}
-                        target="_blank"
-                      >
-                        {splitFilePath(toissijaisetPDFt.ilmoitusHyvaksymispaatoskuulutuksestaToiselleViranomaisellePDFPath).fileName}
-                      </Link>
-                    </div>
-                    <div>
-                      <Link underline="none" href={toissijaisetPDFt.hyvaksymisIlmoitusLausunnonantajillePDFPath} target="_blank">
-                        {splitFilePath(toissijaisetPDFt.hyvaksymisIlmoitusLausunnonantajillePDFPath).fileName}
-                      </Link>
-                    </div>
-                    <div>
-                      <Link underline="none" href={toissijaisetPDFt.hyvaksymisIlmoitusMuistuttajillePDFPath} target="_blank">
-                        {splitFilePath(toissijaisetPDFt.hyvaksymisIlmoitusMuistuttajillePDFPath).fileName}
-                      </Link>
-                    </div>
-                  </div>
-                )}
-              </div>
-            )}
-          </SectionContent>
-        )}
-      </Section>
-      <Section>
-        <IlmoituksenVastaanottajatLukutila
-          ilmoituksenVastaanottajat={jatkoPaatos1VaiheJulkaisu.ilmoituksenVastaanottajat}
-          julkaisunTila={jatkoPaatos1VaiheJulkaisu.tila}
-          epaaktiivinen={epaaktiivinen}
-        />
-      </Section>
-    </>
-  );
-}
diff --git a/src/components/projekti/jatkopaatos1/kuulutuksenTiedot/Modaalit.tsx b/src/components/projekti/jatkopaatos1/kuulutuksenTiedot/Modaalit.tsx
deleted file mode 100644
index e1745536c..000000000
--- a/src/components/projekti/jatkopaatos1/kuulutuksenTiedot/Modaalit.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-import Textarea from "@components/form/Textarea";
-import React from "react";
-import Button from "@components/button/Button";
-import { DialogActions, DialogContent } from "@mui/material";
-import HassuDialog from "@components/HassuDialog";
-import HassuStack from "@components/layout/HassuStack";
-import { useForm } from "react-hook-form";
-import { Projekti } from "@services/api";
-import useTranslation from "next-translate/useTranslation";
-import { kuntametadata } from "common/kuntametadata";
-import useKansalaiskieli from "src/hooks/useKansalaiskieli";
-
-type PalautusValues = {
-  syy: string;
-};
-
-interface Props {
-  projekti: Projekti;
-  open: boolean;
-  openHyvaksy: boolean;
-  setOpen: (a: boolean) => void;
-  setOpenHyvaksy: (a: boolean) => void;
-  hyvaksyKuulutus: () => void;
-  palautaMuokattavaksiJaPoistu: (data: PalautusValues) => Promise<() => void>;
-  palautaMuokattavaksi: (data: PalautusValues) => Promise<void>;
-}
-
-export default function NahtavillaoloPainikkeet({
-  projekti,
-  open,
-  openHyvaksy,
-  setOpen,
-  setOpenHyvaksy,
-  hyvaksyKuulutus,
-  palautaMuokattavaksiJaPoistu,
-  palautaMuokattavaksi,
-}: Props) {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<PalautusValues>({ defaultValues: { syy: "" } });
-
-  const { t } = useTranslation("commonFI");
-
-  const kieli = useKansalaiskieli();
-
-  return (
-    <>
-      <div>
-        <HassuDialog open={open} title="Kuulutuksen palauttaminen" onClose={() => setOpen(false)}>
-          <form>
-            <HassuStack>
-              <p>
-                Olet palauttamassa kuulutuksen korjattavaksi. Kuulutuksen tekijä saa tiedon palautuksesta ja sen syystä. Saat ilmoituksen,
-                kun kuulutus on taas valmis hyväksyttäväksi. Jos haluat itse muokata kuulutusta ja hyväksyä tehtyjen muutoksien jälkeen,
-                valitse Palauta ja muokkaa.
-              </p>
-              <Textarea
-                label="Syy palautukselle *"
-                {...register("syy", { required: "Palautuksen syy täytyy antaa" })}
-                error={errors.syy}
-                maxLength={200}
-                hideLengthCounter={false}
-              ></Textarea>
-            </HassuStack>
-            <HassuStack direction={["column", "column", "row"]} justifyContent={[undefined, undefined, "flex-end"]} paddingTop={"1rem"}>
-              <Button primary onClick={handleSubmit(palautaMuokattavaksiJaPoistu)}>
-                Palauta ja poistu
-              </Button>
-              <Button id="reject_and_edit" onClick={handleSubmit(palautaMuokattavaksi)}>
-                Palauta ja muokkaa
-              </Button>
-              <Button
-                onClick={(e) => {
-                  setOpen(false);
-                  e.preventDefault();
-                }}
-              >
-                Peruuta
-              </Button>
-            </HassuStack>
-          </form>
-        </HassuDialog>
-      </div>
-      <div>
-        <HassuDialog
-          title="Kuulutuksen hyväksyminen ja ilmoituksen lähettäminen"
-          hideCloseButton
-          open={openHyvaksy}
-          onClose={() => setOpenHyvaksy(false)}
-        >
-          <form style={{ display: "contents" }}>
-            <DialogContent>
-              <p>
-                Olet hyväksymässä kuulutuksen ja käynnistämässä siihen liittyvän ilmoituksen automaattisen lähettämisen. Ilmoitus
-                kuulutuksesta lähetetään seuraaville:
-              </p>
-              <div>
-                <p>Viranomaiset</p>
-                <ul className="vayla-dialog-list">
-                  {projekti?.jatkoPaatos1Vaihe?.ilmoituksenVastaanottajat?.viranomaiset?.map((viranomainen) => (
-                    <li key={viranomainen.nimi}>
-                      {t(`viranomainen.${viranomainen.nimi}`)}, {viranomainen.sahkoposti}
-                    </li>
-                  ))}
-                </ul>
-                <p>Kunnat</p>
-                <ul className="vayla-dialog-list">
-                  {projekti?.jatkoPaatos1Vaihe?.ilmoituksenVastaanottajat?.kunnat?.map((kunta) => (
-                    <li key={kunta.id}>
-                      {kuntametadata.nameForKuntaId(kunta.id, kieli)}, {kunta.sahkoposti}
-                    </li>
-                  ))}
-                </ul>
-              </div>
-              <p>
-                Jos hyväksymisvaiheen kuulutukseen pitää tehdä muutoksia hyväksymisen jälkeen, tulee hyväksymisvaihekuulutus avata uudelleen
-                ja lähettää päivitetyt ilmoitukset asianosaisille. Kuulutuspäivän jälkeen tulevat muutostarpeet vaativat aloituksen
-                uudelleen kuuluttamisen.
-              </p>
-              <p>
-                Klikkaamalla Hyväksy ja lähetä -painiketta vahvistat kuulutuksen tarkastetuksi ja hyväksyt sen julkaisun kuulutuspäivänä
-                sekä ilmoituksien lähettämisen. Ilmoitukset lähetetään automaattisesti painikkeen klikkaamisen jälkeen.
-              </p>
-            </DialogContent>
-            <DialogActions>
-              <Button id="accept_kuulutus" primary onClick={hyvaksyKuulutus}>
-                Hyväksy ja lähetä
-              </Button>
-              <Button
-                onClick={(e) => {
-                  setOpenHyvaksy(false);
-                  e.preventDefault();
-                }}
-              >
-                Peruuta
-              </Button>
-            </DialogActions>
-          </form>
-        </HassuDialog>
-      </div>
-    </>
-  );
-}
diff --git a/src/components/projekti/jatkopaatos1/kuulutuksenTiedot/MuutoksenHaku.tsx b/src/components/projekti/jatkopaatos1/kuulutuksenTiedot/MuutoksenHaku.tsx
deleted file mode 100644
index 9d162e12c..000000000
--- a/src/components/projekti/jatkopaatos1/kuulutuksenTiedot/MuutoksenHaku.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import Section from "@components/layout/Section";
-import SectionContent from "@components/layout/SectionContent";
-import React from "react";
-import { useFormContext } from "react-hook-form";
-import { HallintoOikeus } from "@services/api";
-import Select from "@components/form/Select";
-import useTranslation from "next-translate/useTranslation";
-import { Controller } from "react-hook-form";
-
-type Props = {};
-
-type FormFields = {
-  jatkoPaatos1Vaihe: {
-    hallintoOikeus: HallintoOikeus;
-  };
-};
-
-export default function MuutoksenHaku({}: Props) {
-  const {
-    register,
-    formState: { errors },
-    control,
-  } = useFormContext<FormFields>();
-
-  const { t } = useTranslation("common");
-
-  return (
-    <Section>
-      <SectionContent>
-        <h4 className="vayla-small-title">Muutoksen haku</h4>
-        <p>
-          Päätökseen voi valittamalla hakea muutosta hallinto-oikeudelta 30 päivän kuluessa päätöksen tiedoksiannosta. Valitse
-          pudostusvalikosta hallinto-oikeus, johon muutoksenhaku osoitetaan tehtävän.
-        </p>
-
-        <div style={{ maxWidth: "30em" }}>
-          <Controller
-            control={control}
-            name="jatkoPaatos1Vaihe.hallintoOikeus"
-            render={({ field: { value, onChange, ...field } }) => (
-              <Select
-                style={{ backgroundColor: "transparent" }}
-                label="Hallinto-oikeus *"
-                options={Object.keys(HallintoOikeus).map((ho) => ({
-                  label: ho ? t(`hallinto-oikeus.${ho}`) : "",
-                  value: ho || "",
-                }))}
-                {...register(`jatkoPaatos1Vaihe.hallintoOikeus`)}
-                error={errors?.jatkoPaatos1Vaihe?.hallintoOikeus}
-                addEmptyOption
-                value={value || ""}
-                onChange={(event) => onChange(event.target.value)}
-                {...field}
-              />
-            )}
-          />
-        </div>
-      </SectionContent>
-    </Section>
-  );
-}
diff --git a/src/components/projekti/jatkopaatos1/kuulutuksenTiedot/Voimassaolovuosi.tsx b/src/components/projekti/jatkopaatos1/kuulutuksenTiedot/Voimassaolovuosi.tsx
deleted file mode 100644
index f2eb4c4ff..000000000
--- a/src/components/projekti/jatkopaatos1/kuulutuksenTiedot/Voimassaolovuosi.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import Section from "@components/layout/Section";
-import SectionContent from "@components/layout/SectionContent";
-import React, { useEffect, useState } from "react";
-import { Controller, useFormContext } from "react-hook-form";
-import dayjs from "dayjs";
-import HassuGrid from "@components/HassuGrid";
-import Select from "@components/form/Select";
-
-type Props = {};
-
-type FormFields = {
-  jatkoPaatos1Vaihe: {
-    viimeinenVoimassaolovuosi: string | null;
-  };
-};
-
-function getYears(count: number) {
-  let years = 0;
-  let yearsArray = [];
-  while (years < count) {
-    const year = dayjs().add(years, "year").year().toString();
-    yearsArray.push(year);
-    years++;
-  }
-  return yearsArray;
-}
-
-export default function Voimassaolovuosi({}: Props) {
-  const {
-    register,
-    formState: { errors },
-    control,
-  } = useFormContext<FormFields>();
-  const [years, setYears] = useState<string[]>([]);
-
-  useEffect(() => {
-    setYears(getYears(6));
-  }, []);
-
-  return (
-    <Section>
-      <SectionContent>
-        <h4 className="vayla-small-title">Päätöksen voimassaoloaika</h4>
-        <p>Valitse pudotusvalikosta vuosi, jonka loppuun saakka päätöksen voimassaoloaikaa jatketaan.</p>
-        <HassuGrid cols={{ lg: 3 }}>
-          <Controller
-            control={control}
-            name="jatkoPaatos1Vaihe.viimeinenVoimassaolovuosi"
-            render={({ field: { value, onChange, ...field } }) => (
-              <Select
-                id="voimassaolovuosi"
-                label="Päätöksen viimeinen voimassaolovuosi *"
-                options={
-                  years?.map((year) => {
-                    return { label: year, value: year };
-                  }) || [{ label: "", value: "" }]
-                }
-                {...register(`jatkoPaatos1Vaihe.viimeinenVoimassaolovuosi`)}
-                error={errors?.jatkoPaatos1Vaihe?.viimeinenVoimassaolovuosi}
-                addEmptyOption
-                value={value || ""}
-                onChange={(event) => onChange(event.target.value)}
-                {...field}
-              />
-            )}
-          />
-        </HassuGrid>
-      </SectionContent>
-    </Section>
-  );
-}
diff --git a/src/components/projekti/jatkopaatos1/kuulutuksenTiedot/index.tsx b/src/components/projekti/jatkopaatos1/kuulutuksenTiedot/index.tsx
deleted file mode 100644
index dd4ba8b9f..000000000
--- a/src/components/projekti/jatkopaatos1/kuulutuksenTiedot/index.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import { yupResolver } from "@hookform/resolvers/yup";
-import { HyvaksymisPaatosVaiheInput, KirjaamoOsoite, TallennaProjektiInput, YhteystietoInput } from "@services/api";
-import Notification, { NotificationType } from "@components/notification/Notification";
-import React, { ReactElement, useEffect, useMemo } from "react";
-import { FormProvider, useForm, UseFormProps } from "react-hook-form";
-import { ProjektiLisatiedolla, useProjekti } from "src/hooks/useProjekti";
-import JatkoPaatos1KuulutusPainikkeet from "./JatkoPaatos1KuulutusPainikkeet";
-import KuulutuksenJaIlmoituksenEsikatselu from "./KuulutuksenJaIlmoituksenEsikatselu";
-import KuulutuksessaEsitettavatYhteystiedot from "./KuulutuksessaEsitettavatYhteystiedot";
-import KuulutusJaJulkaisuPaiva from "./KuulutusJaJulkaisuPaiva";
-import PaatoksenPaiva from "../../paatos/kuulutuksenTiedot/PaatoksenPaiva";
-import MuutoksenHaku from "./MuutoksenHaku";
-import IlmoituksenVastaanottajatKomponentti from "./IlmoituksenVastaanottajat";
-import Lukunakyma from "./Lukunakyma";
-import defaultVastaanottajat from "src/util/defaultVastaanottajat";
-import { removeTypeName } from "src/util/removeTypeName";
-import useKirjaamoOsoitteet from "src/hooks/useKirjaamoOsoitteet";
-import PdfPreviewForm from "@components/projekti/PdfPreviewForm";
-import useLeaveConfirm from "src/hooks/useLeaveConfirm";
-import useIsAllowedOnCurrentProjektiRoute from "src/hooks/useIsOnAllowedProjektiRoute";
-import { jatkopaatos1KuulutusSchema } from "src/schemas/jatkopaatos1Kuulutus";
-import Voimassaolovuosi from "./Voimassaolovuosi";
-
-export type KuulutuksenTiedotFormValues = Pick<TallennaProjektiInput, "oid"> & {
-  jatkoPaatos1Vaihe: Omit<HyvaksymisPaatosVaiheInput, "hallintoOikeus"> & {
-    hallintoOikeus: HyvaksymisPaatosVaiheInput["hallintoOikeus"] | "";
-  };
-};
-
-interface Props {
-  setIsDirty: (value: React.SetStateAction<boolean>) => void;
-}
-
-export default function KuulutuksenTiedot({ setIsDirty }: Props): ReactElement {
-  const { data: projekti } = useProjekti({ revalidateOnMount: true });
-  const { data: kirjaamoOsoitteet } = useKirjaamoOsoitteet();
-  return <>{projekti && kirjaamoOsoitteet && <JatkoKuulutuksetTiedotForm {...{ kirjaamoOsoitteet, projekti, setIsDirty }} />}</>;
-}
-
-interface KuulutuksenTiedotFormProps {
-  projekti: ProjektiLisatiedolla;
-  kirjaamoOsoitteet: KirjaamoOsoite[];
-}
-
-function JatkoKuulutuksetTiedotForm({ projekti, kirjaamoOsoitteet, setIsDirty }: KuulutuksenTiedotFormProps & Props) {
-  const pdfFormRef = React.useRef<React.ElementRef<typeof PdfPreviewForm>>(null);
-
-  const defaultValues: KuulutuksenTiedotFormValues = useMemo(() => {
-    const yhteysTiedot: YhteystietoInput[] =
-      projekti?.jatkoPaatos1Vaihe?.kuulutusYhteystiedot?.yhteysTiedot?.map((yt) => removeTypeName(yt)) || [];
-
-    const yhteysHenkilot: string[] = projekti?.jatkoPaatos1Vaihe?.kuulutusYhteystiedot?.yhteysHenkilot || [];
-
-    const formValues: KuulutuksenTiedotFormValues = {
-      oid: projekti.oid,
-      jatkoPaatos1Vaihe: {
-        kuulutusPaiva: projekti?.jatkoPaatos1Vaihe?.kuulutusPaiva || null,
-        kuulutusVaihePaattyyPaiva: projekti?.jatkoPaatos1Vaihe?.kuulutusVaihePaattyyPaiva || null,
-        hallintoOikeus: projekti?.jatkoPaatos1Vaihe?.hallintoOikeus || "",
-        kuulutusYhteystiedot: {
-          yhteysTiedot,
-          yhteysHenkilot,
-        },
-        ilmoituksenVastaanottajat: defaultVastaanottajat(
-          projekti,
-          projekti.jatkoPaatos1Vaihe?.ilmoituksenVastaanottajat,
-          kirjaamoOsoitteet
-        ),
-        viimeinenVoimassaolovuosi: projekti?.jatkoPaatos1Vaihe?.viimeinenVoimassaolovuosi || "",
-      },
-    };
-    return formValues;
-  }, [projekti, kirjaamoOsoitteet]);
-
-  const formOptions: UseFormProps<KuulutuksenTiedotFormValues> = {
-    resolver: yupResolver(jatkopaatos1KuulutusSchema, { abortEarly: false, recursive: true }),
-    mode: "onChange",
-    reValidateMode: "onChange",
-    defaultValues,
-    context: projekti,
-  };
-
-  const useFormReturn = useForm<KuulutuksenTiedotFormValues>(formOptions);
-  const { isAllowedOnRoute } = useIsAllowedOnCurrentProjektiRoute();
-
-  const {
-    formState: { isDirty },
-  } = useFormReturn;
-
-  useEffect(() => {
-    setIsDirty(isDirty);
-  }, [isDirty, setIsDirty]);
-
-  useLeaveConfirm(isDirty);
-
-  const voiMuokata = !projekti?.jatkoPaatos1VaiheJulkaisut || projekti.jatkoPaatos1VaiheJulkaisut.length < 1;
-
-  return (
-    <>
-      {projekti.jatkoPaatos1Vaihe?.palautusSyy && (
-        <Notification type={NotificationType.WARN}>
-          {"Hyväksymisvaihejulkaisu on palautettu korjattavaksi. Palautuksen syy: " + projekti.jatkoPaatos1Vaihe.palautusSyy}
-        </Notification>
-      )}
-
-      {voiMuokata && (
-        <>
-          <FormProvider {...useFormReturn}>
-            <form>
-              <fieldset disabled={!isAllowedOnRoute || !projekti.nykyinenKayttaja.omaaMuokkausOikeuden}>
-                <KuulutusJaJulkaisuPaiva />
-                <PaatoksenPaiva paatos={projekti.kasittelynTila?.ensimmainenJatkopaatos} projektiOid={projekti.oid} />
-                <Voimassaolovuosi />
-                <MuutoksenHaku />
-                <KuulutuksessaEsitettavatYhteystiedot />
-                <IlmoituksenVastaanottajatKomponentti projekti={projekti} />
-
-                {pdfFormRef.current?.esikatselePdf && (
-                  <KuulutuksenJaIlmoituksenEsikatselu esikatselePdf={pdfFormRef.current?.esikatselePdf} />
-                )}
-                <JatkoPaatos1KuulutusPainikkeet projekti={projekti} />
-              </fieldset>
-            </form>
-          </FormProvider>
-        </>
-      )}
-      {!voiMuokata && projekti && projekti.jatkoPaatos1VaiheJulkaisut?.[projekti.jatkoPaatos1VaiheJulkaisut.length - 1] && (
-        <>
-          <FormProvider {...useFormReturn}>
-            <form>
-              <Lukunakyma
-                projekti={projekti}
-                jatkoPaatos1VaiheJulkaisu={projekti.jatkoPaatos1VaiheJulkaisut[projekti.jatkoPaatos1VaiheJulkaisut.length - 1]}
-              />
-              <JatkoPaatos1KuulutusPainikkeet projekti={projekti} />
-            </form>
-          </FormProvider>
-        </>
-      )}
-      <PdfPreviewForm ref={pdfFormRef} />
-    </>
-  );
-}
diff --git a/src/components/projekti/lukutila/HyvakysmisVaiheAineistotLukutila.tsx b/src/components/projekti/lukutila/PaatosAineistotLukutila.tsx
similarity index 81%
rename from src/components/projekti/lukutila/HyvakysmisVaiheAineistotLukutila.tsx
rename to src/components/projekti/lukutila/PaatosAineistotLukutila.tsx
index 005992e31..0930fc5dd 100644
--- a/src/components/projekti/lukutila/HyvakysmisVaiheAineistotLukutila.tsx
+++ b/src/components/projekti/lukutila/PaatosAineistotLukutila.tsx
@@ -5,10 +5,10 @@ import { formatDate } from "src/util/dateUtils";
 
 type Props = {
   oid: string;
-  hyvaksymisPaatosVaiheJulkaisu: HyvaksymisPaatosVaiheJulkaisu;
+  paatosJulkaisu: HyvaksymisPaatosVaiheJulkaisu;
 };
 
-export default function HyvaksymisVaiheAineistotLukutila({ oid, hyvaksymisPaatosVaiheJulkaisu }: Props): ReactElement {
+export default function PaatosAineistotLukutila({ oid, paatosJulkaisu: hyvaksymisPaatosVaiheJulkaisu }: Props): ReactElement {
   const velhoURL = process.env.NEXT_PUBLIC_VELHO_BASE_URL + "/projektit/oid-" + oid;
   return (
     <>
diff --git a/src/pages/yllapito/projekti/[oid]/hyvaksyminen/aineisto.tsx b/src/pages/yllapito/projekti/[oid]/hyvaksyminen/aineisto.tsx
new file mode 100644
index 000000000..56d4f7d28
--- /dev/null
+++ b/src/pages/yllapito/projekti/[oid]/hyvaksyminen/aineisto.tsx
@@ -0,0 +1,27 @@
+import React, { VFC } from "react";
+import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
+import HyvaksyminenPageLayout from "@components/projekti/paatos/HyvaksyminenPageLayout";
+import ProjektiConsumer from "@components/projekti/ProjektiConsumer";
+import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
+import PaatosAineistotLukutila from "@components/projekti/lukutila/PaatosAineistotLukutila";
+import PaatosAineistot from "@components/projekti/paatos/aineistot/index";
+
+export default function HyvaksyminenAineistoWrapper() {
+  return <ProjektiConsumer>{(projekti) => <HyvaksyminenAineisto projekti={projekti} />}</ProjektiConsumer>;
+}
+
+const HyvaksyminenAineisto: VFC<{ projekti: ProjektiLisatiedolla }> = ({ projekti }) => {
+  const julkaisut = projekti?.hyvaksymisPaatosVaiheJulkaisut;
+  const paatosJulkaisu = julkaisut ? julkaisut[julkaisut.length - 1] : null;
+
+  const epaaktiivinen = projektiOnEpaaktiivinen(projekti);
+  return (
+    <HyvaksyminenPageLayout>
+      {epaaktiivinen && paatosJulkaisu ? (
+        <PaatosAineistotLukutila oid={projekti.oid} paatosJulkaisu={paatosJulkaisu} />
+      ) : (
+        <PaatosAineistot />
+      )}
+    </HyvaksyminenPageLayout>
+  );
+};
diff --git a/src/pages/yllapito/projekti/[oid]/hyvaksymispaatos/index.tsx b/src/pages/yllapito/projekti/[oid]/hyvaksyminen/index.tsx
similarity index 58%
rename from src/pages/yllapito/projekti/[oid]/hyvaksymispaatos/index.tsx
rename to src/pages/yllapito/projekti/[oid]/hyvaksyminen/index.tsx
index fe993865a..cf423a22f 100644
--- a/src/pages/yllapito/projekti/[oid]/hyvaksymispaatos/index.tsx
+++ b/src/pages/yllapito/projekti/[oid]/hyvaksyminen/index.tsx
@@ -6,20 +6,19 @@ import ProjektiConsumer from "@components/projekti/ProjektiConsumer";
 import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
 import Lukunakyma from "@components/projekti/paatos/kuulutuksenTiedot/Lukunakyma";
 
-export default function HyvaksymisPaatosWrapper() {
-  return <ProjektiConsumer>{(projekti) => <Hyvaksymispaatos projekti={projekti} />}</ProjektiConsumer>;
+export default function HyvaksyminenWrapper() {
+  return <ProjektiConsumer>{(projekti) => <Hyvaksyminen projekti={projekti} />}</ProjektiConsumer>;
 }
 
-const Hyvaksymispaatos: VFC<{ projekti: ProjektiLisatiedolla }> = ({ projekti }) => {
-  const hyvaksymisPaatosVaiheJulkaisu = projekti?.hyvaksymisPaatosVaiheJulkaisut
-    ? projekti.hyvaksymisPaatosVaiheJulkaisut[projekti.hyvaksymisPaatosVaiheJulkaisut.length - 1]
-    : null;
+const Hyvaksyminen: VFC<{ projekti: ProjektiLisatiedolla }> = ({ projekti }) => {
+  const julkaisut = projekti?.hyvaksymisPaatosVaiheJulkaisut;
+  const paatosJulkaisu = julkaisut ? julkaisut[julkaisut.length - 1] : null;
 
   const epaaktiivinen = projektiOnEpaaktiivinen(projekti);
   return (
     <HyvaksyminenPageLayout>
-      {epaaktiivinen && hyvaksymisPaatosVaiheJulkaisu ? (
-        <Lukunakyma projekti={projekti} hyvaksymisPaatosVaiheJulkaisu={hyvaksymisPaatosVaiheJulkaisu} />
+      {epaaktiivinen && paatosJulkaisu ? (
+        <Lukunakyma projekti={projekti} hyvaksymisPaatosVaiheJulkaisu={paatosJulkaisu} />
       ) : (
         <KuulutuksenTiedot />
       )}
diff --git a/src/pages/yllapito/projekti/[oid]/hyvaksymispaatos/aineisto.tsx b/src/pages/yllapito/projekti/[oid]/hyvaksymispaatos/aineisto.tsx
deleted file mode 100644
index 4872fb416..000000000
--- a/src/pages/yllapito/projekti/[oid]/hyvaksymispaatos/aineisto.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React, { VFC } from "react";
-import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
-import HyvaksyminenPageLayout from "@components/projekti/paatos/HyvaksyminenPageLayout";
-import ProjektiConsumer from "@components/projekti/ProjektiConsumer";
-import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
-import HyvaksymisVaiheAineistotLukutila from "@components/projekti/lukutila/HyvakysmisVaiheAineistotLukutila";
-import PaatosAineistot from "@components/projekti/paatos/aineistot/index";
-
-export default function HyvaksymisPaatosWrapper() {
-  return <ProjektiConsumer>{(projekti) => <Hyvaksymispaatos projekti={projekti} />}</ProjektiConsumer>;
-}
-
-const Hyvaksymispaatos: VFC<{ projekti: ProjektiLisatiedolla }> = ({ projekti }) => {
-  const hyvaksymisPaatosVaiheJulkaisu = projekti?.hyvaksymisPaatosVaiheJulkaisut
-    ? projekti.hyvaksymisPaatosVaiheJulkaisut[projekti.hyvaksymisPaatosVaiheJulkaisut.length - 1]
-    : null;
-
-  const epaaktiivinen = projektiOnEpaaktiivinen(projekti);
-  return (
-    <HyvaksyminenPageLayout>
-      {epaaktiivinen && hyvaksymisPaatosVaiheJulkaisu ? (
-        <HyvaksymisVaiheAineistotLukutila oid={projekti.oid} hyvaksymisPaatosVaiheJulkaisu={hyvaksymisPaatosVaiheJulkaisu} />
-      ) : (
-        <PaatosAineistot />
-      )}
-    </HyvaksyminenPageLayout>
-  );
-};
diff --git a/src/pages/yllapito/projekti/[oid]/jatkaminen1.tsx b/src/pages/yllapito/projekti/[oid]/jatkaminen1.tsx
deleted file mode 100644
index 0e9aad750..000000000
--- a/src/pages/yllapito/projekti/[oid]/jatkaminen1.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-import React, { useCallback, useState, VFC } from "react";
-import ProjektiPageLayout from "@components/projekti/ProjektiPageLayout";
-import Notification, { NotificationType } from "@components/notification/Notification";
-import Tabs, { TabProps } from "@components/layout/tabs/Tabs";
-import KuulutuksenTiedot from "@components/projekti/jatkopaatos1/kuulutuksenTiedot/index";
-import PaatosAineistot from "@components/projekti/jatkopaatos1/aineistot/index";
-import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
-import { Link } from "@mui/material";
-import { HyvaksymisPaatosVaiheTila } from "@services/api";
-import { examineKuulutusPaiva } from "src/util/aloitusKuulutusUtil";
-import FormatDate from "@components/FormatDate";
-import Section from "@components/layout/Section";
-import TallentamattomiaMuutoksiaDialog from "@components/TallentamattomiaMuutoksiaDialog";
-import Jatkopaatos1VaiheAineistotLukutila from "@components/projekti/lukutila/JatkoPaatos1VaiheAineistotLukutila";
-import Lukunakyma from "@components/projekti/jatkopaatos1/kuulutuksenTiedot/Lukunakyma";
-import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
-import ProjektiConsumer from "@components/projekti/ProjektiConsumer";
-
-export default function Jatkopaatos1Wrapper() {
-  return <ProjektiConsumer>{(projekti) => <Jatkopaatos1 projekti={projekti} />}</ProjektiConsumer>;
-}
-
-const Jatkopaatos1: VFC<{ projekti: ProjektiLisatiedolla }> = ({ projekti }) => {
-  const [currentTab, setCurrentTab] = useState<number | string>(0);
-  const [open, setOpen] = useState(false);
-  const [isDirty, setIsDirty] = useState(false);
-  const [selectedValue, setSelectedValue] = useState<number | string>(0);
-
-  const handleClickClose = () => {
-    setOpen(false);
-  };
-
-  const handleClickOk = useCallback(() => {
-    setIsDirty(false);
-    setCurrentTab(selectedValue);
-    setOpen(false);
-  }, [selectedValue, setIsDirty]);
-
-  const handleChange: TabProps["onChange"] = (_event, value) => {
-    if (isDirty) {
-      setOpen(true);
-      setSelectedValue(value);
-    } else {
-      setOpen(false);
-      setCurrentTab(value);
-    }
-  };
-
-  const kertaalleenLahetettyHyvaksyttavaksi = projekti?.jatkoPaatos1VaiheJulkaisut && projekti.jatkoPaatos1VaiheJulkaisut.length >= 1;
-
-  const jatkopaatos1VaiheJulkaisu = projekti?.jatkoPaatos1VaiheJulkaisut
-    ? projekti.jatkoPaatos1VaiheJulkaisut[projekti.jatkoPaatos1VaiheJulkaisut.length - 1]
-    : null;
-
-  let { kuulutusPaiva, published } = examineKuulutusPaiva(jatkopaatos1VaiheJulkaisu?.kuulutusPaiva);
-
-  if (!projekti) {
-    return <></>;
-  }
-
-  const epaaktiivinen = projektiOnEpaaktiivinen(projekti);
-
-  return (
-    <ProjektiPageLayout title="Kuulutus hyväksymispäätöksen jatkamisesta">
-      {!epaaktiivinen && !kertaalleenLahetettyHyvaksyttavaksi && (
-        <Notification closable type={NotificationType.INFO} hideIcon>
-          <div>
-            <h3 className="vayla-small-title">Ohjeet</h3>
-            <ul className="list-disc block pl-5">
-              <li>Aloita lisäämällä päätökset ja sen liitteenä olevat aineistot kuulutuksen ensimmäiseltä välilehdeltä.</li>
-              <li>Jatka täyttämään kuulutuksen perustiedot valitsemalla “Tallenna ja siirry kuulutukselle”.</li>
-              <li>
-                Anna päivämäärä, jolloin suunnitelman hyväksymispäätöksestä kuulutetaan. Kuulutus julkaistaan samana päivänä Valtion
-                liikenneväylien suunnittelu -palvelun kansalaispuolella.
-              </li>
-              <li>
-                Päätöksen päivän ja asiatunnus tulee{" "}
-                <Link underline="none" href={`/yllapito/projekti/${projekti?.oid}/kasittelyntila`}>
-                  Käsittelyn tila
-                </Link>{" "}
-                -sivulla.
-              </li>
-              <li>Valitse hallinto-oikeus, jolta muutoksenhakua voidaan hakea</li>
-              <li>Valitse ja lisää kuulutuksessa esitettävät yhteystiedot ja ilmoituksen vastaanottajat.</li>
-              <li>Esikatsele ja lähetä hyväksymispäätöksen kuulutus hyväksyttäväksi projektipäällikölle.</li>
-            </ul>
-          </div>
-        </Notification>
-      )}
-      {!epaaktiivinen && (
-        <Section noDivider>
-          {!published && jatkopaatos1VaiheJulkaisu?.tila === HyvaksymisPaatosVaiheTila.HYVAKSYTTY && (
-            <Notification type={NotificationType.WARN}>Kuulutusta ei ole vielä julkaistu. Kuulutuspäivä {kuulutusPaiva}.</Notification>
-          )}
-          {published && jatkopaatos1VaiheJulkaisu?.tila === HyvaksymisPaatosVaiheTila.HYVAKSYTTY && (
-            <Notification type={NotificationType.INFO_GREEN}>
-              Kuulutus nähtäville asettamisesta on julkaistu {kuulutusPaiva}. Projekti näytetään kuulutuspäivästä lasketun määräajan jälkeen
-              palvelun julkisella puolella suunnittelussa olevana. Kuulutusvaihe päättyy{" "}
-              <FormatDate date={jatkopaatos1VaiheJulkaisu.kuulutusVaihePaattyyPaiva} />.
-            </Notification>
-          )}
-          {jatkopaatos1VaiheJulkaisu && jatkopaatos1VaiheJulkaisu?.tila === HyvaksymisPaatosVaiheTila.ODOTTAA_HYVAKSYNTAA && (
-            <Notification type={NotificationType.WARN}>
-              Kuulutus nähtäville asettamisesta odottaa hyväksyntää. Tarkasta kuulutus ja a) hyväksy tai b) palauta kuulutus korjattavaksi,
-              jos havaitset puutteita tai virheen.
-            </Notification>
-          )}
-        </Section>
-      )}
-      <Tabs
-        tabStyle="Underlined"
-        value={currentTab}
-        onChange={handleChange}
-        tabs={
-          kertaalleenLahetettyHyvaksyttavaksi
-            ? [
-                {
-                  label: "Kuulutuksen tiedot",
-                  content:
-                    epaaktiivinen && jatkopaatos1VaiheJulkaisu ? (
-                      <Lukunakyma projekti={projekti} jatkoPaatos1VaiheJulkaisu={jatkopaatos1VaiheJulkaisu} />
-                    ) : (
-                      <KuulutuksenTiedot setIsDirty={setIsDirty} />
-                    ),
-                  tabId: "kuulutuksentiedot_luku_tab",
-                },
-                {
-                  label: "Päätös ja liitteenä oleva aineisto",
-                  content:
-                    epaaktiivinen && jatkopaatos1VaiheJulkaisu ? (
-                      <Jatkopaatos1VaiheAineistotLukutila oid={projekti.oid} jatkoPaatos1VaiheJulkaisu={jatkopaatos1VaiheJulkaisu} />
-                    ) : (
-                      <PaatosAineistot setIsDirty={setIsDirty} />
-                    ),
-                  tabId: "aineisto_luku_tab",
-                },
-              ]
-            : [
-                {
-                  label: "Päätös ja liitteenä oleva aineisto",
-                  content: <PaatosAineistot setIsDirty={setIsDirty} />,
-                  tabId: "aineisto_tab",
-                },
-                {
-                  label: "Kuulutuksen tiedot",
-                  content:
-                    epaaktiivinen && jatkopaatos1VaiheJulkaisu ? (
-                      <Lukunakyma projekti={projekti} jatkoPaatos1VaiheJulkaisu={jatkopaatos1VaiheJulkaisu} />
-                    ) : (
-                      <KuulutuksenTiedot setIsDirty={setIsDirty} />
-                    ),
-                  tabId: "kuulutuksentiedot_tab",
-                },
-              ]
-        }
-      />
-      <TallentamattomiaMuutoksiaDialog open={open} handleClickClose={handleClickClose} handleClickOk={handleClickOk} />
-    </ProjektiPageLayout>
-  );
-};
diff --git a/src/pages/yllapito/projekti/[oid]/jatkaminen1/aineisto.tsx b/src/pages/yllapito/projekti/[oid]/jatkaminen1/aineisto.tsx
new file mode 100644
index 000000000..905a1dcb6
--- /dev/null
+++ b/src/pages/yllapito/projekti/[oid]/jatkaminen1/aineisto.tsx
@@ -0,0 +1,27 @@
+import React, { VFC } from "react";
+import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
+import HyvaksyminenPageLayout from "@components/projekti/paatos/HyvaksyminenPageLayout";
+import ProjektiConsumer from "@components/projekti/ProjektiConsumer";
+import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
+import PaatosAineistotLukutila from "@components/projekti/lukutila/PaatosAineistotLukutila";
+import PaatosAineistot from "@components/projekti/paatos/aineistot/index";
+
+export default function Jatkaminen1AineistoWrapper() {
+  return <ProjektiConsumer>{(projekti) => <Jatkaminen1Aineisto projekti={projekti} />}</ProjektiConsumer>;
+}
+
+const Jatkaminen1Aineisto: VFC<{ projekti: ProjektiLisatiedolla }> = ({ projekti }) => {
+  const julkaisut = projekti?.jatkoPaatos1VaiheJulkaisut;
+  const paatosJulkaisu = julkaisut ? julkaisut[julkaisut.length - 1] : null;
+
+  const epaaktiivinen = projektiOnEpaaktiivinen(projekti);
+  return (
+    <HyvaksyminenPageLayout>
+      {epaaktiivinen && paatosJulkaisu ? (
+        <PaatosAineistotLukutila oid={projekti.oid} paatosJulkaisu={paatosJulkaisu} />
+      ) : (
+        <PaatosAineistot />
+      )}
+    </HyvaksyminenPageLayout>
+  );
+};
diff --git a/src/pages/yllapito/projekti/[oid]/jatkaminen1/index.tsx b/src/pages/yllapito/projekti/[oid]/jatkaminen1/index.tsx
new file mode 100644
index 000000000..caa685def
--- /dev/null
+++ b/src/pages/yllapito/projekti/[oid]/jatkaminen1/index.tsx
@@ -0,0 +1,27 @@
+import React, { VFC } from "react";
+import KuulutuksenTiedot from "@components/projekti/paatos/kuulutuksenTiedot/index";
+import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
+import HyvaksyminenPageLayout from "@components/projekti/paatos/HyvaksyminenPageLayout";
+import ProjektiConsumer from "@components/projekti/ProjektiConsumer";
+import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
+import Lukunakyma from "@components/projekti/paatos/kuulutuksenTiedot/Lukunakyma";
+
+export default function Jatkaminen1Wrapper() {
+  return <ProjektiConsumer>{(projekti) => <Jatkaminen1 projekti={projekti} />}</ProjektiConsumer>;
+}
+
+const Jatkaminen1: VFC<{ projekti: ProjektiLisatiedolla }> = ({ projekti }) => {
+  const julkaisut = projekti?.jatkoPaatos1VaiheJulkaisut;
+  const paatosJulkaisu = julkaisut ? julkaisut[julkaisut.length - 1] : null;
+
+  const epaaktiivinen = projektiOnEpaaktiivinen(projekti);
+  return (
+    <HyvaksyminenPageLayout>
+      {epaaktiivinen && paatosJulkaisu ? (
+        <Lukunakyma projekti={projekti} hyvaksymisPaatosVaiheJulkaisu={paatosJulkaisu} />
+      ) : (
+        <KuulutuksenTiedot />
+      )}
+    </HyvaksyminenPageLayout>
+  );
+};

From cac40aae4e407866b71dc089242f7135a7e54c59 Mon Sep 17 00:00:00 2001
From: tomi korkalainen <tomi.korkalainen@cgi.com>
Date: Tue, 8 Nov 2022 11:05:36 +0200
Subject: [PATCH 07/14] aloita jatkopaatosmuutosten tekemista
 paatos-komponentteihin

---
 src/components/projekti/ProjektiConsumer.tsx  |  7 ++--
 .../JatkoPaatos1VaiheAineistotLukutila.tsx    | 23 -----------
 ...nenPageLayout.tsx => PaatosPageLayout.tsx} | 38 +++++++++++++++----
 .../paatos/aineistot/Muokkausnakyma.tsx       |  2 +-
 .../paatos/kuulutuksenTiedot/Lukunakyma.tsx   | 17 ++++++---
 .../paatos/kuulutuksenTiedot/index.tsx        | 36 +++++++++++++-----
 src/hooks/useProjekti.tsx                     |  6 +--
 .../projekti/[oid]/hyvaksyminen/aineisto.tsx  | 10 +++--
 .../projekti/[oid]/hyvaksyminen/index.tsx     | 19 ++++++----
 .../projekti/[oid]/jatkaminen1/aineisto.tsx   | 10 +++--
 .../projekti/[oid]/jatkaminen1/index.tsx      | 14 ++++---
 11 files changed, 112 insertions(+), 70 deletions(-)
 delete mode 100644 src/components/projekti/lukutila/JatkoPaatos1VaiheAineistotLukutila.tsx
 rename src/components/projekti/paatos/{HyvaksyminenPageLayout.tsx => PaatosPageLayout.tsx} (81%)

diff --git a/src/components/projekti/ProjektiConsumer.tsx b/src/components/projekti/ProjektiConsumer.tsx
index 11f4c7699..e4422dd70 100644
--- a/src/components/projekti/ProjektiConsumer.tsx
+++ b/src/components/projekti/ProjektiConsumer.tsx
@@ -1,12 +1,13 @@
 import React, { ReactElement } from "react";
-import { ProjektiLisatiedolla, useProjekti } from "src/hooks/useProjekti";
+import { ProjektiLisatiedolla, useProjekti, useProjektiOptions } from "src/hooks/useProjekti";
 
 interface ProjektiConsumerProps {
   children?: (p: ProjektiLisatiedolla) => ReactElement | null;
+  useProjektiOptions?: useProjektiOptions;
 }
 
-const ProjektiConsumer = ({ children }: ProjektiConsumerProps) => {
-  const { data: projekti } = useProjekti();
+const ProjektiConsumer = ({ children, useProjektiOptions }: ProjektiConsumerProps) => {
+  const { data: projekti } = useProjekti(useProjektiOptions);
   if (!projekti || !children) {
     return <></>;
   }
diff --git a/src/components/projekti/lukutila/JatkoPaatos1VaiheAineistotLukutila.tsx b/src/components/projekti/lukutila/JatkoPaatos1VaiheAineistotLukutila.tsx
deleted file mode 100644
index 357d96b9c..000000000
--- a/src/components/projekti/lukutila/JatkoPaatos1VaiheAineistotLukutila.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import ExtLink from "@components/ExtLink";
-import { HyvaksymisPaatosVaiheJulkaisu } from "common/graphql/apiModel";
-import { ReactElement } from "react";
-import { formatDate } from "src/util/dateUtils";
-
-type Props = {
-  oid: string;
-  jatkoPaatos1VaiheJulkaisu: HyvaksymisPaatosVaiheJulkaisu;
-};
-
-export default function HyvaksymisVaiheAineistotLukutila({ oid, jatkoPaatos1VaiheJulkaisu }: Props): ReactElement {
-  const velhoURL = process.env.NEXT_PUBLIC_VELHO_BASE_URL + "/projektit/oid-" + oid;
-  return (
-    <>
-      <p className="vayla-label">Päätös ja sen liitteenä oleva aineisto</p>
-      <p>
-        Päätökset ja aineistot ovat olleet nähtävillä palvelun julkisella puolella {formatDate(jatkoPaatos1VaiheJulkaisu.kuulutusPaiva)}—
-        {formatDate(jatkoPaatos1VaiheJulkaisu.kuulutusVaihePaattyyPaiva)} välisen ajan. Päätös löytyy asianhallinnasta ja liiteenä olevat
-        aineistot <ExtLink href={velhoURL}>Projektivelhosta</ExtLink>.
-      </p>
-    </>
-  );
-}
diff --git a/src/components/projekti/paatos/HyvaksyminenPageLayout.tsx b/src/components/projekti/paatos/PaatosPageLayout.tsx
similarity index 81%
rename from src/components/projekti/paatos/HyvaksyminenPageLayout.tsx
rename to src/components/projekti/paatos/PaatosPageLayout.tsx
index 43a684e53..a23d8fdd3 100644
--- a/src/components/projekti/paatos/HyvaksyminenPageLayout.tsx
+++ b/src/components/projekti/paatos/PaatosPageLayout.tsx
@@ -13,26 +13,45 @@ import Notification, { NotificationType } from "@components/notification/Notific
 import { examineKuulutusPaiva } from "src/util/aloitusKuulutusUtil";
 import FormatDate from "@components/FormatDate";
 
-export default function HyvaksyminenPageLayoutWrapper({ children }: { children?: ReactNode }) {
+export enum PaatosTyyppi {
+  HYVAKSYMISPAATOS = "HYVAKSYMISPAATOS",
+  JATKOPAATOS1 = "JATKOPAATOS1",
+  JATKOPAATOS2 = "JATKOPAATOS2",
+}
+
+interface PaatosTyyppiSpecificData {
+  paatosRoutePart: string;
+  pageTitle: string;
+}
+
+const paatosTyyppiSpecificContentMap: Record<PaatosTyyppi, PaatosTyyppiSpecificData> = {
+  HYVAKSYMISPAATOS: { paatosRoutePart: "hyvaksyminen", pageTitle: "Kuulutus hyväksymispäätöksestä" },
+  JATKOPAATOS1: { paatosRoutePart: "jatkaminen1", pageTitle: "Kuulutus hyväksymispäätöksen jatkamisesta" },
+  JATKOPAATOS2: { paatosRoutePart: "jatkaminen2", pageTitle: "Kuulutus hyväksymispäätöksen jatkamisesta" },
+};
+
+export default function PaatosPageLayoutWrapper({ children, paatosTyyppi }: { children?: ReactNode; paatosTyyppi: PaatosTyyppi }) {
   return (
     <ProjektiConsumer>
       {(projekti) => (
-        <HyvaksyminenPageLayout projekti={projekti} disableTabs={!projekti}>
+        <PaatosPageLayout projekti={projekti} disableTabs={!projekti} paatosTyyppi={paatosTyyppi}>
           {children}
-        </HyvaksyminenPageLayout>
+        </PaatosPageLayout>
       )}
     </ProjektiConsumer>
   );
 }
 
-function HyvaksyminenPageLayout({
+function PaatosPageLayout({
   projekti,
   disableTabs,
+  paatosTyyppi,
   children,
 }: {
   projekti: ProjektiLisatiedolla;
   disableTabs?: boolean;
   children?: ReactNode;
+  paatosTyyppi: PaatosTyyppi;
 }): ReactElement {
   const router = useRouter();
 
@@ -40,6 +59,8 @@ function HyvaksyminenPageLayout({
   const migroitu = nahtavillaolovaiheJulkaisu?.tila == NahtavillaoloVaiheTila.MIGROITU;
   const epaaktiivinen = projektiOnEpaaktiivinen(projekti);
 
+  const { paatosRoutePart, pageTitle } = useMemo(() => paatosTyyppiSpecificContentMap[paatosTyyppi], [paatosTyyppi]);
+
   const kertaalleenLahetettyHyvaksyttavaksi = useMemo(
     () => projekti?.hyvaksymisPaatosVaiheJulkaisut && projekti.hyvaksymisPaatosVaiheJulkaisut.length >= 1,
     [projekti.hyvaksymisPaatosVaiheJulkaisut]
@@ -52,11 +73,12 @@ function HyvaksyminenPageLayout({
   let { kuulutusPaiva, published } = examineKuulutusPaiva(hyvaksymisPaatosVaiheJulkaisu?.kuulutusPaiva);
 
   const tabProps: LinkTabProps[] = useMemo(() => {
+    const paatosRoute = paatosRoutePart;
     const result: LinkTabProps[] = [
       {
         linkProps: {
           href: {
-            pathname: `/yllapito/projekti/[oid]/hyvaksymispaatos/aineisto`,
+            pathname: `/yllapito/projekti/[oid]/${paatosRoute}/aineisto`,
             query: { oid: projekti.oid },
           },
         },
@@ -67,7 +89,7 @@ function HyvaksyminenPageLayout({
       {
         linkProps: {
           href: {
-            pathname: `/yllapito/projekti/[oid]/hyvaksymispaatos`,
+            pathname: `/yllapito/projekti/[oid]/${paatosRoute}`,
             query: { oid: projekti.oid },
           },
         },
@@ -81,7 +103,7 @@ function HyvaksyminenPageLayout({
     }
 
     return result;
-  }, [projekti.oid, disableTabs, kertaalleenLahetettyHyvaksyttavaksi]);
+  }, [paatosRoutePart, projekti.oid, disableTabs, kertaalleenLahetettyHyvaksyttavaksi]);
 
   const value = useMemo(() => {
     const indexOfTab = tabProps.findIndex((tProps) => {
@@ -92,7 +114,7 @@ function HyvaksyminenPageLayout({
   }, [router.pathname, tabProps]);
 
   return (
-    <ProjektiPageLayout title="Kuulutus hyväksymispäätöksestä">
+    <ProjektiPageLayout title={pageTitle}>
       <Section noDivider>
         {!migroitu && !epaaktiivinen && !kertaalleenLahetettyHyvaksyttavaksi && (
           <Notification closable type={NotificationType.INFO} hideIcon>
diff --git a/src/components/projekti/paatos/aineistot/Muokkausnakyma.tsx b/src/components/projekti/paatos/aineistot/Muokkausnakyma.tsx
index f5220899d..957efa4f2 100644
--- a/src/components/projekti/paatos/aineistot/Muokkausnakyma.tsx
+++ b/src/components/projekti/paatos/aineistot/Muokkausnakyma.tsx
@@ -38,7 +38,7 @@ const getDefaultValueForAineistoNahtavilla = (aineistot: Aineisto[] | undefined
 };
 
 export default function Muokkausnakyma(): ReactElement {
-  const { data: projekti } = useProjekti({ revalidateOnMount: true });
+  const { data: projekti } = useProjekti();
 
   return <>{projekti && <MuokkausnakymaForm projekti={projekti} />}</>;
 }
diff --git a/src/components/projekti/paatos/kuulutuksenTiedot/Lukunakyma.tsx b/src/components/projekti/paatos/kuulutuksenTiedot/Lukunakyma.tsx
index 56252c6c3..3c9dc5479 100644
--- a/src/components/projekti/paatos/kuulutuksenTiedot/Lukunakyma.tsx
+++ b/src/components/projekti/paatos/kuulutuksenTiedot/Lukunakyma.tsx
@@ -1,5 +1,6 @@
-import { HyvaksymisPaatosVaiheJulkaisu, Kieli } from "@services/api";
-import React, { ReactElement } from "react";
+import React, { ReactElement, useMemo } from "react";
+import { HyvaksymisPaatosVaiheJulkaisu, KasittelynTila, Kieli } from "@services/api";
+import capitalize from "lodash/capitalize";
 import replace from "lodash/replace";
 import { examineKuulutusPaiva } from "src/util/aloitusKuulutusUtil";
 import FormatDate from "@components/FormatDate";
@@ -17,13 +18,17 @@ import { ProjektiTestCommand } from "../../../../../common/testUtil.dev";
 import { formatDate } from "src/util/dateUtils";
 import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
 import { formatNimi } from "../../../../util/userUtil";
+import { PaatosTyyppi } from "../PaatosPageLayout";
 
 interface Props {
   hyvaksymisPaatosVaiheJulkaisu?: HyvaksymisPaatosVaiheJulkaisu | null;
   projekti: ProjektiLisatiedolla;
+  paatosTyyppi: PaatosTyyppi;
 }
 
-export default function HyvaksymisKuulutusLukunakyma({ hyvaksymisPaatosVaiheJulkaisu, projekti }: Props): ReactElement {
+type KasittelynTilaKey = keyof Omit<KasittelynTila, "__typename">;
+
+export default function HyvaksymisKuulutusLukunakyma({ hyvaksymisPaatosVaiheJulkaisu, projekti, paatosTyyppi }: Props): ReactElement {
   const { t } = useTranslation("common");
   const getPdft = (kieli: Kieli | undefined | null) => {
     if (!hyvaksymisPaatosVaiheJulkaisu || !hyvaksymisPaatosVaiheJulkaisu.hyvaksymisPaatosVaihePDFt || !kieli) {
@@ -34,6 +39,8 @@ export default function HyvaksymisKuulutusLukunakyma({ hyvaksymisPaatosVaiheJulk
   const ensisijaisetPDFt = getPdft(hyvaksymisPaatosVaiheJulkaisu?.kielitiedot?.ensisijainenKieli);
   const toissijaisetPDFt = getPdft(hyvaksymisPaatosVaiheJulkaisu?.kielitiedot?.toissijainenKieli);
 
+  const paatosRoute = useMemo(() => paatosTyyppiToKasittelynTilaPaatosRouteMap[paatosTyyppi], [paatosTyyppi]);
+
   if (!hyvaksymisPaatosVaiheJulkaisu || !projekti) {
     return <></>;
   }
@@ -84,9 +91,9 @@ export default function HyvaksymisKuulutusLukunakyma({ hyvaksymisPaatosVaiheJulk
           <p className="vayla-label md:col-span-1">Päätöksen päivä</p>
           <p className="vayla-label md:col-span-3">Päätöksen asianumero</p>
           <p className="md:col-span-1 mb-0">
-            <FormatDate date={projekti.kasittelynTila?.hyvaksymispaatos?.paatoksenPvm} />
+            <FormatDate date={projekti.kasittelynTila?.[paatosRoute]?.paatoksenPvm} />
           </p>
-          <p className="md:col-span-3 mb-0">{projekti.kasittelynTila?.hyvaksymispaatos?.asianumero}</p>
+          <p className="md:col-span-3 mb-0">{projekti.kasittelynTila?.[paatosRoute]?.asianumero}</p>
         </div>
         <p>Päätös ja sen liitteet löytyvät Päätös ja sen liitteenä oleva aineisto -välilehdeltä.</p>
       </Section>
diff --git a/src/components/projekti/paatos/kuulutuksenTiedot/index.tsx b/src/components/projekti/paatos/kuulutuksenTiedot/index.tsx
index 3ca6600d3..adfa4fac2 100644
--- a/src/components/projekti/paatos/kuulutuksenTiedot/index.tsx
+++ b/src/components/projekti/paatos/kuulutuksenTiedot/index.tsx
@@ -1,5 +1,13 @@
 import { yupResolver } from "@hookform/resolvers/yup";
-import { HyvaksymisPaatosVaiheInput, KirjaamoOsoite, TallennaProjektiInput, YhteystietoInput } from "@services/api";
+import {
+  HyvaksymisPaatosVaihe,
+  HyvaksymisPaatosVaiheInput,
+  HyvaksymisPaatosVaiheJulkaisu,
+  KirjaamoOsoite,
+  Projekti,
+  TallennaProjektiInput,
+  YhteystietoInput,
+} from "@services/api";
 import Notification, { NotificationType } from "@components/notification/Notification";
 import React, { ReactElement, useMemo } from "react";
 import { FormProvider, useForm, UseFormProps } from "react-hook-form";
@@ -19,6 +27,7 @@ import PdfPreviewForm from "@components/projekti/PdfPreviewForm";
 import useLeaveConfirm from "src/hooks/useLeaveConfirm";
 import useIsAllowedOnCurrentProjektiRoute from "src/hooks/useIsOnAllowedProjektiRoute";
 import PaatoksenPaiva from "@components/projekti/paatos/kuulutuksenTiedot/PaatoksenPaiva";
+import { PaatosTyyppi } from "../PaatosPageLayout";
 
 export type KuulutuksenTiedotFormValues = Pick<TallennaProjektiInput, "oid"> & {
   hyvaksymisPaatosVaihe: Omit<HyvaksymisPaatosVaiheInput, "hallintoOikeus"> & {
@@ -26,25 +35,33 @@ export type KuulutuksenTiedotFormValues = Pick<TallennaProjektiInput, "oid"> & {
   };
 };
 
-export default function KuulutuksenTiedot(): ReactElement {
-  const { data: projekti } = useProjekti({ revalidateOnMount: true });
+interface Props {
+  paatosTyyppi: PaatosTyyppi;
+  paatosJulkaisut: HyvaksymisPaatosVaiheJulkaisu[] | null | undefined;
+  paatoksenTiedot: HyvaksymisPaatosVaihe | null | undefined;
+}
+
+export default function KuulutuksenTiedot(props: Props): ReactElement {
+  const { data: projekti } = useProjekti();
   const { data: kirjaamoOsoitteet } = useKirjaamoOsoitteet();
-  return <>{projekti && kirjaamoOsoitteet && <KuulutuksenTiedotForm kirjaamoOsoitteet={kirjaamoOsoitteet} projekti={projekti} />}</>;
+  return (
+    <>{projekti && kirjaamoOsoitteet && <KuulutuksenTiedotForm kirjaamoOsoitteet={kirjaamoOsoitteet} projekti={projekti} {...props} />}</>
+  );
 }
 
-interface KuulutuksenTiedotFormProps {
+type KuulutuksenTiedotFormProps = {
   projekti: ProjektiLisatiedolla;
   kirjaamoOsoitteet: KirjaamoOsoite[];
-}
+} & Props;
 
-function KuulutuksenTiedotForm({ projekti, kirjaamoOsoitteet }: KuulutuksenTiedotFormProps) {
+function KuulutuksenTiedotForm({ projekti, kirjaamoOsoitteet, paatosTyyppi }: KuulutuksenTiedotFormProps) {
   const pdfFormRef = React.useRef<React.ElementRef<typeof PdfPreviewForm>>(null);
 
   const defaultValues: KuulutuksenTiedotFormValues = useMemo(() => {
     const yhteysTiedot: YhteystietoInput[] =
-      projekti?.aloitusKuulutus?.kuulutusYhteystiedot?.yhteysTiedot?.map((yt) => removeTypeName(yt)) || [];
+      projekti?.nahtavillaoloVaihe?.kuulutusYhteystiedot?.yhteysTiedot?.map((yt) => removeTypeName(yt)) || [];
 
-    const yhteysHenkilot: string[] = projekti?.aloitusKuulutus?.kuulutusYhteystiedot?.yhteysHenkilot || [];
+    const yhteysHenkilot: string[] = projekti?.nahtavillaoloVaihe?.kuulutusYhteystiedot?.yhteysHenkilot || [];
 
     const formValues: KuulutuksenTiedotFormValues = {
       oid: projekti.oid,
@@ -119,6 +136,7 @@ function KuulutuksenTiedotForm({ projekti, kirjaamoOsoitteet }: KuulutuksenTiedo
             <form>
               <Lukunakyma
                 projekti={projekti}
+                paatosTyyppi={paatosTyyppi}
                 hyvaksymisPaatosVaiheJulkaisu={projekti.hyvaksymisPaatosVaiheJulkaisut[projekti.hyvaksymisPaatosVaiheJulkaisut.length - 1]}
               />
               <Painikkeet projekti={projekti} />
diff --git a/src/hooks/useProjekti.tsx b/src/hooks/useProjekti.tsx
index 45c2232ed..12748f6da 100644
--- a/src/hooks/useProjekti.tsx
+++ b/src/hooks/useProjekti.tsx
@@ -3,9 +3,9 @@ import { api, apiConfig, NykyinenKayttaja, Projekti, KayttajaTyyppi } from "@ser
 import useCurrentUser from "./useCurrentUser";
 import { useRouter } from "next/router";
 
-export function useProjekti(
-  config: SWRConfiguration<ProjektiLisatiedolla | null, any, Fetcher<ProjektiLisatiedolla | null>> | undefined = {}
-) {
+export type useProjektiOptions = SWRConfiguration<ProjektiLisatiedolla | null, any, Fetcher<ProjektiLisatiedolla | null>> | undefined;
+
+export function useProjekti(config: useProjektiOptions = {}) {
   const router = useRouter();
   const oid = typeof router.query.oid === "string" ? router.query.oid : undefined;
   if (!router.route.startsWith("/yllapito")) {
diff --git a/src/pages/yllapito/projekti/[oid]/hyvaksyminen/aineisto.tsx b/src/pages/yllapito/projekti/[oid]/hyvaksyminen/aineisto.tsx
index 56d4f7d28..7feffb89e 100644
--- a/src/pages/yllapito/projekti/[oid]/hyvaksyminen/aineisto.tsx
+++ b/src/pages/yllapito/projekti/[oid]/hyvaksyminen/aineisto.tsx
@@ -1,13 +1,17 @@
 import React, { VFC } from "react";
 import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
-import HyvaksyminenPageLayout from "@components/projekti/paatos/HyvaksyminenPageLayout";
+import HyvaksyminenPageLayout, { PaatosTyyppi } from "@components/projekti/paatos/PaatosPageLayout";
 import ProjektiConsumer from "@components/projekti/ProjektiConsumer";
 import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
 import PaatosAineistotLukutila from "@components/projekti/lukutila/PaatosAineistotLukutila";
 import PaatosAineistot from "@components/projekti/paatos/aineistot/index";
 
 export default function HyvaksyminenAineistoWrapper() {
-  return <ProjektiConsumer>{(projekti) => <HyvaksyminenAineisto projekti={projekti} />}</ProjektiConsumer>;
+  return (
+    <ProjektiConsumer useProjektiOptions={{ revalidateOnMount: true }}>
+      {(projekti) => <HyvaksyminenAineisto projekti={projekti} />}
+    </ProjektiConsumer>
+  );
 }
 
 const HyvaksyminenAineisto: VFC<{ projekti: ProjektiLisatiedolla }> = ({ projekti }) => {
@@ -16,7 +20,7 @@ const HyvaksyminenAineisto: VFC<{ projekti: ProjektiLisatiedolla }> = ({ projekt
 
   const epaaktiivinen = projektiOnEpaaktiivinen(projekti);
   return (
-    <HyvaksyminenPageLayout>
+    <HyvaksyminenPageLayout paatosTyyppi={PaatosTyyppi.HYVAKSYMISPAATOS}>
       {epaaktiivinen && paatosJulkaisu ? (
         <PaatosAineistotLukutila oid={projekti.oid} paatosJulkaisu={paatosJulkaisu} />
       ) : (
diff --git a/src/pages/yllapito/projekti/[oid]/hyvaksyminen/index.tsx b/src/pages/yllapito/projekti/[oid]/hyvaksyminen/index.tsx
index cf423a22f..0d38d0d8c 100644
--- a/src/pages/yllapito/projekti/[oid]/hyvaksyminen/index.tsx
+++ b/src/pages/yllapito/projekti/[oid]/hyvaksyminen/index.tsx
@@ -1,27 +1,32 @@
 import React, { VFC } from "react";
 import KuulutuksenTiedot from "@components/projekti/paatos/kuulutuksenTiedot/index";
 import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
-import HyvaksyminenPageLayout from "@components/projekti/paatos/HyvaksyminenPageLayout";
+import PaatosPageLayout, { PaatosTyyppi } from "@components/projekti/paatos/PaatosPageLayout";
 import ProjektiConsumer from "@components/projekti/ProjektiConsumer";
 import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
 import Lukunakyma from "@components/projekti/paatos/kuulutuksenTiedot/Lukunakyma";
 
 export default function HyvaksyminenWrapper() {
-  return <ProjektiConsumer>{(projekti) => <Hyvaksyminen projekti={projekti} />}</ProjektiConsumer>;
+  return (
+    <ProjektiConsumer useProjektiOptions={{ revalidateOnMount: true }}>
+      {(projekti) => <Hyvaksyminen projekti={projekti} />}
+    </ProjektiConsumer>
+  );
 }
 
 const Hyvaksyminen: VFC<{ projekti: ProjektiLisatiedolla }> = ({ projekti }) => {
-  const julkaisut = projekti?.hyvaksymisPaatosVaiheJulkaisut;
+  const julkaisut = projekti.hyvaksymisPaatosVaiheJulkaisut;
   const paatosJulkaisu = julkaisut ? julkaisut[julkaisut.length - 1] : null;
+  const paatoksenTiedot = projekti.hyvaksymisPaatosVaihe;
 
   const epaaktiivinen = projektiOnEpaaktiivinen(projekti);
   return (
-    <HyvaksyminenPageLayout>
+    <PaatosPageLayout paatosTyyppi={PaatosTyyppi.HYVAKSYMISPAATOS}>
       {epaaktiivinen && paatosJulkaisu ? (
-        <Lukunakyma projekti={projekti} hyvaksymisPaatosVaiheJulkaisu={paatosJulkaisu} />
+        <Lukunakyma projekti={projekti} hyvaksymisPaatosVaiheJulkaisu={paatosJulkaisu} paatosTyyppi={PaatosTyyppi.HYVAKSYMISPAATOS} />
       ) : (
-        <KuulutuksenTiedot />
+        <KuulutuksenTiedot paatosJulkaisut={julkaisut} paatoksenTiedot={paatoksenTiedot} paatosTyyppi={PaatosTyyppi.HYVAKSYMISPAATOS} />
       )}
-    </HyvaksyminenPageLayout>
+    </PaatosPageLayout>
   );
 };
diff --git a/src/pages/yllapito/projekti/[oid]/jatkaminen1/aineisto.tsx b/src/pages/yllapito/projekti/[oid]/jatkaminen1/aineisto.tsx
index 905a1dcb6..4eebb9e76 100644
--- a/src/pages/yllapito/projekti/[oid]/jatkaminen1/aineisto.tsx
+++ b/src/pages/yllapito/projekti/[oid]/jatkaminen1/aineisto.tsx
@@ -1,13 +1,17 @@
 import React, { VFC } from "react";
 import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
-import HyvaksyminenPageLayout from "@components/projekti/paatos/HyvaksyminenPageLayout";
+import HyvaksyminenPageLayout, { PaatosTyyppi } from "@components/projekti/paatos/PaatosPageLayout";
 import ProjektiConsumer from "@components/projekti/ProjektiConsumer";
 import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
 import PaatosAineistotLukutila from "@components/projekti/lukutila/PaatosAineistotLukutila";
 import PaatosAineistot from "@components/projekti/paatos/aineistot/index";
 
 export default function Jatkaminen1AineistoWrapper() {
-  return <ProjektiConsumer>{(projekti) => <Jatkaminen1Aineisto projekti={projekti} />}</ProjektiConsumer>;
+  return (
+    <ProjektiConsumer useProjektiOptions={{ revalidateOnMount: true }}>
+      {(projekti) => <Jatkaminen1Aineisto projekti={projekti} />}
+    </ProjektiConsumer>
+  );
 }
 
 const Jatkaminen1Aineisto: VFC<{ projekti: ProjektiLisatiedolla }> = ({ projekti }) => {
@@ -16,7 +20,7 @@ const Jatkaminen1Aineisto: VFC<{ projekti: ProjektiLisatiedolla }> = ({ projekti
 
   const epaaktiivinen = projektiOnEpaaktiivinen(projekti);
   return (
-    <HyvaksyminenPageLayout>
+    <HyvaksyminenPageLayout paatosTyyppi={PaatosTyyppi.JATKOPAATOS1}>
       {epaaktiivinen && paatosJulkaisu ? (
         <PaatosAineistotLukutila oid={projekti.oid} paatosJulkaisu={paatosJulkaisu} />
       ) : (
diff --git a/src/pages/yllapito/projekti/[oid]/jatkaminen1/index.tsx b/src/pages/yllapito/projekti/[oid]/jatkaminen1/index.tsx
index caa685def..054fcf600 100644
--- a/src/pages/yllapito/projekti/[oid]/jatkaminen1/index.tsx
+++ b/src/pages/yllapito/projekti/[oid]/jatkaminen1/index.tsx
@@ -1,13 +1,17 @@
 import React, { VFC } from "react";
 import KuulutuksenTiedot from "@components/projekti/paatos/kuulutuksenTiedot/index";
 import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
-import HyvaksyminenPageLayout from "@components/projekti/paatos/HyvaksyminenPageLayout";
+import HyvaksyminenPageLayout, { PaatosTyyppi } from "@components/projekti/paatos/PaatosPageLayout";
 import ProjektiConsumer from "@components/projekti/ProjektiConsumer";
 import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
 import Lukunakyma from "@components/projekti/paatos/kuulutuksenTiedot/Lukunakyma";
 
 export default function Jatkaminen1Wrapper() {
-  return <ProjektiConsumer>{(projekti) => <Jatkaminen1 projekti={projekti} />}</ProjektiConsumer>;
+  return (
+    <ProjektiConsumer useProjektiOptions={{ revalidateOnMount: true }}>
+      {(projekti) => <Jatkaminen1 projekti={projekti} />}
+    </ProjektiConsumer>
+  );
 }
 
 const Jatkaminen1: VFC<{ projekti: ProjektiLisatiedolla }> = ({ projekti }) => {
@@ -16,11 +20,11 @@ const Jatkaminen1: VFC<{ projekti: ProjektiLisatiedolla }> = ({ projekti }) => {
 
   const epaaktiivinen = projektiOnEpaaktiivinen(projekti);
   return (
-    <HyvaksyminenPageLayout>
+    <HyvaksyminenPageLayout paatosTyyppi={PaatosTyyppi.JATKOPAATOS1}>
       {epaaktiivinen && paatosJulkaisu ? (
-        <Lukunakyma projekti={projekti} hyvaksymisPaatosVaiheJulkaisu={paatosJulkaisu} />
+        <Lukunakyma projekti={projekti} hyvaksymisPaatosVaiheJulkaisu={paatosJulkaisu} paatosTyyppi={PaatosTyyppi.JATKOPAATOS1} />
       ) : (
-        <KuulutuksenTiedot />
+        <KuulutuksenTiedot paatosTyyppi={PaatosTyyppi.JATKOPAATOS1} />
       )}
     </HyvaksyminenPageLayout>
   );

From 518c14bc1e22f88901e3d1d408f7f985d801640c Mon Sep 17 00:00:00 2001
From: tomi korkalainen <tomi.korkalainen@cgi.com>
Date: Wed, 9 Nov 2022 12:23:32 +0200
Subject: [PATCH 08/14] jatkopaatos1 kuntoon

---
 .../9-hyvaksyntavaihe.spec.js                 | 14 ++--
 .../2-perusta-projekti/hyvaksyntavaihe.js     |  6 +-
 .../4-migraatio/1-migraatio.spec.js           |  4 +-
 i18n.js                                       |  4 +-
 .../projekti/paatos/PaatosAineistotPage.tsx   | 26 ++++++
 .../paatos/PaatosKuulutuksenTiedotPage.tsx    | 25 ++++++
 .../projekti/paatos/PaatosPageLayout.tsx      | 23 ++---
 .../HyvaksymisPaatosVaihePainikkeet.tsx       | 21 +++--
 .../projekti/paatos/aineistot/Lukunakyma.tsx  | 40 ++++-----
 .../paatos/aineistot/Muokkausnakyma.tsx       | 25 ++++--
 .../projekti/paatos/aineistot/index.tsx       | 20 +++--
 .../IlmoituksenVastaanottajat.tsx             | 75 ++++++-----------
 .../KuulutuksenJaIlmoituksenEsikatselu.tsx    | 49 +++++++----
 .../KuulutuksessaEsitettavatYhteystiedot.tsx  | 51 ++++++-----
 .../KuulutusJaJulkaisuPaiva.tsx               | 23 ++---
 .../paatos/kuulutuksenTiedot/Lukunakyma.tsx   | 50 +++++------
 .../kuulutuksenTiedot/MuutoksenHaku.tsx       | 19 ++---
 .../kuulutuksenTiedot/PaatoksenPaiva.tsx      | 15 +++-
 .../paatos/kuulutuksenTiedot/Painikkeet.tsx   | 27 +++---
 .../paatos/kuulutuksenTiedot/index.tsx        | 84 +++++++++----------
 .../SuunnitteluvaihePageLayout.tsx            |  8 +-
 src/hooks/useProjekti.tsx                     |  2 +-
 src/hooks/useProjektiJulkinen.tsx             |  2 +-
 .../projekti/[oid]/hyvaksyminen/aineisto.tsx  | 31 -------
 .../projekti/[oid]/hyvaksyminen/index.tsx     | 32 -------
 .../[oid]/hyvaksymispaatos/aineisto.tsx       | 12 +++
 .../projekti/[oid]/hyvaksymispaatos/index.tsx | 12 +++
 .../projekti/[oid]/jatkaminen1/aineisto.tsx   | 27 +-----
 .../projekti/[oid]/jatkaminen1/index.tsx      | 27 +-----
 src/schemas/hyvaksymispaatosKuulutus.tsx      |  2 +-
 src/util/getPaatosSpecificData.ts             | 76 +++++++++++++++++
 src/util/getValidatedKierrosId.ts             |  2 +-
 32 files changed, 443 insertions(+), 391 deletions(-)
 create mode 100644 src/components/projekti/paatos/PaatosAineistotPage.tsx
 create mode 100644 src/components/projekti/paatos/PaatosKuulutuksenTiedotPage.tsx
 delete mode 100644 src/pages/yllapito/projekti/[oid]/hyvaksyminen/aineisto.tsx
 delete mode 100644 src/pages/yllapito/projekti/[oid]/hyvaksyminen/index.tsx
 create mode 100644 src/pages/yllapito/projekti/[oid]/hyvaksymispaatos/aineisto.tsx
 create mode 100644 src/pages/yllapito/projekti/[oid]/hyvaksymispaatos/index.tsx
 create mode 100644 src/util/getPaatosSpecificData.ts

diff --git a/cypress/integration/2-perusta-projekti/9-hyvaksyntavaihe.spec.js b/cypress/integration/2-perusta-projekti/9-hyvaksyntavaihe.spec.js
index a3361b2b2..c7283f20c 100644
--- a/cypress/integration/2-perusta-projekti/9-hyvaksyntavaihe.spec.js
+++ b/cypress/integration/2-perusta-projekti/9-hyvaksyntavaihe.spec.js
@@ -2,7 +2,7 @@
 import dayjs from "dayjs";
 import { formatDate } from "../../../src/util/dateUtils";
 import { ProjektiTestCommand } from "../../../common/testUtil.dev";
-import { lisaaPaatosJaAineistot, tallennaKasittelynTilaJaSiirraMenneisyyteen } from './hyvaksyntavaihe';
+import { lisaaPaatosJaAineistot, tallennaKasittelynTilaJaSiirraMenneisyyteen } from "./hyvaksyntavaihe";
 
 const projektiNimi = Cypress.env("projektiNimi");
 const oid = Cypress.env("oid");
@@ -50,17 +50,17 @@ describe("9 - Projektin hyvaksymispaatosavaiheen kuulutustiedot", () => {
     cy.get("#kuulutuksentiedot_tab").click();
 
     const today = formatDate(dayjs());
-    cy.get('[name="hyvaksymisPaatosVaihe.kuulutusPaiva"]').should("be.enabled").type(today, {
+    cy.get('[name="paatos.kuulutusPaiva"]').should("be.enabled").type(today, {
       waitForAnimations: true,
     });
 
-    cy.get('[name="hyvaksymisPaatosVaihe.hallintoOikeus"]').select("HELSINKI");
-    cy.get('[name="hyvaksymisPaatosVaihe.ilmoituksenVastaanottajat.kunnat.0.sahkoposti"]').clear().type("test@vayla.fi");
-    cy.get('[name="hyvaksymisPaatosVaihe.ilmoituksenVastaanottajat.kunnat.1.sahkoposti"]').clear().type("test@vayla.fi");
+    cy.get('[name="paatos.hallintoOikeus"]').select("HELSINKI");
+    cy.get('[name="paatos.ilmoituksenVastaanottajat.kunnat.0.sahkoposti"]').clear().type("test@vayla.fi");
+    cy.get('[name="paatos.ilmoituksenVastaanottajat.kunnat.1.sahkoposti"]').clear().type("test@vayla.fi");
 
     cy.get("#save_and_send_for_acceptance").click();
     cy.contains("Lähetys onnistui", { timeout: 30000 });
-    cy.get("#kuulutuksentiedot_luku_tab").click();
+    cy.get("#kuulutuksentiedot_tab").click();
     cy.get("#button_open_acceptance_dialog")
       .should("be.enabled")
       .scrollIntoView({ offset: { top: 500, left: 0 } })
@@ -70,7 +70,7 @@ describe("9 - Projektin hyvaksymispaatosavaiheen kuulutustiedot", () => {
     cy.contains("Hyväksyminen onnistui", { timeout: 30000 });
 
     cy.reload();
-    cy.get("#kuulutuksentiedot_luku_tab").click();
+    cy.get("#kuulutuksentiedot_tab").click();
 
     cy.contains("Kuulutus nähtäville asettamisesta on julkaistu");
 
diff --git a/cypress/integration/2-perusta-projekti/hyvaksyntavaihe.js b/cypress/integration/2-perusta-projekti/hyvaksyntavaihe.js
index bbad02516..8c67a3d65 100644
--- a/cypress/integration/2-perusta-projekti/hyvaksyntavaihe.js
+++ b/cypress/integration/2-perusta-projekti/hyvaksyntavaihe.js
@@ -1,6 +1,6 @@
-import { formatDate } from '../../../src/util/dateUtils';
-import dayjs from 'dayjs';
-import { selectAllAineistotFromCategory } from '../../support/util';
+import { formatDate } from "../../../src/util/dateUtils";
+import dayjs from "dayjs";
+import { selectAllAineistotFromCategory } from "../../support/util";
 
 export function tallennaKasittelynTilaJaSiirraMenneisyyteen(oid, projektiNimi, asianumero) {
   cy.visit(Cypress.env("host") + "/yllapito/projekti/" + oid + "/kasittelyntila", {
diff --git a/cypress/integration/4-migraatio/1-migraatio.spec.js b/cypress/integration/4-migraatio/1-migraatio.spec.js
index 4448cac19..76175a86a 100644
--- a/cypress/integration/4-migraatio/1-migraatio.spec.js
+++ b/cypress/integration/4-migraatio/1-migraatio.spec.js
@@ -169,7 +169,7 @@ describe("Migraatio", () => {
 
     cy.get("#save_and_send_for_acceptance").click();
     cy.contains("Lähetys onnistui", { timeout: 30000 });
-    cy.get("#kuulutuksentiedot_luku_tab").click({ force: true });
+    cy.get("#kuulutuksentiedot").click({ force: true });
     cy.get("#button_open_acceptance_dialog")
       .should("be.enabled")
       .scrollIntoView({ offset: { top: 500, left: 0 } })
@@ -179,7 +179,7 @@ describe("Migraatio", () => {
     cy.contains("Hyväksyminen onnistui", { timeout: 30000 });
 
     cy.reload();
-    cy.get("#kuulutuksentiedot_luku_tab").click({ force: true });
+    cy.get("#kuulutuksentiedot").click({ force: true });
 
     cy.contains("Kuulutus nähtäville asettamisesta on julkaistu");
   });
diff --git a/i18n.js b/i18n.js
index 973c91234..86061c0e6 100644
--- a/i18n.js
+++ b/i18n.js
@@ -9,8 +9,8 @@ module.exports = {
     "/suunnitelma/[oid]/nahtavillaolo": ["aineisto"],
     "/suunnitelma/[oid]/lausuntopyyntoaineistot": ["aineisto"],
     "/yllapito/projekti/[oid]/nahtavillaolo/aineisto": ["aineisto"],
-    "/yllapito/projekti/[oid]/hyvaksymispaatos": ["aineisto"],
-    "/yllapito/projekti/[oid]/jatkaminen1": ["aineisto"],
+    "/yllapito/projekti/[oid]/hyvaksymispaatos/aineisto": ["aineisto"],
+    "/yllapito/projekti/[oid]/jatkaminen1/aineisto": ["aineisto"],
     "/suunnitelma/[oid]/hyvaksymismenettelyssa": ["hyvaksymismenettelyssa"],
     "/suunnitelma/[oid]/suunnittelu": ["suunnittelu"],
   },
diff --git a/src/components/projekti/paatos/PaatosAineistotPage.tsx b/src/components/projekti/paatos/PaatosAineistotPage.tsx
new file mode 100644
index 000000000..16a6b4ab8
--- /dev/null
+++ b/src/components/projekti/paatos/PaatosAineistotPage.tsx
@@ -0,0 +1,26 @@
+import React, { useMemo, VFC } from "react";
+import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
+import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
+import { getPaatosSpecificData, PaatosTyyppi } from "src/util/getPaatosSpecificData";
+import PaatosAineistotLukutila from "../lukutila/PaatosAineistotLukutila";
+import PaatosAineistot from "@components/projekti/paatos/aineistot/index";
+import PaatosPageLayout from "./PaatosPageLayout";
+
+export const PaatoksenAineistotPage: VFC<{ projekti: ProjektiLisatiedolla; paatosTyyppi: PaatosTyyppi }> = ({ projekti, paatosTyyppi }) => {
+  const { viimeisinJulkaisu, julkaisematonPaatos, julkaisut } = useMemo(
+    () => getPaatosSpecificData(projekti, paatosTyyppi),
+    [paatosTyyppi, projekti]
+  );
+
+  const epaaktiivinen = projektiOnEpaaktiivinen(projekti);
+
+  return (
+    <PaatosPageLayout paatosTyyppi={paatosTyyppi}>
+      {epaaktiivinen && viimeisinJulkaisu ? (
+        <PaatosAineistotLukutila oid={projekti.oid} paatosJulkaisu={viimeisinJulkaisu} />
+      ) : (
+        <PaatosAineistot projekti={projekti} julkaisut={julkaisut} julkaisematonPaatos={julkaisematonPaatos} paatosTyyppi={paatosTyyppi} />
+      )}
+    </PaatosPageLayout>
+  );
+};
diff --git a/src/components/projekti/paatos/PaatosKuulutuksenTiedotPage.tsx b/src/components/projekti/paatos/PaatosKuulutuksenTiedotPage.tsx
new file mode 100644
index 000000000..b22a0168b
--- /dev/null
+++ b/src/components/projekti/paatos/PaatosKuulutuksenTiedotPage.tsx
@@ -0,0 +1,25 @@
+import React, { useMemo, VFC } from "react";
+import KuulutuksenTiedot from "@components/projekti/paatos/kuulutuksenTiedot/index";
+import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
+import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
+import Lukunakyma from "@components/projekti/paatos/kuulutuksenTiedot/Lukunakyma";
+import { getPaatosSpecificData, PaatosTyyppi } from "src/util/getPaatosSpecificData";
+import PaatosPageLayout from "./PaatosPageLayout";
+
+export const PaatoksenKuulutuksenTiedotPage: VFC<{ projekti: ProjektiLisatiedolla; paatosTyyppi: PaatosTyyppi }> = ({
+  projekti,
+  paatosTyyppi,
+}) => {
+  const { viimeisinJulkaisu } = useMemo(() => getPaatosSpecificData(projekti, paatosTyyppi), [paatosTyyppi, projekti]);
+
+  const epaaktiivinen = projektiOnEpaaktiivinen(projekti);
+  return (
+    <PaatosPageLayout paatosTyyppi={paatosTyyppi}>
+      {epaaktiivinen && viimeisinJulkaisu ? (
+        <Lukunakyma projekti={projekti} julkaisu={viimeisinJulkaisu} paatosTyyppi={paatosTyyppi} />
+      ) : (
+        <KuulutuksenTiedot projekti={projekti} paatosTyyppi={paatosTyyppi} />
+      )}
+    </PaatosPageLayout>
+  );
+};
diff --git a/src/components/projekti/paatos/PaatosPageLayout.tsx b/src/components/projekti/paatos/PaatosPageLayout.tsx
index a23d8fdd3..b01bb1202 100644
--- a/src/components/projekti/paatos/PaatosPageLayout.tsx
+++ b/src/components/projekti/paatos/PaatosPageLayout.tsx
@@ -5,19 +5,14 @@ import { Link, Tabs } from "@mui/material";
 import { useRouter } from "next/router";
 import { UrlObject } from "url";
 import { LinkTab, LinkTabProps } from "@components/layout/LinkTab";
-import ProjektiConsumer from "../ProjektiConsumer";
-import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
-import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
 import { HyvaksymisPaatosVaiheTila, NahtavillaoloVaiheTila } from "@services/api";
 import Notification, { NotificationType } from "@components/notification/Notification";
 import { examineKuulutusPaiva } from "src/util/aloitusKuulutusUtil";
 import FormatDate from "@components/FormatDate";
-
-export enum PaatosTyyppi {
-  HYVAKSYMISPAATOS = "HYVAKSYMISPAATOS",
-  JATKOPAATOS1 = "JATKOPAATOS1",
-  JATKOPAATOS2 = "JATKOPAATOS2",
-}
+import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
+import ProjektiConsumer from "@components/projekti/ProjektiConsumer";
+import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
+import { PaatosTyyppi } from "src/util/getPaatosSpecificData";
 
 interface PaatosTyyppiSpecificData {
   paatosRoutePart: string;
@@ -25,24 +20,24 @@ interface PaatosTyyppiSpecificData {
 }
 
 const paatosTyyppiSpecificContentMap: Record<PaatosTyyppi, PaatosTyyppiSpecificData> = {
-  HYVAKSYMISPAATOS: { paatosRoutePart: "hyvaksyminen", pageTitle: "Kuulutus hyväksymispäätöksestä" },
+  HYVAKSYMISPAATOS: { paatosRoutePart: "hyvaksymispaatos", pageTitle: "Kuulutus hyväksymispäätöksestä" },
   JATKOPAATOS1: { paatosRoutePart: "jatkaminen1", pageTitle: "Kuulutus hyväksymispäätöksen jatkamisesta" },
   JATKOPAATOS2: { paatosRoutePart: "jatkaminen2", pageTitle: "Kuulutus hyväksymispäätöksen jatkamisesta" },
 };
 
-export default function PaatosPageLayoutWrapper({ children, paatosTyyppi }: { children?: ReactNode; paatosTyyppi: PaatosTyyppi }) {
+export default function PaatosPageLayout({ children, paatosTyyppi }: { children?: ReactNode; paatosTyyppi: PaatosTyyppi }) {
   return (
     <ProjektiConsumer>
       {(projekti) => (
-        <PaatosPageLayout projekti={projekti} disableTabs={!projekti} paatosTyyppi={paatosTyyppi}>
+        <PaatosPageLayoutContent projekti={projekti} disableTabs={!projekti} paatosTyyppi={paatosTyyppi}>
           {children}
-        </PaatosPageLayout>
+        </PaatosPageLayoutContent>
       )}
     </ProjektiConsumer>
   );
 }
 
-function PaatosPageLayout({
+function PaatosPageLayoutContent({
   projekti,
   disableTabs,
   paatosTyyppi,
diff --git a/src/components/projekti/paatos/aineistot/HyvaksymisPaatosVaihePainikkeet.tsx b/src/components/projekti/paatos/aineistot/HyvaksymisPaatosVaihePainikkeet.tsx
index 20d2d06fc..5a35c4c4d 100644
--- a/src/components/projekti/paatos/aineistot/HyvaksymisPaatosVaihePainikkeet.tsx
+++ b/src/components/projekti/paatos/aineistot/HyvaksymisPaatosVaihePainikkeet.tsx
@@ -9,21 +9,22 @@ import { useFormContext } from "react-hook-form";
 import { useProjekti } from "src/hooks/useProjekti";
 import useSnackbars from "src/hooks/useSnackbars";
 import deleteFieldArrayIds from "src/util/deleteFieldArrayIds";
+import { paatosSpecificRoutesMap, PaatosTyyppi } from "src/util/getPaatosSpecificData";
 import { HyvaksymisPaatosVaiheAineistotFormValues } from "./Muokkausnakyma";
 
-const mapFormValuesToTallennaProjektiInput = ({
-  oid,
-  hyvaksymisPaatos,
-  aineistoNahtavilla,
-}: HyvaksymisPaatosVaiheAineistotFormValues): TallennaProjektiInput => {
+const mapFormValuesToTallennaProjektiInput = (
+  { oid, hyvaksymisPaatos, aineistoNahtavilla }: HyvaksymisPaatosVaiheAineistotFormValues,
+  paatosTyyppi: PaatosTyyppi
+): TallennaProjektiInput => {
   const aineistoNahtavillaFlat = Object.values(aineistoNahtavilla).flat();
   deleteFieldArrayIds(aineistoNahtavillaFlat);
   deleteFieldArrayIds(hyvaksymisPaatos);
+  const { paatosVaiheAvain } = paatosSpecificRoutesMap[paatosTyyppi];
 
-  return { oid, hyvaksymisPaatosVaihe: { aineistoNahtavilla: aineistoNahtavillaFlat, hyvaksymisPaatos } };
+  return { oid, [paatosVaiheAvain]: { aineistoNahtavilla: aineistoNahtavillaFlat, hyvaksymisPaatos } };
 };
 
-export default function NahtavillaoloPainikkeet() {
+export default function PaatosPainikkeet({ paatosTyyppi }: { paatosTyyppi: PaatosTyyppi }) {
   const { mutate: reloadProjekti } = useProjekti();
   const [isFormSubmitting, setIsFormSubmitting] = useState(false);
   const { showSuccessMessage, showErrorMessage } = useSnackbars();
@@ -38,7 +39,7 @@ export default function NahtavillaoloPainikkeet() {
   const saveDraft = async (formData: HyvaksymisPaatosVaiheAineistotFormValues) => {
     setIsFormSubmitting(true);
     try {
-      await saveSuunnitteluvaihe(mapFormValuesToTallennaProjektiInput(formData));
+      await saveSuunnitteluvaihe(mapFormValuesToTallennaProjektiInput(formData, paatosTyyppi));
       reloadProjekti();
       reset(formData);
       showSuccessMessage("Tallennus onnistui!");
@@ -53,7 +54,9 @@ export default function NahtavillaoloPainikkeet() {
     <>
       <Section noDivider>
         <Stack justifyContent={{ md: "flex-end" }} direction={{ xs: "column", md: "row" }}>
-          <Button id="save_hyvaksymispaatosvaihe_draft" onClick={handleSubmit(saveDraft)}>Tallenna Luonnos</Button>
+          <Button id="save_hyvaksymispaatosvaihe_draft" onClick={handleSubmit(saveDraft)}>
+            Tallenna Luonnos
+          </Button>
           <Button id="save_and_send_for_acceptance" primary disabled onClick={undefined}>
             Lähetä Hyväksyttäväksi
           </Button>
diff --git a/src/components/projekti/paatos/aineistot/Lukunakyma.tsx b/src/components/projekti/paatos/aineistot/Lukunakyma.tsx
index aadb8b5fa..d3da2e7f9 100644
--- a/src/components/projekti/paatos/aineistot/Lukunakyma.tsx
+++ b/src/components/projekti/paatos/aineistot/Lukunakyma.tsx
@@ -6,24 +6,25 @@ import { HyvaksymisPaatosVaiheJulkaisu, HyvaksymisPaatosVaiheTila } from "@servi
 import { AineistoKategoria, aineistoKategoriat, getNestedAineistoMaaraForCategory } from "common/aineistoKategoriat";
 import useTranslation from "next-translate/useTranslation";
 import React, { FC, useMemo } from "react";
-import { useProjekti } from "src/hooks/useProjekti";
+import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
 import { formatDate, formatDateTime } from "src/util/dateUtils";
+import { getPaatosSpecificData, PaatosTyyppi } from "src/util/getPaatosSpecificData";
 import { examineJulkaisuPaiva } from "../../../../util/dateUtils";
 
-export default function Lukunakyma() {
-  const { data: projekti } = useProjekti();
+interface Props {
+  projekti: ProjektiLisatiedolla;
+  paatosTyyppi: PaatosTyyppi;
+}
 
-  const julkaisu = useMemo(
-    () => projekti?.hyvaksymisPaatosVaiheJulkaisut?.[projekti.hyvaksymisPaatosVaiheJulkaisut.length - 1],
-    [projekti]
-  );
+export default function Lukunakyma({ projekti, paatosTyyppi }: Props) {
+  const { viimeisinJulkaisu } = useMemo(() => getPaatosSpecificData(projekti, paatosTyyppi), [paatosTyyppi, projekti]);
 
   const { published } = examineJulkaisuPaiva(
-    julkaisu?.tila === HyvaksymisPaatosVaiheTila.HYVAKSYTTY,
-    julkaisu?.kuulutusPaiva
+    viimeisinJulkaisu?.tila === HyvaksymisPaatosVaiheTila.HYVAKSYTTY,
+    viimeisinJulkaisu?.kuulutusPaiva
   );
 
-  if (!projekti || !julkaisu) {
+  if (!projekti || !viimeisinJulkaisu) {
     return null;
   }
 
@@ -34,21 +35,16 @@ export default function Lukunakyma() {
         {published && (
           <p>
             Aineistot ovat nähtävillä palvelun julkisella puolella
-            {" " + formatDate(julkaisu.kuulutusVaihePaattyyPaiva) + " "}
+            {" " + formatDate(viimeisinJulkaisu.kuulutusVaihePaattyyPaiva) + " "}
             saakka.
           </p>
         )}
         <p>Päätös</p>
-        {julkaisu && julkaisu.hyvaksymisPaatos && (
+        {viimeisinJulkaisu && viimeisinJulkaisu.hyvaksymisPaatos && (
           <Stack direction="column" rowGap={2}>
-            {julkaisu.hyvaksymisPaatos.map((aineisto) => (
+            {viimeisinJulkaisu.hyvaksymisPaatos.map((aineisto) => (
               <span key={aineisto.dokumenttiOid}>
-                <HassuAineistoNimiExtLink
-                  tiedostoPolku={aineisto.tiedosto}
-                  aineistoNimi={aineisto.nimi}
-                  sx={{ mr: 3 }}
-                  target="_blank"
-                />
+                <HassuAineistoNimiExtLink tiedostoPolku={aineisto.tiedosto} aineistoNimi={aineisto.nimi} sx={{ mr: 3 }} target="_blank" />
                 {aineisto.tuotu && formatDateTime(aineisto.tuotu)}
               </span>
             ))}
@@ -57,7 +53,7 @@ export default function Lukunakyma() {
         <p className="mt-8">Päätöksen liitteenä oleva aineisto</p>
         <AineistoNahtavillaAccordion
           kategoriat={aineistoKategoriat.listKategoriat()}
-          julkaisu={julkaisu as HyvaksymisPaatosVaiheJulkaisu}
+          julkaisu={viimeisinJulkaisu as HyvaksymisPaatosVaiheJulkaisu}
         />
       </Section>
     </>
@@ -102,9 +98,7 @@ const AineistoNahtavillaAccordion: FC<AineistoNahtavillaAccordionProps> = ({ jul
                     ))}
                 </Stack>
               )}
-              {kategoria.alaKategoriat && (
-                <AineistoNahtavillaAccordion julkaisu={julkaisu} kategoriat={kategoria.alaKategoriat} />
-              )}
+              {kategoria.alaKategoriat && <AineistoNahtavillaAccordion julkaisu={julkaisu} kategoriat={kategoria.alaKategoriat} />}
             </>
           ),
         })),
diff --git a/src/components/projekti/paatos/aineistot/Muokkausnakyma.tsx b/src/components/projekti/paatos/aineistot/Muokkausnakyma.tsx
index 957efa4f2..56b6bdc8b 100644
--- a/src/components/projekti/paatos/aineistot/Muokkausnakyma.tsx
+++ b/src/components/projekti/paatos/aineistot/Muokkausnakyma.tsx
@@ -10,6 +10,7 @@ import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
 import { aineistoKategoriat } from "common/aineistoKategoriat";
 import useLeaveConfirm from "src/hooks/useLeaveConfirm";
 import useIsAllowedOnCurrentProjektiRoute from "src/hooks/useIsOnAllowedProjektiRoute";
+import { PaatosSpecificData, PaatosTyyppi } from "src/util/getPaatosSpecificData";
 
 interface AineistoNahtavilla {
   [kategoriaId: string]: AineistoInput[];
@@ -37,20 +38,30 @@ const getDefaultValueForAineistoNahtavilla = (aineistot: Aineisto[] | undefined
   }, {});
 };
 
-export default function Muokkausnakyma(): ReactElement {
+export default function Muokkausnakyma({
+  julkaisematonPaatos,
+  paatosTyyppi,
+}: Pick<PaatosSpecificData, "julkaisematonPaatos"> & { paatosTyyppi: PaatosTyyppi }): ReactElement {
   const { data: projekti } = useProjekti();
 
-  return <>{projekti && <MuokkausnakymaForm projekti={projekti} />}</>;
+  return (
+    <>{projekti && <MuokkausnakymaForm projekti={projekti} julkaisematonPaatos={julkaisematonPaatos} paatosTyyppi={paatosTyyppi} />}</>
+  );
 }
 
 interface MuokkausnakymaFormProps {
   projekti: ProjektiLisatiedolla;
+  paatosTyyppi: PaatosTyyppi;
 }
 
-function MuokkausnakymaForm({ projekti }: MuokkausnakymaFormProps) {
+function MuokkausnakymaForm({
+  projekti,
+  julkaisematonPaatos,
+  paatosTyyppi,
+}: MuokkausnakymaFormProps & Pick<PaatosSpecificData, "julkaisematonPaatos">) {
   const defaultValues: HyvaksymisPaatosVaiheAineistotFormValues = useMemo(() => {
     const hyvaksymisPaatos: AineistoInput[] =
-      projekti.hyvaksymisPaatosVaihe?.hyvaksymisPaatos?.map(({ dokumenttiOid, nimi, jarjestys }) => ({
+      julkaisematonPaatos?.hyvaksymisPaatos?.map(({ dokumenttiOid, nimi, jarjestys }) => ({
         dokumenttiOid,
         jarjestys,
         nimi,
@@ -58,10 +69,10 @@ function MuokkausnakymaForm({ projekti }: MuokkausnakymaFormProps) {
 
     return {
       oid: projekti.oid,
-      aineistoNahtavilla: getDefaultValueForAineistoNahtavilla(projekti.hyvaksymisPaatosVaihe?.aineistoNahtavilla),
+      aineistoNahtavilla: getDefaultValueForAineistoNahtavilla(julkaisematonPaatos?.aineistoNahtavilla),
       hyvaksymisPaatos,
     };
-  }, [projekti]);
+  }, [julkaisematonPaatos, projekti.oid]);
 
   const formOptions: UseFormProps<HyvaksymisPaatosVaiheAineistotFormValues> = {
     resolver: yupResolver(nahtavillaoloAineistotSchema, { abortEarly: false, recursive: true }),
@@ -95,7 +106,7 @@ function MuokkausnakymaForm({ projekti }: MuokkausnakymaFormProps) {
               paatosSubtitle: "Päätös *",
             }}
           />
-          <HyvaksymisPaatosVaihePainikkeet />
+          <HyvaksymisPaatosVaihePainikkeet paatosTyyppi={paatosTyyppi} />
         </fieldset>
       </form>
     </FormProvider>
diff --git a/src/components/projekti/paatos/aineistot/index.tsx b/src/components/projekti/paatos/aineistot/index.tsx
index 4e4235df2..6adfa15b1 100644
--- a/src/components/projekti/paatos/aineistot/index.tsx
+++ b/src/components/projekti/paatos/aineistot/index.tsx
@@ -1,11 +1,19 @@
 import React from "react";
-import { useProjekti } from "src/hooks/useProjekti";
+import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
+import { PaatosSpecificData, PaatosTyyppi } from "src/util/getPaatosSpecificData";
 import Lukunakyma from "./Lukunakyma";
 import Muokkausnakyma from "./Muokkausnakyma";
 
-export default function Aineistot() {
-  const { data: projekti } = useProjekti();
-
-  const voiMuokata = !projekti?.hyvaksymisPaatosVaiheJulkaisut?.length;
-  return voiMuokata ? <Muokkausnakyma /> : <Lukunakyma />;
+export default function Aineistot({
+  paatosTyyppi,
+  julkaisematonPaatos,
+  julkaisut,
+  projekti,
+}: { paatosTyyppi: PaatosTyyppi; projekti: ProjektiLisatiedolla } & Pick<PaatosSpecificData, "julkaisematonPaatos" | "julkaisut">) {
+  const voiMuokata = !julkaisut?.length;
+  return voiMuokata ? (
+    <Muokkausnakyma julkaisematonPaatos={julkaisematonPaatos} paatosTyyppi={paatosTyyppi} />
+  ) : (
+    <Lukunakyma paatosTyyppi={paatosTyyppi} projekti={projekti} />
+  );
 }
diff --git a/src/components/projekti/paatos/kuulutuksenTiedot/IlmoituksenVastaanottajat.tsx b/src/components/projekti/paatos/kuulutuksenTiedot/IlmoituksenVastaanottajat.tsx
index eca62d71c..387245881 100644
--- a/src/components/projekti/paatos/kuulutuksenTiedot/IlmoituksenVastaanottajat.tsx
+++ b/src/components/projekti/paatos/kuulutuksenTiedot/IlmoituksenVastaanottajat.tsx
@@ -6,13 +6,14 @@ import { Controller, FieldError, useFieldArray, useFormContext } from "react-hoo
 import { formatProperNoun } from "common/util/formatProperNoun";
 import useTranslation from "next-translate/useTranslation";
 import IconButton from "@components/button/IconButton";
-import { KuntaVastaanottajaInput, HyvaksymisPaatosVaihe, ViranomaisVastaanottajaInput } from "@services/api";
+import { HyvaksymisPaatosVaihe, KuntaVastaanottajaInput } from "@services/api";
 import Section from "@components/layout/Section";
 import SectionContent from "@components/layout/SectionContent";
 import HassuGrid from "@components/HassuGrid";
 import dayjs from "dayjs";
 import useKirjaamoOsoitteet from "src/hooks/useKirjaamoOsoitteet";
 import { kuntametadata } from "../../../../../common/kuntametadata";
+import { KuulutuksenTiedotFormValues } from "src/components/projekti/paatos/kuulutuksenTiedot/index";
 
 interface HelperType {
   kunnat?: FieldError | { nimi?: FieldError | undefined; sahkoposti?: FieldError | undefined }[] | undefined;
@@ -20,19 +21,10 @@ interface HelperType {
 }
 
 interface Props {
-  hyvaksymisPaatosVaihe: HyvaksymisPaatosVaihe | null | undefined;
+  paatosVaihe: HyvaksymisPaatosVaihe | null | undefined;
 }
 
-type FormFields = {
-  hyvaksymisPaatosVaihe: {
-    ilmoituksenVastaanottajat: {
-      kunnat: Array<KuntaVastaanottajaInput>;
-      viranomaiset: Array<ViranomaisVastaanottajaInput>;
-    };
-  };
-};
-
-export default function IlmoituksenVastaanottajat({ hyvaksymisPaatosVaihe }: Props): ReactElement {
+export default function IlmoituksenVastaanottajat({ paatosVaihe }: Props): ReactElement {
   const { t, lang } = useTranslation("commonFI");
   const { data: kirjaamoOsoitteet } = useKirjaamoOsoitteet();
 
@@ -44,13 +36,13 @@ export default function IlmoituksenVastaanottajat({ hyvaksymisPaatosVaihe }: Pro
     formState: { errors },
     setValue,
     watch,
-  } = useFormContext<FormFields>();
+  } = useFormContext<KuulutuksenTiedotFormValues>();
 
-  const ilmoituksenVastaanottajat = watch("hyvaksymisPaatosVaihe.ilmoituksenVastaanottajat");
+  const ilmoituksenVastaanottajat = watch("paatos.ilmoituksenVastaanottajat");
 
   const { fields: kuntaFields } = useFieldArray({
     control,
-    name: "hyvaksymisPaatosVaihe.ilmoituksenVastaanottajat.kunnat",
+    name: "paatos.ilmoituksenVastaanottajat.kunnat",
   });
 
   const {
@@ -59,11 +51,11 @@ export default function IlmoituksenVastaanottajat({ hyvaksymisPaatosVaihe }: Pro
     remove,
   } = useFieldArray({
     control,
-    name: "hyvaksymisPaatosVaihe.ilmoituksenVastaanottajat.viranomaiset",
+    name: "paatos.ilmoituksenVastaanottajat.viranomaiset",
   });
 
   const getKuntanimi = (index: number) => {
-    const nimi = kuntametadata.nameForKuntaId(ilmoituksenVastaanottajat?.kunnat?.[index].id, lang);
+    const nimi = kuntametadata.nameForKuntaId((ilmoituksenVastaanottajat?.kunnat as KuntaVastaanottajaInput[])?.[index].id, lang);
     if (!nimi) {
       return;
     }
@@ -82,8 +74,8 @@ export default function IlmoituksenVastaanottajat({ hyvaksymisPaatosVaihe }: Pro
           <h4 className="vayla-small-title">Ilmoituksen vastaanottajat</h4>
           <SectionContent>
             <p>
-              Ilmoitukset on lähetetty eteenpäin alla oleville viranomaisille ja kunnille. Jos ilmoituksen tila on ‘Ei
-              lähetetty’, tarkasta sähköpostiosoite. Ota tarvittaessa yhteys pääkäyttäjään.
+              Ilmoitukset on lähetetty eteenpäin alla oleville viranomaisille ja kunnille. Jos ilmoituksen tila on ‘Ei lähetetty’, tarkasta
+              sähköpostiosoite. Ota tarvittaessa yhteys pääkäyttäjään.
             </p>
           </SectionContent>
           <SectionContent>
@@ -93,7 +85,7 @@ export default function IlmoituksenVastaanottajat({ hyvaksymisPaatosVaihe }: Pro
               <p style={{ color: "#7A7A7A" }}>Ilmoituksen tila</p>
               <p style={{ color: "#7A7A7A" }}>Lähetysaika</p>
 
-              {hyvaksymisPaatosVaihe?.ilmoituksenVastaanottajat?.viranomaiset?.map((viranomainen, index) => (
+              {paatosVaihe?.ilmoituksenVastaanottajat?.viranomaiset?.map((viranomainen, index) => (
                 <React.Fragment key={index}>
                   <p className="odd:bg-white even:bg-grey col-span-2">
                     {t(`viranomainen.${viranomainen.nimi}`)}, {viranomainen.sahkoposti}
@@ -113,14 +105,12 @@ export default function IlmoituksenVastaanottajat({ hyvaksymisPaatosVaihe }: Pro
               <p className="vayla-table-header">Sähköpostiosoite</p>
               <p className="vayla-table-header">Ilmoituksen tila</p>
               <p className="vayla-table-header">Lähetysaika</p>
-              {hyvaksymisPaatosVaihe?.ilmoituksenVastaanottajat?.kunnat?.map((kunta, index) => (
+              {paatosVaihe?.ilmoituksenVastaanottajat?.kunnat?.map((kunta, index) => (
                 <Fragment key={index}>
                   <p className={getStyleForRow(index)}>{kuntametadata.nameForKuntaId(kunta.id, lang)}</p>
                   <p className={getStyleForRow(index)}>{kunta.sahkoposti}</p>
                   <p className={getStyleForRow(index)}>{kunta.lahetetty ? "Lahetetty" : "Ei lähetetty"}</p>
-                  <p className={getStyleForRow(index)}>
-                    {kunta.lahetetty ? dayjs(kunta.lahetetty).format("DD.MM.YYYY HH:mm") : null}
-                  </p>
+                  <p className={getStyleForRow(index)}>{kunta.lahetetty ? dayjs(kunta.lahetetty).format("DD.MM.YYYY HH:mm") : null}</p>
                 </Fragment>
               ))}
             </div>
@@ -132,9 +122,9 @@ export default function IlmoituksenVastaanottajat({ hyvaksymisPaatosVaihe }: Pro
           <h4 className="vayla-small-title">Ilmoituksen vastaanottajat</h4>
           <SectionContent>
             <p>
-              Vuorovaikuttamisesta lähetetään sähköpostitse tiedote viranomaiselle sekä projektia koskeville kunnille.
-              Kunnat on haettu Projektivelhosta. Jos tiedote pitää lähettää useammalle kuin yhdelle
-              viranomaisorganisaatiolle, lisää uusi rivi Lisää uusi -painikkeella
+              Vuorovaikuttamisesta lähetetään sähköpostitse tiedote viranomaiselle sekä projektia koskeville kunnille. Kunnat on haettu
+              Projektivelhosta. Jos tiedote pitää lähettää useammalle kuin yhdelle viranomaisorganisaatiolle, lisää uusi rivi Lisää uusi
+              -painikkeella
             </p>
             <p>Jos kuntatiedoissa on virhe, tee korjaus Projektivelhoon.</p>
           </SectionContent>
@@ -142,10 +132,8 @@ export default function IlmoituksenVastaanottajat({ hyvaksymisPaatosVaihe }: Pro
           <>
             <SectionContent>
               <h6 className="font-bold">Viranomaiset</h6>
-              {(errors.hyvaksymisPaatosVaihe?.ilmoituksenVastaanottajat as HelperType)?.viranomaiset && (
-                <p className="text-red">
-                  {(errors.hyvaksymisPaatosVaihe?.ilmoituksenVastaanottajat as HelperType).viranomaiset?.message}
-                </p>
+              {(errors.paatos?.ilmoituksenVastaanottajat as HelperType)?.viranomaiset && (
+                <p className="text-red">{(errors.paatos?.ilmoituksenVastaanottajat as HelperType).viranomaiset?.message}</p>
               )}
               {viranomaisFields.map((viranomainen, index) => (
                 <HassuGrid key={viranomainen.id} cols={{ lg: 3 }}>
@@ -155,23 +143,18 @@ export default function IlmoituksenVastaanottajat({ hyvaksymisPaatosVaihe }: Pro
                       label: nimi ? t(`viranomainen.${nimi}`) : "",
                       value: nimi,
                     }))}
-                    {...register(`hyvaksymisPaatosVaihe.ilmoituksenVastaanottajat.viranomaiset.${index}.nimi`, {
+                    {...register(`paatos.ilmoituksenVastaanottajat.viranomaiset.${index}.nimi`, {
                       onChange: (event) => {
-                        const sahkoposti = kirjaamoOsoitteet?.find(
-                          ({ nimi }) => nimi === event.target.value
-                        )?.sahkoposti;
-                        setValue(
-                          `hyvaksymisPaatosVaihe.ilmoituksenVastaanottajat.viranomaiset.${index}.sahkoposti`,
-                          sahkoposti || ""
-                        );
+                        const sahkoposti = kirjaamoOsoitteet?.find(({ nimi }) => nimi === event.target.value)?.sahkoposti;
+                        setValue(`paatos.ilmoituksenVastaanottajat.viranomaiset.${index}.sahkoposti`, sahkoposti || "");
                       },
                     })}
-                    error={errors?.hyvaksymisPaatosVaihe?.ilmoituksenVastaanottajat?.viranomaiset?.[index]?.nimi}
+                    error={(errors?.paatos?.ilmoituksenVastaanottajat as any)?.viranomaiset?.[index]?.nimi}
                     addEmptyOption
                   />
                   <Controller
                     control={control}
-                    name={`hyvaksymisPaatosVaihe.ilmoituksenVastaanottajat.viranomaiset.${index}.sahkoposti`}
+                    name={`paatos.ilmoituksenVastaanottajat.viranomaiset.${index}.sahkoposti`}
                     render={({ field }) => (
                       <>
                         <TextInput label="Sähköpostiosoite *" value={field.value} disabled />
@@ -221,16 +204,12 @@ export default function IlmoituksenVastaanottajat({ hyvaksymisPaatosVaihe }: Pro
 
             {kuntaFields.map((kunta, index) => (
               <HassuGrid key={kunta.id} cols={{ lg: 3 }}>
-                <input
-                  type="hidden"
-                  {...register(`hyvaksymisPaatosVaihe.ilmoituksenVastaanottajat.kunnat.${index}.id`)}
-                  readOnly
-                />
+                <input type="hidden" {...register(`paatos.ilmoituksenVastaanottajat.kunnat.${index}.id`)} readOnly />
                 <TextInput label="Kunta *" value={getKuntanimi(index)} disabled />
                 <TextInput
                   label="Sähköpostiosoite *"
-                  error={errors?.hyvaksymisPaatosVaihe?.ilmoituksenVastaanottajat?.kunnat?.[index]?.sahkoposti}
-                  {...register(`hyvaksymisPaatosVaihe.ilmoituksenVastaanottajat.kunnat.${index}.sahkoposti`)}
+                  error={(errors?.paatos?.ilmoituksenVastaanottajat as any)?.kunnat?.[index]?.sahkoposti}
+                  {...register(`paatos.ilmoituksenVastaanottajat.kunnat.${index}.sahkoposti`)}
                 />
               </HassuGrid>
             ))}
diff --git a/src/components/projekti/paatos/kuulutuksenTiedot/KuulutuksenJaIlmoituksenEsikatselu.tsx b/src/components/projekti/paatos/kuulutuksenTiedot/KuulutuksenJaIlmoituksenEsikatselu.tsx
index 41ab723e3..1a60ac856 100644
--- a/src/components/projekti/paatos/kuulutuksenTiedot/KuulutuksenJaIlmoituksenEsikatselu.tsx
+++ b/src/components/projekti/paatos/kuulutuksenTiedot/KuulutuksenJaIlmoituksenEsikatselu.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import Section from "@components/layout/Section";
-import { Kieli, AsiakirjaTyyppi } from "@services/api";
+import { Kieli, AsiakirjaTyyppi, TallennaProjektiInput } from "@services/api";
 import Notification, { NotificationType } from "@components/notification/Notification";
 import lowerCase from "lodash/lowerCase";
 import Button from "@components/button/Button";
@@ -8,12 +8,23 @@ import { Box } from "@mui/material";
 import { useProjekti } from "src/hooks/useProjekti";
 import { KuulutuksenTiedotFormValues } from "./index";
 import { useFormContext } from "react-hook-form";
+import { paatosSpecificRoutesMap, PaatosTyyppi } from "src/util/getPaatosSpecificData";
 
 type Props = {
-  esikatselePdf: (formData: KuulutuksenTiedotFormValues, asiakirjaTyyppi: AsiakirjaTyyppi, kieli: Kieli) => void;
+  esikatselePdf: (formData: TallennaProjektiInput, asiakirjaTyyppi: AsiakirjaTyyppi, kieli: Kieli) => void;
+  paatosTyyppi: PaatosTyyppi;
 };
 
-export default function KuulutuksenJaIlmoituksenEsikatselu({ esikatselePdf }: Props) {
+export const convertFormDataToTallennaProjektiInput: (
+  formData: KuulutuksenTiedotFormValues,
+  paatosTyyppi: PaatosTyyppi
+) => TallennaProjektiInput = (formData, paatosTyyppi) => {
+  const { paatos, ...rest } = formData;
+  const { paatosVaiheAvain } = paatosSpecificRoutesMap[paatosTyyppi];
+  return { ...rest, [paatosVaiheAvain]: paatos };
+};
+
+export default function KuulutuksenJaIlmoituksenEsikatselu({ esikatselePdf, paatosTyyppi }: Props) {
   const { data: projekti } = useProjekti();
 
   const { handleSubmit } = useFormContext<KuulutuksenTiedotFormValues>();
@@ -28,9 +39,7 @@ export default function KuulutuksenJaIlmoituksenEsikatselu({ esikatselePdf }: Pr
   return (
     <Section>
       <h4 className="vayla-small-title">Kuulutuksen ja ilmoituksen esikatselu</h4>
-      <Notification type={NotificationType.INFO_GRAY}>
-        Esikatsele kuulutus ja ilmoitus ennen hyväksyntään lähettämistä.{" "}
-      </Notification>
+      <Notification type={NotificationType.INFO_GRAY}>Esikatsele kuulutus ja ilmoitus ennen hyväksyntään lähettämistä. </Notification>
       <div style={{ marginTop: "4em" }}>
         {ensisijainenKieli && (
           <div>
@@ -42,7 +51,11 @@ export default function KuulutuksenJaIlmoituksenEsikatselu({ esikatselePdf }: Pr
                 type="submit"
                 onClick={handleSubmit((formData) => {
                   console.log(formData);
-                  esikatselePdf(formData, AsiakirjaTyyppi.HYVAKSYMISPAATOSKUULUTUS, ensisijainenKieli);
+                  esikatselePdf(
+                    convertFormDataToTallennaProjektiInput(formData, paatosTyyppi),
+                    AsiakirjaTyyppi.HYVAKSYMISPAATOSKUULUTUS,
+                    ensisijainenKieli
+                  );
                 })}
               >
                 Kuulutuksen esikatselu
@@ -53,7 +66,7 @@ export default function KuulutuksenJaIlmoituksenEsikatselu({ esikatselePdf }: Pr
                 type="button"
                 onClick={handleSubmit((formData) =>
                   esikatselePdf(
-                    formData,
+                    convertFormDataToTallennaProjektiInput(formData, paatosTyyppi),
                     AsiakirjaTyyppi.ILMOITUS_HYVAKSYMISPAATOSKUULUTUKSESTA_LAUSUNNONANTAJILLE,
                     ensisijainenKieli
                   )
@@ -68,7 +81,7 @@ export default function KuulutuksenJaIlmoituksenEsikatselu({ esikatselePdf }: Pr
                 onClick={handleSubmit((formData) => {
                   console.log(formData);
                   esikatselePdf(
-                    formData,
+                    convertFormDataToTallennaProjektiInput(formData, paatosTyyppi),
                     AsiakirjaTyyppi.ILMOITUS_HYVAKSYMISPAATOSKUULUTUKSESTA_MUISTUTTAJILLE,
                     ensisijainenKieli
                   );
@@ -82,7 +95,7 @@ export default function KuulutuksenJaIlmoituksenEsikatselu({ esikatselePdf }: Pr
                 type="button"
                 onClick={handleSubmit((formData) =>
                   esikatselePdf(
-                    formData,
+                    convertFormDataToTallennaProjektiInput(formData, paatosTyyppi),
                     AsiakirjaTyyppi.ILMOITUS_HYVAKSYMISPAATOSKUULUTUKSESTA_KUNNILLE,
                     ensisijainenKieli
                   )
@@ -96,7 +109,7 @@ export default function KuulutuksenJaIlmoituksenEsikatselu({ esikatselePdf }: Pr
                 type="button"
                 onClick={handleSubmit((formData) =>
                   esikatselePdf(
-                    formData,
+                    convertFormDataToTallennaProjektiInput(formData, paatosTyyppi),
                     AsiakirjaTyyppi.ILMOITUS_HYVAKSYMISPAATOSKUULUTUKSESTA_TOISELLE_VIRANOMAISELLE,
                     ensisijainenKieli
                   )
@@ -116,7 +129,11 @@ export default function KuulutuksenJaIlmoituksenEsikatselu({ esikatselePdf }: Pr
                 id={"preview_kuulutus_pdf_" + toissijainenKieli}
                 type="button"
                 onClick={handleSubmit((formData) =>
-                  esikatselePdf(formData, AsiakirjaTyyppi.HYVAKSYMISPAATOSKUULUTUS, toissijainenKieli)
+                  esikatselePdf(
+                    convertFormDataToTallennaProjektiInput(formData, paatosTyyppi),
+                    AsiakirjaTyyppi.HYVAKSYMISPAATOSKUULUTUS,
+                    toissijainenKieli
+                  )
                 )}
               >
                 Kuulutuksen esikatselu
@@ -127,7 +144,7 @@ export default function KuulutuksenJaIlmoituksenEsikatselu({ esikatselePdf }: Pr
                 type="button"
                 onClick={handleSubmit((formData) =>
                   esikatselePdf(
-                    formData,
+                    convertFormDataToTallennaProjektiInput(formData, paatosTyyppi),
                     AsiakirjaTyyppi.ILMOITUS_HYVAKSYMISPAATOSKUULUTUKSESTA_LAUSUNNONANTAJILLE,
                     toissijainenKieli
                   )
@@ -141,7 +158,7 @@ export default function KuulutuksenJaIlmoituksenEsikatselu({ esikatselePdf }: Pr
                 type="button"
                 onClick={handleSubmit((formData) =>
                   esikatselePdf(
-                    formData,
+                    convertFormDataToTallennaProjektiInput(formData, paatosTyyppi),
                     AsiakirjaTyyppi.ILMOITUS_HYVAKSYMISPAATOSKUULUTUKSESTA_MUISTUTTAJILLE,
                     toissijainenKieli
                   )
@@ -155,7 +172,7 @@ export default function KuulutuksenJaIlmoituksenEsikatselu({ esikatselePdf }: Pr
                 type="button"
                 onClick={handleSubmit((formData) =>
                   esikatselePdf(
-                    formData,
+                    convertFormDataToTallennaProjektiInput(formData, paatosTyyppi),
                     AsiakirjaTyyppi.ILMOITUS_HYVAKSYMISPAATOSKUULUTUKSESTA_KUNNILLE,
                     toissijainenKieli
                   )
@@ -169,7 +186,7 @@ export default function KuulutuksenJaIlmoituksenEsikatselu({ esikatselePdf }: Pr
                 type="button"
                 onClick={handleSubmit((formData) =>
                   esikatselePdf(
-                    formData,
+                    convertFormDataToTallennaProjektiInput(formData, paatosTyyppi),
                     AsiakirjaTyyppi.ILMOITUS_HYVAKSYMISPAATOSKUULUTUKSESTA_TOISELLE_VIRANOMAISELLE,
                     toissijainenKieli
                   )
diff --git a/src/components/projekti/paatos/kuulutuksenTiedot/KuulutuksessaEsitettavatYhteystiedot.tsx b/src/components/projekti/paatos/kuulutuksenTiedot/KuulutuksessaEsitettavatYhteystiedot.tsx
index 1b0a3319d..d855c78cc 100644
--- a/src/components/projekti/paatos/kuulutuksenTiedot/KuulutuksessaEsitettavatYhteystiedot.tsx
+++ b/src/components/projekti/paatos/kuulutuksenTiedot/KuulutuksessaEsitettavatYhteystiedot.tsx
@@ -1,6 +1,13 @@
 import { Controller, useFieldArray, useFormContext } from "react-hook-form";
 import SectionContent from "@components/layout/SectionContent";
-import { HyvaksymisPaatosVaiheTila, KayttajaTyyppi, Projekti, ProjektiKayttaja, YhteystietoInput } from "@services/api";
+import {
+  HyvaksymisPaatosVaihe,
+  HyvaksymisPaatosVaiheJulkaisu,
+  HyvaksymisPaatosVaiheTila,
+  KayttajaTyyppi,
+  ProjektiKayttaja,
+  YhteystietoInput,
+} from "@services/api";
 import Section from "@components/layout/Section";
 import { Fragment, ReactElement } from "react";
 import Button from "@components/button/Button";
@@ -12,9 +19,10 @@ import HassuGrid from "@components/HassuGrid";
 import { maxPhoneLength } from "src/schemas/puhelinNumero";
 import IconButton from "@components/button/IconButton";
 import replace from "lodash/replace";
-import { useProjekti } from "src/hooks/useProjekti";
+import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
 import { KuulutuksenTiedotFormValues } from "./index";
 import { formatNimi } from "../../../../util/userUtil";
+import { PaatosTyyppi } from "src/util/getPaatosSpecificData";
 
 const defaultYhteystieto: YhteystietoInput = {
   etunimi: "",
@@ -24,18 +32,19 @@ const defaultYhteystieto: YhteystietoInput = {
   sahkoposti: "",
 };
 
-interface Props {}
-
-function hasHyvaksyttyHyvaksymisPaatosVaiheJulkaisu(projekti: Projekti | null | undefined) {
-  return (
-    (projekti?.hyvaksymisPaatosVaiheJulkaisut?.filter((julkaisu) => julkaisu.tila == HyvaksymisPaatosVaiheTila.HYVAKSYTTY) || []).length > 0
-  );
+interface Props {
+  paatosTyyppi: PaatosTyyppi;
+  julkaisut: HyvaksymisPaatosVaiheJulkaisu[] | null | undefined;
+  projekti: ProjektiLisatiedolla;
+  julkaisematonPaatos: HyvaksymisPaatosVaihe | null | undefined;
 }
 
-export default function EsitettavatYhteystiedot({}: Props): ReactElement {
-  const { data: projekti } = useProjekti();
+function hasHyvaksyttyPaatosVaiheJulkaisu(julkaisut: HyvaksymisPaatosVaiheJulkaisu[] | null | undefined) {
+  return (julkaisut?.filter((julkaisu) => julkaisu.tila == HyvaksymisPaatosVaiheTila.HYVAKSYTTY) || []).length > 0;
+}
 
-  const eiVoiMuokata = hasHyvaksyttyHyvaksymisPaatosVaiheJulkaisu(projekti);
+export default function EsitettavatYhteystiedot({ julkaisut, projekti, julkaisematonPaatos }: Props): ReactElement {
+  const eiVoiMuokata = hasHyvaksyttyPaatosVaiheJulkaisu(julkaisut);
 
   const {
     register,
@@ -45,11 +54,11 @@ export default function EsitettavatYhteystiedot({}: Props): ReactElement {
 
   const { fields, append, remove } = useFieldArray({
     control,
-    name: "hyvaksymisPaatosVaihe.kuulutusYhteystiedot.yhteysTiedot",
+    name: "paatos.kuulutusYhteystiedot.yhteysTiedot",
   });
 
-  const kuulutusYhteysHenkilot: ProjektiKayttaja[] = projekti?.hyvaksymisPaatosVaihe?.kuulutusYhteystiedot?.yhteysHenkilot
-    ? projekti.hyvaksymisPaatosVaihe?.kuulutusYhteystiedot?.yhteysHenkilot
+  const kuulutusYhteysHenkilot: ProjektiKayttaja[] = julkaisematonPaatos?.kuulutusYhteystiedot?.yhteysHenkilot
+    ? julkaisematonPaatos?.kuulutusYhteystiedot?.yhteysHenkilot
         .map((hlo) => {
           const yhteysHenkiloTietoineen: ProjektiKayttaja | undefined = (projekti?.kayttoOikeudet || []).find(
             (ko) => ko.kayttajatunnus === hlo
@@ -67,7 +76,7 @@ export default function EsitettavatYhteystiedot({}: Props): ReactElement {
       <Section>
         <SectionContent>
           <p className="vayla-label mb-5">Vuorovaikuttamisen yhteyshenkilöt</p>
-          {projekti?.hyvaksymisPaatosVaihe?.kuulutusYhteystiedot?.yhteysTiedot?.map((yhteystieto, index) => (
+          {julkaisematonPaatos?.kuulutusYhteystiedot?.yhteysTiedot?.map((yhteystieto, index) => (
             <p style={{ margin: 0 }} key={index}>
               {formatNimi(yhteystieto)}, puh. {yhteystieto.puhelinnumero},{" "}
               {yhteystieto?.sahkoposti ? replace(yhteystieto?.sahkoposti, "@", "[at]") : ""} ({yhteystieto.organisaatio})
@@ -96,7 +105,7 @@ export default function EsitettavatYhteystiedot({}: Props): ReactElement {
         {projekti?.kayttoOikeudet && projekti.kayttoOikeudet.length > 0 ? (
           <Controller
             control={control}
-            name={`hyvaksymisPaatosVaihe.kuulutusYhteystiedot.yhteysHenkilot`}
+            name={`paatos.kuulutusYhteystiedot.yhteysHenkilot`}
             render={({ field: { onChange, value, ...field } }) => (
               <FormGroup label="Projektiin tallennetut henkilöt" inlineFlex>
                 {projekti.kayttoOikeudet?.map(({ etunimi, sukunimi, tyyppi, kayttajatunnus }, index) => {
@@ -142,28 +151,28 @@ export default function EsitettavatYhteystiedot({}: Props): ReactElement {
           <HassuGrid sx={{ width: "100%" }} cols={[1, 1, 3]}>
             <TextInput
               label="Etunimi *"
-              {...register(`hyvaksymisPaatosVaihe.kuulutusYhteystiedot.yhteysTiedot.${index}.etunimi`)}
+              {...register(`paatos.kuulutusYhteystiedot.yhteysTiedot.${index}.etunimi`)}
               error={(errors as any).hyvaksymisPaatosVaihe?.kuulutusYhteystiedot?.[index]?.etunimi}
             />
             <TextInput
               label="Sukunimi *"
-              {...register(`hyvaksymisPaatosVaihe.kuulutusYhteystiedot.yhteysTiedot.${index}.sukunimi`)}
+              {...register(`paatos.kuulutusYhteystiedot.yhteysTiedot.${index}.sukunimi`)}
               error={(errors as any).hyvaksymisPaatosVaihe?.kuulutusYhteystiedot?.[index]?.sukunimi}
             />
             <TextInput
               label="Organisaatio / kunta *"
-              {...register(`hyvaksymisPaatosVaihe.kuulutusYhteystiedot.yhteysTiedot.${index}.organisaatio`)}
+              {...register(`paatos.kuulutusYhteystiedot.yhteysTiedot.${index}.organisaatio`)}
               error={(errors as any).hyvaksymisPaatosVaihe?.kuulutusYhteystiedot?.[index]?.organisaatio}
             />
             <TextInput
               label="Puhelinnumero *"
-              {...register(`hyvaksymisPaatosVaihe.kuulutusYhteystiedot.yhteysTiedot.${index}.puhelinnumero`)}
+              {...register(`paatos.kuulutusYhteystiedot.yhteysTiedot.${index}.puhelinnumero`)}
               error={(errors as any).hyvaksymisPaatosVaihe?.kuulutusYhteystiedot?.[index]?.puhelinnumero}
               maxLength={maxPhoneLength}
             />
             <TextInput
               label="Sähköpostiosoite *"
-              {...register(`hyvaksymisPaatosVaihe.kuulutusYhteystiedot.yhteysTiedot.${index}.sahkoposti`)}
+              {...register(`paatos.kuulutusYhteystiedot.yhteysTiedot.${index}.sahkoposti`)}
               error={(errors as any).hyvaksymisPaatosVaihe?.kuulutusYhteystiedot?.[index]?.sahkoposti}
             />
           </HassuGrid>
diff --git a/src/components/projekti/paatos/kuulutuksenTiedot/KuulutusJaJulkaisuPaiva.tsx b/src/components/projekti/paatos/kuulutuksenTiedot/KuulutusJaJulkaisuPaiva.tsx
index 5d8c6d9a7..bec22a086 100644
--- a/src/components/projekti/paatos/kuulutuksenTiedot/KuulutusJaJulkaisuPaiva.tsx
+++ b/src/components/projekti/paatos/kuulutuksenTiedot/KuulutusJaJulkaisuPaiva.tsx
@@ -8,18 +8,10 @@ import { api, LaskuriTyyppi } from "@services/api";
 import useSnackbars from "src/hooks/useSnackbars";
 import HassuGrid from "@components/HassuGrid";
 import { HassuDatePickerWithController } from "@components/form/HassuDatePicker";
+import { KuulutuksenTiedotFormValues } from "@components/projekti/paatos/kuulutuksenTiedot/index";
 
-type Props = {};
-
-type FormFields = {
-  hyvaksymisPaatosVaihe: {
-    kuulutusPaiva: string | null;
-    kuulutusVaihePaattyyPaiva: string | null;
-  };
-};
-
-export default function KuulutusJaJulkaisuPaiva({}: Props) {
-  const { setValue } = useFormContext<FormFields>();
+export default function KuulutusJaJulkaisuPaiva() {
+  const { setValue, control } = useFormContext<KuulutuksenTiedotFormValues>();
 
   const { showErrorMessage } = useSnackbars();
 
@@ -27,7 +19,7 @@ export default function KuulutusJaJulkaisuPaiva({}: Props) {
     async (value: string) => {
       try {
         const paattymispaiva = await api.laskePaattymisPaiva(value, LaskuriTyyppi.HYVAKSYMISPAATOKSEN_KUULUTUSAIKA);
-        setValue("hyvaksymisPaatosVaihe.kuulutusVaihePaattyyPaiva", paattymispaiva);
+        setValue("paatos.kuulutusVaihePaattyyPaiva", paattymispaiva);
       } catch (error) {
         showErrorMessage("Kuulutuksen päättymispäivän laskennassa tapahtui virhe");
         log.error("Kuulutusvaiheen päättymispäivän laskennassa virhe", error);
@@ -52,11 +44,12 @@ export default function KuulutusJaJulkaisuPaiva({}: Props) {
             }}
             textFieldProps={{ required: true }}
             controllerProps={{
-              name: "hyvaksymisPaatosVaihe.kuulutusPaiva",
+              control,
+              name: "paatos.kuulutusPaiva",
             }}
           />
-          <HassuDatePickerWithController
-            controllerProps={{ name: "hyvaksymisPaatosVaihe.kuulutusVaihePaattyyPaiva" }}
+          <HassuDatePickerWithController<KuulutuksenTiedotFormValues>
+            controllerProps={{ control, name: "paatos.kuulutusVaihePaattyyPaiva" }}
             label="Kuulutusvaihe päättyy"
             disabled
           />
diff --git a/src/components/projekti/paatos/kuulutuksenTiedot/Lukunakyma.tsx b/src/components/projekti/paatos/kuulutuksenTiedot/Lukunakyma.tsx
index 3c9dc5479..c6249cd1a 100644
--- a/src/components/projekti/paatos/kuulutuksenTiedot/Lukunakyma.tsx
+++ b/src/components/projekti/paatos/kuulutuksenTiedot/Lukunakyma.tsx
@@ -18,36 +18,34 @@ import { ProjektiTestCommand } from "../../../../../common/testUtil.dev";
 import { formatDate } from "src/util/dateUtils";
 import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
 import { formatNimi } from "../../../../util/userUtil";
-import { PaatosTyyppi } from "../PaatosPageLayout";
+import { getPaatosSpecificData, PaatosTyyppi } from "src/util/getPaatosSpecificData";
 
 interface Props {
-  hyvaksymisPaatosVaiheJulkaisu?: HyvaksymisPaatosVaiheJulkaisu | null;
+  julkaisu?: HyvaksymisPaatosVaiheJulkaisu | null;
   projekti: ProjektiLisatiedolla;
   paatosTyyppi: PaatosTyyppi;
 }
 
-type KasittelynTilaKey = keyof Omit<KasittelynTila, "__typename">;
-
-export default function HyvaksymisKuulutusLukunakyma({ hyvaksymisPaatosVaiheJulkaisu, projekti, paatosTyyppi }: Props): ReactElement {
+export default function HyvaksymisKuulutusLukunakyma({ julkaisu, projekti, paatosTyyppi }: Props): ReactElement {
   const { t } = useTranslation("common");
   const getPdft = (kieli: Kieli | undefined | null) => {
-    if (!hyvaksymisPaatosVaiheJulkaisu || !hyvaksymisPaatosVaiheJulkaisu.hyvaksymisPaatosVaihePDFt || !kieli) {
+    if (!julkaisu || !julkaisu.hyvaksymisPaatosVaihePDFt || !kieli) {
       return undefined;
     }
-    return hyvaksymisPaatosVaiheJulkaisu?.hyvaksymisPaatosVaihePDFt[kieli];
+    return julkaisu?.hyvaksymisPaatosVaihePDFt[kieli];
   };
-  const ensisijaisetPDFt = getPdft(hyvaksymisPaatosVaiheJulkaisu?.kielitiedot?.ensisijainenKieli);
-  const toissijaisetPDFt = getPdft(hyvaksymisPaatosVaiheJulkaisu?.kielitiedot?.toissijainenKieli);
+  const ensisijaisetPDFt = getPdft(julkaisu?.kielitiedot?.ensisijainenKieli);
+  const toissijaisetPDFt = getPdft(julkaisu?.kielitiedot?.toissijainenKieli);
 
-  const paatosRoute = useMemo(() => paatosTyyppiToKasittelynTilaPaatosRouteMap[paatosTyyppi], [paatosTyyppi]);
+  const { kasittelyntilaData } = useMemo(() => getPaatosSpecificData(projekti, paatosTyyppi), [paatosTyyppi, projekti]);
 
-  if (!hyvaksymisPaatosVaiheJulkaisu || !projekti) {
+  if (!julkaisu || !projekti) {
     return <></>;
   }
 
   const epaaktiivinen = projektiOnEpaaktiivinen(projekti);
 
-  let { kuulutusPaiva, published } = examineKuulutusPaiva(hyvaksymisPaatosVaiheJulkaisu.kuulutusPaiva);
+  let { kuulutusPaiva, published } = examineKuulutusPaiva(julkaisu.kuulutusPaiva);
   let hyvaksymisPaatosVaiheHref: string | undefined;
   if (published) {
     hyvaksymisPaatosVaiheHref =
@@ -62,7 +60,7 @@ export default function HyvaksymisKuulutusLukunakyma({ hyvaksymisPaatosVaiheJulk
           <p className="vayla-label md:col-span-3">Kuulutusvaihe päättyy</p>
           <p className="md:col-span-1 mb-0">{kuulutusPaiva}</p>
           <p className="md:col-span-1 mb-0">
-            <FormatDate date={hyvaksymisPaatosVaiheJulkaisu.kuulutusVaihePaattyyPaiva} />
+            <FormatDate date={julkaisu.kuulutusVaihePaattyyPaiva} />
           </p>
           {process.env.ENVIRONMENT != "prod" && (
             <div className="md:col-span-2 mb-0">
@@ -91,24 +89,24 @@ export default function HyvaksymisKuulutusLukunakyma({ hyvaksymisPaatosVaiheJulk
           <p className="vayla-label md:col-span-1">Päätöksen päivä</p>
           <p className="vayla-label md:col-span-3">Päätöksen asianumero</p>
           <p className="md:col-span-1 mb-0">
-            <FormatDate date={projekti.kasittelynTila?.[paatosRoute]?.paatoksenPvm} />
+            <FormatDate date={kasittelyntilaData?.paatoksenPvm} />
           </p>
-          <p className="md:col-span-3 mb-0">{projekti.kasittelynTila?.[paatosRoute]?.asianumero}</p>
+          <p className="md:col-span-3 mb-0">{kasittelyntilaData?.asianumero}</p>
         </div>
         <p>Päätös ja sen liitteet löytyvät Päätös ja sen liitteenä oleva aineisto -välilehdeltä.</p>
       </Section>
       <Section>
         <h4 className="vayla-label">Muutoksenhaku</h4>
         <p>
-          Päätökseen voi valittamalla hakea muutosta {t(`hallinto-oikeus-ablatiivi.${hyvaksymisPaatosVaiheJulkaisu.hallintoOikeus}`)} 30
-          päivän kuluessa päätöksen tiedoksiannosta. Valitusosoituksen tiedosto löytyy Päätös ja sen liitteenä oleva aineisto -välilehdeltä.
+          Päätökseen voi valittamalla hakea muutosta {t(`hallinto-oikeus-ablatiivi.${julkaisu.hallintoOikeus}`)} 30 päivän kuluessa
+          päätöksen tiedoksiannosta. Valitusosoituksen tiedosto löytyy Päätös ja sen liitteenä oleva aineisto -välilehdeltä.
         </p>
       </Section>
       <Section>
         <SectionContent>
           <p className="vayla-label">Kuulutuksen yhteyshenkilöt</p>
           <p></p>
-          {hyvaksymisPaatosVaiheJulkaisu.yhteystiedot?.map((yhteystieto, index) => (
+          {julkaisu.yhteystiedot?.map((yhteystieto, index) => (
             <p style={{ margin: 0 }} key={index}>
               {formatNimi(yhteystieto)}, puh. {yhteystieto.puhelinnumero},{" "}
               {yhteystieto?.sahkoposti ? replace(yhteystieto?.sahkoposti, "@", "[at]") : ""} ({yhteystieto.organisaatio})
@@ -119,8 +117,8 @@ export default function HyvaksymisKuulutusLukunakyma({ hyvaksymisPaatosVaiheJulk
           <SectionContent>
             <p className="vayla-label">Kuulutus julkisella puolella</p>
             <p>
-              Kuulutus on ollut nähtävillä julkisella puolella {formatDate(hyvaksymisPaatosVaiheJulkaisu.kuulutusPaiva)}—
-              {formatDate(hyvaksymisPaatosVaiheJulkaisu.kuulutusVaihePaattyyPaiva)} välisen ajan.
+              Kuulutus on ollut nähtävillä julkisella puolella {formatDate(julkaisu.kuulutusPaiva)}—
+              {formatDate(julkaisu.kuulutusVaihePaattyyPaiva)} välisen ajan.
             </p>
           </SectionContent>
         ) : (
@@ -142,7 +140,7 @@ export default function HyvaksymisKuulutusLukunakyma({ hyvaksymisPaatosVaiheJulk
         ) : (
           <SectionContent>
             <p className="vayla-label">Ladattavat kuulutukset ja ilmoitukset</p>
-            <p>Kuulutus ja ilmoitus ensisijaisella kielellä ({lowerCase(hyvaksymisPaatosVaiheJulkaisu.kielitiedot?.ensisijainenKieli)})</p>
+            <p>Kuulutus ja ilmoitus ensisijaisella kielellä ({lowerCase(julkaisu.kielitiedot?.ensisijainenKieli)})</p>
             {ensisijaisetPDFt && (
               <div className="flex flex-col mb-4">
                 <div>
@@ -177,11 +175,9 @@ export default function HyvaksymisKuulutusLukunakyma({ hyvaksymisPaatosVaiheJulk
               </div>
             )}
 
-            {hyvaksymisPaatosVaiheJulkaisu.kielitiedot?.toissijainenKieli && (
+            {julkaisu.kielitiedot?.toissijainenKieli && (
               <div className="content mb-4">
-                <p>
-                  Kuulutus ja ilmoitus toissijaisella kielellä ({lowerCase(hyvaksymisPaatosVaiheJulkaisu.kielitiedot?.toissijainenKieli)})
-                </p>
+                <p>Kuulutus ja ilmoitus toissijaisella kielellä ({lowerCase(julkaisu.kielitiedot?.toissijainenKieli)})</p>
                 {toissijaisetPDFt && (
                   <div className="flex flex-col">
                     <div>
@@ -222,8 +218,8 @@ export default function HyvaksymisKuulutusLukunakyma({ hyvaksymisPaatosVaiheJulk
       </Section>
       <Section>
         <IlmoituksenVastaanottajatLukutila
-          ilmoituksenVastaanottajat={hyvaksymisPaatosVaiheJulkaisu.ilmoituksenVastaanottajat}
-          julkaisunTila={hyvaksymisPaatosVaiheJulkaisu.tila}
+          ilmoituksenVastaanottajat={julkaisu.ilmoituksenVastaanottajat}
+          julkaisunTila={julkaisu.tila}
           epaaktiivinen={epaaktiivinen}
         />
       </Section>
diff --git a/src/components/projekti/paatos/kuulutuksenTiedot/MuutoksenHaku.tsx b/src/components/projekti/paatos/kuulutuksenTiedot/MuutoksenHaku.tsx
index 879658dd0..eb9ee05c3 100644
--- a/src/components/projekti/paatos/kuulutuksenTiedot/MuutoksenHaku.tsx
+++ b/src/components/projekti/paatos/kuulutuksenTiedot/MuutoksenHaku.tsx
@@ -6,21 +6,16 @@ import { HallintoOikeus } from "@services/api";
 import Select from "@components/form/Select";
 import useTranslation from "next-translate/useTranslation";
 import { Controller } from "react-hook-form";
+import { KuulutuksenTiedotFormValues } from "@components/projekti/paatos/kuulutuksenTiedot/index";
 
 type Props = {};
 
-type FormFields = {
-  hyvaksymisPaatosVaihe: {
-    hallintoOikeus: HallintoOikeus;
-  };
-};
-
 export default function MuutoksenHaku({}: Props) {
   const {
     register,
     formState: { errors },
     control,
-  } = useFormContext<FormFields>();
+  } = useFormContext<KuulutuksenTiedotFormValues>();
 
   const { t } = useTranslation("common");
 
@@ -29,14 +24,14 @@ export default function MuutoksenHaku({}: Props) {
       <SectionContent>
         <h4 className="vayla-small-title">Muutoksen haku</h4>
         <p>
-          Päätökseen voi valittamalla hakea muutosta hallinto-oikeudelta 30 päivän kuluessa päätöksen tiedoksiannosta.
-          Valitse pudostusvalikosta hallinto-oikeus, johon muutoksenhaku osoitetaan tehtävän.
+          Päätökseen voi valittamalla hakea muutosta hallinto-oikeudelta 30 päivän kuluessa päätöksen tiedoksiannosta. Valitse
+          pudostusvalikosta hallinto-oikeus, johon muutoksenhaku osoitetaan tehtävän.
         </p>
 
         <div style={{ maxWidth: "30em" }}>
           <Controller
             control={control}
-            name="hyvaksymisPaatosVaihe.hallintoOikeus"
+            name="paatos.hallintoOikeus"
             render={({ field: { value, onChange, ...field } }) => (
               <Select
                 style={{ backgroundColor: "transparent" }}
@@ -45,8 +40,8 @@ export default function MuutoksenHaku({}: Props) {
                   label: ho ? t(`hallinto-oikeus.${ho}`) : "",
                   value: ho || "",
                 }))}
-                {...register(`hyvaksymisPaatosVaihe.hallintoOikeus`)}
-                error={errors?.hyvaksymisPaatosVaihe?.hallintoOikeus}
+                {...register(`paatos.hallintoOikeus`)}
+                error={errors?.paatos?.hallintoOikeus}
                 addEmptyOption
                 value={value || ""}
                 onChange={(event) => onChange(event.target.value)}
diff --git a/src/components/projekti/paatos/kuulutuksenTiedot/PaatoksenPaiva.tsx b/src/components/projekti/paatos/kuulutuksenTiedot/PaatoksenPaiva.tsx
index 92eee37d9..f4cdc367f 100644
--- a/src/components/projekti/paatos/kuulutuksenTiedot/PaatoksenPaiva.tsx
+++ b/src/components/projekti/paatos/kuulutuksenTiedot/PaatoksenPaiva.tsx
@@ -9,13 +9,15 @@ import { isValidDate } from "src/util/dateUtils";
 import NextLink from "next/link";
 import dayjs, { Dayjs } from "dayjs";
 import { Hyvaksymispaatos } from "@services/api";
+import { PaatosTyyppi } from "src/util/getPaatosSpecificData";
 
 type Props = {
   paatos?: Hyvaksymispaatos | undefined | null;
   projektiOid: string;
+  paatosTyyppi: PaatosTyyppi;
 };
 
-export default function PaatoksenPaiva({ paatos, projektiOid }: Props) {
+export default function PaatoksenPaiva({ paatos, paatosTyyppi, projektiOid }: Props) {
   const paatoksenPvm: Dayjs | null = useMemo(() => {
     const dateString = paatos?.paatoksenPvm;
     if (!!dateString && isValidDate(dateString)) {
@@ -25,19 +27,24 @@ export default function PaatoksenPaiva({ paatos, projektiOid }: Props) {
     }
   }, [paatos?.paatoksenPvm]);
 
+  const isHyvaksymisPaatos = paatosTyyppi === PaatosTyyppi.HYVAKSYMISPAATOS;
+  const paatosGenetiivi = isHyvaksymisPaatos ? "päätöksen" : "jatkopäätöksen";
+  const paatosPerusmuoto = isHyvaksymisPaatos ? "hyväksymispäätös" : "jatkopäätös";
+
   return (
     <Section noDivider>
       <SectionContent>
-        <h4 className="vayla-small-title">Liikenne- ja viestintäviraston jatkopäätöksen päivä ja asiatunnus</h4>
+        <h4 className="vayla-small-title">Liikenne- ja viestintäviraston {paatosGenetiivi} päivä ja asiatunnus</h4>
         <p>
-          Liikenne- ja viestintäviraston jatkopäätöksen päivämäärän ja asiantunnus tulee automaattisesti{" "}
+          Järjestelmän pääkäyttäjä lisää Liikenne- ja viestintäviraston {paatosGenetiivi} päivämäärän ja asianumeron. Kuulutus on
+          mahdollista julkaistu vasta kun {paatosPerusmuoto} on annettu. Käsittelyn tilaa voi seurata{" "}
           <NextLink passHref href={{ pathname: `/yllapito/projekti/[oid]/kasittelyntila`, query: { oid: projektiOid } }}>
             <Link underline="none">Käsittelyn tila</Link>
           </NextLink>{" "}
           -sivulta.
         </p>
         <HassuGrid cols={{ lg: 3 }}>
-          <HassuDatePicker label="Päätöspäivä *" disabled value={paatoksenPvm} />
+          <HassuDatePicker label={isHyvaksymisPaatos ? "Päätöspäivä *" : "Jatkopäätöksen päivä *"} disabled value={paatoksenPvm} />
           <TextInput label="Asianumero *" disabled value={paatos?.asianumero || ""} />
         </HassuGrid>
       </SectionContent>
diff --git a/src/components/projekti/paatos/kuulutuksenTiedot/Painikkeet.tsx b/src/components/projekti/paatos/kuulutuksenTiedot/Painikkeet.tsx
index 1845b5698..46e14ae55 100644
--- a/src/components/projekti/paatos/kuulutuksenTiedot/Painikkeet.tsx
+++ b/src/components/projekti/paatos/kuulutuksenTiedot/Painikkeet.tsx
@@ -2,27 +2,31 @@ import Button from "@components/button/Button";
 import HassuSpinner from "@components/HassuSpinner";
 import Section from "@components/layout/Section";
 import { Stack } from "@mui/material";
-import { api, Status } from "@services/api";
+import { api, HyvaksymisPaatosVaiheJulkaisu, Status } from "@services/api";
 import log from "loglevel";
 import { useRouter } from "next/router";
 import React, { useState, useCallback, useRef, useEffect } from "react";
 import { useFormContext } from "react-hook-form";
 import { useProjekti } from "src/hooks/useProjekti";
 import useSnackbars from "src/hooks/useSnackbars";
-import { TilasiirtymaToiminto, TilasiirtymaTyyppi, HyvaksymisPaatosVaiheTila, Projekti } from "@services/api";
+import { TilasiirtymaToiminto, HyvaksymisPaatosVaiheTila, Projekti } from "@services/api";
 import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
 import { KuulutuksenTiedotFormValues } from "./index";
 import Modaalit from "./Modaalit";
 import { projektiMeetsMinimumStatus } from "src/hooks/useIsOnAllowedProjektiRoute";
+import { paatosSpecificTilasiirtymaTyyppiMap, PaatosTyyppi } from "src/util/getPaatosSpecificData";
+import { convertFormDataToTallennaProjektiInput } from "./KuulutuksenJaIlmoituksenEsikatselu";
 
 type PalautusValues = {
   syy: string;
 };
 interface Props {
   projekti: ProjektiLisatiedolla;
+  julkaisut: HyvaksymisPaatosVaiheJulkaisu[] | null | undefined;
+  paatosTyyppi: PaatosTyyppi;
 }
 
-export default function Painikkeet({ projekti }: Props) {
+export default function Painikkeet({ projekti, julkaisut, paatosTyyppi }: Props) {
   const { mutate: reloadProjekti } = useProjekti();
   const [isFormSubmitting, setIsFormSubmitting] = useState(false);
   const { showSuccessMessage, showErrorMessage } = useSnackbars();
@@ -43,11 +47,11 @@ export default function Painikkeet({ projekti }: Props) {
 
   const saveHyvaksymisPaatosVaihe = useCallback(
     async (formData: KuulutuksenTiedotFormValues) => {
-      await api.tallennaProjekti(formData);
+      await api.tallennaProjekti(convertFormDataToTallennaProjektiInput(formData, paatosTyyppi));
       if (reloadProjekti) await reloadProjekti();
       reset(formData);
     },
-    [reloadProjekti, reset]
+    [paatosTyyppi, reloadProjekti, reset]
   );
 
   const saveDraft = async (formData: KuulutuksenTiedotFormValues) => {
@@ -71,7 +75,7 @@ export default function Painikkeet({ projekti }: Props) {
       }
       setIsFormSubmitting(true);
       try {
-        await api.siirraTila({ oid: projekti.oid, toiminto, syy, tyyppi: TilasiirtymaTyyppi.HYVAKSYMISPAATOSVAIHE });
+        await api.siirraTila({ oid: projekti.oid, toiminto, syy, tyyppi: paatosSpecificTilasiirtymaTyyppiMap[paatosTyyppi] });
         await reloadProjekti();
         showSuccessMessage(`${viesti} onnistui`);
       } catch (error) {
@@ -84,7 +88,7 @@ export default function Painikkeet({ projekti }: Props) {
         setOpenHyvaksy(false);
       }
     },
-    [setIsFormSubmitting, reloadProjekti, showSuccessMessage, showErrorMessage, setOpen, projekti]
+    [projekti, paatosTyyppi, reloadProjekti, showSuccessMessage, showErrorMessage]
   );
 
   const lahetaHyvaksyttavaksi = useCallback(
@@ -134,13 +138,12 @@ export default function Painikkeet({ projekti }: Props) {
     await vaihdaHyvaksymisPaatosVaiheenTila(TilasiirtymaToiminto.HYVAKSY, "Hyväksyminen");
   }, [vaihdaHyvaksymisPaatosVaiheenTila]);
 
-  const voiMuokata = !projekti?.hyvaksymisPaatosVaiheJulkaisut || projekti.hyvaksymisPaatosVaiheJulkaisut.length < 1;
+  const voiMuokata = !julkaisut;
 
   const voiHyvaksya =
-    projekti.hyvaksymisPaatosVaiheJulkaisut &&
-    projekti.hyvaksymisPaatosVaiheJulkaisut.length &&
-    projekti.hyvaksymisPaatosVaiheJulkaisut[projekti.hyvaksymisPaatosVaiheJulkaisut.length - 1].tila ===
-      HyvaksymisPaatosVaiheTila.ODOTTAA_HYVAKSYNTAA &&
+    julkaisut &&
+    julkaisut.length &&
+    julkaisut[julkaisut.length - 1].tila === HyvaksymisPaatosVaiheTila.ODOTTAA_HYVAKSYNTAA &&
     projekti?.nykyinenKayttaja.onProjektipaallikko;
 
   return (
diff --git a/src/components/projekti/paatos/kuulutuksenTiedot/index.tsx b/src/components/projekti/paatos/kuulutuksenTiedot/index.tsx
index adfa4fac2..635e1b6b1 100644
--- a/src/components/projekti/paatos/kuulutuksenTiedot/index.tsx
+++ b/src/components/projekti/paatos/kuulutuksenTiedot/index.tsx
@@ -1,17 +1,9 @@
 import { yupResolver } from "@hookform/resolvers/yup";
-import {
-  HyvaksymisPaatosVaihe,
-  HyvaksymisPaatosVaiheInput,
-  HyvaksymisPaatosVaiheJulkaisu,
-  KirjaamoOsoite,
-  Projekti,
-  TallennaProjektiInput,
-  YhteystietoInput,
-} from "@services/api";
+import { HyvaksymisPaatosVaiheInput, KirjaamoOsoite, TallennaProjektiInput, YhteystietoInput } from "@services/api";
 import Notification, { NotificationType } from "@components/notification/Notification";
 import React, { ReactElement, useMemo } from "react";
 import { FormProvider, useForm, UseFormProps } from "react-hook-form";
-import { ProjektiLisatiedolla, useProjekti } from "src/hooks/useProjekti";
+import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
 import { hyvaksymispaatosKuulutusSchema } from "src/schemas/hyvaksymispaatosKuulutus";
 import Painikkeet from "./Painikkeet";
 import KuulutuksenJaIlmoituksenEsikatselu from "./KuulutuksenJaIlmoituksenEsikatselu";
@@ -27,26 +19,24 @@ import PdfPreviewForm from "@components/projekti/PdfPreviewForm";
 import useLeaveConfirm from "src/hooks/useLeaveConfirm";
 import useIsAllowedOnCurrentProjektiRoute from "src/hooks/useIsOnAllowedProjektiRoute";
 import PaatoksenPaiva from "@components/projekti/paatos/kuulutuksenTiedot/PaatoksenPaiva";
-import { PaatosTyyppi } from "../PaatosPageLayout";
+import { getPaatosSpecificData, PaatosTyyppi } from "src/util/getPaatosSpecificData";
+
+type paatosInputValues = Omit<HyvaksymisPaatosVaiheInput, "hallintoOikeus"> & {
+  hallintoOikeus: HyvaksymisPaatosVaiheInput["hallintoOikeus"] | "";
+};
 
 export type KuulutuksenTiedotFormValues = Pick<TallennaProjektiInput, "oid"> & {
-  hyvaksymisPaatosVaihe: Omit<HyvaksymisPaatosVaiheInput, "hallintoOikeus"> & {
-    hallintoOikeus: HyvaksymisPaatosVaiheInput["hallintoOikeus"] | "";
-  };
+  paatos: paatosInputValues;
 };
 
 interface Props {
   paatosTyyppi: PaatosTyyppi;
-  paatosJulkaisut: HyvaksymisPaatosVaiheJulkaisu[] | null | undefined;
-  paatoksenTiedot: HyvaksymisPaatosVaihe | null | undefined;
+  projekti: ProjektiLisatiedolla;
 }
 
 export default function KuulutuksenTiedot(props: Props): ReactElement {
-  const { data: projekti } = useProjekti();
   const { data: kirjaamoOsoitteet } = useKirjaamoOsoitteet();
-  return (
-    <>{projekti && kirjaamoOsoitteet && <KuulutuksenTiedotForm kirjaamoOsoitteet={kirjaamoOsoitteet} projekti={projekti} {...props} />}</>
-  );
+  return <>{props.projekti && kirjaamoOsoitteet && <KuulutuksenTiedotForm kirjaamoOsoitteet={kirjaamoOsoitteet} {...props} />}</>;
 }
 
 type KuulutuksenTiedotFormProps = {
@@ -54,9 +44,14 @@ type KuulutuksenTiedotFormProps = {
   kirjaamoOsoitteet: KirjaamoOsoite[];
 } & Props;
 
-function KuulutuksenTiedotForm({ projekti, kirjaamoOsoitteet, paatosTyyppi }: KuulutuksenTiedotFormProps) {
+function KuulutuksenTiedotForm({ kirjaamoOsoitteet, paatosTyyppi, projekti }: KuulutuksenTiedotFormProps) {
   const pdfFormRef = React.useRef<React.ElementRef<typeof PdfPreviewForm>>(null);
 
+  const { julkaisematonPaatos, viimeisinJulkaisu, kasittelyntilaData, julkaisut } = useMemo(
+    () => getPaatosSpecificData(projekti, paatosTyyppi),
+    [paatosTyyppi, projekti]
+  );
+
   const defaultValues: KuulutuksenTiedotFormValues = useMemo(() => {
     const yhteysTiedot: YhteystietoInput[] =
       projekti?.nahtavillaoloVaihe?.kuulutusYhteystiedot?.yhteysTiedot?.map((yt) => removeTypeName(yt)) || [];
@@ -65,23 +60,19 @@ function KuulutuksenTiedotForm({ projekti, kirjaamoOsoitteet, paatosTyyppi }: Ku
 
     const formValues: KuulutuksenTiedotFormValues = {
       oid: projekti.oid,
-      hyvaksymisPaatosVaihe: {
-        kuulutusPaiva: projekti?.hyvaksymisPaatosVaihe?.kuulutusPaiva || null,
-        kuulutusVaihePaattyyPaiva: projekti?.hyvaksymisPaatosVaihe?.kuulutusVaihePaattyyPaiva || null,
-        hallintoOikeus: projekti?.hyvaksymisPaatosVaihe?.hallintoOikeus || "",
+      paatos: {
+        kuulutusPaiva: julkaisematonPaatos?.kuulutusPaiva || null,
+        kuulutusVaihePaattyyPaiva: julkaisematonPaatos?.kuulutusVaihePaattyyPaiva || null,
+        hallintoOikeus: julkaisematonPaatos?.hallintoOikeus || "",
         kuulutusYhteystiedot: {
           yhteysTiedot,
           yhteysHenkilot,
         },
-        ilmoituksenVastaanottajat: defaultVastaanottajat(
-          projekti,
-          projekti.hyvaksymisPaatosVaihe?.ilmoituksenVastaanottajat,
-          kirjaamoOsoitteet
-        ),
+        ilmoituksenVastaanottajat: defaultVastaanottajat(projekti, julkaisematonPaatos?.ilmoituksenVastaanottajat, kirjaamoOsoitteet),
       },
     };
     return formValues;
-  }, [projekti, kirjaamoOsoitteet]);
+  }, [projekti, julkaisematonPaatos, kirjaamoOsoitteet]);
 
   const formOptions: UseFormProps<KuulutuksenTiedotFormValues> = {
     resolver: yupResolver(hyvaksymispaatosKuulutusSchema, { abortEarly: false, recursive: true }),
@@ -100,13 +91,13 @@ function KuulutuksenTiedotForm({ projekti, kirjaamoOsoitteet, paatosTyyppi }: Ku
 
   useLeaveConfirm(isDirty);
 
-  const voiMuokata = !projekti?.hyvaksymisPaatosVaiheJulkaisut || projekti.hyvaksymisPaatosVaiheJulkaisut.length < 1;
+  const voiMuokata = !julkaisut?.length;
 
   return (
     <>
-      {projekti.hyvaksymisPaatosVaihe?.palautusSyy && (
+      {julkaisematonPaatos?.palautusSyy && (
         <Notification type={NotificationType.WARN}>
-          {"Hyväksymisvaihejulkaisu on palautettu korjattavaksi. Palautuksen syy: " + projekti.hyvaksymisPaatosVaihe.palautusSyy}
+          {"Hyväksymisvaihejulkaisu on palautettu korjattavaksi. Palautuksen syy: " + julkaisematonPaatos.palautusSyy}
         </Notification>
       )}
 
@@ -116,30 +107,31 @@ function KuulutuksenTiedotForm({ projekti, kirjaamoOsoitteet, paatosTyyppi }: Ku
             <form>
               <fieldset disabled={!isAllowedOnRoute || !projekti.nykyinenKayttaja.omaaMuokkausOikeuden}>
                 <KuulutusJaJulkaisuPaiva />
-                <PaatoksenPaiva paatos={projekti.kasittelynTila?.hyvaksymispaatos} projektiOid={projekti.oid} />
+                <PaatoksenPaiva paatosTyyppi={paatosTyyppi} paatos={kasittelyntilaData} projektiOid={projekti.oid} />
                 <MuutoksenHaku />
-                <KuulutuksessaEsitettavatYhteystiedot />
-                <IlmoituksenVastaanottajatKomponentti hyvaksymisPaatosVaihe={projekti?.hyvaksymisPaatosVaihe} />
+                <KuulutuksessaEsitettavatYhteystiedot
+                  projekti={projekti}
+                  julkaisut={julkaisut}
+                  paatosTyyppi={paatosTyyppi}
+                  julkaisematonPaatos={julkaisematonPaatos}
+                />
+                <IlmoituksenVastaanottajatKomponentti paatosVaihe={julkaisematonPaatos} />
 
                 {pdfFormRef.current?.esikatselePdf && (
-                  <KuulutuksenJaIlmoituksenEsikatselu esikatselePdf={pdfFormRef.current?.esikatselePdf} />
+                  <KuulutuksenJaIlmoituksenEsikatselu paatosTyyppi={paatosTyyppi} esikatselePdf={pdfFormRef.current?.esikatselePdf} />
                 )}
-                <Painikkeet projekti={projekti} />
+                <Painikkeet paatosTyyppi={paatosTyyppi} projekti={projekti} julkaisut={julkaisut} />
               </fieldset>
             </form>
           </FormProvider>
         </>
       )}
-      {!voiMuokata && projekti && projekti.hyvaksymisPaatosVaiheJulkaisut?.[projekti.hyvaksymisPaatosVaiheJulkaisut.length - 1] && (
+      {!voiMuokata && projekti && viimeisinJulkaisu && (
         <>
           <FormProvider {...useFormReturn}>
             <form>
-              <Lukunakyma
-                projekti={projekti}
-                paatosTyyppi={paatosTyyppi}
-                hyvaksymisPaatosVaiheJulkaisu={projekti.hyvaksymisPaatosVaiheJulkaisut[projekti.hyvaksymisPaatosVaiheJulkaisut.length - 1]}
-              />
-              <Painikkeet projekti={projekti} />
+              <Lukunakyma projekti={projekti} paatosTyyppi={paatosTyyppi} julkaisu={viimeisinJulkaisu} />
+              <Painikkeet paatosTyyppi={paatosTyyppi} projekti={projekti} julkaisut={julkaisut} />
             </form>
           </FormProvider>
         </>
diff --git a/src/components/projekti/suunnitteluvaihe/SuunnitteluvaihePageLayout.tsx b/src/components/projekti/suunnitteluvaihe/SuunnitteluvaihePageLayout.tsx
index 4156b68a2..5f218c3b6 100644
--- a/src/components/projekti/suunnitteluvaihe/SuunnitteluvaihePageLayout.tsx
+++ b/src/components/projekti/suunnitteluvaihe/SuunnitteluvaihePageLayout.tsx
@@ -33,10 +33,10 @@ function SuunnitteluPageLayout({
   children?: ReactNode;
 }): ReactElement {
   const router = useRouter();
-  const vuorovaikutusKierrosNumerot = useMemo(
-    () => projekti?.suunnitteluVaihe?.vuorovaikutukset?.map((vuorovaikutus) => vuorovaikutus.vuorovaikutusNumero) || [1],
-    [projekti?.suunnitteluVaihe?.vuorovaikutukset]
-  );
+  const vuorovaikutusKierrosNumerot = useMemo(() => {
+    const vuorovaikutukset = projekti?.suunnitteluVaihe?.vuorovaikutukset;
+    return vuorovaikutukset?.length ? vuorovaikutukset?.map((vuorovaikutus) => vuorovaikutus.vuorovaikutusNumero) : [1];
+  }, [projekti?.suunnitteluVaihe?.vuorovaikutukset]);
 
   const tabProps: LinkTabProps[] = useMemo(() => {
     const vuorovaikutusTabs = vuorovaikutusKierrosNumerot.map<LinkTabProps>((kierrosId) => {
diff --git a/src/hooks/useProjekti.tsx b/src/hooks/useProjekti.tsx
index 12748f6da..fa12c74d9 100644
--- a/src/hooks/useProjekti.tsx
+++ b/src/hooks/useProjekti.tsx
@@ -8,7 +8,7 @@ export type useProjektiOptions = SWRConfiguration<ProjektiLisatiedolla | null, a
 export function useProjekti(config: useProjektiOptions = {}) {
   const router = useRouter();
   const oid = typeof router.query.oid === "string" ? router.query.oid : undefined;
-  if (!router.route.startsWith("/yllapito")) {
+  if (!router.asPath.startsWith("/yllapito")) {
     throw new Error("Inproper route for the use of useProjekti hook");
   }
   const { data: kayttaja } = useCurrentUser();
diff --git a/src/hooks/useProjektiJulkinen.tsx b/src/hooks/useProjektiJulkinen.tsx
index d8ddc5a14..8777b0c42 100644
--- a/src/hooks/useProjektiJulkinen.tsx
+++ b/src/hooks/useProjektiJulkinen.tsx
@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 
 export function useProjektiJulkinen() {
   const router = useRouter();
-  if (router.route.startsWith("/yllapito")) {
+  if (router.asPath.startsWith("/yllapito")) {
     throw new Error("Inproper route for the use of useProjektiJulkinen hook");
   }
   const oid = typeof router.query.oid === "string" ? router.query.oid : undefined;
diff --git a/src/pages/yllapito/projekti/[oid]/hyvaksyminen/aineisto.tsx b/src/pages/yllapito/projekti/[oid]/hyvaksyminen/aineisto.tsx
deleted file mode 100644
index 7feffb89e..000000000
--- a/src/pages/yllapito/projekti/[oid]/hyvaksyminen/aineisto.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React, { VFC } from "react";
-import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
-import HyvaksyminenPageLayout, { PaatosTyyppi } from "@components/projekti/paatos/PaatosPageLayout";
-import ProjektiConsumer from "@components/projekti/ProjektiConsumer";
-import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
-import PaatosAineistotLukutila from "@components/projekti/lukutila/PaatosAineistotLukutila";
-import PaatosAineistot from "@components/projekti/paatos/aineistot/index";
-
-export default function HyvaksyminenAineistoWrapper() {
-  return (
-    <ProjektiConsumer useProjektiOptions={{ revalidateOnMount: true }}>
-      {(projekti) => <HyvaksyminenAineisto projekti={projekti} />}
-    </ProjektiConsumer>
-  );
-}
-
-const HyvaksyminenAineisto: VFC<{ projekti: ProjektiLisatiedolla }> = ({ projekti }) => {
-  const julkaisut = projekti?.hyvaksymisPaatosVaiheJulkaisut;
-  const paatosJulkaisu = julkaisut ? julkaisut[julkaisut.length - 1] : null;
-
-  const epaaktiivinen = projektiOnEpaaktiivinen(projekti);
-  return (
-    <HyvaksyminenPageLayout paatosTyyppi={PaatosTyyppi.HYVAKSYMISPAATOS}>
-      {epaaktiivinen && paatosJulkaisu ? (
-        <PaatosAineistotLukutila oid={projekti.oid} paatosJulkaisu={paatosJulkaisu} />
-      ) : (
-        <PaatosAineistot />
-      )}
-    </HyvaksyminenPageLayout>
-  );
-};
diff --git a/src/pages/yllapito/projekti/[oid]/hyvaksyminen/index.tsx b/src/pages/yllapito/projekti/[oid]/hyvaksyminen/index.tsx
deleted file mode 100644
index 0d38d0d8c..000000000
--- a/src/pages/yllapito/projekti/[oid]/hyvaksyminen/index.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React, { VFC } from "react";
-import KuulutuksenTiedot from "@components/projekti/paatos/kuulutuksenTiedot/index";
-import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
-import PaatosPageLayout, { PaatosTyyppi } from "@components/projekti/paatos/PaatosPageLayout";
-import ProjektiConsumer from "@components/projekti/ProjektiConsumer";
-import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
-import Lukunakyma from "@components/projekti/paatos/kuulutuksenTiedot/Lukunakyma";
-
-export default function HyvaksyminenWrapper() {
-  return (
-    <ProjektiConsumer useProjektiOptions={{ revalidateOnMount: true }}>
-      {(projekti) => <Hyvaksyminen projekti={projekti} />}
-    </ProjektiConsumer>
-  );
-}
-
-const Hyvaksyminen: VFC<{ projekti: ProjektiLisatiedolla }> = ({ projekti }) => {
-  const julkaisut = projekti.hyvaksymisPaatosVaiheJulkaisut;
-  const paatosJulkaisu = julkaisut ? julkaisut[julkaisut.length - 1] : null;
-  const paatoksenTiedot = projekti.hyvaksymisPaatosVaihe;
-
-  const epaaktiivinen = projektiOnEpaaktiivinen(projekti);
-  return (
-    <PaatosPageLayout paatosTyyppi={PaatosTyyppi.HYVAKSYMISPAATOS}>
-      {epaaktiivinen && paatosJulkaisu ? (
-        <Lukunakyma projekti={projekti} hyvaksymisPaatosVaiheJulkaisu={paatosJulkaisu} paatosTyyppi={PaatosTyyppi.HYVAKSYMISPAATOS} />
-      ) : (
-        <KuulutuksenTiedot paatosJulkaisut={julkaisut} paatoksenTiedot={paatoksenTiedot} paatosTyyppi={PaatosTyyppi.HYVAKSYMISPAATOS} />
-      )}
-    </PaatosPageLayout>
-  );
-};
diff --git a/src/pages/yllapito/projekti/[oid]/hyvaksymispaatos/aineisto.tsx b/src/pages/yllapito/projekti/[oid]/hyvaksymispaatos/aineisto.tsx
new file mode 100644
index 000000000..4ba5ddae1
--- /dev/null
+++ b/src/pages/yllapito/projekti/[oid]/hyvaksymispaatos/aineisto.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import ProjektiConsumer from "@components/projekti/ProjektiConsumer";
+import { PaatoksenAineistotPage } from "@components/projekti/paatos/PaatosAineistotPage";
+import { PaatosTyyppi } from "src/util/getPaatosSpecificData";
+
+export default function HyvaksyminenAineistoWrapper() {
+  return (
+    <ProjektiConsumer useProjektiOptions={{ revalidateOnMount: true }}>
+      {(projekti) => <PaatoksenAineistotPage paatosTyyppi={PaatosTyyppi.HYVAKSYMISPAATOS} projekti={projekti} />}
+    </ProjektiConsumer>
+  );
+}
diff --git a/src/pages/yllapito/projekti/[oid]/hyvaksymispaatos/index.tsx b/src/pages/yllapito/projekti/[oid]/hyvaksymispaatos/index.tsx
new file mode 100644
index 000000000..639cf2149
--- /dev/null
+++ b/src/pages/yllapito/projekti/[oid]/hyvaksymispaatos/index.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import ProjektiConsumer from "@components/projekti/ProjektiConsumer";
+import { PaatoksenKuulutuksenTiedotPage } from "@components/projekti/paatos/PaatosKuulutuksenTiedotPage";
+import { PaatosTyyppi } from "src/util/getPaatosSpecificData";
+
+export default function HyvaksyminenWrapper() {
+  return (
+    <ProjektiConsumer useProjektiOptions={{ revalidateOnMount: true }}>
+      {(projekti) => <PaatoksenKuulutuksenTiedotPage paatosTyyppi={PaatosTyyppi.HYVAKSYMISPAATOS} projekti={projekti} />}
+    </ProjektiConsumer>
+  );
+}
diff --git a/src/pages/yllapito/projekti/[oid]/jatkaminen1/aineisto.tsx b/src/pages/yllapito/projekti/[oid]/jatkaminen1/aineisto.tsx
index 4eebb9e76..1b3abf758 100644
--- a/src/pages/yllapito/projekti/[oid]/jatkaminen1/aineisto.tsx
+++ b/src/pages/yllapito/projekti/[oid]/jatkaminen1/aineisto.tsx
@@ -1,31 +1,12 @@
-import React, { VFC } from "react";
-import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
-import HyvaksyminenPageLayout, { PaatosTyyppi } from "@components/projekti/paatos/PaatosPageLayout";
+import React from "react";
 import ProjektiConsumer from "@components/projekti/ProjektiConsumer";
-import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
-import PaatosAineistotLukutila from "@components/projekti/lukutila/PaatosAineistotLukutila";
-import PaatosAineistot from "@components/projekti/paatos/aineistot/index";
+import { PaatoksenAineistotPage } from "@components/projekti/paatos/PaatosAineistotPage";
+import { PaatosTyyppi } from "src/util/getPaatosSpecificData";
 
 export default function Jatkaminen1AineistoWrapper() {
   return (
     <ProjektiConsumer useProjektiOptions={{ revalidateOnMount: true }}>
-      {(projekti) => <Jatkaminen1Aineisto projekti={projekti} />}
+      {(projekti) => <PaatoksenAineistotPage paatosTyyppi={PaatosTyyppi.JATKOPAATOS1} projekti={projekti} />}
     </ProjektiConsumer>
   );
 }
-
-const Jatkaminen1Aineisto: VFC<{ projekti: ProjektiLisatiedolla }> = ({ projekti }) => {
-  const julkaisut = projekti?.jatkoPaatos1VaiheJulkaisut;
-  const paatosJulkaisu = julkaisut ? julkaisut[julkaisut.length - 1] : null;
-
-  const epaaktiivinen = projektiOnEpaaktiivinen(projekti);
-  return (
-    <HyvaksyminenPageLayout paatosTyyppi={PaatosTyyppi.JATKOPAATOS1}>
-      {epaaktiivinen && paatosJulkaisu ? (
-        <PaatosAineistotLukutila oid={projekti.oid} paatosJulkaisu={paatosJulkaisu} />
-      ) : (
-        <PaatosAineistot />
-      )}
-    </HyvaksyminenPageLayout>
-  );
-};
diff --git a/src/pages/yllapito/projekti/[oid]/jatkaminen1/index.tsx b/src/pages/yllapito/projekti/[oid]/jatkaminen1/index.tsx
index 054fcf600..728189e19 100644
--- a/src/pages/yllapito/projekti/[oid]/jatkaminen1/index.tsx
+++ b/src/pages/yllapito/projekti/[oid]/jatkaminen1/index.tsx
@@ -1,31 +1,12 @@
-import React, { VFC } from "react";
-import KuulutuksenTiedot from "@components/projekti/paatos/kuulutuksenTiedot/index";
-import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
-import HyvaksyminenPageLayout, { PaatosTyyppi } from "@components/projekti/paatos/PaatosPageLayout";
+import React from "react";
 import ProjektiConsumer from "@components/projekti/ProjektiConsumer";
-import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
-import Lukunakyma from "@components/projekti/paatos/kuulutuksenTiedot/Lukunakyma";
+import { PaatosTyyppi } from "src/util/getPaatosSpecificData";
+import { PaatoksenKuulutuksenTiedotPage } from "@components/projekti/paatos/PaatosKuulutuksenTiedotPage";
 
 export default function Jatkaminen1Wrapper() {
   return (
     <ProjektiConsumer useProjektiOptions={{ revalidateOnMount: true }}>
-      {(projekti) => <Jatkaminen1 projekti={projekti} />}
+      {(projekti) => <PaatoksenKuulutuksenTiedotPage paatosTyyppi={PaatosTyyppi.JATKOPAATOS1} projekti={projekti} />}
     </ProjektiConsumer>
   );
 }
-
-const Jatkaminen1: VFC<{ projekti: ProjektiLisatiedolla }> = ({ projekti }) => {
-  const julkaisut = projekti?.jatkoPaatos1VaiheJulkaisut;
-  const paatosJulkaisu = julkaisut ? julkaisut[julkaisut.length - 1] : null;
-
-  const epaaktiivinen = projektiOnEpaaktiivinen(projekti);
-  return (
-    <HyvaksyminenPageLayout paatosTyyppi={PaatosTyyppi.JATKOPAATOS1}>
-      {epaaktiivinen && paatosJulkaisu ? (
-        <Lukunakyma projekti={projekti} hyvaksymisPaatosVaiheJulkaisu={paatosJulkaisu} paatosTyyppi={PaatosTyyppi.JATKOPAATOS1} />
-      ) : (
-        <KuulutuksenTiedot paatosTyyppi={PaatosTyyppi.JATKOPAATOS1} />
-      )}
-    </HyvaksyminenPageLayout>
-  );
-};
diff --git a/src/schemas/hyvaksymispaatosKuulutus.tsx b/src/schemas/hyvaksymispaatosKuulutus.tsx
index 2a74549c2..1e7e07193 100644
--- a/src/schemas/hyvaksymispaatosKuulutus.tsx
+++ b/src/schemas/hyvaksymispaatosKuulutus.tsx
@@ -4,7 +4,7 @@ import { paivamaara } from "./paivamaaraSchema";
 
 export const hyvaksymispaatosKuulutusSchema = Yup.object().shape({
   oid: Yup.string().required(),
-  hyvaksymisPaatosVaihe: Yup.object()
+  paatos: Yup.object()
     .required()
     .shape({
       hallintoOikeus: Yup.string().required("Hallinto-oikeus on annettava"),
diff --git a/src/util/getPaatosSpecificData.ts b/src/util/getPaatosSpecificData.ts
new file mode 100644
index 000000000..acb6ff78e
--- /dev/null
+++ b/src/util/getPaatosSpecificData.ts
@@ -0,0 +1,76 @@
+import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
+import {
+  Hyvaksymispaatos,
+  HyvaksymisPaatosVaihe,
+  HyvaksymisPaatosVaiheJulkaisu,
+  KasittelynTila,
+  Projekti,
+  TilasiirtymaTyyppi,
+} from "@services/api";
+
+export enum PaatosTyyppi {
+  HYVAKSYMISPAATOS = "HYVAKSYMISPAATOS",
+  JATKOPAATOS1 = "JATKOPAATOS1",
+  JATKOPAATOS2 = "JATKOPAATOS2",
+}
+
+export const paatosSpecificTilasiirtymaTyyppiMap: Record<PaatosTyyppi, TilasiirtymaTyyppi> = {
+  HYVAKSYMISPAATOS: TilasiirtymaTyyppi.HYVAKSYMISPAATOSVAIHE,
+  JATKOPAATOS1: TilasiirtymaTyyppi.JATKOPAATOS_1,
+  JATKOPAATOS2: TilasiirtymaTyyppi.JATKOPAATOS_2,
+};
+
+export interface PaatosSpecificData {
+  julkaisut: HyvaksymisPaatosVaiheJulkaisu[] | null | undefined;
+  viimeisinJulkaisu: HyvaksymisPaatosVaiheJulkaisu | null;
+  julkaisematonPaatos: HyvaksymisPaatosVaihe | null | undefined;
+  kasittelyntilaData: Hyvaksymispaatos | null | undefined;
+}
+
+export type PaatosJulkaisutAvain = keyof Pick<
+  Projekti,
+  "hyvaksymisPaatosVaiheJulkaisut" | "jatkoPaatos1VaiheJulkaisut" | "jatkoPaatos2VaiheJulkaisut"
+>;
+
+export type PaatosVaiheAvain = keyof Pick<Projekti, "hyvaksymisPaatosVaihe" | "jatkoPaatos1Vaihe" | "jatkoPaatos2Vaihe">;
+
+export type PaatosAvain = keyof Pick<KasittelynTila, "hyvaksymispaatos" | "ensimmainenJatkopaatos" | "toinenJatkopaatos">;
+
+export interface PaatoksenAvaimet {
+  paatosJulkaisutAvain: PaatosJulkaisutAvain;
+  paatosVaiheAvain: PaatosVaiheAvain;
+  paatosAvain: PaatosAvain;
+}
+
+export const paatosSpecificRoutesMap: Record<PaatosTyyppi, PaatoksenAvaimet> = {
+  HYVAKSYMISPAATOS: {
+    paatosAvain: "hyvaksymispaatos",
+    paatosJulkaisutAvain: "hyvaksymisPaatosVaiheJulkaisut",
+    paatosVaiheAvain: "hyvaksymisPaatosVaihe",
+  },
+  JATKOPAATOS1: {
+    paatosAvain: "ensimmainenJatkopaatos",
+    paatosJulkaisutAvain: "jatkoPaatos1VaiheJulkaisut",
+    paatosVaiheAvain: "jatkoPaatos1Vaihe",
+  },
+  JATKOPAATOS2: {
+    paatosAvain: "toinenJatkopaatos",
+    paatosJulkaisutAvain: "jatkoPaatos2VaiheJulkaisut",
+    paatosVaiheAvain: "jatkoPaatos2Vaihe",
+  },
+};
+
+export const getPaatosSpecificData: (projekti: ProjektiLisatiedolla, paatosTyyppi: PaatosTyyppi) => PaatosSpecificData = (
+  projekti: ProjektiLisatiedolla,
+  paatosTyyppi: PaatosTyyppi
+) => {
+  const { paatosAvain, paatosJulkaisutAvain, paatosVaiheAvain } = paatosSpecificRoutesMap[paatosTyyppi];
+  const julkaisut = projekti[paatosJulkaisutAvain];
+
+  return {
+    julkaisut,
+    viimeisinJulkaisu: julkaisut ? julkaisut[julkaisut.length - 1] : null,
+    julkaisematonPaatos: projekti[paatosVaiheAvain],
+    kasittelyntilaData: projekti.kasittelynTila?.[paatosAvain],
+  };
+};
diff --git a/src/util/getValidatedKierrosId.ts b/src/util/getValidatedKierrosId.ts
index 84dda2532..7a57b7c9d 100644
--- a/src/util/getValidatedKierrosId.ts
+++ b/src/util/getValidatedKierrosId.ts
@@ -7,7 +7,7 @@ export const getValidatedKierrosId = (router: NextRouter, projekti: ProjektiLisa
   const vuorovaikutukset = projekti.suunnitteluVaihe?.vuorovaikutukset;
   return typeof kierrosId === "string" &&
     !isInteger(kierrosId) &&
-    vuorovaikutukset?.some((vuorovaikutus) => vuorovaikutus.vuorovaikutusNumero === parseInt(kierrosId) || kierrosId === "1")
+    (vuorovaikutukset?.some((vuorovaikutus) => vuorovaikutus.vuorovaikutusNumero === parseInt(kierrosId)) || kierrosId === "1")
     ? parseInt(kierrosId)
     : undefined;
 };

From b72f316a1d5afe29cba9555f3d565552f0d4ad12 Mon Sep 17 00:00:00 2001
From: tomi korkalainen <tomi.korkalainen@cgi.com>
Date: Wed, 9 Nov 2022 12:38:21 +0200
Subject: [PATCH 09/14] korjaa jatkopaatoksien teksteja aineistosivuilla

---
 .../paatos/aineistot/Muokkausnakyma.tsx       | 45 +++++++++++++------
 1 file changed, 32 insertions(+), 13 deletions(-)

diff --git a/src/components/projekti/paatos/aineistot/Muokkausnakyma.tsx b/src/components/projekti/paatos/aineistot/Muokkausnakyma.tsx
index 56b6bdc8b..349bd5c45 100644
--- a/src/components/projekti/paatos/aineistot/Muokkausnakyma.tsx
+++ b/src/components/projekti/paatos/aineistot/Muokkausnakyma.tsx
@@ -5,7 +5,7 @@ import { UseFormProps, useForm, FormProvider } from "react-hook-form";
 import { useProjekti } from "src/hooks/useProjekti";
 import { nahtavillaoloAineistotSchema } from "src/schemas/nahtavillaoloAineistot";
 import HyvaksymisPaatosVaihePainikkeet from "./HyvaksymisPaatosVaihePainikkeet";
-import SuunnitelmatJaAineistot from "../../common/SuunnitelmatJaAineistot";
+import SuunnitelmatJaAineistot, { SuunnitelmatJaAineistotProps } from "../../common/SuunnitelmatJaAineistot";
 import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
 import { aineistoKategoriat } from "common/aineistoKategoriat";
 import useLeaveConfirm from "src/hooks/useLeaveConfirm";
@@ -54,6 +54,36 @@ interface MuokkausnakymaFormProps {
   paatosTyyppi: PaatosTyyppi;
 }
 
+const hyvaksymisPaatosSuunnitelmatJaAineistotProps: SuunnitelmatJaAineistotProps = {
+  sectionTitle: "Päätös ja päätöksen liitteenä oleva aineisto",
+  sectionInfoText:
+    "Liitä Liikenne- ja viestintäviraston päätös. Liitettävä päätös haetaan Projektivelhosta. Päätös ja sen liitteenä oleva aineisto julkaistaan palvelun julkisella puolella kuulutuksen julkaisupäivänä.",
+  dialogInfoText: "Valitse tiedostot, jotka haluat tuoda päätöksen liitteeksi.",
+  sectionSubtitle: "Päätöksen liitteenä oleva aineisto",
+  paatos: {
+    paatosInfoText:
+      "Liitä Liikenne- ja viestintäviraston päätös. Päätöksen päivämäärä sekä asianumero löytyvät Kuulutuksen tiedot -välilehdellä jos ne on lisätty Käsittelyn tila -sivulle.",
+    paatosSubtitle: "Päätös *",
+  },
+};
+
+const jatkopaatosPaatosSuunnitelmatProps: SuunnitelmatJaAineistotProps = {
+  ...hyvaksymisPaatosSuunnitelmatJaAineistotProps,
+  sectionInfoText:
+    "Liitä kuulutukselle Liikenne- ja viestintäviraston päätös sekä jatkopäätös. Liitettävät päätökset sekä päätösten liitteenä olevat aineistot haetaan Projektivelhosta. Päätökset ja sen liitteenä oleva aineisto julkaistaan palvelun julkisella puolella kuulutuksen julkaisupäivänä.",
+  paatos: {
+    paatosInfoText: "Päätös ja jatkopäätös *",
+    paatosSubtitle:
+      "Liitä Liikenne- ja viestintäviraston päätökset suunnitelman hyväksymisestä sekä päätös suunnitelman voimassaoloajan pidentämisestä. Jatkopäätöksen päivämäärä sekä asiatunnus löytyvät automaattisesti Kuulutuksen tiedot -välilehdeltä.",
+  },
+};
+
+const paatosTyyppiToSuunnitelmatJaAineistotPropsMap: Record<PaatosTyyppi, SuunnitelmatJaAineistotProps> = {
+  HYVAKSYMISPAATOS: hyvaksymisPaatosSuunnitelmatJaAineistotProps,
+  JATKOPAATOS1: jatkopaatosPaatosSuunnitelmatProps,
+  JATKOPAATOS2: jatkopaatosPaatosSuunnitelmatProps, // Maybe the texts are the same as in jatkopaatos1
+};
+
 function MuokkausnakymaForm({
   projekti,
   julkaisematonPaatos,
@@ -94,18 +124,7 @@ function MuokkausnakymaForm({
     <FormProvider {...useFormReturn}>
       <form>
         <fieldset disabled={!isAllowedOnRoute || !projekti.nykyinenKayttaja.omaaMuokkausOikeuden}>
-          <SuunnitelmatJaAineistot
-            sectionTitle="Päätös ja päätöksen liitteenä oleva aineisto"
-            sectionInfoText="Liitä Liikenne- ja viestintäviraston päätös. Liitettävä päätös haetaan Projektivelhosta. Päätös ja sen liitteenä oleva aineisto julkaistaan palvelun julkisella puolella kuulutuksen julkaisupäivänä."
-            dialogInfoText="Valitse tiedostot,
-            jotka haluat tuoda päätöksen liitteeksi."
-            sectionSubtitle="Päätöksen liitteenä oleva aineisto"
-            paatos={{
-              paatosInfoText:
-                "Liitä Liikenne- ja viestintäviraston päätös. Päätöksen päivämäärä sekä asianumero löytyvät Kuulutuksen tiedot -välilehdellä jos ne on lisätty Käsittelyn tila -sivulle.",
-              paatosSubtitle: "Päätös *",
-            }}
-          />
+          <SuunnitelmatJaAineistot {...paatosTyyppiToSuunnitelmatJaAineistotPropsMap[paatosTyyppi]} />
           <HyvaksymisPaatosVaihePainikkeet paatosTyyppi={paatosTyyppi} />
         </fieldset>
       </form>

From a3b4935df3f7b28209fe9ce0f5d721ef07d20d5b Mon Sep 17 00:00:00 2001
From: tomi korkalainen <tomi.korkalainen@cgi.com>
Date: Wed, 9 Nov 2022 15:44:06 +0200
Subject: [PATCH 10/14] poista turhat importit

---
 .../projekti/paatos/kuulutuksenTiedot/Lukunakyma.tsx           | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/projekti/paatos/kuulutuksenTiedot/Lukunakyma.tsx b/src/components/projekti/paatos/kuulutuksenTiedot/Lukunakyma.tsx
index c6249cd1a..17372e746 100644
--- a/src/components/projekti/paatos/kuulutuksenTiedot/Lukunakyma.tsx
+++ b/src/components/projekti/paatos/kuulutuksenTiedot/Lukunakyma.tsx
@@ -1,6 +1,5 @@
 import React, { ReactElement, useMemo } from "react";
-import { HyvaksymisPaatosVaiheJulkaisu, KasittelynTila, Kieli } from "@services/api";
-import capitalize from "lodash/capitalize";
+import { HyvaksymisPaatosVaiheJulkaisu, Kieli } from "@services/api";
 import replace from "lodash/replace";
 import { examineKuulutusPaiva } from "src/util/aloitusKuulutusUtil";
 import FormatDate from "@components/FormatDate";

From 7a5b1d79487691901ea180cfbaecfb999ecd82c8 Mon Sep 17 00:00:00 2001
From: tomi korkalainen <tomi.korkalainen@cgi.com>
Date: Thu, 10 Nov 2022 10:44:14 +0200
Subject: [PATCH 11/14] =?UTF-8?q?korjaa=20testej=C3=A4=20ja=20korjaa=20tot?=
 =?UTF-8?q?eutusta,=20ett=C3=A4=20testit=20menee=20taas=20l=C3=A4pi?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../4-migraatio/1-migraatio.spec.js           | 19 +++++++------
 .../projekti/paatos/PaatosPageLayout.tsx      | 28 ++++++++-----------
 2 files changed, 21 insertions(+), 26 deletions(-)

diff --git a/cypress/integration/4-migraatio/1-migraatio.spec.js b/cypress/integration/4-migraatio/1-migraatio.spec.js
index 76175a86a..9bef1abaa 100644
--- a/cypress/integration/4-migraatio/1-migraatio.spec.js
+++ b/cypress/integration/4-migraatio/1-migraatio.spec.js
@@ -159,17 +159,17 @@ describe("Migraatio", () => {
     cy.get("#kuulutuksentiedot_tab").click({ force: true });
 
     const today = formatDate(dayjs());
-    cy.get('[name="hyvaksymisPaatosVaihe.kuulutusPaiva"]').should("be.enabled").type(today, {
+    cy.get('[name="paatos.kuulutusPaiva"]').should("be.enabled").type(today, {
       waitForAnimations: true,
     });
 
-    cy.get('[name="hyvaksymisPaatosVaihe.hallintoOikeus"]').select("HELSINKI");
-    cy.get('[name="hyvaksymisPaatosVaihe.ilmoituksenVastaanottajat.kunnat.0.sahkoposti"]').clear().type("test@vayla.fi");
-    cy.get('[name="hyvaksymisPaatosVaihe.ilmoituksenVastaanottajat.kunnat.1.sahkoposti"]').clear().type("test@vayla.fi");
+    cy.get('[name="paatos.hallintoOikeus"]').select("HELSINKI");
+    cy.get('[name="paatos.ilmoituksenVastaanottajat.kunnat.0.sahkoposti"]').clear().type("test@vayla.fi");
+    cy.get('[name="paatos.ilmoituksenVastaanottajat.kunnat.1.sahkoposti"]').clear().type("test@vayla.fi");
 
     cy.get("#save_and_send_for_acceptance").click();
     cy.contains("Lähetys onnistui", { timeout: 30000 });
-    cy.get("#kuulutuksentiedot").click({ force: true });
+    cy.get("#kuulutuksentiedot_tab").click({ force: true });
     cy.get("#button_open_acceptance_dialog")
       .should("be.enabled")
       .scrollIntoView({ offset: { top: 500, left: 0 } })
@@ -179,7 +179,7 @@ describe("Migraatio", () => {
     cy.contains("Hyväksyminen onnistui", { timeout: 30000 });
 
     cy.reload();
-    cy.get("#kuulutuksentiedot").click({ force: true });
+    cy.get("#kuulutuksentiedot_tab").click({ force: true });
 
     cy.contains("Kuulutus nähtäville asettamisesta on julkaistu");
   });
@@ -194,12 +194,13 @@ describe("Migraatio", () => {
     cy.get("p").contains("Navigoi vaiheita").click();
 
     cy.get("#sidenavi_0").should("exist").click({ force: true });
-    cy.contains("span", "Aloituskuulutus");
+    cy.contains("span", "Suunnittelun käynnistäminen");
+    cy.contains("Suunnitelma on tuotu toisesta järjestelmästä, joten tiedoissa voi olla puutteita.");
     cy.get("#sidenavi_1").should("exist").click({ force: true });
-    cy.contains("span", "Suunnittelu");
+    cy.contains("span", "Suunnittelussa");
     cy.contains("Suunnitelma on tuotu toisesta järjestelmästä, joten tiedoissa voi olla puutteita.");
     cy.get("#sidenavi_2").should("exist").click({ force: true });
-    cy.contains("span", "Nähtävilläolo");
+    cy.contains("span", "Suunnitteluaineisto nähtävillä");
     cy.contains("Suunnitelma on tuotu toisesta järjestelmästä, joten tiedoissa voi olla puutteita.");
     cy.get("#sidenavi_3").should("exist").click({ force: true });
     cy.contains("span", "Hyväksymismenettelyssä");
diff --git a/src/components/projekti/paatos/PaatosPageLayout.tsx b/src/components/projekti/paatos/PaatosPageLayout.tsx
index b01bb1202..eeec2a0e5 100644
--- a/src/components/projekti/paatos/PaatosPageLayout.tsx
+++ b/src/components/projekti/paatos/PaatosPageLayout.tsx
@@ -5,14 +5,14 @@ import { Link, Tabs } from "@mui/material";
 import { useRouter } from "next/router";
 import { UrlObject } from "url";
 import { LinkTab, LinkTabProps } from "@components/layout/LinkTab";
-import { HyvaksymisPaatosVaiheTila, NahtavillaoloVaiheTila } from "@services/api";
+import { HyvaksymisPaatosVaiheTila } from "@services/api";
 import Notification, { NotificationType } from "@components/notification/Notification";
 import { examineKuulutusPaiva } from "src/util/aloitusKuulutusUtil";
 import FormatDate from "@components/FormatDate";
 import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
 import ProjektiConsumer from "@components/projekti/ProjektiConsumer";
 import { projektiOnEpaaktiivinen } from "src/util/statusUtil";
-import { PaatosTyyppi } from "src/util/getPaatosSpecificData";
+import { PaatosTyyppi, getPaatosSpecificData } from "src/util/getPaatosSpecificData";
 
 interface PaatosTyyppiSpecificData {
   paatosRoutePart: string;
@@ -50,22 +50,16 @@ function PaatosPageLayoutContent({
 }): ReactElement {
   const router = useRouter();
 
-  const nahtavillaolovaiheJulkaisu = projekti.nahtavillaoloVaiheJulkaisut?.[projekti.nahtavillaoloVaiheJulkaisut.length - 1];
-  const migroitu = nahtavillaolovaiheJulkaisu?.tila == NahtavillaoloVaiheTila.MIGROITU;
+  const { julkaisut, viimeisinJulkaisu } = useMemo(() => getPaatosSpecificData(projekti, paatosTyyppi), [paatosTyyppi, projekti]);
+
+  const migroitu = viimeisinJulkaisu?.tila == HyvaksymisPaatosVaiheTila.MIGROITU;
   const epaaktiivinen = projektiOnEpaaktiivinen(projekti);
 
   const { paatosRoutePart, pageTitle } = useMemo(() => paatosTyyppiSpecificContentMap[paatosTyyppi], [paatosTyyppi]);
 
-  const kertaalleenLahetettyHyvaksyttavaksi = useMemo(
-    () => projekti?.hyvaksymisPaatosVaiheJulkaisut && projekti.hyvaksymisPaatosVaiheJulkaisut.length >= 1,
-    [projekti.hyvaksymisPaatosVaiheJulkaisut]
-  );
-
-  const hyvaksymisPaatosVaiheJulkaisu = projekti?.hyvaksymisPaatosVaiheJulkaisut
-    ? projekti.hyvaksymisPaatosVaiheJulkaisut[projekti.hyvaksymisPaatosVaiheJulkaisut.length - 1]
-    : null;
+  const kertaalleenLahetettyHyvaksyttavaksi = !!julkaisut?.length;
 
-  let { kuulutusPaiva, published } = examineKuulutusPaiva(hyvaksymisPaatosVaiheJulkaisu?.kuulutusPaiva);
+  let { kuulutusPaiva, published } = examineKuulutusPaiva(viimeisinJulkaisu?.kuulutusPaiva);
 
   const tabProps: LinkTabProps[] = useMemo(() => {
     const paatosRoute = paatosRoutePart;
@@ -138,17 +132,17 @@ function PaatosPageLayoutContent({
         )}
         {!epaaktiivinen && (
           <Section noDivider>
-            {!published && hyvaksymisPaatosVaiheJulkaisu?.tila === HyvaksymisPaatosVaiheTila.HYVAKSYTTY && (
+            {!published && viimeisinJulkaisu?.tila === HyvaksymisPaatosVaiheTila.HYVAKSYTTY && (
               <Notification type={NotificationType.WARN}>Kuulutusta ei ole vielä julkaistu. Kuulutuspäivä {kuulutusPaiva}.</Notification>
             )}
-            {published && hyvaksymisPaatosVaiheJulkaisu?.tila === HyvaksymisPaatosVaiheTila.HYVAKSYTTY && (
+            {published && viimeisinJulkaisu?.tila === HyvaksymisPaatosVaiheTila.HYVAKSYTTY && (
               <Notification type={NotificationType.INFO_GREEN}>
                 Kuulutus nähtäville asettamisesta on julkaistu {kuulutusPaiva}. Projekti näytetään kuulutuspäivästä lasketun määräajan
                 jälkeen palvelun julkisella puolella suunnittelussa olevana. Kuulutusvaihe päättyy{" "}
-                <FormatDate date={hyvaksymisPaatosVaiheJulkaisu.kuulutusVaihePaattyyPaiva} />.
+                <FormatDate date={viimeisinJulkaisu.kuulutusVaihePaattyyPaiva} />.
               </Notification>
             )}
-            {hyvaksymisPaatosVaiheJulkaisu && hyvaksymisPaatosVaiheJulkaisu?.tila === HyvaksymisPaatosVaiheTila.ODOTTAA_HYVAKSYNTAA && (
+            {viimeisinJulkaisu && viimeisinJulkaisu?.tila === HyvaksymisPaatosVaiheTila.ODOTTAA_HYVAKSYNTAA && (
               <Notification type={NotificationType.WARN}>
                 Kuulutus nähtäville asettamisesta odottaa hyväksyntää. Tarkasta kuulutus ja a) hyväksy tai b) palauta kuulutus
                 korjattavaksi, jos havaitset puutteita tai virheen.

From fb3ee1d1d357178eab3215c3d5967304567ac71d Mon Sep 17 00:00:00 2001
From: tomi korkalainen <tomi.korkalainen@cgi.com>
Date: Thu, 10 Nov 2022 13:34:24 +0200
Subject: [PATCH 12/14] kansalaispuolen tabit uusiks

---
 i18n.js                                       |  4 +
 .../kansalaisenEtusivu/Hakutulokset.tsx       |  5 +-
 .../HyvaksymispaatosTiedot.tsx                |  8 +-
 .../kansalaisnakyma/PaatosPageLayout.tsx      | 77 +++++++++++++++++++
 .../ProjektiJulkinenPageLayout.tsx            |  7 +-
 .../ProjektiJulkinenStepper.tsx               | 35 ++++++---
 src/locales/fi/paatos.json                    |  6 ++
 src/locales/fi/projekti.json                  |  1 +
 src/locales/sv/paatos.json                    |  6 ++
 src/locales/sv/projekti.json                  |  1 +
 .../suunnitelma/[oid]/hyvaksymispaatos.tsx    | 71 ++---------------
 src/pages/suunnitelma/[oid]/jatkopaatos1.tsx  | 21 +++++
 12 files changed, 156 insertions(+), 86 deletions(-)
 create mode 100644 src/components/projekti/kansalaisnakyma/PaatosPageLayout.tsx
 create mode 100644 src/locales/fi/paatos.json
 create mode 100644 src/locales/sv/paatos.json
 create mode 100644 src/pages/suunnitelma/[oid]/jatkopaatos1.tsx

diff --git a/i18n.js b/i18n.js
index 86061c0e6..d08c61d19 100644
--- a/i18n.js
+++ b/i18n.js
@@ -8,9 +8,13 @@ module.exports = {
     "/yllapito/perusta": ["velho-haku"],
     "/suunnitelma/[oid]/nahtavillaolo": ["aineisto"],
     "/suunnitelma/[oid]/lausuntopyyntoaineistot": ["aineisto"],
+    "/suunnitelma/[oid]/hyvaksymispaatos": ["aineisto", "paatos"],
+    "/suunnitelma/[oid]/jatkopaatos1": ["aineisto", "paatos"],
+    "/suunnitelma/[oid]/jatkopaatos2": ["aineisto", "paatos"],
     "/yllapito/projekti/[oid]/nahtavillaolo/aineisto": ["aineisto"],
     "/yllapito/projekti/[oid]/hyvaksymispaatos/aineisto": ["aineisto"],
     "/yllapito/projekti/[oid]/jatkaminen1/aineisto": ["aineisto"],
+    "/yllapito/projekti/[oid]/jatkaminen2/aineisto": ["aineisto"],
     "/suunnitelma/[oid]/hyvaksymismenettelyssa": ["hyvaksymismenettelyssa"],
     "/suunnitelma/[oid]/suunnittelu": ["suunnittelu"],
   },
diff --git a/src/components/kansalaisenEtusivu/Hakutulokset.tsx b/src/components/kansalaisenEtusivu/Hakutulokset.tsx
index b95ff10e8..54ccc73a8 100644
--- a/src/components/kansalaisenEtusivu/Hakutulokset.tsx
+++ b/src/components/kansalaisenEtusivu/Hakutulokset.tsx
@@ -21,9 +21,6 @@ type Props = {
 };
 
 export function getSivuTilanPerusteella(tila: Status | null | undefined) {
-  if (!tila) {
-    return "";
-  }
   switch (tila) {
     case Status.ALOITUSKUULUTUS:
       return "aloituskuulutus";
@@ -35,6 +32,8 @@ export function getSivuTilanPerusteella(tila: Status | null | undefined) {
       return "hyvaksymismenettelyssa";
     case Status.HYVAKSYTTY:
       return "hyvaksymispaatos";
+    case Status.JATKOPAATOS_1:
+      return "jatkopaatos1";
     default:
       return "";
   }
diff --git a/src/components/projekti/kansalaisnakyma/HyvaksymispaatosTiedot.tsx b/src/components/projekti/kansalaisnakyma/HyvaksymispaatosTiedot.tsx
index 4789d6286..35ec698d5 100644
--- a/src/components/projekti/kansalaisnakyma/HyvaksymispaatosTiedot.tsx
+++ b/src/components/projekti/kansalaisnakyma/HyvaksymispaatosTiedot.tsx
@@ -14,9 +14,8 @@ import { HyvaksymisPaatosVaiheJulkaisuJulkinen } from "@services/api";
 
 interface Props {
   kuulutus: HyvaksymisPaatosVaiheJulkaisuJulkinen | null | undefined;
-  jatkopaatos?: boolean;
 }
-export default function HyvaksymispaatosTiedot({ kuulutus, jatkopaatos }: Props): ReactElement {
+export default function HyvaksymispaatosTiedot({ kuulutus }: Props): ReactElement {
   const { t } = useTranslation();
   const { data: projekti } = useProjektiJulkinen();
   const velho = kuulutus?.velho;
@@ -54,11 +53,6 @@ export default function HyvaksymispaatosTiedot({ kuulutus, jatkopaatos }: Props)
 
   return (
     <>
-      <Section noDivider>
-        <h2 className="vayla-title">
-          {jatkopaatos ? t("Kuulutus hyväksymispäätöksen jatkamisesta") : t("projekti:ui-otsikot.kuulutus_suunnitelman_hyvaksymisesta")}
-        </h2>
-      </Section>
       <Section noDivider>
         <KeyValueTable rows={keyValueData}></KeyValueTable>
       </Section>
diff --git a/src/components/projekti/kansalaisnakyma/PaatosPageLayout.tsx b/src/components/projekti/kansalaisnakyma/PaatosPageLayout.tsx
new file mode 100644
index 000000000..8ea1be834
--- /dev/null
+++ b/src/components/projekti/kansalaisnakyma/PaatosPageLayout.tsx
@@ -0,0 +1,77 @@
+import React, { FC, useMemo, VFC } from "react";
+import { useProjektiJulkinen } from "src/hooks/useProjektiJulkinen";
+import ProjektiJulkinenPageLayout from "@components/projekti/kansalaisnakyma/ProjektiJulkinenPageLayout";
+import { Tabs } from "@mui/material";
+import { LinkTab, LinkTabProps } from "@components/layout/LinkTab";
+import { useRouter } from "next/router";
+import { UrlObject } from "url";
+import { ProjektiJulkinen } from "@services/api";
+import useTranslation from "next-translate/useTranslation";
+
+const PaatosPageLayout: FC<{ pageTitle: string }> = ({ children, pageTitle }) => {
+  const { data: projekti } = useProjektiJulkinen();
+
+  if (!projekti) {
+    return <></>;
+  }
+
+  return (
+    <ProjektiJulkinenPageLayout selectedStep={4} title={pageTitle}>
+      <PaatosPageTabs projekti={projekti} />
+      {children}
+    </ProjektiJulkinenPageLayout>
+  );
+};
+
+const PaatosPageTabs: VFC<{ projekti: ProjektiJulkinen }> = ({ projekti }) => {
+  const router = useRouter();
+  const { t } = useTranslation("paatos");
+
+  const tabProps: LinkTabProps[] = useMemo(() => {
+    const result: LinkTabProps[] = [
+      {
+        linkProps: {
+          href: {
+            pathname: `/suunnitelma/[oid]/hyvaksymispaatos`,
+            query: { oid: projekti?.oid },
+          },
+        },
+        label: t("tabi-tekstit.hyvaksymispaatos"),
+        id: "hyvaksymispaatos_tab",
+      },
+      {
+        linkProps: {
+          href: {
+            pathname: `/suunnitelma/[oid]/jatkopaatos1`,
+            query: { oid: projekti?.oid },
+          },
+        },
+        label: t("tabi-tekstit.jatkopaatos", { nro: 1 }),
+        id: "jatkopaatos1_tab",
+      },
+    ];
+
+    return result;
+  }, [projekti?.oid, t]);
+
+  const value = useMemo(() => {
+    const indexOfTab = tabProps.findIndex((tProps) => {
+      const url = tProps.linkProps.href as UrlObject;
+      return url.pathname === router.pathname;
+    });
+    return indexOfTab === -1 ? false : indexOfTab;
+  }, [router.pathname, tabProps]);
+  if (!projekti.jatkoPaatos1Vaihe) {
+    return <></>;
+  }
+
+  return (
+    <Tabs value={value}>
+      {tabProps.map((tProps, index) => (
+        <LinkTab key={index} {...tProps} />
+      ))}
+    </Tabs>
+  );
+};
+
+export default PaatosPageLayout;
diff --git a/src/components/projekti/kansalaisnakyma/ProjektiJulkinenPageLayout.tsx b/src/components/projekti/kansalaisnakyma/ProjektiJulkinenPageLayout.tsx
index 0ba93a225..ed872887e 100644
--- a/src/components/projekti/kansalaisnakyma/ProjektiJulkinenPageLayout.tsx
+++ b/src/components/projekti/kansalaisnakyma/ProjektiJulkinenPageLayout.tsx
@@ -31,8 +31,8 @@ export default function ProjektiPageLayout({ children, title, selectedStep }: Pr
     NAHTAVILLAOLO: 2,
     HYVAKSYMISMENETTELYSSA: 3,
     HYVAKSYTTY: 4,
-    JATKOPAATOS_1: 5,
-    JATKOPAATOS_2: 6,
+    JATKOPAATOS_1: 4,
+    JATKOPAATOS_2: 4,
     EPAAKTIIVINEN_1: -1,
     EPAAKTIIVINEN_2: -1,
     EPAAKTIIVINEN_3: -1,
@@ -50,12 +50,13 @@ export default function ProjektiPageLayout({ children, title, selectedStep }: Pr
             <ProjektiJulkinenStepper
               oid={projekti.oid}
               activeStep={statusStep[projekti.status || Status.EI_JULKAISTU]}
+              projektiStatus={projekti.status}
               selectedStep={selectedStep}
               vertical={smallScreen ? true : undefined}
             />
           </Section>
           <Section noDivider>
-            {title && (<h2 className="vayla-title">{title}</h2>)}
+            {title && <h2 className="vayla-title">{title}</h2>}
             {children}
           </Section>
         </div>
diff --git a/src/components/projekti/kansalaisnakyma/ProjektiJulkinenStepper.tsx b/src/components/projekti/kansalaisnakyma/ProjektiJulkinenStepper.tsx
index 0e6110768..8e4e5009e 100644
--- a/src/components/projekti/kansalaisnakyma/ProjektiJulkinenStepper.tsx
+++ b/src/components/projekti/kansalaisnakyma/ProjektiJulkinenStepper.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement } from "react";
+import React, { ReactElement, useMemo } from "react";
 import { styled } from "@mui/material/styles";
 import Stepper from "@mui/material/Stepper";
 import Step, { stepClasses, StepProps } from "@mui/material/Step";
@@ -9,12 +9,15 @@ import StepConnector, { stepConnectorClasses } from "@mui/material/StepConnector
 import { StepIconProps } from "@mui/material/StepIcon";
 import { Accordion, AccordionDetails, AccordionSummary, Typography } from "@mui/material";
 import HassuLink from "@components/HassuLink";
+import { Status } from "@services/api";
+import { UrlObject } from "url";
 
 interface Props {
   oid: string;
   activeStep: number;
   selectedStep: number;
   vertical?: true;
+  projektiStatus: Status | null | undefined;
 }
 
 const HassuStep = styled(Step)<StepProps>({
@@ -102,7 +105,13 @@ function HassuStepIcon(props: StepIconProps) {
   return <HassuStepIconRoot ownerState={{ completed, active, selected }} className={className}></HassuStepIconRoot>;
 }
 
-export default function ProjektiJulkinenStepper({ oid, activeStep, selectedStep, vertical }: Props): ReactElement {
+const statusToPaatosLinkMap: Partial<Record<Status, string>> = {
+  HYVAKSYTTY: `/suunnitelma/[oid]/hyvaksymispaatos`,
+  JATKOPAATOS_1: `/suunnitelma/[oid]/jatkopaatos1`,
+  JATKOPAATOS_2: `/suunnitelma/[oid]/jatkopaatos2`,
+};
+
+export default function ProjektiJulkinenStepper({ oid, activeStep, selectedStep, vertical, projektiStatus }: Props): ReactElement {
   const { t } = useTranslation("projekti");
 
   const steps = [
@@ -113,19 +122,25 @@ export default function ProjektiJulkinenStepper({ oid, activeStep, selectedStep,
     t(`projekti-vaiheet.paatos`),
   ];
 
-  const links = [
-    `/suunnitelma/${oid}/aloituskuulutus`,
-    `/suunnitelma/${oid}/suunnittelu`,
-    `/suunnitelma/${oid}/nahtavillaolo`,
-    `/suunnitelma/${oid}/hyvaksymismenettelyssa`,
-    `/suunnitelma/${oid}/hyvaksymispaatos`,
-  ];
+  const paatosLink = (projektiStatus && statusToPaatosLinkMap[projektiStatus]) || statusToPaatosLinkMap[Status.HYVAKSYTTY];
+
+  const urls: UrlObject[] = useMemo(
+    () =>
+      [
+        `/suunnitelma/[oid]/aloituskuulutus`,
+        `/suunnitelma/[oid]/suunnittelu`,
+        `/suunnitelma/[oid]/nahtavillaolo`,
+        `/suunnitelma/[oid]/hyvaksymismenettelyssa`,
+        paatosLink,
+      ].map<UrlObject>((pathname) => ({ pathname, query: { oid } })),
+    [oid, paatosLink]
+  );
 
   const createStep = (label: string, index: number) => {
     return (
       <HassuStep key={label}>
         {index <= activeStep && (
-          <HassuLink id={"sidenavi_" + index} key={index} href={links[index]}>
+          <HassuLink id={"sidenavi_" + index} key={index} href={urls[index]}>
             <HassuLabel
               componentsProps={{ label: { style: { fontWeight: selectedStep === index ? 700 : 400 } } }}
               StepIconComponent={HassuStepIcon}
diff --git a/src/locales/fi/paatos.json b/src/locales/fi/paatos.json
new file mode 100644
index 000000000..d28dd5183
--- /dev/null
+++ b/src/locales/fi/paatos.json
@@ -0,0 +1,6 @@
+{
+  "tabi-tekstit": {
+    "hyvaksymispaatos": "Hyväksymispäätös",
+    "jatkopaatos": "{{nro}}. Jatkopäätös"
+  }
+}
diff --git a/src/locales/fi/projekti.json b/src/locales/fi/projekti.json
index 9d697f606..66ceed6b4 100644
--- a/src/locales/fi/projekti.json
+++ b/src/locales/fi/projekti.json
@@ -106,6 +106,7 @@
     "valtion_liikennevaylien_suunnittelu": "Valtion liikenneväylien suunnittelu",
     "kuulutus_suunnitelman_alkamisesta": "Kuulutus suunnittelun aloittamisesta",
     "kuulutus_suunnitelman_hyvaksymisesta": "Kuulutus suunnitelman hyväksymisestä",
+    "kuulutus_hyvaksymispaatoksen_jatkamisesta": "Kuulutus hyväksymispäätöksen jatkamisesta",
     "kuulutus_suunnitelman_nahtaville_asettamisesta": "Kuulutus suunnitelman nähtäville asettamisesta",
     "kuulutus_suunnitelman_hyvaksymispaatoksestä": "Kuulutus suunnitelman hyväksymispäätöksestä",
     "kuulutus_jatkopaatoksesta": "Kuulutus jatkopäätöksestä",
diff --git a/src/locales/sv/paatos.json b/src/locales/sv/paatos.json
new file mode 100644
index 000000000..02b1f21ab
--- /dev/null
+++ b/src/locales/sv/paatos.json
@@ -0,0 +1,6 @@
+{
+  "tabi-tekstit": {
+    "hyvaksymispaatos": "RUOTSIKSI Hyväksymispäätös",
+    "jatkopaatos": "RUOTSIKSI {{nro}}. Jatkopäätös"
+  }
+}
diff --git a/src/locales/sv/projekti.json b/src/locales/sv/projekti.json
index ec7153ca6..527a6565d 100644
--- a/src/locales/sv/projekti.json
+++ b/src/locales/sv/projekti.json
@@ -106,6 +106,7 @@
     "valtion_liikennevaylien_suunnittelu": "RUOTSIKSI Valtion liikenneväylien suunnittelu",
     "kuulutus_suunnitelman_alkamisesta": "RUOTSIKSI Kuulutus suunnittelun aloittamisesta",
     "kuulutus_suunnitelman_hyvaksymisesta": "RUOTSIKSI Kuulutus suunnitelman hyväksymisestä",
+    "kuulutus_hyvaksymispaatoksen_jatkamisesta": "RUOTSIKSI Kuulutus hyväksymispäätöksen jatkamisesta",
     "kuulutus_suunnitelman_nahtaville_asettamisesta": "RUOTSIKSI Kuulutus suunnitelman nähtäville asettamisesta",
     "kuulutus_suunnitelman_hyvaksymispaatoksestä": "RUOTSIKSI Kuulutus suunnitelman hyväksymispäätöksestä",
     "kuulutus_jatkopaatoksesta": "RUOTSIKSI Kuulutus jatkopäätöksestä",
diff --git a/src/pages/suunnitelma/[oid]/hyvaksymispaatos.tsx b/src/pages/suunnitelma/[oid]/hyvaksymispaatos.tsx
index 383ab93d0..9cf343377 100644
--- a/src/pages/suunnitelma/[oid]/hyvaksymispaatos.tsx
+++ b/src/pages/suunnitelma/[oid]/hyvaksymispaatos.tsx
@@ -1,76 +1,21 @@
-import React, { ReactElement, useCallback, useState } from "react";
-import ProjektiJulkinenPageLayout from "@components/projekti/kansalaisnakyma/ProjektiJulkinenPageLayout";
+import React, { ReactElement } from "react";
 import { useProjektiJulkinen } from "src/hooks/useProjektiJulkinen";
-import Tabs, { TabProps } from "@components/layout/tabs/Tabs";
 import HyvaksymispaatosTiedot from "@components/projekti/kansalaisnakyma/HyvaksymispaatosTiedot";
-import TallentamattomiaMuutoksiaDialog from "@components/TallentamattomiaMuutoksiaDialog";
+import PaatosPageLayout from "@components/projekti/kansalaisnakyma/PaatosPageLayout";
 import useTranslation from "next-translate/useTranslation";
-import { kuntametadata } from "../../../../common/kuntametadata";
 
 export default function Hyvaksymispaatos(): ReactElement {
-  const { lang } = useTranslation();
-  const [currentTab, setCurrentTab] = useState<number | string>(0);
-  const [open, setOpen] = useState(false);
-  const [isDirty, setIsDirty] = useState(false);
-  const [selectedValue, setSelectedValue] = useState<number | string>(0);
-
+  const { t } = useTranslation("projekti");
   const { data: projekti } = useProjektiJulkinen();
   const kuulutus = projekti?.hyvaksymisPaatosVaihe;
-  const velho = kuulutus?.velho;
-  const handleClickClose = () => {
-    setOpen(false);
-  };
-
-  const handleClickOk = useCallback(() => {
-    setIsDirty(false);
-    setCurrentTab(selectedValue);
-    setOpen(false);
-  }, [selectedValue, setIsDirty]);
 
-  const handleChange: TabProps["onChange"] = (_event, value) => {
-    if (isDirty) {
-      setOpen(true);
-      setSelectedValue(value);
-    } else {
-      setOpen(false);
-      setCurrentTab(value);
-    }
-  };
-  if (!projekti || !kuulutus || !velho) {
-    return <div />;
-  }
-
-  let sijainti = "";
-  if (velho.maakunnat) {
-    sijainti = sijainti + kuntametadata.namesForMaakuntaIds(velho.maakunnat, lang).join(", ") + "; ";
-  }
-  if (velho.kunnat) {
-    sijainti = sijainti + kuntametadata.namesForKuntaIds(velho.kunnat, lang).join(", ");
+  if (!projekti || !kuulutus) {
+    return <></>;
   }
 
   return (
-    <ProjektiJulkinenPageLayout selectedStep={4} title="">
-      {projekti.jatkoPaatos1Vaihe && (
-        <Tabs
-          tabStyle="Underlined"
-          value={currentTab}
-          onChange={handleChange}
-          tabs={[
-            {
-              label: "Hyväksymispäätös",
-              content: <HyvaksymispaatosTiedot kuulutus={projekti.hyvaksymisPaatosVaihe} />,
-              tabId: "hyvaksymispaatostiedot_tab",
-            },
-            {
-              label: "Jatkopäätös",
-              content: <HyvaksymispaatosTiedot kuulutus={projekti.jatkoPaatos1Vaihe} jatkopaatos={true} />,
-              tabId: "jatkopaatos_tab",
-            },
-          ]}
-        ></Tabs>
-      )}
-      {!projekti.jatkoPaatos1Vaihe && <HyvaksymispaatosTiedot kuulutus={projekti.hyvaksymisPaatosVaihe} />}
-      <TallentamattomiaMuutoksiaDialog open={open} handleClickClose={handleClickClose} handleClickOk={handleClickOk} />
-    </ProjektiJulkinenPageLayout>
+    <PaatosPageLayout pageTitle={t("ui-otsikot.kuulutus_suunnitelman_hyvaksymisesta")}>
+      <HyvaksymispaatosTiedot kuulutus={projekti.hyvaksymisPaatosVaihe} />
+    </PaatosPageLayout>
   );
 }
diff --git a/src/pages/suunnitelma/[oid]/jatkopaatos1.tsx b/src/pages/suunnitelma/[oid]/jatkopaatos1.tsx
new file mode 100644
index 000000000..cf323da63
--- /dev/null
+++ b/src/pages/suunnitelma/[oid]/jatkopaatos1.tsx
@@ -0,0 +1,21 @@
+import React, { ReactElement } from "react";
+import { useProjektiJulkinen } from "src/hooks/useProjektiJulkinen";
+import HyvaksymispaatosTiedot from "@components/projekti/kansalaisnakyma/HyvaksymispaatosTiedot";
+import PaatosPageLayout from "@components/projekti/kansalaisnakyma/PaatosPageLayout";
+import useTranslation from "next-translate/useTranslation";
+
+export default function Hyvaksymispaatos(): ReactElement {
+  const { t } = useTranslation("projekti");
+  const { data: projekti } = useProjektiJulkinen();
+  const kuulutus = projekti?.hyvaksymisPaatosVaihe;
+
+  if (!projekti || !kuulutus) {
+    return <div />;
+  }
+
+  return (
+    <PaatosPageLayout pageTitle={t("ui-otsikot.kuulutus_hyvaksymispaatoksen_jatkamisesta")}>
+      <HyvaksymispaatosTiedot kuulutus={projekti.jatkoPaatos1Vaihe} />,
+    </PaatosPageLayout>
+  );
+}

From fc0239dfa98c197ea1463ea80c3e866ad67a3574 Mon Sep 17 00:00:00 2001
From: tomi korkalainen <tomi.korkalainen@cgi.com>
Date: Thu, 10 Nov 2022 13:48:55 +0200
Subject: [PATCH 13/14] =?UTF-8?q?korjaa=20siirr=C3=A4=20menneisyyteen=20pa?=
 =?UTF-8?q?inikkeiden=20siirt=C3=A4m=C3=A4=C3=A4n=20julkaisua=20PaatosTyyp?=
 =?UTF-8?q?piin=20perustuen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../paatos/kuulutuksenTiedot/Lukunakyma.tsx      | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/projekti/paatos/kuulutuksenTiedot/Lukunakyma.tsx b/src/components/projekti/paatos/kuulutuksenTiedot/Lukunakyma.tsx
index 17372e746..f1978d443 100644
--- a/src/components/projekti/paatos/kuulutuksenTiedot/Lukunakyma.tsx
+++ b/src/components/projekti/paatos/kuulutuksenTiedot/Lukunakyma.tsx
@@ -67,7 +67,13 @@ export default function HyvaksymisKuulutusLukunakyma({ julkaisu, projekti, paato
                 icon="history"
                 onClick={(e) => {
                   e.preventDefault();
-                  window.location.assign(ProjektiTestCommand.oid(projekti.oid).hyvaksymispaatosMenneisyyteen());
+                  if (paatosTyyppi === PaatosTyyppi.HYVAKSYMISPAATOS) {
+                    window.location.assign(ProjektiTestCommand.oid(projekti.oid).hyvaksymispaatosMenneisyyteen());
+                  } else if (paatosTyyppi === PaatosTyyppi.JATKOPAATOS1) {
+                    window.location.assign(ProjektiTestCommand.oid(projekti.oid).jatkopaatos1Menneisyyteen());
+                  } else if (paatosTyyppi === PaatosTyyppi.JATKOPAATOS2) {
+                    // TODO Lisää JATKOPAATOS2 toiminnot
+                  }
                 }}
               >
                 Siirrä päivän verran menneisyyteen (TESTAAJILLE)
@@ -76,7 +82,13 @@ export default function HyvaksymisKuulutusLukunakyma({ julkaisu, projekti, paato
                 icon="history"
                 onClick={(e) => {
                   e.preventDefault();
-                  window.location.assign(ProjektiTestCommand.oid(projekti.oid).hyvaksymispaatosVuosiMenneisyyteen());
+                  if (paatosTyyppi === PaatosTyyppi.HYVAKSYMISPAATOS) {
+                    window.location.assign(ProjektiTestCommand.oid(projekti.oid).hyvaksymispaatosVuosiMenneisyyteen());
+                  } else if (paatosTyyppi === PaatosTyyppi.JATKOPAATOS1) {
+                    window.location.assign(ProjektiTestCommand.oid(projekti.oid).jatkopaatos1VuosiMenneisyyteen());
+                  } else if (paatosTyyppi === PaatosTyyppi.JATKOPAATOS2) {
+                    // TODO Lisää JATKOPAATOS2 toiminnot
+                  }
                 }}
               >
                 Siirrä vuoden verran menneisyyteen (TESTAAJILLE)

From 5f9c25cc084ebd6d227d6bae590857b4e3b4c0e0 Mon Sep 17 00:00:00 2001
From: tomi korkalainen <tomi.korkalainen@cgi.com>
Date: Thu, 10 Nov 2022 15:36:45 +0200
Subject: [PATCH 14/14] =?UTF-8?q?uudelleennime=C3=A4=20testej=C3=A4=20ja?=
 =?UTF-8?q?=20korjaile=20niit=C3=A4;=20autotestit=20saattasi=20jopa=20menn?=
 =?UTF-8?q?=C3=A4=20l=C3=A4pi?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...elhohaku.spec.js => 001-velhohaku.spec.js} |  0
 ...{2-perusta.spec.js => 002-perusta.spec.js} |  0
 ...tiedot.spec.js => 003-perustiedot.spec.js} |  0
 ...us.spec.js => 004-aloituskuulutus.spec.js} |  0
 ...s => 005-aloituskuulutus-julkinen.spec.js} |  0
 ... 006-suunnitteluvaihe-perustiedot.spec.js} |  0
 ...07-suunnitteluvaihe-vuorovaikutus.spec.js} |  0
 ...08-nahtavillaolovaihe-perustiedot.spec.js} |  0
 ...he.spec.js => 009-hyvaksyntavaihe.spec.js} |  0
 ....spec.js => 010-imoitustaulusyote.spec.js} |  0
 ...avaihe.spec.js => 011-jatkopaatos.spec.js} | 23 +++---
 .../paatos/aineistot/Muokkausnakyma.tsx       |  4 +-
 .../kuulutuksenTiedot/Voimassaolovuosi.tsx    | 71 +++++++++++++++++++
 .../paatos/kuulutuksenTiedot/index.tsx        |  4 +-
 src/schemas/jatkopaatos1Kuulutus.tsx          | 18 -----
 src/util/getPaatosSpecificData.ts             |  3 +
 16 files changed, 90 insertions(+), 33 deletions(-)
 rename cypress/integration/2-perusta-projekti/{1-velhohaku.spec.js => 001-velhohaku.spec.js} (100%)
 rename cypress/integration/2-perusta-projekti/{2-perusta.spec.js => 002-perusta.spec.js} (100%)
 rename cypress/integration/2-perusta-projekti/{3-perustiedot.spec.js => 003-perustiedot.spec.js} (100%)
 rename cypress/integration/2-perusta-projekti/{4-aloituskuulutus.spec.js => 004-aloituskuulutus.spec.js} (100%)
 rename cypress/integration/2-perusta-projekti/{5-aloituskuulutus-julkinen.spec.js => 005-aloituskuulutus-julkinen.spec.js} (100%)
 rename cypress/integration/2-perusta-projekti/{5-suunnitteluvaihe-perustiedot.spec.js => 006-suunnitteluvaihe-perustiedot.spec.js} (100%)
 rename cypress/integration/2-perusta-projekti/{6-suunnitteluvaihe-vuorovaikutus.spec.js => 007-suunnitteluvaihe-vuorovaikutus.spec.js} (100%)
 rename cypress/integration/2-perusta-projekti/{8-nahtavillaolovaihe-perustiedot.spec.js => 008-nahtavillaolovaihe-perustiedot.spec.js} (100%)
 rename cypress/integration/2-perusta-projekti/{9-hyvaksyntavaihe.spec.js => 009-hyvaksyntavaihe.spec.js} (100%)
 rename cypress/integration/2-perusta-projekti/{99-imoitustaulusyote.spec.js => 010-imoitustaulusyote.spec.js} (100%)
 rename cypress/integration/2-perusta-projekti/{10-hyvaksyntavaihe.spec.js => 011-jatkopaatos.spec.js} (88%)
 create mode 100644 src/components/projekti/paatos/kuulutuksenTiedot/Voimassaolovuosi.tsx
 delete mode 100644 src/schemas/jatkopaatos1Kuulutus.tsx

diff --git a/cypress/integration/2-perusta-projekti/1-velhohaku.spec.js b/cypress/integration/2-perusta-projekti/001-velhohaku.spec.js
similarity index 100%
rename from cypress/integration/2-perusta-projekti/1-velhohaku.spec.js
rename to cypress/integration/2-perusta-projekti/001-velhohaku.spec.js
diff --git a/cypress/integration/2-perusta-projekti/2-perusta.spec.js b/cypress/integration/2-perusta-projekti/002-perusta.spec.js
similarity index 100%
rename from cypress/integration/2-perusta-projekti/2-perusta.spec.js
rename to cypress/integration/2-perusta-projekti/002-perusta.spec.js
diff --git a/cypress/integration/2-perusta-projekti/3-perustiedot.spec.js b/cypress/integration/2-perusta-projekti/003-perustiedot.spec.js
similarity index 100%
rename from cypress/integration/2-perusta-projekti/3-perustiedot.spec.js
rename to cypress/integration/2-perusta-projekti/003-perustiedot.spec.js
diff --git a/cypress/integration/2-perusta-projekti/4-aloituskuulutus.spec.js b/cypress/integration/2-perusta-projekti/004-aloituskuulutus.spec.js
similarity index 100%
rename from cypress/integration/2-perusta-projekti/4-aloituskuulutus.spec.js
rename to cypress/integration/2-perusta-projekti/004-aloituskuulutus.spec.js
diff --git a/cypress/integration/2-perusta-projekti/5-aloituskuulutus-julkinen.spec.js b/cypress/integration/2-perusta-projekti/005-aloituskuulutus-julkinen.spec.js
similarity index 100%
rename from cypress/integration/2-perusta-projekti/5-aloituskuulutus-julkinen.spec.js
rename to cypress/integration/2-perusta-projekti/005-aloituskuulutus-julkinen.spec.js
diff --git a/cypress/integration/2-perusta-projekti/5-suunnitteluvaihe-perustiedot.spec.js b/cypress/integration/2-perusta-projekti/006-suunnitteluvaihe-perustiedot.spec.js
similarity index 100%
rename from cypress/integration/2-perusta-projekti/5-suunnitteluvaihe-perustiedot.spec.js
rename to cypress/integration/2-perusta-projekti/006-suunnitteluvaihe-perustiedot.spec.js
diff --git a/cypress/integration/2-perusta-projekti/6-suunnitteluvaihe-vuorovaikutus.spec.js b/cypress/integration/2-perusta-projekti/007-suunnitteluvaihe-vuorovaikutus.spec.js
similarity index 100%
rename from cypress/integration/2-perusta-projekti/6-suunnitteluvaihe-vuorovaikutus.spec.js
rename to cypress/integration/2-perusta-projekti/007-suunnitteluvaihe-vuorovaikutus.spec.js
diff --git a/cypress/integration/2-perusta-projekti/8-nahtavillaolovaihe-perustiedot.spec.js b/cypress/integration/2-perusta-projekti/008-nahtavillaolovaihe-perustiedot.spec.js
similarity index 100%
rename from cypress/integration/2-perusta-projekti/8-nahtavillaolovaihe-perustiedot.spec.js
rename to cypress/integration/2-perusta-projekti/008-nahtavillaolovaihe-perustiedot.spec.js
diff --git a/cypress/integration/2-perusta-projekti/9-hyvaksyntavaihe.spec.js b/cypress/integration/2-perusta-projekti/009-hyvaksyntavaihe.spec.js
similarity index 100%
rename from cypress/integration/2-perusta-projekti/9-hyvaksyntavaihe.spec.js
rename to cypress/integration/2-perusta-projekti/009-hyvaksyntavaihe.spec.js
diff --git a/cypress/integration/2-perusta-projekti/99-imoitustaulusyote.spec.js b/cypress/integration/2-perusta-projekti/010-imoitustaulusyote.spec.js
similarity index 100%
rename from cypress/integration/2-perusta-projekti/99-imoitustaulusyote.spec.js
rename to cypress/integration/2-perusta-projekti/010-imoitustaulusyote.spec.js
diff --git a/cypress/integration/2-perusta-projekti/10-hyvaksyntavaihe.spec.js b/cypress/integration/2-perusta-projekti/011-jatkopaatos.spec.js
similarity index 88%
rename from cypress/integration/2-perusta-projekti/10-hyvaksyntavaihe.spec.js
rename to cypress/integration/2-perusta-projekti/011-jatkopaatos.spec.js
index 4bfa1ddde..84afa90f8 100644
--- a/cypress/integration/2-perusta-projekti/10-hyvaksyntavaihe.spec.js
+++ b/cypress/integration/2-perusta-projekti/011-jatkopaatos.spec.js
@@ -75,11 +75,11 @@ describe("10 - Projektin jatkopaatos1vaiheen kuulutustiedot", () => {
 
     // Test that navigation now has "1. jatkaminen" link
 
-    cy.visit(Cypress.env("host") + "/yllapito/projekti/" + oid + "/jatkaminen1", { timeout: 30000 }).reload();
-    cy.contains("Päätös ja päätöksen liitteenä oleva aineistot");
+    cy.visit(Cypress.env("host") + "/yllapito/projekti/" + oid + "/jatkaminen1/aineisto", { timeout: 30000 }).reload();
+    cy.contains("Päätös ja päätöksen liitteenä oleva aineisto");
   });
 
-  it("Lisaa paatokset ja aineistot", { scrollBehavior: "center" }, () => {
+  it("Lisää päätökset ja aineistot", { scrollBehavior: "center" }, () => {
     cy.login("A1");
 
     cy.visit(Cypress.env("host") + "/yllapito/projekti/" + oid + "/jatkaminen1", { timeout: 30000 });
@@ -95,7 +95,7 @@ describe("10 - Projektin jatkopaatos1vaiheen kuulutustiedot", () => {
     selectAllAineistotFromCategory("#aineisto_accordion_Toimeksianto1");
     cy.get("#select_valitut_aineistot_button").click();
 
-    cy.get("#save_jatkopaatos1vaihe_draft").click();
+    cy.get("#save_hyvaksymispaatosvaihe_draft").click();
     cy.contains("Tallennus onnistui").wait(2000); // extra wait added because somehow the next test brings blank  page otherwise
 
     cy.reload();
@@ -120,21 +120,21 @@ describe("10 - Projektin jatkopaatos1vaiheen kuulutustiedot", () => {
     cy.get("#kuulutuksentiedot_tab").click();
 
     const today = formatDate(dayjs());
-    cy.get('[name="jatkoPaatos1Vaihe.kuulutusPaiva"]').should("be.enabled").type(today, {
+    cy.get('[name="paatos.kuulutusPaiva"]').should("be.enabled").type(today, {
       waitForAnimations: true,
     });
 
     const plus4years = dayjs().add(4, "year").year().toString();
     cy.get("#voimassaolovuosi").select(plus4years);
 
-    cy.get('[name="jatkoPaatos1Vaihe.hallintoOikeus"]').select("HELSINKI");
-    cy.get('[name="jatkoPaatos1Vaihe.ilmoituksenVastaanottajat.kunnat.0.sahkoposti"]').clear().type("test@vayla.fi");
-    cy.get('[name="jatkoPaatos1Vaihe.ilmoituksenVastaanottajat.kunnat.1.sahkoposti"]').clear().type("test@vayla.fi");
+    cy.get('[name="paatos.hallintoOikeus"]').select("HELSINKI");
+    cy.get('[name="paatos.ilmoituksenVastaanottajat.kunnat.0.sahkoposti"]').clear().type("test@vayla.fi");
+    cy.get('[name="paatos.ilmoituksenVastaanottajat.kunnat.1.sahkoposti"]').clear().type("test@vayla.fi");
 
     cy.get("#save_and_send_for_acceptance").click();
     cy.contains("Lähetys onnistui", { timeout: 30000 });
 
-    cy.get("#kuulutuksentiedot_luku_tab").click();
+    cy.get("#kuulutuksentiedot_tab").click();
     cy.get("#button_open_acceptance_dialog")
       .should("be.enabled")
       .scrollIntoView({ offset: { top: 500, left: 0 } })
@@ -144,12 +144,11 @@ describe("10 - Projektin jatkopaatos1vaiheen kuulutustiedot", () => {
     cy.contains("Hyväksyminen onnistui", { timeout: 15000 });
 
     cy.reload();
-    cy.get("#kuulutuksentiedot_luku_tab").click();
+    cy.get("#kuulutuksentiedot_tab").click();
 
     cy.contains("Kuulutus nähtäville asettamisesta on julkaistu"); //TODO: vaihda jatkovaiheen tekstit
 
-    cy.visit(Cypress.env("host") + "/suunnitelma/" + oid + "/hyvaksymispaatos");
-    cy.get("#jatkopaatos_tab").click();
+    cy.visit(Cypress.env("host") + "/suunnitelma/" + oid + "/jatkopaatos1");
     cy.contains("Kuulutus hyväksymispäätöksen jatkamisesta");
 
     // cy.visit(Cypress.env("host") + "/sv/suunnitelma/" + oid + "/hyvaksymispaatos");
diff --git a/src/components/projekti/paatos/aineistot/Muokkausnakyma.tsx b/src/components/projekti/paatos/aineistot/Muokkausnakyma.tsx
index 349bd5c45..395512e23 100644
--- a/src/components/projekti/paatos/aineistot/Muokkausnakyma.tsx
+++ b/src/components/projekti/paatos/aineistot/Muokkausnakyma.tsx
@@ -72,8 +72,8 @@ const jatkopaatosPaatosSuunnitelmatProps: SuunnitelmatJaAineistotProps = {
   sectionInfoText:
     "Liitä kuulutukselle Liikenne- ja viestintäviraston päätös sekä jatkopäätös. Liitettävät päätökset sekä päätösten liitteenä olevat aineistot haetaan Projektivelhosta. Päätökset ja sen liitteenä oleva aineisto julkaistaan palvelun julkisella puolella kuulutuksen julkaisupäivänä.",
   paatos: {
-    paatosInfoText: "Päätös ja jatkopäätös *",
-    paatosSubtitle:
+    paatosSubtitle: "Päätös ja jatkopäätös *",
+    paatosInfoText:
       "Liitä Liikenne- ja viestintäviraston päätökset suunnitelman hyväksymisestä sekä päätös suunnitelman voimassaoloajan pidentämisestä. Jatkopäätöksen päivämäärä sekä asiatunnus löytyvät automaattisesti Kuulutuksen tiedot -välilehdeltä.",
   },
 };
diff --git a/src/components/projekti/paatos/kuulutuksenTiedot/Voimassaolovuosi.tsx b/src/components/projekti/paatos/kuulutuksenTiedot/Voimassaolovuosi.tsx
new file mode 100644
index 000000000..f2eb4c4ff
--- /dev/null
+++ b/src/components/projekti/paatos/kuulutuksenTiedot/Voimassaolovuosi.tsx
@@ -0,0 +1,71 @@
+import Section from "@components/layout/Section";
+import SectionContent from "@components/layout/SectionContent";
+import React, { useEffect, useState } from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import dayjs from "dayjs";
+import HassuGrid from "@components/HassuGrid";
+import Select from "@components/form/Select";
+
+type Props = {};
+
+type FormFields = {
+  jatkoPaatos1Vaihe: {
+    viimeinenVoimassaolovuosi: string | null;
+  };
+};
+
+function getYears(count: number) {
+  let years = 0;
+  let yearsArray = [];
+  while (years < count) {
+    const year = dayjs().add(years, "year").year().toString();
+    yearsArray.push(year);
+    years++;
+  }
+  return yearsArray;
+}
+
+export default function Voimassaolovuosi({}: Props) {
+  const {
+    register,
+    formState: { errors },
+    control,
+  } = useFormContext<FormFields>();
+  const [years, setYears] = useState<string[]>([]);
+
+  useEffect(() => {
+    setYears(getYears(6));
+  }, []);
+
+  return (
+    <Section>
+      <SectionContent>
+        <h4 className="vayla-small-title">Päätöksen voimassaoloaika</h4>
+        <p>Valitse pudotusvalikosta vuosi, jonka loppuun saakka päätöksen voimassaoloaikaa jatketaan.</p>
+        <HassuGrid cols={{ lg: 3 }}>
+          <Controller
+            control={control}
+            name="jatkoPaatos1Vaihe.viimeinenVoimassaolovuosi"
+            render={({ field: { value, onChange, ...field } }) => (
+              <Select
+                id="voimassaolovuosi"
+                label="Päätöksen viimeinen voimassaolovuosi *"
+                options={
+                  years?.map((year) => {
+                    return { label: year, value: year };
+                  }) || [{ label: "", value: "" }]
+                }
+                {...register(`jatkoPaatos1Vaihe.viimeinenVoimassaolovuosi`)}
+                error={errors?.jatkoPaatos1Vaihe?.viimeinenVoimassaolovuosi}
+                addEmptyOption
+                value={value || ""}
+                onChange={(event) => onChange(event.target.value)}
+                {...field}
+              />
+            )}
+          />
+        </HassuGrid>
+      </SectionContent>
+    </Section>
+  );
+}
diff --git a/src/components/projekti/paatos/kuulutuksenTiedot/index.tsx b/src/components/projekti/paatos/kuulutuksenTiedot/index.tsx
index 635e1b6b1..15f8eabf9 100644
--- a/src/components/projekti/paatos/kuulutuksenTiedot/index.tsx
+++ b/src/components/projekti/paatos/kuulutuksenTiedot/index.tsx
@@ -19,7 +19,8 @@ import PdfPreviewForm from "@components/projekti/PdfPreviewForm";
 import useLeaveConfirm from "src/hooks/useLeaveConfirm";
 import useIsAllowedOnCurrentProjektiRoute from "src/hooks/useIsOnAllowedProjektiRoute";
 import PaatoksenPaiva from "@components/projekti/paatos/kuulutuksenTiedot/PaatoksenPaiva";
-import { getPaatosSpecificData, PaatosTyyppi } from "src/util/getPaatosSpecificData";
+import { getPaatosSpecificData, paatosIsJatkopaatos, PaatosTyyppi } from "src/util/getPaatosSpecificData";
+import Voimassaolovuosi from "./Voimassaolovuosi";
 
 type paatosInputValues = Omit<HyvaksymisPaatosVaiheInput, "hallintoOikeus"> & {
   hallintoOikeus: HyvaksymisPaatosVaiheInput["hallintoOikeus"] | "";
@@ -108,6 +109,7 @@ function KuulutuksenTiedotForm({ kirjaamoOsoitteet, paatosTyyppi, projekti }: Ku
               <fieldset disabled={!isAllowedOnRoute || !projekti.nykyinenKayttaja.omaaMuokkausOikeuden}>
                 <KuulutusJaJulkaisuPaiva />
                 <PaatoksenPaiva paatosTyyppi={paatosTyyppi} paatos={kasittelyntilaData} projektiOid={projekti.oid} />
+                {paatosIsJatkopaatos(paatosTyyppi) && <Voimassaolovuosi />}
                 <MuutoksenHaku />
                 <KuulutuksessaEsitettavatYhteystiedot
                   projekti={projekti}
diff --git a/src/schemas/jatkopaatos1Kuulutus.tsx b/src/schemas/jatkopaatos1Kuulutus.tsx
deleted file mode 100644
index 9b0b1d4a4..000000000
--- a/src/schemas/jatkopaatos1Kuulutus.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as Yup from "yup";
-import { ilmoituksenVastaanottajat, standardiYhteystiedot } from "./common";
-import { paivamaara } from "./paivamaaraSchema";
-
-export const jatkopaatos1KuulutusSchema = Yup.object().shape({
-  oid: Yup.string().required(),
-  jatkoPaatos1Vaihe: Yup.object()
-    .required()
-    .shape({
-      hallintoOikeus: Yup.string().required("Hallinto-oikeus on annettava"),
-      kuulutusYhteystiedot: standardiYhteystiedot(),
-      kuulutusPaiva: paivamaara({ preventPast: "Kuulutuspäivää ei voida asettaa menneisyyteen" }).required(
-        "Kuulutuspäivä ei voi olla tyhjä"
-      ),
-      kuulutusVaihePaattyyPaiva: paivamaara(),
-      ilmoituksenVastaanottajat: ilmoituksenVastaanottajat(),
-    }),
-});
diff --git a/src/util/getPaatosSpecificData.ts b/src/util/getPaatosSpecificData.ts
index acb6ff78e..56adae8b1 100644
--- a/src/util/getPaatosSpecificData.ts
+++ b/src/util/getPaatosSpecificData.ts
@@ -14,6 +14,9 @@ export enum PaatosTyyppi {
   JATKOPAATOS2 = "JATKOPAATOS2",
 }
 
+export const paatosIsJatkopaatos = (paatosTyyppi: PaatosTyyppi) =>
+  [PaatosTyyppi.JATKOPAATOS1, PaatosTyyppi.JATKOPAATOS2].includes(paatosTyyppi);
+
 export const paatosSpecificTilasiirtymaTyyppiMap: Record<PaatosTyyppi, TilasiirtymaTyyppi> = {
   HYVAKSYMISPAATOS: TilasiirtymaTyyppi.HYVAKSYMISPAATOSVAIHE,
   JATKOPAATOS1: TilasiirtymaTyyppi.JATKOPAATOS_1,