From cee60f4fbb4105d48f66468a889abb92f0d20f3f Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Mon, 18 Nov 2024 10:25:51 -0500
Subject: [PATCH 01/29] feat(TripCompanionsPane): Add basic trip companions
 pane to trip settings

---
 .../mobility-profile/trip-companions-pane.tsx | 57 +++++++++++++++++++
 .../user/monitored-trip/saved-trip-screen.js  |  4 +-
 2 files changed, 59 insertions(+), 2 deletions(-)
 create mode 100644 lib/components/user/mobility-profile/trip-companions-pane.tsx

diff --git a/lib/components/user/mobility-profile/trip-companions-pane.tsx b/lib/components/user/mobility-profile/trip-companions-pane.tsx
new file mode 100644
index 000000000..ca3022811
--- /dev/null
+++ b/lib/components/user/mobility-profile/trip-companions-pane.tsx
@@ -0,0 +1,57 @@
+import { Ban } from '@styled-icons/fa-solid/Ban'
+import { connect } from 'react-redux'
+import {
+  ControlLabel,
+  FormControl,
+  FormGroup,
+  HelpBlock,
+  ProgressBar,
+  Radio
+} from 'react-bootstrap'
+import { Field, FormikProps } from 'formik'
+import { FormattedMessage, useIntl } from 'react-intl'
+import { Prompt } from 'react-router'
+// @ts-expect-error FormikErrorFocus does not support TypeScript yet.
+import FormikErrorFocus from 'formik-error-focus'
+import React, { Component, FormEventHandler } from 'react'
+import styled from 'styled-components'
+import type { IntlShape, WrappedComponentProps } from 'react-intl'
+
+import * as userActions from '../../../actions/user'
+import { AppReduxState } from '../../../util/state-types'
+import { FieldSet } from '../styled'
+import { getBaseColor, RED_ON_WHITE } from '../../util/colors'
+import { getErrorStates } from '../../../util/ui'
+import { ItineraryExistence, MonitoredTrip } from '../types'
+import InvisibleA11yLabel from '../../util/invisible-a11y-label'
+
+type Props = WrappedComponentProps &
+  FormikProps<MonitoredTrip> & {
+    canceled: boolean
+  }
+
+/**
+ * Pane for showing/setting trip companions and observers.
+ */
+const TripCompanions = (props: Props): JSX.Element => {
+  console.log(props)
+  return (
+    <div>
+      <p>
+        Primary traveler: {props.primary ? props.primary.email : 'None set'}
+      </p>
+      <p>Companions: {props.companions ? props.companions.length : 'None'}</p>
+      <p>Observers: {props.observers ? props.observers.length : 'None'}</p>
+    </div>
+  )
+}
+
+// Connect to redux store
+
+const mapStateToProps = (state: AppReduxState) => {
+  return {}
+}
+
+const mapDispatchToProps = {}
+
+export default connect(mapStateToProps, mapDispatchToProps)(TripCompanions)
diff --git a/lib/components/user/monitored-trip/saved-trip-screen.js b/lib/components/user/monitored-trip/saved-trip-screen.js
index 5e66539ab..12c47b3e0 100644
--- a/lib/components/user/monitored-trip/saved-trip-screen.js
+++ b/lib/components/user/monitored-trip/saved-trip-screen.js
@@ -20,8 +20,8 @@ import { RETURN_TO_CURRENT_ROUTE } from '../../../util/ui'
 import { TRIPS_PATH } from '../../../util/constants'
 import AccountPage from '../account-page'
 import AwaitingScreen from '../awaiting-screen'
-import CompanionsPane from '../mobility-profile/companions-pane'
 import InvisibleA11yLabel from '../../util/invisible-a11y-label'
+import TripCompanionsPane from '../mobility-profile/trip-companions-pane'
 import withLoggedInUserSupport from '../with-logged-in-user-support'
 
 import SavedTripEditor from './saved-trip-editor'
@@ -122,7 +122,7 @@ class SavedTripScreen extends Component {
     basics: TripBasicsPane,
     notifications: TripNotificationsPane,
     summary: TripSummaryPane,
-    travelCompanions: CompanionsPane
+    travelCompanions: TripCompanionsPane
   }
 
   componentDidMount() {

From 354d41ba84fefd37c526d60468afa826f45364ca Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Mon, 18 Nov 2024 10:47:41 -0500
Subject: [PATCH 02/29] refactor(user/types): Add trip companion types

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

diff --git a/lib/components/user/types.ts b/lib/components/user/types.ts
index be05872cd..26f257faa 100644
--- a/lib/components/user/types.ts
+++ b/lib/components/user/types.ts
@@ -89,8 +89,11 @@ export type MonitoredTrip = Record<DaysOfWeek, boolean> & {
   itineraryExistence?: ItineraryExistence
   journeyState?: JourneyState
   leadTimeInMinutes: number
+  observers?: CompanionInfo[]
   otp2QueryParams: Record<string, unknown>
+  primary?: CompanionInfo[]
   queryParams: Record<string, unknown>
+  secondary?: CompanionInfo
   tripName: string
   userId: string
 }

From 01ec9dceae5de87d33bf6fb8b5be83de3dfbccad Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Mon, 18 Nov 2024 20:21:28 -0500
Subject: [PATCH 03/29] feat(TripCompanionsPane): Support assigning companions

---
 .../mobility-profile/companion-selector.tsx   | 70 ++++++++++++++
 .../mobility-profile/trip-companions-pane.tsx | 92 ++++++++++---------
 2 files changed, 119 insertions(+), 43 deletions(-)
 create mode 100644 lib/components/user/mobility-profile/companion-selector.tsx

diff --git a/lib/components/user/mobility-profile/companion-selector.tsx b/lib/components/user/mobility-profile/companion-selector.tsx
new file mode 100644
index 000000000..a735c0f5c
--- /dev/null
+++ b/lib/components/user/mobility-profile/companion-selector.tsx
@@ -0,0 +1,70 @@
+import { connect } from 'react-redux'
+import { QueryParamChangeEvent } from '@opentripplanner/trip-form/lib/types'
+import React, { lazy, Suspense } from 'react'
+
+import { AppReduxState } from '../../util/state-types'
+import { CompanionInfo, User } from '../types'
+
+export interface Option {
+  label: string
+  value: CompanionInfo
+}
+
+const Select = lazy(() => import('react-select'))
+
+function notNull(item) {
+  return !!item
+}
+
+function makeOption(companion: CompanionInfo) {
+  return {
+    label: companion?.nickname || companion?.email,
+    value: companion
+  }
+}
+
+const CompanionSelector = ({
+  excludedUsers = [],
+  loggedInUser,
+  multi = false,
+  onChange,
+  selectedCompanions
+}: {
+  excludedUsers?: CompanionInfo[]
+  loggedInUser?: User
+  multi?: boolean
+  onChange: (e: QueryParamChangeEvent) => void
+  selectedCompanions?: CompanionInfo | CompanionInfo[]
+}): JSX.Element => {
+  const excludedEmails = excludedUsers.filter(notNull).map(({ email }) => email)
+  const companionOptions = (loggedInUser?.relatedUsers || [])
+    .filter(notNull)
+    .filter(({ status = '' }) => status === 'CONFIRMED')
+    .filter(({ email }) => !excludedEmails.includes(email))
+    .map(makeOption)
+  const companionValues = multi
+    ? selectedCompanions?.filter(notNull).map(makeOption)
+    : selectedCompanions !== null
+    ? makeOption(selectedCompanions)
+    : null
+
+  return (
+    <Suspense fallback={<span>...</span>}>
+      <Select
+        isClearable
+        isMulti={multi}
+        onChange={onChange}
+        options={companionOptions}
+        value={companionValues}
+      />
+    </Suspense>
+  )
+}
+
+const mapStateToProps = (state: AppReduxState) => {
+  return {
+    loggedInUser: state.user.loggedInUser
+  }
+}
+
+export default connect(mapStateToProps)(CompanionSelector)
diff --git a/lib/components/user/mobility-profile/trip-companions-pane.tsx b/lib/components/user/mobility-profile/trip-companions-pane.tsx
index ca3022811..7f7376b43 100644
--- a/lib/components/user/mobility-profile/trip-companions-pane.tsx
+++ b/lib/components/user/mobility-profile/trip-companions-pane.tsx
@@ -1,57 +1,63 @@
-import { Ban } from '@styled-icons/fa-solid/Ban'
-import { connect } from 'react-redux'
-import {
-  ControlLabel,
-  FormControl,
-  FormGroup,
-  HelpBlock,
-  ProgressBar,
-  Radio
-} from 'react-bootstrap'
-import { Field, FormikProps } from 'formik'
-import { FormattedMessage, useIntl } from 'react-intl'
-import { Prompt } from 'react-router'
-// @ts-expect-error FormikErrorFocus does not support TypeScript yet.
-import FormikErrorFocus from 'formik-error-focus'
-import React, { Component, FormEventHandler } from 'react'
-import styled from 'styled-components'
-import type { IntlShape, WrappedComponentProps } from 'react-intl'
-
-import * as userActions from '../../../actions/user'
-import { AppReduxState } from '../../../util/state-types'
-import { FieldSet } from '../styled'
-import { getBaseColor, RED_ON_WHITE } from '../../util/colors'
-import { getErrorStates } from '../../../util/ui'
-import { ItineraryExistence, MonitoredTrip } from '../types'
-import InvisibleA11yLabel from '../../util/invisible-a11y-label'
-
-type Props = WrappedComponentProps &
-  FormikProps<MonitoredTrip> & {
-    canceled: boolean
-  }
+import { FormikProps } from 'formik'
+import React, { useCallback } from 'react'
+import type { WrappedComponentProps } from 'react-intl'
+
+import { MonitoredTrip } from '../types'
+
+import CompanionSelector, { Option } from './companion-selector'
+
+type Props = WrappedComponentProps & FormikProps<MonitoredTrip>
 
 /**
  * Pane for showing/setting trip companions and observers.
  */
 const TripCompanions = (props: Props): JSX.Element => {
   console.log(props)
+
+  const handleCompanionChange = useCallback(
+    (option: Option) => {
+      props.setFieldValue('companion', option ? option.value : null)
+    },
+    [props]
+  )
+
+  const handleObserversChange = useCallback(
+    (options: Option[]) => {
+      props.setFieldValue(
+        'observers',
+        (options || []).map((option) => option.value)
+      )
+    },
+    [props]
+  )
+
   return (
     <div>
       <p>
-        Primary traveler: {props.primary ? props.primary.email : 'None set'}
+        Primary traveler:{' '}
+        <strong>
+          {props.values.primary ? props.values.primary.email : 'Myself'}
+        </strong>
+      </p>
+      <p>
+        Companion on this trip:
+        <CompanionSelector
+          excludedUsers={props.values.observers}
+          onChange={handleCompanionChange}
+          selectedCompanions={props.values.companion}
+        />
+      </p>
+      <p>
+        Observers:
+        <CompanionSelector
+          excludedUsers={[props.values.companion]}
+          multi
+          onChange={handleObserversChange}
+          selectedCompanions={props.values.observers}
+        />
       </p>
-      <p>Companions: {props.companions ? props.companions.length : 'None'}</p>
-      <p>Observers: {props.observers ? props.observers.length : 'None'}</p>
     </div>
   )
 }
 
-// Connect to redux store
-
-const mapStateToProps = (state: AppReduxState) => {
-  return {}
-}
-
-const mapDispatchToProps = {}
-
-export default connect(mapStateToProps, mapDispatchToProps)(TripCompanions)
+export default TripCompanions

From 3559218bab70409ecfca74ec0197b3942c269bbd Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Mon, 18 Nov 2024 20:26:43 -0500
Subject: [PATCH 04/29] refactor(TripCompanionPane): Unwrap props

---
 .../mobility-profile/trip-companions-pane.tsx | 37 ++++++++++---------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/lib/components/user/mobility-profile/trip-companions-pane.tsx b/lib/components/user/mobility-profile/trip-companions-pane.tsx
index 7f7376b43..b7de510c6 100644
--- a/lib/components/user/mobility-profile/trip-companions-pane.tsx
+++ b/lib/components/user/mobility-profile/trip-companions-pane.tsx
@@ -8,52 +8,53 @@ import CompanionSelector, { Option } from './companion-selector'
 
 type Props = WrappedComponentProps & FormikProps<MonitoredTrip>
 
+function optionValue(option: Option) {
+  return option?.value
+}
+
 /**
  * Pane for showing/setting trip companions and observers.
  */
-const TripCompanions = (props: Props): JSX.Element => {
-  console.log(props)
-
+const TripCompanions = ({
+  setFieldValue,
+  values: trip
+}: Props): JSX.Element => {
   const handleCompanionChange = useCallback(
     (option: Option) => {
-      props.setFieldValue('companion', option ? option.value : null)
+      setFieldValue('companion', optionValue(option))
     },
-    [props]
+    [setFieldValue]
   )
 
   const handleObserversChange = useCallback(
     (options: Option[]) => {
-      props.setFieldValue(
-        'observers',
-        (options || []).map((option) => option.value)
-      )
+      setFieldValue('observers', (options || []).map(optionValue))
     },
-    [props]
+    [setFieldValue]
   )
 
+  const { companion, observers, primary } = trip
+
   return (
     <div>
       <p>
-        Primary traveler:{' '}
-        <strong>
-          {props.values.primary ? props.values.primary.email : 'Myself'}
-        </strong>
+        Primary traveler: <strong>{primary ? primary.email : 'Myself'}</strong>
       </p>
       <p>
         Companion on this trip:
         <CompanionSelector
-          excludedUsers={props.values.observers}
+          excludedUsers={observers}
           onChange={handleCompanionChange}
-          selectedCompanions={props.values.companion}
+          selectedCompanions={companion}
         />
       </p>
       <p>
         Observers:
         <CompanionSelector
-          excludedUsers={[props.values.companion]}
+          excludedUsers={[companion]}
           multi
           onChange={handleObserversChange}
-          selectedCompanions={props.values.observers}
+          selectedCompanions={observers}
         />
       </p>
     </div>

From 89bc8e035f7c551d76484c13b728db169c688118 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Mon, 18 Nov 2024 20:43:48 -0500
Subject: [PATCH 05/29] refactor(CompanionSelector): Disable users used
 elsewhere

---
 .../user/mobility-profile/companion-selector.tsx       | 10 +++++++---
 .../user/mobility-profile/trip-companions-pane.tsx     |  1 +
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/lib/components/user/mobility-profile/companion-selector.tsx b/lib/components/user/mobility-profile/companion-selector.tsx
index a735c0f5c..e605e84fc 100644
--- a/lib/components/user/mobility-profile/companion-selector.tsx
+++ b/lib/components/user/mobility-profile/companion-selector.tsx
@@ -1,6 +1,6 @@
 import { connect } from 'react-redux'
 import { QueryParamChangeEvent } from '@opentripplanner/trip-form/lib/types'
-import React, { lazy, Suspense } from 'react'
+import React, { lazy, Suspense, useCallback } from 'react'
 
 import { AppReduxState } from '../../util/state-types'
 import { CompanionInfo, User } from '../types'
@@ -36,11 +36,9 @@ const CompanionSelector = ({
   onChange: (e: QueryParamChangeEvent) => void
   selectedCompanions?: CompanionInfo | CompanionInfo[]
 }): JSX.Element => {
-  const excludedEmails = excludedUsers.filter(notNull).map(({ email }) => email)
   const companionOptions = (loggedInUser?.relatedUsers || [])
     .filter(notNull)
     .filter(({ status = '' }) => status === 'CONFIRMED')
-    .filter(({ email }) => !excludedEmails.includes(email))
     .map(makeOption)
   const companionValues = multi
     ? selectedCompanions?.filter(notNull).map(makeOption)
@@ -48,11 +46,17 @@ const CompanionSelector = ({
     ? makeOption(selectedCompanions)
     : null
 
+  const isOptionDisabled = useCallback(
+    (option: Option) => excludedUsers.includes(option?.value),
+    [excludedUsers]
+  )
+
   return (
     <Suspense fallback={<span>...</span>}>
       <Select
         isClearable
         isMulti={multi}
+        isOptionDisabled={isOptionDisabled}
         onChange={onChange}
         options={companionOptions}
         value={companionValues}
diff --git a/lib/components/user/mobility-profile/trip-companions-pane.tsx b/lib/components/user/mobility-profile/trip-companions-pane.tsx
index b7de510c6..acc43e30f 100644
--- a/lib/components/user/mobility-profile/trip-companions-pane.tsx
+++ b/lib/components/user/mobility-profile/trip-companions-pane.tsx
@@ -9,6 +9,7 @@ import CompanionSelector, { Option } from './companion-selector'
 type Props = WrappedComponentProps & FormikProps<MonitoredTrip>
 
 function optionValue(option: Option) {
+  if (!option) return null
   return option?.value
 }
 

From 9b2e61a5a4690912ddf2ab5203f677a7ee287714 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Tue, 19 Nov 2024 17:24:51 -0500
Subject: [PATCH 06/29] refactor(TripCompanionsPane): Disable companion
 selection if trip was planned by other

---
 .../user/mobility-profile/companion-selector.tsx           | 3 +++
 .../user/mobility-profile/trip-companions-pane.tsx         | 7 ++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/lib/components/user/mobility-profile/companion-selector.tsx b/lib/components/user/mobility-profile/companion-selector.tsx
index e605e84fc..342da5055 100644
--- a/lib/components/user/mobility-profile/companion-selector.tsx
+++ b/lib/components/user/mobility-profile/companion-selector.tsx
@@ -24,12 +24,14 @@ function makeOption(companion: CompanionInfo) {
 }
 
 const CompanionSelector = ({
+  disabled,
   excludedUsers = [],
   loggedInUser,
   multi = false,
   onChange,
   selectedCompanions
 }: {
+  disabled?: boolean
   excludedUsers?: CompanionInfo[]
   loggedInUser?: User
   multi?: boolean
@@ -55,6 +57,7 @@ const CompanionSelector = ({
     <Suspense fallback={<span>...</span>}>
       <Select
         isClearable
+        isDisabled={disabled}
         isMulti={multi}
         isOptionDisabled={isOptionDisabled}
         onChange={onChange}
diff --git a/lib/components/user/mobility-profile/trip-companions-pane.tsx b/lib/components/user/mobility-profile/trip-companions-pane.tsx
index acc43e30f..6abedc4ee 100644
--- a/lib/components/user/mobility-profile/trip-companions-pane.tsx
+++ b/lib/components/user/mobility-profile/trip-companions-pane.tsx
@@ -36,14 +36,18 @@ const TripCompanions = ({
 
   const { companion, observers, primary } = trip
 
+  const didIPlanThisTrip = !primary
+
   return (
     <div>
       <p>
-        Primary traveler: <strong>{primary ? primary.email : 'Myself'}</strong>
+        Primary traveler:{' '}
+        <strong>{didIPlanThisTrip ? 'Myself' : primary.email}</strong>
       </p>
       <p>
         Companion on this trip:
         <CompanionSelector
+          disabled={!didIPlanThisTrip}
           excludedUsers={observers}
           onChange={handleCompanionChange}
           selectedCompanions={companion}
@@ -52,6 +56,7 @@ const TripCompanions = ({
       <p>
         Observers:
         <CompanionSelector
+          disabled={!didIPlanThisTrip}
           excludedUsers={[companion]}
           multi
           onChange={handleObserversChange}

From c36f597329f1218e1164628d50bd4d6ec41a120e Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Tue, 19 Nov 2024 18:28:53 -0500
Subject: [PATCH 07/29] refactor(util/user): Extract code to get user from
 email

---
 lib/actions/apiV2.js                             | 12 ++++++++----
 lib/components/form/advanced-settings-panel.tsx  | 16 ++++++----------
 .../user/mobility-profile/companions-pane.tsx    |  5 +++--
 lib/util/user.js                                 |  5 +++++
 4 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/lib/actions/apiV2.js b/lib/actions/apiV2.js
index 931080be7..0b3c3b720 100644
--- a/lib/actions/apiV2.js
+++ b/lib/actions/apiV2.js
@@ -9,7 +9,11 @@ import clone from 'clone'
 import coreUtils from '@opentripplanner/core-utils'
 
 import { checkForRouteModeOverride } from '../util/config'
-import { convertToPlace, getPersistenceMode } from '../util/user'
+import {
+  convertToPlace,
+  getPersistenceMode,
+  getUserWithEmail
+} from '../util/user'
 import { FETCH_STATUS } from '../util/constants'
 import {
   generateModeSettingValues,
@@ -1063,10 +1067,10 @@ export function routingQuery(searchId = null, updateSearchInReducer) {
       ...currentQuery,
       numItineraries: numItineraries || getDefaultNumItineraries(config)
     }
-    if (config.mobilityProfile) {
+    if (config.mobilityProfile && loggedInUser) {
       baseQuery.mobilityProfile =
-        currentQuery.mobilityProfile ||
-        loggedInUser?.mobilityProfile?.mobilityMode
+        getUserWithEmail(loggedInUser.dependentsInfo, currentQuery.forEmail)
+          ?.mobilityMode || loggedInUser.mobilityProfile?.mobilityMode
     }
     // Generate combinations if the modes for query are not specified in the query
     // FIXME: BICYCLE_RENT does not appear in this list unless TRANSIT is also enabled.
diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx
index 5b9281c11..c6318b011 100644
--- a/lib/components/form/advanced-settings-panel.tsx
+++ b/lib/components/form/advanced-settings-panel.tsx
@@ -172,11 +172,7 @@ const AdvancedSettingsPanel = ({
   const intl = useIntl()
   const [closingBySave, setClosingBySave] = useState(false)
   const [selectedMobilityProfile, setSelectedMobilityProfile] =
-    useState<string>(
-      currentQuery.mobilityProfile ||
-        loggedInUser?.mobilityProfile?.mobilityMode ||
-        ''
-    )
+    useState<string>(currentQuery.forEmail || loggedInUser?.email)
   const dependents = useMemo(
     () => loggedInUser?.dependents || [],
     [loggedInUser]
@@ -304,19 +300,19 @@ const AdvancedSettingsPanel = ({
               label={intl.formatMessage({
                 id: 'components.MobilityProfile.dropdownLabel'
               })}
-              name="mobilityProfile"
+              name="forEmail"
               onChange={(e) => {
-                setSelectedMobilityProfile(e.mobilityProfile as string)
+                setSelectedMobilityProfile(e.forEmail as string)
                 setQueryParam(e)
               }}
               options={[
                 {
                   text: 'Myself',
-                  value: loggedInUser.mobilityProfile?.mobilityMode || ''
+                  value: loggedInUser?.email
                 },
-                ...(loggedInUser.dependentsInfo?.map((user) => ({
+                ...(loggedInUser?.dependentsInfo?.map((user) => ({
                   text: user.name || user.email,
-                  value: user.mobilityMode || ''
+                  value: user.email
                 })) || [])
               ]}
               value={selectedMobilityProfile}
diff --git a/lib/components/user/mobility-profile/companions-pane.tsx b/lib/components/user/mobility-profile/companions-pane.tsx
index d189b36eb..51a1a6e95 100644
--- a/lib/components/user/mobility-profile/companions-pane.tsx
+++ b/lib/components/user/mobility-profile/companions-pane.tsx
@@ -7,6 +7,7 @@ import React, { useCallback, useState } from 'react'
 import styled from 'styled-components'
 
 import { CompanionInfo, User } from '../types'
+import { getUserWithEmail } from '../../../util/user'
 import { StyledIconWrapper } from '../../util/styledIcon'
 import { UnstyledButton } from '../../util/unstyled-button'
 import AddEmailForm from '../common/add-email-form'
@@ -57,7 +58,7 @@ const CompanionRow = ({
       window.confirm(
         intl.formatMessage(
           { id: 'components.CompanionsPane.confirmDeleteCompanion' },
-          { email: email }
+          { email }
         )
       )
     ) {
@@ -127,7 +128,7 @@ const CompanionsPane = ({
   const handleAddNewEmail = useCallback(
     async ({ newEmail }, { resetForm }) => {
       // Submit the new email if it is not already listed
-      if (!companions.find((comp) => comp.email === newEmail)) {
+      if (!getUserWithEmail(companions, newEmail)) {
         await updateCompanions([
           ...companions,
           {
diff --git a/lib/util/user.js b/lib/util/user.js
index ec571227b..b6b864ed4 100644
--- a/lib/util/user.js
+++ b/lib/util/user.js
@@ -264,3 +264,8 @@ export function getPlaceMainText(place, intl) {
     ? toSentenceCase(getFormattedPlaces(place.type, intl))
     : place.name || place.address
 }
+
+/** Helper for matching the email field. */
+export function getUserWithEmail(users, email) {
+  return users?.find((user) => user.email === email)
+}

From 04fe8ccd1e0e246f9dae2703a72b5de5d7589b2e Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Tue, 19 Nov 2024 18:54:04 -0500
Subject: [PATCH 08/29] feat(SavedTripScreen): Populate primary and companion
 traveler upon save.

---
 .../user/monitored-trip/saved-trip-screen.js     | 16 +++++++++++++++-
 lib/components/user/types.ts                     |  3 ++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/lib/components/user/monitored-trip/saved-trip-screen.js b/lib/components/user/monitored-trip/saved-trip-screen.js
index 12c47b3e0..9c4bb3001 100644
--- a/lib/components/user/monitored-trip/saved-trip-screen.js
+++ b/lib/components/user/monitored-trip/saved-trip-screen.js
@@ -16,6 +16,7 @@ import {
   getItineraryDefaultMonitoredDays
 } from '../../../util/itinerary'
 import { getActiveItineraries, getActiveSearch } from '../../../util/state'
+import { getUserWithEmail } from '../../../util/user'
 import { RETURN_TO_CURRENT_ROUTE } from '../../../util/ui'
 import { TRIPS_PATH } from '../../../util/constants'
 import AccountPage from '../account-page'
@@ -59,21 +60,33 @@ class SavedTripScreen extends Component {
    * Initializes a monitored trip object from the props.
    */
   _createMonitoredTrip = () => {
-    const { homeTimezone, itinerary, loggedInUser, queryParams } = this.props
+    const { currentQuery, homeTimezone, itinerary, loggedInUser, queryParams } =
+      this.props
     const monitoredDays = getItineraryDefaultMonitoredDays(
       itinerary,
       homeTimezone
     )
     const { otp2QueryParams, ...otherItineraryProps } = itinerary
+
+    const primaryTraveler = getUserWithEmail(
+      loggedInUser.dependentsInfo,
+      currentQuery.forEmail
+    )
+
     return {
       ...arrayToDayFields(monitoredDays),
       arrivalVarianceMinutesThreshold: 5,
+      // If someone else is the primary traveler, then I am the companion.
+      companion: primaryTraveler
+        ? { email: loggedInUser.email, status: 'CONFIRMED' }
+        : null,
       departureVarianceMinutesThreshold: 5,
       excludeFederalHolidays: true,
       isActive: true,
       itinerary: copyAndRemoveRouteModeOverrides(otherItineraryProps),
       leadTimeInMinutes: 30,
       otp2QueryParams,
+      primary: primaryTraveler,
       // when creating a monitored trip, the query params will be changed on the
       // backend so that the modes parameter will reflect the modes seen in the
       // itinerary
@@ -282,6 +295,7 @@ const mapStateToProps = (state, ownProps) => {
   const tripId = ownProps.match.params.id
   const { disableSingleItineraryDays } = state.otp.config
   return {
+    currentQuery: state.otp.currentQuery,
     disableSingleItineraryDays,
     homeTimezone: state.otp.config.homeTimezone,
     isCreating: tripId === 'new',
diff --git a/lib/components/user/types.ts b/lib/components/user/types.ts
index 26f257faa..4cc921176 100644
--- a/lib/components/user/types.ts
+++ b/lib/components/user/types.ts
@@ -81,6 +81,7 @@ export interface JourneyState {
 
 export type MonitoredTrip = Record<DaysOfWeek, boolean> & {
   arrivalVarianceMinutesThreshold: number
+  companion?: CompanionInfo
   departureVarianceMinutesThreshold: number
   excludeFederalHolidays?: boolean
   id: string
@@ -91,7 +92,7 @@ export type MonitoredTrip = Record<DaysOfWeek, boolean> & {
   leadTimeInMinutes: number
   observers?: CompanionInfo[]
   otp2QueryParams: Record<string, unknown>
-  primary?: CompanionInfo[]
+  primary?: DependentInfo
   queryParams: Record<string, unknown>
   secondary?: CompanionInfo
   tripName: string

From 73447d9a9505ddede91c917e9f9a316f0f168ac3 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Tue, 19 Nov 2024 19:05:37 -0500
Subject: [PATCH 09/29] refactor(TripCompanionPane): Relax criterion for
 setting observers

---
 lib/components/user/mobility-profile/trip-companions-pane.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/lib/components/user/mobility-profile/trip-companions-pane.tsx b/lib/components/user/mobility-profile/trip-companions-pane.tsx
index 6abedc4ee..1cd7637f8 100644
--- a/lib/components/user/mobility-profile/trip-companions-pane.tsx
+++ b/lib/components/user/mobility-profile/trip-companions-pane.tsx
@@ -56,7 +56,6 @@ const TripCompanions = ({
       <p>
         Observers:
         <CompanionSelector
-          disabled={!didIPlanThisTrip}
           excludedUsers={[companion]}
           multi
           onChange={handleObserversChange}

From 10b13aaa9bc8f784cf9b368e4d676762f403353a Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 20 Nov 2024 14:09:34 -0500
Subject: [PATCH 10/29] refactor(actions/user): Usenew endpoint for retrieving
 trips

---
 lib/actions/user.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/actions/user.js b/lib/actions/user.js
index b6588a198..65b7a402f 100644
--- a/lib/actions/user.js
+++ b/lib/actions/user.js
@@ -122,7 +122,7 @@ export function fetchMonitoredTrips() {
     const { accessToken, apiBaseUrl, apiKey } = getMiddlewareVariables(
       getState()
     )
-    const requestUrl = `${apiBaseUrl}${API_MONITORED_TRIP_PATH}`
+    const requestUrl = `${apiBaseUrl}${API_MONITORED_TRIP_PATH}/gettrips`
 
     const { data: trips, status } = await secureFetch(
       requestUrl,

From ccd4d57d57dabd63791cc1d50aeda548e5de03a9 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 20 Nov 2024 14:12:16 -0500
Subject: [PATCH 11/29] refactor(SavedTripScreen): Add readonly prop

---
 .../mobility-profile/trip-companions-pane.tsx     | 15 +++++++++++----
 .../user/monitored-trip/saved-trip-editor.tsx     |  1 +
 .../user/monitored-trip/saved-trip-screen.js      |  1 +
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/lib/components/user/mobility-profile/trip-companions-pane.tsx b/lib/components/user/mobility-profile/trip-companions-pane.tsx
index 1cd7637f8..ce7260dd7 100644
--- a/lib/components/user/mobility-profile/trip-companions-pane.tsx
+++ b/lib/components/user/mobility-profile/trip-companions-pane.tsx
@@ -6,7 +6,10 @@ import { MonitoredTrip } from '../types'
 
 import CompanionSelector, { Option } from './companion-selector'
 
-type Props = WrappedComponentProps & FormikProps<MonitoredTrip>
+type Props = WrappedComponentProps &
+  FormikProps<MonitoredTrip> & {
+    isReadOnly: boolean
+  }
 
 function optionValue(option: Option) {
   if (!option) return null
@@ -17,6 +20,7 @@ function optionValue(option: Option) {
  * Pane for showing/setting trip companions and observers.
  */
 const TripCompanions = ({
+  isReadOnly,
   setFieldValue,
   values: trip
 }: Props): JSX.Element => {
@@ -36,26 +40,29 @@ const TripCompanions = ({
 
   const { companion, observers, primary } = trip
 
-  const didIPlanThisTrip = !primary
+  const iAmThePrimaryTraveler = !primary
 
   return (
     <div>
       <p>
         Primary traveler:{' '}
-        <strong>{didIPlanThisTrip ? 'Myself' : primary.email}</strong>
+        <strong>{iAmThePrimaryTraveler ? 'Myself' : primary.email}</strong>
       </p>
       <p>
+        {/* TODO: a11y label */}
         Companion on this trip:
         <CompanionSelector
-          disabled={!didIPlanThisTrip}
+          disabled={isReadOnly || !iAmThePrimaryTraveler}
           excludedUsers={observers}
           onChange={handleCompanionChange}
           selectedCompanions={companion}
         />
       </p>
       <p>
+        {/* TODO: a11y label */}
         Observers:
         <CompanionSelector
+          disabled={isReadOnly}
           excludedUsers={[companion]}
           multi
           onChange={handleObserversChange}
diff --git a/lib/components/user/monitored-trip/saved-trip-editor.tsx b/lib/components/user/monitored-trip/saved-trip-editor.tsx
index cbca0a9dd..76a3dd343 100644
--- a/lib/components/user/monitored-trip/saved-trip-editor.tsx
+++ b/lib/components/user/monitored-trip/saved-trip-editor.tsx
@@ -15,6 +15,7 @@ import TripNotFound from './trip-not-found'
 interface Props {
   hasMobilityProfile: boolean
   isCreating: boolean
+  isReadOnly: boolean
   onCancel: () => void
   panes: Record<string, ComponentType>
   values: MonitoredTrip
diff --git a/lib/components/user/monitored-trip/saved-trip-screen.js b/lib/components/user/monitored-trip/saved-trip-screen.js
index 9c4bb3001..ba71ed1cb 100644
--- a/lib/components/user/monitored-trip/saved-trip-screen.js
+++ b/lib/components/user/monitored-trip/saved-trip-screen.js
@@ -256,6 +256,7 @@ class SavedTripScreen extends Component {
                   {...props}
                   hasMobilityProfile={Boolean(loggedInUser.mobilityProfile)}
                   isCreating={isCreating}
+                  isReadOnly={monitoredTrip.userId !== loggedInUser.id}
                   notificationChannel={loggedInUser.notificationChannel}
                   onCancel={
                     isCreating ? this._goToTripPlanner : this._goToSavedTrips

From d7794a69c7b9c12d3e47b0b5dafc0b2c3bf095fe Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 21 Nov 2024 09:35:27 -0500
Subject: [PATCH 12/29] refactor(actions/user): Use existing endpoint for
 fetching trips

---
 lib/actions/user.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/actions/user.js b/lib/actions/user.js
index 65b7a402f..b6588a198 100644
--- a/lib/actions/user.js
+++ b/lib/actions/user.js
@@ -122,7 +122,7 @@ export function fetchMonitoredTrips() {
     const { accessToken, apiBaseUrl, apiKey } = getMiddlewareVariables(
       getState()
     )
-    const requestUrl = `${apiBaseUrl}${API_MONITORED_TRIP_PATH}/gettrips`
+    const requestUrl = `${apiBaseUrl}${API_MONITORED_TRIP_PATH}`
 
     const { data: trips, status } = await secureFetch(
       requestUrl,

From 0a112e7c0ec784b030b6ce593ea184f95f4bb0f3 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 21 Nov 2024 09:41:04 -0500
Subject: [PATCH 13/29] refactor(SavedTripScreen): Check that monitoredTrip is
 defined for read-only state

---
 lib/components/user/monitored-trip/saved-trip-screen.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/components/user/monitored-trip/saved-trip-screen.js b/lib/components/user/monitored-trip/saved-trip-screen.js
index ba71ed1cb..88c7d41b2 100644
--- a/lib/components/user/monitored-trip/saved-trip-screen.js
+++ b/lib/components/user/monitored-trip/saved-trip-screen.js
@@ -256,7 +256,7 @@ class SavedTripScreen extends Component {
                   {...props}
                   hasMobilityProfile={Boolean(loggedInUser.mobilityProfile)}
                   isCreating={isCreating}
-                  isReadOnly={monitoredTrip.userId !== loggedInUser.id}
+                  isReadOnly={monitoredTrip?.userId !== loggedInUser.id}
                   notificationChannel={loggedInUser.notificationChannel}
                   onCancel={
                     isCreating ? this._goToTripPlanner : this._goToSavedTrips

From 78e06d467a7b2c06b035dfe485f8136ee1632cb8 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 21 Nov 2024 13:11:46 -0500
Subject: [PATCH 14/29] improvement(StackedPanesWithSave): Hide extra/okay btns
 if readonly

---
 .../user/monitored-trip/saved-trip-editor.tsx |  1 +
 .../user/stacked-panes-with-save.tsx          | 34 +++++++++++--------
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/lib/components/user/monitored-trip/saved-trip-editor.tsx b/lib/components/user/monitored-trip/saved-trip-editor.tsx
index b3128f7c2..183f2cf34 100644
--- a/lib/components/user/monitored-trip/saved-trip-editor.tsx
+++ b/lib/components/user/monitored-trip/saved-trip-editor.tsx
@@ -79,6 +79,7 @@ const SavedTripEditor = (props: Props): JSX.Element => {
               ? { content: <DeleteForm tripId={monitoredTrip.id} /> }
               : undefined
           }
+          isReadOnly={props.isReadOnly}
           onCancel={onCancel}
           panes={paneSequence}
           title={title}
diff --git a/lib/components/user/stacked-panes-with-save.tsx b/lib/components/user/stacked-panes-with-save.tsx
index 596132ba4..018a25e47 100644
--- a/lib/components/user/stacked-panes-with-save.tsx
+++ b/lib/components/user/stacked-panes-with-save.tsx
@@ -8,6 +8,7 @@ import StackedPanes, { Props as StackedPanesProps } from './stacked-panes'
 
 interface Props extends StackedPanesProps {
   extraButton?: ButtonType
+  isReadOnly?: boolean
   onCancel: () => void
 }
 
@@ -18,6 +19,7 @@ interface Props extends StackedPanesProps {
  */
 const StackedPanesWithSave = ({
   extraButton,
+  isReadOnly,
   onCancel,
   panes,
   title
@@ -49,21 +51,23 @@ const StackedPanesWithSave = ({
               <FormattedMessage id="common.forms.cancel" />
             )
         }}
-        extraButton={extraButton}
-        okayButton={{
-          disabled: buttonClicked === 'okay',
-          onClick: () => {
-            // Some browsers need this to happen after the formik action finishes firing
-            setTimeout(() => setButtonClicked('okay'), 10)
-          },
-          text:
-            buttonClicked === 'okay' ? (
-              <InlineLoading />
-            ) : (
-              <FormattedMessage id="components.StackedPaneDisplay.savePreferences" />
-            ),
-          type: 'submit'
-        }}
+        extraButton={!isReadOnly && extraButton}
+        okayButton={
+          !isReadOnly && {
+            disabled: buttonClicked === 'okay',
+            onClick: () => {
+              // Some browsers need this to happen after the formik action finishes firing
+              setTimeout(() => setButtonClicked('okay'), 10)
+            },
+            text:
+              buttonClicked === 'okay' ? (
+                <InlineLoading />
+              ) : (
+                <FormattedMessage id="components.StackedPaneDisplay.savePreferences" />
+              ),
+            type: 'submit'
+          }
+        }
       />
     </>
   )

From 29a03df2e8e8427f63ea86a38c00c9850fd223d2 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 21 Nov 2024 13:56:10 -0500
Subject: [PATCH 15/29] refactor(Trip panes): Disable all inputs if readonly
 state

---
 .../user/common/dropdown-options.tsx          |  3 +
 .../user/monitored-trip/trip-basics-pane.tsx  | 26 ++++++--
 .../trip-notifications-pane.tsx               |  7 +-
 .../user/monitored-trip/trip-status.js        | 65 ++++++++++---------
 4 files changed, 65 insertions(+), 36 deletions(-)

diff --git a/lib/components/user/common/dropdown-options.tsx b/lib/components/user/common/dropdown-options.tsx
index 70667915b..839570cde 100644
--- a/lib/components/user/common/dropdown-options.tsx
+++ b/lib/components/user/common/dropdown-options.tsx
@@ -7,6 +7,7 @@ interface SelectProps {
   Control?: ComponentType
   children: ReactNode
   defaultValue?: string | number | boolean
+  disabled?: boolean
   label?: ReactNode
   name: string
   onChange?: ChangeEventHandler
@@ -19,6 +20,7 @@ export const Select = ({
   Control = FormControl,
   children,
   defaultValue,
+  disabled,
   label,
   name,
   onChange
@@ -27,6 +29,7 @@ export const Select = ({
     as: Control,
     componentClass: 'select',
     defaultValue,
+    disabled,
     id: name,
     name,
     onChange
diff --git a/lib/components/user/monitored-trip/trip-basics-pane.tsx b/lib/components/user/monitored-trip/trip-basics-pane.tsx
index dafafcd00..ee8f9ae02 100644
--- a/lib/components/user/monitored-trip/trip-basics-pane.tsx
+++ b/lib/components/user/monitored-trip/trip-basics-pane.tsx
@@ -34,7 +34,7 @@ import FormattedDayOfWeekCompact from '../../util/formatted-day-of-week-compact'
 import FormattedValidationError from '../../util/formatted-validation-error'
 import InvisibleA11yLabel from '../../util/invisible-a11y-label'
 
-import { MonitoredDayCircle } from './trip-monitored-days'
+import MonitoredDays, { MonitoredDayCircle } from './trip-monitored-days'
 import TripStatus from './trip-status'
 import TripSummary from './trip-duration-summary'
 
@@ -48,6 +48,7 @@ type TripBasicsProps = WrappedComponentProps &
     clearItineraryExistence: () => void
     disableSingleItineraryDays?: boolean
     isCreating: boolean
+    isReadOnly: boolean
     itineraryExistence?: ItineraryExistence
   }
 
@@ -138,16 +139,23 @@ const RenderAvailableDays = ({
   errorSelectingDays,
   finalItineraryExistence,
   isCreating,
+  isReadOnly,
   monitoredTrip
 }: {
   errorCheckingTrip: boolean
   errorSelectingDays?: 'error' | null
   finalItineraryExistence?: ItineraryExistence
   isCreating: boolean
+  isReadOnly: boolean
   monitoredTrip: MonitoredTrip
 }) => {
   const intl = useIntl()
   const baseColor = getBaseColor()
+
+  if (isReadOnly) {
+    return <MonitoredDays days={dayFieldsToArray(monitoredTrip)} />
+  }
+
   return (
     <>
       {errorCheckingTrip && (
@@ -316,6 +324,7 @@ class TripBasicsPane extends Component<TripBasicsProps, State> {
       errors,
       intl,
       isCreating,
+      isReadOnly,
       isSubmitting,
       itineraryExistence,
       values: monitoredTrip
@@ -361,7 +370,9 @@ class TripBasicsPane extends Component<TripBasicsProps, State> {
 
           {/* Do not show trip status when saving trip for the first time
               (it doesn't exist in backend yet). */}
-          {!isCreating && <TripStatus monitoredTrip={monitoredTrip} />}
+          {!isCreating && (
+            <TripStatus isReadOnly={isReadOnly} monitoredTrip={monitoredTrip} />
+          )}
           <TripSummary monitoredTrip={monitoredTrip} />
 
           <FormGroup validationState={errorStates.tripName}>
@@ -372,6 +383,7 @@ class TripBasicsPane extends Component<TripBasicsProps, State> {
             <Field
               aria-invalid={!!errorStates.tripName}
               as={FormControl}
+              disabled={isReadOnly}
               id="tripName"
               name="tripName"
             />
@@ -392,6 +404,7 @@ class TripBasicsPane extends Component<TripBasicsProps, State> {
                 errorSelectingDays={selectOneDayError}
                 finalItineraryExistence={finalItineraryExistence}
                 isCreating={isCreating}
+                isReadOnly={isReadOnly}
                 monitoredTrip={monitoredTrip}
               />
             </FormGroup>
@@ -403,7 +416,7 @@ class TripBasicsPane extends Component<TripBasicsProps, State> {
               <Radio
                 checked={!isOneTime}
                 // FIXME: Temporary solution until itinerary existence check is fixed.
-                disabled={errorCheckingTrip}
+                disabled={errorCheckingTrip || isReadOnly}
                 onChange={this._handleRecurringTrip}
               >
                 <FormattedMessage id="components.TripBasicsPane.recurringEachWeek" />
@@ -414,11 +427,16 @@ class TripBasicsPane extends Component<TripBasicsProps, State> {
                     errorCheckingTrip={errorCheckingTrip}
                     finalItineraryExistence={finalItineraryExistence}
                     isCreating={isCreating}
+                    isReadOnly={isReadOnly}
                     monitoredTrip={monitoredTrip}
                   />
                 </>
               )}
-              <Radio checked={isOneTime} onChange={this._handleOneTimeTrip}>
+              <Radio
+                checked={isOneTime}
+                disabled={isReadOnly}
+                onChange={this._handleOneTimeTrip}
+              >
                 <FormattedMessage
                   id="components.TripBasicsPane.onlyOnDate"
                   values={{ date: itinerary.startTime }}
diff --git a/lib/components/user/monitored-trip/trip-notifications-pane.tsx b/lib/components/user/monitored-trip/trip-notifications-pane.tsx
index d02bbf52c..0ba8f4f27 100644
--- a/lib/components/user/monitored-trip/trip-notifications-pane.tsx
+++ b/lib/components/user/monitored-trip/trip-notifications-pane.tsx
@@ -45,6 +45,7 @@ const Summary = styled.summary`
 `
 
 interface Props extends FormikProps<MonitoredTrip> {
+  isReadOnly: boolean
   notificationChannel: string
 }
 
@@ -65,7 +66,7 @@ class TripNotificationsPane extends Component<Props> {
   }
 
   render(): JSX.Element {
-    const { notificationChannel, values } = this.props
+    const { isReadOnly, notificationChannel, values } = this.props
     const areNotificationsDisabled =
       notificationChannel === 'none' || !notificationChannel?.length
     // Define a common trip delay field for simplicity, set to the smallest between the
@@ -122,6 +123,7 @@ class TripNotificationsPane extends Component<Props> {
               <SettingsList>
                 <li>
                   <Select
+                    disabled={isReadOnly}
                     label={
                       <FormattedMessage id="components.TripNotificationsPane.realtimeAlertFlagged" />
                     }
@@ -132,6 +134,7 @@ class TripNotificationsPane extends Component<Props> {
                 </li>
                 <li>
                   <Select
+                    disabled={isReadOnly}
                     label={
                       <FormattedMessage id="components.TripNotificationsPane.altRouteRecommended" />
                     }
@@ -146,6 +149,7 @@ class TripNotificationsPane extends Component<Props> {
                   </label>
                   <FormControl
                     componentClass="select"
+                    disabled={isReadOnly}
                     id="commonDelayThreshold"
                     // Special event handler, hence not using <Select> as above.
                     onChange={this._handleDelayThresholdChange}
@@ -168,6 +172,7 @@ class TripNotificationsPane extends Component<Props> {
             <SettingsList>
               <li>
                 <Select
+                  disabled={isReadOnly}
                   label={
                     <FormattedMessage id="components.TripNotificationsPane.monitorThisTrip" />
                   }
diff --git a/lib/components/user/monitored-trip/trip-status.js b/lib/components/user/monitored-trip/trip-status.js
index 27ffcfb8f..03bf2b30a 100644
--- a/lib/components/user/monitored-trip/trip-status.js
+++ b/lib/components/user/monitored-trip/trip-status.js
@@ -70,6 +70,7 @@ function MonitoredTripAlerts({ alerts }) {
  */
 function TripStatus({
   confirmAndDeleteUserMonitoredTrip,
+  isReadOnly,
   planNewTripFromMonitoredTrip,
   renderData,
   togglePauseTrip,
@@ -89,37 +90,39 @@ function TripStatus({
         <MonitoredTripAlerts alerts={renderData.alerts} />
       )}
       {/* Footer buttons */}
-      <Panel.Body>
-        {renderData.shouldRenderToggleSnoozeTripButton && (
-          <FooterButton
-            glyphIcon={renderData.toggleSnoozeTripButtonGlyphIcon}
-            onClick={toggleSnoozeTrip}
-            text={renderData.toggleSnoozeTripButtonText}
-          />
-        )}
-        {renderData.shouldRenderTogglePauseTripButton && (
-          <FooterButton
-            glyphIcon={renderData.togglePauseTripButtonGlyphIcon}
-            onClick={togglePauseTrip}
-            text={renderData.togglePauseTripButtonText}
-          />
-        )}
-        {renderData.shouldRenderDeleteTripButton && (
-          <FooterButton
-            bsStyle="error"
-            glyphIcon="trash"
-            onClick={confirmAndDeleteUserMonitoredTrip}
-            text={<FormattedMessage id="components.TripStatus.deleteTrip" />}
-          />
-        )}
-        {renderData.shouldRenderPlanNewTripButton && (
-          <FooterButton
-            glyphIcon="search"
-            onClick={planNewTripFromMonitoredTrip}
-            text={<FormattedMessage id="components.TripStatus.planNewTrip" />}
-          />
-        )}
-      </Panel.Body>
+      {!isReadOnly && (
+        <Panel.Body>
+          {renderData.shouldRenderToggleSnoozeTripButton && (
+            <FooterButton
+              glyphIcon={renderData.toggleSnoozeTripButtonGlyphIcon}
+              onClick={toggleSnoozeTrip}
+              text={renderData.toggleSnoozeTripButtonText}
+            />
+          )}
+          {renderData.shouldRenderTogglePauseTripButton && (
+            <FooterButton
+              glyphIcon={renderData.togglePauseTripButtonGlyphIcon}
+              onClick={togglePauseTrip}
+              text={renderData.togglePauseTripButtonText}
+            />
+          )}
+          {renderData.shouldRenderDeleteTripButton && (
+            <FooterButton
+              bsStyle="error"
+              glyphIcon="trash"
+              onClick={confirmAndDeleteUserMonitoredTrip}
+              text={<FormattedMessage id="components.TripStatus.deleteTrip" />}
+            />
+          )}
+          {renderData.shouldRenderPlanNewTripButton && (
+            <FooterButton
+              glyphIcon="search"
+              onClick={planNewTripFromMonitoredTrip}
+              text={<FormattedMessage id="components.TripStatus.planNewTrip" />}
+            />
+          )}
+        </Panel.Body>
+      )}
     </Panel>
   )
 }

From 5af66eeb6a68cfd22a05d75aca31fcb06dffc465 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 21 Nov 2024 15:35:12 -0500
Subject: [PATCH 16/29] improvement(TripCompanionsPane): Display dependent info
 for trip where I'm a companion.

---
 .../form/advanced-settings-panel.tsx          |  3 +-
 .../mobility-profile/trip-companions-pane.tsx | 49 ++++++++++++++++---
 lib/util/user.js                              |  5 ++
 3 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx
index df69d1194..7d425f1f9 100644
--- a/lib/components/form/advanced-settings-panel.tsx
+++ b/lib/components/form/advanced-settings-panel.tsx
@@ -33,6 +33,7 @@ import { AppReduxState } from '../../util/state-types'
 import { blue, getBaseColor } from '../util/colors'
 import { ComponentContext } from '../../util/contexts'
 import { generateModeSettingValues } from '../../util/api'
+import { getDependentName } from '../../util/user'
 import { User } from '../user/types'
 import Link from '../util/link'
 
@@ -321,7 +322,7 @@ const AdvancedSettingsPanel = ({
                   value: loggedInUser?.email
                 },
                 ...(loggedInUser?.dependentsInfo?.map((user) => ({
-                  text: user.name || user.email,
+                  text: getDependentName(user),
                   value: user.email
                 })) || [])
               ]}
diff --git a/lib/components/user/mobility-profile/trip-companions-pane.tsx b/lib/components/user/mobility-profile/trip-companions-pane.tsx
index ce7260dd7..92aaa16a8 100644
--- a/lib/components/user/mobility-profile/trip-companions-pane.tsx
+++ b/lib/components/user/mobility-profile/trip-companions-pane.tsx
@@ -1,14 +1,20 @@
+import { connect } from 'react-redux'
 import { FormikProps } from 'formik'
-import React, { useCallback } from 'react'
-import type { WrappedComponentProps } from 'react-intl'
+import { useIntl, WrappedComponentProps } from 'react-intl'
+import React, { useCallback, useEffect } from 'react'
 
-import { MonitoredTrip } from '../types'
+import * as userActions from '../../../actions/user'
+import { AppReduxState } from '../../../util/state-types'
+import { DependentInfo, MonitoredTrip, User } from '../types'
+import { getDependentName } from '../../../util/user'
 
 import CompanionSelector, { Option } from './companion-selector'
 
 type Props = WrappedComponentProps &
   FormikProps<MonitoredTrip> & {
+    getDependentUserInfo: (args: string[]) => DependentInfo[]
     isReadOnly: boolean
+    loggedInUser: User
   }
 
 function optionValue(option: Option) {
@@ -20,7 +26,9 @@ function optionValue(option: Option) {
  * Pane for showing/setting trip companions and observers.
  */
 const TripCompanions = ({
+  getDependentUserInfo,
   isReadOnly,
+  loggedInUser,
   setFieldValue,
   values: trip
 }: Props): JSX.Element => {
@@ -38,15 +46,32 @@ const TripCompanions = ({
     [setFieldValue]
   )
 
+  const intl = useIntl()
+
+  useEffect(() => {
+    if (loggedInUser?.dependents.length > 0) {
+      getDependentUserInfo(loggedInUser?.dependents, intl)
+    }
+  }, [loggedInUser.dependents, getDependentUserInfo, intl])
+
   const { companion, observers, primary } = trip
 
-  const iAmThePrimaryTraveler = !primary
+  const iAmThePrimaryTraveler =
+    (!primary && trip.userId === loggedInUser?.id) ||
+    primary?.userId === loggedInUser?.id
+
+  const primaryTraveler = iAmThePrimaryTraveler
+    ? 'Myself'
+    : primary
+    ? primary.email
+    : getDependentName(
+        loggedInUser?.dependentsInfo?.find((d) => d.userId === trip.userId)
+      )
 
   return (
     <div>
       <p>
-        Primary traveler:{' '}
-        <strong>{iAmThePrimaryTraveler ? 'Myself' : primary.email}</strong>
+        Primary traveler: <strong>{primaryTraveler}</strong>
       </p>
       <p>
         {/* TODO: a11y label */}
@@ -73,4 +98,14 @@ const TripCompanions = ({
   )
 }
 
-export default TripCompanions
+// connect to the redux store
+
+const mapStateToProps = (state: AppReduxState) => ({
+  loggedInUser: state.user.loggedInUser
+})
+
+const mapDispatchToProps = {
+  getDependentUserInfo: userActions.getDependentUserInfo
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(TripCompanions)
diff --git a/lib/util/user.js b/lib/util/user.js
index b6b864ed4..e909be808 100644
--- a/lib/util/user.js
+++ b/lib/util/user.js
@@ -269,3 +269,8 @@ export function getPlaceMainText(place, intl) {
 export function getUserWithEmail(users, email) {
   return users?.find((user) => user.email === email)
 }
+
+/** Helper for displaying a dependent user name with fallback on email. */
+export function getDependentName(dependent) {
+  return dependent?.name || dependent?.email
+}

From a8cba12d17844c678343c673482546b7cd0d16bc Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 21 Nov 2024 16:06:46 -0500
Subject: [PATCH 17/29] refactor(TripCompanionsPane): Implement i18n

---
 i18n/en-US.yml                                      |  4 ++++
 i18n/fr.yml                                         |  4 ++++
 .../user/mobility-profile/trip-companions-pane.tsx  | 13 ++++++-------
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index c44db0bd3..6cf4994cd 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -638,6 +638,10 @@ components:
     tripNotAvailableOnDay: Trip not available on {repeatedDay}
     unsavedChangesExistingTrip: You haven't saved your trip yet. If you leave, changes will be lost.
     unsavedChangesNewTrip: You haven't saved your new trip yet. If you leave, it will be lost.
+  TripCompanionsPane:
+    companionLabel: "Companion on this trip:"
+    observersLabel: "Observers watching this trip:"
+    primaryLabel: "Primary traveler: "
   TripNotificationsPane:
     advancedSettings: Advanced settings
     altRouteRecommended: An alternative route or transfer point is recommended
diff --git a/i18n/fr.yml b/i18n/fr.yml
index 9719c7b86..f24f6da71 100644
--- a/i18n/fr.yml
+++ b/i18n/fr.yml
@@ -670,6 +670,10 @@ components:
     unsavedChangesNewTrip: >-
       Vous n'avez pas encore enregistré votre nouveau trajet. Si vous annulez,
       ce trajet sera perdu.
+  TripCompanionsPane:
+    companionLabel: "Accompagnateurs sur ce trajet :"
+    observersLabel: "Observateurs suivant ce trajet :"
+    primaryLabel: "Voyageur principal : "
   TripNotificationsPane:
     advancedSettings: Paramètres avancés
     altRouteRecommended: Un·e autre trajet ou correspondance est conseillé·e
diff --git a/lib/components/user/mobility-profile/trip-companions-pane.tsx b/lib/components/user/mobility-profile/trip-companions-pane.tsx
index 92aaa16a8..9057623c6 100644
--- a/lib/components/user/mobility-profile/trip-companions-pane.tsx
+++ b/lib/components/user/mobility-profile/trip-companions-pane.tsx
@@ -1,6 +1,6 @@
 import { connect } from 'react-redux'
+import { FormattedMessage, useIntl, WrappedComponentProps } from 'react-intl'
 import { FormikProps } from 'formik'
-import { useIntl, WrappedComponentProps } from 'react-intl'
 import React, { useCallback, useEffect } from 'react'
 
 import * as userActions from '../../../actions/user'
@@ -61,7 +61,7 @@ const TripCompanions = ({
     primary?.userId === loggedInUser?.id
 
   const primaryTraveler = iAmThePrimaryTraveler
-    ? 'Myself'
+    ? intl.formatMessage({ id: 'components.MobilityProfile.myself' })
     : primary
     ? primary.email
     : getDependentName(
@@ -71,11 +71,11 @@ const TripCompanions = ({
   return (
     <div>
       <p>
-        Primary traveler: <strong>{primaryTraveler}</strong>
+        <FormattedMessage id="components.TripCompanionsPane.primaryLabel" />
+        <strong>{primaryTraveler}</strong>
       </p>
       <p>
-        {/* TODO: a11y label */}
-        Companion on this trip:
+        <FormattedMessage id="components.TripCompanionsPane.companionLabel" />
         <CompanionSelector
           disabled={isReadOnly || !iAmThePrimaryTraveler}
           excludedUsers={observers}
@@ -84,8 +84,7 @@ const TripCompanions = ({
         />
       </p>
       <p>
-        {/* TODO: a11y label */}
-        Observers:
+        <FormattedMessage id="components.TripCompanionsPane.observersLabel" />
         <CompanionSelector
           disabled={isReadOnly}
           excludedUsers={[companion]}

From dcbdf32452194750b2a24e1bd5e82fdd978b33da Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Thu, 21 Nov 2024 16:18:03 -0500
Subject: [PATCH 18/29] improvement(SavedTripList): Hide pause button on
 read-only trips

---
 .../user/monitored-trip/saved-trip-list.tsx   |  5 ++-
 .../user/monitored-trip/trip-summary-pane.tsx | 33 +++++++++++--------
 lib/components/user/types.ts                  |  1 +
 3 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/lib/components/user/monitored-trip/saved-trip-list.tsx b/lib/components/user/monitored-trip/saved-trip-list.tsx
index 03e33f80f..618c736c8 100644
--- a/lib/components/user/monitored-trip/saved-trip-list.tsx
+++ b/lib/components/user/monitored-trip/saved-trip-list.tsx
@@ -40,6 +40,7 @@ interface ItemOwnProps {
 
 interface ItemProps extends ItemOwnProps {
   intl: IntlShape
+  isReadOnly: boolean
   renderData: any
   togglePauseTrip: (trip: MonitoredTrip, intl: IntlShape) => void
 }
@@ -97,7 +98,7 @@ class TripListItem extends Component<ItemProps, ItemState> {
   }
 
   render() {
-    const { intl, renderData, trip } = this.props
+    const { intl, isReadOnly, renderData, trip } = this.props
     const { itinerary } = trip
     const { legs } = itinerary
     const { alerts, shouldRenderAlerts } = renderData
@@ -146,6 +147,7 @@ class TripListItem extends Component<ItemProps, ItemState> {
           <TripSummaryPane
             from={from}
             handleTogglePauseMonitoring={this._handleTogglePauseMonitoring}
+            isReadOnly={isReadOnly}
             monitoredTrip={trip}
             pendingRequest={this.state.pendingRequest}
             to={to}
@@ -173,6 +175,7 @@ class TripListItem extends Component<ItemProps, ItemState> {
 // connect to the redux store
 const itemMapStateToProps = (state: AppReduxState, { trip }: ItemOwnProps) => {
   return {
+    isReadOnly: trip.userId !== state.user.loggedInUser.id,
     renderData: getRenderData({
       monitoredTrip: trip
     })
diff --git a/lib/components/user/monitored-trip/trip-summary-pane.tsx b/lib/components/user/monitored-trip/trip-summary-pane.tsx
index 3e1ccef51..5ce8b904b 100644
--- a/lib/components/user/monitored-trip/trip-summary-pane.tsx
+++ b/lib/components/user/monitored-trip/trip-summary-pane.tsx
@@ -114,6 +114,7 @@ const ToggleNotificationButton = styled.button`
 const TripSummaryPane = ({
   from,
   handleTogglePauseMonitoring,
+  isReadOnly,
   monitoredTrip,
   pendingRequest,
   to
@@ -224,20 +225,24 @@ const TripSummaryPane = ({
                     values={{ leadTimeInMinutes }}
                   />
                 )}
-                <br />
-                <ToggleNotificationButton
-                  disabled={pendingRequest === 'pause'}
-                  onClick={testHandle}
-                >
-                  {pendingRequest === 'pause' ? (
-                    /* Make loader fit */
-                    <InlineLoading />
-                  ) : monitoredTrip.isActive ? (
-                    <FormattedMessage id="components.SavedTripList.pause" />
-                  ) : (
-                    <FormattedMessage id="components.SavedTripList.resume" />
-                  )}
-                </ToggleNotificationButton>
+                {!isReadOnly && (
+                  <>
+                    <br />
+                    <ToggleNotificationButton
+                      disabled={pendingRequest === 'pause'}
+                      onClick={testHandle}
+                    >
+                      {pendingRequest === 'pause' ? (
+                        /* Make loader fit */
+                        <InlineLoading />
+                      ) : monitoredTrip.isActive ? (
+                        <FormattedMessage id="components.SavedTripList.pause" />
+                      ) : (
+                        <FormattedMessage id="components.SavedTripList.resume" />
+                      )}
+                    </ToggleNotificationButton>
+                  </>
+                )}
               </span>
             </TripDetailWithIcon>
           </TripDetailsList>
diff --git a/lib/components/user/types.ts b/lib/components/user/types.ts
index 4cc921176..3f5f210a3 100644
--- a/lib/components/user/types.ts
+++ b/lib/components/user/types.ts
@@ -102,6 +102,7 @@ export type MonitoredTrip = Record<DaysOfWeek, boolean> & {
 export interface MonitoredTripProps {
   from?: Place
   handleTogglePauseMonitoring?: () => void
+  isReadOnly?: booleean
   monitoredTrip: MonitoredTrip
   pendingRequest?: boolean | string
   to?: Place

From 8f33c04a1d464326a59a85d7f4f58a00cb2c582d Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 22 Nov 2024 11:59:34 -0500
Subject: [PATCH 19/29] refactor: Fix types

---
 .../mobility-profile/companion-selector.tsx   | 18 +++++------
 .../mobility-profile/trip-companions-pane.tsx | 32 ++++++++++++-------
 .../user/stacked-panes-with-save.tsx          | 32 ++++++++++---------
 lib/components/user/types.ts                  |  2 +-
 4 files changed, 48 insertions(+), 36 deletions(-)

diff --git a/lib/components/user/mobility-profile/companion-selector.tsx b/lib/components/user/mobility-profile/companion-selector.tsx
index 342da5055..b6de4a08d 100644
--- a/lib/components/user/mobility-profile/companion-selector.tsx
+++ b/lib/components/user/mobility-profile/companion-selector.tsx
@@ -1,8 +1,7 @@
 import { connect } from 'react-redux'
-import { QueryParamChangeEvent } from '@opentripplanner/trip-form/lib/types'
 import React, { lazy, Suspense, useCallback } from 'react'
 
-import { AppReduxState } from '../../util/state-types'
+import { AppReduxState } from '../../../util/state-types'
 import { CompanionInfo, User } from '../types'
 
 export interface Option {
@@ -10,13 +9,14 @@ export interface Option {
   value: CompanionInfo
 }
 
+// @ts-expect-error: No types for react-select.
 const Select = lazy(() => import('react-select'))
 
-function notNull(item) {
+function notNull(item: unknown) {
   return !!item
 }
 
-function makeOption(companion: CompanionInfo) {
+function makeOption(companion?: CompanionInfo) {
   return {
     label: companion?.nickname || companion?.email,
     value: companion
@@ -32,11 +32,11 @@ const CompanionSelector = ({
   selectedCompanions
 }: {
   disabled?: boolean
-  excludedUsers?: CompanionInfo[]
+  excludedUsers?: (CompanionInfo | undefined)[]
   loggedInUser?: User
   multi?: boolean
-  onChange: (e: QueryParamChangeEvent) => void
-  selectedCompanions?: CompanionInfo | CompanionInfo[]
+  onChange: (e: Option | Option[]) => void
+  selectedCompanions?: (CompanionInfo | undefined)[]
 }): JSX.Element => {
   const companionOptions = (loggedInUser?.relatedUsers || [])
     .filter(notNull)
@@ -44,8 +44,8 @@ const CompanionSelector = ({
     .map(makeOption)
   const companionValues = multi
     ? selectedCompanions?.filter(notNull).map(makeOption)
-    : selectedCompanions !== null
-    ? makeOption(selectedCompanions)
+    : selectedCompanions?.[0]
+    ? makeOption(selectedCompanions[0])
     : null
 
   const isOptionDisabled = useCallback(
diff --git a/lib/components/user/mobility-profile/trip-companions-pane.tsx b/lib/components/user/mobility-profile/trip-companions-pane.tsx
index 9057623c6..8681adfa3 100644
--- a/lib/components/user/mobility-profile/trip-companions-pane.tsx
+++ b/lib/components/user/mobility-profile/trip-companions-pane.tsx
@@ -1,18 +1,23 @@
 import { connect } from 'react-redux'
-import { FormattedMessage, useIntl, WrappedComponentProps } from 'react-intl'
+import {
+  FormattedMessage,
+  IntlShape,
+  useIntl,
+  WrappedComponentProps
+} from 'react-intl'
 import { FormikProps } from 'formik'
 import React, { useCallback, useEffect } from 'react'
 
 import * as userActions from '../../../actions/user'
 import { AppReduxState } from '../../../util/state-types'
-import { DependentInfo, MonitoredTrip, User } from '../types'
 import { getDependentName } from '../../../util/user'
+import { MonitoredTrip, User } from '../types'
 
 import CompanionSelector, { Option } from './companion-selector'
 
 type Props = WrappedComponentProps &
   FormikProps<MonitoredTrip> & {
-    getDependentUserInfo: (args: string[]) => DependentInfo[]
+    getDependentUserInfo: (userIds: string[], intl: IntlShape) => void
     isReadOnly: boolean
     loggedInUser: User
   }
@@ -33,26 +38,31 @@ const TripCompanions = ({
   values: trip
 }: Props): JSX.Element => {
   const handleCompanionChange = useCallback(
-    (option: Option) => {
-      setFieldValue('companion', optionValue(option))
+    (option: Option | Option[]) => {
+      if ('label' in option) {
+        setFieldValue('companion', optionValue(option))
+      }
     },
     [setFieldValue]
   )
 
   const handleObserversChange = useCallback(
-    (options: Option[]) => {
-      setFieldValue('observers', (options || []).map(optionValue))
+    (options: Option | Option[]) => {
+      if ('length' in options) {
+        setFieldValue('observers', (options || []).map(optionValue))
+      }
     },
     [setFieldValue]
   )
 
   const intl = useIntl()
+  const dependents = loggedInUser?.dependents
 
   useEffect(() => {
-    if (loggedInUser?.dependents.length > 0) {
-      getDependentUserInfo(loggedInUser?.dependents, intl)
+    if (dependents && dependents.length > 0) {
+      getDependentUserInfo(dependents, intl)
     }
-  }, [loggedInUser.dependents, getDependentUserInfo, intl])
+  }, [dependents, getDependentUserInfo, intl])
 
   const { companion, observers, primary } = trip
 
@@ -80,7 +90,7 @@ const TripCompanions = ({
           disabled={isReadOnly || !iAmThePrimaryTraveler}
           excludedUsers={observers}
           onChange={handleCompanionChange}
-          selectedCompanions={companion}
+          selectedCompanions={[companion]}
         />
       </p>
       <p>
diff --git a/lib/components/user/stacked-panes-with-save.tsx b/lib/components/user/stacked-panes-with-save.tsx
index 018a25e47..5304a01ff 100644
--- a/lib/components/user/stacked-panes-with-save.tsx
+++ b/lib/components/user/stacked-panes-with-save.tsx
@@ -51,22 +51,24 @@ const StackedPanesWithSave = ({
               <FormattedMessage id="common.forms.cancel" />
             )
         }}
-        extraButton={!isReadOnly && extraButton}
+        extraButton={isReadOnly ? undefined : extraButton}
         okayButton={
-          !isReadOnly && {
-            disabled: buttonClicked === 'okay',
-            onClick: () => {
-              // Some browsers need this to happen after the formik action finishes firing
-              setTimeout(() => setButtonClicked('okay'), 10)
-            },
-            text:
-              buttonClicked === 'okay' ? (
-                <InlineLoading />
-              ) : (
-                <FormattedMessage id="components.StackedPaneDisplay.savePreferences" />
-              ),
-            type: 'submit'
-          }
+          isReadOnly
+            ? undefined
+            : {
+                disabled: buttonClicked === 'okay',
+                onClick: () => {
+                  // Some browsers need this to happen after the formik action finishes firing
+                  setTimeout(() => setButtonClicked('okay'), 10)
+                },
+                text:
+                  buttonClicked === 'okay' ? (
+                    <InlineLoading />
+                  ) : (
+                    <FormattedMessage id="components.StackedPaneDisplay.savePreferences" />
+                  ),
+                type: 'submit'
+              }
         }
       />
     </>
diff --git a/lib/components/user/types.ts b/lib/components/user/types.ts
index 3f5f210a3..6babd41f7 100644
--- a/lib/components/user/types.ts
+++ b/lib/components/user/types.ts
@@ -102,7 +102,7 @@ export type MonitoredTrip = Record<DaysOfWeek, boolean> & {
 export interface MonitoredTripProps {
   from?: Place
   handleTogglePauseMonitoring?: () => void
-  isReadOnly?: booleean
+  isReadOnly?: boolean
   monitoredTrip: MonitoredTrip
   pendingRequest?: boolean | string
   to?: Place

From bca35c5432c9ba94823291c5bf0d72075f59e722 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Tue, 26 Nov 2024 15:01:21 -0500
Subject: [PATCH 20/29] fix(TripCompanionsPane): Handle deleting companions.

---
 .../user/mobility-profile/trip-companions-pane.tsx     | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/lib/components/user/mobility-profile/trip-companions-pane.tsx b/lib/components/user/mobility-profile/trip-companions-pane.tsx
index 8681adfa3..46200de71 100644
--- a/lib/components/user/mobility-profile/trip-companions-pane.tsx
+++ b/lib/components/user/mobility-profile/trip-companions-pane.tsx
@@ -22,7 +22,7 @@ type Props = WrappedComponentProps &
     loggedInUser: User
   }
 
-function optionValue(option: Option) {
+function optionValue(option: Option | null) {
   if (!option) return null
   return option?.value
 }
@@ -38,8 +38,8 @@ const TripCompanions = ({
   values: trip
 }: Props): JSX.Element => {
   const handleCompanionChange = useCallback(
-    (option: Option | Option[]) => {
-      if ('label' in option) {
+    (option: Option | Option[] | null) => {
+      if (!option || 'label' in option) {
         setFieldValue('companion', optionValue(option))
       }
     },
@@ -47,8 +47,8 @@ const TripCompanions = ({
   )
 
   const handleObserversChange = useCallback(
-    (options: Option | Option[]) => {
-      if ('length' in options) {
+    (options: Option | Option[] | null) => {
+      if (!options || 'length' in options) {
         setFieldValue('observers', (options || []).map(optionValue))
       }
     },

From cc4b7a7cce0b248107f0c0dc1b0f213028770c7c Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 11 Dec 2024 11:40:38 -0500
Subject: [PATCH 21/29] refactor(CompanionRefactor): Format invalid
 companion/observer references

---
 .../mobility-profile/companion-selector.tsx   | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/lib/components/user/mobility-profile/companion-selector.tsx b/lib/components/user/mobility-profile/companion-selector.tsx
index b6de4a08d..fbd5bb415 100644
--- a/lib/components/user/mobility-profile/companion-selector.tsx
+++ b/lib/components/user/mobility-profile/companion-selector.tsx
@@ -3,6 +3,7 @@ import React, { lazy, Suspense, useCallback } from 'react'
 
 import { AppReduxState } from '../../../util/state-types'
 import { CompanionInfo, User } from '../types'
+import StatusBadge from '../../util/status-badge'
 
 export interface Option {
   label: string
@@ -23,6 +24,22 @@ function makeOption(companion?: CompanionInfo) {
   }
 }
 
+function isConfirmed({ status = '' }: CompanionInfo) {
+  return status === 'CONFIRMED'
+}
+
+function formatOptionLabel(option: Option) {
+  if (!isConfirmed(option.value)) {
+    return (
+      <>
+        {option.label} <StatusBadge status={option.value.status} />
+      </>
+    )
+  } else {
+    return option.label
+  }
+}
+
 const CompanionSelector = ({
   disabled,
   excludedUsers = [],
@@ -40,7 +57,7 @@ const CompanionSelector = ({
 }): JSX.Element => {
   const companionOptions = (loggedInUser?.relatedUsers || [])
     .filter(notNull)
-    .filter(({ status = '' }) => status === 'CONFIRMED')
+    .filter(isConfirmed)
     .map(makeOption)
   const companionValues = multi
     ? selectedCompanions?.filter(notNull).map(makeOption)
@@ -56,6 +73,7 @@ const CompanionSelector = ({
   return (
     <Suspense fallback={<span>...</span>}>
       <Select
+        formatOptionLabel={formatOptionLabel}
         isClearable
         isDisabled={disabled}
         isMulti={multi}

From 4a406cd13e136914efcb13dfeac8b232fc4f218c Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 11 Dec 2024 12:22:11 -0500
Subject: [PATCH 22/29] refactor(AdvancedSettingsPanel): Remove unused ui link

---
 i18n/fr.yml                                     |  3 +--
 lib/components/form/advanced-settings-panel.tsx | 12 +-----------
 2 files changed, 2 insertions(+), 13 deletions(-)

diff --git a/i18n/fr.yml b/i18n/fr.yml
index 4e7bdb55b..6e3fa0b0e 100644
--- a/i18n/fr.yml
+++ b/i18n/fr.yml
@@ -358,8 +358,7 @@ components:
       mobilityLimitations: "Handicaps moteurs : "
       planTripDescription: >-
         Vous pouvez rechercher des trajets adaptés au profil mobilité des
-        personnes que vous accompagnez. Pour ajouter des personnes
-        accompagnatrices, allez dans <manageLink>Préférences</manageLink>.
+        personnes que vous accompagnez.
       visionLimitations: "Handicaps visuels : "
     dropdownLabel: "Profil à utiliser :"
     intro: >-
diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx
index ccf3ea25d..2510c3b88 100644
--- a/lib/components/form/advanced-settings-panel.tsx
+++ b/lib/components/form/advanced-settings-panel.tsx
@@ -35,7 +35,6 @@ import { ComponentContext } from '../../util/contexts'
 import { generateModeSettingValues } from '../../util/api'
 import { getDependentName } from '../../util/user'
 import { User } from '../user/types'
-import Link from '../util/link'
 
 import {
   addCustomSettingLabels,
@@ -301,16 +300,7 @@ const AdvancedSettingsPanel = ({
           <VisibleSubheader>
             <FormattedMessage id="components.MobilityProfile.MobilityPane.header" />
           </VisibleSubheader>
-          <FormattedMessage
-            id="components.MobilityProfile.MobilityPane.planTripDescription"
-            values={{
-              manageLink: (linkText: string) => (
-                <UnderlinedLink to="/account/settings">
-                  {linkText}
-                </UnderlinedLink>
-              )
-            }}
-          />
+          <FormattedMessage id="components.MobilityProfile.MobilityPane.planTripDescription" />
           <MobilityProfileDropdown
             label={intl.formatMessage({
               id: 'components.MobilityProfile.dropdownLabel'

From b51a07743a8fd84d87057c1a81e91a0712cc8f75 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 11 Dec 2024 12:30:44 -0500
Subject: [PATCH 23/29] refactor(CompanionSelector): Fix types

---
 lib/components/user/mobility-profile/companion-selector.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/components/user/mobility-profile/companion-selector.tsx b/lib/components/user/mobility-profile/companion-selector.tsx
index fbd5bb415..4b909b89b 100644
--- a/lib/components/user/mobility-profile/companion-selector.tsx
+++ b/lib/components/user/mobility-profile/companion-selector.tsx
@@ -24,7 +24,7 @@ function makeOption(companion?: CompanionInfo) {
   }
 }
 
-function isConfirmed({ status = '' }: CompanionInfo) {
+function isConfirmed({ status }: CompanionInfo) {
   return status === 'CONFIRMED'
 }
 

From bcba92673e222da4fa013da03ac928204722518a Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 20 Dec 2024 07:28:52 -0500
Subject: [PATCH 24/29] refactor(TripNotificationsPane): Replace indiv input
 disabled props with prop on parent fieldset.

---
 .../user/monitored-trip/trip-notifications-pane.tsx         | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/lib/components/user/monitored-trip/trip-notifications-pane.tsx b/lib/components/user/monitored-trip/trip-notifications-pane.tsx
index 0ba8f4f27..8c570ae84 100644
--- a/lib/components/user/monitored-trip/trip-notifications-pane.tsx
+++ b/lib/components/user/monitored-trip/trip-notifications-pane.tsx
@@ -104,7 +104,7 @@ class TripNotificationsPane extends Component<Props> {
           />
         ))
       notificationSettingsContent = (
-        <FieldSet>
+        <FieldSet disabled={isReadOnly}>
           {hasTransit ? (
             <>
               <legend>
@@ -123,7 +123,6 @@ class TripNotificationsPane extends Component<Props> {
               <SettingsList>
                 <li>
                   <Select
-                    disabled={isReadOnly}
                     label={
                       <FormattedMessage id="components.TripNotificationsPane.realtimeAlertFlagged" />
                     }
@@ -134,7 +133,6 @@ class TripNotificationsPane extends Component<Props> {
                 </li>
                 <li>
                   <Select
-                    disabled={isReadOnly}
                     label={
                       <FormattedMessage id="components.TripNotificationsPane.altRouteRecommended" />
                     }
@@ -149,7 +147,6 @@ class TripNotificationsPane extends Component<Props> {
                   </label>
                   <FormControl
                     componentClass="select"
-                    disabled={isReadOnly}
                     id="commonDelayThreshold"
                     // Special event handler, hence not using <Select> as above.
                     onChange={this._handleDelayThresholdChange}
@@ -172,7 +169,6 @@ class TripNotificationsPane extends Component<Props> {
             <SettingsList>
               <li>
                 <Select
-                  disabled={isReadOnly}
                   label={
                     <FormattedMessage id="components.TripNotificationsPane.monitorThisTrip" />
                   }

From 5cc84f0c028b92c4a96d04d85b457f7d972a4d30 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 20 Dec 2024 12:27:56 -0500
Subject: [PATCH 25/29] improvement(SavedTripEditor): Add a read-only banner.

---
 i18n/en-US.yml                                |  3 +
 i18n/fr.yml                                   |  3 +
 .../mobility-profile/trip-companions-pane.tsx |  2 +-
 .../mobility-profile/trip-readonly-pane.tsx   | 56 +++++++++++++++++++
 .../user/monitored-trip/saved-trip-editor.tsx |  8 ++-
 .../user/monitored-trip/saved-trip-screen.js  |  2 +
 6 files changed, 72 insertions(+), 2 deletions(-)
 create mode 100644 lib/components/user/mobility-profile/trip-readonly-pane.tsx

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index ea4b74aef..4b20cf3cf 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -533,6 +533,9 @@ components:
   SavedTripEditor:
     deleteSavedTrip: Delete saved trip
     editSavedTrip: Edit saved trip
+    readOnlyBanner: >-
+      {creator} created and added you to this trip. Therefore, you cannot make
+      changes.
     saveNewTrip: Save new trip
     travelCompanions: Travel companions
     tripInformation: Trip information
diff --git a/i18n/fr.yml b/i18n/fr.yml
index 6e3fa0b0e..ebaf3953d 100644
--- a/i18n/fr.yml
+++ b/i18n/fr.yml
@@ -554,6 +554,9 @@ components:
   SavedTripEditor:
     deleteSavedTrip: Supprimer ce trajet
     editSavedTrip: Modifier un trajet enregistré
+    readOnlyBanner: >-
+      {creator} a créé et vous a ajouté sur ce trajet. Vous ne pouvez donc pas
+      faire de modifications.
     saveNewTrip: Enregistrer un nouveau trajet
     travelCompanions: Accompagnateurs
     tripInformation: Informations sur le trajet
diff --git a/lib/components/user/mobility-profile/trip-companions-pane.tsx b/lib/components/user/mobility-profile/trip-companions-pane.tsx
index 46200de71..41cf19f6a 100644
--- a/lib/components/user/mobility-profile/trip-companions-pane.tsx
+++ b/lib/components/user/mobility-profile/trip-companions-pane.tsx
@@ -73,7 +73,7 @@ const TripCompanions = ({
   const primaryTraveler = iAmThePrimaryTraveler
     ? intl.formatMessage({ id: 'components.MobilityProfile.myself' })
     : primary
-    ? primary.email
+    ? primary.name || primary.email
     : getDependentName(
         loggedInUser?.dependentsInfo?.find((d) => d.userId === trip.userId)
       )
diff --git a/lib/components/user/mobility-profile/trip-readonly-pane.tsx b/lib/components/user/mobility-profile/trip-readonly-pane.tsx
new file mode 100644
index 000000000..af477a96c
--- /dev/null
+++ b/lib/components/user/mobility-profile/trip-readonly-pane.tsx
@@ -0,0 +1,56 @@
+import { Alert } from 'react-bootstrap'
+import { connect } from 'react-redux'
+import { FormattedMessage } from 'react-intl'
+import { FormikProps } from 'formik'
+import React from 'react'
+
+import { AppReduxState } from '../../../util/state-types'
+import { getDependentName } from '../../../util/user'
+import { MonitoredTrip, User } from '../types'
+
+type Props = FormikProps<MonitoredTrip> & {
+  isReadOnly: boolean
+  loggedInUser: User
+}
+
+/**
+ * Displays a banner for read-only state.
+ */
+const TripReadOnlyPane = ({
+  isReadOnly,
+  loggedInUser,
+  values: trip
+}: Props) => {
+  if (!isReadOnly) return null
+
+  const { companion, primary } = trip
+
+  const iAmThePrimaryTraveler =
+    (!primary && trip.userId === loggedInUser?.id) ||
+    primary?.userId === loggedInUser?.id
+
+  const creator = iAmThePrimaryTraveler
+    ? companion?.nickname || companion?.email
+    : primary
+    ? primary.name || primary.email
+    : getDependentName(
+        loggedInUser?.dependentsInfo?.find((d) => d.userId === trip.userId)
+      )
+
+  return (
+    <Alert bsStyle="warning" style={{ marginTop: '-30px' }}>
+      <FormattedMessage
+        id="components.SavedTripEditor.readOnlyBanner"
+        values={{ creator }}
+      />
+    </Alert>
+  )
+}
+
+// connect to the redux store
+
+const mapStateToProps = (state: AppReduxState) => ({
+  loggedInUser: state.user.loggedInUser
+})
+
+export default connect(mapStateToProps)(TripReadOnlyPane)
diff --git a/lib/components/user/monitored-trip/saved-trip-editor.tsx b/lib/components/user/monitored-trip/saved-trip-editor.tsx
index 183f2cf34..91ab0fa90 100644
--- a/lib/components/user/monitored-trip/saved-trip-editor.tsx
+++ b/lib/components/user/monitored-trip/saved-trip-editor.tsx
@@ -34,6 +34,10 @@ const SavedTripEditor = (props: Props): JSX.Element => {
 
   if (monitoredTrip) {
     const paneSequence: PaneAttributes[] = [
+      {
+        pane: panes.readOnlyAlert,
+        props
+      },
       {
         pane: panes.basics,
         props,
@@ -61,7 +65,9 @@ const SavedTripEditor = (props: Props): JSX.Element => {
       })
     }
 
-    const title = isCreating
+    const title = props.isReadOnly
+      ? intl.formatMessage({ id: 'otpUi.TripDetails.title' })
+      : isCreating
       ? intl.formatMessage({ id: 'components.SavedTripEditor.saveNewTrip' })
       : intl.formatMessage({ id: 'components.SavedTripEditor.editSavedTrip' })
 
diff --git a/lib/components/user/monitored-trip/saved-trip-screen.js b/lib/components/user/monitored-trip/saved-trip-screen.js
index a4b07ab0b..ac1985635 100644
--- a/lib/components/user/monitored-trip/saved-trip-screen.js
+++ b/lib/components/user/monitored-trip/saved-trip-screen.js
@@ -23,6 +23,7 @@ import AccountPage from '../account-page'
 import AwaitingScreen from '../awaiting-screen'
 import InvisibleA11yLabel from '../../util/invisible-a11y-label'
 import TripCompanionsPane from '../mobility-profile/trip-companions-pane'
+import TripReadonlyPane from '../mobility-profile/trip-readonly-pane'
 import withLoggedInUserSupport from '../with-logged-in-user-support'
 
 import SavedTripEditor from './saved-trip-editor'
@@ -134,6 +135,7 @@ class SavedTripScreen extends Component {
   _panes = {
     basics: TripBasicsPane,
     notifications: TripNotificationsPane,
+    readOnlyAlert: TripReadonlyPane,
     summary: TripSummaryPane,
     travelCompanions: TripCompanionsPane
   }

From 10551d8fc40922bee4d301d45eee33af8f8d3e56 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 20 Dec 2024 12:55:58 -0500
Subject: [PATCH 26/29] chore(i18n): Add exception for reused OTP-UI string

---
 i18n/i18n-exceptions.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/i18n/i18n-exceptions.json b/i18n/i18n-exceptions.json
index 9cb9f516a..a837e2e23 100644
--- a/i18n/i18n-exceptions.json
+++ b/i18n/i18n-exceptions.json
@@ -52,5 +52,6 @@
       "low-vision",
       "legally-blind"
     ]
-  }
+  },
+  "ignoredIds": ["otpUi.TripDetails.title"]
 }
\ No newline at end of file

From 6b8e1775ea625b318892f2ef6571a994eedabf19 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 20 Dec 2024 13:21:15 -0500
Subject: [PATCH 27/29] refactor(DropdownOptions): Delete unused disabled prop

---
 lib/components/user/common/dropdown-options.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/lib/components/user/common/dropdown-options.tsx b/lib/components/user/common/dropdown-options.tsx
index 839570cde..70667915b 100644
--- a/lib/components/user/common/dropdown-options.tsx
+++ b/lib/components/user/common/dropdown-options.tsx
@@ -7,7 +7,6 @@ interface SelectProps {
   Control?: ComponentType
   children: ReactNode
   defaultValue?: string | number | boolean
-  disabled?: boolean
   label?: ReactNode
   name: string
   onChange?: ChangeEventHandler
@@ -20,7 +19,6 @@ export const Select = ({
   Control = FormControl,
   children,
   defaultValue,
-  disabled,
   label,
   name,
   onChange
@@ -29,7 +27,6 @@ export const Select = ({
     as: Control,
     componentClass: 'select',
     defaultValue,
-    disabled,
     id: name,
     name,
     onChange

From e70e5562d3d8ac753399e9fe051a38b5af20bdd1 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Fri, 20 Dec 2024 13:27:31 -0500
Subject: [PATCH 28/29] refactor(TripCompanionsPane): Remove unneeded types

---
 .../mobility-profile/trip-companions-pane.tsx  | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/lib/components/user/mobility-profile/trip-companions-pane.tsx b/lib/components/user/mobility-profile/trip-companions-pane.tsx
index 41cf19f6a..9dcf51535 100644
--- a/lib/components/user/mobility-profile/trip-companions-pane.tsx
+++ b/lib/components/user/mobility-profile/trip-companions-pane.tsx
@@ -1,10 +1,5 @@
 import { connect } from 'react-redux'
-import {
-  FormattedMessage,
-  IntlShape,
-  useIntl,
-  WrappedComponentProps
-} from 'react-intl'
+import { FormattedMessage, IntlShape, useIntl } from 'react-intl'
 import { FormikProps } from 'formik'
 import React, { useCallback, useEffect } from 'react'
 
@@ -15,12 +10,11 @@ import { MonitoredTrip, User } from '../types'
 
 import CompanionSelector, { Option } from './companion-selector'
 
-type Props = WrappedComponentProps &
-  FormikProps<MonitoredTrip> & {
-    getDependentUserInfo: (userIds: string[], intl: IntlShape) => void
-    isReadOnly: boolean
-    loggedInUser: User
-  }
+type Props = FormikProps<MonitoredTrip> & {
+  getDependentUserInfo: (userIds: string[], intl: IntlShape) => void
+  isReadOnly: boolean
+  loggedInUser: User
+}
 
 function optionValue(option: Option | null) {
   if (!option) return null

From 55ed3b7b3d2078d4b4d04a25321067f689924fb4 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Mon, 23 Dec 2024 16:29:50 -0500
Subject: [PATCH 29/29] refactor(TripReadonlyPane): Tweak margins

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

diff --git a/lib/components/user/mobility-profile/trip-readonly-pane.tsx b/lib/components/user/mobility-profile/trip-readonly-pane.tsx
index af477a96c..125818bfe 100644
--- a/lib/components/user/mobility-profile/trip-readonly-pane.tsx
+++ b/lib/components/user/mobility-profile/trip-readonly-pane.tsx
@@ -38,7 +38,7 @@ const TripReadOnlyPane = ({
       )
 
   return (
-    <Alert bsStyle="warning" style={{ marginTop: '-30px' }}>
+    <Alert bsStyle="warning" style={{ margin: '-30px 0' }}>
       <FormattedMessage
         id="components.SavedTripEditor.readOnlyBanner"
         values={{ creator }}