From 9e98f3c66e2125943614fe5994e93fd95afc89ad Mon Sep 17 00:00:00 2001
From: Kayla Firestack <kfirestack@mbta.com>
Date: Mon, 28 Oct 2024 10:27:01 -0400
Subject: [PATCH] feat(ts/detour/fs-element-steps): add element labels to next
 step in activate modal

---
 .../components/detours/activateDetourModal.tsx    |  8 +++++++-
 assets/src/components/detours/diversionPage.tsx   | 15 +++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/assets/src/components/detours/activateDetourModal.tsx b/assets/src/components/detours/activateDetourModal.tsx
index 4e87b51f5..43f4ea473 100644
--- a/assets/src/components/detours/activateDetourModal.tsx
+++ b/assets/src/components/detours/activateDetourModal.tsx
@@ -44,13 +44,18 @@ interface SurroundingModalProps extends PropsWithChildren {
   onActivate?: () => void
 }
 
+interface FSElementProps {
+  nextStepLabel: string | undefined
+}
+
 const SurroundingModal = ({
   onCancel,
   onNext,
   onBack,
   onActivate,
   children,
-}: SurroundingModalProps) => (
+  nextStepLabel,
+}: SurroundingModalProps & FSElementProps) => (
   <Modal show animation={false} onHide={onCancel}>
     <Modal.Header closeButton>
       <h3 className="fs-3 fw-semibold lh-sm my-1">Start detour</h3>
@@ -78,6 +83,7 @@ const SurroundingModal = ({
           variant="primary"
           disabled={onNext === undefined}
           onClick={onNext}
+          data-fs-element={nextStepLabel}
         >
           Next
         </Button>
diff --git a/assets/src/components/detours/diversionPage.tsx b/assets/src/components/detours/diversionPage.tsx
index 3b95166ae..97ade5bf2 100644
--- a/assets/src/components/detours/diversionPage.tsx
+++ b/assets/src/components/detours/diversionPage.tsx
@@ -276,6 +276,21 @@ export const DiversionPage = ({
             },
           }) ? (
             <ActivateDetour.Modal
+              nextStepLabel={
+                (snapshot.matches({
+                  "Detour Drawing": {
+                    "Share Detour": { Activating: "Selecting Duration" },
+                  },
+                }) &&
+                  "Select Duration") ||
+                (snapshot.matches({
+                  "Detour Drawing": {
+                    "Share Detour": { Activating: "Selecting Reason" },
+                  },
+                }) &&
+                  "Select Reason") ||
+                undefined
+              }
               onCancel={() => {
                 send({ type: "detour.share.activate-modal.cancel" })
               }}