feat: Contents for past detour page (#2817)

assets/src/components/detours/diversionPage.tsx

@@ -366,7 +366,19 @@ export const DiversionPage = ({
               ) : null}
             </ActiveDetourPanel>
           ) : snapshot.matches({ "Detour Drawing": "Past" }) ? (
-            <PastDetourPanel />
+            <PastDetourPanel
+              directions={extendedDirections}
+              connectionPoints={[
+                connectionPoints?.start?.name ?? "N/A",
+                connectionPoints?.end?.name ?? "N/A",
+              ]}
+              missedStops={missedStops}
+              routeName={routeName ?? "??"}
+              routeDescription={routeDescription ?? "??"}
+              routeOrigin={routeOrigin ?? "??"}
+              routeDirection={routeDirection ?? "??"}
+              onNavigateBack={onClose}
+            />
           ) : null}
         </div>
         <div className="l-diversion-page__map position-relative">

assets/src/components/detours/pastDetourPanel.tsx

@@ -1,12 +1,85 @@
 import React from "react"
 import { Panel } from "./diversionPage"
+import { DetourDirection } from "../../models/detour"
+import { Stop } from "../../schedule"
+import { ArrowLeft } from "../../helpers/bsIcons"
+import { Button, ListGroup } from "react-bootstrap"
+import { AffectedRoute, MissedStops } from "./detourPanelComponents"
 
-export const PastDetourPanel = () => (
+export interface PastDetourPanelProps {
+  directions?: DetourDirection[]
+  connectionPoints: [string, string]
+  missedStops?: Stop[]
+  routeName: string
+  routeDescription: string
+  routeOrigin: string
+  routeDirection: string
+  onNavigateBack: () => void
+}
+
+export const PastDetourPanel = ({
+  directions,
+  connectionPoints: [connectionPointStart, connectionPointEnd],
+  missedStops,
+  routeName,
+  routeDescription,
+  routeOrigin,
+  routeDirection,
+  onNavigateBack,
+}: PastDetourPanelProps) => (
   <Panel as="article">
     <Panel.Header className="">
-      <h1 className="c-diversion-panel__h1 my-3">Past Detour</h1>
+      <h1 className="c-diversion-panel__h1 my-3">View Past Detour</h1>
     </Panel.Header>
 
-    <Panel.Body className="d-flex flex-column"></Panel.Body>
+    <Panel.Body className="d-flex flex-column">
+      <Panel.Body.ScrollArea>
+        <div className="d-flex justify-content-between align-items-center">
+          {onNavigateBack && (
+            <Button
+              className="icon-link my-3"
+              variant="outline-primary"
+              onClick={onNavigateBack}
+            >
+              <ArrowLeft />
+              Back
+            </Button>
+          )}
+        </div>
+        <AffectedRoute
+          routeName={routeName}
+          routeDescription={routeDescription}
+          routeOrigin={routeOrigin}
+          routeDirection={routeDirection}
+        />
+
+        <section className="pb-3">
+          <h2 className="c-diversion-panel__h2">Connection Points</h2>
+          <ListGroup as="ul">
+            <ListGroup.Item>{connectionPointStart}</ListGroup.Item>
+            <ListGroup.Item>{connectionPointEnd}</ListGroup.Item>
+          </ListGroup>
+        </section>
+
+        <MissedStops missedStops={missedStops} />
+
+        <section className="pb-3">
+          <h2 className="c-diversion-panel__h2">Detour Directions</h2>
+          {directions ? (
+            <ListGroup as="ol">
+              {directions.map((d) => (
+                <ListGroup.Item key={d.instruction} as="li">
+                  {d.instruction == "Regular Route" ? (
+                    <strong className="fw-medium">{d.instruction}</strong>
+                  ) : (
+                    d.instruction
+                  )}
+                </ListGroup.Item>
+              ))}
+            </ListGroup>
+          ) : null}
+        </section>
+      </Panel.Body.ScrollArea>
+    </Panel.Body>
   </Panel>
 )

assets/stories/skate-components/detours/pastDetourPanel.stories.tsx

@@ -2,14 +2,34 @@ import type { Meta, StoryObj } from "@storybook/react"
 
 import React from "react"
 import { PastDetourPanel } from "../../../src/components/detours/pastDetourPanel"
+import { stopFactory } from "../../../tests/factories/stop"
 
 const meta = {
   component: PastDetourPanel,
   parameters: {
     layout: "fullscreen",
     stretch: true,
   },
-  args: {},
+  args: {
+    directions: [
+      { instruction: "Start at Centre St & John St" },
+      { instruction: "Right on John St" },
+      { instruction: "Left on Abbotsford Rd" },
+      { instruction: "Right on Boston St" },
+      { instruction: "Regular Route" },
+    ],
+    connectionPoints: ["Centre St & John St", "Boston St"],
+    missedStops: [
+      stopFactory.build({ name: "Example St @ Sample Ave" }),
+      stopFactory.build({ name: "Example St opp Random Way" }),
+      stopFactory.build({ name: "Example St @ Fake Blvd" }),
+    ],
+    routeName: "66",
+    routeDescription: "Harvard via Allston",
+    routeOrigin: "from Andrew Station",
+    routeDirection: "Outbound",
+    onNavigateBack: undefined,
+  },
   // The bootstrap CSS reset is supposed to set box-sizing: border-box by
   // default, we should be able to remove this after that is added
   decorators: [

assets/tests/components/detours/diversionPage.deactivate.test.tsx

@@ -82,7 +82,7 @@ const threeHoursRadio = byRole("radio", { name: "3 hours" })
 const constructionRadio = byRole("radio", { name: "Construction" })
 
 const activeDetourHeading = byRole("heading", { name: "Active Detour" })
-const pastDetourHeading = byRole("heading", { name: "Past Detour" })
+const pastDetourHeading = byRole("heading", { name: "View Past Detour" })
 const returnModalHeading = byRole("heading", {
   name: "Return to regular route?",
 })