feat: unenrolment should be available only over 48h before occurrence

KK-1436.

Add `AppConfig.enrolmentCancellationTimeLimitHours` that can be used to
configure the time (in hours) that limits the cancellation time.

Add description texts related to enrolment cancellation.

Author: nikomakela

src/common/translation/i18n/en.json

@@ -293,7 +293,7 @@
       },
       "description": {
         "full": "Unfortunately this event is full. Subscribe to receive a notification of available places.",
-        "text": "Check that the information below is correct for the event you wish to attend."
+        "text": "Check that the information below is correct for the event you wish to attend.\n Please note that registration is binding and in the event of an unfortunate cancellation, cancellation must be made no later than {{unerolHoursBeforeOccurrence}} hours before the event date."
       },
       "heading": {
         "full": "Registration for event {{eventName}} failed",
@@ -324,6 +324,10 @@
     "successToast": {
       "heading": "Registration for event successful",
       "paragraph": "We sent you a confirmation message by email where you can find more information about the event"
+    },
+    "cancellation": {
+      "enabledDescription": "You can cancel your registration for an event if you are unable to attend. Cancellations must be made no later than {{unerolHoursBeforeOccurrence}} hours before the event.",
+      "disabledDescription": "Unfortunately, you cannot cancel your registration for this event, as cancellations must be made no later than {{unerolHoursBeforeOccurrence}} hours before the event."
     }
   },
   "enrollPage": {

src/common/translation/i18n/fi.json

@@ -293,7 +293,7 @@
       },
       "description": {
         "full": "Valitettavasti tämä tapahtuma on täynnä. Tilaa ilmoitus vapautuvista paikoista.",
-        "text": "Tarkista, että alla olevat tiedot vastaavat tapahtumaa, johon haluat osallistua."
+        "text": "Tarkista, että alla olevat tiedot vastaavat tapahtumaa, johon haluat osallistua.\n Huomaathan, että ilmoittautuminen on sitova ja ikävän estymisen sattuessa, ilmoittautumisen peruminen on tehtävä viimeistään {{unerolHoursBeforeOccurrence}} tuntia ennen tapahtuma-ajankohtaa."
       },
       "heading": {
         "full": "Ilmottautumien tapahtumaan {{eventName}} epäonnistui",
@@ -324,6 +324,10 @@
     "successToast": {
       "heading": "Tapahtumaan ilmoittautuminen onnistui!",
       "paragraph": "Lähetimme varmistusviestin sähköpostiisi, löydät sieltä tapahtuman lisätiedot"
+    },
+    "cancellation": {
+      "enabledDescription": "Voit perua ilmoittautumisesi tapahtumaan, jos et pääsekään osallistumaan. Peruminen on tehtävä viimeistään {{unerolHoursBeforeOccurrence}} tuntia ennen tapahtuma-ajankohtaa.",
+      "disabledDescription": "Valitettavasti et voi perua ilmoittautumista tähän tapahtumaan, sillä perumiset on tehtävä {{unerolHoursBeforeOccurrence}} tuntia ennen tapahtumaa."
     }
   },
   "enrollPage": {

src/common/translation/i18n/sv.json

@@ -293,7 +293,7 @@
       },
       "description": {
         "full": "Tyvärr är det här evenemanget fullt. Prenumerera för att få ett meddelande om tillgängliga platser.",
-        "text": "Kontrollera att informationen nedan motsvarar de evenemang du vill delta i."
+        "text": "Kontrollera att informationen nedan motsvarar de evenemang du vill delta i.\n Observera att anmälan är bindande och vid olycklig avbokning måste avbokning göras senast {{unerolHoursBeforeOccurrence}} timmar före evenemangsdatumet."
       },
       "heading": {
         "full": "Registreringen för händelsen {{eventName}} misslyckades",
@@ -324,6 +324,10 @@
     "successToast": {
       "heading": "Din anmälan till evenemanget lyckades!",
       "paragraph": "Vi skickade en bekräftelse till din epost, den innehåller mer information om evenemanget"
+    },
+    "cancellation": {
+      "enabledDescription": "Du kan avboka din registrering för ett evenemang om du inte kan delta. Avbokningar måste göras senast {{unerolHoursBeforeOccurrence}} timmar före evenemanget.",
+      "disabledDescription": "Tyvärr kan du inte avboka din registrering för detta evenemang, eftersom avbokningar måste göras senast {{unerolHoursBeforeOccurrence}} timmar före evenemanget."
     }
   },
   "enrollPage": {

src/domain/app/AppConfig.ts

@@ -304,6 +304,17 @@ class AppConfig {
   static get datetimeFormat() {
     return 'dd.MM.yyyy HH:mm:ss';
   }
+
+  /**
+   * Time limit in hours for cancelling an enrolment.
+   * This is the time before the event occurrence when a user can no longer cancel their enrolment.
+   * Read env variable `VITE_ENROLMENT_CANCELLATION_TIME_LIMIT_HOURS`. Defaults to 48 hours if not set.
+   */
+  static get enrolmentCancellationTimeLimitHours() {
+    return (
+      Number(import.meta.env.VITE_ENROLMENT_CANCELLATION_TIME_LIMIT_HOURS) || 48
+    ); // Default to 48 hours if not set
+  }
 }
 
 // Accept both variable and name so that variable can be correctly replaced

src/domain/event/EventIsEnrolled.tsx

@@ -16,6 +16,7 @@ import EventPage from './EventPage';
 import ErrorMessage from '../../common/components/error/Error';
 import Button from '../../common/components/button/Button';
 import useChildRouteGoBackTo from '../profile/children/child/useChildRouteGoBackTo';
+import { shouldAllowUnenrolment } from './EventUtils';
 
 const EventIsEnrolled = () => {
   const { t } = useTranslation();
@@ -39,6 +40,8 @@ const EventIsEnrolled = () => {
 
   if (!data?.occurrence) return errorMessage;
 
+  const disableUnenrolling = !shouldAllowUnenrolment(data.occurrence.time);
+
   return (
     <EventPage event={data.occurrence.event} backTo={goBackTo}>
       <OccurrenceInfo
@@ -54,13 +57,28 @@ const EventIsEnrolled = () => {
         )}
       </div>
       <h2>{t('event.cancellation.heading')}</h2>
+      <p id="eventCancellationDescription">
+        {disableUnenrolling
+          ? t('enrollment.cancellation.disabledDescription', {
+              unerolHoursBeforeOccurrence: 48,
+            })
+          : t('enrollment.cancellation.enabledDescription', {
+              unerolHoursBeforeOccurrence: 48,
+            })}
+      </p>
       <div className={styles.cancelButtonWrapper}>
-        <Button variant="secondary" onClick={() => setIsOpen(true)}>
+        <Button
+          id="unenrolButton"
+          variant="secondary"
+          aria-describedby="eventCancellationDescription"
+          onClick={() => setIsOpen(true)}
+          disabled={disableUnenrolling}
+        >
           {t('event.cancellation.buttonText')}
         </Button>
       </div>
       <VenueFeatures venue={data.occurrence.venue} />
-      {isOpen && (
+      {isOpen && !disableUnenrolling && (
         <UnenrolModal
           isOpen={isOpen}
           setIsOpen={setIsOpen}

src/domain/event/EventUtils.tsx

@@ -1,6 +1,7 @@
 import { IconGroup } from 'hds-react';
 import { addMinutes } from 'date-fns/addMinutes';
 import uniqBy from 'lodash/uniqBy';
+import { differenceInHours } from 'date-fns/differenceInHours';
 
 import { formatTime, newDate } from '../../common/time/utils';
 import {
@@ -11,6 +12,7 @@ import {
 import { EventParticipantsPerInvite as EventParticipantsPerInviteEnum } from '../api/generatedTypes/graphql';
 import RelayList from '../api/relayList';
 import { OccurrenceNode, Occurrences } from './types/EventQueryTypes';
+import AppConfig from '../app/AppConfig';
 
 const OccurrenceList = RelayList<OccurrenceNode>();
 
@@ -66,3 +68,20 @@ export function getParticipantsIcon(iconType: EventParticipantsPerInviteEnum) {
       return <IconGroup />;
   }
 }
+
+/**
+ * Should the user be allowed to unenrol from an event occurrence?
+ * This function checks if the current time is at least
+ * `AppConfig.enrolmentCancellationTimeLimitHours` (e.g. 48) hours
+ * before the occurrence time. If it is, the user can unenrol;
+ * otherwise, they cannot.
+ */
+export const shouldAllowUnenrolment = (
+  occurrenceTime: Date,
+  enrolmentCancellationTimeLimitHours = AppConfig.enrolmentCancellationTimeLimitHours
+) => {
+  const hoursDiff = differenceInHours(occurrenceTime, new Date(), {
+    roundingMethod: 'ceil',
+  });
+  return Boolean(hoursDiff >= enrolmentCancellationTimeLimitHours);
+};

src/domain/event/__tests__/EventIsEnrolled.test.tsx

@@ -1,8 +1,14 @@
 import { MockedResponse } from '@apollo/client/testing';
+import { screen } from '@testing-library/react';
+import range from 'lodash/range';
 
 import { customRender as render } from '../../../common/test/customRender';
 import EventIsEnrolled from '../EventIsEnrolled';
 import occurrenceQuery from '../queries/occurrenceQuery';
+import {
+  EventParticipantsPerInvite,
+  OccurrenceQuery,
+} from '../../api/generatedTypes/graphql';
 
 const emptyOccurrenceMock: MockedResponse = {
   request: {
@@ -16,9 +22,81 @@ const emptyOccurrenceMock: MockedResponse = {
   },
 };
 
-const mocks: MockedResponse[] = [emptyOccurrenceMock];
+const occurrenceMock: OccurrenceQuery = {
+  occurrence: {
+    __typename: 'OccurrenceNode',
+    id: 'occurrence-id',
+    time: new Date(Date.now() + 48 * 60 * 60 * 1000),
+    event: {
+      __typename: 'EventNode',
+      id: 'event-id',
+      description: 'event description',
+      image: '',
+      imageAltText: null,
+      shortDescription: null,
+      name: null,
+      duration: null,
+      participantsPerInvite: EventParticipantsPerInvite.ChildAndGuardian,
+      eventGroup: null,
+    },
+    remainingCapacity: null,
+    childHasFreeSpotNotificationSubscription: null,
+    venue: {
+      __typename: 'VenueNode',
+      id: '',
+      name: null,
+      address: null,
+      accessibilityInfo: null,
+      arrivalInstructions: null,
+      additionalInfo: null,
+      wwwUrl: null,
+      wcAndFacilities: null,
+    },
+  },
+};
 
 it('renders snapshot correctly', () => {
-  const { container } = render(<EventIsEnrolled />, mocks);
+  const { container } = render(<EventIsEnrolled />, [emptyOccurrenceMock]);
   expect(container).toMatchSnapshot();
 });
+
+describe('unenrolment is possible only 48 before the occurrence', async () => {
+  it.each(
+    range(46, 50).map((hoursBeforeOccurrence) => ({
+      hoursBeforeOccurrence,
+      isCancellationAvailable: hoursBeforeOccurrence >= 48,
+    }))
+  )(
+    // eslint-disable-next-line max-len
+    'shows unenrolment button enabled when occurrence is in $hoursBeforeOccurrence hours ($isCancellationAvailable)',
+    async ({ hoursBeforeOccurrence, isCancellationAvailable }) => {
+      const occurrenceQueryMock: MockedResponse = {
+        request: {
+          query: occurrenceQuery,
+          variables: { id: undefined, childId: undefined },
+        },
+        result: {
+          data: {
+            ...occurrenceMock,
+            occurrence: {
+              ...occurrenceMock.occurrence,
+              time: new Date(
+                Date.now() + hoursBeforeOccurrence * 60 * 60 * 1000
+              ),
+            },
+          },
+        },
+      };
+      render(<EventIsEnrolled />, [occurrenceQueryMock]);
+      await screen.findByText('event description');
+      const unenrolButton = await screen.findByRole('button', {
+        name: 'Peru ilmoittautuminen',
+      });
+      if (isCancellationAvailable) {
+        expect(unenrolButton).toBeEnabled();
+      } else {
+        expect(unenrolButton).toBeDisabled();
+      }
+    }
+  );
+});

src/domain/event/enrol/Enrol.tsx

@@ -6,6 +6,8 @@ import OccurrenceInfo from '../partial/OccurrenceInfo';
 import Button from '../../../common/components/button/Button';
 import EventOccurrenceNotificationControlButton from '../EventOccurrenceNotificationControlButton';
 import { OccurrenceFields } from '../types/OccurrenceQueryTypes';
+import AppConfig from '../../app/AppConfig';
+import Paragraph from '../../../common/components/paragraph/Paragraph';
 
 type Props = {
   childId: string;
@@ -46,8 +48,16 @@ const Enrol = ({
           </h1>
         </div>
         <div className={styles.text}>
-          {!isFull && t('enrollment.confirmationPage.description.text')}
-          {isFull && t('enrollment.confirmationPage.description.full')}
+          <Paragraph
+            text={
+              !isFull
+                ? t('enrollment.confirmationPage.description.text', {
+                    unerolHoursBeforeOccurrence:
+                      AppConfig.enrolmentCancellationTimeLimitHours,
+                  })
+                : t('enrollment.confirmationPage.description.full')
+            }
+          />
         </div>
         <OccurrenceInfo
           occurrence={occurrence}

src/domain/event/modal/UnenrolModal.tsx

@@ -88,7 +88,13 @@ const UnenrolModal = ({
       cancel={t('event.cancellation.confirmationModal.cancel.buttonText')}
       ok={t('event.cancellation.confirmationModal.confirm.buttonText')}
       answer={confirmUnenrol}
-    />
+    >
+      <p>
+        {t('enrollment.cancellation.enabledDescription', {
+          unerolHoursBeforeOccurrence: 48,
+        })}
+      </p>
+    </ConfirmModal>
   );
 };