Improve ongoing event and stay labeling

Author: nabramow

app/web/features/dashboard/EventListRow.tsx

@@ -52,17 +52,19 @@ const DateChip = styled("div")({
   },
 });
 
-const DateMonth = styled("div")({
-  fontSize: "9px",
-  textTransform: "uppercase",
-  letterSpacing: "0.08em",
-  color: "var(--mui-palette-secondary-main)",
-  fontWeight: 700,
-  lineHeight: 1.2,
-  "[data-today] &": {
-    color: "var(--mui-palette-primary-main)",
-  },
-});
+const DateMonth = styled("div")<{ $labelFontSize?: number }>(
+  ({ $labelFontSize }) => ({
+    fontSize: $labelFontSize ? `${$labelFontSize}px` : "9px",
+    textTransform: "uppercase",
+    letterSpacing: "0.08em",
+    color: "var(--mui-palette-secondary-main)",
+    fontWeight: 700,
+    lineHeight: 1.2,
+    "[data-today] &": {
+      color: "var(--mui-palette-primary-main)",
+    },
+  }),
+);
 
 const DateDay = styled("div")({
   fontSize: "16px",
@@ -170,11 +172,16 @@ export default function EventListRow({ event }: EventListRowProps) {
     i18n: { language: locale },
   } = useTranslation([DASHBOARD]);
 
+  const now = new Date();
   const startDate = timestamp2Date(event.startTime!);
-  const isToday = startDate.toDateString() === new Date().toDateString();
+  const endDate = event.endTime ? timestamp2Date(event.endTime) : null;
+  const isOngoing = endDate !== null && startDate <= now && endDate >= now;
+  const isToday = !isOngoing && startDate.toDateString() === now.toDateString();
   const todayLabel = t("dashboard:events.today_label");
-  const todayFontSize =
-    todayLabel.length <= 5 ? 9 : todayLabel.length <= 7 ? 8 : 7;
+  const nowLabel = t("dashboard:now_label");
+  const chipLabel = isOngoing ? nowLabel : todayLabel;
+  const chipFontSize =
+    chipLabel.length <= 5 ? 9 : chipLabel.length <= 7 ? 8 : 7;
   const month = localizeMonthAbbreviation(startDate, {
     locale,
     timezone: BROWSER_TIMEZONE,
@@ -194,11 +201,13 @@ export default function EventListRow({ event }: EventListRowProps) {
 
   return (
     <RowLink href={routeToEvent(event.eventId, event.slug)}>
-      <DateChip data-today={isToday || undefined}>
-        <DateMonth style={isToday ? { fontSize: todayFontSize } : undefined}>
-          {isToday ? todayLabel : month}
+      <DateChip data-today={isToday || isOngoing || undefined}>
+        <DateMonth
+          $labelFontSize={isToday || isOngoing ? chipFontSize : undefined}
+        >
+          {isOngoing ? nowLabel : isToday ? todayLabel : month}
         </DateMonth>
-        {!isToday && <DateDay>{day}</DateDay>}
+        {!isToday && !isOngoing && <DateDay>{day}</DateDay>}
       </DateChip>
       <ContentWrapper>
         <TitleRow>

app/web/features/dashboard/UpcomingStayCard.tsx

@@ -89,10 +89,6 @@ interface UpcomingStayCardProps {
   hostRequest: HostRequest.AsObject;
 }
 
-function daysUntilLabel(days: number, locale: string): string {
-  return localizeRelativeDays(days, locale);
-}
-
 export function UpcomingStayCardSkeleton() {
   return (
     <Box
@@ -150,8 +146,15 @@ export default function UpcomingStayCard({
   const fromDate = dayjs.tz(hostRequest.fromDate, UTC_TIMEZONE);
   const toDate = dayjs.tz(hostRequest.toDate, UTC_TIMEZONE);
   const nights = toDate.diff(fromDate, "day");
-  const daysUntil = fromDate.diff(dayjs().tz(timezone).startOf("day"), "day");
+  const today = dayjs().tz(timezone).startOf("day");
+  const daysUntil = fromDate.diff(today, "day");
+  const daysUntilEnd = toDate.diff(today, "day");
+  const isOngoing = daysUntil <= 0 && daysUntilEnd >= 0;
   const isImminent = daysUntil <= 3;
+  const relativeDaysLabel = (() => {
+    const label = localizeRelativeDays(daysUntil, locale);
+    return label.charAt(0).toUpperCase() + label.slice(1);
+  })();
 
   const dateRange = localizeDateTimeRange(fromDate, toDate, {
     timezone: UTC_TIMEZONE,
@@ -218,7 +221,9 @@ export default function UpcomingStayCard({
             </Typography>
           </TextBlock>
           {isImminent && (
-            <DaysChip imminent>{daysUntilLabel(daysUntil, locale)}</DaysChip>
+            <DaysChip imminent>
+              {isOngoing ? t("dashboard:now_label") : relativeDaysLabel}
+            </DaysChip>
           )}
         </IdentityRow>
         <MetaRow>

app/web/features/dashboard/locales/en.json

@@ -45,6 +45,7 @@
   "hero_image_attribution": "Photo by <1>Mesut Kaya</1> on <3>Unsplash</3>",
   "prev_page_button_a11y": "Previous page",
   "next_page_button_a11y": "Next page",
+  "now_label": "Now",
   "discussions": {
     "community_header": "Discussions in your communities",
     "community_empty_message": "No discussions yet in your communities.",
@@ -64,7 +65,6 @@
     "upcoming_guests_header": "Your upcoming guests",
     "night_count_one": "{{count}} night",
     "night_count_other": "{{count}} nights",
-
     "no_upcoming_trips": "No upcoming trips. Ready to explore?",
     "no_upcoming_guests": "No upcoming guests yet."
   },