feat: more global messages contexts

src/components/message-box/index.tsx

@@ -22,6 +22,7 @@ export type MessageBoxProps = {
   noStatusIcon?: boolean;
   onClick?: () => void;
   borderRadius?: boolean;
+  subtle?: boolean;
 };
 
 export const MessageBox = ({
@@ -32,12 +33,13 @@ export const MessageBox = ({
   title,
   onClick,
   borderRadius = true,
+  subtle = false
 }: MessageBoxProps) => {
   const { color: {status} } = useTheme();
   const { t } = useTranslation();
   const backgroundColorStyle: HTMLAttributes<HTMLDivElement>['style'] = {
-    borderColor: status[type].primary.background,
-    backgroundColor: status[type].secondary.background,
+    borderColor: subtle ? undefined : status[type].primary.background,
+    backgroundColor: subtle ? undefined : status[type].secondary.background,
     color: status[type].secondary.foreground.primary,
   };
   const overrideMode = useStatusThemeColor(type);
@@ -50,6 +52,7 @@ export const MessageBox = ({
       className={andIf({
         [style.container]: true,
         [style.borderRadius]: borderRadius,
+        [style.subtle]: subtle
       })}
       style={backgroundColorStyle}
     >

src/components/message-box/message-box.module.css

@@ -6,6 +6,10 @@
 .borderRadius {
   border-radius: token('border.radius.regular');
 }
+.subtle {
+  background-color: token('color.background.neutral.0.background') !important;
+  border: none;
+}
 .content {
   display: flex;
   flex-direction: column;

src/modules/global-messages/context.tsx

@@ -54,9 +54,11 @@ function subscribeToActiveGlobalMessagesFromFirestore(
   const q = query(
     collection(db, 'globalMessagesV2'),
     where('active', '==', true),
-    where('context', 'array-contains-any', [
-      GlobalMessageContextEnum.plannerWeb,
-    ]),
+    where(
+      'context',
+      'array-contains-any',
+      Object.values(GlobalMessageContextEnum),
+    ),
   ).withConverter<GlobalMessageType | undefined>(globalMessageConverter);
 
   return onSnapshot(q, (querySnapshot) => {

src/modules/global-messages/global-messages.tsx

@@ -2,7 +2,7 @@ import { MessageBox } from '@atb/components/message-box';
 import { getTextForLanguage, useTranslation } from '@atb/translations';
 import { and } from '@atb/utils/css';
 import { useActiveGlobalMessages } from './context';
-import { GlobalMessageContextEnum } from './types';
+import { GlobalMessageContextEnum, GlobalMessageType } from './types';
 import style from './global-messages.module.css';
 import { motion } from 'framer-motion';
 
@@ -46,6 +46,7 @@ export function GlobalMessages({ context, className }: GlobalMessagesProps) {
               type={message.type}
               title={getTextForLanguage(message.title, language)}
               message={getTextForLanguage(message.body, language) ?? ''}
+              subtle={message.subtle}
             />
           </motion.div>
         ))}

src/modules/global-messages/types.ts

@@ -10,6 +10,10 @@ const messageModeSchema = z.union([
 
 export enum GlobalMessageContextEnum {
   plannerWeb = 'planner-web',
+  plannerWebDepartures = 'planner-web-departures',
+  plannerWebDeparturesDetails = 'planner-web-departures-details',
+  plannerWebTrip = 'planner-web-trip',
+  plannerWebDetails = 'planner-web-details',
 }
 
 export const globalMessageTypeSchema = z.object({

src/page-modules/assistant/details/details.module.css

@@ -7,6 +7,7 @@
   grid-template-columns: 2fr 3fr;
   grid-template-areas:
     'header header'
+    'messages messages'
     'trip map';
   gap: token('spacing.large');
 }
@@ -16,6 +17,7 @@
     grid-template-areas:
       'header'
       'map'
+      'messages'
       'trip';
   }
 }
@@ -56,6 +58,9 @@
     display: none;
   }
 }
+.tripMessages {
+  grid-area: messages;
+}
 .tripContainer {
   grid-area: trip;
   display: flex;

src/page-modules/assistant/details/index.tsx

@@ -14,6 +14,7 @@ import { useRouter } from 'next/router';
 import { tripQueryStringToQueryParams } from './utils';
 import { MessageBox } from '@atb/components/message-box';
 import { getBookingStatus } from '@atb/modules/flexible/utils';
+import { GlobalMessageContextEnum, GlobalMessages } from '@atb/modules/global-messages';
 
 export type AssistantDetailsProps = {
   tripPattern: TripPatternWithDetails;
@@ -79,6 +80,7 @@ export function AssistantDetails({ tripPattern }: AssistantDetailsProps) {
           </div>
         </div>
       </div>
+      <GlobalMessages className={style.tripMessages} context={GlobalMessageContextEnum.plannerWebDetails} />
       <div className={style.tripContainer}>
         {requireTicketBooking && (
           <MessageBox

src/page-modules/assistant/trip/index.tsx

@@ -17,6 +17,7 @@ import TripPattern from './trip-pattern';
 import EmptySearch from '@atb/components/loading-empty-results';
 import { LoadingIcon } from '@atb/components/loading';
 import ScreenReaderOnly from '@atb/components/screen-reader-only';
+import { GlobalMessageContextEnum, GlobalMessages } from '@atb/modules/global-messages';
 
 export type TripProps = {
   tripQuery: FromToTripQuery;
@@ -89,6 +90,8 @@ export default function Trip({ tripQuery, fallback }: TripProps) {
   return (
     <>
       <ScreenReaderOnly text={t(PageText.Assistant.trip.resultsFound)} role='status' />
+
+      <GlobalMessages context={GlobalMessageContextEnum.plannerWebTrip} />
       <div className={style.tripResults}>
         {nonTransitTrips && nonTransits.length > 0 && (
           <div className={style.nonTransitResult}>

src/page-modules/departures/__tests__/departure-details.test.tsx

@@ -4,6 +4,7 @@ import { afterEach, describe, expect, it } from 'vitest';
 import userEvent from '@testing-library/user-event';
 import { DeparturesDetails } from '../details';
 import { formatDestinationDisplay } from '../utils';
+import { GlobalMessageContextProvider } from '@atb/modules/global-messages';
 
 afterEach(function () {
   cleanup();
@@ -13,9 +14,15 @@ const serviceJourneyId = 'ATB:ServiceJourney:22_230306097862461_113';
 const date = '2023-11-10';
 const fromQuayId = 'NSR:Quay:74990';
 
+const customRender = (ui: React.ReactNode) => {
+  return render(
+    <GlobalMessageContextProvider>{ui}</GlobalMessageContextProvider>,
+  );
+};
+
 describe('departure details page', function () {
   it('should render correct header', () => {
-    const output = render(
+    const output = customRender(
       <DeparturesDetails
         fromQuayId={fromQuayId}
         serviceJourney={serviceJourneyFixture}
@@ -29,7 +36,7 @@ describe('departure details page', function () {
   });
 
   it('should not render passed quays', () => {
-    const output = render(
+    const output = customRender(
       <DeparturesDetails
         fromQuayId={fromQuayId}
         serviceJourney={serviceJourneyFixture}
@@ -56,7 +63,7 @@ describe('departure details page', function () {
   });
 
   it('should render passed departures when collapse button is clicked', async () => {
-    const output = render(
+    const output = customRender(
       <DeparturesDetails
         fromQuayId={fromQuayId}
         serviceJourney={serviceJourneyFixture}
@@ -91,7 +98,7 @@ describe('departure details page', function () {
       fromQuayIndex,
       serviceJourneyFixture.estimatedCalls.length,
     );
-    const output = render(
+    const output = customRender(
       <DeparturesDetails
         fromQuayId={fromQuayId}
         serviceJourney={serviceJourneyFixture}

src/page-modules/departures/__tests__/departure.test.tsx

@@ -13,6 +13,7 @@ import { NearestStopPlaces } from '..';
 import { GeocoderApi } from '@atb/page-modules/departures/server/geocoder';
 import Search from '@atb/components/search/search';
 import { sortQuays } from '../server/journey-planner/utils';
+import { GlobalMessageContextProvider } from '@atb/modules/global-messages';
 
 afterEach(function () {
   cleanup();
@@ -22,6 +23,12 @@ vi.mock('next/router', () => require('next-router-mock'));
 
 mockRouter.useParser(createDynamicRouteParser(['/departures/[id]']));
 
+const customRender = (ui: React.ReactNode) => {
+  return render(
+    <GlobalMessageContextProvider>{ui}</GlobalMessageContextProvider>,
+  );
+};
+
 describe('departure page', function () {
   it('Should return props from getServerSideProps', async () => {
     await mockRouter.push('/departures/NSR:StopPlace:123');
@@ -99,15 +106,15 @@ describe('departure page', function () {
   });
 
   it('should render quays', () => {
-    const output = render(<StopPlace departures={departureDataFixture} />);
+    const output = customRender(<StopPlace departures={departureDataFixture} />);
 
     departureDataFixture.quays.forEach((q) =>
       expect(output.getByText(q.name)).toBeInTheDocument(),
     );
   });
 
   it('should render estimated calls', () => {
-    const output = render(<StopPlace departures={departureDataFixture} />);
+    const output = customRender(<StopPlace departures={departureDataFixture} />);
     const lists = output.getAllByRole('list');
     const { getAllByRole } = within(lists[0]);
     const items = getAllByRole('listitem');
@@ -117,7 +124,7 @@ describe('departure page', function () {
   });
 
   it('Should collapse estimated calls list', async () => {
-    const output = render(<StopPlace departures={departureDataFixture} />);
+    const output = customRender(<StopPlace departures={departureDataFixture} />);
     const button = screen.getAllByRole('button', {
       name: 'Aktiver for å minimere',
     });

src/page-modules/departures/details/index.tsx

@@ -12,6 +12,7 @@ import style from './details.module.css';
 import { EstimatedCallRows } from './estimated-call-rows';
 import { addMetadataToEstimatedCalls } from './utils';
 import { formatDestinationDisplay } from '../utils';
+import { GlobalMessageContextEnum, GlobalMessages } from '@atb/modules/global-messages';
 
 export type DeparturesDetailsProps = {
   fromQuayId?: string;
@@ -80,6 +81,7 @@ export function DeparturesDetails({
           />
           <Typo.h2 textType="heading--big">{title}</Typo.h2>
         </div>
+        <GlobalMessages context={GlobalMessageContextEnum.plannerWebDeparturesDetails} />
         {realtimeText && !focusedCall.cancellation && (
           <div className={style.realtimeText}>
             <ColorIcon icon="status/Realtime" size="xSmall" />

src/page-modules/departures/stop-place/index.tsx

@@ -30,6 +30,7 @@ import style from './stop-place.module.css';
 import { formatDestinationDisplay } from '../utils';
 import { useTheme } from '@atb/modules/theme';
 import { formatQuayName } from '@atb/page-modules/departures/details/utils';
+import { GlobalMessageContextEnum, GlobalMessages } from '@atb/modules/global-messages';
 
 export type StopPlaceProps = {
   departures: DepartureData;
@@ -60,6 +61,7 @@ export function StopPlace({ departures }: StopPlaceProps) {
         role="status"
       />
 
+      <GlobalMessages className={style.stopPlaceMessages} context={GlobalMessageContextEnum.plannerWebDepartures} />
       <div className={style.quaysContainer}>
         <button
           onClick={() => router.reload()}

src/page-modules/departures/stop-place/stop-place.module.css

@@ -1,11 +1,15 @@
 .stopPlaceContainer {
   display: grid;
   grid-template-columns: 2fr 3fr;
-  grid-auto-rows: minmax(37.5rem, auto) auto;
-  grid-template-areas: 'quays map';
+  grid-auto-rows: auto minmax(37.5rem, auto) auto;
+  grid-template-areas: 'messages messages' 'quays map';
   gap: token('spacing.small');
 }
 
+.stopPlaceMessages {
+  grid-area: messages;
+}
+
 .mapContainer {
   grid-area: map;
   max-height: 37.5rem;
@@ -137,7 +141,7 @@
 
 @media only screen and (max-width: 650px) {
   .stopPlaceContainer {
-    grid-template-areas: 'map' 'quays';
+    grid-template-areas: 'map' 'messages' 'quays';
     grid-template-columns: auto;
     grid-template-rows: auto;
   }