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] 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