feat: Make Deactivate Modal match Hi-Fi designs (#2826)

mbta · Sep 30, 2024 · 5476a02 · 5476a02
1 parent 7badb90
commit 5476a02
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 9 deletions.
diff --git a/assets/src/components/detours/activeDetourPanel.tsx b/assets/src/components/detours/activeDetourPanel.tsx
@@ -95,7 +95,7 @@ export const ActiveDetourPanel = ({
         {onOpenDeactivateModal && (
           <Button
             variant="ui-alert"
-            className="flex-grow-1 m-3 icon-link text-light"
+            className="flex-grow-1 m-3 icon-link text-light justify-content-center"
             onClick={onOpenDeactivateModal}
           >
             <StopCircle />

diff --git a/assets/src/components/detours/deactivateDetourModal.tsx b/assets/src/components/detours/deactivateDetourModal.tsx
@@ -1,19 +1,44 @@
 import React from "react"
 import { Button, Modal } from "react-bootstrap"
+import { RoutePill } from "../routePill"
 
 export const DeactivateDetourModal = ({
   onDeactivate,
   onCancel,
+  routeName,
+  routeDescription,
+  routeOrigin,
+  routeDirection,
 }: {
   onDeactivate: () => void
   onCancel: () => void
+  routeName: string
+  routeDescription: string
+  routeOrigin: string
+  routeDirection: string
 }) => {
   return (
-    <Modal show animation={false}>
-      <Modal.Header role="heading">Return to regular route?</Modal.Header>
+    <Modal show animation={false} onHide={onCancel}>
+      <Modal.Header closeButton>
+        <h3 className="fs-3 fw-semibold lh-sm my-1">
+          Return to regular route?
+        </h3>
+      </Modal.Header>
       <Modal.Body>
-        Are you sure that you want to stop this detour and return to the regular
-        route?
+        <div className="d-flex flex-row gap-2 mb-3">
+          <RoutePill routeName={routeName} />
+          <div>
+            <div className="fw-semibold mb-1">{routeDescription}</div>
+            <div className="fw-normal text-body-secondary fs-6 mb-1">
+              From {routeOrigin.split(" - ")[0]}
+            </div>
+            <div className="fw-normal fs-6">{routeDirection}</div>
+          </div>
+        </div>
+        <p>
+          Are you sure that you want to stop this detour and return to the
+          regular route?
+        </p>
       </Modal.Body>
       <Modal.Footer>
         <Button variant="outline-primary" onClick={onCancel}>
@@ -24,7 +49,7 @@ export const DeactivateDetourModal = ({
           onClick={onDeactivate}
           className="text-white"
         >
-          Confirm
+          Return to regular route
         </Button>
       </Modal.Footer>
     </Modal>

diff --git a/assets/src/components/detours/diversionPage.tsx b/assets/src/components/detours/diversionPage.tsx
@@ -392,6 +392,10 @@ export const DiversionPage = ({
                   onCancel={() =>
                     send({ type: "detour.active.deactivate-modal.cancel" })
                   }
+                  routeName={routeName || "??"}
+                  routeDescription={routeDescription || "??"}
+                  routeOrigin={routeOrigin || "??"}
+                  routeDirection={routeDirection || "??"}
                 />
               ) : null}
             </ActiveDetourPanel>

diff --git a/assets/tests/components/detours/diversionPage.deactivate.test.tsx b/assets/tests/components/detours/diversionPage.deactivate.test.tsx
@@ -8,7 +8,7 @@ import { beforeEach, describe, expect, jest, test } from "@jest/globals"
 import "@testing-library/jest-dom/jest-globals"
 import getTestGroups from "../../../src/userTestGroups"
 import { TestGroups } from "../../../src/userInTestGroup"
-import { act, fireEvent, render } from "@testing-library/react"
+import { act, fireEvent, render, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import {
   activateDetourButton,
@@ -88,7 +88,6 @@ const returnModalHeading = byRole("heading", {
 })
 
 const regularRouteButton = byRole("button", { name: "Return to regular route" })
-const confirmButton = byRole("button", { name: "Confirm" })
 const cancelButton = byRole("button", { name: "Cancel" })
 
 describe("DiversionPage deactivate workflow", () => {
@@ -112,7 +111,17 @@ describe("DiversionPage deactivate workflow", () => {
     await diversionPageOnActiveDetourScreen()
 
     await userEvent.click(regularRouteButton.get())
-    await userEvent.click(confirmButton.get())
+
+    // We need to query this button in a different way from other
+    // buttons because it's not the only button with the label "Return
+    // to regular route" on the page, so we need to deterministically
+    // ensure that we're querying the right one.
+    const modal = returnModalHeading.get().parentElement
+      ?.parentElement as HTMLElement
+    const confirmButton = within(modal!).getByRole("button", {
+      name: "Return to regular route",
+    })
+    await userEvent.click(confirmButton)
 
     expect(activeDetourHeading.query()).not.toBeInTheDocument()
     expect(pastDetourHeading.get()).toBeVisible()