feat(ts/detour/fs-element-steps): add element labels to next step in …

…activate modal
mbta · Oct 29, 2024 · 9e98f3c · 9e98f3c
1 parent 9dfb933
commit 9e98f3c
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git 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
@@ -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" })
               }}