feat: add feature flag for for enrolment status usage

HH-283
City-of-Helsinki · Feb 6, 2023 · 10301e0 · 10301e0
1 parent 1178c37
commit 10301e0
Show file tree

Hide file tree

Showing 18 changed files with 156 additions and 82 deletions.
diff --git a/apps/events-helsinki/.env.local.example b/apps/events-helsinki/.env.local.example
@@ -26,4 +26,5 @@ NEXTJS_DISABLE_SENTRY="true"
 NEXTJS_DEBUG_I18N="true"
 NEXT_PUBLIC_ALLOW_UNAUTHORIZED_REQUESTS="true"
 DOCKER_BUILDKIT="true"
-NEXT_PUBLIC_SHOW_SIMILAR_EVENTS="true"
+NEXT_PUBLIC_SHOW_SIMILAR_EVENTS="true"
+NEXT_PUBLIC_SHOW_ENROLMENT_STATUS_IN_CARD_DETAILS="false"
diff --git a/apps/events-helsinki/src/domain/app/AppConfig.ts b/apps/events-helsinki/src/domain/app/AppConfig.ts
@@ -101,6 +101,15 @@ class AppConfig {
     );
   }
 
+  static get showEnrolmentStatusInCardDetails() {
+    return Boolean(
+      parseEnvValue(
+        process.env.NEXT_PUBLIC_SHOW_ENROLMENT_STATUS_IN_CARD_DETAILS,
+        false
+      )
+    );
+  }
+
   static get URLRewriteMapping() {
     return {
       [AppConfig.linkedEventsEventEndpoint]: ROUTES.EVENTS.replace(

diff --git a/apps/events-helsinki/src/domain/event/eventCard/LargeEventCard.tsx b/apps/events-helsinki/src/domain/event/eventCard/LargeEventCard.tsx
@@ -30,6 +30,7 @@ import React from 'react';
 import { BackgroundImage, LinkBox } from 'react-helsinki-headless-cms';
 import { ROUTES } from '../../../constants';
 import routerHelper from '../../../domain/app/routerHelper';
+import AppConfig from '../../app/AppConfig';
 import EventKeywords from '../eventKeywords/EventKeywords';
 import EventName from '../eventName/EventName';
 import styles from './largeEventCard.module.scss';
@@ -192,13 +193,15 @@ const LargeEventCard: React.FC<Props> = ({ event }) => {
                   size="l"
                   aria-hidden="true"
                 />
-                <EventEnrolmentStatus
-                  event={event}
-                  className={classNames(styles.linkArrowLabel, {
-                    [styles.alert]:
-                      eventEnrolmentStatus === EnrolmentStatusLabel.full,
-                  })}
-                />
+                {AppConfig.showEnrolmentStatusInCardDetails && (
+                  <EventEnrolmentStatus
+                    event={event}
+                    className={classNames(styles.linkArrowLabel, {
+                      [styles.alert]:
+                        eventEnrolmentStatus === EnrolmentStatusLabel.full,
+                    })}
+                  />
+                )}
               </div>
             )}
           </div>

diff --git a/apps/events-helsinki/src/hooks/useRHHCConfig.tsx b/apps/events-helsinki/src/hooks/useRHHCConfig.tsx
@@ -1,8 +1,10 @@
 /* eslint-disable @typescript-eslint/naming-convention */
+import type { EventFieldsFragment } from 'events-helsinki-components';
 import {
   getLinkArrowLabel,
   useLocale,
   useCommonTranslation,
+  useEventTranslation,
   MAIN_CONTENT_ID,
   useCommonCmsConfig,
 } from 'events-helsinki-components';
@@ -35,6 +37,7 @@ const LINKEDEVENTS_API_EVENT_ENDPOINT = new URL(
 export default function useRHHCConfig() {
   const apolloClient = useApolloClient();
   const { t: commonTranslation } = useCommonTranslation();
+  const { t: eventTranslation } = useEventTranslation();
   const locale = useLocale();
   const commonConfig = useCommonCmsConfig();
   return React.useMemo(() => {
@@ -78,10 +81,17 @@ export default function useRHHCConfig() {
       venuesApolloClient: apolloClient,
       utils: {
         ...rhhcDefaultConfig.utils,
-        getEventCardProps: {
-          ...rhhcDefaultConfig.utils.getEventCardProps,
-          getLinkArrowLabel,
-        },
+        getEventCardProps: AppConfig.showEnrolmentStatusInCardDetails
+          ? (item: EventFieldsFragment, locale: string) => ({
+              ...rhhcDefaultConfig.utils.getEventCardProps(item, locale),
+              getLinkArrowLabel: getLinkArrowLabel({
+                item,
+                locale,
+                eventTranslation,
+                commonTranslation,
+              }),
+            })
+          : rhhcDefaultConfig.utils.getEventCardProps,
         getRoutedInternalHref: (
           link: string,
           _type: ModuleItemTypeEnum
@@ -102,5 +112,5 @@ export default function useRHHCConfig() {
       },
       internalHrefOrigins,
     } as unknown as Config;
-  }, [commonConfig, commonTranslation, locale, apolloClient]);
+  }, [commonConfig, commonTranslation, eventTranslation, locale, apolloClient]);
 }
diff --git a/apps/hobbies-helsinki/.env.local.example b/apps/hobbies-helsinki/.env.local.example
@@ -26,4 +26,5 @@ NEXTJS_DISABLE_SENTRY="true"
 NEXTJS_DEBUG_I18N="true"
 NEXT_PUBLIC_ALLOW_UNAUTHORIZED_REQUESTS="true"
 DOCKER_BUILDKIT="true"
-NEXT_PUBLIC_SHOW_SIMILAR_EVENTS="true"
+NEXT_PUBLIC_SHOW_SIMILAR_EVENTS="true"
+NEXT_PUBLIC_SHOW_ENROLMENT_STATUS_IN_CARD_DETAILS="false"
diff --git a/apps/hobbies-helsinki/src/domain/app/AppConfig.ts b/apps/hobbies-helsinki/src/domain/app/AppConfig.ts
@@ -102,6 +102,15 @@ class AppConfig {
     );
   }
 
+  static get showEnrolmentStatusInCardDetails() {
+    return Boolean(
+      parseEnvValue(
+        process.env.NEXT_PUBLIC_SHOW_ENROLMENT_STATUS_IN_CARD_DETAILS,
+        false
+      )
+    );
+  }
+
   static get URLRewriteMapping() {
     return {
       [AppConfig.linkedEventsEventEndpoint]: ROUTES.COURSES.replace(

diff --git a/apps/hobbies-helsinki/src/domain/event/eventCard/LargeEventCard.tsx b/apps/hobbies-helsinki/src/domain/event/eventCard/LargeEventCard.tsx
@@ -29,6 +29,7 @@ import { useTranslation } from 'next-i18next';
 import React from 'react';
 import { BackgroundImage, LinkBox } from 'react-helsinki-headless-cms';
 import { ROUTES } from '../../../constants';
+import AppConfig from '../../app/AppConfig';
 import routerHelper from '../../app/routerHelper';
 import EventKeywords from '../eventKeywords/EventKeywords';
 import EventName from '../eventName/EventName';
@@ -192,13 +193,15 @@ const LargeEventCard: React.FC<Props> = ({ event }) => {
                   size="l"
                   aria-hidden="true"
                 />
-                <EventEnrolmentStatus
-                  event={event}
-                  className={classNames(styles.linkArrowLabel, {
-                    [styles.alert]:
-                      eventEnrolmentStatus === EnrolmentStatusLabel.full,
-                  })}
-                />
+                {AppConfig.showEnrolmentStatusInCardDetails && (
+                  <EventEnrolmentStatus
+                    event={event}
+                    className={classNames(styles.linkArrowLabel, {
+                      [styles.alert]:
+                        eventEnrolmentStatus === EnrolmentStatusLabel.full,
+                    })}
+                  />
+                )}
               </div>
             )}
           </div>

diff --git a/apps/hobbies-helsinki/src/hooks/useRHHCConfig.tsx b/apps/hobbies-helsinki/src/hooks/useRHHCConfig.tsx
@@ -1,12 +1,13 @@
 /* eslint-disable @typescript-eslint/naming-convention */
+import type { EventFieldsFragment } from 'events-helsinki-components';
 import {
   getLinkArrowLabel,
   useLocale,
   useCommonTranslation,
+  useEventTranslation,
   MAIN_CONTENT_ID,
   useCommonCmsConfig,
 } from 'events-helsinki-components';
-
 import Head from 'next/head';
 import Link from 'next/link';
 import React from 'react';
@@ -37,6 +38,7 @@ const LINKEDEVENTS_API_EVENT_ENDPOINT = new URL(
 export default function useRHHCConfig() {
   const apolloClient = useApolloClient();
   const { t: commonTranslation } = useCommonTranslation();
+  const { t: eventTranslation } = useEventTranslation();
   const locale = useLocale();
   const commonConfig = useCommonCmsConfig();
 
@@ -81,10 +83,17 @@ export default function useRHHCConfig() {
       venuesApolloClient: apolloClient,
       utils: {
         ...rhhcDefaultConfig.utils,
-        getEventCardProps: {
-          ...rhhcDefaultConfig.utils.getEventCardProps,
-          getLinkArrowLabel,
-        },
+        getEventCardProps: AppConfig.showEnrolmentStatusInCardDetails
+          ? (item: EventFieldsFragment, locale: string) => ({
+              ...rhhcDefaultConfig.utils.getEventCardProps(item, locale),
+              linkArrowLabel: getLinkArrowLabel({
+                item,
+                locale,
+                eventTranslation,
+                commonTranslation,
+              }),
+            })
+          : rhhcDefaultConfig.utils.getEventCardProps,
         getRoutedInternalHref: (
           link: string,
           _type: ModuleItemTypeEnum
@@ -105,5 +114,5 @@ export default function useRHHCConfig() {
       },
       internalHrefOrigins,
     } as unknown as Config;
-  }, [commonConfig, commonTranslation, locale, apolloClient]);
+  }, [commonConfig, commonTranslation, eventTranslation, locale, apolloClient]);
 }
diff --git a/apps/sports-helsinki/.env.local.example b/apps/sports-helsinki/.env.local.example
@@ -28,4 +28,5 @@ NEXT_PUBLIC_ALLOW_UNAUTHORIZED_REQUESTS="true"
 DOCKER_BUILDKIT="true"
 NEXT_PUBLIC_SHOW_SIMILAR_EVENTS="true"
 NEXT_PUBLIC_SHOW_SIMILAR_VENUES="true"
-NEXT_PUBLIC_SHOW_VENUES_UPCOMING_EVENTS="true"
+NEXT_PUBLIC_SHOW_VENUES_UPCOMING_EVENTS="true"
+NEXT_PUBLIC_SHOW_ENROLMENT_STATUS_IN_CARD_DETAILS="false"
diff --git a/apps/sports-helsinki/src/domain/app/AppConfig.ts b/apps/sports-helsinki/src/domain/app/AppConfig.ts
@@ -114,6 +114,15 @@ class AppConfig {
     );
   }
 
+  static get showEnrolmentStatusInCardDetails() {
+    return Boolean(
+      parseEnvValue(
+        process.env.NEXT_PUBLIC_SHOW_ENROLMENT_STATUS_IN_CARD_DETAILS,
+        false
+      )
+    );
+  }
+
   static get URLRewriteMapping() {
     return {
       [AppConfig.linkedEventsEventEndpoint]: ROUTES.COURSES.replace(

diff --git a/apps/sports-helsinki/src/domain/event/eventCard/LargeEventCard.tsx b/apps/sports-helsinki/src/domain/event/eventCard/LargeEventCard.tsx
@@ -30,6 +30,7 @@ import React from 'react';
 import { BackgroundImage, LinkBox } from 'react-helsinki-headless-cms';
 import { ROUTES } from '../../../constants';
 import routerHelper from '../../../domain/app/routerHelper';
+import AppConfig from '../../app/AppConfig';
 import { PARAM_SEARCH_TYPE } from '../../search/combinedSearch/constants';
 import EventKeywords from '../eventKeywords/EventKeywords';
 import EventName from '../eventName/EventName';
@@ -194,13 +195,15 @@ const LargeEventCard: React.FC<Props> = ({ event }) => {
                   size="l"
                   aria-hidden="true"
                 />
-                <EventEnrolmentStatus
-                  event={event}
-                  className={classNames(styles.linkArrowLabel, {
-                    [styles.alert]:
-                      eventEnrolmentStatus === EnrolmentStatusLabel.full,
-                  })}
-                />
+                {AppConfig.showEnrolmentStatusInCardDetails && (
+                  <EventEnrolmentStatus
+                    event={event}
+                    className={classNames(styles.linkArrowLabel, {
+                      [styles.alert]:
+                        eventEnrolmentStatus === EnrolmentStatusLabel.full,
+                    })}
+                  />
+                )}
               </div>
             )}
           </div>

diff --git a/apps/sports-helsinki/src/hooks/useRHHCConfig.tsx b/apps/sports-helsinki/src/hooks/useRHHCConfig.tsx
@@ -1,8 +1,10 @@
 /* eslint-disable @typescript-eslint/naming-convention */
+import type { EventFieldsFragment } from 'events-helsinki-components';
 import {
   getLinkArrowLabel,
   useLocale,
   useCommonTranslation,
+  useEventTranslation,
   MAIN_CONTENT_ID,
   useCommonCmsConfig,
 } from 'events-helsinki-components';
@@ -35,6 +37,7 @@ const LINKEDEVENTS_API_EVENT_ENDPOINT = new URL(
 export default function useRHHCConfig() {
   const apolloClient = useApolloClient();
   const { t: commonTranslation } = useCommonTranslation();
+  const { t: eventTranslation } = useEventTranslation();
   const locale = useLocale();
   const commonConfig = useCommonCmsConfig();
 
@@ -79,10 +82,17 @@ export default function useRHHCConfig() {
       venuesApolloClient: apolloClient,
       utils: {
         ...rhhcDefaultConfig.utils,
-        getEventCardProps: {
-          ...rhhcDefaultConfig.utils.getEventCardProps,
-          getLinkArrowLabel,
-        },
+        getEventCardProps: AppConfig.showEnrolmentStatusInCardDetails
+          ? (item: EventFieldsFragment, locale: string) => ({
+              ...rhhcDefaultConfig.utils.getEventCardProps(item, locale),
+              getLinkArrowLabel: getLinkArrowLabel({
+                item,
+                locale,
+                eventTranslation,
+                commonTranslation,
+              }),
+            })
+          : rhhcDefaultConfig.utils.getEventCardProps,
         getRoutedInternalHref: (
           link: string,
           _type: ModuleItemTypeEnum
@@ -103,5 +113,5 @@ export default function useRHHCConfig() {
       },
       internalHrefOrigins,
     } as unknown as Config;
-  }, [commonConfig, commonTranslation, locale, apolloClient]);
+  }, [commonConfig, commonTranslation, eventTranslation, locale, apolloClient]);
 }
diff --git a/packages/components/src/components/domain/event/eventEnrolmentStatus/index.tsx b/packages/components/src/components/domain/event/eventEnrolmentStatus/index.tsx
@@ -1,5 +1,2 @@
 export { default as EventEnrolmentStatus } from './EventEnrolmentStatus';
-export {
-  default as useEventEnrolmentStatus,
-  getEnrolmentStatus,
-} from './useEventEnrolmentStatus';
+export { default as useEventEnrolmentStatus } from './useEventEnrolmentStatus';
diff --git a/...s/components/src/components/domain/event/eventEnrolmentStatus/useEventEnrolmentStatus.tsx b/...s/components/src/components/domain/event/eventEnrolmentStatus/useEventEnrolmentStatus.tsx
@@ -1,33 +1,11 @@
-import { EnrolmentStatusLabel } from '../../../../constants/event-constants';
 import {
   useCommonTranslation,
   useEventTranslation,
   useLocale,
 } from '../../../../hooks';
 import type { EventFields } from '../../../../types';
-import { getDateRangeStr } from '../../../../utils';
-
-export function getEnrolmentStatus(event: EventFields): EnrolmentStatusLabel {
-  const now = new Date();
-  const { remainingAttendeeCapacity, enrolmentStartTime, enrolmentEndTime } =
-    event;
-
-  // TODO: Add EnrolmentStatusLabel.queueable when we can resolve it
-  if (remainingAttendeeCapacity === 0) {
-    return EnrolmentStatusLabel.full;
-  } else if (enrolmentStartTime && new Date(enrolmentStartTime) > now) {
-    return EnrolmentStatusLabel.enrolmentNotStartedYet;
-  } else if (enrolmentEndTime && new Date(enrolmentEndTime) < now) {
-    return EnrolmentStatusLabel.enrolmentEnded;
-  } else if (
-    enrolmentStartTime &&
-    enrolmentEndTime &&
-    remainingAttendeeCapacity
-  ) {
-    return EnrolmentStatusLabel.enrollable;
-  }
-  return EnrolmentStatusLabel.noEnrolmentTimes;
-}
+import getDateRangeStr from '../../../../utils/getDateRangeStr';
+import { getEnrolmentStatus } from '../../../../utils/getEventEnrolmentStatus';
 
 function useEventEnrolmentStatus(event: EventFields) {
   const locale = useLocale();

diff --git a/packages/components/src/components/domain/event/eventLocation/EventLocation.tsx b/packages/components/src/components/domain/event/eventLocation/EventLocation.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
-import { MapBox } from '../../../../components';
-import { useCommonTranslation, useLocale } from '../../../../hooks';
+import MapBox from '../../../../components/mapBox/MapBox';
+import useCommonTranslation from '../../../../hooks/useCommonTranslation';
+import useLocale from '../../../../hooks/useLocale';
 import type { AppLanguage, EventFields } from '../../../../types';
-import { getEventFields, getServiceMapUrl } from '../../../../utils';
+import { getEventFields, getServiceMapUrl } from '../../../../utils/eventUtils';
 
 interface Props {
   event: EventFields;

diff --git a/packages/components/src/hooks/useCommonCmsConfig.ts b/packages/components/src/hooks/useCommonCmsConfig.ts
@@ -1,5 +1,6 @@
 import type { Config } from 'react-helsinki-headless-cms';
-import { useCmsTranslation, useCommonTranslation } from '.';
+import useCmsTranslation from './useCmsTranslation';
+import useCommonTranslation from './useCommonTranslation';
 
 const useCommonCmsConfig = (): Partial<Config> => {
   const { t: commonTranslation } = useCommonTranslation();