From df88720f63a6b672be97e5a31f0d725a4d3717a2 Mon Sep 17 00:00:00 2001
From: Kayla Firestack <kfirestack@mbta.com>
Date: Thu, 3 Oct 2024 14:37:59 -0400
Subject: [PATCH] wip! make invalid state show up on error

---
 assets/src/components/detours/activateDetourModal.tsx | 10 +++++++---
 assets/src/components/detours/diversionPage.tsx       |  9 +++++++++
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/assets/src/components/detours/activateDetourModal.tsx b/assets/src/components/detours/activateDetourModal.tsx
index 33c688043..a8e5efd3f 100644
--- a/assets/src/components/detours/activateDetourModal.tsx
+++ b/assets/src/components/detours/activateDetourModal.tsx
@@ -81,7 +81,7 @@ const SurroundingModal = ({
       ) : (
         <Button
           variant="primary"
-          disabled={onNext === undefined}
+          className={onNext ? "" : "disabled"}
           onClick={onNext}
           data-fs-element={nextStepLabel}
         >
@@ -112,7 +112,7 @@ const SelectingDuration = ({
     <p>
       <span className="fw-bold">Time length</span> <span>(estimate)</span>
     </p>
-    <Form noValidate validated>
+    <Form noValidate>
       <Form.Group>
         {possibleDurations.map((duration) => (
           <Form.Check
@@ -125,9 +125,13 @@ const SelectingDuration = ({
             type="radio"
             label={duration}
             checked={selectedDuration === duration}
+            isInvalid={isError}
           />
         ))}
-        <Form.Control.Feedback type="invalid">
+        <Form.Control.Feedback
+          type="invalid"
+          className={isError ? "d-block" : ""}
+        >
           Time length is required
         </Form.Control.Feedback>
       </Form.Group>
diff --git a/assets/src/components/detours/diversionPage.tsx b/assets/src/components/detours/diversionPage.tsx
index 74e0abde4..416b42383 100644
--- a/assets/src/components/detours/diversionPage.tsx
+++ b/assets/src/components/detours/diversionPage.tsx
@@ -329,6 +329,15 @@ export const DiversionPage = ({
                       duration: selectedDuration,
                     })
                   }}
+                  isError={snapshot.matches({
+                    "Detour Drawing": {
+                      "Share Detour": {
+                        Activating: {
+                          "Selecting Duration": "No Duration Selected - Error",
+                        },
+                      },
+                    },
+                  })}
                   selectedDuration={selectedDuration}
                 />
               ) : snapshot.matches({