Show passenger information messages on station and train pages

public/locales/en/translation.json

@@ -18,6 +18,7 @@
   "track": "Track",
   "station": "Station",
   "canceled": "Canceled",
+  "alerts": "Alerts",
   "page_not_found": "Page could not be found.",
   "train_current_composition": "Current composition",
   "train_composition_change_from_to_station_text": "These train units continue from {{from}} to {{to}}",

public/locales/fi/translation.json

@@ -18,6 +18,7 @@
   "track": "Raide",
   "station": "Asema",
   "canceled": "Peruttu",
+  "alerts": "Tiedotteet",
   "page_not_found": "Etsimääsi sivua ei löytynyt.",
   "train_current_composition": "Nykyinen kokoonpano",
   "train_composition_change_from_to_station_text": "Nämä junayksiköt jatkavat asemalta {{from}} asemalle {{to}}",

src/components/PassengerInformationMessageAlert.tsx

@@ -0,0 +1,48 @@
+import { Alert, ButtonBase } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+
+import {
+  getPassengerInformationMessageForLanguage,
+  PassengerInformationMessage,
+} from '../utils/passengerInformationMessages';
+
+type PassengerInformationMessageAlertProps = {
+  onClick: () => void;
+  passengerInformationMessages: PassengerInformationMessage[];
+};
+
+const PassengerInformationMessageAlert = ({
+  onClick,
+  passengerInformationMessages,
+}: PassengerInformationMessageAlertProps) => {
+  const { i18n } = useTranslation();
+
+  if (passengerInformationMessages.length === 0) return null;
+
+  const firstMessage = passengerInformationMessages[0];
+
+  return (
+    <ButtonBase
+      onClick={onClick}
+      sx={{
+        width: '100%',
+        textAlign: 'left',
+        '&:focus-visible': {
+          outline: 'auto 1px',
+        },
+      }}
+    >
+      <Alert severity="info" sx={{ width: '100%' }}>
+        {getPassengerInformationMessageForLanguage(
+          firstMessage,
+          i18n.resolvedLanguage
+        )}
+        {passengerInformationMessages.length > 1 && (
+          <strong> + {passengerInformationMessages.length - 1}</strong>
+        )}
+      </Alert>
+    </ButtonBase>
+  );
+};
+
+export default PassengerInformationMessageAlert;

src/components/PassengerInformationMessagesDialog.tsx

@@ -0,0 +1,49 @@
+import { Alert, DialogActions, DialogContent } from '@mui/material';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import { useTranslation } from 'react-i18next';
+
+import {
+  getPassengerInformationMessageForLanguage,
+  PassengerInformationMessage,
+} from '../utils/passengerInformationMessages';
+
+type PassengerInformationMessagesDialogProps = {
+  onClose: () => void;
+  open: boolean;
+  passengerInformationMessages:
+    | PassengerInformationMessage[]
+    | null
+    | undefined;
+};
+
+const PassengerInformationMessagesDialog = (
+  props: PassengerInformationMessagesDialogProps
+) => {
+  const { onClose, open, passengerInformationMessages } = props;
+  const { i18n } = useTranslation();
+  const { t } = useTranslation();
+
+  const handleClose = () => {
+    onClose();
+  };
+
+  return (
+    <Dialog onClose={handleClose} open={open}>
+      <DialogTitle>{t('alerts')}</DialogTitle>
+      <DialogContent>
+        {passengerInformationMessages?.map((m) => (
+          <Alert key={m.id} severity="info" sx={{ mb: 1 }}>
+            {getPassengerInformationMessageForLanguage(
+              m,
+              i18n.resolvedLanguage
+            )}
+          </Alert>
+        ))}
+      </DialogContent>
+      <DialogActions sx={{ justifyContent: 'space-evenly' }}></DialogActions>
+    </Dialog>
+  );
+};
+
+export default PassengerInformationMessagesDialog;

src/components/TrainInfoContainer.tsx

@@ -8,9 +8,12 @@ import {
   useTrainQuery,
   Wagon,
 } from '../graphql/generated/digitraffic';
+import usePassengerInformationMessages from '../hooks/usePassengerInformationMessages';
 import { formatEET } from '../utils/date';
+import { getPassengerInformationMessagesByStation } from '../utils/passengerInformationMessages';
 import { getTrainScheduledDepartureTime } from '../utils/train';
 
+import PassengerInformationMessagesDialog from './PassengerInformationMessagesDialog';
 import TrainComposition from './TrainComposition';
 import TrainStationTimeline from './TrainStationTimeline';
 import TrainWagonDetailsDialog from './TrainWagonDetailsDialog';
@@ -22,6 +25,8 @@ type TrainInfoContainerProps = {
 function TrainInfoContainer({ train }: TrainInfoContainerProps) {
   const [wagonDialogOpen, setWagonDialogOpen] = useState(false);
   const [selectedWagon, setSelectedWagon] = useState<Wagon | null>(null);
+  const [selectedStation, setSelectedStation] = useState<string | null>(null);
+  const [stationAlertDialogOpen, setStationAlertDialogOpen] = useState(false);
   const departureDate = train ? getTrainScheduledDepartureTime(train) : null;
   const { error, data: realTimeData } = useTrainQuery(
     train && departureDate
@@ -37,6 +42,16 @@ function TrainInfoContainer({ train }: TrainInfoContainerProps) {
         }
       : { skip: true }
   );
+  const { messages: passengerInformationMessages } =
+    usePassengerInformationMessages({
+      skip: !train,
+      refetchIntervalMs: 20000,
+      trainNumber: train?.trainNumber,
+      trainDepartureDate: train?.departureDate,
+    });
+  const stationMessages = getPassengerInformationMessagesByStation(
+    passengerInformationMessages
+  );
 
   const realTimeTrain = realTimeData?.train?.[0];
 
@@ -49,6 +64,15 @@ function TrainInfoContainer({ train }: TrainInfoContainerProps) {
     setWagonDialogOpen(true);
   };
 
+  const handleStationAlertDialogClose = () => {
+    setStationAlertDialogOpen(false);
+  };
+
+  const handleStationAlertClick = (stationCode: string) => {
+    setSelectedStation(stationCode);
+    setStationAlertDialogOpen(true);
+  };
+
   return (
     <>
       <Box
@@ -87,6 +111,8 @@ function TrainInfoContainer({ train }: TrainInfoContainerProps) {
         train={train}
         realTimeTrain={realTimeTrain}
         onWagonClick={handleWagonClick}
+        onStationAlertClick={handleStationAlertClick}
+        stationMessages={stationMessages}
       />
       {train && (
         <TrainWagonDetailsDialog
@@ -96,6 +122,15 @@ function TrainInfoContainer({ train }: TrainInfoContainerProps) {
           onClose={handleWagonDialogClose}
         />
       )}
+      <PassengerInformationMessagesDialog
+        open={stationAlertDialogOpen}
+        passengerInformationMessages={
+          selectedStation && stationMessages?.[selectedStation]
+            ? stationMessages[selectedStation]
+            : null
+        }
+        onClose={handleStationAlertDialogClose}
+      />
     </>
   );
 }

src/components/TrainStationTimeline.tsx

@@ -9,8 +9,10 @@ import getTrainCurrentStation from '../utils/getTrainCurrentStation';
 import getTrainLatestArrivalRow from '../utils/getTrainLatestArrivalRow';
 import getTrainLatestDepartureTimeTableRow from '../utils/getTrainLatestDepartureTimeTableRow';
 import getTrainPreviousStation from '../utils/getTrainPreviousStation';
+import { PassengerInformationMessage } from '../utils/passengerInformationMessages';
 import { getTrainStationName } from '../utils/train';
 
+import PassengerInformationMessageAlert from './PassengerInformationMessageAlert';
 import TimelineRouteStopSeparator from './TimelineRouteStopSeparator';
 import TimeTableRowTime from './TimeTableRowTime';
 import TrainComposition from './TrainComposition';
@@ -19,12 +21,16 @@ type TrainStationTimelineProps = {
   train?: TrainDetailsFragment | null;
   realTimeTrain?: TrainDetailsFragment | null;
   onWagonClick: (w: Wagon) => void;
+  onStationAlertClick: (stationCode: string) => void;
+  stationMessages?: Record<string, PassengerInformationMessage[]>;
 };
 
 const TrainStationTimeline = ({
   train,
   realTimeTrain,
   onWagonClick,
+  onStationAlertClick,
+  stationMessages,
 }: TrainStationTimelineProps) => {
   const { t } = useTranslation();
 
@@ -101,6 +107,15 @@ const TrainStationTimeline = ({
                     />
                   </div>
                 )}
+                {stationMessages &&
+                  stationMessages[station.shortCode]?.length > 0 && (
+                    <PassengerInformationMessageAlert
+                      onClick={() => onStationAlertClick(station.shortCode)}
+                      passengerInformationMessages={
+                        stationMessages[station.shortCode]
+                      }
+                    />
+                  )}
                 <Divider />
               </Grid>
             </Grid>