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.

Author: nikomakela

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();
@@ -55,7 +56,11 @@ const EventIsEnrolled = () => {
       </div>
       <h2>{t('event.cancellation.heading')}</h2>
       <div className={styles.cancelButtonWrapper}>
-        <Button variant="secondary" onClick={() => setIsOpen(true)}>
+        <Button
+          variant="secondary"
+          onClick={() => setIsOpen(true)}
+          disabled={!shouldAllowUnenrolment(data.occurrence.time)}
+        >
           {t('event.cancellation.buttonText')}
         </Button>
       </div>

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();
+      }
+    }
+  );
+});