fix: show offer button when event has reg. url without enrolment times

TH-1460.

The offer button for event should be rendered when there is a
registration URL given without enrolment times.

Author: nikomakela

packages/components/src/components/eventHero/EventHero.tsx

@@ -59,13 +59,10 @@ export type EventHeroProps = {
  * remaining capacity for attendees, or if a waiting list exists and it has
  * available spots.
  *
- * @param {EventHeroProps['event']} event - The event object containing
- *  details about attendee and waiting list capacities.
- * @param {boolean} enrolmentFormAvailableBeforeHand - handle enrolment as open when it has not started yet.
  * @returns {boolean} Returns `true` if enrolment is open
  *  (either for direct attendance or the waiting list), otherwise `false`.
  */
-export const useIsEnrolmentOpen = (
+export const getIsEnrolmentOpen = (
   event?: EventHeroProps['event'],
   superEvent?: EventHeroProps['superEvent'],
   enrolmentFormAvailableBeforeHand = false
@@ -188,6 +185,40 @@ const EventPriceInfo: React.FC<Pick<EventHeroProps, 'event'>> = ({ event }) => {
   );
 };
 
+/**
+ * Determines whether the enrolment or registration button should be displayed.
+ *
+ * The button is shown if:
+ * 1. An **external registration URL** is provided, AND there is **no enrolment start time** specified
+ * (e.g., direct ticket link).
+ * OR
+ * 2. An **external registration URL** is provided, AND **enrolment is currently open**.
+ *
+ * @param {object} params - The event enrolment and registration details.
+ * @returns {boolean} True if the enrolment/registration button should be visible, otherwise false.
+ */
+function getShouldShowEnrolmentButton({
+  externalRegistrationUrl,
+  isEnrolmentOpen,
+  enrolmentStartTime,
+}: {
+  externalRegistrationUrl?: string | null;
+  isEnrolmentOpen: boolean;
+  enrolmentStartTime?: string | null;
+}): boolean {
+  // NOTE: Shows the button for direct registration links without an explicit enrolment period.
+  const hasRegistrationUrlWithoutEnrolmentTime =
+    externalRegistrationUrl && !enrolmentStartTime;
+  // NOTE: Shows the button when registration is open and a URL is provided.
+  const hasRegistrationUrlAndEnrolmentIsOpen =
+    externalRegistrationUrl && isEnrolmentOpen;
+
+  return Boolean(
+    hasRegistrationUrlWithoutEnrolmentTime ||
+      hasRegistrationUrlAndEnrolmentIsOpen
+  );
+}
+
 export const OfferButton: React.FC<
   Pick<EventHeroProps, 'event' | 'superEvent'>
 > = ({ event, superEvent }) => {
@@ -199,12 +230,27 @@ export const OfferButton: React.FC<
 
   // NOTE: Should something else than offerInfoURl be used here?
   // E.g. event?.registration?.signupUrl? or registration link from from event?.externalLinks?.
-  const { offerInfoUrl: externalRegistrationUrl } = getEventFields(
+  const { offerInfoUrl, registrationUrl, enrolmentStartTime } = getEventFields(
     event,
     locale
   );
+  const externalRegistrationUrl = offerInfoUrl || registrationUrl;
 
-  const shouldShowEnrolmentButton = useIsEnrolmentOpen(event, superEvent, true);
+  const isEnrolmentOpen = getIsEnrolmentOpen(event, superEvent, true);
+
+  if (superEvent?.status === 'pending') {
+    return <SkeletonLoader />;
+  }
+
+  const shouldShowEnrolmentButton = getShouldShowEnrolmentButton({
+    externalRegistrationUrl,
+    isEnrolmentOpen,
+    enrolmentStartTime,
+  });
+
+  if (!externalRegistrationUrl || !shouldShowEnrolmentButton) {
+    return null;
+  }
 
   const buttonText = getEventHeroButtonText(
     event,
@@ -219,14 +265,6 @@ export const OfferButton: React.FC<
     superEvent?.data ?? undefined
   );
 
-  if (superEvent?.status === 'pending') {
-    return <SkeletonLoader />;
-  }
-
-  if (!externalRegistrationUrl || !shouldShowEnrolmentButton) {
-    return null;
-  }
-
   return (
     <div className={styles.registrationButtonWrapper}>
       <Button

packages/components/src/components/eventHero/__tests__/enrolment.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, renderHook } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 import {
   endOfTomorrow,
@@ -15,7 +15,7 @@ import * as GetEventEnrolmentStatus from '../../../utils/getEventEnrolmentStatus
 import EventHero, {
   EnrolmentStatusInfo,
   OfferButton,
-  useIsEnrolmentOpen,
+  getIsEnrolmentOpen,
 } from '../EventHero';
 
 vi.mock('react-helsinki-headless-cms', async (importOriginal) => ({
@@ -89,22 +89,20 @@ afterAll(() => {
   vi.restoreAllMocks();
 });
 
-describe('useIsEnrolmentOpen', () => {
+describe('getIsEnrolmentOpen', () => {
   it('should return false if event is not defined', () => {
-    const { result } = renderHook(() => useIsEnrolmentOpen(undefined));
-    expect(result.current).toBe(false);
+    const result = getIsEnrolmentOpen(undefined);
+    expect(result).toBe(false);
   });
 
   it('should return false if registration is not defined', () => {
-    const { result } = renderHook(() =>
-      useIsEnrolmentOpen({
-        ...baseEvent,
-        registration: undefined,
-        enrolmentEndTime: undefined,
-        enrolmentStartTime: undefined,
-      })
-    );
-    expect(result.current).toBe(false);
+    const result = getIsEnrolmentOpen({
+      ...baseEvent,
+      registration: undefined,
+      enrolmentEndTime: undefined,
+      enrolmentStartTime: undefined,
+    });
+    expect(result).toBe(false);
   });
 
   it('should return true if remainingAttendeeCapacity is greater than 0', () => {
@@ -116,8 +114,8 @@ describe('useIsEnrolmentOpen', () => {
         remainingAttendeeCapacity: 10,
       },
     };
-    const { result } = renderHook(() => useIsEnrolmentOpen(event));
-    expect(result.current).toBe(true);
+    const result = getIsEnrolmentOpen(event);
+    expect(result).toBe(true);
   });
 
   it('should return true event with waiting list capacity and remainingWaitingListCapacity is greater than 0', () => {
@@ -129,8 +127,8 @@ describe('useIsEnrolmentOpen', () => {
         remainingWaitingListCapacity: 5,
       },
     };
-    const { result } = renderHook(() => useIsEnrolmentOpen(event));
-    expect(result.current).toBe(true);
+    const result = getIsEnrolmentOpen(event);
+    expect(result).toBe(true);
   });
 
   it('should return true if event is queueable', () => {
@@ -145,8 +143,8 @@ describe('useIsEnrolmentOpen', () => {
       },
     };
 
-    const { result } = renderHook(() => useIsEnrolmentOpen(event));
-    expect(result.current).toBe(true);
+    const result = getIsEnrolmentOpen(event);
+    expect(result).toBe(true);
   });
 
   it('should return false if both remaining capacities are 0', () => {
@@ -158,8 +156,8 @@ describe('useIsEnrolmentOpen', () => {
         remainingWaitingListCapacity: 0,
       },
     };
-    const { result } = renderHook(() => useIsEnrolmentOpen(event));
-    expect(result.current).toBe(false);
+    const result = getIsEnrolmentOpen(event);
+    expect(result).toBe(false);
   });
 
   it.each([
@@ -176,10 +174,13 @@ describe('useIsEnrolmentOpen', () => {
           remainingAttendeeCapacity: 10,
         },
       };
-      const { result } = renderHook(() =>
-        useIsEnrolmentOpen(event, undefined, enrolmentFormAvailableBeforeHand)
+      const result = getIsEnrolmentOpen(
+        event,
+        undefined,
+        enrolmentFormAvailableBeforeHand
       );
-      expect(result.current).toBe(expectedResult);
+
+      expect(result).toBe(expectedResult);
     }
   );
 
@@ -245,7 +246,31 @@ describe('OfferButton', () => {
     ).toBeInTheDocument();
   });
 
-  it('should not render if offerInfoUrl exists but enrolment is not open', () => {
+  it('should render when offerInfoUrl exists and enrolment time is not given', () => {
+    const eventWithClosedEnrolment: EventFields = {
+      ...baseEvent,
+      offers: [
+        { isFree: false, price: null, infoUrl: { fi: 'https://hel.fi' } },
+      ],
+      registration: {
+        ...baseEvent.registration,
+        remainingAttendeeCapacity: 0,
+        waitingListCapacity: 0,
+        remainingWaitingListCapacity: 0,
+      },
+      enrolmentStartTime: undefined,
+    };
+
+    const { container } = render(
+      <OfferButton event={eventWithClosedEnrolment} />
+    );
+    expect(container).not.toBeEmptyDOMElement();
+    expect(
+      screen.getByRole('button', { name: 'hero.ariaLabelEnrol' })
+    ).toBeInTheDocument();
+  });
+
+  it('should not render if offerInfoUrl exists, enrolment time is given, but enrolment is not open', () => {
     const eventWithClosedEnrolment: EventFields = {
       ...baseEvent,
       offers: [
@@ -257,6 +282,7 @@ describe('OfferButton', () => {
         waitingListCapacity: 0,
         remainingWaitingListCapacity: 0,
       },
+      enrolmentStartTime: startOfYesterday().toISOString(),
     };
 
     const { container } = render(