Include registration statuses to event items

app/components/EventItem/RegistrationStatusTag.tsx

@@ -0,0 +1,87 @@
+import { Flex, Icon } from '@webkom/lego-bricks';
+import { AlarmClock } from 'lucide-react';
+import Tag from 'app/components/Tags/Tag';
+import Time from 'app/components/Time';
+import { useIsLoggedIn } from 'app/reducers/auth';
+import { EventStatusType } from 'app/store/models/Event';
+import utilities from 'app/styles/utilities.css';
+import type { ListEvent } from 'app/store/models/Event';
+
+type Props = {
+  event: ListEvent;
+  isRegistrationOpen: boolean;
+  isRegistrationSameYear: boolean;
+};
+
+const RegistrationStatusTag = ({
+  event,
+  isRegistrationOpen,
+  isRegistrationSameYear,
+}: Props) => {
+  const loggedIn = useIsLoggedIn();
+
+  const getRegistrationStatus = () => {
+    if (
+      event.eventStatusType === EventStatusType.OPEN ||
+      event.eventStatusType === EventStatusType.INFINITE
+    ) {
+      return 'Åpent for alle';
+    }
+
+    if (event.isAdmitted) {
+      return 'Du er påmeldt';
+    }
+
+    if (event.userReg && event.eventStatusType === EventStatusType.NORMAL) {
+      return 'Du er på venteliste';
+    }
+
+    if (!!event.activationTime) {
+      return (
+        <Flex alignItems="center" gap="var(--spacing-xs)">
+          <Icon
+            iconNode={<AlarmClock />}
+            size={14}
+            className={utilities.hiddenOnMobile}
+          />
+          <span>
+            Påmelding {isRegistrationOpen ? 'åpnet' : 'åpner'}{' '}
+            <Time
+              time={event.activationTime}
+              format={isRegistrationSameYear ? 'D. MMM HH:mm' : 'll HH:mm'}
+            />
+          </span>
+        </Flex>
+      );
+    }
+
+    return 'Påmelding er ikke bestemt';
+  };
+
+  const getTagColor = () => {
+    if (event.isAdmitted) {
+      return 'green';
+    }
+
+    if (event.userReg && event.eventStatusType === EventStatusType.NORMAL) {
+      return 'orange';
+    }
+
+    if (
+      event.eventStatusType === EventStatusType.OPEN ||
+      event.eventStatusType === EventStatusType.INFINITE
+    ) {
+      return 'red';
+    }
+
+    return isRegistrationOpen ? 'red' : 'gray';
+  };
+
+  if (!loggedIn) {
+    return null;
+  }
+
+  return <Tag tag={getRegistrationStatus()} color={getTagColor()} />;
+};
+
+export default RegistrationStatusTag;

app/components/EventItem/index.tsx

@@ -1,13 +1,13 @@
 import { Flex, Icon, Image } from '@webkom/lego-bricks';
 import {
-  AlarmClock,
   Calendar,
   CalendarClock,
   CircleAlert,
   CircleCheckBig,
   Clock,
   Timer,
 } from 'lucide-react';
+import moment from 'moment-timezone';
 import { Link } from 'react-router-dom';
 import Pill from 'app/components/Pill';
 import Tag from 'app/components/Tags/Tag';
@@ -16,6 +16,7 @@ import Tooltip from 'app/components/Tooltip';
 import { colorForEventType } from 'app/routes/events/utils';
 import { EventStatusType } from 'app/store/models/Event';
 import { eventAttendanceAbsolute } from 'app/utils/eventStatus';
+import RegistrationStatusTag from './RegistrationStatusTag';
 import styles from './styles.module.css';
 import type { CompleteEvent, ListEvent } from 'app/store/models/Event';
 import type { ReactNode } from 'react';
@@ -33,27 +34,34 @@ const getRegistrationIconOptions = (
 ): RegistrationIconOptions => {
   const { isAdmitted, eventStatusType } = event;
 
+  if (isAdmitted) {
+    return {
+      icon: <CircleCheckBig />,
+      color: 'var(--success-color)',
+      tooltip: 'Du er påmeldt',
+    };
+  }
+
   switch (eventStatusType) {
     case EventStatusType.NORMAL:
     case EventStatusType.INFINITE:
-      if (isAdmitted) {
-        return {
-          icon: <CircleCheckBig />,
-          color: 'var(--success-color)',
-          tooltip: 'Du er påmeldt',
-        } satisfies RegistrationIconOptions;
-      }
       return {
         icon: <Timer />,
         color: 'var(--color-orange-6)',
         tooltip: 'Du er på ventelisten',
-      } satisfies RegistrationIconOptions;
+      };
+    case EventStatusType.OPEN:
+      return {
+        icon: <CircleCheckBig />,
+        color: 'var(--success-color)',
+        tooltip: 'Åpent for alle',
+      };
     default:
       return {
         icon: <CircleAlert />,
         color: 'var(--danger-color)',
         tooltip: 'Det har oppstått en feil',
-      } satisfies RegistrationIconOptions;
+      };
   }
 };
 
@@ -85,24 +93,6 @@ const TimeStamp = ({ event }: TimeStampProps) => {
   );
 };
 
-const TimeStartAndRegistration = ({ event }: TimeStampProps) => (
-  <>
-    <Flex alignItems="center" gap="var(--spacing-sm)">
-      <Icon iconNode={<CalendarClock />} size={18} />
-      <Time time={event.startTime} format="ll HH:mm" />
-    </Flex>
-
-    {!!event.activationTime && (
-      <Flex alignItems="center" gap="var(--spacing-sm)">
-        <Tooltip content="Påmelding åpner">
-          <Icon iconNode={<AlarmClock />} size={18} />
-        </Tooltip>
-        <Time time={event.activationTime} format="ll HH:mm" />
-      </Flex>
-    )}
-  </>
-);
-
 const RegistrationIcon = ({ event }: TimeStampProps) => {
   const registrationIconOptions = getRegistrationIconOptions(event);
   return (
@@ -127,6 +117,12 @@ const EventItem = ({
   showTags = true,
   eventStyle,
 }: EventItemProps): ReactNode => {
+  const isRegistrationOpen = moment(event.activationTime).isBefore(moment());
+  // No need to show the year if it is the same year
+  const isRegistrationSameYear =
+    moment().year() === moment(event.activationTime).year();
+  const isEventSameYear = moment().year() === moment(event.startTime).year();
+
   switch (eventStyle) {
     case 'extra-compact':
       return (
@@ -205,12 +201,20 @@ const EventItem = ({
           }}
           className={styles.eventItem}
         >
-          <Flex column gap="var(--spacing-xs)" className="secondaryFontColor">
-            <div>
-              <h3 className={styles.eventItemTitle}>{event.title}</h3>
-              {event.totalCapacity > 0 && <Attendance event={event} />}
-            </div>
-            <TimeStartAndRegistration event={event} />
+          <Flex column gap="var(--spacing-sm)" className="secondaryFontColor">
+            <h3 className={styles.eventItemTitle}>{event.title}</h3>
+            {event.totalCapacity != null && event.totalCapacity > 0 && (
+              <div>
+                <Attendance event={event} />
+              </div>
+            )}
+            <Flex alignItems="center" gap="var(--spacing-sm)">
+              <Icon iconNode={<CalendarClock />} size={16} />
+              <Time
+                time={event.startTime}
+                format={isEventSameYear ? 'D. MMM HH:mm' : 'll HH:mm'}
+              />
+            </Flex>
             {showTags && (
               <Flex wrap>
                 {event.tags.map((tag, index) => (
@@ -220,14 +224,21 @@ const EventItem = ({
             )}
           </Flex>
 
-          <Flex className={styles.companyLogo}>
-            {event.cover && (
-              <Image
-                alt="Forsidebilde"
-                src={event.cover}
-                placeholder={event.coverPlaceholder}
-              />
-            )}
+          <Flex column alignItems="flex-end" gap="var(--spacing-sm)">
+            <Flex className={styles.companyLogo}>
+              {event.cover && (
+                <Image
+                  alt="Forsidebilde"
+                  src={event.cover}
+                  placeholder={event.coverPlaceholder}
+                />
+              )}
+            </Flex>
+            <RegistrationStatusTag
+              event={event}
+              isRegistrationOpen={isRegistrationOpen}
+              isRegistrationSameYear={isRegistrationSameYear}
+            />
           </Flex>
         </Link>
       );

app/components/EventItem/styles.module.css

@@ -1,13 +1,15 @@
 .eventItem {
   min-height: 50px;
-  padding: var(--spacing-xs);
-  padding-left: var(--spacing-md);
+  padding: var(--spacing-sm) var(--spacing-md);
   border-left: 4px solid transparent;
   display: flex;
   justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-md);
   line-height: 1.3;
   border-top-right-radius: var(--border-radius-lg);
   border-bottom-right-radius: var(--border-radius-lg);
+  color: var(--lego-font-color);
   transition: background-color var(--easing-fast);
 
   &:hover {
@@ -30,15 +32,14 @@
   color: var(--lego-font-color);
   margin: 0;
   word-break: break-word;
-  margin-bottom: var(--spacing-sm);
 }
 
 .eventTime {
   color: var(--secondary-font-color);
 }
 
 .companyLogo {
-  width: 120px;
+  width: 140px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -51,11 +52,10 @@
 }
 
 .companyLogo img {
-  min-width: 120px;
+  min-width: 140px;
   max-height: 80px;
   object-fit: contain;
   background: white;
-  margin: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) 0;
 }
 
 .companyLogoCompact img {

app/components/Tags/Tag.tsx

@@ -2,6 +2,7 @@ import { Flex, Icon } from '@webkom/lego-bricks';
 import cx from 'classnames';
 import { Link } from 'react-router-dom';
 import styles from './Tag.module.css';
+import type { ReactNode } from 'react';
 
 const tagColors = [
   'red',
@@ -18,7 +19,7 @@ const tagColors = [
 export type TagColors = (typeof tagColors)[number];
 
 type Props = {
-  tag: string;
+  tag: string | ReactNode;
   icon?: string;
   iconSize?: number;
   color?: TagColors;

app/routes/events/components/EventList.tsx

@@ -17,7 +17,7 @@ import EmptyState from 'app/components/EmptyState';
 import EventItem from 'app/components/EventItem';
 import { CheckBox, SelectInput } from 'app/components/Form/';
 import { EventTime } from 'app/models';
-import { useCurrentUser } from 'app/reducers/auth';
+import { useCurrentUser, useIsLoggedIn } from 'app/reducers/auth';
 import { selectAllEvents } from 'app/reducers/events';
 import { selectPaginationNext } from 'app/reducers/selectors';
 import { useAppDispatch, useAppSelector } from 'app/store/hooks';
@@ -134,6 +134,7 @@ const EventList = () => {
   );
 
   const icalToken = useCurrentUser()?.icalToken;
+  const loggedIn = useIsLoggedIn();
 
   const fetchQuery = {
     date_after: moment().format('YYYY-MM-DD'),
@@ -162,7 +163,7 @@ const EventList = () => {
           query: fetchQuery,
         }),
       ),
-    [],
+    [loggedIn],
   );
 
   const fetchMore = () =>

app/routes/users/components/UserProfile/index.tsx

@@ -44,7 +44,7 @@ import { GroupMemberships } from './GroupMemberships';
 import Penalties from './Penalties';
 import PhotoConsents from './PhotoConsents';
 import styles from './UserProfile.module.css';
-import type { ListEventWithUserRegistration } from 'app/store/models/Event';
+import type { ListEvent } from 'app/store/models/Event';
 import type { PublicGroup } from 'app/store/models/Group';
 import type { CurrentUser, PublicUserWithGroups } from 'app/store/models/User';
 import type { ExclusifyUnion } from 'app/types';
@@ -74,7 +74,7 @@ const UserProfile = () => {
     }),
   );
   const upcomingEvents = useAppSelector((state) =>
-    selectAllEvents<ListEventWithUserRegistration>(state, {
+    selectAllEvents<ListEvent>(state, {
       pagination: upcomingEventsPagination,
     }),
   );
@@ -87,7 +87,7 @@ const UserProfile = () => {
     }),
   );
   const previousEvents = useAppSelector((state) =>
-    selectAllEvents<ListEventWithUserRegistration>(state, {
+    selectAllEvents<ListEvent>(state, {
       pagination: previousEventsPagination,
     }),
   ).filter((e) => e.userReg);