Skip to content
This repository was archived by the owner on Feb 10, 2025. It is now read-only.

Commit 29f9b3d

Browse files
vincit-matujoonatank
vincit-matu
authored and
joonatank
committed
add: deactivated account error page as common component
1 parent 1832667 commit 29f9b3d

9 files changed

Lines changed: 171 additions & 0 deletions

File tree

‎apps/admin-ui/public/images/deactivated-account.png‎

37 KB
Loading

‎apps/admin-ui/src/App.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import NotificationsRouter from "./spa/notifications/router";
1414
import Error404 from "./common/Error404";
1515
import { UserPermissionChoice } from "@gql/gql-types";
1616
import { UnitsRouter } from "./spa/unit/router";
17+
import DeactivatedAccount from "common/src/components/DeactivatedAccount";
1718

1819
const Units = dynamic(() => import("./spa/unit"));
1920

@@ -151,6 +152,15 @@ function ClientApp({
151152
UserPermissionChoice.CanManageNotifications
152153
)}
153154
/>
155+
<Route
156+
path="/deactivated-account"
157+
element={
158+
<DeactivatedAccount
159+
feedbackUrl={feedbackUrl}
160+
imgSrc={`${PUBLIC_URL}/images/deactivated-account.png`}
161+
/>
162+
}
163+
/>
154164
</Routes>
155165
</PageWrapper>
156166
</BrowserRouter>

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,4 +74,14 @@ i18n.addResourceBundle("fi", "forms", {
7474
invalidEmail: "Sähköpostin tulee olla oikeassa muodossa (sisältäen @-merkin)",
7575
});
7676

77+
i18n.addResourceBundle("fi", "errors", {
78+
deactivatedAccount: {
79+
heading: "Käyttäjätunnuksesi ei ole voimassa.",
80+
subHeadingA: "Ota yhteyttä asiakaspalveluun sähköpostitse",
81+
subHeadingB: "tai Ota yhteyttä-lomakkeella.",
82+
email: "varaamo@hel.fi",
83+
button: "Ota yhteyttä",
84+
},
85+
});
86+
7787
export default i18n;

‎apps/ui/pages/deactivated-account.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from "react";
2+
import { getCommonServerSideProps } from "@/modules/serverUtils";
3+
import { GetServerSidePropsContext } from "next";
4+
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
5+
import DeactivatedAccount from "common/src/components/DeactivatedAccount";
6+
7+
export async function getServerSideProps({
8+
locale,
9+
}: GetServerSidePropsContext) {
10+
return {
11+
props: {
12+
...getCommonServerSideProps(),
13+
...(await serverSideTranslations(locale ?? "fi")),
14+
},
15+
};
16+
}
17+
18+
const DeactivatedAccountPage = ({ feedbackUrl }: { feedbackUrl: string }) => {
19+
return (
20+
<DeactivatedAccount
21+
feedbackUrl={feedbackUrl}
22+
imgSrc="/images/deactivated-account.png"
23+
/>
24+
);
25+
};
26+
27+
export default DeactivatedAccountPage;

‎apps/ui/public/images/deactivated-account.png‎

37 KB
Loading

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,13 @@
55
"500": {
66
"body": "Something unexpected happened"
77
},
8+
"deactivatedAccount": {
9+
"heading": "Your User ID is not valid.",
10+
"subHeadingA": "Please contact support via email at",
11+
"subHeadingB": "or via the Contact us form.",
12+
"email": "varaamo@hel.fi",
13+
"button": "Contact us"
14+
},
815
"applicationMutation": {
916
"Validation error": "Error in the API call",
1017
"Form validation error": "Form validation error",

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,13 @@
55
"500": {
66
"body": "Jotain meni pieleen"
77
},
8+
"deactivatedAccount": {
9+
"heading": "Käyttäjätunnuksesi ei ole voimassa.",
10+
"subHeadingA": "Ota yhteyttä asiakaspalveluun sähköpostitse",
11+
"subHeadingB": "tai Ota yhteyttä-lomakkeella.",
12+
"email": "varaamo@hel.fi",
13+
"button": "Ota yhteyttä"
14+
},
815
"applicationMutation": {
916
"Validation error": "Virheellinen rajapintakutsu",
1017
"Form validation error": "Virheellinen lomake",

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,13 @@
55
"500": {
66
"body": "Något oväntat hände"
77
},
8+
"deactivatedAccount": {
9+
"heading": "Ditt användar-ID är inte giltigt.",
10+
"subHeadingA": "Var god och kontakta vår kundtjänst via email på",
11+
"subHeadingB": "eller via Ta kontakt-formuläret.",
12+
"email": "varaamo@hel.fi",
13+
"button": "Ta kontakt"
14+
},
815
"applicationMutation": {
916
"Validation error": "Ett fel uppstod i API-anropet",
1017
"Form validation error": "Formuläret innehåller fel",

‎packages/common/src/components/DeactivatedAccount.tsx‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import React from "react";
2+
import { useTranslation } from "next-i18next";
3+
import styled from "styled-components";
4+
import IconButton from "./IconButton";
5+
import { IconArrowRight } from "hds-react";
6+
import { fontBold, H1 } from "../common/typography";
7+
import { breakpoints } from "../common/style";
8+
import Image from "next/image";
9+
10+
const IMAGE_WIDTH = "418";
11+
const IMAGE_HEIGHT = "350";
12+
13+
const ErrorContainer = styled.div`
14+
display: flex;
15+
flex-direction: column;
16+
gap: var(--spacing-xl);
17+
padding-top: var(--spacing-xl);
18+
@media (min-width: ${breakpoints.m}) {
19+
flex-direction: row;
20+
}
21+
`;
22+
23+
const Img = styled(Image)`
24+
object-fit: contain;
25+
width: auto;
26+
height: auto;
27+
margin: 0 auto;
28+
@media (min-width: ${breakpoints.l}) {
29+
flex-grow: 1;
30+
display: flex;
31+
max-width: ${`${IMAGE_WIDTH}px`};
32+
}
33+
`;
34+
35+
const TextContent = styled.div`
36+
display: flex;
37+
flex-direction: column;
38+
gap: var(--spacing-xl);
39+
justify-content: center;
40+
@media (min-width: ${breakpoints.m}) {
41+
order: -1;
42+
}
43+
`;
44+
45+
const Body = styled.p`
46+
margin: 0;
47+
`;
48+
49+
const Email = styled.a`
50+
${fontBold}
51+
`;
52+
53+
const constructFeedbackUrl = (
54+
feedbackUrl: string,
55+
i18n: { language: string }
56+
) => {
57+
try {
58+
const url = new URL(feedbackUrl);
59+
url.searchParams.set("lang", i18n.language);
60+
return url.toString();
61+
} catch (e) {
62+
return null;
63+
}
64+
};
65+
66+
const DeactivatedAccount = ({
67+
feedbackUrl,
68+
imgSrc,
69+
}: {
70+
feedbackUrl: string;
71+
imgSrc: string;
72+
}) => {
73+
const { t, i18n } = useTranslation();
74+
return (
75+
<ErrorContainer>
76+
<Img
77+
src={imgSrc}
78+
alt={t("errors:deactivatedAccount.heading")}
79+
width={IMAGE_WIDTH}
80+
height={IMAGE_HEIGHT}
81+
aria-hidden="true"
82+
/>
83+
<TextContent>
84+
<H1>{t("errors:deactivatedAccount.heading")}</H1>
85+
<Body>
86+
{`${t("errors:deactivatedAccount.subHeadingA")} `}
87+
<Email href={`mailto:${t("errors:deactivatedAccount.email")}`}>
88+
{t("errors:deactivatedAccount.email")}
89+
</Email>
90+
{` ${t("errors:deactivatedAccount.subHeadingB")}`}
91+
</Body>
92+
<IconButton
93+
label={t("errors:deactivatedAccount.button")}
94+
icon={<IconArrowRight aria-hidden="true" />}
95+
href={constructFeedbackUrl(feedbackUrl, i18n) ?? feedbackUrl}
96+
rel="noopener noreferrer"
97+
/>
98+
</TextContent>
99+
</ErrorContainer>
100+
);
101+
};
102+
103+
export default DeactivatedAccount;

0 commit comments

Comments
 (0)