LINK-1369 | Support multilingual confirmation_message and instructions fields

public/locales/en/enrolment.json

@@ -43,6 +43,7 @@
     "text": "In waiting list",
     "tooltip": "Entrants have been added to the queue of registrants with a reserve place. Registration is confirmed only when a place in the queue becomes available. You will receive a notification by e-mail that the place has been confirmed."
   },
+  "instructions": "Registration instructions",
   "labelAccepted": "I agree to share my information with the organizer. We do not use the information you provide for marketing purposes. <a href={{url}} target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Privacy policy {{openInNewTab}}\">Privacy policy</a>",
   "labelAttendeeExtraInfo": "Additional information (optional)",
   "labelCity": "City",

public/locales/fi/enrolment.json

@@ -39,6 +39,7 @@
   },
   "freeAttendeeCapacity": "Saatavilla olevia paikkoja",
   "freeWaitingListCapacity": "Saatavilla olevia jonopaikkoja",
+  "instructions": "Ilmoittautumisohjeet",
   "inWaitingList": {
     "text": "Varasija",
     "tooltip": "Ilmoittautuja on lisätty ilmoittautujien jonoon varasijalla. Ilmoittautuminen varmistuu vasta, kun paikka jonossa vapautuu. Saat paikan varmistumisesta ilmoituksen sähköpostitse."

public/locales/sv/enrolment.json

@@ -39,6 +39,7 @@
   },
   "freeAttendeeCapacity": "Tillgängliga platser",
   "freeWaitingListCapacity": "Tillgängliga väntelistplatser",
+  "instructions": "Registreringsinstruktioner",
   "inWaitingList": {
     "text": "På väntelista",
     "tooltip": "Deltagare har lagts till i kön av anmälda med reservplats. Anmälan bekräftas först när en plats i kön blir ledig. Du får ett meddelande via e-post om att platsen är bekräftad."

src/__tests__/Pages.test.tsx

@@ -113,7 +113,7 @@ describe('CreateEnrolmentPage', () => {
 
     render(<CreateEnrolmentPage />);
 
-    await isHeadingRendered(event.name.fi as string);
+    await isHeadingRendered(event.name?.fi as string);
   });
 
   it('should prefetch data', async () => {
@@ -153,7 +153,7 @@ describe('SummaryPage', () => {
 
     render(<SummaryPage />);
 
-    await isHeadingRendered(event.name.fi as string);
+    await isHeadingRendered(event.name?.fi as string);
   });
 
   it('should prefetch data', async () => {
@@ -225,7 +225,7 @@ describe('EditEnrolmentPage', () => {
 
     render(<EditEnrolmentPage />);
 
-    await isHeadingRendered(event.name.fi as string);
+    await isHeadingRendered(event.name?.fi as string);
   });
 
   it('should prefetch data', async () => {

src/domain/api/types.ts

@@ -9,7 +9,7 @@ export type LocalisedObject = {
   ru?: stringOrNull;
   sv?: stringOrNull;
   zh_hans?: stringOrNull;
-};
+} | null;
 
 export type Meta = {
   count: number;

src/domain/enrolment/EnrolmentCompletedPage.tsx

@@ -28,7 +28,7 @@ const EnrolmentCompletedPage: React.FC<Props> = ({ event, registration }) => {
   const locale = useLocale();
 
   const { name } = getEventFields(event, locale);
-  const { confirmationMessage } = getRegistrationFields(registration);
+  const { confirmationMessage } = getRegistrationFields(registration, locale);
 
   React.useEffect(() => {
     if (typeof redirectUrl === 'string') {

src/domain/enrolment/__tests__/EnrolmentCompletedPage.test.tsx

@@ -27,7 +27,7 @@ const renderComponent = (query?: {
 const registrationWithoutConfirmationMessage = fakeRegistration({
   id: TEST_REGISTRATION_ID,
   event,
-  confirmation_message: '',
+  confirmation_message: null,
 });
 const mockedRegistrationWithoutConfirmationMessageResponse = rest.get(
   `*/registration/${TEST_REGISTRATION_ID}`,
@@ -40,7 +40,7 @@ const confirmationMessage = 'Custom confirmation message';
 const registrationWithConfirmationMessage = fakeRegistration({
   id: TEST_REGISTRATION_ID,
   event,
-  confirmation_message: confirmationMessage,
+  confirmation_message: { fi: confirmationMessage },
 });
 const mockedRegistrationWithConfirmationMessageResponse = rest.get(
   `*/registration/${TEST_REGISTRATION_ID}`,
@@ -67,7 +67,7 @@ test('should show default enrolment completed text', async () => {
 
   await screen.findByRole('heading', { name: 'Kiitos ilmoittautumisestasi!' });
   screen.getByText(
-    `Olet ilmoittanut tapahtumaamme ${eventOverrides.name.fi} – sydämellisesti tervetuloa!`
+    `Olet ilmoittanut tapahtumaamme ${eventOverrides.name?.fi} – sydämellisesti tervetuloa!`
   );
 });
 

src/domain/enrolment/confirmationMessage/ConfirmationMessage.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import useLocale from '../../../hooks/useLocale';
 import { Registration } from '../../registration/types';
 import { getRegistrationFields } from '../../registration/utils';
 
@@ -8,7 +9,8 @@ type Props = {
 };
 
 const ConfirmationMessage: React.FC<Props> = ({ registration }) => {
-  const { confirmationMessage } = getRegistrationFields(registration);
+  const locale = useLocale();
+  const { confirmationMessage } = getRegistrationFields(registration, locale);
   const confirmationMessageParts = confirmationMessage.split('\n');
 
   return (

src/domain/enrolment/eventInfo/EventInfo.tsx

@@ -10,6 +10,7 @@ import { Event } from '../../event/types';
 import { getEventFields } from '../../event/utils';
 import { Registration } from '../../registration/types';
 import { getRegistrationFields } from '../../registration/utils';
+import Instructions from '../instructions/Instructions';
 import AudienceAgeText from './AudienceAgeText';
 import DateText from './DateText';
 import styles from './eventInfo.module.scss';
@@ -32,8 +33,10 @@ const EventInfo: React.FC<EventInfoProps> = ({ event, registration }) => {
     offers,
     startTime,
   } = getEventFields(event, locale);
-  const { audienceMaxAge, audienceMinAge } =
-    getRegistrationFields(registration);
+  const { audienceMaxAge, audienceMinAge } = getRegistrationFields(
+    registration,
+    locale
+  );
 
   const locationText = useEventLocationText(event);
 
@@ -53,6 +56,7 @@ const EventInfo: React.FC<EventInfoProps> = ({ event, registration }) => {
         </div>
         <div className={styles.descriptionRow}>
           <div dangerouslySetInnerHTML={{ __html: description }}></div>
+          <Instructions registration={registration} />
         </div>
         <div className={styles.keywordsRow}>
           {keywords.map((keyword) => (

src/domain/enrolment/eventInfo/__tests__/EventInfo.test.tsx

@@ -1,6 +1,7 @@
 import { rest } from 'msw';
 import React from 'react';
 
+import { fakeLocalisedObject } from '../../../../utils/mockDataUtils';
 import {
   configure,
   render,
@@ -34,11 +35,11 @@ const getElement = (key: 'age' | 'date' | 'description' | 'name' | 'price') => {
     case 'date':
       return screen.getByText('10.07.2020 – 13.07.2020');
     case 'description':
-      return screen.getByText(eventOverrides.description.fi as string);
+      return screen.getByText(eventOverrides.description?.fi as string);
     case 'name':
-      return screen.getByText(eventOverrides.name.fi as string);
+      return screen.getByText(eventOverrides.name?.fi as string);
     case 'price':
-      return screen.getByText(eventOverrides.offers[0].price.fi as string);
+      return screen.getByText(eventOverrides.offers[0].price?.fi as string);
   }
 };
 
@@ -84,3 +85,29 @@ test('should show event time correctly if only end time is defined', async () =>
 
   screen.getByText('– 13.7.2020, 15.00');
 });
+
+test('should not show registration instructions text', async () => {
+  render(
+    <EventInfo
+      event={event}
+      registration={{ ...registration, instructions: null }}
+    />
+  );
+
+  expect(screen.queryByText('Ilmoittautumisohjeet')).not.toBeInTheDocument();
+});
+
+test('should show registration instructions text', async () => {
+  render(
+    <EventInfo
+      event={event}
+      registration={{
+        ...registration,
+        instructions: fakeLocalisedObject('Ohjeet ilmoittautumiseen'),
+      }}
+    />
+  );
+
+  screen.getByText('Ilmoittautumisohjeet');
+  screen.getByText('Ohjeet ilmoittautumiseen');
+});

src/domain/enrolment/instructions/Instructions.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import useLocale from '../../../hooks/useLocale';
+import { Registration } from '../../registration/types';
+import { getRegistrationFields } from '../../registration/utils';
+
+type Props = {
+  registration: Registration;
+};
+
+const Instructions: React.FC<Props> = ({ registration }) => {
+  const { t } = useTranslation('enrolment');
+  const locale = useLocale();
+  const { instructions } = getRegistrationFields(registration, locale);
+  const instructionsParts = instructions.split('\n');
+
+  if (!instructions) {
+    return null;
+  }
+
+  return (
+    <>
+      <strong>{t('enrolment:instructions')}</strong>
+      {instructionsParts.map((part) => (
+        <p key={part}>{part}</p>
+      ))}
+    </>
+  );
+};
+
+export default Instructions;

src/domain/enrolment/summaryPage/summaryEventInfo/SummaryEventInfo.tsx

@@ -23,8 +23,10 @@ const EventInfo: React.FC<EventInfoProps> = ({ registration }) => {
     event,
     locale
   );
-  const { audienceMaxAge, audienceMinAge } =
-    getRegistrationFields(registration);
+  const { audienceMaxAge, audienceMinAge } = getRegistrationFields(
+    registration,
+    locale
+  );
 
   const locationText = useEventLocationText(event);
 

src/domain/registration/types.ts

@@ -1,20 +1,25 @@
-import { Meta, numberOrNull, stringOrNull } from '../api/types';
+import {
+  LocalisedObject,
+  Meta,
+  numberOrNull,
+  stringOrNull,
+} from '../api/types';
 import { Event } from '../event/types';
 
 export type Registration = {
   id: string;
   attendee_registration: boolean;
   audience_max_age: numberOrNull;
   audience_min_age: numberOrNull;
-  confirmation_message: string;
+  confirmation_message: LocalisedObject;
   created_at: stringOrNull;
   created_by: stringOrNull;
   current_attendee_count: number;
   current_waiting_list_count: number;
   enrolment_end_time: string;
   enrolment_start_time: string;
   event: Event;
-  instructions: stringOrNull;
+  instructions: LocalisedObject;
   last_modified_at: stringOrNull;
   last_modified_by: stringOrNull;
   mandatory_fields: string[];
@@ -41,5 +46,6 @@ export type RegistrationFields = {
   audienceMaxAge: numberOrNull;
   audienceMinAge: numberOrNull;
   confirmationMessage: string;
+  instructions: string;
   mandatoryFields: string[];
 };

src/domain/registration/utils.ts

@@ -5,7 +5,8 @@ import isNil from 'lodash/isNil';
 import { TFunction } from 'next-i18next';
 
 import { VALIDATION_MESSAGE_KEYS } from '../../constants';
-import { ExtendedSession } from '../../types';
+import { ExtendedSession, Language } from '../../types';
+import getLocalisedString from '../../utils/getLocalisedString';
 import queryBuilder from '../../utils/queryBuilder';
 import { callGet } from '../app/axios/axiosClient';
 import {
@@ -198,12 +199,17 @@ export const getRegistrationWarning = (
 };
 
 export const getRegistrationFields = (
-  registration: Registration
+  registration: Registration,
+  locale: Language
 ): RegistrationFields => {
   return {
     audienceMaxAge: registration.audience_max_age ?? null,
     audienceMinAge: registration.audience_min_age ?? null,
-    confirmationMessage: registration.confirmation_message,
+    confirmationMessage: getLocalisedString(
+      registration.confirmation_message,
+      locale
+    ),
+    instructions: getLocalisedString(registration.instructions, locale),
     mandatoryFields: registration.mandatory_fields,
   };
 };

src/utils/mockDataUtils.ts

@@ -271,15 +271,15 @@ export const fakeRegistration = (
       attendee_registration: false,
       audience_max_age: null,
       audience_min_age: null,
-      confirmation_message: faker.lorem.paragraph(),
+      confirmation_message: fakeLocalisedObject(faker.lorem.paragraph()),
       created_at: null,
       created_by: faker.name.firstName(),
       current_attendee_count: 0,
       current_waiting_list_count: 0,
       enrolment_end_time: '2020-09-30T16:00:00.000000Z',
       enrolment_start_time: '2020-09-27T15:00:00.000000Z',
       event,
-      instructions: faker.lorem.paragraph(),
+      instructions: fakeLocalisedObject(faker.lorem.paragraph()),
       last_modified_at: '2020-09-12T15:00:00.000000Z',
       last_modified_by: '',
       mandatory_fields: [],