refactor: address PR feedback

i18n/en-US.yml

@@ -228,6 +228,7 @@ components:
     deleteCompanion: Delete {email}
     noCompanions: You do not have any existing travel companions.
     submitNewCompanion: Send invitation
+    title: Travel companions
   DateTimeOptions:
     arriveBy: Arrive by
     departAt: Depart at

lib/components/user/common/add-email-form.tsx

@@ -49,41 +49,39 @@ const AddEmailForm = ({
   onSubmit,
   placeholder,
   submitText
-}: Props): JSX.Element => {
-  return (
-    <Formik
-      initialValues={{ newEmail: '' }}
-      onSubmit={onSubmit}
-      validateOnBlur
-      validateOnChange={false}
-      validationSchema={emailValidationSchema}
-    >
-      {({ errors, isSubmitting, touched, values }) => {
-        const showError =
-          errors.newEmail && touched.newEmail && values.newEmail?.length > 0
-        return (
-          <FormGroup validationState={showError ? 'error' : null}>
-            <ControlLabel>{label}</ControlLabel>
-            <Controls>
-              <Form id={id} noValidate />
-              <Field
-                aria-invalid={showError}
-                aria-required
-                as={InlineInput}
-                form={id}
-                name="newEmail"
-                placeholder={placeholder}
-                type="email"
-              />
+}: Props): JSX.Element => (
+  <Formik
+    initialValues={{ newEmail: '' }}
+    onSubmit={onSubmit}
+    validateOnBlur
+    validateOnChange={false}
+    validationSchema={emailValidationSchema}
+  >
+    {({ errors, isSubmitting, touched, values }) => {
+      const showError =
+        errors.newEmail && touched.newEmail && values.newEmail?.length > 0
+      return (
+        <FormGroup validationState={showError ? 'error' : null}>
+          <ControlLabel>{label}</ControlLabel>
+          <Controls>
+            <Form id={id} noValidate />
+            <Field
+              aria-invalid={showError}
+              aria-required
+              as={InlineInput}
+              form={id}
+              name="newEmail"
+              placeholder={placeholder}
+              type="email"
+            />
 
-              <SubmitButton form={id}>{submitText}</SubmitButton>
-            </Controls>
-            <HelpBlock role="alert">{showError && 'Invalid email'}</HelpBlock>
-          </FormGroup>
-        )
-      }}
-    </Formik>
-  )
-}
+            <SubmitButton form={id}>{submitText}</SubmitButton>
+          </Controls>
+          <HelpBlock role="alert">{showError && 'Invalid email'}</HelpBlock>
+        </FormGroup>
+      )
+    }}
+  </Formik>
+)
 
 export default AddEmailForm

lib/components/user/existing-account-display.tsx

@@ -54,7 +54,7 @@ const ExistingAccountDisplay = (props: Props) => {
       hidden: !mobilityProfileEnabled,
       pane: CompanionsPane,
       props,
-      title: 'Travel companions'
+      title: <FormattedMessage id="components.CompanionsPane.title" />
     },
     {
       pane: NotificationPrefsPane,

lib/components/user/mobility-profile/companions-pane.tsx

@@ -1,5 +1,5 @@
 import { ControlLabel, FormGroup } from 'react-bootstrap'
-import { FormattedMessage, IntlShape, useIntl } from 'react-intl'
+import { FormattedMessage, useIntl } from 'react-intl'
 import { FormikProps } from 'formik'
 import { Trash } from '@styled-icons/fa-solid/Trash'
 import { User as UserIcon } from '@styled-icons/fa-solid/User'
@@ -15,41 +15,40 @@ import StatusBadge from '../../util/status-badge'
 import SubmitButton from '../../util/submit-button'
 
 const Companion = styled.li`
-  list-style-type: none;
-  display: flex;
   align-items: center;
+  display: flex;
   justify-content: space-between;
-  width: 100%;
+  list-style-type: none;
   margin-top: 20px;
+  width: 100%;
 `
 
 const CompanionList = styled.ul`
   margin-bottom: 30px;
 `
 
 const LeftGroup = styled.div`
-  display: flex;
   align-items: center;
+  display: flex;
   gap: 40px;
 `
 
 const RightGroup = styled.div`
-  display: flex;
   align-items: center;
+  display: flex;
   gap: 20px;
 `
 
 interface CompanionRowProps {
   companionInfo: CompanionInfo
-  intl: IntlShape
   onDelete: (email: string) => void
 }
 
 const CompanionRow = ({
   companionInfo,
-  intl,
   onDelete
 }: CompanionRowProps): JSX.Element => {
+  const intl = useIntl()
   const { email, status } = companionInfo
   const [disabled, setDisabled] = useState(false)
 
@@ -109,13 +108,13 @@ const CompanionsPane = ({
   setFieldValue,
   values: userData
 }: FormikProps<User>): JSX.Element => {
-  const { guardians: companions = [] } = userData
+  const { relatedUsers: companions = [] } = userData
   const formId = 'add-companion-form'
   const intl = useIntl()
 
   const updateCompanions = useCallback(
     async (newCompanions) => {
-      setFieldValue('guardians', newCompanions)
+      setFieldValue('relatedUsers', newCompanions)
 
       // Register the change (can include a submission).
       await handleChange({
@@ -176,7 +175,6 @@ const CompanionsPane = ({
             {companions.map((companion) => (
               <CompanionRow
                 companionInfo={companion}
-                intl={intl}
                 key={companion.email}
                 onDelete={handleDeleteEmail}
               />

lib/components/user/monitored-trip/saved-trip-editor.tsx

@@ -3,6 +3,7 @@ import React, { ComponentType } from 'react'
 
 import { BackButtonContent } from '../back-link'
 import { MonitoredTrip } from '../types'
+import { PaneAttributes } from '../stacked-panes'
 import { TRIPS_PATH } from '../../../util/constants'
 import DeleteForm from '../delete-form'
 import Link from '../../util/link'
@@ -31,17 +32,15 @@ const SavedTripEditor = (props: Props): JSX.Element => {
   const intl = useIntl()
 
   if (monitoredTrip) {
-    const paneSequence = [
+    const paneSequence: PaneAttributes[] = [
       {
-        collapsible: false,
         pane: panes.basics,
         props,
         title: (
           <FormattedMessage id="components.SavedTripEditor.tripInformation" />
         )
       },
       {
-        collapsible: false,
         pane: panes.notifications,
         props,
         title: (

lib/components/user/monitored-trip/saved-trip-screen.js

@@ -239,7 +239,6 @@ const mapStateToProps = (state, ownProps) => {
   const pending = activeSearch ? Boolean(activeSearch.pending) : false
   const itineraries = getActiveItineraries(state) || []
   const tripId = ownProps.match.params.id
-  console.log('state:::: ', state)
   return {
     activeSearchId: state.otp.activeSearchId,
     homeTimezone: state.otp.config.homeTimezone,

lib/components/user/standard-panes.tsx

@@ -24,7 +24,7 @@ const standardPanes: Record<string, PaneProps> = {
   companions: {
     id: 'companions',
     pane: CompanionsPane,
-    title: 'Travel Companions' // TODO i18n
+    title: <FormattedMessage id="components.CompanionsPane.title" />
   },
   finish: {
     id: 'finish',

lib/components/user/types.ts

@@ -41,7 +41,6 @@ export interface User {
   accessibilityRoutingByDefault?: boolean
   // email always exists per Auth0.
   email: string
-  guardians?: CompanionInfo[]
   hasConsentedToTerms?: boolean
   id?: string
   isPhoneNumberVerified?: boolean
@@ -50,6 +49,7 @@ export interface User {
   phoneNumber?: string
   preferredLocale?: string
   pushDevices?: number
+  relatedUsers?: CompanionInfo[]
   savedLocations?: UserSavedLocation[]
   storeTripHistory?: boolean
 }