From fc5df739f58a3f2c291d620efb931d4b4764deaa Mon Sep 17 00:00:00 2001
From: Hannah Purcell <69368883+hannahpurcell@users.noreply.github.com>
Date: Fri, 29 Mar 2024 16:09:20 -0400
Subject: [PATCH] fix: Moved "Return to Regular Route" into root directions
 list (#2521)

* Test out moving the "return to route" to the root directions list

* Only add Regular Route after detour is finished

* Updated wording to match figma

* Added check: "regular route" only appears when detour is finished

Co-authored-by: Kayla Firestack <firestack@users.noreply.github.com>
---
 .../src/components/detours/diversionPage.tsx  |  1 -
 .../src/components/detours/diversionPanel.tsx | 11 ++-
 assets/src/hooks/useDetour.ts                 |  9 ++-
 .../components/detours/diversionPage.test.tsx | 68 ++++++++++++++++++-
 4 files changed, 80 insertions(+), 9 deletions(-)

diff --git a/assets/src/components/detours/diversionPage.tsx b/assets/src/components/detours/diversionPage.tsx
index f35930d63..57c5e3ff1 100644
--- a/assets/src/components/detours/diversionPage.tsx
+++ b/assets/src/components/detours/diversionPage.tsx
@@ -68,7 +68,6 @@ export const DiversionPage = ({
         ,
         "Turn-by-Turn Directions:",
         ...(directions?.map((v) => v.instruction) ?? []),
-        "Return to Regular Route",
         ,
         "Connection Points:",
         connectionPoints?.start?.name ?? "N/A",
diff --git a/assets/src/components/detours/diversionPanel.tsx b/assets/src/components/detours/diversionPanel.tsx
index 08bf03f03..030a74e47 100644
--- a/assets/src/components/detours/diversionPanel.tsx
+++ b/assets/src/components/detours/diversionPanel.tsx
@@ -63,14 +63,13 @@ export const DiversionPanel = ({
             <ListGroup as="ol">
               {directions.map((d) => (
                 <ListGroup.Item key={d.instruction} as="li">
-                  {d.instruction}
+                  {d.instruction == "Regular Route" ? (
+                    <strong className="fw-medium">{d.instruction}</strong>
+                  ) : (
+                    d.instruction
+                  )}
                 </ListGroup.Item>
               ))}
-              {detourFinished && (
-                <ListGroup.Item as="li">
-                  <strong className="fw-medium">Return to Regular Route</strong>
-                </ListGroup.Item>
-              )}
             </ListGroup>
           ) : (
             <DirectionsHelpText />
diff --git a/assets/src/hooks/useDetour.ts b/assets/src/hooks/useDetour.ts
index 3abdccfac..36ca5138c 100644
--- a/assets/src/hooks/useDetour.ts
+++ b/assets/src/hooks/useDetour.ts
@@ -88,7 +88,14 @@ export const useDetour = ({ routePatternId, shape }: OriginalRoute) => {
   )
 
   const coordinates = isOk(detourShape) ? detourShape.ok.coordinates : []
-  const directions = isOk(detourShape) ? detourShape.ok.directions : undefined
+  // Only append direction "Regular Route" after detour is finished
+  const directions = isOk(detourShape)
+    ? finishedDetour
+      ? detourShape.ok.directions?.concat({
+          instruction: "Regular Route",
+        })
+      : detourShape.ok.directions
+    : undefined
 
   const canAddWaypoint = () => startPoint !== null && endPoint === null
   const addWaypoint = canAddWaypoint()
diff --git a/assets/tests/components/detours/diversionPage.test.tsx b/assets/tests/components/detours/diversionPage.test.tsx
index f590d8c76..2fa475099 100644
--- a/assets/tests/components/detours/diversionPage.test.tsx
+++ b/assets/tests/components/detours/diversionPage.test.tsx
@@ -242,6 +242,72 @@ describe("DiversionPage", () => {
     expect(screen.queryByTitle("Detour End")).toBeNull()
   })
 
+  test("shows 'Regular Route' text when the detour is finished", async () => {
+    jest.mocked(fetchDetourDirections).mockResolvedValue(
+      ok(
+        detourShapeFactory.build({
+          directions: [
+            { instruction: "Turn left on Main Street" },
+            { instruction: "Turn right on High Street" },
+            { instruction: "Turn sharp right on Broadway" },
+          ],
+        })
+      )
+    )
+
+    jest
+      .mocked(fetchFinishedDetour)
+      .mockResolvedValue(finishedDetourFactory.build())
+
+    const { container } = render(<DiversionPage />)
+
+    act(() => {
+      fireEvent.click(originalRouteShape.get(container))
+    })
+
+    act(() => {
+      fireEvent.click(originalRouteShape.get(container))
+    })
+
+    expect(await screen.findByText("Regular Route")).toBeVisible()
+  })
+
+  test("does not show 'Regular Route' when detour is not finished", async () => {
+    jest.mocked(fetchDetourDirections).mockResolvedValue(
+      ok(
+        detourShapeFactory.build({
+          directions: [
+            { instruction: "Turn left on Main Street" },
+            { instruction: "Turn right on High Street" },
+            { instruction: "Turn sharp right on Broadway" },
+          ],
+        })
+      )
+    )
+
+    jest
+      .mocked(fetchFinishedDetour)
+      .mockResolvedValue(finishedDetourFactory.build())
+
+    const { container } = render(<DiversionPage />)
+
+    expect(screen.queryByText("Regular Route")).not.toBeInTheDocument()
+
+    act(() => {
+      fireEvent.click(originalRouteShape.get(container))
+    })
+
+    act(() => {
+      fireEvent.click(originalRouteShape.get(container))
+    })
+
+    expect(await screen.findByText("Regular Route")).toBeVisible()
+
+    fireEvent.click(screen.getByRole("button", { name: "Undo" }))
+
+    expect(screen.queryByText("Regular Route")).not.toBeInTheDocument()
+  })
+
   test("missed stops are filled in when detour is complete", async () => {
     const stop1 = stopFactory.build()
     const stop2 = stopFactory.build()
@@ -410,7 +476,7 @@ describe("DiversionPage", () => {
           "Turn left on Main Street",
           "Turn right on High Street",
           "Turn sharp right on Broadway",
-          "Return to Regular Route",
+          "Regular Route",
           ,
           "Connection Points:",
           start.name,