feat: add "Is part of cultural route" selection to enrolment form

also:
- with the request of the product owner don't restore any previous
  answer to "Is part of cultural route" question from local storage
  persisted Formik form's data, but instead always reset the question
  to its initial value i.e. no data given at all

refs PT-453

Author: karisal-anders

public/locales/en/enrolment.json

@@ -17,6 +17,13 @@
     "labelIsSharingDataAccepted": "I agree to share my information with the event organizer",
     "labelLanguage": "Language",
     "labelNotificationLanguage": "Language used in notifications",
+    "culturalRoute": {
+      "labelIsPartOf": "The visit is part of the cultural route",
+      "labelNoOrUnknown": "No / I don't know",
+      "labelYes": "Yes",
+      "helperText": "Cultural routes are implementation proposals for the City of Helsinki's cultural education plan from early childhood education to upper secondary education. <a>Read more</a>",
+      "readMoreUrl": "/en/cms-page/cultural-education/cultural-routes"
+    },
     "person": {
       "labelEmailAddress": "Email address",
       "labelName": "Name",

public/locales/fi/enrolment.json

@@ -17,6 +17,13 @@
     "labelIsSharingDataAccepted": "Hyväksyn tietojeni jakamisen tapahtuman järjestäjän kanssa",
     "labelLanguage": "Kieli",
     "labelNotificationLanguage": "Ilmoitusten kieli",
+    "culturalRoute": {
+      "labelIsPartOf": "Käynti sisältyy kulttuuripolkuun",
+      "labelNoOrUnknown": "Ei / en tiedä",
+      "labelYes": "Kyllä",
+      "helperText": "Kulttuuripolut ovat Helsingin kaupungin kulttuurikasvatussuunnitelman toteutusehdotuksia varhaiskasvatuksesta toiselle asteelle. <a>Lue lisää kulttuuripoluista</a>",
+      "readMoreUrl": "/fi/cms-page/kulttuurikasvatus/kulttuuripolulla-kulttuuria-kaikille"
+    },
     "person": {
       "labelEmailAddress": "Sähköpostiosoite",
       "labelName": "Nimi",

public/locales/sv/enrolment.json

@@ -17,6 +17,13 @@
     "labelIsSharingDataAccepted": "Jag samtycker till att dela mina uppgifter med arrangören av evenemanget.",
     "labelLanguage": "Språk",
     "labelNotificationLanguage": "Språket för meddelanden",
+    "culturalRoute": {
+      "labelIsPartOf": "Besöket ingår i kulturstigen",
+      "labelNoOrUnknown": "Nej / jag vet inte",
+      "labelYes": "Ja",
+      "helperText": "Kulturstigarna är förslag på genomförande av Helsingfors stads kulturfostransplan från småbarnspedagogik till gymnasieutbildning. <a>Läs mer om kulturstigarna</a>",
+      "readMoreUrl": "/sv/cms-page/kulturpedagogik/kulturstigen-kultur-for-alla"
+    },
     "person": {
       "labelEmailAddress": "E-post",
       "labelName": "Namn",

src/common/components/formikPersist/FormikPersist.tsx

@@ -1,5 +1,8 @@
 import { FormikProps, useFormikContext } from 'formik';
+import cloneDeep from 'lodash/cloneDeep';
+import get from 'lodash/get';
 import isEqual from 'lodash/isEqual';
+import set from 'lodash/set';
 import * as React from 'react';
 
 import useIsMounted from '../../../hooks/useIsMounted';
@@ -26,13 +29,16 @@ export interface PersistProps {
   debounceTime?: number;
   isSessionStorage?: boolean;
   initialValues: Record<string, unknown>;
+  // Dot-notation paths of fields that are restored using initial values:
+  alwaysFreshFields?: string[];
 }
 
 const FormikPersist = ({
   debounceTime = 300,
   isSessionStorage = false,
   name,
   initialValues,
+  alwaysFreshFields = [],
 }: PersistProps): null => {
   const isMounted = useIsMounted();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -78,7 +84,12 @@ const FormikPersist = ({
       storedFormikStateObject &&
       objectStructureMatches(initialValues, storedFormikStateObject.values)
     ) {
-      formik.setValues(storedFormikStateObject.values, true);
+      const valuesToRestore = cloneDeep(storedFormikStateObject.values);
+      // Restore fresh fields with their initial values instead of stored ones:
+      for (const path of alwaysFreshFields) {
+        set(valuesToRestore, path, get(initialValues, path));
+      }
+      formik.setValues(valuesToRestore, true);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

src/domain/enrolment/enrolmentForm/EnrolmentForm.tsx

@@ -17,6 +17,7 @@ import {
   nameToLabelPath,
 } from './constants';
 import styles from './enrolmentForm.module.scss';
+import IsPartOfCulturalRouteField from './IsPartOfCulturalRouteField';
 import getValidationSchema from './ValidationSchema';
 import ErrorMessage from '../../../common/components/form/ErrorMessage';
 import CheckboxField from '../../../common/components/form/fields/CheckboxField';
@@ -103,6 +104,7 @@ const EnrolmentForm: React.FC<Props> = ({
             <FormikPersist
               name={FORM_NAMES.ENROLMENT_FORM}
               initialValues={initialValues}
+              alwaysFreshFields={['isPartOfCulturalRoute']}
             />
             <h2>{t('enrolment:enrolmentForm.studyGroup.titleNotifier')}</h2>
             <FormErrorNotification
@@ -206,6 +208,10 @@ const EnrolmentForm: React.FC<Props> = ({
               </FormGroup>
             </div>
 
+            <FormGroup>
+              <IsPartOfCulturalRouteField formikFieldName="isPartOfCulturalRoute" />
+            </FormGroup>
+
             <div className={styles.rowWith2Columns}>
               <div>
                 <h2>{t('enrolment:enrolmentForm.studyGroup.titleGroup')}</h2>

src/domain/enrolment/enrolmentForm/IsPartOfCulturalRouteField.tsx

@@ -0,0 +1,62 @@
+import { Link } from '@city-of-helsinki/react-helsinki-headless-cms';
+import { useField } from 'formik';
+import { RadioButton, SelectionGroup } from 'hds-react';
+import { Trans, useTranslation } from 'next-i18next';
+import React from 'react';
+
+import { IsPartOfCulturalRoute, nameToLabelPath } from './constants';
+import type { I18nNamespace } from '../../../types';
+
+type Props = {
+  formikFieldName: string;
+};
+
+/**
+ * React component for "Is part of cultural route?" field in the enrolment form,
+ * with choices of "No / I don't know" and "Yes".
+ */
+const IsPartOfCulturalRouteField: React.FC<Props> = ({ formikFieldName }) => {
+  const { t } = useTranslation<I18nNamespace>();
+  const [field, meta] = useField(formikFieldName);
+  const errorText = meta.touched && meta.error ? t(meta.error) : undefined;
+  const readMoreUrl = t('enrolment:enrolmentForm.culturalRoute.readMoreUrl');
+
+  return (
+    <SelectionGroup
+      label={t(nameToLabelPath['isPartOfCulturalRoute'])}
+      direction="horizontal"
+      required
+      aria-required
+      errorText={errorText}
+      /* @ts-expect-error TS2322 SelectionGroup's types allow only string, but Trans works */
+      helperText={
+        <Trans
+          t={t}
+          i18nKey={'enrolment:enrolmentForm.culturalRoute.helperText'}
+          components={{ a: <Link href={readMoreUrl} /> }}
+        />
+      }
+    >
+      <RadioButton
+        id="isPartOfCulturalRoute-noOrUnknown"
+        name={field.name}
+        value={IsPartOfCulturalRoute.NO_OR_UNKNOWN}
+        label={t('enrolment:enrolmentForm.culturalRoute.labelNoOrUnknown')}
+        checked={field.value === IsPartOfCulturalRoute.NO_OR_UNKNOWN}
+        onChange={field.onChange}
+        onBlur={field.onBlur}
+      />
+      <RadioButton
+        id="isPartOfCulturalRoute-yes"
+        name={field.name}
+        value={IsPartOfCulturalRoute.YES}
+        label={t('enrolment:enrolmentForm.culturalRoute.labelYes')}
+        checked={field.value === IsPartOfCulturalRoute.YES}
+        onChange={field.onChange}
+        onBlur={field.onBlur}
+      />
+    </SelectionGroup>
+  );
+};
+
+export default IsPartOfCulturalRouteField;

src/domain/enrolment/enrolmentForm/ValidationSchema.tsx

@@ -1,5 +1,6 @@
 import * as Yup from 'yup';
 
+import { IsPartOfCulturalRoute } from './constants';
 import { VALIDATION_MESSAGE_KEYS } from '../../app/forms/constants';
 
 type EnrolmentFormValidationSchemaProps = {
@@ -14,6 +15,10 @@ export default function getValidationSchema({
   isQueueEnrolment,
 }: EnrolmentFormValidationSchemaProps) {
   return Yup.object().shape({
+    isPartOfCulturalRoute: Yup.string().oneOf(
+      [IsPartOfCulturalRoute.NO_OR_UNKNOWN, IsPartOfCulturalRoute.YES],
+      VALIDATION_MESSAGE_KEYS.STRING_REQUIRED
+    ),
     hasEmailNotification: Yup.bool().oneOf(
       [true],
       'enrolment:enrolmentForm.validation.hasEmailNotification'

src/domain/enrolment/enrolmentForm/__tests__/EnrolmentForm.test.tsx

@@ -23,7 +23,10 @@ import {
   within,
   sleep,
 } from '../../../../utils/testUtils';
-import { defaultEnrolmentInitialValues } from '../constants';
+import {
+  defaultEnrolmentInitialValues,
+  IsPartOfCulturalRoute,
+} from '../constants';
 import EnrolmentForm, { Props } from '../EnrolmentForm';
 
 configure({ defaultHidden: true });
@@ -113,6 +116,14 @@ test('renders form and user can fill it and submit and form is saved to local st
 
   // // close dropdown
 
+  // Answer "Is part of cultural route?" question
+  const culturalRouteGroup = await screen.findByRole('group', {
+    name: /käynti sisältyy kulttuuripolkuun/i,
+  });
+  await userEvent.click(
+    within(culturalRouteGroup).getByRole('radio', { name: /kyllä/i })
+  );
+
   await userEvent.click(screen.getByRole('combobox', { name: /luokka-aste/i }));
 
   await userEvent.type(screen.getByLabelText(/lapsia/i), '10');
@@ -411,6 +422,7 @@ if (isFeatureEnabled('FORMIK_PERSIST')) {
       isSameResponsiblePerson: true,
       isSharingDataAccepted: false,
       isMandatoryAdditionalInformationRequired: false,
+      isPartOfCulturalRoute: IsPartOfCulturalRoute.NO_OR_UNKNOWN,
       language: '',
       studyGroup: {
         person: {
@@ -504,6 +516,23 @@ if (isFeatureEnabled('FORMIK_PERSIST')) {
       expect(
         screen.getByRole('combobox', { name: /luokka-aste/i })
       ).toHaveTextContent('1. luokka');
+
+      // Test that "Is part of cultural route?" question is not answered,
+      // because this field should not be restored from local storage:
+      const culturalRouteGroup = await screen.findByRole('group', {
+        name: /käynti sisältyy kulttuuripolkuun/i,
+      });
+      const isNotPartOfCulturalRoute = within(culturalRouteGroup).getByRole(
+        'radio',
+        { name: /ei \/ en tiedä/i }
+      );
+      const isPartOfCulturalRoute = within(culturalRouteGroup).getByRole(
+        'radio',
+        { name: /kyllä/i }
+      );
+      expect(isNotPartOfCulturalRoute).not.toBeChecked();
+      expect(isPartOfCulturalRoute).not.toBeChecked();
+
       const childrenCountInput = screen.getByRole('spinbutton', {
         name: /lapsia \*/i,
       });

src/domain/enrolment/enrolmentForm/__tests__/__snapshots__/EnrolmentForm.test.tsx.snap

@@ -10,6 +10,7 @@ exports[`renders form and user can fill it and submit and form is saved to local
     "hasEmailNotification": true,
     "hasSmsNotification": false,
     "isMandatoryAdditionalInformationRequired": false,
+    "isPartOfCulturalRoute": "",
     "isSameResponsiblePerson": true,
     "isSharingDataAccepted": false,
     "language": "",
@@ -42,6 +43,7 @@ exports[`renders form and user can fill it and submit and form is saved to local
     "hasEmailNotification": true,
     "hasSmsNotification": true,
     "isMandatoryAdditionalInformationRequired": true,
+    "isPartOfCulturalRoute": true,
     "isSameResponsiblePerson": true,
     "isSharingDataAccepted": true,
     "language": true,
@@ -76,6 +78,7 @@ exports[`renders form and user can fill it and submit and form is saved to local
     "hasEmailNotification": true,
     "hasSmsNotification": true,
     "isMandatoryAdditionalInformationRequired": false,
+    "isPartOfCulturalRoute": "YES",
     "isSameResponsiblePerson": true,
     "isSharingDataAccepted": true,
     "language": "FI",
@@ -112,6 +115,7 @@ exports[`renders form and user can fill it and submit and form is saved to local
     "hasEmailNotification": true,
     "hasSmsNotification": true,
     "isMandatoryAdditionalInformationRequired": false,
+    "isPartOfCulturalRoute": "YES",
     "isSameResponsiblePerson": true,
     "isSharingDataAccepted": true,
     "language": "FI",

src/domain/enrolment/enrolmentForm/constants.ts

@@ -1,10 +1,16 @@
+export const enum IsPartOfCulturalRoute {
+  NO_OR_UNKNOWN = 'NO_OR_UNKNOWN',
+  YES = 'YES',
+}
+
 export type EnrolmentFormFields = {
   hasEmailNotification: boolean;
   hasSmsNotification: boolean;
   isSameResponsiblePerson: boolean;
   isSharingDataAccepted: boolean;
   isMandatoryAdditionalInformationRequired: boolean;
   language: string;
+  isPartOfCulturalRoute: IsPartOfCulturalRoute | '';
   person: {
     name: string;
     phoneNumber: string;
@@ -34,6 +40,7 @@ export const defaultEnrolmentInitialValues: EnrolmentFormFields = {
   isSharingDataAccepted: false,
   isMandatoryAdditionalInformationRequired: false,
   language: '',
+  isPartOfCulturalRoute: '',
   person: {
     name: '',
     phoneNumber: '',
@@ -85,4 +92,5 @@ export const nameToLabelPath: Record<string, string> = {
     'enrolment:enrolmentForm.studyGroup.person.labelPhoneNumber',
   'person.emailAddress':
     'enrolment:enrolmentForm.studyGroup.person.labelEmailAddress',
+  isPartOfCulturalRoute: 'enrolment:enrolmentForm.culturalRoute.labelIsPartOf',
 };