From dbf13451eeb15d8172a0a99de427e79a9d692e44 Mon Sep 17 00:00:00 2001
From: Hannah Purcell <hpurcell@mbta.com>
Date: Tue, 26 Nov 2024 17:33:19 -0500
Subject: [PATCH] tweak: Move turn by turn directions in side panel

---
 .../detours/detourPanels/activeDetourPanel.tsx     | 12 ++++++------
 .../detours/detourPanels/pastDetourPanel.tsx       | 12 ++++++------
 assets/src/components/detours/diversionPage.tsx    |  6 +++---
 .../components/detours/diversionPage.test.tsx      | 14 +++++++-------
 4 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/assets/src/components/detours/detourPanels/activeDetourPanel.tsx b/assets/src/components/detours/detourPanels/activeDetourPanel.tsx
index 1a475e018..58b4f7625 100644
--- a/assets/src/components/detours/detourPanels/activeDetourPanel.tsx
+++ b/assets/src/components/detours/detourPanels/activeDetourPanel.tsx
@@ -80,12 +80,6 @@ export const ActiveDetourPanel = ({
             routeDirection={routeDirection}
           />
 
-          {connectionPoints && (
-            <ConnectionPoints connectionPoints={connectionPoints} />
-          )}
-
-          {missedStops && <MissedStops missedStops={missedStops} />}
-
           <section className="pb-3">
             <h2 className="c-diversion-panel__h2">Detour Directions</h2>
             {directions ? (
@@ -102,6 +96,12 @@ export const ActiveDetourPanel = ({
               </ListGroup>
             ) : null}
           </section>
+
+          {connectionPoints && (
+            <ConnectionPoints connectionPoints={connectionPoints} />
+          )}
+
+          {missedStops && <MissedStops missedStops={missedStops} />}
         </Panel.Body.ScrollArea>
 
         <Panel.Body.Footer>
diff --git a/assets/src/components/detours/detourPanels/pastDetourPanel.tsx b/assets/src/components/detours/detourPanels/pastDetourPanel.tsx
index 6765d33f4..f2f50560d 100644
--- a/assets/src/components/detours/detourPanels/pastDetourPanel.tsx
+++ b/assets/src/components/detours/detourPanels/pastDetourPanel.tsx
@@ -65,12 +65,6 @@ export const PastDetourPanel = ({
           routeDirection={routeDirection}
         />
 
-        {connectionPoints && (
-          <ConnectionPoints connectionPoints={connectionPoints} />
-        )}
-
-        {missedStops && <MissedStops missedStops={missedStops} />}
-
         <section className="pb-3">
           <h2 className="c-diversion-panel__h2">Detour Directions</h2>
           {directions ? (
@@ -87,6 +81,12 @@ export const PastDetourPanel = ({
             </ListGroup>
           ) : null}
         </section>
+
+        {connectionPoints && (
+          <ConnectionPoints connectionPoints={connectionPoints} />
+        )}
+
+        {missedStops && <MissedStops missedStops={missedStops} />}
       </Panel.Body.ScrollArea>
     </Panel.Body>
   </Panel>
diff --git a/assets/src/components/detours/diversionPage.tsx b/assets/src/components/detours/diversionPage.tsx
index 74e0abde4..7b69e59ee 100644
--- a/assets/src/components/detours/diversionPage.tsx
+++ b/assets/src/components/detours/diversionPage.tsx
@@ -143,15 +143,15 @@ export const DiversionPage = ({
     `Detour ${routeName} ${routeDirection}`,
     routeOrigin,
     ,
+    "Turn-by-Turn Directions:",
+    ...(extendedDirections?.map((v) => v.instruction) ?? []),
+    ,
     "Connection Points:",
     connectionPoints?.start?.name ?? "N/A",
     connectionPoints?.end?.name ?? "N/A",
     ,
     `Missed Stops (${missedStops?.length}):`,
     ...(missedStops?.map(({ name }) => name) ?? ["no stops"]),
-    ,
-    "Turn-by-Turn Directions:",
-    ...(extendedDirections?.map((v) => v.instruction) ?? []),
   ].join("\n")
 
   const routes = useContext(RoutesContext)
diff --git a/assets/tests/components/detours/diversionPage.test.tsx b/assets/tests/components/detours/diversionPage.test.tsx
index b4b7c5388..1ed2f44dd 100644
--- a/assets/tests/components/detours/diversionPage.test.tsx
+++ b/assets/tests/components/detours/diversionPage.test.tsx
@@ -1291,19 +1291,19 @@ describe("DiversionPage", () => {
           `Detour ${routeName} ${routeDirection}`,
           routeOrigin,
           ,
-          "Connection Points:",
-          start.name,
-          end.name,
-          ,
-          `Missed Stops (${stops.length}):`,
-          ...stops.map(({ name }) => name),
-          ,
           "Turn-by-Turn Directions:",
           "From Avenue 1 & Street 2",
           "Turn left on Main Street",
           "Turn right on High Street",
           "Turn sharp right on Broadway",
           "Regular Route",
+          ,
+          "Connection Points:",
+          start.name,
+          end.name,
+          ,
+          `Missed Stops (${stops.length}):`,
+          ...stops.map(({ name }) => name),
         ].join("\n")
       )
     )