feat: Add connectionPoints and missedStops to the “Review Detour” pan…

…el (#2878)
mbta · Oct 25, 2024 · 611f99c · 611f99c
1 parent 9f486ae
commit 611f99c
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 1 deletion.
diff --git a/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx b/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx
@@ -2,18 +2,27 @@ import React, { PropsWithChildren } from "react"
 import { Button, Form } from "react-bootstrap"
 import * as BsIcons from "../../../helpers/bsIcons"
 import { Panel } from "../diversionPage"
-import { CopyButton } from "../detourPanelComponents"
+import {
+  ConnectionPoints,
+  CopyButton,
+  MissedStops,
+} from "../detourPanelComponents"
+import { Stop } from "../../../schedule"
 
 interface DetourFinishedPanelProps extends PropsWithChildren {
   onNavigateBack: () => void
   detourText: string
+  connectionPoints?: [string, string]
+  missedStops?: Stop[]
   onChangeDetourText: (value: string) => void
   onActivateDetour?: () => void
 }
 
 export const DetourFinishedPanel = ({
   onNavigateBack,
   detourText,
+  connectionPoints,
+  missedStops,
   onChangeDetourText,
   onActivateDetour,
   children,
@@ -45,6 +54,11 @@ export const DetourFinishedPanel = ({
           }}
           data-fs-element="Detour Text"
         />
+
+        {connectionPoints && (
+          <ConnectionPoints connectionPoints={connectionPoints} />
+        )}
+        {missedStops && <MissedStops missedStops={missedStops} />}
       </Panel.Body.ScrollArea>
 
       <Panel.Body.Footer className="d-flex flex-column">

diff --git a/assets/src/components/detours/diversionPage.tsx b/assets/src/components/detours/diversionPage.tsx
@@ -261,6 +261,11 @@ export const DiversionPage = ({
         <DetourFinishedPanel
           onNavigateBack={editDetour}
           detourText={textArea}
+          connectionPoints={[
+            connectionPoints?.start?.name ?? "N/A",
+            connectionPoints?.end?.name ?? "N/A",
+          ]}
+          missedStops={missedStops}
           onChangeDetourText={setTextArea}
           onActivateDetour={
             inTestGroup(TestGroups.DetoursList)

diff --git a/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap b/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap
@@ -460,6 +460,29 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on
                   data-fs-element="Detour Text"
                   style="resize: none;"
                 />
+                <section
+                  class="pb-3"
+                >
+                  <h2
+                    class="c-diversion-panel__h2"
+                  >
+                    Connection Points
+                  </h2>
+                  <ul
+                    class="list-group"
+                  >
+                    <div
+                      class="list-group-item"
+                    >
+                      N/A
+                    </div>
+                    <div
+                      class="list-group-item"
+                    >
+                      N/A
+                    </div>
+                  </ul>
+                </section>
               </div>
               <div
                 class="border-top d-flex mt-auto d-flex flex-column"
@@ -1239,6 +1262,29 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
                 data-fs-element="Detour Text"
                 style="resize: none;"
               />
+              <section
+                class="pb-3"
+              >
+                <h2
+                  class="c-diversion-panel__h2"
+                >
+                  Connection Points
+                </h2>
+                <ul
+                  class="list-group"
+                >
+                  <div
+                    class="list-group-item"
+                  >
+                    N/A
+                  </div>
+                  <div
+                    class="list-group-item"
+                  >
+                    N/A
+                  </div>
+                </ul>
+              </section>
             </div>
             <div
               class="border-top d-flex mt-auto d-flex flex-column"