From e66a994421bc83a3ff4ebf36261073b4ec5cfbd9 Mon Sep 17 00:00:00 2001
From: Dave Earley <dave@hi.events>
Date: Tue, 16 Dec 2025 08:59:33 +0000
Subject: [PATCH] Feature: Add event ended notice (#967)

---
 .../EventInformation.module.scss              | 135 ------------------
 .../EventHomepage/EventInformation/index.tsx  | 105 --------------
 .../layouts/EventHomepage/index.tsx           |  14 ++
 frontend/src/utilites/dates.ts                |   4 +
 4 files changed, 18 insertions(+), 240 deletions(-)
 delete mode 100644 frontend/src/components/layouts/EventHomepage/EventInformation/EventInformation.module.scss
 delete mode 100644 frontend/src/components/layouts/EventHomepage/EventInformation/index.tsx

diff --git a/frontend/src/components/layouts/EventHomepage/EventInformation/EventInformation.module.scss b/frontend/src/components/layouts/EventHomepage/EventInformation/EventInformation.module.scss
deleted file mode 100644
index 879266a43..000000000
--- a/frontend/src/components/layouts/EventHomepage/EventInformation/EventInformation.module.scss
+++ /dev/null
@@ -1,135 +0,0 @@
-@use "../../../../styles/mixins";
-
-.preHeading {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 12px;
-
-  .organizer {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-
-    .organizerLogo {
-      width: 28px;
-      height: 28px;
-      overflow: hidden;
-      display: flex;
-      align-items: center;
-
-      img {
-        width: 100%;
-        height: auto;
-        display: block;
-        object-fit: contain;
-        border-radius: 4px;
-      }
-    }
-
-    .organizerName {
-      margin: 0;
-      font-size: 0.875rem;
-      font-weight: 600;
-      color: var(--secondary-color);
-
-      a {
-        color: inherit;
-        text-decoration: none;
-
-        &:hover {
-          color: var(--primary-color);
-        }
-      }
-    }
-  }
-
-  .shareButtons button {
-    color: var(--accent-muted);
-
-    &:hover {
-      color: var(--primary-color);
-    }
-  }
-
-  @include mixins.respond-below(sm) {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 12px;
-  }
-}
-
-.eventTitle {
-  font-size: 2rem;
-  font-weight: 700;
-  margin: 0 0 20px 0;
-  color: var(--primary-text-color);
-  line-height: 1.2;
-  letter-spacing: -0.02em;
-
-  @include mixins.respond-below(md) {
-    font-size: 1.75rem;
-  }
-
-  @include mixins.respond-below(sm) {
-    font-size: 1.5rem;
-    margin-bottom: 16px;
-  }
-}
-
-.eventInfo {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-
-  .eventDetail {
-    display: flex;
-    flex-direction: column;
-
-    .details {
-      display: flex;
-      align-items: flex-start;
-      gap: 10px;
-
-      svg {
-        color: var(--accent-muted);
-        flex-shrink: 0;
-        margin-top: 2px;
-      }
-    }
-
-    .detail {
-      display: flex;
-      flex-direction: column;
-      color: var(--primary-text-color);
-      font-size: 0.9375rem;
-
-      b {
-        font-weight: 600;
-      }
-
-      > div {
-        color: var(--secondary-color);
-        font-size: 0.875rem;
-        margin-top: 2px;
-      }
-    }
-  }
-
-  .viewOnGoogleMaps {
-    padding: 0;
-    margin-top: 4px;
-    color: var(--primary-color);
-    font-weight: 500;
-    height: auto;
-
-    &:hover {
-      text-decoration: underline;
-    }
-
-    svg {
-      color: var(--primary-color) !important;
-      width: 14px !important;
-    }
-  }
-}
diff --git a/frontend/src/components/layouts/EventHomepage/EventInformation/index.tsx b/frontend/src/components/layouts/EventHomepage/EventInformation/index.tsx
deleted file mode 100644
index 356eaaaed..000000000
--- a/frontend/src/components/layouts/EventHomepage/EventInformation/index.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import {IconCalendar, IconExternalLink, IconMapPin, IconWorld} from "@tabler/icons-react";
-import classes from "./EventInformation.module.scss";
-import {formatAddress, isAddressSet} from "../../../../utilites/addressUtilities.ts";
-import {t} from "@lingui/macro";
-import {Anchor, Button} from "@mantine/core";
-import {LoadingMask} from "../../../common/LoadingMask";
-import {ShareComponent} from "../../../common/ShareIcon";
-import {eventCoverImageUrl, eventHomepageUrl, imageUrl, organizerHomepageUrl} from "../../../../utilites/urlHelper.ts";
-import {FC} from "react";
-import {Event, Organizer} from "../../../../types.ts";
-import {EventDateRange} from "../../../common/EventDateRange";
-
-export const EventInformation: FC<{
-    event: Event,
-    organizer: Organizer,
-}> = ({event, organizer}) => {
-
-    if (!event || !organizer) {
-        return <LoadingMask/>;
-    }
-
-    const organizerLogo = imageUrl('ORGANIZER_LOGO', organizer?.images);
-
-    return (
-        <>
-            <div className={classes.preHeading}>
-                <div className={classes.organizer}>
-                    {organizerLogo && (
-                        <div className={classes.organizerLogo}>
-                            <img
-                                src={organizerLogo}
-                                alt={organizer.name}
-                            />
-                        </div>
-                    )}
-                    <h2 className={classes.organizerName}>
-                        <Anchor
-                            href={organizer?.status === 'LIVE' ? organizerHomepageUrl(organizer) : '#'}
-                        >
-                            {organizer.name}
-                        </Anchor>
-                    </h2>
-
-                </div>
-                <div className={classes.shareButtons}>
-                    <ShareComponent
-                        title={'Check out this event: ' + event.title}
-                        text={'Check out this event: ' + event.title}
-                        url={eventHomepageUrl(event)}
-                        imageUrl={eventCoverImageUrl(event)}
-                    />
-                </div>
-            </div>
-            <h1 className={classes.eventTitle}>{event.title}</h1>
-            <div className={classes.eventInfo}>
-                <div className={classes.eventDetail}>
-                    <div className={classes.details}>
-                        <IconCalendar size={20}/>
-                        <div className={classes.detail}>
-                            <EventDateRange event={event}/>
-                        </div>
-                    </div>
-                </div>
-
-
-                {event.settings?.is_online_event && (
-                    <div className={classes.eventDetail}>
-                        <div className={classes.details}>
-                            <IconWorld size={20}/>
-                            <div className={classes.detail}>
-                                <b>{t`Online Event`}</b>
-                            </div>
-                        </div>
-                    </div>
-                )}
-
-                {isAddressSet(event.settings?.location_details) && !event.settings?.is_online_event && event.settings?.location_details && (
-                    <div className={classes.eventDetail}>
-                        <div className={classes.details}>
-                            <IconMapPin size={20}/>
-                            <div className={classes.detail}>
-                                <b>{event.settings.location_details.venue_name}</b>
-                                <div>{formatAddress(event.settings.location_details)}</div>
-                                <div>
-                                    <Button
-                                        className={classes.viewOnGoogleMaps}
-                                        component="a"
-                                        target="_blank"
-                                        href={
-                                            event.settings.maps_url || `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(formatAddress(event.settings.location_details))}`}
-                                        variant="transparent"
-                                        size="xs"
-                                        rightSection={<IconExternalLink size={15}/>}
-                                    >
-                                        {event.settings.maps_url ? t`View map` : t`View on Google Maps`}
-                                    </Button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                )}
-            </div>
-        </>
-    )
-}
diff --git a/frontend/src/components/layouts/EventHomepage/index.tsx b/frontend/src/components/layouts/EventHomepage/index.tsx
index 417bda546..42d8114e9 100644
--- a/frontend/src/components/layouts/EventHomepage/index.tsx
+++ b/frontend/src/components/layouts/EventHomepage/index.tsx
@@ -9,6 +9,7 @@ import {EventNotAvailable} from "./EventNotAvailable";
 import {
     IconArrowUpRight,
     IconCalendar,
+    IconCalendarOff,
     IconCalendarPlus,
     IconExternalLink,
     IconMail,
@@ -36,6 +37,7 @@ import {removeTransparency} from "../../../utilites/colorHelper.ts";
 import {ShareComponent} from "../../common/ShareIcon";
 import {EventDateRange} from "../../common/EventDateRange";
 import {CalendarOptionsPopover} from "../../common/CalendarOptionsPopover";
+import {isDateInPast} from "../../../utilites/dates.ts";
 
 interface EventHomepageProps {
     event?: Event;
@@ -322,6 +324,18 @@ const EventHomepage = ({...loaderData}: EventHomepageProps) => {
                                             </CalendarOptionsPopover>
                                         </div>
 
+                                        {/* Event Ended */}
+                                        {event.end_date && isDateInPast(event.end_date) && (
+                                            <div className={classes.metaItem}>
+                                                <div className={classes.metaIconBox}>
+                                                    <IconCalendarOff/>
+                                                </div>
+                                                <div className={classes.metaContent}>
+                                                    <div className={classes.metaPrimary}>{t`This event has ended`}</div>
+                                                </div>
+                                            </div>
+                                        )}
+
                                         {/* Online Event */}
                                         {isOnlineEvent && (
                                             <div className={classes.metaItem}>
diff --git a/frontend/src/utilites/dates.ts b/frontend/src/utilites/dates.ts
index 1f1c7c039..7b8727300 100644
--- a/frontend/src/utilites/dates.ts
+++ b/frontend/src/utilites/dates.ts
@@ -116,3 +116,7 @@ export const dateToBrowserTz = (date: string, fallbackTz: string, locale?: strin
 export const isDateInFuture = (date: string): boolean => {
     return dayjs.utc(date).diff(dayjs()) > 0;
 };
+
+export const isDateInPast = (date: string): boolean => {
+    return dayjs.utc(date).diff(dayjs()) < 0;
+}