add: deactivated account error page as common component

apps/admin-ui/src/App.tsx

@@ -14,6 +14,7 @@ import NotificationsRouter from "./spa/notifications/router";
 import Error404 from "./common/Error404";
 import { UserPermissionChoice } from "@gql/gql-types";
 import { UnitsRouter } from "./spa/unit/router";
+import DeactivatedAccount from "common/src/components/DeactivatedAccount";
 
 const Units = dynamic(() => import("./spa/unit"));
 
@@ -151,6 +152,15 @@ function ClientApp({
               UserPermissionChoice.CanManageNotifications
             )}
           />
+          <Route
+            path="/deactivated-account"
+            element={
+              <DeactivatedAccount
+                feedbackUrl={feedbackUrl}
+                imgSrc={`${PUBLIC_URL}/images/deactivated-account.png`}
+              />
+            }
+          />
         </Routes>
       </PageWrapper>
     </BrowserRouter>

apps/admin-ui/src/i18n/index.ts

@@ -74,4 +74,14 @@ i18n.addResourceBundle("fi", "forms", {
   invalidEmail: "Sähköpostin tulee olla oikeassa muodossa (sisältäen @-merkin)",
 });
 
+i18n.addResourceBundle("fi", "errors", {
+  deactivatedAccount: {
+    heading: "Käyttäjätunnuksesi ei ole voimassa.",
+    subHeadingA: "Ota yhteyttä asiakaspalveluun sähköpostitse",
+    subHeadingB: "tai Ota yhteyttä-lomakkeella.",
+    email: "[email protected]",
+    button: "Ota yhteyttä",
+  },
+});
+
 export default i18n;

apps/ui/pages/deactivated-account.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { getCommonServerSideProps } from "@/modules/serverUtils";
+import { GetServerSidePropsContext } from "next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import DeactivatedAccount from "common/src/components/DeactivatedAccount";
+
+export async function getServerSideProps({
+  locale,
+}: GetServerSidePropsContext) {
+  return {
+    props: {
+      ...getCommonServerSideProps(),
+      ...(await serverSideTranslations(locale ?? "fi")),
+    },
+  };
+}
+
+const DeactivatedAccountPage = ({ feedbackUrl }: { feedbackUrl: string }) => {
+  return (
+    <DeactivatedAccount
+      feedbackUrl={feedbackUrl}
+      imgSrc="/images/deactivated-account.png"
+    />
+  );
+};
+
+export default DeactivatedAccountPage;

apps/ui/public/locales/en/errors.json

@@ -5,6 +5,13 @@
   "500": {
     "body": "Something unexpected happened"
   },
+  "deactivatedAccount": {
+    "heading": "Your User ID is not valid.",
+    "subHeadingA": "Please contact support via email at",
+    "subHeadingB": "or via the Contact us form.",
+    "email": "[email protected]",
+    "button": "Contact us"
+  },
   "applicationMutation": {
     "Validation error": "Error in the API call",
     "Form validation error": "Form validation error",

apps/ui/public/locales/fi/errors.json

@@ -5,6 +5,13 @@
   "500": {
     "body": "Jotain meni pieleen"
   },
+  "deactivatedAccount": {
+    "heading": "Käyttäjätunnuksesi ei ole voimassa.",
+    "subHeadingA": "Ota yhteyttä asiakaspalveluun sähköpostitse",
+    "subHeadingB": "tai Ota yhteyttä-lomakkeella.",
+    "email": "[email protected]",
+    "button": "Ota yhteyttä"
+  },
   "applicationMutation": {
     "Validation error": "Virheellinen rajapintakutsu",
     "Form validation error": "Virheellinen lomake",

apps/ui/public/locales/sv/errors.json

@@ -5,6 +5,13 @@
   "500": {
     "body": "Något oväntat hände"
   },
+  "deactivatedAccount": {
+    "heading": "Ditt användar-ID är inte giltigt.",
+    "subHeadingA": "Var god och kontakta vår kundtjänst via email på",
+    "subHeadingB": "eller via Ta kontakt-formuläret.",
+    "email": "[email protected]",
+    "button": "Ta kontakt"
+  },
   "applicationMutation": {
     "Validation error": "Ett fel uppstod i API-anropet",
     "Form validation error": "Formuläret innehåller fel",

packages/common/src/components/DeactivatedAccount.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import { useTranslation } from "next-i18next";
+import styled from "styled-components";
+import IconButton from "./IconButton";
+import { IconArrowRight } from "hds-react";
+import { fontBold, H1 } from "../common/typography";
+import { breakpoints } from "../common/style";
+import Image from "next/image";
+
+const ErrorContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  max-width: var(--container-width-xl);
+  margin: 0 auto;
+  gap: var(--spacing-xl);
+  padding-block: var(--spacing-xl);
+  padding-inline: var(--spacing-s);
+
+  --spacing-hz: var(--spacing-s);
+  @media (min-width: ${breakpoints.m}) {
+    flex-direction: row;
+    padding-inline: var(--spacing-m);
+
+    --spacing-hz: var(--spacing-m);
+  }
+`;
+
+const Img = styled(Image)`
+  object-fit: contain;
+  width: auto;
+  height: auto;
+  margin: 0 auto;
+  @media (min-width: ${breakpoints.l}) {
+    flex-grow: 1;
+    display: flex;
+    max-width: 350px;
+    width: 419px;
+  }
+`;
+
+const TextContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xl);
+  justify-content: center;
+  @media (min-width: ${breakpoints.l}) {
+    order: -1;
+  }
+`;
+
+const Body = styled.p`
+  margin: 0;
+`;
+
+const Email = styled.a`
+  margin: var(--spacing-xs) 0 0;
+  ${fontBold}
+`;
+
+// NOTE: This is a copy of the Footer component from the common package
+const constructFeedbackUrl = (
+  feedbackUrl: string,
+  i18n: { language: string }
+) => {
+  try {
+    const url = new URL(feedbackUrl);
+    url.searchParams.set("lang", i18n.language);
+    return url.toString();
+  } catch (e) {
+    return null;
+  }
+};
+
+const DeactivatedAccount = ({
+  feedbackUrl,
+  imgSrc,
+}: {
+  feedbackUrl: string;
+  imgSrc: string;
+}) => {
+  const { t, i18n } = useTranslation();
+  return (
+    <ErrorContainer>
+      <Img
+        src={imgSrc}
+        alt={t("errors:deactivatedAccount.heading")}
+        width="350"
+        height="418"
+        aria-hidden="true"
+      />
+      <TextContent>
+        <H1>{t("errors:deactivatedAccount.heading")}</H1>
+        <Body>
+          {`${t("errors:deactivatedAccount.subHeadingA")} `}
+          <Email href={`mailto:${t("errors:deactivatedAccount.email")}`}>
+            {t("errors:deactivatedAccount.email")}
+          </Email>
+          {` ${t("errors:deactivatedAccount.subHeadingB")}`}
+        </Body>
+        <IconButton
+          label={t("errors:deactivatedAccount.button")}
+          icon={<IconArrowRight aria-hidden="true" />}
+          href={constructFeedbackUrl(feedbackUrl, i18n) ?? feedbackUrl}
+          rel="noopener noreferrer"
+        />
+      </TextContent>
+    </ErrorContainer>
+  );
+};
+
+export default DeactivatedAccount;