feat: departure details page

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_MINUTES = 1;
+
+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_MINUTES * 60
+    ? '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.test.tsx

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

src/page-modules/departures/details/decoration-line/decoration-line.module.css

@@ -0,0 +1,35 @@
+.decoration {
+  position: absolute;
+  height: 100%;
+  width: var(--decorationLineWidth);
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  left: calc(var(--spacings-large) / 2 + var(--labelWidth));
+}
+
+.decorationMarker {
+  width: var(--decorationLineEndWidth);
+  height: var(--decorationLineWidth);
+  left: -0.25rem;
+}
+
+.decorationMarker__start {
+  position: absolute;
+  top: 0;
+}
+.decorationMarker__center {
+  position: absolute;
+  top: calc(var(--spacings-large) + var(--spacings-small));
+}
+.decorationMarker__end {
+  position: absolute;
+  bottom: 0;
+}
+
+.decorationLine {
+  height: 1.25rem;
+  flex-grow: 1;
+}

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

@@ -0,0 +1,47 @@
+import style from './decoration-line.module.css';
+
+type DecorationLineProps = {
+  hasStart?: boolean;
+  hasCenter?: boolean;
+  hasEnd?: boolean;
+  color: string;
+};
+
+export default function DecorationLine({
+  color,
+  hasStart,
+  hasCenter,
+  hasEnd,
+}: DecorationLineProps) {
+  const colorStyle = { backgroundColor: color };
+  return (
+    <div className={style.decoration} style={colorStyle}>
+      {hasStart && (
+        <div
+          className={[
+            style.decorationMarker,
+            style.decorationMarker__start,
+          ].join(' ')}
+          style={colorStyle}
+        />
+      )}
+      {hasCenter && (
+        <div
+          className={[
+            style.decorationMarker,
+            style.decorationMarker__center,
+          ].join(' ')}
+          style={colorStyle}
+        />
+      )}
+      {hasEnd && (
+        <div
+          className={[style.decorationMarker, style.decorationMarker__end].join(
+            ' ',
+          )}
+          style={colorStyle}
+        />
+      )}
+    </div>
+  );
+}

src/page-modules/departures/details/departure-time/departure-time.module.css

@@ -0,0 +1,13 @@
+.expectedContainer {
+  display: flex;
+  align-items: center;
+}
+.significantDifferenceContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+.significantDifference {
+  display: flex;
+  align-items: center;
+}

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

@@ -0,0 +1,69 @@
+import { PageText, useTranslation } from '@atb/translations';
+import { formatToClock } from '@atb/utils/date';
+import { Typo } from '@atb/components/typography';
+import { getTimeRepresentationType } from '@atb/modules/time-representation';
+import style from './departure-time.module.css';
+
+type DepartureTimeProps = {
+  aimedDepartureTime: string;
+  expectedDepartureTime: string;
+  realtime: boolean;
+  isStartOfServiceJourney: boolean;
+};
+
+export default function DepartureTime({
+  aimedDepartureTime,
+  expectedDepartureTime,
+  realtime,
+  isStartOfServiceJourney,
+}: DepartureTimeProps) {
+  const { t, language } = useTranslation();
+
+  const representationType = getTimeRepresentationType({
+    aimedTime: aimedDepartureTime,
+    expectedTime: expectedDepartureTime,
+    missingRealTime: !realtime && isStartOfServiceJourney,
+  });
+  const scheduled = formatToClock(aimedDepartureTime, language, 'floor');
+
+  const expected = expectedDepartureTime
+    ? formatToClock(expectedDepartureTime, language, 'floor')
+    : '';
+
+  switch (representationType) {
+    case 'significant-difference': {
+      return (
+        <div className={style.significantDifferenceContainer}>
+          <div className={style.significantDifference}>
+            <Typo.p
+              textType="body__primary"
+              aria-label={`${t(
+                PageText.Departures.details.time.expectedPrefix,
+              )} ${expected}`}
+            >
+              {expected}
+            </Typo.p>
+          </div>
+          <Typo.p
+            textType="body__tertiary"
+            color="secondary"
+            prefix={t(PageText.Departures.details.time.aimedPrefix)}
+            style={{ textDecorationLine: 'line-through' }}
+          >
+            {scheduled}
+          </Typo.p>
+        </div>
+      );
+    }
+    case 'no-realtime': {
+      return <Typo.p textType="body__primary">{scheduled}</Typo.p>;
+    }
+    default: {
+      return (
+        <div className={style.expectedContainer}>
+          <Typo.p textType="body__primary">{expected}</Typo.p>
+        </div>
+      );
+    }
+  }
+}