feat: Add ability to deactivate an active detour (#2721)

assets/src/components/detours/activeDetourPanel.tsx

@@ -1,12 +1,27 @@
 import React from "react"
 import { Panel } from "./diversionPage"
+import { Button } from "react-bootstrap"
 
-export const ActiveDetourPanel = () => (
+export const ActiveDetourPanel = ({
+  onDeactivateDetour,
+}: {
+  onDeactivateDetour: () => void
+}) => (
   <Panel as="article">
     <Panel.Header className="">
       <h1 className="c-diversion-panel__h1 my-3">Active Detour</h1>
     </Panel.Header>
 
-    <Panel.Body className="d-flex flex-column"></Panel.Body>
+    <Panel.Body className="d-flex flex-column">
+      <Panel.Body.Footer>
+        <Button
+          className="m-3 flex-grow-1"
+          variant="missed-stop"
+          onClick={onDeactivateDetour}
+        >
+          Deactivate Detour
+        </Button>
+      </Panel.Body.Footer>
+    </Panel.Body>
   </Panel>
 )

assets/src/components/detours/diversionPage.tsx

@@ -21,6 +21,7 @@ import RoutesContext from "../../contexts/routesContext"
 import { Snapshot } from "xstate"
 import inTestGroup, { TestGroups } from "../../userInTestGroup"
 import { ActiveDetourPanel } from "./activeDetourPanel"
+import { PastDetourPanel } from "./pastDetourPanel"
 
 const displayFieldsFromRouteAndPattern = (
   route: Route,
@@ -243,7 +244,13 @@ export const DiversionPage = ({
               }
             />
           ) : snapshot.matches({ "Detour Drawing": "Active" }) ? (
-            <ActiveDetourPanel />
+            <ActiveDetourPanel
+              onDeactivateDetour={() => {
+                send({ type: "detour.active.deactivate" })
+              }}
+            />
+          ) : snapshot.matches({ "Detour Drawing": "Past" }) ? (
+            <PastDetourPanel />
           ) : null}
         </div>
         <div className="l-diversion-page__map position-relative">

assets/src/components/detours/pastDetourPanel.tsx

@@ -0,0 +1,12 @@
+import React from "react"
+import { Panel } from "./diversionPage"
+
+export const PastDetourPanel = () => (
+  <Panel as="article">
+    <Panel.Header className="">
+      <h1 className="c-diversion-panel__h1 my-3">Past Detour</h1>
+    </Panel.Header>
+
+    <Panel.Body className="d-flex flex-column"></Panel.Body>
+  </Panel>
+)

assets/src/models/createDetourMachine.ts

@@ -60,7 +60,8 @@ export const createDetourMachine = setup({
       | { type: "detour.edit.place-waypoint"; location: ShapePoint }
       | { type: "detour.edit.undo" }
       | { type: "detour.share.copy-detour"; detourText: string }
-      | { type: "detour.share.activate" },
+      | { type: "detour.share.activate" }
+      | { type: "detour.active.deactivate" },
   },
   actors: {
     "fetch-route-patterns": fromPromise<
@@ -417,7 +418,14 @@ export const createDetourMachine = setup({
             },
           },
         },
-        Active: {},
+        Active: {
+          on: {
+            "detour.active.deactivate": {
+              target: "Past",
+            },
+          },
+        },
+        Past: {},
       },
     },
   },

assets/tests/components/detours/diversionPageActivate.test.tsx

@@ -92,4 +92,28 @@ describe("DiversionPage activate workflow", () => {
     ).not.toBeInTheDocument()
     expect(screen.getByRole("heading", { name: "Active Detour" })).toBeVisible()
   })
+
+  test("'Active Detour' screen has a 'Deactivate Detour' button", async () => {
+    await diversionPageOnReviewScreen()
+
+    await userEvent.click(activateDetourButton.get())
+
+    expect(
+      screen.getByRole("button", { name: "Deactivate Detour" })
+    ).toBeVisible()
+  })
+
+  test("clicking the 'Deactivate Detour' button shows the 'Past Detour' screen", async () => {
+    await diversionPageOnReviewScreen()
+
+    await userEvent.click(activateDetourButton.get())
+
+    await userEvent.click(
+      screen.getByRole("button", { name: "Deactivate Detour" })
+    )
+    expect(
+      screen.queryByRole("heading", { name: "Active Detour" })
+    ).not.toBeInTheDocument()
+    expect(screen.getByRole("heading", { name: "Past Detour" })).toBeVisible()
+  })
 })