feat: departure details page (#62)

src/components/line-chip/index.tsx

@@ -0,0 +1,47 @@
+import {
+  TransportIcon,
+  useTransportationThemeColor,
+} from '@atb/components/transport-mode/transport-icon';
+import {
+  TransportModeType,
+  TransportSubmodeType,
+} from '@atb/components/transport-mode/types';
+import { Typo } from '@atb/components/typography';
+import style from './line-chip.module.css';
+
+export type LineChipProps = {
+  transportMode: TransportModeType;
+  transportSubmode?: TransportSubmodeType;
+  publicCode: string;
+};
+
+export default function LineChip({
+  transportMode,
+  transportSubmode,
+  publicCode,
+}: LineChipProps) {
+  const transportationColor = useTransportationThemeColor({
+    mode: transportMode,
+    subMode: transportSubmode,
+  });
+
+  return (
+    <div
+      className={style.container}
+      style={{
+        backgroundColor: transportationColor.backgroundColor,
+        color: transportationColor.textColor,
+      }}
+    >
+      <TransportIcon
+        mode={{
+          mode: transportMode,
+          subMode: transportSubmode,
+        }}
+      />
+      <Typo.span className={style.publicCode} textType="body__primary--bold">
+        {publicCode}
+      </Typo.span>
+    </div>
+  );
+}

src/components/line-chip/line-chip.module.css

@@ -0,0 +1,14 @@
+.container {
+  min-width: 4.125rem;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  gap: var(--spacings-xSmall);
+  padding: var(--spacings-small);
+  border-radius: var(--spacings-small);
+}
+.publicCode {
+  text-align: right;
+}

src/modules/time-representation/index.ts

@@ -0,0 +1,31 @@
+import { secondsBetween } from '@atb/utils/date';
+
+const DEFAULT_THRESHOLD_AIMED_EXPECTED_IN_SECONDS = 60;
+
+type TimeValues = {
+  aimedTime: string;
+  expectedTime?: string;
+  missingRealTime?: boolean;
+};
+
+type TimeRepresentationType =
+  | 'no-realtime'
+  | 'no-significant-difference'
+  | 'significant-difference';
+
+export function getTimeRepresentationType({
+  missingRealTime,
+  aimedTime,
+  expectedTime,
+}: TimeValues): TimeRepresentationType {
+  if (missingRealTime) {
+    return 'no-realtime';
+  }
+  if (!expectedTime) {
+    return 'no-significant-difference';
+  }
+  const secondsDifference = Math.abs(secondsBetween(aimedTime, expectedTime));
+  return secondsDifference <= DEFAULT_THRESHOLD_AIMED_EXPECTED_IN_SECONDS
+    ? 'no-significant-difference'
+    : 'significant-difference';
+}

src/page-modules/assistant/trip/trip-pattern/utils.ts

@@ -9,6 +9,7 @@ import { Language, TranslateFunction, PageText } from '@atb/translations';
 import dictionary from '@atb/translations/dictionary';
 import { screenReaderPause } from '@atb/components/typography/utils';
 import { transportModeToTranslatedString } from '@atb/components/transport-mode';
+import { getTimeRepresentationType } from '@atb/modules/time-representation';
 
 export const tripSummary = (
   tripPattern: TripPattern,
@@ -231,31 +232,3 @@ export function getFilteredLegsByWalkOrWaitTime(tripPattern: TripPattern) {
 function isLegFlexibleTransport(leg: Leg): boolean {
   return !!leg.line?.flexibleLineType;
 }
-
-const DEFAULT_THRESHOLD_AIMED_EXPECTED_IN_MINUTES = 1;
-
-type TimeValues = {
-  aimedTime: string;
-  expectedTime?: string;
-  missingRealTime?: boolean;
-};
-type TimeRepresentationType =
-  | 'no-realtime'
-  | 'no-significant-difference'
-  | 'significant-difference';
-function getTimeRepresentationType({
-  missingRealTime,
-  aimedTime,
-  expectedTime,
-}: TimeValues): TimeRepresentationType {
-  if (missingRealTime) {
-    return 'no-realtime';
-  }
-  if (!expectedTime) {
-    return 'no-significant-difference';
-  }
-  const secondsDifference = Math.abs(secondsBetween(aimedTime, expectedTime));
-  return secondsDifference <= DEFAULT_THRESHOLD_AIMED_EXPECTED_IN_MINUTES * 60
-    ? 'no-significant-difference'
-    : 'significant-difference';
-}

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

@@ -0,0 +1,106 @@
+import { serviceJourneyFixture } from './service-journey-data.fixture';
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import { DeparturesDetails } from '../details';
+
+afterEach(function () {
+  cleanup();
+});
+
+const serviceJourneyId = 'ATB:ServiceJourney:22_230306097862461_113';
+const date = '2023-11-10';
+const fromQuayId = 'NSR:Quay:74990';
+
+describe('departure details page', function () {
+  it('should render correct header', () => {
+    const output = render(
+      <DeparturesDetails
+        fromQuayId={fromQuayId}
+        serviceJourney={serviceJourneyFixture}
+      />,
+    );
+    expect(
+      output.getByText(
+        `${serviceJourneyFixture.line.publicCode} ${serviceJourneyFixture.estimatedCalls[0].destinationDisplay.frontText}`,
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it('should not render passed quays', () => {
+    const output = render(
+      <DeparturesDetails
+        fromQuayId={fromQuayId}
+        serviceJourney={serviceJourneyFixture}
+      />,
+    );
+
+    expect(
+      output.queryByText(
+        `${serviceJourneyFixture.estimatedCalls[0].quay.name}`,
+      ),
+    ).toBeInTheDocument();
+
+    expect(
+      output.queryByText(
+        `${serviceJourneyFixture.estimatedCalls[2].quay.name}`,
+      ),
+    ).not.toBeInTheDocument();
+
+    const fromQuayName =
+      serviceJourneyFixture.estimatedCalls
+        .map((call) => call.quay)
+        .find((quay) => quay.id === fromQuayId)?.name || '';
+    expect(output.queryByText(fromQuayName)).toBeInTheDocument();
+  });
+
+  it('should render passed departures when collapse button is clicked', async () => {
+    const output = render(
+      <DeparturesDetails
+        fromQuayId={fromQuayId}
+        serviceJourney={serviceJourneyFixture}
+      />,
+    );
+    const button = screen.getByRole('button', {
+      name: /mellomstopp/i,
+    });
+
+    await userEvent.click(button);
+
+    expect(
+      output.queryByText(
+        `${serviceJourneyFixture.estimatedCalls[2].quay.name}`,
+      ),
+    ).toBeInTheDocument();
+
+    await userEvent.click(button);
+
+    expect(
+      output.queryByText(
+        `${serviceJourneyFixture.estimatedCalls[2].quay.name}`,
+      ),
+    ).not.toBeInTheDocument();
+  });
+
+  it('should render all departures', async () => {
+    const fromQuayIndex = serviceJourneyFixture.estimatedCalls.findIndex(
+      (call) => call.quay.id === fromQuayId,
+    );
+    const expectedDepartures = serviceJourneyFixture.estimatedCalls.slice(
+      fromQuayIndex,
+      serviceJourneyFixture.estimatedCalls.length,
+    );
+    const output = render(
+      <DeparturesDetails
+        fromQuayId={fromQuayId}
+        serviceJourney={serviceJourneyFixture}
+      />,
+    );
+
+    for (let i = 0; i < expectedDepartures.length; i++) {
+      expect(
+        output.getByText(`${expectedDepartures[i].quay.name}`),
+      ).toBeInTheDocument();
+    }
+  });
+});

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

@@ -63,6 +63,9 @@ describe('departure page', function () {
       estimatedCalls() {
         return {} as any;
       },
+      serviceJourney() {
+        return {} as any;
+      },
       client: null as any,
     };