From 611f99c62408cfebf598d253b1e6b585dad463b2 Mon Sep 17 00:00:00 2001
From: Hannah Purcell <69368883+hannahpurcell@users.noreply.github.com>
Date: Fri, 25 Oct 2024 10:24:11 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20Add=20connectionPoints=20and=20missedSt?=
 =?UTF-8?q?ops=20to=20the=20=E2=80=9CReview=20Detour=E2=80=9D=20panel=20(#?=
 =?UTF-8?q?2878)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detourPanels/detourFinishedPanel.tsx      | 16 ++++++-
 .../src/components/detours/diversionPage.tsx  |  5 ++
 .../detoursListPage.openDetour.test.tsx.snap  | 46 +++++++++++++++++++
 3 files changed, 66 insertions(+), 1 deletion(-)

diff --git a/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx b/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx
index 3f153c643..2aa5d1fc9 100644
--- a/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx
+++ b/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx
@@ -2,11 +2,18 @@ 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
 }
@@ -14,6 +21,8 @@ interface DetourFinishedPanelProps extends PropsWithChildren {
 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
index 3b95166ae..d29ac88a0 100644
--- 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
index b50e69518..c75712caf 100644
--- 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"