diff --git a/src/components/message-box/index.tsx b/src/components/message-box/index.tsx index e868edbb..947151c5 100644 --- a/src/components/message-box/index.tsx +++ b/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['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} > diff --git a/src/components/message-box/message-box.module.css b/src/components/message-box/message-box.module.css index 8b6d6c6c..da825ee5 100644 --- a/src/components/message-box/message-box.module.css +++ b/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'); + border: none; +} .content { display: flex; flex-direction: column; diff --git a/src/modules/global-messages/context.tsx b/src/modules/global-messages/context.tsx index be229565..e5d55dda 100644 --- a/src/modules/global-messages/context.tsx +++ b/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(globalMessageConverter); return onSnapshot(q, (querySnapshot) => { diff --git a/src/modules/global-messages/global-messages.tsx b/src/modules/global-messages/global-messages.tsx index ae39b5ca..53fbeddc 100644 --- a/src/modules/global-messages/global-messages.tsx +++ b/src/modules/global-messages/global-messages.tsx @@ -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} /> ))} diff --git a/src/modules/global-messages/types.ts b/src/modules/global-messages/types.ts index 641720df..e164b6d7 100644 --- a/src/modules/global-messages/types.ts +++ b/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({ diff --git a/src/page-modules/assistant/details/details.module.css b/src/page-modules/assistant/details/details.module.css index 997d84d6..7e6d338c 100644 --- a/src/page-modules/assistant/details/details.module.css +++ b/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; diff --git a/src/page-modules/assistant/details/index.tsx b/src/page-modules/assistant/details/index.tsx index dc4f8f79..72aa9800 100644 --- a/src/page-modules/assistant/details/index.tsx +++ b/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) { +
{requireTicketBooking && ( + +
{nonTransitTrips && nonTransits.length > 0 && (
diff --git a/src/page-modules/departures/__tests__/departure-details.test.tsx b/src/page-modules/departures/__tests__/departure-details.test.tsx index 6eb39f39..0272f658 100644 --- a/src/page-modules/departures/__tests__/departure-details.test.tsx +++ b/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( + {ui}, + ); +}; + describe('departure details page', function () { it('should render correct header', () => { - const output = render( + const output = customRender( { - const output = render( + const output = customRender( { - const output = render( + const output = customRender( require('next-router-mock')); mockRouter.useParser(createDynamicRouteParser(['/departures/[id]'])); +const customRender = (ui: React.ReactNode) => { + return render( + {ui}, + ); +}; + describe('departure page', function () { it('Should return props from getServerSideProps', async () => { await mockRouter.push('/departures/NSR:StopPlace:123'); @@ -99,7 +106,7 @@ describe('departure page', function () { }); it('should render quays', () => { - const output = render(); + const output = customRender(); departureDataFixture.quays.forEach((q) => expect(output.getByText(q.name)).toBeInTheDocument(), @@ -107,7 +114,7 @@ describe('departure page', function () { }); it('should render estimated calls', () => { - const output = render(); + const output = customRender(); 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(); + const output = customRender(); const button = screen.getAllByRole('button', { name: 'Aktiver for å minimere', }); diff --git a/src/page-modules/departures/details/index.tsx b/src/page-modules/departures/details/index.tsx index 0332e1bb..21738c7b 100644 --- a/src/page-modules/departures/details/index.tsx +++ b/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({ /> {title}
+ {realtimeText && !focusedCall.cancellation && (
diff --git a/src/page-modules/departures/stop-place/index.tsx b/src/page-modules/departures/stop-place/index.tsx index 9fae81b9..d79d402a 100644 --- a/src/page-modules/departures/stop-place/index.tsx +++ b/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" /> +