feat: highlight travelled segment in departure details

src/components/map/use-map-legs.ts

@@ -56,7 +56,9 @@ export const useMapLegs = (
         t(ComponentText.Map.map.startPoint),
         background.accent[0],
       );
-      const endTextPoint = createStartEndTextPoint(endMapLeg.points[0]);
+      const endTextPoint = createStartEndTextPoint(
+        endMapLeg.points[endMapLeg.points.length - 1],
+      );
       const endTextLayer = createStartEndTextLayer(
         endTextSourceId,
         t(ComponentText.Map.map.endPoint),

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

@@ -82,7 +82,8 @@ export default function TripSection({
     leg.serviceJourney?.id &&
     leg.serviceDate &&
     leg.fromPlace.quay?.id
-      ? `/departures/details/${leg.serviceJourney.id}?date=${leg.serviceDate}&fromQuayId=${leg.fromPlace.quay.id}`
+      ? `/departures/details/${leg.serviceJourney.id}?date=${leg.serviceDate}&fromQuayId=${leg.fromPlace.quay.id}` +
+        (leg.toPlace.quay?.id ? `&toQuayId=${leg.toPlace.quay.id}` : '')
       : undefined;
 
   return (

src/page-modules/departures/details/estimated-call-rows.tsx

@@ -25,13 +25,15 @@ export type EstimatedCallRowsProps = {
   mode: TransportModeType;
   subMode?: TransportSubmode;
   alreadyShownSituationNumbers: string[];
+  toQuayId?: string;
 };
 
 export function EstimatedCallRows({
   calls,
   mode,
   subMode,
   alreadyShownSituationNumbers,
+  toQuayId,
 }: EstimatedCallRowsProps) {
   const { t } = useTranslation();
   const [collapsed, setCollapsed] = useState(true);
@@ -89,6 +91,7 @@ export function EstimatedCallRows({
                 situations={getSituationsToShowForCall(
                   call,
                   alreadyShownSituationNumbers,
+                  toQuayId,
                 )}
               />
             </motion.div>

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

@@ -25,11 +25,13 @@ import { useGoBack } from '@atb/utils/use-go-back';
 
 export type DeparturesDetailsProps = {
   fromQuayId?: string;
+  toQuayId?: string;
   serviceJourney: ServiceJourneyType;
 };
 
 export function DeparturesDetails({
   fromQuayId,
+  toQuayId,
   serviceJourney,
 }: DeparturesDetailsProps) {
   const { t } = useTranslation();
@@ -64,7 +66,7 @@ export function DeparturesDetails({
   const estimatedCallsWithMetadata = addMetadataToEstimatedCalls(
     serviceJourney.estimatedCalls,
     fromQuayId,
-    undefined,
+    toQuayId,
   );
 
   const notices = getNoticesForServiceJourney(serviceJourney, fromQuayId);
@@ -143,6 +145,7 @@ export function DeparturesDetails({
           mode={serviceJourney.transportMode ?? 'unknown'}
           subMode={serviceJourney.transportSubmode}
           alreadyShownSituationNumbers={alreadyShownSituationNumbers}
+          toQuayId={toQuayId}
         />
       </div>
     </section>

src/page-modules/departures/server/journey-planner/index.ts

@@ -64,6 +64,7 @@ export type ServiceJourneyInput = {
   id: string;
   date: Date;
   fromQuayId: string;
+  toQuayId?: string;
 };
 
 export type JourneyPlannerApi = {
@@ -251,13 +252,20 @@ export function createJourneyApi(
         (call) => call.quay.id === input.fromQuayId,
       )?.quay?.stopPlace;
 
+      const toStopPlace = input.toQuayId
+        ? serviceJourney?.estimatedCalls?.find(
+            (call) => call.quay.id === input.toQuayId,
+          )?.quay?.stopPlace
+        : undefined;
+
       return {
         ...serviceJourney,
         mapLegs: mapToMapLegs(
           serviceJourney?.pointsOnLink,
           transportMode,
           transportSubmode,
           fromStopPlace,
+          toStopPlace,
         ),
       };
     },

src/pages/departures/details/[id].tsx

@@ -31,15 +31,21 @@ export const getServerSideProps = withAccessLogging(
         const id = params.id.toString();
         const date = new Date(query.date.toString());
         const fromQuayId = query.fromQuayId.toString();
+        const toQuayId = query.toQuayId?.toString();
 
         const serviceJourney = await client.serviceJourney({
           id,
           date,
           fromQuayId,
+          toQuayId,
         });
 
         return {
-          props: { fromQuayId, serviceJourney: serviceJourney },
+          props: {
+            fromQuayId,
+            serviceJourney: serviceJourney,
+            ...(toQuayId ? { toQuayId } : {}),
+          },
         };
       },
     ),