feat: generic payment cancelled page

City-of-Helsinki · Mar 28, 2024 · 9954f37 · 9954f37
1 parent 88ec9ad
commit 9954f37
Show file tree

Hide file tree

Showing 10 changed files with 101 additions and 0 deletions.
diff --git a/public/locales/en/paymentCancelled.json b/public/locales/en/paymentCancelled.json
@@ -0,0 +1,4 @@
+{
+  "text": "The payment was not made and registration for the event has been cancelled.",
+  "title": "The payment has been cancelled"
+}
diff --git a/public/locales/fi/paymentCancelled.json b/public/locales/fi/paymentCancelled.json
@@ -0,0 +1,4 @@
+{
+  "text": "Maksua ei suoritettu ja ilmoittautuminen tapahtumaan on peruttu.",
+  "title": "Maksu on peruutettu"
+}
diff --git a/public/locales/sv/paymentCancelled.json b/public/locales/sv/paymentCancelled.json
@@ -0,0 +1,4 @@
+{
+  "text": "Betalningen gjordes inte och anmälan till evenemanget är inställd.",
+  "title": "Betalningen har avbrutits"
+}
diff --git a/src/__tests__/Pages.test.tsx b/src/__tests__/Pages.test.tsx
@@ -30,6 +30,9 @@ import { mockedUserResponse } from '../domain/user/__mocks__/user';
 import LogoutPage, {
   getServerSideProps as getLogoutPageServerSideProps,
 } from '../pages/logout';
+import PaymentCancelledPage, {
+  getServerSideProps as getPaymentCancelledPageServerSideProps,
+} from '../pages/payment/cancelled';
 import PaymentCompletedPage, {
   getServerSideProps as getPaymentCompletedPageServerSideProps,
 } from '../pages/payment/completed';
@@ -469,6 +472,24 @@ describe('LogoutPage', () => {
   });
 });
 
+describe('PaymentCancelledPage', () => {
+  it('should render heading', async () => {
+    singletonRouter.push({ pathname: ROUTES.PAYMENT_CANCELLED });
+
+    render(<PaymentCancelledPage />);
+
+    await isHeadingRendered('Maksu on peruutettu');
+  });
+
+  it('should get correct translations namespaces', async () => {
+    const { props } = (await getPaymentCancelledPageServerSideProps({
+      locale: 'fi',
+    } as GetServerSidePropsContext)) as { props: ExtendedSSRConfig };
+
+    expect(props._nextI18Next?.ns).toEqual(['common', 'paymentCancelled']);
+  });
+});
+
 describe('PaymentCompletedPage', () => {
   it('should render heading', async () => {
     singletonRouter.push({ pathname: ROUTES.PAYMENT_COMPLETED });

diff --git a/src/domain/app/routes/constants.ts b/src/domain/app/routes/constants.ts
@@ -7,6 +7,7 @@ export enum ROUTES {
   EDIT_SIGNUP_GROUP = '/registration/[registrationId]/signup-group/[signupGroupId]/edit',
   HOME = '/',
   LOGOUT = '/logout',
+  PAYMENT_CANCELLED = '/payment/cancelled/',
   PAYMENT_COMPLETED = '/payment/completed/',
   SIGNUP_CANCELLED = '/registration/[registrationId]/signup/cancelled',
   SIGNUP_COMPLETED = '/registration/[registrationId]/signup/[signupId]/completed',

diff --git a/src/domain/payment/PaymentCancelledPage.tsx b/src/domain/payment/PaymentCancelledPage.tsx
@@ -0,0 +1,24 @@
+import Head from 'next/head';
+import { useTranslation } from 'next-i18next';
+import { FC } from 'react';
+
+import ErrorTemplate from '../../common/components/errorTemplate/ErrorTemplate';
+import MainContent from '../app/layout/mainContent/MainContent';
+
+const PaymentCancelledPage: FC = () => {
+  const { t } = useTranslation('paymentCancelled');
+
+  return (
+    <MainContent>
+      <Head>
+        <title>{t('paymentCancelled:title')}</title>
+      </Head>
+      <ErrorTemplate
+        text={t('paymentCancelled:text')}
+        title={t('paymentCancelled:title')}
+      />
+    </MainContent>
+  );
+};
+
+export default PaymentCancelledPage;
diff --git a/src/domain/payment/__tests__/PaymentCancelledPage.test.tsx b/src/domain/payment/__tests__/PaymentCancelledPage.test.tsx
@@ -0,0 +1,21 @@
+/* eslint-disable max-len */
+import React from 'react';
+
+import { render, screen } from '../../../utils/testUtils';
+import PaymentCancelledPage from '../PaymentCancelledPage';
+
+const renderComponent = () => render(<PaymentCancelledPage />);
+
+test('should render payment cancelled page', () => {
+  renderComponent();
+
+  expect(
+    screen.getByRole('heading', { name: 'Maksu on peruutettu' })
+  ).toBeInTheDocument();
+
+  expect(
+    screen.getByText(
+      'Maksua ei suoritettu ja ilmoittautuminen tapahtumaan on peruttu.'
+    )
+  ).toBeInTheDocument();
+});
diff --git a/src/pages/payment/cancelled/index.tsx b/src/pages/payment/cancelled/index.tsx
@@ -0,0 +1,19 @@
+import { GetServerSideProps } from 'next';
+import React from 'react';
+
+import PaymentCancelledPage from '../../../domain/payment/PaymentCancelledPage';
+import getServerSideTranslations from '../../../utils/getServerSideTranslations';
+
+export const getServerSideProps: GetServerSideProps = async ({ locale }) => ({
+  props: {
+    ...(await getServerSideTranslations({
+      locale: locale as string,
+      translationNamespaces: ['common', 'paymentCancelled'],
+    })),
+  },
+});
+const PaymentCancelled = (): React.ReactElement => {
+  return <PaymentCancelledPage />;
+};
+
+export default PaymentCancelled;
diff --git a/src/tests/initI18n.ts b/src/tests/initI18n.ts
@@ -4,6 +4,7 @@ import { initReactI18next } from 'react-i18next';
 
 import attendanceList from '../../public/locales/fi/attendanceList.json';
 import common from '../../public/locales/fi/common.json';
+import paymentCancelled from '../../public/locales/fi/paymentCancelled.json';
 import paymentCompleted from '../../public/locales/fi/paymentCompleted.json';
 import reservation from '../../public/locales/fi/reservation.json';
 import signup from '../../public/locales/fi/signup.json';
@@ -13,6 +14,7 @@ import summary from '../../public/locales/fi/summary.json';
 const translations = {
   attendanceList,
   common,
+  paymentCancelled,
   paymentCompleted,
   reservation,
   signup,

diff --git a/src/types.ts b/src/types.ts
@@ -109,6 +109,7 @@ export type ExtendedSSRConfig = SSRConfig & {
 export type TranslationNamespaces = Array<
   | 'attendanceList'
   | 'common'
+  | 'paymentCancelled'
   | 'paymentCompleted'
   | 'reservation'
   | 'signup'