feat(ts/notifications): create notification card for detours

mbta · Sep 26, 2024 · 998f950 · 998f950
1 parent 8d46a21
commit 998f950
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 7 deletions.
diff --git a/assets/src/components/notificationBellIcon.tsx b/assets/src/components/notificationBellIcon.tsx
@@ -4,6 +4,8 @@ import { joinClasses } from "../helpers/dom"
 import { NotificationBellIcon as NotificationBellIconSvg } from "../helpers/icon"
 import { OpenView } from "../state/pagePanelState"
 import { usePanelStateFromStateDispatchContext } from "../hooks/usePanelState"
+import inTestGroup, { TestGroups } from "../userInTestGroup"
+import { NotificationType } from "../realtime"
 
 const NotificationBellIcon = ({
   extraClasses,
@@ -14,8 +16,14 @@ const NotificationBellIcon = ({
     currentView: { openView },
   } = usePanelStateFromStateDispatchContext()
   const { notifications } = useContext(NotificationsContext)
+
+  const inDetoursList = inTestGroup(TestGroups.DetoursList)
   const unreadNotifications = (notifications || []).filter(
-    (notification) => notification.state === "unread"
+    (notification) =>
+      notification.state === "unread" &&
+      !(
+        notification.content.$type === NotificationType.Detour && !inDetoursList
+      )
   )
   const unreadBadge: boolean = unreadNotifications.length > 0
 

diff --git a/assets/src/components/notificationCard.tsx b/assets/src/components/notificationCard.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement } from "react"
+import React, { ReactNode } from "react"
 import { useRoute, useRoutes } from "../contexts/routesContext"
 import {
   BlockWaiverNotification,
@@ -11,6 +11,8 @@ import { Route } from "../schedule"
 import { formattedTime } from "../util/dateTime"
 import { CardBody, CardProperties, CardReadable } from "./card"
 import { fullStoryEvent } from "../helpers/fullStory"
+import { RoutePill } from "./routePill"
+import inTestGroup, { TestGroups } from "../userInTestGroup"
 
 export const NotificationCard = ({
   notification,
@@ -24,7 +26,7 @@ export const NotificationCard = ({
   openVPPForCurrentVehicle: (notification: Notification) => void
   hideLatestNotification?: () => void
   noFocusOrHover?: boolean
-}): ReactElement<HTMLElement> => {
+}) => {
   const routes = useRoutes(
     isBlockWaiverNotification(notification) ? notification.content.routeIds : []
   )
@@ -33,6 +35,14 @@ export const NotificationCard = ({
       ? notification.content.routeIdAtCreation
       : null
   )
+
+  if (
+    notification.content.$type === NotificationType.Detour &&
+    !inTestGroup(TestGroups.DetoursList)
+  ) {
+    return null
+  }
+
   const isUnread = notification.state === "unread"
   return (
     <CardReadable
@@ -87,6 +97,11 @@ export const title = (notification: Notification) => {
     case NotificationType.BlockWaiver: {
       return blockWaiverNotificationTitle(notification.content.reason)
     }
+
+    case NotificationType.Detour: {
+      return "Detour - Active"
+    }
+
     case NotificationType.BridgeMovement: {
       switch (notification.content.status) {
         case "lowered":
@@ -156,7 +171,7 @@ const description = (
   notification: Notification,
   routes: Route[],
   routeAtCreation: Route | null
-): string => {
+): ReactNode => {
   switch (notification.content.$type) {
     case NotificationType.BlockWaiver: {
       return blockWaiverDescription(
@@ -165,6 +180,24 @@ const description = (
         routeAtCreation
       )
     }
+
+    case NotificationType.Detour: {
+      return (
+        <>
+          <div className="d-flex flex-row gap-2">
+            <RoutePill routeName={notification.content.route} />
+            <div>
+              <div className="fw-semibold">{notification.content.headsign}</div>
+              <div className="fw-normal text-body-secondary">
+                From {notification.content.origin.split(" - ")[0]}
+              </div>
+              <div className="fw-normal">{notification.content.direction}</div>
+            </div>
+          </div>
+        </>
+      )
+    }
+
     case NotificationType.BridgeMovement: {
       switch (notification.content.status) {
         case "raised":

diff --git a/assets/src/models/detoursList.ts b/assets/src/models/detoursList.ts
@@ -1,16 +1,18 @@
 import { array, Infer, nullable, number, string, type } from "superstruct"
 
+export type DetourId = number
 export interface SimpleDetour {
-  id: number
+  id: DetourId
   route: string
   direction: string
   name: string
   intersection: string
   updatedAt: number
 }
 
+export const detourId = number()
 export const SimpleDetourData = type({
-  id: number(),
+  id: detourId,
   route: string(),
   direction: string(),
   name: string(),

diff --git a/assets/src/models/notificationData.ts b/assets/src/models/notificationData.ts
@@ -19,6 +19,7 @@ import {
   NotificationContentTypes,
   NotificationType,
 } from "../realtime"
+import { detourId } from "./detoursList"
 
 const dateFromSeconds = coerce(
   date(),
@@ -65,12 +66,27 @@ export const BridgeNotificationData = union([
   }),
 ])
 
+export const DetourNotificationData = type({
+  __struct__: literal(NotificationType.Detour),
+  detour_id: detourId,
+  headsign: string(),
+  route: string(),
+  direction: string(),
+  origin: string(),
+})
+
+export type DetourNotificationData = Infer<typeof DetourNotificationData>
+
 export const NotificationData = type({
   id: coerce(string(), number(), (i) => i.toString()),
   created_at: dateFromSeconds,
   state: enums(["unread", "read", "deleted"]),
   // Requires a field named `__struct__` to be present as the discriminator
-  content: union([BridgeNotificationData, BlockWaiverNotificationData]),
+  content: union([
+    BridgeNotificationData,
+    BlockWaiverNotificationData,
+    DetourNotificationData,
+  ]),
 })
 export type NotificationData = Infer<typeof NotificationData>
 
@@ -116,6 +132,18 @@ export const notificationFromData = (
       }
       break
     }
+
+    case NotificationType.Detour: {
+      content = {
+        $type: NotificationType.Detour,
+        detourId: notificationData.content.detour_id,
+        direction: notificationData.content.direction,
+        headsign: notificationData.content.headsign,
+        origin: notificationData.content.origin,
+        route: notificationData.content.route,
+      }
+      break
+    }
   }
 
   return {

diff --git a/assets/src/realtime.ts b/assets/src/realtime.ts
@@ -10,6 +10,7 @@ import {
 } from "./schedule"
 
 import { Crowding } from "./models/crowding"
+import { DetourId } from "./models/detoursList"
 
 export interface BlockWaiver {
   startTime: Date
@@ -59,6 +60,7 @@ export type NotificationId = string
 export enum NotificationType {
   BridgeMovement = "Elixir.Notifications.Db.BridgeMovement",
   BlockWaiver = "Elixir.Notifications.Db.BlockWaiver",
+  Detour = "Elixir.Notifications.Db.Detour",
 }
 
 export interface BridgeLoweredNotification {
@@ -90,9 +92,20 @@ export type BlockWaiverNotification = {
   endTime: Date | null
 }
 
+export type DetourNotification = {
+  $type: NotificationType.Detour
+  detourId: DetourId
+  headsign: string
+  route: string
+  direction: string
+  origin: string
+}
+
 export type NotificationContentTypes =
   | BridgeNotification
   | BlockWaiverNotification
+  | DetourNotification
+
 export interface Notification<
   TNotification extends NotificationContentTypes = NotificationContentTypes
 > {