From 937a709241f3e8a57a9690e1ffee615b68cd1b52 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 30 Nov 2023 17:37:40 -0500
Subject: [PATCH 01/42] refactor(user/types): Add MobilityProfile type.

---
 lib/components/user/types.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/lib/components/user/types.ts b/lib/components/user/types.ts
index 187e3c586..b6418f830 100644
--- a/lib/components/user/types.ts
+++ b/lib/components/user/types.ts
@@ -14,6 +14,12 @@ export interface UserSavedLocation {
   type?: string
 }
 
+export interface MobilityProfile {
+  isMobilityLimited: boolean
+  mobilityDevices: string[]
+  visionLimitation: 'none' | 'low-vision' | 'legally-blind'
+}
+
 /**
  * Type definition for an OTP-middleware (OTP-personas) user.
  */
@@ -24,6 +30,7 @@ export interface User {
   hasConsentedToTerms?: boolean
   id?: string
   isPhoneNumberVerified?: boolean
+  mobilityProfile?: MobilityProfile
   notificationChannel?: string
   phoneNumber?: string
   pushDevices?: number

From 96c2681bada0d32690f8c1f445628177115e7d64 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 30 Nov 2023 17:57:12 -0500
Subject: [PATCH 02/42] refactor(dropdown-options): Extract common components.

---
 .../user/common/dropdown-options.tsx          | 121 +++++++++++++++++
 .../trip-notifications-pane.tsx               | 126 ++----------------
 2 files changed, 129 insertions(+), 118 deletions(-)
 create mode 100644 lib/components/user/common/dropdown-options.tsx

diff --git a/lib/components/user/common/dropdown-options.tsx b/lib/components/user/common/dropdown-options.tsx
new file mode 100644
index 000000000..a7b4a74c7
--- /dev/null
+++ b/lib/components/user/common/dropdown-options.tsx
@@ -0,0 +1,121 @@
+import { Field } from 'formik'
+import React from 'react'
+
+/**
+ * A label followed by a dropdown control.
+ */
+export const Select = ({
+  Control = FormControl,
+  children,
+  label,
+  name
+}: {
+  // Note the prop order required by typescript-sort-keys, also applied above.
+  Control?: ComponentType
+  children: ReactNode
+  label?: ReactNode
+  name: string
+}): JSX.Element => (
+  // <Field> is kept outside of <label> to accommodate layout in table/grid cells.
+  <>
+    {label && <label htmlFor={name}>{label}</label>}
+    <Field as={Control} componentClass="select" id={name} name={name}>
+      {children}
+    </Field>
+  </>
+)
+
+function Options({
+  defaultValue,
+  options
+}: {
+  defaultValue: number | string
+  options: { text: string; value: number | string }[]
+}) {
+  // <FormattedMessage> can't be used inside <option>.
+  const intl = useIntl()
+  return (
+    <>
+      {options.map(({ text, value }, i) => (
+        <option key={i} value={value}>
+          {value === defaultValue
+            ? intl.formatMessage(
+                { id: 'common.forms.defaultValue' },
+                { value: text }
+              )
+            : text}
+        </option>
+      ))}
+    </>
+  )
+}
+
+const basicYesNoOptions = [
+  {
+    id: 'yes',
+    value: 'true'
+  },
+  {
+    id: 'no',
+    value: 'false'
+  }
+]
+
+/**
+ * Produces a yes/no list of options with the specified
+ * default value (true for yes, false for no).
+ */
+export function YesNoOptions({
+  defaultValue
+}: {
+  defaultValue: boolean
+}): JSX.Element {
+  // <FormattedMessage> can't be used inside <option>.
+  const intl = useIntl()
+  const options = basicYesNoOptions.map(({ id, value }) => ({
+    text:
+      id === 'yes'
+        ? intl.formatMessage({ id: 'common.forms.yes' })
+        : intl.formatMessage({ id: 'common.forms.no' }),
+    value
+  }))
+  return (
+    <Options
+      defaultValue={(defaultValue || false).toString()}
+      options={options}
+    />
+  )
+}
+
+/**
+ * Produces a list of duration options with the specified default value.
+ */
+export function DurationOptions({
+  decoratorFunc,
+  defaultValue,
+  minuteOptions
+}: {
+  decoratorFunc?: (text: string, intl: IntlShape) => string
+  defaultValue: string | number
+  minuteOptions: number[]
+}): JSX.Element {
+  // <FormattedMessage> can't be used inside <option>.
+  const intl = useIntl()
+  const localizedMinutes = minuteOptions.map((minutes) => ({
+    text:
+      minutes === 60
+        ? intl.formatMessage({ id: 'components.TripNotificationsPane.oneHour' })
+        : intl.formatMessage(
+            { id: 'common.time.tripDurationFormat' },
+            { hours: 0, minutes, seconds: 0 }
+          ),
+    value: minutes
+  }))
+  const options = decoratorFunc
+    ? localizedMinutes.map(({ text, value }) => ({
+        text: decoratorFunc(text, intl),
+        value
+      }))
+    : localizedMinutes
+  return <Options defaultValue={defaultValue} options={options} />
+}
diff --git a/lib/components/user/monitored-trip/trip-notifications-pane.tsx b/lib/components/user/monitored-trip/trip-notifications-pane.tsx
index dd8077a83..4d6d05d81 100644
--- a/lib/components/user/monitored-trip/trip-notifications-pane.tsx
+++ b/lib/components/user/monitored-trip/trip-notifications-pane.tsx
@@ -1,10 +1,15 @@
 import { Alert, FormControl } from 'react-bootstrap'
 import { ExclamationTriangle } from '@styled-icons/fa-solid/ExclamationTriangle'
-import { Field, FormikProps } from 'formik'
-import { FormattedList, FormattedMessage, IntlShape, useIntl } from 'react-intl'
-import React, { Component, ComponentType, FormEvent, ReactNode } from 'react'
+import { FormattedList, FormattedMessage } from 'react-intl'
+import { FormikProps } from 'formik'
+import React, { Component, FormEvent } from 'react'
 import styled from 'styled-components'
 
+import {
+  DurationOptions,
+  Select,
+  YesNoOptions
+} from '../common/dropdown-options'
 import { FieldSet } from '../styled'
 import { IconWithText } from '../../util/styledIcon'
 import { MonitoredTrip } from '../types'
@@ -38,121 +43,6 @@ const Summary = styled.summary`
   margin-bottom: 5px;
 `
 
-/**
- * A label followed by a dropdown control.
- */
-const Select = ({
-  Control = FormControl,
-  children,
-  label,
-  name
-}: {
-  // Note the prop order required by typescript-sort-keys, also applied above.
-  Control?: ComponentType
-  children: ReactNode
-  label?: ReactNode
-  name: string
-}) => (
-  // <Field> is kept outside of <label> to accommodate layout in table/grid cells.
-  <>
-    {label && <label htmlFor={name}>{label}</label>}
-    <Field as={Control} componentClass="select" id={name} name={name}>
-      {children}
-    </Field>
-  </>
-)
-
-function Options({
-  defaultValue,
-  options
-}: {
-  defaultValue: number | string
-  options: { text: string; value: number | string }[]
-}) {
-  // <FormattedMessage> can't be used inside <option>.
-  const intl = useIntl()
-  return (
-    <>
-      {options.map(({ text, value }, i) => (
-        <option key={i} value={value}>
-          {value === defaultValue
-            ? intl.formatMessage(
-                { id: 'common.forms.defaultValue' },
-                { value: text }
-              )
-            : text}
-        </option>
-      ))}
-    </>
-  )
-}
-
-const basicYesNoOptions = [
-  {
-    id: 'yes',
-    value: 'true'
-  },
-  {
-    id: 'no',
-    value: 'false'
-  }
-]
-
-/**
- * Produces a yes/no list of options with the specified
- * default value (true for yes, false for no).
- */
-function YesNoOptions({ defaultValue }: { defaultValue: boolean }) {
-  // <FormattedMessage> can't be used inside <option>.
-  const intl = useIntl()
-  const options = basicYesNoOptions.map(({ id, value }) => ({
-    text:
-      id === 'yes'
-        ? intl.formatMessage({ id: 'common.forms.yes' })
-        : intl.formatMessage({ id: 'common.forms.no' }),
-    value
-  }))
-  return (
-    <Options
-      defaultValue={(defaultValue || false).toString()}
-      options={options}
-    />
-  )
-}
-
-/**
- * Produces a list of duration options with the specified default value.
- */
-function DurationOptions({
-  decoratorFunc,
-  defaultValue,
-  minuteOptions
-}: {
-  decoratorFunc?: (text: string, intl: IntlShape) => string
-  defaultValue: string | number
-  minuteOptions: number[]
-}) {
-  // <FormattedMessage> can't be used inside <option>.
-  const intl = useIntl()
-  const localizedMinutes = minuteOptions.map((minutes) => ({
-    text:
-      minutes === 60
-        ? intl.formatMessage({ id: 'components.TripNotificationsPane.oneHour' })
-        : intl.formatMessage(
-            { id: 'common.time.tripDurationFormat' },
-            { hours: 0, minutes, seconds: 0 }
-          ),
-    value: minutes
-  }))
-  const options = decoratorFunc
-    ? localizedMinutes.map(({ text, value }) => ({
-        text: decoratorFunc(text, intl),
-        value
-      }))
-    : localizedMinutes
-  return <Options defaultValue={defaultValue} options={options} />
-}
-
 interface Props extends FormikProps<MonitoredTrip> {
   notificationChannel: string
 }

From 684fdc32701e980c52a44e31816ee901292a73a8 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 1 Dec 2023 10:37:35 -0500
Subject: [PATCH 03/42] refactor(TripNotificationsPane): Extract SettingsList
 and fix dropdown options

---
 .../user/common/dropdown-options.tsx          |  2 ++
 .../trip-notifications-pane.tsx               | 22 +------------------
 lib/components/user/styled.ts                 | 21 ++++++++++++++++++
 3 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/lib/components/user/common/dropdown-options.tsx b/lib/components/user/common/dropdown-options.tsx
index a7b4a74c7..c4cb29f6f 100644
--- a/lib/components/user/common/dropdown-options.tsx
+++ b/lib/components/user/common/dropdown-options.tsx
@@ -1,4 +1,6 @@
 import { Field } from 'formik'
+import { FormControl } from 'react-bootstrap'
+import { useIntl } from 'react-intl'
 import React from 'react'
 
 /**
diff --git a/lib/components/user/monitored-trip/trip-notifications-pane.tsx b/lib/components/user/monitored-trip/trip-notifications-pane.tsx
index 4d6d05d81..ea5720dd3 100644
--- a/lib/components/user/monitored-trip/trip-notifications-pane.tsx
+++ b/lib/components/user/monitored-trip/trip-notifications-pane.tsx
@@ -10,31 +10,11 @@ import {
   Select,
   YesNoOptions
 } from '../common/dropdown-options'
-import { FieldSet } from '../styled'
+import { FieldSet, SettingsList } from '../styled'
 import { IconWithText } from '../../util/styledIcon'
 import { MonitoredTrip } from '../types'
 
 // Element styles
-const SettingsList = styled.ul`
-  border-spacing: 0 10px;
-  display: table;
-  padding-left: 0;
-  width: 100%;
-  label {
-    font-weight: inherit;
-    padding-right: 10px;
-  }
-  /* Use table display for this element, so that all dropdowns occupy the same width.
-    (Bootstrap already sets them to occupy 100% of the width of the parent, i.e. the logical cell.) */
-  & > li {
-    align-items: center;
-    display: table-row;
-    & > * {
-      display: table-cell;
-    }
-  }
-`
-
 const Summary = styled.summary`
   /* Revert display:block set by Bootstrap that hides the native expand/collapse caret. */
   display: revert-layer;
diff --git a/lib/components/user/styled.ts b/lib/components/user/styled.ts
index ae2c07e0d..e054b4a0a 100644
--- a/lib/components/user/styled.ts
+++ b/lib/components/user/styled.ts
@@ -106,3 +106,24 @@ export const phoneFieldStyle = css`
   vertical-align: middle;
   width: 14em;
 `
+
+/** Settings list container */
+export const SettingsList = styled.ul`
+  border-spacing: 0 10px;
+  display: table;
+  padding-left: 0;
+  width: 100%;
+  label {
+    font-weight: inherit;
+    padding-right: 10px;
+  }
+  /* Use table display for this element, so that all dropdowns occupy the same width.
+    (Bootstrap already sets them to occupy 100% of the width of the parent, i.e. the logical cell.) */
+  & > li {
+    align-items: center;
+    display: table-row;
+    & > * {
+      display: table-cell;
+    }
+  }
+`

From 982c95b8629f7a824e40266dfa32201946fb3ebe Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 1 Dec 2023 12:04:29 -0500
Subject: [PATCH 04/42] feat(LimitationsPane): Add mobility limitations pane.

---
 i18n/en-US.yml                                | 12 ++++
 .../user/common/dropdown-options.tsx          |  4 +-
 .../user/mobity-profile/limitations-pane.tsx  | 69 +++++++++++++++++++
 lib/components/user/types.ts                  | 10 ++-
 4 files changed, 92 insertions(+), 3 deletions(-)
 create mode 100644 lib/components/user/mobity-profile/limitations-pane.tsx

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index 08367b1dd..b95e6ebde 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -300,6 +300,18 @@ components:
   ItinerarySummary:
     itineraryDetails: Itinerary details
     minMaxFare: "{minTotalFare} - {maxTotalFare}"
+  LimitationsPane:
+    intro: >-
+      Please answer a few questions to customize the trip planning experience to
+      your needs and preferences.
+    mobilityPrompt: >-
+      Do you have any mobility limitations that cause you to walk slowlier or
+      more carefully than other people?
+    visionLimitations:
+      legally-blind: Legally blind
+      low-vision: Low-vision
+      none: None
+    visionPrompt: Do you have any vision limitations?
   LiveStopTimes:
     autoRefresh: Auto-refresh arrivals?
     refresh: Refresh arrival times
diff --git a/lib/components/user/common/dropdown-options.tsx b/lib/components/user/common/dropdown-options.tsx
index c4cb29f6f..c2e546367 100644
--- a/lib/components/user/common/dropdown-options.tsx
+++ b/lib/components/user/common/dropdown-options.tsx
@@ -27,13 +27,13 @@ export const Select = ({
   </>
 )
 
-function Options({
+export function Options({
   defaultValue,
   options
 }: {
   defaultValue: number | string
   options: { text: string; value: number | string }[]
-}) {
+}): JSX.Element {
   // <FormattedMessage> can't be used inside <option>.
   const intl = useIntl()
   return (
diff --git a/lib/components/user/mobity-profile/limitations-pane.tsx b/lib/components/user/mobity-profile/limitations-pane.tsx
new file mode 100644
index 000000000..ffc10c09d
--- /dev/null
+++ b/lib/components/user/mobity-profile/limitations-pane.tsx
@@ -0,0 +1,69 @@
+import { FormattedMessage, useIntl } from 'react-intl'
+import { FormGroup } from 'react-bootstrap'
+import { FormikProps } from 'formik'
+import React from 'react'
+import styled from 'styled-components'
+
+import { Options, Select, YesNoOptions } from '../common/dropdown-options'
+import { User, VisionLimitation, visionLimitations } from '../types'
+
+type Props = FormikProps<User>
+
+const Container = styled.div`
+  select {
+    width: unset; /* Otherwise, it is 100% per bootstrap. */
+  }
+`
+
+/**
+ * Produces a list of options for vision limitations.
+ */
+function VisionOptions(): JSX.Element {
+  // <FormattedMessage> can't be used inside <option>.
+  const intl = useIntl()
+  const options = visionLimitations.map((value: VisionLimitation) => ({
+    text: intl.formatMessage({
+      id: `components.LimitationsPane.visionLimitations.${value}`
+    }),
+    value
+  }))
+  return <Options options={options} />
+}
+
+/**
+ * Ability limitations pane, part of mobility profile.
+ */
+const LimitationsPane = ({
+  handleChange,
+  values: userData
+}: Props): JSX.Element => {
+  return (
+    <Container>
+      <p>
+        <FormattedMessage id="components.LimitationsPane.intro" />
+      </p>
+      <FormGroup>
+        <Select
+          label={
+            <FormattedMessage id="components.LimitationsPane.mobilityPrompt" />
+          }
+          name="isMobilityLimited"
+        >
+          <YesNoOptions />
+        </Select>
+      </FormGroup>
+      <FormGroup>
+        <Select
+          label={
+            <FormattedMessage id="components.LimitationsPane.visionPrompt" />
+          }
+          name="visionLimitation"
+        >
+          <VisionOptions />
+        </Select>
+      </FormGroup>
+    </Container>
+  )
+}
+
+export default LimitationsPane
diff --git a/lib/components/user/types.ts b/lib/components/user/types.ts
index b6418f830..5fc7e7040 100644
--- a/lib/components/user/types.ts
+++ b/lib/components/user/types.ts
@@ -14,10 +14,18 @@ export interface UserSavedLocation {
   type?: string
 }
 
+export const visionLimitations = [
+  'none',
+  'low-vision',
+  'legally-blind'
+] as const
+
+export type VisionLimitation = typeof visionLimitations[number]
+
 export interface MobilityProfile {
   isMobilityLimited: boolean
   mobilityDevices: string[]
-  visionLimitation: 'none' | 'low-vision' | 'legally-blind'
+  visionLimitation: VisionLimitation
 }
 
 /**

From 45b11eca7a58477a63fa18c5e13a7ed61656d36f Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 1 Dec 2023 13:47:09 -0500
Subject: [PATCH 05/42] feat(AssistiveDevicesPane): Add new pane for selecting
 assistive devices.

---
 i18n/en-US.yml                                | 13 ++++
 .../mobity-profile/assistive-devices-pane.tsx | 66 +++++++++++++++++++
 2 files changed, 79 insertions(+)
 create mode 100644 lib/components/user/mobity-profile/assistive-devices-pane.tsx

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index b95e6ebde..75dce5820 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -301,6 +301,19 @@ components:
     itineraryDetails: Itinerary details
     minMaxFare: "{minTotalFare} - {maxTotalFare}"
   LimitationsPane:
+    devicePrompt: Do you regularly use a mobility assistive device? (Check all that apply.)
+    devices:
+      cane: Cane
+      crutches: Crutches
+      electric-wheelchair: Electric wheelchair
+      manual-walker: Manual walker
+      manual-wheelchair: Manual wheelchair
+      mobility-scooter: Mobility Scooter
+      none: None
+      service-animal: Service animal
+      stroller: Stroller
+      wheeled-walker: Wheeled walker
+      white-cane: White cane
     intro: >-
       Please answer a few questions to customize the trip planning experience to
       your needs and preferences.
diff --git a/lib/components/user/mobity-profile/assistive-devices-pane.tsx b/lib/components/user/mobity-profile/assistive-devices-pane.tsx
new file mode 100644
index 000000000..bd6b7b012
--- /dev/null
+++ b/lib/components/user/mobity-profile/assistive-devices-pane.tsx
@@ -0,0 +1,66 @@
+import { Field, FormikProps } from 'formik'
+import { FormattedMessage } from 'react-intl'
+import React from 'react'
+
+import { FieldSet } from '../styled'
+import { User } from '../types'
+
+type Props = FormikProps<User>
+
+const knownDeviceCodes = [
+  'none',
+  'white-cane',
+  'manual-walker',
+  'wheeled-walker',
+  'cane',
+  'crutches',
+  'stroller',
+  'service-animal',
+  'mobility-scooter',
+  'electric-wheelchair',
+  'manual-wheelchair'
+]
+
+/**
+ * Assistive devices pane, part of mobility profile.
+ */
+const AssistiveDevicesPane = ({
+  handleChange,
+  values: userData
+}: Props): JSX.Element => {
+  return (
+    <div>
+      <p>
+        <FormattedMessage id="components.LimitationsPane.intro" />
+      </p>
+      <FieldSet>
+        <legend>
+          <FormattedMessage id="components.LimitationsPane.devicePrompt" />
+        </legend>
+        <ul>
+          {knownDeviceCodes.map((dv) => {
+            const inputId = `device-option-${dv}`
+            return (
+              <li key={dv}>
+                <Field
+                  id={inputId}
+                  name="mobilityDevices"
+                  type="checkbox"
+                  value={dv}
+                />
+
+                <label htmlFor={inputId}>
+                  <FormattedMessage
+                    id={`components.LimitationsPane.devices.${dv}`}
+                  />
+                </label>
+              </li>
+            )
+          })}
+        </ul>
+      </FieldSet>
+    </div>
+  )
+}
+
+export default AssistiveDevicesPane

From e83d72feed9326a5529e048be99a2c04c9e79dce Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 1 Dec 2023 14:23:10 -0500
Subject: [PATCH 06/42] refactor(MobilityProfile): Rename i18n strings

---
 i18n/en-US.yml                                | 54 ++++++++++---------
 .../mobity-profile/assistive-devices-pane.tsx |  6 +--
 .../user/mobity-profile/limitations-pane.tsx  |  8 +--
 3 files changed, 36 insertions(+), 32 deletions(-)

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index 75dce5820..e817a0b8f 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -300,31 +300,6 @@ components:
   ItinerarySummary:
     itineraryDetails: Itinerary details
     minMaxFare: "{minTotalFare} - {maxTotalFare}"
-  LimitationsPane:
-    devicePrompt: Do you regularly use a mobility assistive device? (Check all that apply.)
-    devices:
-      cane: Cane
-      crutches: Crutches
-      electric-wheelchair: Electric wheelchair
-      manual-walker: Manual walker
-      manual-wheelchair: Manual wheelchair
-      mobility-scooter: Mobility Scooter
-      none: None
-      service-animal: Service animal
-      stroller: Stroller
-      wheeled-walker: Wheeled walker
-      white-cane: White cane
-    intro: >-
-      Please answer a few questions to customize the trip planning experience to
-      your needs and preferences.
-    mobilityPrompt: >-
-      Do you have any mobility limitations that cause you to walk slowlier or
-      more carefully than other people?
-    visionLimitations:
-      legally-blind: Legally blind
-      low-vision: Low-vision
-      none: None
-    visionPrompt: Do you have any vision limitations?
   LiveStopTimes:
     autoRefresh: Auto-refresh arrivals?
     refresh: Refresh arrival times
@@ -354,6 +329,35 @@ components:
     timeWalking: "{time} walking"
   MobileOptions:
     header: Set Search Options
+  MobilityProfile:
+    DevicesPane:
+      devices:
+        cane: Cane
+        crutches: Crutches
+        electric-wheelchair: Electric wheelchair
+        manual-walker: Manual walker
+        manual-wheelchair: Manual wheelchair
+        mobility-scooter: Mobility Scooter
+        none: None
+        service-animal: Service animal
+        stroller: Stroller
+        wheeled-walker: Wheeled walker
+        white-cane: White cane
+      prompt: >-
+        Do you regularly use a mobility assistive device? (Check all that
+        apply.)
+    LimitationsPane:
+      mobilityPrompt: >-
+        Do you have any mobility limitations that cause you to walk slowlier or
+        more carefully than other people?
+      visionLimitations:
+        legally-blind: Legally blind
+        low-vision: Low-vision
+        none: None
+      visionPrompt: Do you have any vision limitations?
+    intro: >-
+      Please answer a few questions to customize the trip planning experience to
+      your needs and preferences.
   NarrativeItinerariesHeader:
     changeSortDir: Change sort direction
     howToFindResults: To view results, see the Itineraries Found heading below.
diff --git a/lib/components/user/mobity-profile/assistive-devices-pane.tsx b/lib/components/user/mobity-profile/assistive-devices-pane.tsx
index bd6b7b012..a8d5a1f85 100644
--- a/lib/components/user/mobity-profile/assistive-devices-pane.tsx
+++ b/lib/components/user/mobity-profile/assistive-devices-pane.tsx
@@ -31,11 +31,11 @@ const AssistiveDevicesPane = ({
   return (
     <div>
       <p>
-        <FormattedMessage id="components.LimitationsPane.intro" />
+        <FormattedMessage id="components.MobilityProfile.intro" />
       </p>
       <FieldSet>
         <legend>
-          <FormattedMessage id="components.LimitationsPane.devicePrompt" />
+          <FormattedMessage id="components.MobilityProfile.DevicesPane.prompt" />
         </legend>
         <ul>
           {knownDeviceCodes.map((dv) => {
@@ -51,7 +51,7 @@ const AssistiveDevicesPane = ({
 
                 <label htmlFor={inputId}>
                   <FormattedMessage
-                    id={`components.LimitationsPane.devices.${dv}`}
+                    id={`components.MobilityProfile.DevicesPane.devices.${dv}`}
                   />
                 </label>
               </li>
diff --git a/lib/components/user/mobity-profile/limitations-pane.tsx b/lib/components/user/mobity-profile/limitations-pane.tsx
index ffc10c09d..1a9febd26 100644
--- a/lib/components/user/mobity-profile/limitations-pane.tsx
+++ b/lib/components/user/mobity-profile/limitations-pane.tsx
@@ -23,7 +23,7 @@ function VisionOptions(): JSX.Element {
   const intl = useIntl()
   const options = visionLimitations.map((value: VisionLimitation) => ({
     text: intl.formatMessage({
-      id: `components.LimitationsPane.visionLimitations.${value}`
+      id: `components.MobilityProfile.LimitationsPane.visionLimitations.${value}`
     }),
     value
   }))
@@ -40,12 +40,12 @@ const LimitationsPane = ({
   return (
     <Container>
       <p>
-        <FormattedMessage id="components.LimitationsPane.intro" />
+        <FormattedMessage id="components.MobilityProfile.intro" />
       </p>
       <FormGroup>
         <Select
           label={
-            <FormattedMessage id="components.LimitationsPane.mobilityPrompt" />
+            <FormattedMessage id="components.MobilityProfile.LimitationsPane.mobilityPrompt" />
           }
           name="isMobilityLimited"
         >
@@ -55,7 +55,7 @@ const LimitationsPane = ({
       <FormGroup>
         <Select
           label={
-            <FormattedMessage id="components.LimitationsPane.visionPrompt" />
+            <FormattedMessage id="components.MobilityProfile.LimitationsPane.visionPrompt" />
           }
           name="visionLimitation"
         >

From 6a2c6834cc9298effb8ce33f336fdf05c2c93b84 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 1 Dec 2023 16:30:26 -0500
Subject: [PATCH 07/42] refactor(LimitationsPane): Handle binding with user
 data default values.

---
 .../user/common/dropdown-options.tsx          | 48 ++++++++++++-------
 .../user/mobity-profile/limitations-pane.tsx  |  7 +--
 2 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/lib/components/user/common/dropdown-options.tsx b/lib/components/user/common/dropdown-options.tsx
index c2e546367..654a50cea 100644
--- a/lib/components/user/common/dropdown-options.tsx
+++ b/lib/components/user/common/dropdown-options.tsx
@@ -3,44 +3,59 @@ import { FormControl } from 'react-bootstrap'
 import { useIntl } from 'react-intl'
 import React from 'react'
 
+interface OptionsPropsBase<T> {
+  defaultValue: T
+  hideDefaultIndication?: boolean
+}
+
 /**
  * A label followed by a dropdown control.
  */
 export const Select = ({
   Control = FormControl,
   children,
+  defaultValue,
   label,
   name
 }: {
   // Note the prop order required by typescript-sort-keys, also applied above.
   Control?: ComponentType
   children: ReactNode
+  defaultValue?: typeof HTMLSelectElement.defaultValue
   label?: ReactNode
   name: string
 }): JSX.Element => (
   // <Field> is kept outside of <label> to accommodate layout in table/grid cells.
   <>
     {label && <label htmlFor={name}>{label}</label>}
-    <Field as={Control} componentClass="select" id={name} name={name}>
+    <Field
+      as={Control}
+      componentClass="select"
+      defaultValue={defaultValue}
+      id={name}
+      name={name}
+    >
       {children}
     </Field>
   </>
 )
 
-export function Options({
+interface OptionsProps extends OptionsPropsBase<T> {
+  options: { text: string; value: T }[]
+}
+
+export function Options<T>({
   defaultValue,
+  hideDefaultIndication,
   options
-}: {
-  defaultValue: number | string
-  options: { text: string; value: number | string }[]
-}): JSX.Element {
+}: OptionsProps<T>): JSX.Element {
   // <FormattedMessage> can't be used inside <option>.
   const intl = useIntl()
   return (
     <>
       {options.map(({ text, value }, i) => (
         <option key={i} value={value}>
-          {value === defaultValue
+          {!hideDefaultIndication && value === defaultValue
             ? intl.formatMessage(
                 { id: 'common.forms.defaultValue' },
                 { value: text }
@@ -68,10 +83,9 @@ const basicYesNoOptions = [
  * default value (true for yes, false for no).
  */
 export function YesNoOptions({
-  defaultValue
-}: {
-  defaultValue: boolean
-}): JSX.Element {
+  defaultValue,
+  hideDefaultIndication
+}: OptionsPropsBase<boolean>): JSX.Element {
   // <FormattedMessage> can't be used inside <option>.
   const intl = useIntl()
   const options = basicYesNoOptions.map(({ id, value }) => ({
@@ -84,11 +98,17 @@ export function YesNoOptions({
   return (
     <Options
       defaultValue={(defaultValue || false).toString()}
+      hideDefaultIndication={hideDefaultIndication}
       options={options}
     />
   )
 }
 
+interface DurationOptionsProps extends OptionsPropsBase<number> {
+  decoratorFunc?: (text: string, intl: IntlShape) => string
+  minuteOptions: number[]
+}
+
 /**
  * Produces a list of duration options with the specified default value.
  */
@@ -96,11 +116,7 @@ export function DurationOptions({
   decoratorFunc,
   defaultValue,
   minuteOptions
-}: {
-  decoratorFunc?: (text: string, intl: IntlShape) => string
-  defaultValue: string | number
-  minuteOptions: number[]
-}): JSX.Element {
+}: DurationOptionsProps): JSX.Element {
   // <FormattedMessage> can't be used inside <option>.
   const intl = useIntl()
   const localizedMinutes = minuteOptions.map((minutes) => ({
diff --git a/lib/components/user/mobity-profile/limitations-pane.tsx b/lib/components/user/mobity-profile/limitations-pane.tsx
index 1a9febd26..b3f090fd3 100644
--- a/lib/components/user/mobity-profile/limitations-pane.tsx
+++ b/lib/components/user/mobity-profile/limitations-pane.tsx
@@ -44,12 +44,13 @@ const LimitationsPane = ({
       </p>
       <FormGroup>
         <Select
+          defaultValue={false}
           label={
             <FormattedMessage id="components.MobilityProfile.LimitationsPane.mobilityPrompt" />
           }
-          name="isMobilityLimited"
+          name="mobilityProfile.isMobilityLimited"
         >
-          <YesNoOptions />
+          <YesNoOptions default={false} hideDefaultIndication />
         </Select>
       </FormGroup>
       <FormGroup>
@@ -57,7 +58,7 @@ const LimitationsPane = ({
           label={
             <FormattedMessage id="components.MobilityProfile.LimitationsPane.visionPrompt" />
           }
-          name="visionLimitation"
+          name="mobilityProfile.visionLimitation"
         >
           <VisionOptions />
         </Select>

From 58cd7f9daf0dae64f17e94687f84c08b3b4fc079 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 1 Dec 2023 17:37:51 -0500
Subject: [PATCH 08/42] refactor(AssistiveDevicesPane): Refactor and adjust
 styles

---
 i18n/en-US.yml                                |  4 +-
 .../mobity-profile/assistive-devices-pane.tsx | 83 ++++++++++---------
 2 files changed, 43 insertions(+), 44 deletions(-)

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index e817a0b8f..4d1c8e40f 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -343,9 +343,7 @@ components:
         stroller: Stroller
         wheeled-walker: Wheeled walker
         white-cane: White cane
-      prompt: >-
-        Do you regularly use a mobility assistive device? (Check all that
-        apply.)
+      prompt: Do you regularly use a mobility assistive device? (Check all that apply)
     LimitationsPane:
       mobilityPrompt: >-
         Do you have any mobility limitations that cause you to walk slowlier or
diff --git a/lib/components/user/mobity-profile/assistive-devices-pane.tsx b/lib/components/user/mobity-profile/assistive-devices-pane.tsx
index a8d5a1f85..65d7400cf 100644
--- a/lib/components/user/mobity-profile/assistive-devices-pane.tsx
+++ b/lib/components/user/mobity-profile/assistive-devices-pane.tsx
@@ -1,11 +1,9 @@
-import { Field, FormikProps } from 'formik'
+import { Field } from 'formik'
 import { FormattedMessage } from 'react-intl'
 import React from 'react'
+import styled from 'styled-components'
 
 import { FieldSet } from '../styled'
-import { User } from '../types'
-
-type Props = FormikProps<User>
 
 const knownDeviceCodes = [
   'none',
@@ -21,46 +19,49 @@ const knownDeviceCodes = [
   'manual-wheelchair'
 ]
 
+const DeviceOption = styled.span`
+  display: block;
+
+  label {
+    font-weight: normal;
+    margin: 0.25em;
+  }
+`
+
 /**
  * Assistive devices pane, part of mobility profile.
  */
-const AssistiveDevicesPane = ({
-  handleChange,
-  values: userData
-}: Props): JSX.Element => {
-  return (
-    <div>
-      <p>
-        <FormattedMessage id="components.MobilityProfile.intro" />
-      </p>
-      <FieldSet>
-        <legend>
-          <FormattedMessage id="components.MobilityProfile.DevicesPane.prompt" />
-        </legend>
-        <ul>
-          {knownDeviceCodes.map((dv) => {
-            const inputId = `device-option-${dv}`
-            return (
-              <li key={dv}>
-                <Field
-                  id={inputId}
-                  name="mobilityDevices"
-                  type="checkbox"
-                  value={dv}
+const AssistiveDevicesPane = (): JSX.Element => (
+  <div>
+    <p>
+      <FormattedMessage id="components.MobilityProfile.intro" />
+    </p>
+    <FieldSet>
+      <legend>
+        <FormattedMessage id="components.MobilityProfile.DevicesPane.prompt" />
+      </legend>
+      <div>
+        {knownDeviceCodes.map((dv) => {
+          const inputId = `device-option-${dv}`
+          return (
+            <DeviceOption key={dv}>
+              <Field
+                id={inputId}
+                name="mobilityProfile.mobilityDevices"
+                type="checkbox"
+                value={dv}
+              />
+              <label htmlFor={inputId}>
+                <FormattedMessage
+                  id={`components.MobilityProfile.DevicesPane.devices.${dv}`}
                 />
-
-                <label htmlFor={inputId}>
-                  <FormattedMessage
-                    id={`components.MobilityProfile.DevicesPane.devices.${dv}`}
-                  />
-                </label>
-              </li>
-            )
-          })}
-        </ul>
-      </FieldSet>
-    </div>
-  )
-}
+              </label>
+            </DeviceOption>
+          )
+        })}
+      </div>
+    </FieldSet>
+  </div>
+)
 
 export default AssistiveDevicesPane

From 48f93572b1fc82edf259e5c73b632fd454effb4c Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 1 Dec 2023 18:04:42 -0500
Subject: [PATCH 09/42] refactor(DropdownOptions): Fix types

---
 lib/components/user/common/dropdown-options.tsx | 17 +++++++----------
 .../user/mobity-profile/limitations-pane.tsx    |  2 +-
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/lib/components/user/common/dropdown-options.tsx b/lib/components/user/common/dropdown-options.tsx
index 654a50cea..50545ca89 100644
--- a/lib/components/user/common/dropdown-options.tsx
+++ b/lib/components/user/common/dropdown-options.tsx
@@ -1,10 +1,10 @@
 import { Field } from 'formik'
 import { FormControl } from 'react-bootstrap'
-import { useIntl } from 'react-intl'
-import React from 'react'
+import { IntlShape, useIntl } from 'react-intl'
+import React, { ComponentType, ReactNode } from 'react'
 
 interface OptionsPropsBase<T> {
-  defaultValue: T
+  defaultValue?: T
   hideDefaultIndication?: boolean
 }
 
@@ -21,7 +21,7 @@ export const Select = ({
   // Note the prop order required by typescript-sort-keys, also applied above.
   Control?: ComponentType
   children: ReactNode
-  defaultValue?: typeof HTMLSelectElement.defaultValue
+  defaultValue?: string | number | boolean
   label?: ReactNode
   name: string
 }): JSX.Element => (
@@ -40,11 +40,11 @@ export const Select = ({
   </>
 )
 
-interface OptionsProps extends OptionsPropsBase<T> {
+interface OptionsProps<T extends string | number> extends OptionsPropsBase<T> {
   options: { text: string; value: T }[]
 }
 
-export function Options<T>({
+export function Options<T extends string | number>({
   defaultValue,
   hideDefaultIndication,
   options
@@ -89,10 +89,7 @@ export function YesNoOptions({
   // <FormattedMessage> can't be used inside <option>.
   const intl = useIntl()
   const options = basicYesNoOptions.map(({ id, value }) => ({
-    text:
-      id === 'yes'
-        ? intl.formatMessage({ id: 'common.forms.yes' })
-        : intl.formatMessage({ id: 'common.forms.no' }),
+    text: intl.formatMessage({ id: `common.forms.${id}` }),
     value
   }))
   return (
diff --git a/lib/components/user/mobity-profile/limitations-pane.tsx b/lib/components/user/mobity-profile/limitations-pane.tsx
index b3f090fd3..a55d6e99e 100644
--- a/lib/components/user/mobity-profile/limitations-pane.tsx
+++ b/lib/components/user/mobity-profile/limitations-pane.tsx
@@ -50,7 +50,7 @@ const LimitationsPane = ({
           }
           name="mobilityProfile.isMobilityLimited"
         >
-          <YesNoOptions default={false} hideDefaultIndication />
+          <YesNoOptions hideDefaultIndication />
         </Select>
       </FormGroup>
       <FormGroup>

From fb3e35741ef00feb87c7d62afad576a24bc5dd54 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Mon, 4 Dec 2023 16:18:02 -0500
Subject: [PATCH 10/42] refactor(MobilityProfile): Update persisted user data
 on field change.

---
 i18n/en-US.yml                                         |  2 +-
 lib/components/user/common/dropdown-options.tsx        |  7 +++++--
 .../user/mobity-profile/assistive-devices-pane.tsx     | 10 ++++++++--
 .../user/mobity-profile/limitations-pane.tsx           | 10 +++++++---
 lib/components/user/types.ts                           |  2 +-
 5 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index 4d1c8e40f..276016e10 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -349,7 +349,7 @@ components:
         Do you have any mobility limitations that cause you to walk slowlier or
         more carefully than other people?
       visionLimitations:
-        legally-blind: Legally blind
+        legally blind: Legally blind
         low-vision: Low-vision
         none: None
       visionPrompt: Do you have any vision limitations?
diff --git a/lib/components/user/common/dropdown-options.tsx b/lib/components/user/common/dropdown-options.tsx
index 50545ca89..95d2ec5cb 100644
--- a/lib/components/user/common/dropdown-options.tsx
+++ b/lib/components/user/common/dropdown-options.tsx
@@ -1,7 +1,7 @@
 import { Field } from 'formik'
 import { FormControl } from 'react-bootstrap'
 import { IntlShape, useIntl } from 'react-intl'
-import React, { ComponentType, ReactNode } from 'react'
+import React, { ChangeEventHandler, ComponentType, ReactNode } from 'react'
 
 interface OptionsPropsBase<T> {
   defaultValue?: T
@@ -16,7 +16,8 @@ export const Select = ({
   children,
   defaultValue,
   label,
-  name
+  name,
+  onChange
 }: {
   // Note the prop order required by typescript-sort-keys, also applied above.
   Control?: ComponentType
@@ -24,6 +25,7 @@ export const Select = ({
   defaultValue?: string | number | boolean
   label?: ReactNode
   name: string
+  onChange?: ChangeEventHandler
 }): JSX.Element => (
   // <Field> is kept outside of <label> to accommodate layout in table/grid cells.
   <>
@@ -34,6 +36,7 @@ export const Select = ({
       defaultValue={defaultValue}
       id={name}
       name={name}
+      onChange={onChange}
     >
       {children}
     </Field>
diff --git a/lib/components/user/mobity-profile/assistive-devices-pane.tsx b/lib/components/user/mobity-profile/assistive-devices-pane.tsx
index 65d7400cf..2d1576ae7 100644
--- a/lib/components/user/mobity-profile/assistive-devices-pane.tsx
+++ b/lib/components/user/mobity-profile/assistive-devices-pane.tsx
@@ -1,9 +1,10 @@
-import { Field } from 'formik'
+import { Field, FormikProps } from 'formik'
 import { FormattedMessage } from 'react-intl'
 import React from 'react'
 import styled from 'styled-components'
 
 import { FieldSet } from '../styled'
+import { User } from '../types'
 
 const knownDeviceCodes = [
   'none',
@@ -31,7 +32,9 @@ const DeviceOption = styled.span`
 /**
  * Assistive devices pane, part of mobility profile.
  */
-const AssistiveDevicesPane = (): JSX.Element => (
+const AssistiveDevicesPane = ({
+  handleChange
+}: FormikProps<User>): JSX.Element => (
   <div>
     <p>
       <FormattedMessage id="components.MobilityProfile.intro" />
@@ -48,6 +51,9 @@ const AssistiveDevicesPane = (): JSX.Element => (
               <Field
                 id={inputId}
                 name="mobilityProfile.mobilityDevices"
+                // Override onChange explicitly to use the custom one for existing accounts.
+                // (The Formik's one will still be used for new accounts.)
+                onChange={handleChange}
                 type="checkbox"
                 value={dv}
               />
diff --git a/lib/components/user/mobity-profile/limitations-pane.tsx b/lib/components/user/mobity-profile/limitations-pane.tsx
index a55d6e99e..8e41ca5ba 100644
--- a/lib/components/user/mobity-profile/limitations-pane.tsx
+++ b/lib/components/user/mobity-profile/limitations-pane.tsx
@@ -7,8 +7,6 @@ import styled from 'styled-components'
 import { Options, Select, YesNoOptions } from '../common/dropdown-options'
 import { User, VisionLimitation, visionLimitations } from '../types'
 
-type Props = FormikProps<User>
-
 const Container = styled.div`
   select {
     width: unset; /* Otherwise, it is 100% per bootstrap. */
@@ -36,7 +34,7 @@ function VisionOptions(): JSX.Element {
 const LimitationsPane = ({
   handleChange,
   values: userData
-}: Props): JSX.Element => {
+}: FormikProps<User>): JSX.Element => {
   return (
     <Container>
       <p>
@@ -49,6 +47,9 @@ const LimitationsPane = ({
             <FormattedMessage id="components.MobilityProfile.LimitationsPane.mobilityPrompt" />
           }
           name="mobilityProfile.isMobilityLimited"
+          // Override onChange explicitly to use the custom one for existing accounts.
+          // (The Formik's one will still be used for new accounts.)
+          onChange={handleChange}
         >
           <YesNoOptions hideDefaultIndication />
         </Select>
@@ -59,6 +60,9 @@ const LimitationsPane = ({
             <FormattedMessage id="components.MobilityProfile.LimitationsPane.visionPrompt" />
           }
           name="mobilityProfile.visionLimitation"
+          // Override onChange explicitly to use the custom one for existing accounts.
+          // (The Formik's one will still be used for new accounts.)
+          onChange={handleChange}
         >
           <VisionOptions />
         </Select>
diff --git a/lib/components/user/types.ts b/lib/components/user/types.ts
index 5fc7e7040..5cec2b14c 100644
--- a/lib/components/user/types.ts
+++ b/lib/components/user/types.ts
@@ -17,7 +17,7 @@ export interface UserSavedLocation {
 export const visionLimitations = [
   'none',
   'low-vision',
-  'legally-blind'
+  'legally blind'
 ] as const
 
 export type VisionLimitation = typeof visionLimitations[number]

From 96042405e84e08bd9816ed8d4ba520d0940100a1 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Tue, 5 Dec 2023 15:41:23 -0500
Subject: [PATCH 11/42] refactor(NewAccountWizard): Get panes from config.

---
 i18n/en-US.yml                                |  1 +
 lib/components/user/new-account-wizard.tsx    | 93 +++++++++++++------
 .../user/sequential-pane-display.tsx          | 32 ++++---
 lib/util/config-types.ts                      |  1 +
 lib/util/state-types.ts                       |  3 +
 5 files changed, 91 insertions(+), 39 deletions(-)

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index 276016e10..8b04033fd 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -356,6 +356,7 @@ components:
     intro: >-
       Please answer a few questions to customize the trip planning experience to
       your needs and preferences.
+    title: Define Your Mobility Profile
   NarrativeItinerariesHeader:
     changeSortDir: Change sort direction
     howToFindResults: To view results, see the Itineraries Found heading below.
diff --git a/lib/components/user/new-account-wizard.tsx b/lib/components/user/new-account-wizard.tsx
index b0728af10..e16b33e85 100644
--- a/lib/components/user/new-account-wizard.tsx
+++ b/lib/components/user/new-account-wizard.tsx
@@ -1,15 +1,19 @@
+import { connect } from 'react-redux'
 import { Form, FormikProps } from 'formik'
-import { FormattedMessage, useIntl } from 'react-intl'
+import { FormattedMessage, IntlShape, useIntl } from 'react-intl'
 import React, { useCallback } from 'react'
 import toast from 'react-hot-toast'
 
+import { AppReduxState } from '../../util/state-types'
 import PageTitle from '../util/page-title'
 
 import { EditedUser } from './types'
 import AccountSetupFinishPane from './account-setup-finish-pane'
+import AssistiveDevicesPane from './mobity-profile/assistive-devices-pane'
 import FavoritePlaceList from './places/favorite-place-list'
+import LimitationsPane from './mobity-profile/limitations-pane'
 import NotificationPrefsPane from './notification-prefs-pane'
-import SequentialPaneDisplay from './sequential-pane-display'
+import SequentialPaneDisplay, { PaneProps } from './sequential-pane-display'
 import TermsOfUsePane from './terms-of-use-pane'
 import VerifyEmailPane from './verify-email-pane'
 
@@ -17,12 +21,52 @@ import VerifyEmailPane from './verify-email-pane'
 // and to its own blur/change/submit event handlers that automate the state.
 // We forward the props to each pane (via SequentialPaneDisplay) so that their individual controls
 // can be wired to be managed by Formik.
-type FormikUserProps = FormikProps<EditedUser>
-
-interface Props extends FormikUserProps {
+interface Props extends FormikProps<EditedUser> {
   activePaneId: string
   onCancel: () => void
   onCreate: (value: EditedUser) => void
+  panes: PaneProps[]
+}
+
+const standardPanes: Record<string, PaneProps> = {
+  mobility1: {
+    id: 'mobility1',
+    pane: AssistiveDevicesPane,
+    title: <FormattedMessage id="components.MobilityProfile.title" />
+  },
+  mobility2: {
+    id: 'mobility2',
+    pane: LimitationsPane,
+    title: <FormattedMessage id="components.MobilityProfile.title" />
+  },
+  notifications: {
+    getInvalidMessage: (intl: IntlShape) =>
+      intl.formatMessage({
+        id: 'components.PhoneNumberEditor.invalidPhone'
+      }),
+    id: 'notifications',
+    isInvalid: ({
+      isPhoneNumberVerified,
+      notificationChannel,
+      phoneNumber
+    }: EditedUser) => {
+      return (
+        notificationChannel?.includes('sms') &&
+        (!phoneNumber || !isPhoneNumberVerified)
+      )
+    },
+    pane: NotificationPrefsPane,
+    title: <FormattedMessage id="components.NewAccountWizard.notifications" />
+  },
+  places: {
+    id: 'places',
+    pane: FavoritePlaceList,
+    title: <FormattedMessage id="components.NewAccountWizard.places" />
+  }
+}
+
+function getPanes(pageIds: string[]) {
+  return pageIds.map((pageId) => standardPanes[pageId])
 }
 
 /**
@@ -32,6 +76,7 @@ const NewAccountWizard = ({
   activePaneId,
   onCancel, // provided by UserAccountScreen
   onCreate, // provided by UserAccountScreen
+  panes,
   ...formikProps // provided by Formik
 }: Props): JSX.Element => {
   const { values: userData } = formikProps
@@ -65,37 +110,22 @@ const NewAccountWizard = ({
     )
   }
 
-  const { hasConsentedToTerms, notificationChannel = ['email'] } = userData
   const createNewAccount = intl.formatMessage({
     id: 'components.NewAccountWizard.createNewAccount'
   })
   const paneSequence = [
     {
+      getInvalidMessage: (intl: IntlShape) =>
+        intl.formatMessage({
+          id: 'components.TermsOfUsePane.mustAgreeToTerms'
+        }),
       id: 'terms',
-      invalid: !hasConsentedToTerms,
-      invalidMessage: intl.formatMessage({
-        id: 'components.TermsOfUsePane.mustAgreeToTerms'
-      }),
+      isInvalid: ({ hasConsentedToTerms }: EditedUser) => !hasConsentedToTerms,
       onNext: handleCreateNewUser,
       pane: TermsOfUsePane,
       title: createNewAccount
     },
-    {
-      id: 'notifications',
-      invalid:
-        notificationChannel.includes('sms') &&
-        (!userData.phoneNumber || !userData.isPhoneNumberVerified),
-      invalidMessage: intl.formatMessage({
-        id: 'components.PhoneNumberEditor.invalidPhone'
-      }),
-      pane: NotificationPrefsPane,
-      title: <FormattedMessage id="components.NewAccountWizard.notifications" />
-    },
-    {
-      id: 'places',
-      pane: FavoritePlaceList,
-      title: <FormattedMessage id="components.NewAccountWizard.places" />
-    },
+    ...panes,
     {
       id: 'finish',
       pane: AccountSetupFinishPane,
@@ -116,4 +146,13 @@ const NewAccountWizard = ({
   )
 }
 
-export default NewAccountWizard
+// Get the new account pages configuration, if any, from redux state.
+const mapStateToProps = (state: AppReduxState) => {
+  return {
+    panes: getPanes(
+      state.otp.config.newAccountPages || ['notifications', 'places']
+    )
+  }
+}
+
+export default connect(mapStateToProps)(NewAccountWizard)
diff --git a/lib/components/user/sequential-pane-display.tsx b/lib/components/user/sequential-pane-display.tsx
index 9f2df97bf..686ecc080 100644
--- a/lib/components/user/sequential-pane-display.tsx
+++ b/lib/components/user/sequential-pane-display.tsx
@@ -1,19 +1,21 @@
 import { Button } from 'react-bootstrap'
 import { connect } from 'react-redux'
-import { FormattedMessage } from 'react-intl'
+import { FormattedMessage, injectIntl, IntlShape } from 'react-intl'
+import { FormikProps } from 'formik'
 import React, { Component, MouseEvent, ReactNode } from 'react'
 import styled from 'styled-components'
 
 import * as uiActions from '../../actions/ui'
+import { AppReduxState } from '../../util/state-types'
 import { GRAY_ON_WHITE } from '../util/colors'
 
 import { SequentialPaneContainer } from './styled'
 import FormNavigationButtons from './form-navigation-buttons'
 
 export interface PaneProps {
+  getInvalidMessage?: (intl: IntlShape) => string
   id: string
-  invalid?: boolean
-  invalidMessage?: string
+  isInvalid?: (arg: any) => boolean
   onNext?: () => void
   pane: any
   title: ReactNode
@@ -25,10 +27,12 @@ interface OwnProps {
   panes: PaneProps[]
 }
 
-interface Props<T> extends OwnProps {
+interface Props extends OwnProps {
   activePane: PaneProps
   activePaneIndex: number
-  paneProps: T
+  intl: IntlShape
+  paneProps: FormikProps<any>
+  panes: PaneProps[]
   parentPath: string
   routeTo: (url: any) => void
 }
@@ -42,7 +46,7 @@ const StepNumber = styled.p`
 /**
  * This component handles the flow between screens for new OTP user accounts.
  */
-class SequentialPaneDisplay<T> extends Component<Props<T>> {
+class SequentialPaneDisplay extends Component<Props> {
   /**
    * Routes to the next pane URL.
    */
@@ -58,15 +62,19 @@ class SequentialPaneDisplay<T> extends Component<Props<T>> {
   }
 
   _handleToNextPane = async (e: MouseEvent<Button>) => {
-    const { activePane, activePaneIndex, onFinish, panes } = this.props
-    const { invalid, invalidMessage } = activePane
+    const { activePane, activePaneIndex, intl, onFinish, paneProps, panes } =
+      this.props
+    const {
+      getInvalidMessage = (intl: IntlShape) => '',
+      isInvalid = () => false
+    } = activePane
 
     if (activePaneIndex < panes.length - 1) {
       // Don't submit the form if there are more steps to complete.
       e.preventDefault()
 
-      if (invalid) {
-        alert(invalidMessage)
+      if (isInvalid(paneProps.values)) {
+        alert(getInvalidMessage(intl))
       } else {
         const nextId = panes[activePaneIndex + 1].id
         // Execute pane-specific action, if any (e.g. save a user account)
@@ -141,7 +149,7 @@ class SequentialPaneDisplay<T> extends Component<Props<T>> {
 
 // connect to the redux store
 
-const mapStateToProps = (state: any, ownProps: OwnProps) => {
+const mapStateToProps = (state: AppReduxState, ownProps: OwnProps) => {
   const { activePaneId, panes } = ownProps
   const { pathname } = state.router.location
   const activePaneIndex = panes.findIndex(
@@ -161,4 +169,4 @@ const mapDispatchToProps = {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(SequentialPaneDisplay)
+)(injectIntl(SequentialPaneDisplay))
diff --git a/lib/util/config-types.ts b/lib/util/config-types.ts
index a0d46c3d1..0ed068062 100644
--- a/lib/util/config-types.ts
+++ b/lib/util/config-types.ts
@@ -356,6 +356,7 @@ export interface AppConfig {
   map: MapConfig
   mapillary?: MapillaryConfig
   modes: ModesConfig
+  newAccountPages?: string[]
   /** Interval in seconds past which a trip is no longer considered "on-time". */
   onTimeThresholdSeconds?: number
   persistence?: PersistenceConfig
diff --git a/lib/util/state-types.ts b/lib/util/state-types.ts
index ac6107a01..7a944d764 100644
--- a/lib/util/state-types.ts
+++ b/lib/util/state-types.ts
@@ -1,3 +1,5 @@
+import { RouterState } from 'connected-react-router'
+
 import {
   ItineraryExistence,
   MonitoredTrip,
@@ -27,5 +29,6 @@ export interface UserState {
 export interface AppReduxState {
   calltaker?: any // TODO
   otp: OtpState
+  router: RouterState
   user: UserState
 }

From e78f6a9261e6cbd5699dea34f10c43a0b9993584 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 6 Dec 2023 08:28:40 -0500
Subject: [PATCH 12/42] refactor(dropdown-options): Refactor types and
 comments.

---
 .../user/common/dropdown-options.tsx          | 25 ++++++++++---------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/lib/components/user/common/dropdown-options.tsx b/lib/components/user/common/dropdown-options.tsx
index 95d2ec5cb..42ef7524f 100644
--- a/lib/components/user/common/dropdown-options.tsx
+++ b/lib/components/user/common/dropdown-options.tsx
@@ -3,9 +3,13 @@ import { FormControl } from 'react-bootstrap'
 import { IntlShape, useIntl } from 'react-intl'
 import React, { ChangeEventHandler, ComponentType, ReactNode } from 'react'
 
-interface OptionsPropsBase<T> {
-  defaultValue?: T
-  hideDefaultIndication?: boolean
+interface SelectProps {
+  Control?: ComponentType
+  children: ReactNode
+  defaultValue?: string | number | boolean
+  label?: ReactNode
+  name: string
+  onChange?: ChangeEventHandler
 }
 
 /**
@@ -18,15 +22,7 @@ export const Select = ({
   label,
   name,
   onChange
-}: {
-  // Note the prop order required by typescript-sort-keys, also applied above.
-  Control?: ComponentType
-  children: ReactNode
-  defaultValue?: string | number | boolean
-  label?: ReactNode
-  name: string
-  onChange?: ChangeEventHandler
-}): JSX.Element => (
+}: SelectProps): JSX.Element => (
   // <Field> is kept outside of <label> to accommodate layout in table/grid cells.
   <>
     {label && <label htmlFor={name}>{label}</label>}
@@ -43,6 +39,11 @@ export const Select = ({
   </>
 )
 
+interface OptionsPropsBase<T> {
+  defaultValue?: T
+  hideDefaultIndication?: boolean
+}
+
 interface OptionsProps<T extends string | number> extends OptionsPropsBase<T> {
   options: { text: string; value: T }[]
 }

From 40aeaad816744c0ceca1f552be07b5d89a25e4a7 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 6 Dec 2023 09:05:25 -0500
Subject: [PATCH 13/42] refactor(VisionLimitation): Use hyphen in
 'legally-blind'.

---
 i18n/en-US.yml               | 2 +-
 lib/components/user/types.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index 8b04033fd..e3ab6a9ee 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -349,7 +349,7 @@ components:
         Do you have any mobility limitations that cause you to walk slowlier or
         more carefully than other people?
       visionLimitations:
-        legally blind: Legally blind
+        legally-blind: Legally blind
         low-vision: Low-vision
         none: None
       visionPrompt: Do you have any vision limitations?
diff --git a/lib/components/user/types.ts b/lib/components/user/types.ts
index 5cec2b14c..5fc7e7040 100644
--- a/lib/components/user/types.ts
+++ b/lib/components/user/types.ts
@@ -17,7 +17,7 @@ export interface UserSavedLocation {
 export const visionLimitations = [
   'none',
   'low-vision',
-  'legally blind'
+  'legally-blind'
 ] as const
 
 export type VisionLimitation = typeof visionLimitations[number]

From c6338990a6e646914d6a559e1fb629b0f2e22569 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 6 Dec 2023 09:34:18 -0500
Subject: [PATCH 14/42] feat(webapp-routes): Add route for mobility profile
 wizard.

---
 lib/util/constants.js     | 1 +
 lib/util/webapp-routes.js | 7 ++++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/lib/util/constants.js b/lib/util/constants.js
index 7856c269e..07f0abf3e 100644
--- a/lib/util/constants.js
+++ b/lib/util/constants.js
@@ -15,6 +15,7 @@ export const ACCOUNT_PATH = '/account'
 export const ACCOUNT_SETTINGS_PATH = `${ACCOUNT_PATH}/settings`
 export const TRIPS_PATH = `${ACCOUNT_PATH}/trips`
 export const PLACES_PATH = `${ACCOUNT_PATH}/places`
+export const MOBILITY_PATH = `${ACCOUNT_PATH}/mobilityProfile`
 export const CREATE_ACCOUNT_PATH = `${ACCOUNT_PATH}/create`
 export const CREATE_ACCOUNT_TERMS_PATH = `${CREATE_ACCOUNT_PATH}/terms`
 export const CREATE_ACCOUNT_VERIFY_PATH = `${CREATE_ACCOUNT_PATH}/verify`
diff --git a/lib/util/webapp-routes.js b/lib/util/webapp-routes.js
index af39a2ecf..61a59e996 100644
--- a/lib/util/webapp-routes.js
+++ b/lib/util/webapp-routes.js
@@ -11,6 +11,7 @@ import {
   CREATE_ACCOUNT_PATH,
   CREATE_ACCOUNT_PLACES_PATH,
   CREATE_ACCOUNT_VERIFY_PATH,
+  MOBILITY_PATH,
   PLACES_PATH,
   TERMS_OF_SERVICE_PATH,
   TERMS_OF_STORAGE_PATH,
@@ -96,7 +97,11 @@ const routes = [
         <UserAccountScreen {...props} />
       </Suspense>
     ),
-    path: [`${CREATE_ACCOUNT_PATH}/:step`, ACCOUNT_SETTINGS_PATH]
+    path: [
+      `${CREATE_ACCOUNT_PATH}/:step`,
+      `${MOBILITY_PATH}/:step`,
+      ACCOUNT_SETTINGS_PATH
+    ]
   },
   {
     getContextComponent: (components) => frame(components.TermsOfService),

From 22d7cc6cf1590077467a922cccaa5fe19fa318e3 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 6 Dec 2023 10:18:18 -0500
Subject: [PATCH 15/42] refactor(SequentialPaneDisplay): Move onNext from
 PaneProps to component props.

---
 lib/components/user/new-account-wizard.tsx    | 14 +++++++------
 .../user/sequential-pane-display.tsx          | 21 ++++++++++++-------
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/lib/components/user/new-account-wizard.tsx b/lib/components/user/new-account-wizard.tsx
index e16b33e85..4f9ebd1f7 100644
--- a/lib/components/user/new-account-wizard.tsx
+++ b/lib/components/user/new-account-wizard.tsx
@@ -82,12 +82,14 @@ const NewAccountWizard = ({
   const { values: userData } = formikProps
   const intl = useIntl()
 
-  const handleCreateNewUser = useCallback(() => {
-    // Create a user record only if an id is not assigned.
-    if (!userData.id) {
-      onCreate(userData)
+  const handleNext = useCallback(() => {
+    if (activePaneId === 'terms') {
+      // Create a user record only if an id is not assigned.
+      if (!userData.id) {
+        onCreate(userData)
+      }
     }
-  }, [onCreate, userData])
+  }, [activePaneId, onCreate, userData])
 
   const handleFinish = useCallback(() => {
     // Display a toast to acknowledge saved changes
@@ -121,7 +123,6 @@ const NewAccountWizard = ({
         }),
       id: 'terms',
       isInvalid: ({ hasConsentedToTerms }: EditedUser) => !hasConsentedToTerms,
-      onNext: handleCreateNewUser,
       pane: TermsOfUsePane,
       title: createNewAccount
     },
@@ -139,6 +140,7 @@ const NewAccountWizard = ({
       <SequentialPaneDisplay
         activePaneId={activePaneId}
         onFinish={handleFinish}
+        onNext={handleNext}
         paneProps={formikProps}
         panes={paneSequence}
       />
diff --git a/lib/components/user/sequential-pane-display.tsx b/lib/components/user/sequential-pane-display.tsx
index 686ecc080..f99665f6a 100644
--- a/lib/components/user/sequential-pane-display.tsx
+++ b/lib/components/user/sequential-pane-display.tsx
@@ -16,7 +16,6 @@ export interface PaneProps {
   getInvalidMessage?: (intl: IntlShape) => string
   id: string
   isInvalid?: (arg: any) => boolean
-  onNext?: () => void
   pane: any
   title: ReactNode
 }
@@ -24,6 +23,7 @@ export interface PaneProps {
 interface OwnProps {
   activePaneId: string
   onFinish?: () => void
+  onNext?: () => void
   panes: PaneProps[]
 }
 
@@ -62,8 +62,15 @@ class SequentialPaneDisplay extends Component<Props> {
   }
 
   _handleToNextPane = async (e: MouseEvent<Button>) => {
-    const { activePane, activePaneIndex, intl, onFinish, paneProps, panes } =
-      this.props
+    const {
+      activePane,
+      activePaneIndex,
+      intl,
+      onFinish,
+      onNext,
+      paneProps,
+      panes
+    } = this.props
     const {
       getInvalidMessage = (intl: IntlShape) => '',
       isInvalid = () => false
@@ -77,10 +84,10 @@ class SequentialPaneDisplay extends Component<Props> {
         alert(getInvalidMessage(intl))
       } else {
         const nextId = panes[activePaneIndex + 1].id
-        // Execute pane-specific action, if any (e.g. save a user account)
-        // when clicking next.
-        if (typeof activePane.onNext === 'function') {
-          await activePane.onNext()
+        // Execute any action that need to happen before going to the next pane
+        // (e.g. save a user account).
+        if (onNext) {
+          await onNext()
         }
         this._routeTo(nextId)
       }

From 43295134a209be9e557c3eac8e143910ea9cc8f0 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 6 Dec 2023 10:43:47 -0500
Subject: [PATCH 16/42] refactor(NewAccountWizard): Support multiple page
 configs

---
 lib/components/user/new-account-wizard.tsx  | 48 ++++++++++++---------
 lib/components/user/user-account-screen.tsx | 13 ++++--
 lib/util/config-types.ts                    |  5 ++-
 3 files changed, 40 insertions(+), 26 deletions(-)

diff --git a/lib/components/user/new-account-wizard.tsx b/lib/components/user/new-account-wizard.tsx
index 4f9ebd1f7..fb35cbeea 100644
--- a/lib/components/user/new-account-wizard.tsx
+++ b/lib/components/user/new-account-wizard.tsx
@@ -23,12 +23,18 @@ import VerifyEmailPane from './verify-email-pane'
 // can be wired to be managed by Formik.
 interface Props extends FormikProps<EditedUser> {
   activePaneId: string
+  basePath: string
   onCancel: () => void
   onCreate: (value: EditedUser) => void
   panes: PaneProps[]
 }
 
 const standardPanes: Record<string, PaneProps> = {
+  finish: {
+    id: 'finish',
+    pane: AccountSetupFinishPane,
+    title: <FormattedMessage id="components.NewAccountWizard.finish" />
+  },
   mobility1: {
     id: 'mobility1',
     pane: AssistiveDevicesPane,
@@ -62,6 +68,18 @@ const standardPanes: Record<string, PaneProps> = {
     id: 'places',
     pane: FavoritePlaceList,
     title: <FormattedMessage id="components.NewAccountWizard.places" />
+  },
+  terms: {
+    getInvalidMessage: (intl: IntlShape) =>
+      intl.formatMessage({
+        id: 'components.TermsOfUsePane.mustAgreeToTerms'
+      }),
+    id: 'terms',
+    isInvalid: ({ hasConsentedToTerms }: EditedUser) => !hasConsentedToTerms,
+    pane: TermsOfUsePane,
+    title: (
+      <FormattedMessage id="components.NewAccountWizard.createNewAccount" />
+    )
   }
 }
 
@@ -115,24 +133,6 @@ const NewAccountWizard = ({
   const createNewAccount = intl.formatMessage({
     id: 'components.NewAccountWizard.createNewAccount'
   })
-  const paneSequence = [
-    {
-      getInvalidMessage: (intl: IntlShape) =>
-        intl.formatMessage({
-          id: 'components.TermsOfUsePane.mustAgreeToTerms'
-        }),
-      id: 'terms',
-      isInvalid: ({ hasConsentedToTerms }: EditedUser) => !hasConsentedToTerms,
-      pane: TermsOfUsePane,
-      title: createNewAccount
-    },
-    ...panes,
-    {
-      id: 'finish',
-      pane: AccountSetupFinishPane,
-      title: <FormattedMessage id="components.NewAccountWizard.finish" />
-    }
-  ]
 
   return (
     <Form id="user-settings-form" noValidate>
@@ -142,17 +142,23 @@ const NewAccountWizard = ({
         onFinish={handleFinish}
         onNext={handleNext}
         paneProps={formikProps}
-        panes={paneSequence}
+        panes={panes}
       />
     </Form>
   )
 }
 
 // Get the new account pages configuration, if any, from redux state.
-const mapStateToProps = (state: AppReduxState) => {
+const mapStateToProps = (state: AppReduxState, ownProps: Props) => {
+  const { basePath } = ownProps
   return {
     panes: getPanes(
-      state.otp.config.newAccountPages || ['notifications', 'places']
+      state.otp.config.wizardPages?.[basePath] || [
+        'terms',
+        'notifications',
+        'places',
+        'finish'
+      ]
     )
   }
 }
diff --git a/lib/components/user/user-account-screen.tsx b/lib/components/user/user-account-screen.tsx
index f5af2d47c..9d17cb4f3 100644
--- a/lib/components/user/user-account-screen.tsx
+++ b/lib/components/user/user-account-screen.tsx
@@ -14,7 +14,7 @@ import toast from 'react-hot-toast'
 import * as uiActions from '../../actions/ui'
 import * as userActions from '../../actions/user'
 import { AppReduxState } from '../../util/state-types'
-import { CREATE_ACCOUNT_PATH } from '../../util/constants'
+import { CREATE_ACCOUNT_PATH, MOBILITY_PATH } from '../../util/constants'
 import { RETURN_TO_CURRENT_ROUTE } from '../../util/ui'
 import { toastSuccess } from '../util/toasts'
 
@@ -26,6 +26,7 @@ import withLoggedInUserSupport from './with-logged-in-user-support'
 
 interface Props {
   auth0: Auth0ContextInterface
+  basePath: string
   createOrUpdateUser: (user: User, intl: IntlShape) => Promise<number>
   deleteUser: (
     user: User,
@@ -209,7 +210,7 @@ class UserAccountScreen extends Component<Props> {
   }
 
   render() {
-    const { auth0, isCreating, itemId, loggedInUser } = this.props
+    const { auth0, basePath, isCreating, itemId, loggedInUser } = this.props
     const DisplayComponent = isCreating
       ? NewAccountWizard
       : ExistingAccountDisplay
@@ -236,6 +237,7 @@ class UserAccountScreen extends Component<Props> {
                 <DisplayComponent
                   {...formikProps}
                   activePaneId={itemId}
+                  basePath={basePath}
                   // @ts-expect-error emailVerified prop used by only one of the DisplayComponent.
                   emailVerified={auth0.user?.email_verified}
                   // Use our own handleChange handler that wraps around Formik's.
@@ -267,9 +269,14 @@ const mapStateToProps = (
   ownProps: RouteComponentProps<{ step: string }>
 ) => {
   const { params, url } = ownProps.match
-  const isCreating = url.startsWith(CREATE_ACCOUNT_PATH)
+  const isCreating =
+    url.startsWith(CREATE_ACCOUNT_PATH) || url.startsWith(MOBILITY_PATH)
+  let basePath
+  if (url.startsWith(CREATE_ACCOUNT_PATH)) basePath = CREATE_ACCOUNT_PATH
+  if (url.startsWith(MOBILITY_PATH)) basePath = MOBILITY_PATH
   const { step } = params
   return {
+    basePath,
     isCreating,
     itemId: step,
     loggedInUser: state.user.loggedInUser
diff --git a/lib/util/config-types.ts b/lib/util/config-types.ts
index 0ed068062..428a1a018 100644
--- a/lib/util/config-types.ts
+++ b/lib/util/config-types.ts
@@ -356,7 +356,6 @@ export interface AppConfig {
   map: MapConfig
   mapillary?: MapillaryConfig
   modes: ModesConfig
-  newAccountPages?: string[]
   /** Interval in seconds past which a trip is no longer considered "on-time". */
   onTimeThresholdSeconds?: number
   persistence?: PersistenceConfig
@@ -374,6 +373,8 @@ export interface AppConfig {
   /** App title shown in the browser title bar. */
   title?: string
   transitOperators?: TransitOperatorConfig[]
+  /** Optionally configures wizard (multi-step) dialogs with sequences of pages. */
+  wizardPages?: Record<string, string[]>
 
-  // TODO: add other config items.
+  // Add other config items as needed.
 }

From 0078622406be8e943bf41647bcb738f003ac7057 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 6 Dec 2023 11:27:10 -0500
Subject: [PATCH 17/42] refactor(NewAccountWizard): Inline onCancel handler.

---
 lib/components/user/new-account-wizard.tsx      | 14 +++++++++-----
 lib/components/user/sequential-pane-display.tsx |  8 ++++----
 lib/components/user/user-account-screen.tsx     |  9 ---------
 3 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/lib/components/user/new-account-wizard.tsx b/lib/components/user/new-account-wizard.tsx
index fb35cbeea..c12a96929 100644
--- a/lib/components/user/new-account-wizard.tsx
+++ b/lib/components/user/new-account-wizard.tsx
@@ -4,6 +4,7 @@ import { FormattedMessage, IntlShape, useIntl } from 'react-intl'
 import React, { useCallback } from 'react'
 import toast from 'react-hot-toast'
 
+import * as uiActions from '../../actions/ui'
 import { AppReduxState } from '../../util/state-types'
 import PageTitle from '../util/page-title'
 
@@ -24,9 +25,9 @@ import VerifyEmailPane from './verify-email-pane'
 interface Props extends FormikProps<EditedUser> {
   activePaneId: string
   basePath: string
-  onCancel: () => void
   onCreate: (value: EditedUser) => void
   panes: PaneProps[]
+  routeTo: (to: string) => void
 }
 
 const standardPanes: Record<string, PaneProps> = {
@@ -92,7 +93,6 @@ function getPanes(pageIds: string[]) {
  */
 const NewAccountWizard = ({
   activePaneId,
-  onCancel, // provided by UserAccountScreen
   onCreate, // provided by UserAccountScreen
   panes,
   ...formikProps // provided by Formik
@@ -114,8 +114,8 @@ const NewAccountWizard = ({
     // (although in reality, changes quietly took effect in previous screens).
     toast.success(intl.formatMessage({ id: 'actions.user.preferencesSaved' }))
 
-    onCancel && onCancel()
-  }, [intl, onCancel])
+    routeTo('/')
+  }, [intl])
 
   if (activePaneId === 'verify') {
     const verifyEmail = intl.formatMessage({
@@ -163,4 +163,8 @@ const mapStateToProps = (state: AppReduxState, ownProps: Props) => {
   }
 }
 
-export default connect(mapStateToProps)(NewAccountWizard)
+const mapDispatchToProps = {
+  routeTo: uiActions.routeTo
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(NewAccountWizard)
diff --git a/lib/components/user/sequential-pane-display.tsx b/lib/components/user/sequential-pane-display.tsx
index f99665f6a..eb3f88074 100644
--- a/lib/components/user/sequential-pane-display.tsx
+++ b/lib/components/user/sequential-pane-display.tsx
@@ -71,15 +71,15 @@ class SequentialPaneDisplay extends Component<Props> {
       paneProps,
       panes
     } = this.props
-    const {
-      getInvalidMessage = (intl: IntlShape) => '',
-      isInvalid = () => false
-    } = activePane
 
     if (activePaneIndex < panes.length - 1) {
       // Don't submit the form if there are more steps to complete.
       e.preventDefault()
 
+      const {
+        getInvalidMessage = (intl: IntlShape) => '',
+        isInvalid = () => false
+      } = activePane
       if (isInvalid(paneProps.values)) {
         alert(getInvalidMessage(intl))
       } else {
diff --git a/lib/components/user/user-account-screen.tsx b/lib/components/user/user-account-screen.tsx
index 9d17cb4f3..b708dbc15 100644
--- a/lib/components/user/user-account-screen.tsx
+++ b/lib/components/user/user-account-screen.tsx
@@ -11,7 +11,6 @@ import React, { ChangeEvent, Component, FormEvent } from 'react'
 import styled, { css } from 'styled-components'
 import toast from 'react-hot-toast'
 
-import * as uiActions from '../../actions/ui'
 import * as userActions from '../../actions/user'
 import { AppReduxState } from '../../util/state-types'
 import { CREATE_ACCOUNT_PATH, MOBILITY_PATH } from '../../util/constants'
@@ -38,7 +37,6 @@ interface Props {
   itemId: string
   loggedInUser: User
   requestPhoneVerificationSms: (phoneNum: string, intl: IntlShape) => void
-  routeTo: (to: string) => void
   verifyPhoneNumber: (code: string, intl: IntlShape) => void
 }
 
@@ -111,11 +109,6 @@ class UserAccountScreen extends Component<Props> {
     }
   }
 
-  _handleExit = () => {
-    // On exit, route to default search route.
-    this.props.routeTo('/')
-  }
-
   _handleRequestPhoneVerificationCode = (newPhoneNumber: string) => {
     const { intl, requestPhoneVerificationSms } = this.props
     requestPhoneVerificationSms(newPhoneNumber, intl)
@@ -243,7 +236,6 @@ class UserAccountScreen extends Component<Props> {
                   // Use our own handleChange handler that wraps around Formik's.
                   handleChange={this._handleInputChange(formikProps)}
                   loggedInUser={loggedInUser}
-                  onCancel={this._handleExit}
                   onCreate={this._handleCreateNewUser}
                   onDelete={this._handleDeleteUser}
                   onRequestPhoneVerificationCode={
@@ -287,7 +279,6 @@ const mapDispatchToProps = {
   createOrUpdateUser: userActions.createOrUpdateUser,
   deleteUser: userActions.deleteUser,
   requestPhoneVerificationSms: userActions.requestPhoneVerificationSms,
-  routeTo: uiActions.routeTo,
   verifyPhoneNumber: userActions.verifyPhoneNumber
 }
 

From 8757513cd16c3019bf86a48eecf7bda31b121ccf Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 6 Dec 2023 13:09:20 -0500
Subject: [PATCH 18/42] refactor(NewAccountWizard): Remove basePath

---
 lib/components/user/new-account-wizard.tsx  | 4 +---
 lib/components/user/user-account-screen.tsx | 8 +-------
 lib/util/config-types.ts                    | 4 ++--
 3 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/lib/components/user/new-account-wizard.tsx b/lib/components/user/new-account-wizard.tsx
index c12a96929..f23e0c50d 100644
--- a/lib/components/user/new-account-wizard.tsx
+++ b/lib/components/user/new-account-wizard.tsx
@@ -24,7 +24,6 @@ import VerifyEmailPane from './verify-email-pane'
 // can be wired to be managed by Formik.
 interface Props extends FormikProps<EditedUser> {
   activePaneId: string
-  basePath: string
   onCreate: (value: EditedUser) => void
   panes: PaneProps[]
   routeTo: (to: string) => void
@@ -150,10 +149,9 @@ const NewAccountWizard = ({
 
 // Get the new account pages configuration, if any, from redux state.
 const mapStateToProps = (state: AppReduxState, ownProps: Props) => {
-  const { basePath } = ownProps
   return {
     panes: getPanes(
-      state.otp.config.wizardPages?.[basePath] || [
+      state.otp.config.newAccountPages || [
         'terms',
         'notifications',
         'places',
diff --git a/lib/components/user/user-account-screen.tsx b/lib/components/user/user-account-screen.tsx
index b708dbc15..7a4c7dfe6 100644
--- a/lib/components/user/user-account-screen.tsx
+++ b/lib/components/user/user-account-screen.tsx
@@ -25,7 +25,6 @@ import withLoggedInUserSupport from './with-logged-in-user-support'
 
 interface Props {
   auth0: Auth0ContextInterface
-  basePath: string
   createOrUpdateUser: (user: User, intl: IntlShape) => Promise<number>
   deleteUser: (
     user: User,
@@ -203,7 +202,7 @@ class UserAccountScreen extends Component<Props> {
   }
 
   render() {
-    const { auth0, basePath, isCreating, itemId, loggedInUser } = this.props
+    const { auth0, isCreating, itemId, loggedInUser } = this.props
     const DisplayComponent = isCreating
       ? NewAccountWizard
       : ExistingAccountDisplay
@@ -230,7 +229,6 @@ class UserAccountScreen extends Component<Props> {
                 <DisplayComponent
                   {...formikProps}
                   activePaneId={itemId}
-                  basePath={basePath}
                   // @ts-expect-error emailVerified prop used by only one of the DisplayComponent.
                   emailVerified={auth0.user?.email_verified}
                   // Use our own handleChange handler that wraps around Formik's.
@@ -263,12 +261,8 @@ const mapStateToProps = (
   const { params, url } = ownProps.match
   const isCreating =
     url.startsWith(CREATE_ACCOUNT_PATH) || url.startsWith(MOBILITY_PATH)
-  let basePath
-  if (url.startsWith(CREATE_ACCOUNT_PATH)) basePath = CREATE_ACCOUNT_PATH
-  if (url.startsWith(MOBILITY_PATH)) basePath = MOBILITY_PATH
   const { step } = params
   return {
-    basePath,
     isCreating,
     itemId: step,
     loggedInUser: state.user.loggedInUser
diff --git a/lib/util/config-types.ts b/lib/util/config-types.ts
index 428a1a018..783d1c366 100644
--- a/lib/util/config-types.ts
+++ b/lib/util/config-types.ts
@@ -356,6 +356,8 @@ export interface AppConfig {
   map: MapConfig
   mapillary?: MapillaryConfig
   modes: ModesConfig
+  /** Optionally configures wizard (multi-step) dialogs with sequences of pages. */
+  newAccountPages?: string[]
   /** Interval in seconds past which a trip is no longer considered "on-time". */
   onTimeThresholdSeconds?: number
   persistence?: PersistenceConfig
@@ -373,8 +375,6 @@ export interface AppConfig {
   /** App title shown in the browser title bar. */
   title?: string
   transitOperators?: TransitOperatorConfig[]
-  /** Optionally configures wizard (multi-step) dialogs with sequences of pages. */
-  wizardPages?: Record<string, string[]>
 
   // Add other config items as needed.
 }

From 78a045bae0f2f17dcd41bfc0b04aba1f723ca833 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 6 Dec 2023 14:47:49 -0500
Subject: [PATCH 19/42] refactor(Wizard): Introduce common wizard component.

---
 lib/components/user/common/wizard.tsx         | 122 ++++++++++++++++++
 .../assistive-devices-pane.tsx                |   0
 .../limitations-pane.tsx                      |   0
 .../user/mobility-profile/mobility-wizard.tsx |  46 +++++++
 4 files changed, 168 insertions(+)
 create mode 100644 lib/components/user/common/wizard.tsx
 rename lib/components/user/{mobity-profile => mobility-profile}/assistive-devices-pane.tsx (100%)
 rename lib/components/user/{mobity-profile => mobility-profile}/limitations-pane.tsx (100%)
 create mode 100644 lib/components/user/mobility-profile/mobility-wizard.tsx

diff --git a/lib/components/user/common/wizard.tsx b/lib/components/user/common/wizard.tsx
new file mode 100644
index 000000000..d3bde83d2
--- /dev/null
+++ b/lib/components/user/common/wizard.tsx
@@ -0,0 +1,122 @@
+import { Form, FormikProps } from 'formik'
+import { FormattedMessage, IntlShape, useIntl } from 'react-intl'
+import React, { useCallback } from 'react'
+import toast from 'react-hot-toast'
+
+import { EditedUser } from '../types'
+import AccountSetupFinishPane from '../account-setup-finish-pane'
+import AssistiveDevicesPane from '../mobility-profile/assistive-devices-pane'
+import FavoritePlaceList from '../places/favorite-place-list'
+import LimitationsPane from '../mobility-profile/limitations-pane'
+import NotificationPrefsPane from '../notification-prefs-pane'
+import PageTitle from '../../util/page-title'
+import SequentialPaneDisplay, { PaneProps } from '../sequential-pane-display'
+import TermsOfUsePane from '../terms-of-use-pane'
+
+// The props include Formik props that provide access to the current user data (stored in props.values)
+// and to its own blur/change/submit event handlers that automate the state.
+// We forward the props to each pane (via SequentialPaneDisplay) so that their individual controls
+// can be wired to be managed by Formik.
+interface Props {
+  activePaneId: string
+  formikProps: FormikProps<EditedUser>
+  onNext?: () => void
+  originRoute?: string
+  pages: string[]
+  routeTo: (to: string) => void
+  title: string
+}
+
+const standardPanes: Record<string, PaneProps> = {
+  finish: {
+    id: 'finish',
+    pane: AccountSetupFinishPane,
+    title: <FormattedMessage id="components.NewAccountWizard.finish" />
+  },
+  mobility1: {
+    id: 'mobility1',
+    pane: AssistiveDevicesPane,
+    title: <FormattedMessage id="components.MobilityProfile.title" />
+  },
+  mobility2: {
+    id: 'mobility2',
+    pane: LimitationsPane,
+    title: <FormattedMessage id="components.MobilityProfile.title" />
+  },
+  notifications: {
+    getInvalidMessage: (intl: IntlShape) =>
+      intl.formatMessage({
+        id: 'components.PhoneNumberEditor.invalidPhone'
+      }),
+    id: 'notifications',
+    isInvalid: ({
+      isPhoneNumberVerified,
+      notificationChannel,
+      phoneNumber
+    }: EditedUser) => {
+      return (
+        notificationChannel?.includes('sms') &&
+        (!phoneNumber || !isPhoneNumberVerified)
+      )
+    },
+    pane: NotificationPrefsPane,
+    title: <FormattedMessage id="components.NewAccountWizard.notifications" />
+  },
+  places: {
+    id: 'places',
+    pane: FavoritePlaceList,
+    title: <FormattedMessage id="components.NewAccountWizard.places" />
+  },
+  terms: {
+    getInvalidMessage: (intl: IntlShape) =>
+      intl.formatMessage({
+        id: 'components.TermsOfUsePane.mustAgreeToTerms'
+      }),
+    id: 'terms',
+    isInvalid: ({ hasConsentedToTerms }: EditedUser) => !hasConsentedToTerms,
+    pane: TermsOfUsePane,
+    title: (
+      <FormattedMessage id="components.NewAccountWizard.createNewAccount" />
+    )
+  }
+}
+
+function getPanes(pageIds: string[]): PaneProps[] {
+  return pageIds.map((pageId) => standardPanes[pageId])
+}
+
+/**
+ * Basic component to build wizards (step-by-step forms).
+ */
+const Wizard = ({
+  activePaneId,
+  formikProps,
+  originRoute = '/',
+  pages,
+  title
+}: Props): JSX.Element => {
+  const intl = useIntl()
+
+  const handleFinish = useCallback(() => {
+    // Display a toast to acknowledge saved changes
+    // (although in reality, changes quietly took effect in previous screens).
+    toast.success(intl.formatMessage({ id: 'actions.user.preferencesSaved' }))
+
+    routeTo(originRoute)
+  }, [intl, originRoute])
+
+  return (
+    <Form id="user-settings-form" noValidate>
+      <PageTitle title={title} />
+      <SequentialPaneDisplay
+        activePaneId={activePaneId}
+        onFinish={handleFinish}
+        onNext={onNext}
+        paneProps={formikProps}
+        panes={getPanes(pages)}
+      />
+    </Form>
+  )
+}
+
+export default Wizard
diff --git a/lib/components/user/mobity-profile/assistive-devices-pane.tsx b/lib/components/user/mobility-profile/assistive-devices-pane.tsx
similarity index 100%
rename from lib/components/user/mobity-profile/assistive-devices-pane.tsx
rename to lib/components/user/mobility-profile/assistive-devices-pane.tsx
diff --git a/lib/components/user/mobity-profile/limitations-pane.tsx b/lib/components/user/mobility-profile/limitations-pane.tsx
similarity index 100%
rename from lib/components/user/mobity-profile/limitations-pane.tsx
rename to lib/components/user/mobility-profile/limitations-pane.tsx
diff --git a/lib/components/user/mobility-profile/mobility-wizard.tsx b/lib/components/user/mobility-profile/mobility-wizard.tsx
new file mode 100644
index 000000000..82fe5896a
--- /dev/null
+++ b/lib/components/user/mobility-profile/mobility-wizard.tsx
@@ -0,0 +1,46 @@
+import { FormikProps } from 'formik'
+import { useIntl } from 'react-intl'
+import React from 'react'
+
+import { EditedUser } from '../types'
+import Wizard from '../common/wizard'
+
+// The props include Formik props that provide access to the current user data (stored in props.values)
+// and to its own blur/change/submit event handlers that automate the state.
+// We forward the props to each pane (via SequentialPaneDisplay) so that their individual controls
+// can be wired to be managed by Formik.
+interface Props extends FormikProps<EditedUser> {
+  activePaneId: string
+  basePath: string
+  onCreate: (value: EditedUser) => void
+  panes: PaneProps[]
+  routeTo: (to: string) => void
+}
+
+/**
+ * This component is the new account wizard.
+ */
+const MobilityWizard = ({
+  activePaneId,
+  panes,
+  ...formikProps // provided by Formik
+}: Props): JSX.Element => {
+  const intl = useIntl()
+
+  const title = intl.formatMessage({
+    id: 'components.MobilityProfile.title'
+  })
+
+  return (
+    <Wizard
+      activePaneId={activePaneId}
+      formikProps={formikProps}
+      originRoute="/account/settings"
+      pages={['mobility1', 'mobility2']}
+      paneProps={formikProps}
+      title={title}
+    />
+  )
+}
+
+export default MobilityWizard

From e476a3de977390997980f3305590f31f8bd633fa Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 6 Dec 2023 14:56:09 -0500
Subject: [PATCH 20/42] fix(Wizard): Fix compile errors

---
 lib/components/user/common/wizard.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/lib/components/user/common/wizard.tsx b/lib/components/user/common/wizard.tsx
index d3bde83d2..8922f58df 100644
--- a/lib/components/user/common/wizard.tsx
+++ b/lib/components/user/common/wizard.tsx
@@ -1,8 +1,10 @@
+import { connect } from 'react-redux'
 import { Form, FormikProps } from 'formik'
 import { FormattedMessage, IntlShape, useIntl } from 'react-intl'
 import React, { useCallback } from 'react'
 import toast from 'react-hot-toast'
 
+import * as uiActions from '../../../actions/ui'
 import { EditedUser } from '../types'
 import AccountSetupFinishPane from '../account-setup-finish-pane'
 import AssistiveDevicesPane from '../mobility-profile/assistive-devices-pane'
@@ -91,8 +93,10 @@ function getPanes(pageIds: string[]): PaneProps[] {
 const Wizard = ({
   activePaneId,
   formikProps,
+  onNext,
   originRoute = '/',
   pages,
+  routeTo,
   title
 }: Props): JSX.Element => {
   const intl = useIntl()
@@ -103,7 +107,7 @@ const Wizard = ({
     toast.success(intl.formatMessage({ id: 'actions.user.preferencesSaved' }))
 
     routeTo(originRoute)
-  }, [intl, originRoute])
+  }, [intl, originRoute, routeTo])
 
   return (
     <Form id="user-settings-form" noValidate>
@@ -119,4 +123,8 @@ const Wizard = ({
   )
 }
 
-export default Wizard
+const mapDispatchToProps = {
+  routeTo: uiActions.routeTo
+}
+
+export default connect(null, mapDispatchToProps)(Wizard)

From ef08f0bb4dfbcf960262826cd9486d59c1145080 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 6 Dec 2023 15:40:45 -0500
Subject: [PATCH 21/42] refactor(MobilityWizard): Remove unneeded props

---
 lib/components/user/mobility-profile/mobility-wizard.tsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/lib/components/user/mobility-profile/mobility-wizard.tsx b/lib/components/user/mobility-profile/mobility-wizard.tsx
index 82fe5896a..cc5a3d7ce 100644
--- a/lib/components/user/mobility-profile/mobility-wizard.tsx
+++ b/lib/components/user/mobility-profile/mobility-wizard.tsx
@@ -11,10 +11,6 @@ import Wizard from '../common/wizard'
 // can be wired to be managed by Formik.
 interface Props extends FormikProps<EditedUser> {
   activePaneId: string
-  basePath: string
-  onCreate: (value: EditedUser) => void
-  panes: PaneProps[]
-  routeTo: (to: string) => void
 }
 
 /**
@@ -22,7 +18,6 @@ interface Props extends FormikProps<EditedUser> {
  */
 const MobilityWizard = ({
   activePaneId,
-  panes,
   ...formikProps // provided by Formik
 }: Props): JSX.Element => {
   const intl = useIntl()
@@ -37,7 +32,6 @@ const MobilityWizard = ({
       formikProps={formikProps}
       originRoute="/account/settings"
       pages={['mobility1', 'mobility2']}
-      paneProps={formikProps}
       title={title}
     />
   )

From 28a296c5cf232f45c4f4080bad39aef1c7d7b657 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 6 Dec 2023 16:31:20 -0500
Subject: [PATCH 22/42] feat(MobilityPane): Add mobility option to existing
 account display.

---
 i18n/en-US.yml                                |  6 ++--
 .../user/existing-account-display.tsx         |  8 +++++
 .../user/mobility-profile/mobility-pane.tsx   | 30 +++++++++++++++++++
 .../user/mobility-profile/mobility-wizard.tsx |  2 +-
 lib/util/webapp-routes.js                     |  1 +
 5 files changed, 44 insertions(+), 3 deletions(-)
 create mode 100644 lib/components/user/mobility-profile/mobility-pane.tsx

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index e3ab6a9ee..d9ad3175e 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -346,13 +346,15 @@ components:
       prompt: Do you regularly use a mobility assistive device? (Check all that apply)
     LimitationsPane:
       mobilityPrompt: >-
-        Do you have any mobility limitations that cause you to walk slowlier or
-        more carefully than other people?
+        Do you have any mobility limitations that cause you to walk more slowly
+        or more carefully than other people?
       visionLimitations:
         legally-blind: Legally blind
         low-vision: Low-vision
         none: None
       visionPrompt: Do you have any vision limitations?
+    MobilityPane:
+      header: Mobility Profile
     intro: >-
       Please answer a few questions to customize the trip planning experience to
       your needs and preferences.
diff --git a/lib/components/user/existing-account-display.tsx b/lib/components/user/existing-account-display.tsx
index 5e80d1fc3..46d4ad675 100644
--- a/lib/components/user/existing-account-display.tsx
+++ b/lib/components/user/existing-account-display.tsx
@@ -12,6 +12,7 @@ import A11yPrefs from './a11y-prefs'
 import BackToTripPlanner from './back-to-trip-planner'
 import DeleteUser from './delete-user'
 import FavoritePlaceList from './places/favorite-place-list'
+import MobilityPane from './mobility-profile/mobility-pane'
 import NotificationPrefsPane from './notification-prefs-pane'
 import StackedPanes from './stacked-panes'
 import TermsOfUsePane from './terms-of-use-pane'
@@ -38,6 +39,13 @@ const ExistingAccountDisplay = (props: Props) => {
       props,
       title: <FormattedMessage id="components.ExistingAccountDisplay.places" />
     },
+    {
+      pane: MobilityPane,
+      props,
+      title: (
+        <FormattedMessage id="components.MobilityProfile.MobilityPane.header" />
+      )
+    },
     {
       pane: NotificationPrefsPane,
       props,
diff --git a/lib/components/user/mobility-profile/mobility-pane.tsx b/lib/components/user/mobility-profile/mobility-pane.tsx
new file mode 100644
index 000000000..c14b96d4b
--- /dev/null
+++ b/lib/components/user/mobility-profile/mobility-pane.tsx
@@ -0,0 +1,30 @@
+import { Button } from 'react-bootstrap'
+import { connect } from 'react-redux'
+import { FormattedMessage } from 'react-intl'
+import React, { useCallback } from 'react'
+
+import * as uiActions from '../../../actions/ui'
+
+interface Props {
+  routeTo: (url: string) => void
+}
+
+/**
+ * Renders a button to show the mobility profile settings.
+ */
+const MobilityPane = ({ routeTo }: Props): JSX.Element => {
+  const handleClick = useCallback(() => {
+    routeTo('/account/mobilityProfile/')
+  }, [routeTo])
+  return (
+    <Button bsStyle="primary" onClick={handleClick}>
+      <FormattedMessage id="components.MobilityProfile.title" />
+    </Button>
+  )
+}
+
+const mapDispatchToProps = {
+  routeTo: uiActions.routeTo
+}
+
+export default connect(null, mapDispatchToProps)(MobilityPane)
diff --git a/lib/components/user/mobility-profile/mobility-wizard.tsx b/lib/components/user/mobility-profile/mobility-wizard.tsx
index cc5a3d7ce..0fcc1a008 100644
--- a/lib/components/user/mobility-profile/mobility-wizard.tsx
+++ b/lib/components/user/mobility-profile/mobility-wizard.tsx
@@ -14,7 +14,7 @@ interface Props extends FormikProps<EditedUser> {
 }
 
 /**
- * This component is the new account wizard.
+ * This component is the mobility profile wizard.
  */
 const MobilityWizard = ({
   activePaneId,
diff --git a/lib/util/webapp-routes.js b/lib/util/webapp-routes.js
index 61a59e996..34bcf2dc8 100644
--- a/lib/util/webapp-routes.js
+++ b/lib/util/webapp-routes.js
@@ -100,6 +100,7 @@ const routes = [
     path: [
       `${CREATE_ACCOUNT_PATH}/:step`,
       `${MOBILITY_PATH}/:step`,
+      `${MOBILITY_PATH}/`,
       ACCOUNT_SETTINGS_PATH
     ]
   },

From 4fe5a4766634d4ac9eb4e87559012eed2c2c67f7 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 6 Dec 2023 16:34:46 -0500
Subject: [PATCH 23/42] fix(SequentialPaneDisplay): Route to first pane if none
 specified.

---
 lib/components/user/sequential-pane-display.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/lib/components/user/sequential-pane-display.tsx b/lib/components/user/sequential-pane-display.tsx
index eb3f88074..449a48583 100644
--- a/lib/components/user/sequential-pane-display.tsx
+++ b/lib/components/user/sequential-pane-display.tsx
@@ -108,6 +108,10 @@ class SequentialPaneDisplay extends Component<Props> {
 
   componentDidMount(): void {
     this._focusHeader()
+
+    if (!this.props.activePaneId) {
+      this._routeTo(this.props.panes[0].id)
+    }
   }
 
   render() {

From 1ce89479743a3ea75a3a6181fc362549ad2cd258 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 6 Dec 2023 16:43:48 -0500
Subject: [PATCH 24/42] refactor(UserAccountScreen): Split out rendering to
 reduce props passed.

---
 lib/components/user/new-account-wizard.tsx  | 139 +++-----------------
 lib/components/user/user-account-screen.tsx | 117 ++++++++++------
 2 files changed, 98 insertions(+), 158 deletions(-)

diff --git a/lib/components/user/new-account-wizard.tsx b/lib/components/user/new-account-wizard.tsx
index f23e0c50d..f0bb32fbf 100644
--- a/lib/components/user/new-account-wizard.tsx
+++ b/lib/components/user/new-account-wizard.tsx
@@ -1,22 +1,12 @@
 import { connect } from 'react-redux'
-import { Form, FormikProps } from 'formik'
-import { FormattedMessage, IntlShape, useIntl } from 'react-intl'
+import { FormikProps } from 'formik'
+import { useIntl } from 'react-intl'
 import React, { useCallback } from 'react'
-import toast from 'react-hot-toast'
 
-import * as uiActions from '../../actions/ui'
 import { AppReduxState } from '../../util/state-types'
-import PageTitle from '../util/page-title'
 
 import { EditedUser } from './types'
-import AccountSetupFinishPane from './account-setup-finish-pane'
-import AssistiveDevicesPane from './mobity-profile/assistive-devices-pane'
-import FavoritePlaceList from './places/favorite-place-list'
-import LimitationsPane from './mobity-profile/limitations-pane'
-import NotificationPrefsPane from './notification-prefs-pane'
-import SequentialPaneDisplay, { PaneProps } from './sequential-pane-display'
-import TermsOfUsePane from './terms-of-use-pane'
-import VerifyEmailPane from './verify-email-pane'
+import Wizard from './common/wizard'
 
 // The props include Formik props that provide access to the current user data (stored in props.values)
 // and to its own blur/change/submit event handlers that automate the state.
@@ -25,66 +15,7 @@ import VerifyEmailPane from './verify-email-pane'
 interface Props extends FormikProps<EditedUser> {
   activePaneId: string
   onCreate: (value: EditedUser) => void
-  panes: PaneProps[]
-  routeTo: (to: string) => void
-}
-
-const standardPanes: Record<string, PaneProps> = {
-  finish: {
-    id: 'finish',
-    pane: AccountSetupFinishPane,
-    title: <FormattedMessage id="components.NewAccountWizard.finish" />
-  },
-  mobility1: {
-    id: 'mobility1',
-    pane: AssistiveDevicesPane,
-    title: <FormattedMessage id="components.MobilityProfile.title" />
-  },
-  mobility2: {
-    id: 'mobility2',
-    pane: LimitationsPane,
-    title: <FormattedMessage id="components.MobilityProfile.title" />
-  },
-  notifications: {
-    getInvalidMessage: (intl: IntlShape) =>
-      intl.formatMessage({
-        id: 'components.PhoneNumberEditor.invalidPhone'
-      }),
-    id: 'notifications',
-    isInvalid: ({
-      isPhoneNumberVerified,
-      notificationChannel,
-      phoneNumber
-    }: EditedUser) => {
-      return (
-        notificationChannel?.includes('sms') &&
-        (!phoneNumber || !isPhoneNumberVerified)
-      )
-    },
-    pane: NotificationPrefsPane,
-    title: <FormattedMessage id="components.NewAccountWizard.notifications" />
-  },
-  places: {
-    id: 'places',
-    pane: FavoritePlaceList,
-    title: <FormattedMessage id="components.NewAccountWizard.places" />
-  },
-  terms: {
-    getInvalidMessage: (intl: IntlShape) =>
-      intl.formatMessage({
-        id: 'components.TermsOfUsePane.mustAgreeToTerms'
-      }),
-    id: 'terms',
-    isInvalid: ({ hasConsentedToTerms }: EditedUser) => !hasConsentedToTerms,
-    pane: TermsOfUsePane,
-    title: (
-      <FormattedMessage id="components.NewAccountWizard.createNewAccount" />
-    )
-  }
-}
-
-function getPanes(pageIds: string[]) {
-  return pageIds.map((pageId) => standardPanes[pageId])
+  pages: string[]
 }
 
 /**
@@ -93,7 +24,7 @@ function getPanes(pageIds: string[]) {
 const NewAccountWizard = ({
   activePaneId,
   onCreate, // provided by UserAccountScreen
-  panes,
+  pages,
   ...formikProps // provided by Formik
 }: Props): JSX.Element => {
   const { values: userData } = formikProps
@@ -108,61 +39,31 @@ const NewAccountWizard = ({
     }
   }, [activePaneId, onCreate, userData])
 
-  const handleFinish = useCallback(() => {
-    // Display a toast to acknowledge saved changes
-    // (although in reality, changes quietly took effect in previous screens).
-    toast.success(intl.formatMessage({ id: 'actions.user.preferencesSaved' }))
-
-    routeTo('/')
-  }, [intl])
-
-  if (activePaneId === 'verify') {
-    const verifyEmail = intl.formatMessage({
-      id: 'components.NewAccountWizard.verify'
-    })
-    return (
-      <Form id="user-settings-form" noValidate>
-        <PageTitle title={verifyEmail} />
-        <h1>{verifyEmail}</h1>
-        <VerifyEmailPane {...formikProps} />
-      </Form>
-    )
-  }
-
-  const createNewAccount = intl.formatMessage({
+  const title = intl.formatMessage({
     id: 'components.NewAccountWizard.createNewAccount'
   })
 
   return (
-    <Form id="user-settings-form" noValidate>
-      <PageTitle title={createNewAccount} />
-      <SequentialPaneDisplay
-        activePaneId={activePaneId}
-        onFinish={handleFinish}
-        onNext={handleNext}
-        paneProps={formikProps}
-        panes={panes}
-      />
-    </Form>
+    <Wizard
+      activePaneId={activePaneId}
+      formikProps={formikProps}
+      onNext={handleNext}
+      pages={pages}
+      title={title}
+    />
   )
 }
 
 // Get the new account pages configuration, if any, from redux state.
 const mapStateToProps = (state: AppReduxState, ownProps: Props) => {
   return {
-    panes: getPanes(
-      state.otp.config.newAccountPages || [
-        'terms',
-        'notifications',
-        'places',
-        'finish'
-      ]
-    )
+    pages: state.otp.config.newAccountPages || [
+      'terms',
+      'notifications',
+      'places',
+      'finish'
+    ]
   }
 }
 
-const mapDispatchToProps = {
-  routeTo: uiActions.routeTo
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(NewAccountWizard)
+export default connect(mapStateToProps)(NewAccountWizard)
diff --git a/lib/components/user/user-account-screen.tsx b/lib/components/user/user-account-screen.tsx
index 7a4c7dfe6..51cc5185f 100644
--- a/lib/components/user/user-account-screen.tsx
+++ b/lib/components/user/user-account-screen.tsx
@@ -3,7 +3,7 @@ import {
   withAuthenticationRequired
 } from '@auth0/auth0-react'
 import { connect } from 'react-redux'
-import { Formik, FormikProps } from 'formik'
+import { Form, Formik, FormikProps } from 'formik'
 import { injectIntl, IntlShape } from 'react-intl'
 import { RouteComponentProps } from 'react-router'
 import clone from 'clone'
@@ -16,15 +16,19 @@ import { AppReduxState } from '../../util/state-types'
 import { CREATE_ACCOUNT_PATH, MOBILITY_PATH } from '../../util/constants'
 import { RETURN_TO_CURRENT_ROUTE } from '../../util/ui'
 import { toastSuccess } from '../util/toasts'
+import PageTitle from '../util/page-title'
 
 import { EditedUser, User } from './types'
 import AccountPage from './account-page'
 import ExistingAccountDisplay from './existing-account-display'
+import MobilityWizard from './mobility-profile/mobility-wizard'
 import NewAccountWizard from './new-account-wizard'
+import VerifyEmailPane from './verify-email-pane'
 import withLoggedInUserSupport from './with-logged-in-user-support'
 
 interface Props {
   auth0: Auth0ContextInterface
+  basePath: string
   createOrUpdateUser: (user: User, intl: IntlShape) => Promise<number>
   deleteUser: (
     user: User,
@@ -202,51 +206,81 @@ class UserAccountScreen extends Component<Props> {
   }
 
   render() {
-    const { auth0, isCreating, itemId, loggedInUser } = this.props
-    const DisplayComponent = isCreating
-      ? NewAccountWizard
-      : ExistingAccountDisplay
+    const { auth0, basePath, intl, isCreating, itemId, loggedInUser } =
+      this.props
     const loggedInUserWithNotificationArray = {
       ...loggedInUser,
       notificationChannel: loggedInUser.notificationChannel?.split(',') || []
     }
     return (
       <AccountPage subnav={!isCreating}>
-        <Formik
-          // Force Formik to reload initialValues when we update them (e.g. user gets assigned an id).
-          enableReinitialize
-          initialValues={loggedInUserWithNotificationArray}
-          onSubmit={this._handleFieldChange}
-        >
-          {
-            // Formik props provide access to the current user data state and errors,
-            // (in props.values, props.touched, props.errors)
-            // and to its own blur/change/submit event handlers that automate the state.
-            // We pass the Formik props below to the components rendered so that individual controls
-            // can be wired to be managed by Formik.
-            (formikProps) => (
-              <Wrapper>
-                <DisplayComponent
-                  {...formikProps}
-                  activePaneId={itemId}
-                  // @ts-expect-error emailVerified prop used by only one of the DisplayComponent.
-                  emailVerified={auth0.user?.email_verified}
+        <Wrapper>
+          <Formik
+            // Force Formik to reload initialValues when we update them (e.g. user gets assigned an id).
+            enableReinitialize
+            initialValues={loggedInUserWithNotificationArray}
+            onSubmit={this._handleFieldChange}
+          >
+            {
+              // Formik props provide access to the current user data state and errors,
+              // (in props.values, props.touched, props.errors)
+              // and to its own blur/change/submit event handlers that automate the state.
+              // We pass the Formik props below to the components rendered so that individual controls
+              // can be wired to be managed by Formik.
+              (formikProps) => {
+                if (itemId === 'verify') {
+                  const verifyEmail = intl.formatMessage({
+                    id: 'components.NewAccountWizard.verify'
+                  })
+                  return (
+                    <Form id="user-settings-form" noValidate>
+                      <PageTitle title={verifyEmail} />
+                      <h1>{verifyEmail}</h1>
+                      <VerifyEmailPane
+                        emailVerified={auth0.user?.email_verified}
+                      />
+                    </Form>
+                  )
+                }
+
+                const newFormikProps = {
+                  ...formikProps,
                   // Use our own handleChange handler that wraps around Formik's.
-                  handleChange={this._handleInputChange(formikProps)}
-                  loggedInUser={loggedInUser}
-                  onCreate={this._handleCreateNewUser}
-                  onDelete={this._handleDeleteUser}
-                  onRequestPhoneVerificationCode={
-                    this._handleRequestPhoneVerificationCode
-                  }
-                  onSendPhoneVerificationCode={
-                    this._handleSendPhoneVerificationCode
-                  }
-                />
-              </Wrapper>
-            )
-          }
-        </Formik>
+                  handleChange: this._handleInputChange(formikProps)
+                }
+
+                if (basePath === CREATE_ACCOUNT_PATH) {
+                  return (
+                    <NewAccountWizard
+                      {...newFormikProps}
+                      activePaneId={itemId}
+                      onCreate={this._handleCreateNewUser}
+                    />
+                  )
+                }
+
+                if (basePath === MOBILITY_PATH) {
+                  return (
+                    <MobilityWizard {...newFormikProps} activePaneId={itemId} />
+                  )
+                }
+
+                return (
+                  <ExistingAccountDisplay
+                    {...newFormikProps}
+                    onDelete={this._handleDeleteUser}
+                    onRequestPhoneVerificationCode={
+                      this._handleRequestPhoneVerificationCode
+                    }
+                    onSendPhoneVerificationCode={
+                      this._handleSendPhoneVerificationCode
+                    }
+                  />
+                )
+              }
+            }
+          </Formik>
+        </Wrapper>
       </AccountPage>
     )
   }
@@ -261,8 +295,13 @@ const mapStateToProps = (
   const { params, url } = ownProps.match
   const isCreating =
     url.startsWith(CREATE_ACCOUNT_PATH) || url.startsWith(MOBILITY_PATH)
+  const basePath = [CREATE_ACCOUNT_PATH, MOBILITY_PATH].find((path) =>
+    url.startsWith(path)
+  )
+
   const { step } = params
   return {
+    basePath,
     isCreating,
     itemId: step,
     loggedInUser: state.user.loggedInUser

From cf74e15cc8eb56cbf6323546fcbb3b9ca912c5b0 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 6 Dec 2023 16:54:25 -0500
Subject: [PATCH 25/42] fix(SequentialPaneDisplay): Push pane id if none
 provided.

---
 lib/components/user/sequential-pane-display.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/lib/components/user/sequential-pane-display.tsx b/lib/components/user/sequential-pane-display.tsx
index 449a48583..bec9afc9a 100644
--- a/lib/components/user/sequential-pane-display.tsx
+++ b/lib/components/user/sequential-pane-display.tsx
@@ -2,6 +2,7 @@ import { Button } from 'react-bootstrap'
 import { connect } from 'react-redux'
 import { FormattedMessage, injectIntl, IntlShape } from 'react-intl'
 import { FormikProps } from 'formik'
+import { push, replace } from 'connected-react-router'
 import React, { Component, MouseEvent, ReactNode } from 'react'
 import styled from 'styled-components'
 
@@ -50,9 +51,9 @@ class SequentialPaneDisplay extends Component<Props> {
   /**
    * Routes to the next pane URL.
    */
-  _routeTo = (nextId: string) => {
+  _routeTo = (nextId: string, method = push) => {
     const { parentPath, routeTo } = this.props
-    routeTo(`${parentPath}/${nextId}`)
+    routeTo(`${parentPath}/${nextId}`, undefined, method)
   }
 
   h1Ref = React.createRef<HTMLHeadingElement>()
@@ -110,7 +111,7 @@ class SequentialPaneDisplay extends Component<Props> {
     this._focusHeader()
 
     if (!this.props.activePaneId) {
-      this._routeTo(this.props.panes[0].id)
+      this._routeTo(this.props.panes[0].id, replace)
     }
   }
 

From 588992dc73db06f86f91deb8347680e74defa636 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 6 Dec 2023 17:07:10 -0500
Subject: [PATCH 26/42] refactor(Wizard): Move routeTo functionality to
 SequentialPaneDisplay

---
 lib/components/user/common/wizard.tsx         | 19 +++++--------------
 .../user/mobility-profile/mobility-wizard.tsx |  2 +-
 .../user/sequential-pane-display.tsx          |  6 +++++-
 3 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/lib/components/user/common/wizard.tsx b/lib/components/user/common/wizard.tsx
index 8922f58df..fdc9906bb 100644
--- a/lib/components/user/common/wizard.tsx
+++ b/lib/components/user/common/wizard.tsx
@@ -1,10 +1,8 @@
-import { connect } from 'react-redux'
 import { Form, FormikProps } from 'formik'
 import { FormattedMessage, IntlShape, useIntl } from 'react-intl'
 import React, { useCallback } from 'react'
 import toast from 'react-hot-toast'
 
-import * as uiActions from '../../../actions/ui'
 import { EditedUser } from '../types'
 import AccountSetupFinishPane from '../account-setup-finish-pane'
 import AssistiveDevicesPane from '../mobility-profile/assistive-devices-pane'
@@ -23,9 +21,8 @@ interface Props {
   activePaneId: string
   formikProps: FormikProps<EditedUser>
   onNext?: () => void
-  originRoute?: string
   pages: string[]
-  routeTo: (to: string) => void
+  returnTo?: string
   title: string
 }
 
@@ -94,9 +91,8 @@ const Wizard = ({
   activePaneId,
   formikProps,
   onNext,
-  originRoute = '/',
   pages,
-  routeTo,
+  returnTo = '/',
   title
 }: Props): JSX.Element => {
   const intl = useIntl()
@@ -105,9 +101,7 @@ const Wizard = ({
     // Display a toast to acknowledge saved changes
     // (although in reality, changes quietly took effect in previous screens).
     toast.success(intl.formatMessage({ id: 'actions.user.preferencesSaved' }))
-
-    routeTo(originRoute)
-  }, [intl, originRoute, routeTo])
+  }, [intl])
 
   return (
     <Form id="user-settings-form" noValidate>
@@ -118,13 +112,10 @@ const Wizard = ({
         onNext={onNext}
         paneProps={formikProps}
         panes={getPanes(pages)}
+        returnTo={returnTo}
       />
     </Form>
   )
 }
 
-const mapDispatchToProps = {
-  routeTo: uiActions.routeTo
-}
-
-export default connect(null, mapDispatchToProps)(Wizard)
+export default Wizard
diff --git a/lib/components/user/mobility-profile/mobility-wizard.tsx b/lib/components/user/mobility-profile/mobility-wizard.tsx
index 0fcc1a008..4e5a6b06d 100644
--- a/lib/components/user/mobility-profile/mobility-wizard.tsx
+++ b/lib/components/user/mobility-profile/mobility-wizard.tsx
@@ -30,8 +30,8 @@ const MobilityWizard = ({
     <Wizard
       activePaneId={activePaneId}
       formikProps={formikProps}
-      originRoute="/account/settings"
       pages={['mobility1', 'mobility2']}
+      returnTo="/account/settings"
       title={title}
     />
   )
diff --git a/lib/components/user/sequential-pane-display.tsx b/lib/components/user/sequential-pane-display.tsx
index bec9afc9a..4e5782f7d 100644
--- a/lib/components/user/sequential-pane-display.tsx
+++ b/lib/components/user/sequential-pane-display.tsx
@@ -35,6 +35,7 @@ interface Props extends OwnProps {
   paneProps: FormikProps<any>
   panes: PaneProps[]
   parentPath: string
+  returnTo?: string
   routeTo: (url: any) => void
 }
 
@@ -70,7 +71,9 @@ class SequentialPaneDisplay extends Component<Props> {
       onFinish,
       onNext,
       paneProps,
-      panes
+      panes,
+      returnTo = '/',
+      routeTo
     } = this.props
 
     if (activePaneIndex < panes.length - 1) {
@@ -95,6 +98,7 @@ class SequentialPaneDisplay extends Component<Props> {
       this._focusHeader()
     } else if (onFinish) {
       onFinish()
+      routeTo(returnTo)
     }
   }
 

From c01d138959ef73534d8dd2f74651bdbf3a76d6a7 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 6 Dec 2023 17:36:26 -0500
Subject: [PATCH 27/42] refactor(Wizard): Refactor prop types

---
 lib/components/user/common/wizard.tsx            |  5 ++++-
 .../user/mobility-profile/mobility-wizard.tsx    | 16 +++-------------
 lib/components/user/new-account-wizard.tsx       | 16 +++++-----------
 lib/components/user/user-account-screen.tsx      |  7 +++++--
 4 files changed, 17 insertions(+), 27 deletions(-)

diff --git a/lib/components/user/common/wizard.tsx b/lib/components/user/common/wizard.tsx
index fdc9906bb..badca335e 100644
--- a/lib/components/user/common/wizard.tsx
+++ b/lib/components/user/common/wizard.tsx
@@ -17,9 +17,12 @@ import TermsOfUsePane from '../terms-of-use-pane'
 // and to its own blur/change/submit event handlers that automate the state.
 // We forward the props to each pane (via SequentialPaneDisplay) so that their individual controls
 // can be wired to be managed by Formik.
-interface Props {
+export interface WizardProps {
   activePaneId: string
   formikProps: FormikProps<EditedUser>
+}
+
+interface Props extends WizardProps {
   onNext?: () => void
   pages: string[]
   returnTo?: string
diff --git a/lib/components/user/mobility-profile/mobility-wizard.tsx b/lib/components/user/mobility-profile/mobility-wizard.tsx
index 4e5a6b06d..123e26896 100644
--- a/lib/components/user/mobility-profile/mobility-wizard.tsx
+++ b/lib/components/user/mobility-profile/mobility-wizard.tsx
@@ -1,25 +1,15 @@
-import { FormikProps } from 'formik'
 import { useIntl } from 'react-intl'
 import React from 'react'
 
-import { EditedUser } from '../types'
-import Wizard from '../common/wizard'
-
-// The props include Formik props that provide access to the current user data (stored in props.values)
-// and to its own blur/change/submit event handlers that automate the state.
-// We forward the props to each pane (via SequentialPaneDisplay) so that their individual controls
-// can be wired to be managed by Formik.
-interface Props extends FormikProps<EditedUser> {
-  activePaneId: string
-}
+import Wizard, { WizardProps } from '../common/wizard'
 
 /**
  * This component is the mobility profile wizard.
  */
 const MobilityWizard = ({
   activePaneId,
-  ...formikProps // provided by Formik
-}: Props): JSX.Element => {
+  formikProps
+}: WizardProps): JSX.Element => {
   const intl = useIntl()
 
   const title = intl.formatMessage({
diff --git a/lib/components/user/new-account-wizard.tsx b/lib/components/user/new-account-wizard.tsx
index f0bb32fbf..14c83b4c2 100644
--- a/lib/components/user/new-account-wizard.tsx
+++ b/lib/components/user/new-account-wizard.tsx
@@ -1,19 +1,13 @@
 import { connect } from 'react-redux'
-import { FormikProps } from 'formik'
 import { useIntl } from 'react-intl'
 import React, { useCallback } from 'react'
 
 import { AppReduxState } from '../../util/state-types'
 
 import { EditedUser } from './types'
-import Wizard from './common/wizard'
+import Wizard, { WizardProps } from './common/wizard'
 
-// The props include Formik props that provide access to the current user data (stored in props.values)
-// and to its own blur/change/submit event handlers that automate the state.
-// We forward the props to each pane (via SequentialPaneDisplay) so that their individual controls
-// can be wired to be managed by Formik.
-interface Props extends FormikProps<EditedUser> {
-  activePaneId: string
+interface Props extends WizardProps {
   onCreate: (value: EditedUser) => void
   pages: string[]
 }
@@ -23,9 +17,9 @@ interface Props extends FormikProps<EditedUser> {
  */
 const NewAccountWizard = ({
   activePaneId,
-  onCreate, // provided by UserAccountScreen
-  pages,
-  ...formikProps // provided by Formik
+  formikProps,
+  onCreate,
+  pages
 }: Props): JSX.Element => {
   const { values: userData } = formikProps
   const intl = useIntl()
diff --git a/lib/components/user/user-account-screen.tsx b/lib/components/user/user-account-screen.tsx
index 51cc5185f..a7858d519 100644
--- a/lib/components/user/user-account-screen.tsx
+++ b/lib/components/user/user-account-screen.tsx
@@ -252,8 +252,8 @@ class UserAccountScreen extends Component<Props> {
                 if (basePath === CREATE_ACCOUNT_PATH) {
                   return (
                     <NewAccountWizard
-                      {...newFormikProps}
                       activePaneId={itemId}
+                      formikProps={newFormikProps}
                       onCreate={this._handleCreateNewUser}
                     />
                   )
@@ -261,7 +261,10 @@ class UserAccountScreen extends Component<Props> {
 
                 if (basePath === MOBILITY_PATH) {
                   return (
-                    <MobilityWizard {...newFormikProps} activePaneId={itemId} />
+                    <MobilityWizard
+                      activePaneId={itemId}
+                      formikProps={newFormikProps}
+                    />
                   )
                 }
 

From dcb31e72d2b25e55d7ece38f485c656fe8d82339 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 6 Dec 2023 17:52:49 -0500
Subject: [PATCH 28/42] refactor(TripNotificationPane): Revert refactor of
 SettingsList

---
 .../trip-notifications-pane.tsx               | 22 ++++++++++++++++++-
 lib/components/user/styled.ts                 | 21 ------------------
 2 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/lib/components/user/monitored-trip/trip-notifications-pane.tsx b/lib/components/user/monitored-trip/trip-notifications-pane.tsx
index ea5720dd3..bd5e0c46b 100644
--- a/lib/components/user/monitored-trip/trip-notifications-pane.tsx
+++ b/lib/components/user/monitored-trip/trip-notifications-pane.tsx
@@ -10,11 +10,31 @@ import {
   Select,
   YesNoOptions
 } from '../common/dropdown-options'
-import { FieldSet, SettingsList } from '../styled'
+import { FieldSet } from '../styled'
 import { IconWithText } from '../../util/styledIcon'
 import { MonitoredTrip } from '../types'
 
 // Element styles
+export const SettingsList = styled.ul`
+  border-spacing: 0 10px;
+  display: table;
+  padding-left: 0;
+  width: 100%;
+  label {
+    font-weight: inherit;
+    padding-right: 10px;
+  }
+  /* Use table display for this element, so that all dropdowns occupy the same width.
+    (Bootstrap already sets them to occupy 100% of the width of the parent, i.e. the logical cell.) */
+  & > li {
+    align-items: center;
+    display: table-row;
+    & > * {
+      display: table-cell;
+    }
+  }
+`
+
 const Summary = styled.summary`
   /* Revert display:block set by Bootstrap that hides the native expand/collapse caret. */
   display: revert-layer;
diff --git a/lib/components/user/styled.ts b/lib/components/user/styled.ts
index e054b4a0a..ae2c07e0d 100644
--- a/lib/components/user/styled.ts
+++ b/lib/components/user/styled.ts
@@ -106,24 +106,3 @@ export const phoneFieldStyle = css`
   vertical-align: middle;
   width: 14em;
 `
-
-/** Settings list container */
-export const SettingsList = styled.ul`
-  border-spacing: 0 10px;
-  display: table;
-  padding-left: 0;
-  width: 100%;
-  label {
-    font-weight: inherit;
-    padding-right: 10px;
-  }
-  /* Use table display for this element, so that all dropdowns occupy the same width.
-    (Bootstrap already sets them to occupy 100% of the width of the parent, i.e. the logical cell.) */
-  & > li {
-    align-items: center;
-    display: table-row;
-    & > * {
-      display: table-cell;
-    }
-  }
-`

From a5019f46c9bfa76c92e0baa25c72d73f7a1cceee Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 7 Dec 2023 10:18:38 -0500
Subject: [PATCH 29/42] refactor(TripNotificationPane): Unexport settings
 component.

---
 lib/components/user/monitored-trip/trip-notifications-pane.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/components/user/monitored-trip/trip-notifications-pane.tsx b/lib/components/user/monitored-trip/trip-notifications-pane.tsx
index bd5e0c46b..4d6d05d81 100644
--- a/lib/components/user/monitored-trip/trip-notifications-pane.tsx
+++ b/lib/components/user/monitored-trip/trip-notifications-pane.tsx
@@ -15,7 +15,7 @@ import { IconWithText } from '../../util/styledIcon'
 import { MonitoredTrip } from '../types'
 
 // Element styles
-export const SettingsList = styled.ul`
+const SettingsList = styled.ul`
   border-spacing: 0 10px;
   display: table;
   padding-left: 0;

From a744454a933aa25823b414dad25e4a8cbb191531 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 7 Dec 2023 10:34:38 -0500
Subject: [PATCH 30/42] refactor(SequentialPaneDisplay): Merge wizard code and
 rename to wizard.

---
 lib/components/user/common/wizard.tsx         | 124 ---------
 .../user/existing-account-display.tsx         |   8 +-
 .../user/mobility-profile/mobility-wizard.tsx |   2 +-
 lib/components/user/new-account-wizard.tsx    |  13 +-
 .../user/sequential-pane-display.tsx          | 188 -------------
 lib/components/user/wizard.tsx                | 255 ++++++++++++++++++
 lib/util/config-types.ts                      |   3 +-
 7 files changed, 267 insertions(+), 326 deletions(-)
 delete mode 100644 lib/components/user/common/wizard.tsx
 delete mode 100644 lib/components/user/sequential-pane-display.tsx
 create mode 100644 lib/components/user/wizard.tsx

diff --git a/lib/components/user/common/wizard.tsx b/lib/components/user/common/wizard.tsx
deleted file mode 100644
index badca335e..000000000
--- a/lib/components/user/common/wizard.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import { Form, FormikProps } from 'formik'
-import { FormattedMessage, IntlShape, useIntl } from 'react-intl'
-import React, { useCallback } from 'react'
-import toast from 'react-hot-toast'
-
-import { EditedUser } from '../types'
-import AccountSetupFinishPane from '../account-setup-finish-pane'
-import AssistiveDevicesPane from '../mobility-profile/assistive-devices-pane'
-import FavoritePlaceList from '../places/favorite-place-list'
-import LimitationsPane from '../mobility-profile/limitations-pane'
-import NotificationPrefsPane from '../notification-prefs-pane'
-import PageTitle from '../../util/page-title'
-import SequentialPaneDisplay, { PaneProps } from '../sequential-pane-display'
-import TermsOfUsePane from '../terms-of-use-pane'
-
-// The props include Formik props that provide access to the current user data (stored in props.values)
-// and to its own blur/change/submit event handlers that automate the state.
-// We forward the props to each pane (via SequentialPaneDisplay) so that their individual controls
-// can be wired to be managed by Formik.
-export interface WizardProps {
-  activePaneId: string
-  formikProps: FormikProps<EditedUser>
-}
-
-interface Props extends WizardProps {
-  onNext?: () => void
-  pages: string[]
-  returnTo?: string
-  title: string
-}
-
-const standardPanes: Record<string, PaneProps> = {
-  finish: {
-    id: 'finish',
-    pane: AccountSetupFinishPane,
-    title: <FormattedMessage id="components.NewAccountWizard.finish" />
-  },
-  mobility1: {
-    id: 'mobility1',
-    pane: AssistiveDevicesPane,
-    title: <FormattedMessage id="components.MobilityProfile.title" />
-  },
-  mobility2: {
-    id: 'mobility2',
-    pane: LimitationsPane,
-    title: <FormattedMessage id="components.MobilityProfile.title" />
-  },
-  notifications: {
-    getInvalidMessage: (intl: IntlShape) =>
-      intl.formatMessage({
-        id: 'components.PhoneNumberEditor.invalidPhone'
-      }),
-    id: 'notifications',
-    isInvalid: ({
-      isPhoneNumberVerified,
-      notificationChannel,
-      phoneNumber
-    }: EditedUser) => {
-      return (
-        notificationChannel?.includes('sms') &&
-        (!phoneNumber || !isPhoneNumberVerified)
-      )
-    },
-    pane: NotificationPrefsPane,
-    title: <FormattedMessage id="components.NewAccountWizard.notifications" />
-  },
-  places: {
-    id: 'places',
-    pane: FavoritePlaceList,
-    title: <FormattedMessage id="components.NewAccountWizard.places" />
-  },
-  terms: {
-    getInvalidMessage: (intl: IntlShape) =>
-      intl.formatMessage({
-        id: 'components.TermsOfUsePane.mustAgreeToTerms'
-      }),
-    id: 'terms',
-    isInvalid: ({ hasConsentedToTerms }: EditedUser) => !hasConsentedToTerms,
-    pane: TermsOfUsePane,
-    title: (
-      <FormattedMessage id="components.NewAccountWizard.createNewAccount" />
-    )
-  }
-}
-
-function getPanes(pageIds: string[]): PaneProps[] {
-  return pageIds.map((pageId) => standardPanes[pageId])
-}
-
-/**
- * Basic component to build wizards (step-by-step forms).
- */
-const Wizard = ({
-  activePaneId,
-  formikProps,
-  onNext,
-  pages,
-  returnTo = '/',
-  title
-}: Props): JSX.Element => {
-  const intl = useIntl()
-
-  const handleFinish = useCallback(() => {
-    // Display a toast to acknowledge saved changes
-    // (although in reality, changes quietly took effect in previous screens).
-    toast.success(intl.formatMessage({ id: 'actions.user.preferencesSaved' }))
-  }, [intl])
-
-  return (
-    <Form id="user-settings-form" noValidate>
-      <PageTitle title={title} />
-      <SequentialPaneDisplay
-        activePaneId={activePaneId}
-        onFinish={handleFinish}
-        onNext={onNext}
-        paneProps={formikProps}
-        panes={getPanes(pages)}
-        returnTo={returnTo}
-      />
-    </Form>
-  )
-}
-
-export default Wizard
diff --git a/lib/components/user/existing-account-display.tsx b/lib/components/user/existing-account-display.tsx
index 46d4ad675..14958431f 100644
--- a/lib/components/user/existing-account-display.tsx
+++ b/lib/components/user/existing-account-display.tsx
@@ -30,7 +30,7 @@ const ExistingAccountDisplay = (props: Props) => {
   // We forward the props to each pane so that their individual controls
   // can be wired to be managed by Formik.
 
-  const { wheelchairEnabled } = props
+  const { mobilityProfileEnabled, wheelchairEnabled } = props
   const intl = useIntl()
 
   const panes = [
@@ -40,6 +40,7 @@ const ExistingAccountDisplay = (props: Props) => {
       title: <FormattedMessage id="components.ExistingAccountDisplay.places" />
     },
     {
+      hidden: !mobilityProfileEnabled,
       pane: MobilityPane,
       props,
       title: (
@@ -93,11 +94,12 @@ const ExistingAccountDisplay = (props: Props) => {
 }
 
 const mapStateToProps = (state: AppReduxState) => {
-  const { accessModes } = state.otp.config.modes
-  const wheelchairEnabled = accessModes?.some(
+  const { mobilityProfile: mobilityProfileEnabled, modes } = state.otp.config
+  const wheelchairEnabled = modes.accessModes?.some(
     (mode: TransitModeConfig) => mode.showWheelchairSetting
   )
   return {
+    mobilityProfileEnabled,
     wheelchairEnabled
   }
 }
diff --git a/lib/components/user/mobility-profile/mobility-wizard.tsx b/lib/components/user/mobility-profile/mobility-wizard.tsx
index 123e26896..c70a0dac8 100644
--- a/lib/components/user/mobility-profile/mobility-wizard.tsx
+++ b/lib/components/user/mobility-profile/mobility-wizard.tsx
@@ -1,7 +1,7 @@
 import { useIntl } from 'react-intl'
 import React from 'react'
 
-import Wizard, { WizardProps } from '../common/wizard'
+import Wizard, { WizardProps } from '../wizard'
 
 /**
  * This component is the mobility profile wizard.
diff --git a/lib/components/user/new-account-wizard.tsx b/lib/components/user/new-account-wizard.tsx
index 14c83b4c2..cea750a8a 100644
--- a/lib/components/user/new-account-wizard.tsx
+++ b/lib/components/user/new-account-wizard.tsx
@@ -5,7 +5,7 @@ import React, { useCallback } from 'react'
 import { AppReduxState } from '../../util/state-types'
 
 import { EditedUser } from './types'
-import Wizard, { WizardProps } from './common/wizard'
+import Wizard, { WizardProps } from './wizard'
 
 interface Props extends WizardProps {
   onCreate: (value: EditedUser) => void
@@ -48,15 +48,12 @@ const NewAccountWizard = ({
   )
 }
 
-// Get the new account pages configuration, if any, from redux state.
+// Get the new account pages based on the configuration's mobilityProfile flag.
 const mapStateToProps = (state: AppReduxState, ownProps: Props) => {
   return {
-    pages: state.otp.config.newAccountPages || [
-      'terms',
-      'notifications',
-      'places',
-      'finish'
-    ]
+    pages: state.otp.config.mobilityProfile
+      ? ['terms', 'mobility1', 'mobility2', 'notifications', 'places', 'finish']
+      : ['terms', 'notifications', 'places', 'finish']
   }
 }
 
diff --git a/lib/components/user/sequential-pane-display.tsx b/lib/components/user/sequential-pane-display.tsx
deleted file mode 100644
index 4e5782f7d..000000000
--- a/lib/components/user/sequential-pane-display.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-import { Button } from 'react-bootstrap'
-import { connect } from 'react-redux'
-import { FormattedMessage, injectIntl, IntlShape } from 'react-intl'
-import { FormikProps } from 'formik'
-import { push, replace } from 'connected-react-router'
-import React, { Component, MouseEvent, ReactNode } from 'react'
-import styled from 'styled-components'
-
-import * as uiActions from '../../actions/ui'
-import { AppReduxState } from '../../util/state-types'
-import { GRAY_ON_WHITE } from '../util/colors'
-
-import { SequentialPaneContainer } from './styled'
-import FormNavigationButtons from './form-navigation-buttons'
-
-export interface PaneProps {
-  getInvalidMessage?: (intl: IntlShape) => string
-  id: string
-  isInvalid?: (arg: any) => boolean
-  pane: any
-  title: ReactNode
-}
-
-interface OwnProps {
-  activePaneId: string
-  onFinish?: () => void
-  onNext?: () => void
-  panes: PaneProps[]
-}
-
-interface Props extends OwnProps {
-  activePane: PaneProps
-  activePaneIndex: number
-  intl: IntlShape
-  paneProps: FormikProps<any>
-  panes: PaneProps[]
-  parentPath: string
-  returnTo?: string
-  routeTo: (url: any) => void
-}
-
-const StepNumber = styled.p`
-  color: ${GRAY_ON_WHITE};
-  font-size: 40%;
-  margin: -1em 0 0 0;
-`
-
-/**
- * This component handles the flow between screens for new OTP user accounts.
- */
-class SequentialPaneDisplay extends Component<Props> {
-  /**
-   * Routes to the next pane URL.
-   */
-  _routeTo = (nextId: string, method = push) => {
-    const { parentPath, routeTo } = this.props
-    routeTo(`${parentPath}/${nextId}`, undefined, method)
-  }
-
-  h1Ref = React.createRef<HTMLHeadingElement>()
-
-  _focusHeader = () => {
-    this.h1Ref?.current?.focus()
-  }
-
-  _handleToNextPane = async (e: MouseEvent<Button>) => {
-    const {
-      activePane,
-      activePaneIndex,
-      intl,
-      onFinish,
-      onNext,
-      paneProps,
-      panes,
-      returnTo = '/',
-      routeTo
-    } = this.props
-
-    if (activePaneIndex < panes.length - 1) {
-      // Don't submit the form if there are more steps to complete.
-      e.preventDefault()
-
-      const {
-        getInvalidMessage = (intl: IntlShape) => '',
-        isInvalid = () => false
-      } = activePane
-      if (isInvalid(paneProps.values)) {
-        alert(getInvalidMessage(intl))
-      } else {
-        const nextId = panes[activePaneIndex + 1].id
-        // Execute any action that need to happen before going to the next pane
-        // (e.g. save a user account).
-        if (onNext) {
-          await onNext()
-        }
-        this._routeTo(nextId)
-      }
-      this._focusHeader()
-    } else if (onFinish) {
-      onFinish()
-      routeTo(returnTo)
-    }
-  }
-
-  _handleToPrevPane = () => {
-    const { activePaneIndex, panes } = this.props
-    if (activePaneIndex > 0) {
-      const prevId = panes[activePaneIndex - 1].id
-      prevId && this._routeTo(prevId)
-    }
-    this._focusHeader()
-  }
-
-  componentDidMount(): void {
-    this._focusHeader()
-
-    if (!this.props.activePaneId) {
-      this._routeTo(this.props.panes[0].id, replace)
-    }
-  }
-
-  render() {
-    const { activePane, activePaneIndex, paneProps, panes } = this.props
-    const { pane: Pane, title } = activePane || {}
-
-    return (
-      <>
-        <h1 aria-live="assertive" ref={this.h1Ref} tabIndex={-1}>
-          <StepNumber>
-            <FormattedMessage
-              id="components.SequentialPaneDisplay.stepNumber"
-              values={{
-                step: activePaneIndex + 1,
-                total: panes.length
-              }}
-            />
-          </StepNumber>
-          {title}
-        </h1>
-        <SequentialPaneContainer>
-          {Pane && <Pane {...paneProps} />}
-        </SequentialPaneContainer>
-        <FormNavigationButtons
-          backButton={
-            activePaneIndex > 0 && {
-              onClick: this._handleToPrevPane,
-              text: <FormattedMessage id="common.forms.back" />
-            }
-          }
-          okayButton={{
-            onClick: this._handleToNextPane,
-            text:
-              activePaneIndex < panes.length - 1 ? (
-                <FormattedMessage id="common.forms.next" />
-              ) : (
-                <FormattedMessage id="common.forms.finish" />
-              ),
-            type: 'submit'
-          }}
-        />
-      </>
-    )
-  }
-}
-
-// connect to the redux store
-
-const mapStateToProps = (state: AppReduxState, ownProps: OwnProps) => {
-  const { activePaneId, panes } = ownProps
-  const { pathname } = state.router.location
-  const activePaneIndex = panes.findIndex(
-    (pane: PaneProps) => pane.id === activePaneId
-  )
-  return {
-    activePane: panes[activePaneIndex],
-    activePaneIndex,
-    parentPath: pathname.substr(0, pathname.lastIndexOf('/'))
-  }
-}
-
-const mapDispatchToProps = {
-  routeTo: uiActions.routeTo
-}
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(injectIntl(SequentialPaneDisplay))
diff --git a/lib/components/user/wizard.tsx b/lib/components/user/wizard.tsx
new file mode 100644
index 000000000..06bedb986
--- /dev/null
+++ b/lib/components/user/wizard.tsx
@@ -0,0 +1,255 @@
+import { Button } from 'react-bootstrap'
+import { connect } from 'react-redux'
+import { Form, FormikProps } from 'formik'
+import { FormattedMessage, injectIntl, IntlShape } from 'react-intl'
+import { push, replace } from 'connected-react-router'
+import React, { Component, MouseEvent, ReactNode } from 'react'
+import styled from 'styled-components'
+import toast from 'react-hot-toast'
+
+import * as uiActions from '../../actions/ui'
+import { AppReduxState } from '../../util/state-types'
+import { GRAY_ON_WHITE } from '../util/colors'
+import PageTitle from '../util/page-title'
+
+import { EditedUser } from './types'
+import { SequentialPaneContainer } from './styled'
+import AccountSetupFinishPane from './account-setup-finish-pane'
+import AssistiveDevicesPane from './mobility-profile/assistive-devices-pane'
+import FavoritePlaceList from './places/favorite-place-list'
+import FormNavigationButtons from './form-navigation-buttons'
+import LimitationsPane from './mobility-profile/limitations-pane'
+import NotificationPrefsPane from './notification-prefs-pane'
+import TermsOfUsePane from './terms-of-use-pane'
+
+// The props include Formik props that provide access to the current user data (stored in props.values)
+// and to its own blur/change/submit event handlers that automate the state.
+// We forward the props to each pane (via SequentialPaneDisplay) so that their individual controls
+// can be wired to be managed by Formik.
+export interface WizardProps {
+  activePaneId: string
+  formikProps: FormikProps<EditedUser>
+}
+
+const standardPanes: Record<string, PaneProps> = {
+  finish: {
+    id: 'finish',
+    pane: AccountSetupFinishPane,
+    title: <FormattedMessage id="components.NewAccountWizard.finish" />
+  },
+  mobility1: {
+    id: 'mobility1',
+    pane: AssistiveDevicesPane,
+    title: <FormattedMessage id="components.MobilityProfile.title" />
+  },
+  mobility2: {
+    id: 'mobility2',
+    pane: LimitationsPane,
+    title: <FormattedMessage id="components.MobilityProfile.title" />
+  },
+  notifications: {
+    getInvalidMessage: (intl: IntlShape) =>
+      intl.formatMessage({
+        id: 'components.PhoneNumberEditor.invalidPhone'
+      }),
+    id: 'notifications',
+    isInvalid: ({
+      isPhoneNumberVerified,
+      notificationChannel,
+      phoneNumber
+    }: EditedUser) => {
+      return (
+        notificationChannel?.includes('sms') &&
+        (!phoneNumber || !isPhoneNumberVerified)
+      )
+    },
+    pane: NotificationPrefsPane,
+    title: <FormattedMessage id="components.NewAccountWizard.notifications" />
+  },
+  places: {
+    id: 'places',
+    pane: FavoritePlaceList,
+    title: <FormattedMessage id="components.NewAccountWizard.places" />
+  },
+  terms: {
+    getInvalidMessage: (intl: IntlShape) =>
+      intl.formatMessage({
+        id: 'components.TermsOfUsePane.mustAgreeToTerms'
+      }),
+    id: 'terms',
+    isInvalid: ({ hasConsentedToTerms }: EditedUser) => !hasConsentedToTerms,
+    pane: TermsOfUsePane,
+    title: (
+      <FormattedMessage id="components.NewAccountWizard.createNewAccount" />
+    )
+  }
+}
+
+export interface PaneProps {
+  getInvalidMessage?: (intl: IntlShape) => string
+  id: string
+  isInvalid?: (arg: any) => boolean
+  pane: any
+  title: ReactNode
+}
+
+interface Props {
+  activePane: PaneProps
+  activePaneId: string
+  activePaneIndex: number
+  formikProps: FormikProps<any>
+  intl: IntlShape
+  onNext?: () => void
+  pages: string[]
+  parentPath: string
+  returnTo?: string
+  routeTo: (url: string) => void
+  title: string
+}
+
+const StepNumber = styled.p`
+  color: ${GRAY_ON_WHITE};
+  font-size: 40%;
+  margin: -1em 0 0 0;
+`
+
+/**
+ * Basic component to build wizards (step-by-step forms).
+ */
+class Wizard extends Component<Props> {
+  /**
+   * Routes to the next pane URL.
+   */
+  _routeTo = (nextId: string, method = push) => {
+    const { parentPath, routeTo } = this.props
+    routeTo(`${parentPath}/${nextId}`, undefined, method)
+  }
+
+  h1Ref = React.createRef<HTMLHeadingElement>()
+
+  _focusHeader = () => {
+    this.h1Ref?.current?.focus()
+  }
+
+  _handleToNextPane = async (e: MouseEvent<Button>) => {
+    const {
+      activePane,
+      activePaneIndex,
+      formikProps,
+      intl,
+      onNext,
+      pages,
+      returnTo = '/',
+      routeTo
+    } = this.props
+
+    if (activePaneIndex < pages.length - 1) {
+      // Don't submit the form if there are more steps to complete.
+      e.preventDefault()
+
+      const {
+        getInvalidMessage = (intl: IntlShape) => '',
+        isInvalid = () => false
+      } = activePane
+      if (isInvalid(formikProps.values)) {
+        alert(getInvalidMessage(intl))
+      } else {
+        const nextId = pages[activePaneIndex + 1]
+        // Execute any action that need to happen before going to the next pane
+        // (e.g. save a user account).
+        if (onNext) {
+          await onNext()
+        }
+        this._routeTo(nextId)
+      }
+      this._focusHeader()
+    } else {
+      // Display a toast to acknowledge saved changes
+      // (although in reality, changes quietly took effect in previous screens).
+      toast.success(intl.formatMessage({ id: 'actions.user.preferencesSaved' }))
+      routeTo(returnTo)
+    }
+  }
+
+  _handleToPrevPane = () => {
+    const { activePaneIndex, pages } = this.props
+    if (activePaneIndex > 0) {
+      const prevId = pages[activePaneIndex - 1]
+      prevId && this._routeTo(prevId)
+    }
+    this._focusHeader()
+  }
+
+  componentDidMount(): void {
+    this._focusHeader()
+
+    if (!this.props.activePaneId) {
+      this._routeTo(this.props.pages[0], replace)
+    }
+  }
+
+  render() {
+    const { activePane, activePaneIndex, formikProps, pages, title } =
+      this.props
+    const { pane: Pane, title: paneTitle } = activePane || {}
+
+    return (
+      <Form id="user-settings-form" noValidate>
+        <PageTitle title={title} />
+        <h1 aria-live="assertive" ref={this.h1Ref} tabIndex={-1}>
+          <StepNumber>
+            <FormattedMessage
+              id="components.SequentialPaneDisplay.stepNumber"
+              values={{
+                step: activePaneIndex + 1,
+                total: pages.length
+              }}
+            />
+          </StepNumber>
+          {paneTitle}
+        </h1>
+        <SequentialPaneContainer>
+          {Pane && <Pane {...formikProps} />}
+        </SequentialPaneContainer>
+        <FormNavigationButtons
+          backButton={
+            activePaneIndex > 0 && {
+              onClick: this._handleToPrevPane,
+              text: <FormattedMessage id="common.forms.back" />
+            }
+          }
+          okayButton={{
+            onClick: this._handleToNextPane,
+            text:
+              activePaneIndex < pages.length - 1 ? (
+                <FormattedMessage id="common.forms.next" />
+              ) : (
+                <FormattedMessage id="common.forms.finish" />
+              ),
+            type: 'submit'
+          }}
+        />
+      </Form>
+    )
+  }
+}
+
+// connect to the redux store
+
+const mapStateToProps = (state: AppReduxState, ownProps: Props) => {
+  const { activePaneId, pages } = ownProps
+  const { pathname } = state.router.location
+  const activePaneIndex = pages.indexOf(activePaneId)
+  return {
+    // This, instead of just standardPages[activePaneId], ensures no "foreign" page is accidentally shown.
+    activePane: standardPanes[pages[activePaneIndex]],
+    activePaneIndex,
+    parentPath: pathname.substr(0, pathname.lastIndexOf('/'))
+  }
+}
+
+const mapDispatchToProps = {
+  routeTo: uiActions.routeTo
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(Wizard))
diff --git a/lib/util/config-types.ts b/lib/util/config-types.ts
index 783d1c366..43489e873 100644
--- a/lib/util/config-types.ts
+++ b/lib/util/config-types.ts
@@ -355,9 +355,8 @@ export interface AppConfig {
   localization?: LocalizationConfig
   map: MapConfig
   mapillary?: MapillaryConfig
+  mobilityProfile?: boolean
   modes: ModesConfig
-  /** Optionally configures wizard (multi-step) dialogs with sequences of pages. */
-  newAccountPages?: string[]
   /** Interval in seconds past which a trip is no longer considered "on-time". */
   onTimeThresholdSeconds?: number
   persistence?: PersistenceConfig

From b37a8c2d5d33230a3e7b07c2a9365fd700ffe730 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 7 Dec 2023 10:44:37 -0500
Subject: [PATCH 31/42] Revert renaming sequential-pane-display.

---
 .../user/sequential-pane-display.tsx          | 188 +++++++++++++
 lib/components/user/wizard.tsx                | 255 ------------------
 2 files changed, 188 insertions(+), 255 deletions(-)
 create mode 100644 lib/components/user/sequential-pane-display.tsx
 delete mode 100644 lib/components/user/wizard.tsx

diff --git a/lib/components/user/sequential-pane-display.tsx b/lib/components/user/sequential-pane-display.tsx
new file mode 100644
index 000000000..4e5782f7d
--- /dev/null
+++ b/lib/components/user/sequential-pane-display.tsx
@@ -0,0 +1,188 @@
+import { Button } from 'react-bootstrap'
+import { connect } from 'react-redux'
+import { FormattedMessage, injectIntl, IntlShape } from 'react-intl'
+import { FormikProps } from 'formik'
+import { push, replace } from 'connected-react-router'
+import React, { Component, MouseEvent, ReactNode } from 'react'
+import styled from 'styled-components'
+
+import * as uiActions from '../../actions/ui'
+import { AppReduxState } from '../../util/state-types'
+import { GRAY_ON_WHITE } from '../util/colors'
+
+import { SequentialPaneContainer } from './styled'
+import FormNavigationButtons from './form-navigation-buttons'
+
+export interface PaneProps {
+  getInvalidMessage?: (intl: IntlShape) => string
+  id: string
+  isInvalid?: (arg: any) => boolean
+  pane: any
+  title: ReactNode
+}
+
+interface OwnProps {
+  activePaneId: string
+  onFinish?: () => void
+  onNext?: () => void
+  panes: PaneProps[]
+}
+
+interface Props extends OwnProps {
+  activePane: PaneProps
+  activePaneIndex: number
+  intl: IntlShape
+  paneProps: FormikProps<any>
+  panes: PaneProps[]
+  parentPath: string
+  returnTo?: string
+  routeTo: (url: any) => void
+}
+
+const StepNumber = styled.p`
+  color: ${GRAY_ON_WHITE};
+  font-size: 40%;
+  margin: -1em 0 0 0;
+`
+
+/**
+ * This component handles the flow between screens for new OTP user accounts.
+ */
+class SequentialPaneDisplay extends Component<Props> {
+  /**
+   * Routes to the next pane URL.
+   */
+  _routeTo = (nextId: string, method = push) => {
+    const { parentPath, routeTo } = this.props
+    routeTo(`${parentPath}/${nextId}`, undefined, method)
+  }
+
+  h1Ref = React.createRef<HTMLHeadingElement>()
+
+  _focusHeader = () => {
+    this.h1Ref?.current?.focus()
+  }
+
+  _handleToNextPane = async (e: MouseEvent<Button>) => {
+    const {
+      activePane,
+      activePaneIndex,
+      intl,
+      onFinish,
+      onNext,
+      paneProps,
+      panes,
+      returnTo = '/',
+      routeTo
+    } = this.props
+
+    if (activePaneIndex < panes.length - 1) {
+      // Don't submit the form if there are more steps to complete.
+      e.preventDefault()
+
+      const {
+        getInvalidMessage = (intl: IntlShape) => '',
+        isInvalid = () => false
+      } = activePane
+      if (isInvalid(paneProps.values)) {
+        alert(getInvalidMessage(intl))
+      } else {
+        const nextId = panes[activePaneIndex + 1].id
+        // Execute any action that need to happen before going to the next pane
+        // (e.g. save a user account).
+        if (onNext) {
+          await onNext()
+        }
+        this._routeTo(nextId)
+      }
+      this._focusHeader()
+    } else if (onFinish) {
+      onFinish()
+      routeTo(returnTo)
+    }
+  }
+
+  _handleToPrevPane = () => {
+    const { activePaneIndex, panes } = this.props
+    if (activePaneIndex > 0) {
+      const prevId = panes[activePaneIndex - 1].id
+      prevId && this._routeTo(prevId)
+    }
+    this._focusHeader()
+  }
+
+  componentDidMount(): void {
+    this._focusHeader()
+
+    if (!this.props.activePaneId) {
+      this._routeTo(this.props.panes[0].id, replace)
+    }
+  }
+
+  render() {
+    const { activePane, activePaneIndex, paneProps, panes } = this.props
+    const { pane: Pane, title } = activePane || {}
+
+    return (
+      <>
+        <h1 aria-live="assertive" ref={this.h1Ref} tabIndex={-1}>
+          <StepNumber>
+            <FormattedMessage
+              id="components.SequentialPaneDisplay.stepNumber"
+              values={{
+                step: activePaneIndex + 1,
+                total: panes.length
+              }}
+            />
+          </StepNumber>
+          {title}
+        </h1>
+        <SequentialPaneContainer>
+          {Pane && <Pane {...paneProps} />}
+        </SequentialPaneContainer>
+        <FormNavigationButtons
+          backButton={
+            activePaneIndex > 0 && {
+              onClick: this._handleToPrevPane,
+              text: <FormattedMessage id="common.forms.back" />
+            }
+          }
+          okayButton={{
+            onClick: this._handleToNextPane,
+            text:
+              activePaneIndex < panes.length - 1 ? (
+                <FormattedMessage id="common.forms.next" />
+              ) : (
+                <FormattedMessage id="common.forms.finish" />
+              ),
+            type: 'submit'
+          }}
+        />
+      </>
+    )
+  }
+}
+
+// connect to the redux store
+
+const mapStateToProps = (state: AppReduxState, ownProps: OwnProps) => {
+  const { activePaneId, panes } = ownProps
+  const { pathname } = state.router.location
+  const activePaneIndex = panes.findIndex(
+    (pane: PaneProps) => pane.id === activePaneId
+  )
+  return {
+    activePane: panes[activePaneIndex],
+    activePaneIndex,
+    parentPath: pathname.substr(0, pathname.lastIndexOf('/'))
+  }
+}
+
+const mapDispatchToProps = {
+  routeTo: uiActions.routeTo
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(injectIntl(SequentialPaneDisplay))
diff --git a/lib/components/user/wizard.tsx b/lib/components/user/wizard.tsx
deleted file mode 100644
index 06bedb986..000000000
--- a/lib/components/user/wizard.tsx
+++ /dev/null
@@ -1,255 +0,0 @@
-import { Button } from 'react-bootstrap'
-import { connect } from 'react-redux'
-import { Form, FormikProps } from 'formik'
-import { FormattedMessage, injectIntl, IntlShape } from 'react-intl'
-import { push, replace } from 'connected-react-router'
-import React, { Component, MouseEvent, ReactNode } from 'react'
-import styled from 'styled-components'
-import toast from 'react-hot-toast'
-
-import * as uiActions from '../../actions/ui'
-import { AppReduxState } from '../../util/state-types'
-import { GRAY_ON_WHITE } from '../util/colors'
-import PageTitle from '../util/page-title'
-
-import { EditedUser } from './types'
-import { SequentialPaneContainer } from './styled'
-import AccountSetupFinishPane from './account-setup-finish-pane'
-import AssistiveDevicesPane from './mobility-profile/assistive-devices-pane'
-import FavoritePlaceList from './places/favorite-place-list'
-import FormNavigationButtons from './form-navigation-buttons'
-import LimitationsPane from './mobility-profile/limitations-pane'
-import NotificationPrefsPane from './notification-prefs-pane'
-import TermsOfUsePane from './terms-of-use-pane'
-
-// The props include Formik props that provide access to the current user data (stored in props.values)
-// and to its own blur/change/submit event handlers that automate the state.
-// We forward the props to each pane (via SequentialPaneDisplay) so that their individual controls
-// can be wired to be managed by Formik.
-export interface WizardProps {
-  activePaneId: string
-  formikProps: FormikProps<EditedUser>
-}
-
-const standardPanes: Record<string, PaneProps> = {
-  finish: {
-    id: 'finish',
-    pane: AccountSetupFinishPane,
-    title: <FormattedMessage id="components.NewAccountWizard.finish" />
-  },
-  mobility1: {
-    id: 'mobility1',
-    pane: AssistiveDevicesPane,
-    title: <FormattedMessage id="components.MobilityProfile.title" />
-  },
-  mobility2: {
-    id: 'mobility2',
-    pane: LimitationsPane,
-    title: <FormattedMessage id="components.MobilityProfile.title" />
-  },
-  notifications: {
-    getInvalidMessage: (intl: IntlShape) =>
-      intl.formatMessage({
-        id: 'components.PhoneNumberEditor.invalidPhone'
-      }),
-    id: 'notifications',
-    isInvalid: ({
-      isPhoneNumberVerified,
-      notificationChannel,
-      phoneNumber
-    }: EditedUser) => {
-      return (
-        notificationChannel?.includes('sms') &&
-        (!phoneNumber || !isPhoneNumberVerified)
-      )
-    },
-    pane: NotificationPrefsPane,
-    title: <FormattedMessage id="components.NewAccountWizard.notifications" />
-  },
-  places: {
-    id: 'places',
-    pane: FavoritePlaceList,
-    title: <FormattedMessage id="components.NewAccountWizard.places" />
-  },
-  terms: {
-    getInvalidMessage: (intl: IntlShape) =>
-      intl.formatMessage({
-        id: 'components.TermsOfUsePane.mustAgreeToTerms'
-      }),
-    id: 'terms',
-    isInvalid: ({ hasConsentedToTerms }: EditedUser) => !hasConsentedToTerms,
-    pane: TermsOfUsePane,
-    title: (
-      <FormattedMessage id="components.NewAccountWizard.createNewAccount" />
-    )
-  }
-}
-
-export interface PaneProps {
-  getInvalidMessage?: (intl: IntlShape) => string
-  id: string
-  isInvalid?: (arg: any) => boolean
-  pane: any
-  title: ReactNode
-}
-
-interface Props {
-  activePane: PaneProps
-  activePaneId: string
-  activePaneIndex: number
-  formikProps: FormikProps<any>
-  intl: IntlShape
-  onNext?: () => void
-  pages: string[]
-  parentPath: string
-  returnTo?: string
-  routeTo: (url: string) => void
-  title: string
-}
-
-const StepNumber = styled.p`
-  color: ${GRAY_ON_WHITE};
-  font-size: 40%;
-  margin: -1em 0 0 0;
-`
-
-/**
- * Basic component to build wizards (step-by-step forms).
- */
-class Wizard extends Component<Props> {
-  /**
-   * Routes to the next pane URL.
-   */
-  _routeTo = (nextId: string, method = push) => {
-    const { parentPath, routeTo } = this.props
-    routeTo(`${parentPath}/${nextId}`, undefined, method)
-  }
-
-  h1Ref = React.createRef<HTMLHeadingElement>()
-
-  _focusHeader = () => {
-    this.h1Ref?.current?.focus()
-  }
-
-  _handleToNextPane = async (e: MouseEvent<Button>) => {
-    const {
-      activePane,
-      activePaneIndex,
-      formikProps,
-      intl,
-      onNext,
-      pages,
-      returnTo = '/',
-      routeTo
-    } = this.props
-
-    if (activePaneIndex < pages.length - 1) {
-      // Don't submit the form if there are more steps to complete.
-      e.preventDefault()
-
-      const {
-        getInvalidMessage = (intl: IntlShape) => '',
-        isInvalid = () => false
-      } = activePane
-      if (isInvalid(formikProps.values)) {
-        alert(getInvalidMessage(intl))
-      } else {
-        const nextId = pages[activePaneIndex + 1]
-        // Execute any action that need to happen before going to the next pane
-        // (e.g. save a user account).
-        if (onNext) {
-          await onNext()
-        }
-        this._routeTo(nextId)
-      }
-      this._focusHeader()
-    } else {
-      // Display a toast to acknowledge saved changes
-      // (although in reality, changes quietly took effect in previous screens).
-      toast.success(intl.formatMessage({ id: 'actions.user.preferencesSaved' }))
-      routeTo(returnTo)
-    }
-  }
-
-  _handleToPrevPane = () => {
-    const { activePaneIndex, pages } = this.props
-    if (activePaneIndex > 0) {
-      const prevId = pages[activePaneIndex - 1]
-      prevId && this._routeTo(prevId)
-    }
-    this._focusHeader()
-  }
-
-  componentDidMount(): void {
-    this._focusHeader()
-
-    if (!this.props.activePaneId) {
-      this._routeTo(this.props.pages[0], replace)
-    }
-  }
-
-  render() {
-    const { activePane, activePaneIndex, formikProps, pages, title } =
-      this.props
-    const { pane: Pane, title: paneTitle } = activePane || {}
-
-    return (
-      <Form id="user-settings-form" noValidate>
-        <PageTitle title={title} />
-        <h1 aria-live="assertive" ref={this.h1Ref} tabIndex={-1}>
-          <StepNumber>
-            <FormattedMessage
-              id="components.SequentialPaneDisplay.stepNumber"
-              values={{
-                step: activePaneIndex + 1,
-                total: pages.length
-              }}
-            />
-          </StepNumber>
-          {paneTitle}
-        </h1>
-        <SequentialPaneContainer>
-          {Pane && <Pane {...formikProps} />}
-        </SequentialPaneContainer>
-        <FormNavigationButtons
-          backButton={
-            activePaneIndex > 0 && {
-              onClick: this._handleToPrevPane,
-              text: <FormattedMessage id="common.forms.back" />
-            }
-          }
-          okayButton={{
-            onClick: this._handleToNextPane,
-            text:
-              activePaneIndex < pages.length - 1 ? (
-                <FormattedMessage id="common.forms.next" />
-              ) : (
-                <FormattedMessage id="common.forms.finish" />
-              ),
-            type: 'submit'
-          }}
-        />
-      </Form>
-    )
-  }
-}
-
-// connect to the redux store
-
-const mapStateToProps = (state: AppReduxState, ownProps: Props) => {
-  const { activePaneId, pages } = ownProps
-  const { pathname } = state.router.location
-  const activePaneIndex = pages.indexOf(activePaneId)
-  return {
-    // This, instead of just standardPages[activePaneId], ensures no "foreign" page is accidentally shown.
-    activePane: standardPanes[pages[activePaneIndex]],
-    activePaneIndex,
-    parentPath: pathname.substr(0, pathname.lastIndexOf('/'))
-  }
-}
-
-const mapDispatchToProps = {
-  routeTo: uiActions.routeTo
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(Wizard))

From a7602853c0441ec23ad90a880c84f4d4497d521c Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 7 Dec 2023 10:52:58 -0500
Subject: [PATCH 32/42] refactor(standard-panes): Extract standard panes file

---
 .../user/sequential-pane-display.tsx          | 81 +++++++++----------
 lib/components/user/standard-panes.tsx        | 66 +++++++++++++++
 2 files changed, 102 insertions(+), 45 deletions(-)
 create mode 100644 lib/components/user/standard-panes.tsx

diff --git a/lib/components/user/sequential-pane-display.tsx b/lib/components/user/sequential-pane-display.tsx
index 4e5782f7d..13ded132f 100644
--- a/lib/components/user/sequential-pane-display.tsx
+++ b/lib/components/user/sequential-pane-display.tsx
@@ -1,39 +1,31 @@
 import { Button } from 'react-bootstrap'
 import { connect } from 'react-redux'
+import { Form, FormikProps } from 'formik'
 import { FormattedMessage, injectIntl, IntlShape } from 'react-intl'
-import { FormikProps } from 'formik'
 import { push, replace } from 'connected-react-router'
-import React, { Component, MouseEvent, ReactNode } from 'react'
+import React, { Component, MouseEvent } from 'react'
 import styled from 'styled-components'
 
 import * as uiActions from '../../actions/ui'
 import { AppReduxState } from '../../util/state-types'
 import { GRAY_ON_WHITE } from '../util/colors'
+import PageTitle from '../util/page-title'
 
 import { SequentialPaneContainer } from './styled'
 import FormNavigationButtons from './form-navigation-buttons'
-
-export interface PaneProps {
-  getInvalidMessage?: (intl: IntlShape) => string
-  id: string
-  isInvalid?: (arg: any) => boolean
-  pane: any
-  title: ReactNode
-}
+import standardPanes from './standard-panes'
 
 interface OwnProps {
   activePaneId: string
-  onFinish?: () => void
-  onNext?: () => void
-  panes: PaneProps[]
+  pages: string[]
 }
 
 interface Props extends OwnProps {
   activePane: PaneProps
   activePaneIndex: number
   intl: IntlShape
+  onNext?: () => void
   paneProps: FormikProps<any>
-  panes: PaneProps[]
   parentPath: string
   returnTo?: string
   routeTo: (url: any) => void
@@ -46,9 +38,9 @@ const StepNumber = styled.p`
 `
 
 /**
- * This component handles the flow between screens for new OTP user accounts.
+ * Basic component to build wizards (step-by-step forms).
  */
-class SequentialPaneDisplay extends Component<Props> {
+class Wizard extends Component<Props> {
   /**
    * Routes to the next pane URL.
    */
@@ -67,16 +59,15 @@ class SequentialPaneDisplay extends Component<Props> {
     const {
       activePane,
       activePaneIndex,
+      formikProps,
       intl,
-      onFinish,
       onNext,
-      paneProps,
-      panes,
+      pages,
       returnTo = '/',
       routeTo
     } = this.props
 
-    if (activePaneIndex < panes.length - 1) {
+    if (activePaneIndex < pages.length - 1) {
       // Don't submit the form if there are more steps to complete.
       e.preventDefault()
 
@@ -84,10 +75,10 @@ class SequentialPaneDisplay extends Component<Props> {
         getInvalidMessage = (intl: IntlShape) => '',
         isInvalid = () => false
       } = activePane
-      if (isInvalid(paneProps.values)) {
+      if (isInvalid(formikProps.values)) {
         alert(getInvalidMessage(intl))
       } else {
-        const nextId = panes[activePaneIndex + 1].id
+        const nextId = pages[activePaneIndex + 1]
         // Execute any action that need to happen before going to the next pane
         // (e.g. save a user account).
         if (onNext) {
@@ -96,16 +87,18 @@ class SequentialPaneDisplay extends Component<Props> {
         this._routeTo(nextId)
       }
       this._focusHeader()
-    } else if (onFinish) {
-      onFinish()
+    } else {
+      // Display a toast to acknowledge saved changes
+      // (although in reality, changes quietly took effect in previous screens).
+      toast.success(intl.formatMessage({ id: 'actions.user.preferencesSaved' }))
       routeTo(returnTo)
     }
   }
 
   _handleToPrevPane = () => {
-    const { activePaneIndex, panes } = this.props
+    const { activePaneIndex, pages } = this.props
     if (activePaneIndex > 0) {
-      const prevId = panes[activePaneIndex - 1].id
+      const prevId = pages[activePaneIndex - 1]
       prevId && this._routeTo(prevId)
     }
     this._focusHeader()
@@ -115,30 +108,32 @@ class SequentialPaneDisplay extends Component<Props> {
     this._focusHeader()
 
     if (!this.props.activePaneId) {
-      this._routeTo(this.props.panes[0].id, replace)
+      this._routeTo(this.props.pages[0], replace)
     }
   }
 
   render() {
-    const { activePane, activePaneIndex, paneProps, panes } = this.props
-    const { pane: Pane, title } = activePane || {}
+    const { activePane, activePaneIndex, formikProps, pages, title } =
+      this.props
+    const { pane: Pane, title: paneTitle } = activePane || {}
 
     return (
-      <>
+      <Form id="user-settings-form" noValidate>
+        <PageTitle title={title} />
         <h1 aria-live="assertive" ref={this.h1Ref} tabIndex={-1}>
           <StepNumber>
             <FormattedMessage
               id="components.SequentialPaneDisplay.stepNumber"
               values={{
                 step: activePaneIndex + 1,
-                total: panes.length
+                total: pages.length
               }}
             />
           </StepNumber>
-          {title}
+          {paneTitle}
         </h1>
         <SequentialPaneContainer>
-          {Pane && <Pane {...paneProps} />}
+          {Pane && <Pane {...formikProps} />}
         </SequentialPaneContainer>
         <FormNavigationButtons
           backButton={
@@ -150,7 +145,7 @@ class SequentialPaneDisplay extends Component<Props> {
           okayButton={{
             onClick: this._handleToNextPane,
             text:
-              activePaneIndex < panes.length - 1 ? (
+              activePaneIndex < pages.length - 1 ? (
                 <FormattedMessage id="common.forms.next" />
               ) : (
                 <FormattedMessage id="common.forms.finish" />
@@ -158,21 +153,20 @@ class SequentialPaneDisplay extends Component<Props> {
             type: 'submit'
           }}
         />
-      </>
+      </Form>
     )
   }
 }
 
 // connect to the redux store
 
-const mapStateToProps = (state: AppReduxState, ownProps: OwnProps) => {
-  const { activePaneId, panes } = ownProps
+const mapStateToProps = (state: AppReduxState, ownProps: Props) => {
+  const { activePaneId, pages } = ownProps
   const { pathname } = state.router.location
-  const activePaneIndex = panes.findIndex(
-    (pane: PaneProps) => pane.id === activePaneId
-  )
+  const activePaneIndex = pages.indexOf(activePaneId)
   return {
-    activePane: panes[activePaneIndex],
+    // This, instead of just standardPages[activePaneId], ensures no "foreign" page is accidentally shown.
+    activePane: standardPanes[pages[activePaneIndex]],
     activePaneIndex,
     parentPath: pathname.substr(0, pathname.lastIndexOf('/'))
   }
@@ -182,7 +176,4 @@ const mapDispatchToProps = {
   routeTo: uiActions.routeTo
 }
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(injectIntl(SequentialPaneDisplay))
+export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(Wizard))
diff --git a/lib/components/user/standard-panes.tsx b/lib/components/user/standard-panes.tsx
new file mode 100644
index 000000000..1679ed16f
--- /dev/null
+++ b/lib/components/user/standard-panes.tsx
@@ -0,0 +1,66 @@
+import { FormattedMessage, IntlShape } from 'react-intl'
+import React, { ReactNode } from 'react'
+
+export interface PaneProps {
+  getInvalidMessage?: (intl: IntlShape) => string
+  id: string
+  isInvalid?: (arg: any) => boolean
+  pane: any
+  title: ReactNode
+}
+
+const standardPanes: Record<string, PaneProps> = {
+  finish: {
+    id: 'finish',
+    pane: AccountSetupFinishPane,
+    title: <FormattedMessage id="components.NewAccountWizard.finish" />
+  },
+  mobility1: {
+    id: 'mobility1',
+    pane: AssistiveDevicesPane,
+    title: <FormattedMessage id="components.MobilityProfile.title" />
+  },
+  mobility2: {
+    id: 'mobility2',
+    pane: LimitationsPane,
+    title: <FormattedMessage id="components.MobilityProfile.title" />
+  },
+  notifications: {
+    getInvalidMessage: (intl: IntlShape) =>
+      intl.formatMessage({
+        id: 'components.PhoneNumberEditor.invalidPhone'
+      }),
+    id: 'notifications',
+    isInvalid: ({
+      isPhoneNumberVerified,
+      notificationChannel,
+      phoneNumber
+    }: EditedUser) => {
+      return (
+        notificationChannel?.includes('sms') &&
+        (!phoneNumber || !isPhoneNumberVerified)
+      )
+    },
+    pane: NotificationPrefsPane,
+    title: <FormattedMessage id="components.NewAccountWizard.notifications" />
+  },
+  places: {
+    id: 'places',
+    pane: FavoritePlaceList,
+    title: <FormattedMessage id="components.NewAccountWizard.places" />
+  },
+  terms: {
+    getInvalidMessage: (intl: IntlShape) =>
+      intl.formatMessage({
+        id: 'components.TermsOfUsePane.mustAgreeToTerms'
+      }),
+    id: 'terms',
+    isInvalid: ({ hasConsentedToTerms }: EditedUser) => !hasConsentedToTerms,
+    pane: TermsOfUsePane,
+    title: (
+      <FormattedMessage id="components.NewAccountWizard.createNewAccount" />
+    )
+  }
+}
+
+export default standardPanes

From 4abd05f2c1941d531d903c2ab7a82f785752ddb7 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 7 Dec 2023 10:56:47 -0500
Subject: [PATCH 33/42] refactor(SequentialPaneDisplay): Rename to wizard.

---
 .../user/{sequential-pane-display.tsx => wizard.tsx}           | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)
 rename lib/components/user/{sequential-pane-display.tsx => wizard.tsx} (99%)

diff --git a/lib/components/user/sequential-pane-display.tsx b/lib/components/user/wizard.tsx
similarity index 99%
rename from lib/components/user/sequential-pane-display.tsx
rename to lib/components/user/wizard.tsx
index 13ded132f..5d1520b79 100644
--- a/lib/components/user/sequential-pane-display.tsx
+++ b/lib/components/user/wizard.tsx
@@ -23,12 +23,13 @@ interface OwnProps {
 interface Props extends OwnProps {
   activePane: PaneProps
   activePaneIndex: number
+  formikProps: FormikProps<any>
   intl: IntlShape
   onNext?: () => void
-  paneProps: FormikProps<any>
   parentPath: string
   returnTo?: string
   routeTo: (url: any) => void
+  title: string
 }
 
 const StepNumber = styled.p`

From 86c73eb9176d621f46582c5f7b6c73a3a01a1513 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 7 Dec 2023 11:54:10 -0500
Subject: [PATCH 34/42] refactor: Fix types

---
 .../user/existing-account-display.tsx          | 11 +++++++++--
 lib/components/user/new-account-wizard.tsx     |  2 +-
 lib/components/user/standard-panes.tsx         |  8 ++++++++
 lib/components/user/user-account-screen.tsx    |  2 +-
 lib/components/user/wizard.tsx                 | 18 +++++++++++++-----
 5 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/lib/components/user/existing-account-display.tsx b/lib/components/user/existing-account-display.tsx
index 14958431f..551a7a943 100644
--- a/lib/components/user/existing-account-display.tsx
+++ b/lib/components/user/existing-account-display.tsx
@@ -1,13 +1,15 @@
 import { connect } from 'react-redux'
 import { FormattedMessage, useIntl } from 'react-intl'
 import { FormikProps } from 'formik'
-import React from 'react'
+import React, { FormEventHandler } from 'react'
 
 import { AppReduxState } from '../../util/state-types'
 import { TransitModeConfig } from '../../util/config-types'
 import PageTitle from '../util/page-title'
 
 import { EditedUser } from './types'
+import { PhoneCodeRequestHandler } from './phone-number-editor'
+import { PhoneVerificationSubmitHandler } from './phone-verification-form'
 import A11yPrefs from './a11y-prefs'
 import BackToTripPlanner from './back-to-trip-planner'
 import DeleteUser from './delete-user'
@@ -18,6 +20,10 @@ import StackedPanes from './stacked-panes'
 import TermsOfUsePane from './terms-of-use-pane'
 
 interface Props extends FormikProps<EditedUser> {
+  mobilityProfileEnabled: boolean
+  onDelete: FormEventHandler
+  onRequestPhoneVerificationCode: PhoneCodeRequestHandler
+  onSendPhoneVerificationCode: PhoneVerificationSubmitHandler
   wheelchairEnabled: boolean
 }
 
@@ -94,7 +100,8 @@ const ExistingAccountDisplay = (props: Props) => {
 }
 
 const mapStateToProps = (state: AppReduxState) => {
-  const { mobilityProfile: mobilityProfileEnabled, modes } = state.otp.config
+  const { mobilityProfile: mobilityProfileEnabled = false, modes } =
+    state.otp.config
   const wheelchairEnabled = modes.accessModes?.some(
     (mode: TransitModeConfig) => mode.showWheelchairSetting
   )
diff --git a/lib/components/user/new-account-wizard.tsx b/lib/components/user/new-account-wizard.tsx
index cea750a8a..34e9137fa 100644
--- a/lib/components/user/new-account-wizard.tsx
+++ b/lib/components/user/new-account-wizard.tsx
@@ -49,7 +49,7 @@ const NewAccountWizard = ({
 }
 
 // Get the new account pages based on the configuration's mobilityProfile flag.
-const mapStateToProps = (state: AppReduxState, ownProps: Props) => {
+const mapStateToProps = (state: AppReduxState) => {
   return {
     pages: state.otp.config.mobilityProfile
       ? ['terms', 'mobility1', 'mobility2', 'notifications', 'places', 'finish']
diff --git a/lib/components/user/standard-panes.tsx b/lib/components/user/standard-panes.tsx
index 1679ed16f..b078fd89a 100644
--- a/lib/components/user/standard-panes.tsx
+++ b/lib/components/user/standard-panes.tsx
@@ -1,6 +1,14 @@
 import { FormattedMessage, IntlShape } from 'react-intl'
 import React, { ReactNode } from 'react'
 
+import { EditedUser } from './types'
+import AccountSetupFinishPane from './account-setup-finish-pane'
+import AssistiveDevicesPane from './mobility-profile/assistive-devices-pane'
+import FavoritePlaceList from './places/favorite-place-list'
+import LimitationsPane from './mobility-profile/limitations-pane'
+import NotificationPrefsPane from './notification-prefs-pane'
+import TermsOfUsePane from './terms-of-use-pane'
+
 export interface PaneProps {
   getInvalidMessage?: (intl: IntlShape) => string
   id: string
diff --git a/lib/components/user/user-account-screen.tsx b/lib/components/user/user-account-screen.tsx
index a7858d519..cdd5f4f41 100644
--- a/lib/components/user/user-account-screen.tsx
+++ b/lib/components/user/user-account-screen.tsx
@@ -28,7 +28,7 @@ import withLoggedInUserSupport from './with-logged-in-user-support'
 
 interface Props {
   auth0: Auth0ContextInterface
-  basePath: string
+  basePath?: string
   createOrUpdateUser: (user: User, intl: IntlShape) => Promise<number>
   deleteUser: (
     user: User,
diff --git a/lib/components/user/wizard.tsx b/lib/components/user/wizard.tsx
index 5d1520b79..4fde1db90 100644
--- a/lib/components/user/wizard.tsx
+++ b/lib/components/user/wizard.tsx
@@ -5,17 +5,24 @@ import { FormattedMessage, injectIntl, IntlShape } from 'react-intl'
 import { push, replace } from 'connected-react-router'
 import React, { Component, MouseEvent } from 'react'
 import styled from 'styled-components'
+import toast from 'react-hot-toast'
 
 import * as uiActions from '../../actions/ui'
 import { AppReduxState } from '../../util/state-types'
 import { GRAY_ON_WHITE } from '../util/colors'
 import PageTitle from '../util/page-title'
 
+import { EditedUser } from './types'
 import { SequentialPaneContainer } from './styled'
 import FormNavigationButtons from './form-navigation-buttons'
-import standardPanes from './standard-panes'
+import standardPanes, { PaneProps } from './standard-panes'
 
-interface OwnProps {
+export interface WizardProps {
+  activePaneId: string
+  formikProps: FormikProps<EditedUser>
+}
+
+export interface OwnProps {
   activePaneId: string
   pages: string[]
 }
@@ -23,12 +30,13 @@ interface OwnProps {
 interface Props extends OwnProps {
   activePane: PaneProps
   activePaneIndex: number
-  formikProps: FormikProps<any>
+  formikProps: FormikProps<EditedUser>
   intl: IntlShape
   onNext?: () => void
+  pages: string[]
   parentPath: string
   returnTo?: string
-  routeTo: (url: any) => void
+  routeTo: (url: string, replace?: string, method?: any) => void
   title: string
 }
 
@@ -161,7 +169,7 @@ class Wizard extends Component<Props> {
 
 // connect to the redux store
 
-const mapStateToProps = (state: AppReduxState, ownProps: Props) => {
+const mapStateToProps = (state: AppReduxState, ownProps: OwnProps) => {
   const { activePaneId, pages } = ownProps
   const { pathname } = state.router.location
   const activePaneIndex = pages.indexOf(activePaneId)

From 545bfcd71e08ad7690fccc61a5467425d44bddbf Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 7 Dec 2023 12:43:48 -0500
Subject: [PATCH 35/42] chore(i18n): Add FR and i18n check exceptions

---
 i18n/fr.yml               | 32 ++++++++++++++++++++++++++++++++
 i18n/i18n-exceptions.json | 18 ++++++++++++++++++
 2 files changed, 50 insertions(+)

diff --git a/i18n/fr.yml b/i18n/fr.yml
index 9e0995ef6..269f79202 100644
--- a/i18n/fr.yml
+++ b/i18n/fr.yml
@@ -346,6 +346,38 @@ components:
     timeWalking: "{time} de marche"
   MobileOptions:
     header: Options de recherche
+  MobilityProfile:
+    DevicesPane:
+      devices:
+        cane: Canne
+        crutches: Béquilles
+        electric-wheelchair: Fauteuil roulant électrique
+        manual-walker: Déambuleur manuel
+        manual-wheelchair: Fauteuil roulant manuel
+        mobility-scooter: Scooter électrique
+        none: Aucun
+        service-animal: Animal de service
+        stroller: Poussette
+        wheeled-walker: Déambuleur à roues
+        white-cane: Canne blanche
+      prompt: >-
+        Utilisez-vous habituellement l'aide d'un appareil pour vous déplacer ?
+        (Cochez tous les cas qui vous concernent)
+    LimitationsPane:
+      mobilityPrompt: >-
+        Avez-vous des déficiences qui vous font marcher plus lentement ou plus
+        prudemment que d'autres personnes ?
+      visionLimitations:
+        legally-blind: Non-voyant
+        low-vision: Vision basse
+        none: Aucune
+      visionPrompt: Avez-vous des déficiences visuelles ?
+    MobilityPane:
+      header: Profil de mobilité
+    intro: >-
+      Veuillez répondre a quelques questions pour personaliser vos recherches de
+      trajets selon vos besoins et préférences.
+    title: Spécifiez votre profil de mobilité
   NarrativeItinerariesHeader:
     changeSortDir: Changer l'ordre de tri
     howToFindResults: Pour afficher les résultats, utilisez l'en-tête Trajets trouvés plus bas.
diff --git a/i18n/i18n-exceptions.json b/i18n/i18n-exceptions.json
index 0f3bd1185..8de11b59b 100644
--- a/i18n/i18n-exceptions.json
+++ b/i18n/i18n-exceptions.json
@@ -33,6 +33,24 @@
     "components.OTP2ErrorRenderer.inputFields.*": [
       "FROM",
       "TO"
+    ],
+    "components.MobilityProfile.DevicesPane.devices.*": [
+      "cane",
+      "crutches",
+      "electric-wheelchair",
+      "manual-walker",
+      "manual-wheelchair",
+      "mobility-scooter",
+      "none",
+      "service-animal",
+      "stroller",
+      "wheeled-walker",
+      "white-cane"
+    ],
+    "components.MobilityProfile.LimitationsPane.visionLimitations.*": [
+      "none",
+      "low-vision",
+      "legally-blind"
     ]
   }
 }
\ No newline at end of file

From 918f2edcadfe4cda1fbf589cd94dc010420ddfa5 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 7 Dec 2023 13:27:41 -0500
Subject: [PATCH 36/42] refactor(UserAccountScreen): Rename isCreating to
 isWizard

---
 lib/components/user/user-account-screen.tsx | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/lib/components/user/user-account-screen.tsx b/lib/components/user/user-account-screen.tsx
index cdd5f4f41..cfaf9554e 100644
--- a/lib/components/user/user-account-screen.tsx
+++ b/lib/components/user/user-account-screen.tsx
@@ -36,7 +36,7 @@ interface Props {
     intl: IntlShape
   ) => void
   intl: IntlShape
-  isCreating: boolean
+  isWizard: boolean
   itemId: string
   loggedInUser: User
   requestPhoneVerificationSms: (phoneNum: string, intl: IntlShape) => void
@@ -121,7 +121,7 @@ class UserAccountScreen extends Component<Props> {
     t: HTMLInputElement,
     submitForm: () => Promise<void>
   ) => {
-    const { intl, isCreating } = this.props
+    const { intl, isWizard } = this.props
     const firstLabel = t.labels?.[0]
 
     // Disable input (adds a visual effect) during submission
@@ -130,7 +130,7 @@ class UserAccountScreen extends Component<Props> {
     t.style.animation = 'dive-in 1s linear infinite'
     const initialCursor = firstLabel ? firstLabel.style.cursor : ''
     if (firstLabel) firstLabel.style.cursor = 'wait'
-    const loadingToast = !isCreating
+    const loadingToast = !isWizard
       ? toast.loading(
           intl.formatMessage({ id: 'components.UserAccountScreen.updating' })
         )
@@ -138,7 +138,7 @@ class UserAccountScreen extends Component<Props> {
     try {
       await submitForm()
       // On success, display a toast notification for existing accounts.
-      if (!isCreating) {
+      if (!isWizard) {
         toastSuccess(
           intl.formatMessage({
             // Use a summary text for the field, if defined (e.g. to replace long labels),
@@ -206,14 +206,13 @@ class UserAccountScreen extends Component<Props> {
   }
 
   render() {
-    const { auth0, basePath, intl, isCreating, itemId, loggedInUser } =
-      this.props
+    const { auth0, basePath, intl, isWizard, itemId, loggedInUser } = this.props
     const loggedInUserWithNotificationArray = {
       ...loggedInUser,
       notificationChannel: loggedInUser.notificationChannel?.split(',') || []
     }
     return (
-      <AccountPage subnav={!isCreating}>
+      <AccountPage subnav={!isWizard}>
         <Wrapper>
           <Formik
             // Force Formik to reload initialValues when we update them (e.g. user gets assigned an id).
@@ -296,8 +295,6 @@ const mapStateToProps = (
   ownProps: RouteComponentProps<{ step: string }>
 ) => {
   const { params, url } = ownProps.match
-  const isCreating =
-    url.startsWith(CREATE_ACCOUNT_PATH) || url.startsWith(MOBILITY_PATH)
   const basePath = [CREATE_ACCOUNT_PATH, MOBILITY_PATH].find((path) =>
     url.startsWith(path)
   )
@@ -305,7 +302,7 @@ const mapStateToProps = (
   const { step } = params
   return {
     basePath,
-    isCreating,
+    isWizard: !!basePath,
     itemId: step,
     loggedInUser: state.user.loggedInUser
   }

From 6023902d4d8d3fa6cd997db05f6d1d367effcf56 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 8 Dec 2023 17:26:28 -0500
Subject: [PATCH 37/42] fix(AssistiveDevicesPane): Fix backend code of devices
 and adjust wording.

---
 i18n/en-US.yml                                   | 16 ++++++++--------
 i18n/fr.yml                                      | 14 +++++++-------
 i18n/i18n-exceptions.json                        | 14 +++++++-------
 .../mobility-profile/assistive-devices-pane.tsx  | 14 +++++++-------
 4 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index d7adcb324..f2d5a153e 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -334,15 +334,15 @@ components:
       devices:
         cane: Cane
         crutches: Crutches
-        electric-wheelchair: Electric wheelchair
-        manual-walker: Manual walker
-        manual-wheelchair: Manual wheelchair
-        mobility-scooter: Mobility Scooter
-        none: None
-        service-animal: Service animal
+        electric wheelchair: Electric wheelchair
+        manual walker: Manual walker
+        manual wheelchair: Manual/traditional wheelchair
+        mobility scooter: Mobility scooter
+        none: No assistive device
+        service animal: Service animal
         stroller: Stroller
-        wheeled-walker: Wheeled walker
-        white-cane: White cane
+        wheeled walker: Wheeled walker
+        white cane: White cane
       prompt: Do you regularly use a mobility assistive device? (Check all that apply)
     LimitationsPane:
       mobilityPrompt: >-
diff --git a/i18n/fr.yml b/i18n/fr.yml
index 939b7bdcf..5b2c1eb42 100644
--- a/i18n/fr.yml
+++ b/i18n/fr.yml
@@ -351,15 +351,15 @@ components:
       devices:
         cane: Canne
         crutches: Béquilles
-        electric-wheelchair: Fauteuil roulant électrique
-        manual-walker: Déambuleur manuel
-        manual-wheelchair: Fauteuil roulant manuel
-        mobility-scooter: Scooter électrique
+        electric wheelchair: Fauteuil roulant électrique
+        manual walker: Déambulateur manuel
+        manual wheelchair: Fauteuil roulant manuel
+        mobility scooter: Scooter électrique
         none: Aucun
-        service-animal: Animal de service
+        service animal: Animal de service
         stroller: Poussette
-        wheeled-walker: Déambuleur à roues
-        white-cane: Canne blanche
+        wheeled walker: Déambulateur à roues
+        white cane: Canne blanche
       prompt: >-
         Utilisez-vous habituellement l'aide d'un appareil pour vous déplacer ?
         (Cochez tous les cas qui vous concernent)
diff --git a/i18n/i18n-exceptions.json b/i18n/i18n-exceptions.json
index 8de11b59b..9cb9f516a 100644
--- a/i18n/i18n-exceptions.json
+++ b/i18n/i18n-exceptions.json
@@ -37,15 +37,15 @@
     "components.MobilityProfile.DevicesPane.devices.*": [
       "cane",
       "crutches",
-      "electric-wheelchair",
-      "manual-walker",
-      "manual-wheelchair",
-      "mobility-scooter",
+      "electric wheelchair",
+      "manual walker",
+      "manual wheelchair",
+      "mobility scooter",
       "none",
-      "service-animal",
+      "service animal",
       "stroller",
-      "wheeled-walker",
-      "white-cane"
+      "wheeled walker",
+      "white cane"
     ],
     "components.MobilityProfile.LimitationsPane.visionLimitations.*": [
       "none",
diff --git a/lib/components/user/mobility-profile/assistive-devices-pane.tsx b/lib/components/user/mobility-profile/assistive-devices-pane.tsx
index 2d1576ae7..d0ff6985f 100644
--- a/lib/components/user/mobility-profile/assistive-devices-pane.tsx
+++ b/lib/components/user/mobility-profile/assistive-devices-pane.tsx
@@ -8,16 +8,16 @@ import { User } from '../types'
 
 const knownDeviceCodes = [
   'none',
-  'white-cane',
-  'manual-walker',
-  'wheeled-walker',
+  'white cane',
+  'manual walker',
+  'wheeled walker',
   'cane',
   'crutches',
   'stroller',
-  'service-animal',
-  'mobility-scooter',
-  'electric-wheelchair',
-  'manual-wheelchair'
+  'service animal',
+  'mobility scooter',
+  'electric wheelchair',
+  'manual wheelchair'
 ]
 
 const DeviceOption = styled.span`

From b1ad318057f5692261dcef584e2f0bc224f0abb5 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 8 Dec 2023 17:35:27 -0500
Subject: [PATCH 38/42] refactor(StandardPanes): Rename mobility panes per PR
 feedback

---
 lib/components/user/mobility-profile/mobility-wizard.tsx | 2 +-
 lib/components/user/new-account-wizard.tsx               | 9 ++++++++-
 lib/components/user/standard-panes.tsx                   | 8 ++++----
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/lib/components/user/mobility-profile/mobility-wizard.tsx b/lib/components/user/mobility-profile/mobility-wizard.tsx
index c70a0dac8..c5036bd0b 100644
--- a/lib/components/user/mobility-profile/mobility-wizard.tsx
+++ b/lib/components/user/mobility-profile/mobility-wizard.tsx
@@ -20,7 +20,7 @@ const MobilityWizard = ({
     <Wizard
       activePaneId={activePaneId}
       formikProps={formikProps}
-      pages={['mobility1', 'mobility2']}
+      pages={['mobilityDevices', 'mobilityLimitations']}
       returnTo="/account/settings"
       title={title}
     />
diff --git a/lib/components/user/new-account-wizard.tsx b/lib/components/user/new-account-wizard.tsx
index 34e9137fa..bded4baa0 100644
--- a/lib/components/user/new-account-wizard.tsx
+++ b/lib/components/user/new-account-wizard.tsx
@@ -52,7 +52,14 @@ const NewAccountWizard = ({
 const mapStateToProps = (state: AppReduxState) => {
   return {
     pages: state.otp.config.mobilityProfile
-      ? ['terms', 'mobility1', 'mobility2', 'notifications', 'places', 'finish']
+      ? [
+          'terms',
+          'mobilityDevices',
+          'mobilityLimitations',
+          'notifications',
+          'places',
+          'finish'
+        ]
       : ['terms', 'notifications', 'places', 'finish']
   }
 }
diff --git a/lib/components/user/standard-panes.tsx b/lib/components/user/standard-panes.tsx
index b078fd89a..b18d60524 100644
--- a/lib/components/user/standard-panes.tsx
+++ b/lib/components/user/standard-panes.tsx
@@ -23,13 +23,13 @@ const standardPanes: Record<string, PaneProps> = {
     pane: AccountSetupFinishPane,
     title: <FormattedMessage id="components.NewAccountWizard.finish" />
   },
-  mobility1: {
-    id: 'mobility1',
+  mobilityDevices: {
+    id: 'mobilityDevices',
     pane: AssistiveDevicesPane,
     title: <FormattedMessage id="components.MobilityProfile.title" />
   },
-  mobility2: {
-    id: 'mobility2',
+  mobilityLimitations: {
+    id: 'mobilityLimitations',
     pane: LimitationsPane,
     title: <FormattedMessage id="components.MobilityProfile.title" />
   },

From d6808558857321a2eb5633d3daea9746622f92e9 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 8 Dec 2023 17:40:50 -0500
Subject: [PATCH 39/42] refactor(MobilityPane): Update button label: Define >
 Edit

---
 i18n/en-US.yml                                         | 1 +
 i18n/fr.yml                                            | 1 +
 lib/components/user/mobility-profile/mobility-pane.tsx | 2 +-
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index f2d5a153e..f0ef7f9a9 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -354,6 +354,7 @@ components:
         none: None
       visionPrompt: Do you have any vision limitations?
     MobilityPane:
+      button: Edit your mobility profile
       header: Mobility Profile
     intro: >-
       Please answer a few questions to customize the trip planning experience to
diff --git a/i18n/fr.yml b/i18n/fr.yml
index 5b2c1eb42..4b0e08d32 100644
--- a/i18n/fr.yml
+++ b/i18n/fr.yml
@@ -373,6 +373,7 @@ components:
         none: Aucune
       visionPrompt: Avez-vous des déficiences visuelles ?
     MobilityPane:
+      button: Modifier votre profil de mobilité
       header: Profil de mobilité
     intro: >-
       Veuillez répondre a quelques questions pour personaliser vos recherches de
diff --git a/lib/components/user/mobility-profile/mobility-pane.tsx b/lib/components/user/mobility-profile/mobility-pane.tsx
index c14b96d4b..4eee4e881 100644
--- a/lib/components/user/mobility-profile/mobility-pane.tsx
+++ b/lib/components/user/mobility-profile/mobility-pane.tsx
@@ -18,7 +18,7 @@ const MobilityPane = ({ routeTo }: Props): JSX.Element => {
   }, [routeTo])
   return (
     <Button bsStyle="primary" onClick={handleClick}>
-      <FormattedMessage id="components.MobilityProfile.title" />
+      <FormattedMessage id="components.MobilityProfile.MobilityPane.button" />
     </Button>
   )
 }

From 23edbc895f522f2f3c66c07f8a42a20f1b0665d6 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 8 Dec 2023 18:02:12 -0500
Subject: [PATCH 40/42] improvement(AssistiveDevicesPane): Fix checkbox spacing
 and introduce 2-col layout

---
 .../user/mobility-profile/assistive-devices-pane.tsx     | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/lib/components/user/mobility-profile/assistive-devices-pane.tsx b/lib/components/user/mobility-profile/assistive-devices-pane.tsx
index d0ff6985f..2547b6eb4 100644
--- a/lib/components/user/mobility-profile/assistive-devices-pane.tsx
+++ b/lib/components/user/mobility-profile/assistive-devices-pane.tsx
@@ -21,11 +21,16 @@ const knownDeviceCodes = [
 ]
 
 const DeviceOption = styled.span`
-  display: block;
+  align-items: center;
+  display: inline-flex;
+  gap: 0.5em;
+  margin-bottom: 5px;
+  min-width: 300px;
+  width: 50%;
 
   label {
     font-weight: normal;
-    margin: 0.25em;
+    margin: 4px 0 0; /* match bootstrap's checkbox for better vert. align */
   }
 `
 

From a3a0a85c203b2fdecba8d922f04f4ac185c87bc8 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Mon, 11 Dec 2023 11:30:04 -0500
Subject: [PATCH 41/42] improvement(MobilityPane): Add summary of mobility
 choices per PR feedback

---
 i18n/en-US.yml                                |  3 ++
 i18n/fr.yml                                   | 13 +++---
 .../user/mobility-profile/mobility-pane.tsx   | 45 ++++++++++++++++---
 3 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index f0ef7f9a9..83fcfe7a7 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -356,6 +356,9 @@ components:
     MobilityPane:
       button: Edit your mobility profile
       header: Mobility Profile
+      mobilityDevices: "Mobility devices: "
+      mobilityLimitations: "Mobility limitations: "
+      visionLimitations: "Vision limitations: "
     intro: >-
       Please answer a few questions to customize the trip planning experience to
       your needs and preferences.
diff --git a/i18n/fr.yml b/i18n/fr.yml
index 4b0e08d32..a6fbbc818 100644
--- a/i18n/fr.yml
+++ b/i18n/fr.yml
@@ -365,16 +365,19 @@ components:
         (Cochez tous les cas qui vous concernent)
     LimitationsPane:
       mobilityPrompt: >-
-        Avez-vous des déficiences qui vous font marcher plus lentement ou plus
-        prudemment que d'autres personnes ?
+        Avez-vous des handicaps moteurs qui vous font marcher plus lentement ou
+        plus prudemment que d'autres personnes ?
       visionLimitations:
         legally-blind: Non-voyant
         low-vision: Vision basse
         none: Aucune
-      visionPrompt: Avez-vous des déficiences visuelles ?
+      visionPrompt: Avez-vous des handicaps visuels ?
     MobilityPane:
-      button: Modifier votre profil de mobilité
-      header: Profil de mobilité
+      button: Modifier votre profil mobilité
+      header: Profil mobilité
+      mobilityDevices: "Appareils d'aide : "
+      mobilityLimitations: "Handicaps moteurs : "
+      visionLimitations: "Handicaps visuels : "
     intro: >-
       Veuillez répondre a quelques questions pour personaliser vos recherches de
       trajets selon vos besoins et préférences.
diff --git a/lib/components/user/mobility-profile/mobility-pane.tsx b/lib/components/user/mobility-profile/mobility-pane.tsx
index 4eee4e881..6c48c98f0 100644
--- a/lib/components/user/mobility-profile/mobility-pane.tsx
+++ b/lib/components/user/mobility-profile/mobility-pane.tsx
@@ -1,25 +1,58 @@
 import { Button } from 'react-bootstrap'
 import { connect } from 'react-redux'
-import { FormattedMessage } from 'react-intl'
+import { FormattedList, FormattedMessage } from 'react-intl'
+import { FormikProps } from 'formik'
 import React, { useCallback } from 'react'
 
 import * as uiActions from '../../../actions/ui'
+import { EditedUser } from '../types'
 
-interface Props {
+interface Props extends FormikProps<EditedUser> {
   routeTo: (url: string) => void
 }
 
 /**
  * Renders a button to show the mobility profile settings.
  */
-const MobilityPane = ({ routeTo }: Props): JSX.Element => {
+const MobilityPane = ({ routeTo, values: userData }: Props): JSX.Element => {
   const handleClick = useCallback(() => {
     routeTo('/account/mobilityProfile/')
   }, [routeTo])
+  const { isMobilityLimited, mobilityDevices, visionLimitation } =
+    userData.mobilityProfile || {}
   return (
-    <Button bsStyle="primary" onClick={handleClick}>
-      <FormattedMessage id="components.MobilityProfile.MobilityPane.button" />
-    </Button>
+    <div>
+      <p>
+        <FormattedMessage id="components.MobilityProfile.MobilityPane.mobilityDevices" />
+        <FormattedList
+          // `style` below is a react-intl-specific prop.
+          // eslint-disable-next-line react/style-prop-object
+          style="narrow"
+          type="conjunction"
+          value={mobilityDevices?.map((dv) => (
+            <FormattedMessage
+              id={`components.MobilityProfile.DevicesPane.devices.${dv}`}
+              key={dv}
+            />
+          ))}
+        />
+        <br />
+        <FormattedMessage id="components.MobilityProfile.MobilityPane.mobilityLimitations" />
+        {isMobilityLimited ? (
+          <FormattedMessage id="common.forms.yes" />
+        ) : (
+          <FormattedMessage id="common.forms.no" />
+        )}
+        <br />
+        <FormattedMessage id="components.MobilityProfile.MobilityPane.visionLimitations" />
+        <FormattedMessage
+          id={`components.MobilityProfile.LimitationsPane.visionLimitations.${visionLimitation}`}
+        />
+      </p>
+      <Button bsStyle="primary" onClick={handleClick}>
+        <FormattedMessage id="components.MobilityProfile.MobilityPane.button" />
+      </Button>
+    </div>
   )
 }
 

From f55889760517621c18d88c62816623bcb1b97fed Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Mon, 11 Dec 2023 12:39:48 -0500
Subject: [PATCH 42/42] refactor(MobilityPane): Fix types and text for no
 devices.

---
 .../user/mobility-profile/mobility-pane.tsx        | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/lib/components/user/mobility-profile/mobility-pane.tsx b/lib/components/user/mobility-profile/mobility-pane.tsx
index 6c48c98f0..71ff00305 100644
--- a/lib/components/user/mobility-profile/mobility-pane.tsx
+++ b/lib/components/user/mobility-profile/mobility-pane.tsx
@@ -18,18 +18,22 @@ const MobilityPane = ({ routeTo, values: userData }: Props): JSX.Element => {
   const handleClick = useCallback(() => {
     routeTo('/account/mobilityProfile/')
   }, [routeTo])
-  const { isMobilityLimited, mobilityDevices, visionLimitation } =
-    userData.mobilityProfile || {}
+  const {
+    isMobilityLimited,
+    mobilityDevices = [],
+    visionLimitation
+  } = userData.mobilityProfile || {}
+  const devices = mobilityDevices.length ? mobilityDevices : ['none']
   return (
     <div>
       <p>
         <FormattedMessage id="components.MobilityProfile.MobilityPane.mobilityDevices" />
         <FormattedList
-          // `style` below is a react-intl-specific prop.
+          // `style` below is a react-intl -specific prop.
           // eslint-disable-next-line react/style-prop-object
-          style="narrow"
+          style="narrow" // Should suppress the ending "and" in "a, b, and c".
           type="conjunction"
-          value={mobilityDevices?.map((dv) => (
+          value={devices.map((dv) => (
             <FormattedMessage
               id={`components.MobilityProfile.DevicesPane.devices.${dv}`}
               key={dv}