Merge branch 'dev' into save-trip-fixes

opentripplanner · Apr 3, 2024 · 3440d33 · 3440d33
2 parents 05b6436 + 03248ff
commit 3440d33
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 109 deletions.
diff --git a/i18n/en-US.yml b/i18n/en-US.yml
@@ -431,6 +431,9 @@ components:
       minutes).
     verified: Verified
     verify: Verify
+    verifySms: >-
+      Please complete the verification process in order to set up SMS
+      notifications.
   Place:
     deleteThisPlace: Delete this place
     enterAlert: >

diff --git a/i18n/fr.yml b/i18n/fr.yml
@@ -444,7 +444,7 @@ components:
     requestNewCode: Envoyer un nouveau code
     sendVerificationText: Envoyer le SMS de vérification
     smsConsent: >
-      En donnant votre numéro téléphone, vous acceptez de recevoir des SMS de
+      En donnant votre numéro de téléphone, vous acceptez de recevoir des SMS de
       vérification et de suivi de vos trajets. Frais applicables selon votre
       opérateur téléphonique.
     verificationCode: "Code de vérification :"
@@ -453,6 +453,9 @@ components:
       code ci-dessous (le code expire après 10 minutes).
     verified: Vérifié
     verify: Vérifier
+    verifySms: >-
+      Veuillez effectuer la vérification de votre numéro de téléphone afin de
+      recevoir des notifications par SMS.
   Place:
     deleteThisPlace: Supprimer ce lieu
     enterAlert: >

diff --git a/lib/components/app/app-menu-item.tsx b/lib/components/app/app-menu-item.tsx
@@ -3,12 +3,15 @@ import { ChevronUp } from '@styled-icons/fa-solid/ChevronUp'
 import AnimateHeight from 'react-animate-height'
 import React, { Component, HTMLAttributes, KeyboardEvent } from 'react'
 
+import Link from '../util/link'
+
 interface Props extends HTMLAttributes<HTMLElement> {
   href?: string
   icon?: JSX.Element
   onClick?: () => void
   subItems?: JSX.Element[]
   text: JSX.Element | string
+  to?: string
 }
 
 interface State {
@@ -70,7 +73,7 @@ export default class AppMenuItem extends Component<Props, State> {
     const { isExpanded } = this.state
     const hasHref = !!otherProps.href
     const isAbsolute = otherProps.href?.startsWith('http')
-    const Element = hasHref ? 'a' : 'button'
+    const Element = hasHref ? 'a' : otherProps.to ? Link : 'button'
     const containerId = `${id}-container`
     return (
       <>

diff --git a/lib/components/app/app-menu.tsx b/lib/components/app/app-menu.tsx
@@ -7,10 +7,8 @@ import { GlobeAmericas, MapMarked, MapPin } from '@styled-icons/fa-solid'
 import { GraduationCap } from '@styled-icons/fa-solid/GraduationCap'
 import { History } from '@styled-icons/fa-solid/History'
 import { Undo } from '@styled-icons/fa-solid/Undo'
-import { withRouter } from 'react-router'
 import React, { Component, Fragment, useContext } from 'react'
 import SlidingPane from 'react-sliding-pane'
-import type { RouteComponentProps } from 'react-router'
 import type { WrappedComponentProps } from 'react-intl'
 
 import * as callTakerActions from '../../actions/call-taker'
@@ -21,8 +19,6 @@ import { AppReduxState } from '../../util/state-types'
 import { ComponentContext } from '../../util/contexts'
 import { getLanguageOptions } from '../../util/i18n'
 import { isModuleEnabled, Modules } from '../../util/config'
-import { MainPanelContent } from '../../actions/ui-constants'
-import { setMainPanelContent } from '../../actions/ui'
 
 import AppMenuItem from './app-menu-item'
 import PopupTriggerText from './popup-trigger-text'
@@ -48,13 +44,11 @@ type AppMenuProps = {
   fieldTripEnabled?: boolean
   language?: LanguageConfig
   languageOptions: Record<string, any> | null
-  location: { search: string }
   mailablesEnabled?: boolean
   popupTarget?: string
   resetAndToggleCallHistory?: () => void
   resetAndToggleFieldTrips?: () => void
   setLocale: (locale: string) => void
-  setMainPanelContent: (panel: number | null) => void
   setPopupContent: (url: string) => void
   startOverFromInitialUrl: () => void
   toggleMailables: () => void
@@ -67,7 +61,7 @@ type AppMenuState = {
  * Sidebar which appears to show user list of options and links
  */
 class AppMenu extends Component<
-  AppMenuProps & WrappedComponentProps & RouteComponentProps,
+  AppMenuProps & WrappedComponentProps,
   AppMenuState
 > {
   static contextType = ComponentContext
@@ -76,16 +70,6 @@ class AppMenu extends Component<
     isPaneOpen: false
   }
 
-  _showRouteViewer = () => {
-    this.props.setMainPanelContent(MainPanelContent.ROUTE_VIEWER)
-    this._togglePane()
-  }
-
-  _showNearby = () => {
-    this.props.setMainPanelContent(MainPanelContent.NEARBY_VIEW)
-    this._togglePane()
-  }
-
   _startOver = () => {
     this.props.startOverFromInitialUrl()
   }
@@ -100,11 +84,6 @@ class AppMenu extends Component<
     this.setState({ isPaneOpen: !isPaneOpen })
   }
 
-  _showTripPlanner = () => {
-    this.props.setMainPanelContent(null)
-    this._togglePane()
-  }
-
   _handleSkipNavigation = () => {
     document.querySelector('main')?.focus()
   }
@@ -234,30 +213,33 @@ class AppMenu extends Component<
             <AppMenuItem
               className="app-menu-trip-planner-link"
               icon={<MapMarked />}
-              onClick={this._showTripPlanner}
+              onClick={this._togglePane}
               text={intl.formatMessage({
                 id: 'components.BatchRoutingPanel.shortTitle'
               })}
+              to="/"
             />
             {/* This item is duplicated by the view-switcher, but only shown on mobile
             when the view switcher isn't shown (using css) */}
             <AppMenuItem
               className="app-menu-route-viewer-link"
               icon={<Bus />}
-              onClick={this._showRouteViewer}
+              onClick={this._togglePane}
               text={intl.formatMessage({
                 id: 'components.RouteViewer.shortTitle'
               })}
+              to="/route"
             />
             {/* This item is duplicated by the view-switcher, but only shown on mobile
             when the view switcher isn't shown (using css) */}
             <AppMenuItem
               className="app-menu-route-viewer-link"
               icon={<MapPin />}
-              onClick={this._showNearby}
+              onClick={this._togglePane}
               text={intl.formatMessage({
                 id: 'components.ViewSwitcher.nearby'
               })}
+              to="/nearby"
             />
             <AppMenuItem
               icon={<Undo />}
@@ -329,15 +311,12 @@ const mapDispatchToProps = {
   resetAndToggleCallHistory: callTakerActions.resetAndToggleCallHistory,
   resetAndToggleFieldTrips: fieldTripActions.resetAndToggleFieldTrips,
   setLocale: uiActions.setLocale,
-  setMainPanelContent,
   setPopupContent: uiActions.setPopupContent,
   startOverFromInitialUrl: uiActions.startOverFromInitialUrl,
   toggleMailables: callTakerActions.toggleMailables
 }
 
-export default injectIntl(
-  withRouter(connect(mapStateToProps, mapDispatchToProps)(AppMenu))
-)
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(AppMenu))
 
 /**
  * Renders a label and icon either from url or font awesome type

diff --git a/lib/components/app/app.css b/lib/components/app/app.css
@@ -72,21 +72,25 @@
   display: flex;
   justify-content: center;
 }
-.view-switcher button.btn-link {
+.view-switcher a {
   color: rgba(255, 255, 255, 0.85);
   border-radius: 15px;
+  font-size: 14px;
+  padding: 6px 12px;
+  user-select: none;
 }
-.view-switcher button.btn-link.active {
+.view-switcher a.active {
   background: rgba(0, 0, 0, 0.15);
   font-weight: 600;
 }
-.view-switcher button.btn-link:hover,
-.view-switcher button.btn-link:focus {
-  text-decoration: none;
+.view-switcher a:hover,
+.view-switcher a:focus {
   border-radius: 15px;
+  cursor: pointer;
+  text-decoration: none;
 }
 
-.view-switcher button.btn-link:hover {
+.view-switcher a:hover {
   color: #fff;
 }
 

diff --git a/lib/components/app/view-switcher.tsx b/lib/components/app/view-switcher.tsx
@@ -1,45 +1,20 @@
-import { Button } from 'react-bootstrap'
 import { connect } from 'react-redux'
 import { FormattedMessage, useIntl } from 'react-intl'
 import React from 'react'
 
-import * as uiActions from '../../actions/ui'
-import { MainPanelContent } from '../../actions/ui-constants'
+import { AppReduxState } from '../../util/state-types'
+import Link from '../util/link'
 
 type Props = {
-  accountsActive: boolean
-  activePanel: number | null
-  setMainPanelContent: (payload: number | null) => void
+  mainPath: string
   sticky?: boolean
 }
 /**
  * This component is a switcher between
  * the main views of the application.
  */
-const ViewSwitcher = ({
-  accountsActive,
-  activePanel,
-  setMainPanelContent,
-  sticky
-}: Props) => {
+const ViewSwitcher = ({ mainPath, sticky }: Props) => {
   const intl = useIntl()
-
-  const _showRouteViewer = () => {
-    setMainPanelContent(MainPanelContent.ROUTE_VIEWER)
-  }
-  const _showNearby = () => {
-    setMainPanelContent(MainPanelContent.NEARBY_VIEW)
-  }
-
-  const _showTripPlanner = () => {
-    // setMainPanelContent(null) already includes navigation to '/'.
-    setMainPanelContent(null)
-  }
-
-  const tripPlannerActive = activePanel === null && !accountsActive
-  const routeViewerActive = activePanel === MainPanelContent.ROUTE_VIEWER
-  const nearbyActive = activePanel === MainPanelContent.NEARBY_VIEW
-
   return (
     <div
       aria-label={intl.formatMessage({
@@ -59,46 +34,26 @@ const ViewSwitcher = ({
           : {}
       }
     >
-      <Button
-        aria-controls="view-switcher"
-        bsStyle="link"
-        className={`${tripPlannerActive ? 'active' : ''}`}
-        onClick={_showTripPlanner}
-      >
+      <Link isActive={mainPath === '/'} to="/">
         <FormattedMessage id="components.BatchRoutingPanel.shortTitle" />
-      </Button>
-      <Button
-        aria-controls="view-switcher"
-        bsStyle="link"
-        className={`${routeViewerActive ? 'active' : ''}`}
-        onClick={_showRouteViewer}
-      >
+      </Link>
+      <Link isActive={mainPath === '/route'} to="/route">
         <FormattedMessage id="components.RouteViewer.shortTitle" />
-      </Button>
-      <Button
-        aria-controls="view-switcher"
-        bsStyle="link"
-        className={`${nearbyActive ? 'active' : ''}`}
-        onClick={_showNearby}
-      >
+      </Link>
+      <Link isActive={mainPath === '/nearby'} to="/nearby">
         <FormattedMessage id="components.ViewSwitcher.nearby" />
-      </Button>
+      </Link>
     </div>
   )
 }
 
 // connect to the redux store
 
-const mapStateToProps = (state: any) => {
+const mapStateToProps = (state: AppReduxState) => {
+  const pathParts = state.router.location.pathname.split('/')
   return {
-    // TODO: more reliable way of detecting these things, such as terms of storage page
-    accountsActive: state.router.location.pathname.includes('/account'),
-    activePanel: state.otp.ui.mainPanelContent
+    mainPath: `/${pathParts[1]}`
   }
 }
 
-const mapDispatchToProps = {
-  setMainPanelContent: uiActions.setMainPanelContent
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(ViewSwitcher)
+export default connect(mapStateToProps)(ViewSwitcher)
diff --git a/lib/components/user/standard-panes.tsx b/lib/components/user/standard-panes.tsx
@@ -38,7 +38,7 @@ const standardPanes: Record<string, PaneProps> = {
   notifications: {
     getInvalidMessage: (intl: IntlShape) =>
       intl.formatMessage({
-        id: 'components.PhoneNumberEditor.invalidPhone'
+        id: 'components.PhoneNumberEditor.verifySms'
       }),
     id: 'notifications',
     isInvalid: ({

diff --git a/lib/components/util/link.ts b/lib/components/util/link.ts
@@ -6,7 +6,8 @@ import { combineQueryParams } from '../../util/api'
 import { isBlank } from '../../util/ui'
 
 interface OwnProps extends HTMLAttributes<HTMLAnchorElement> {
-  to: string
+  isActive?: boolean
+  to?: string
   toParams?: Record<string, unknown>
 }
 
@@ -19,11 +20,19 @@ const Link: ComponentType = 'a' as unknown as ComponentType
 // connect to the redux store so that the search params get updated in timely fashion.
 
 const mapStateToProps = (state: AppReduxState, ownProps: OwnProps) => {
-  const queryParams = combineQueryParams(ownProps.toParams)
-  const href = `#${ownProps.to}${isBlank(queryParams) ? '' : `?${queryParams}`}`
+  const { className, isActive, to = '', toParams } = ownProps
+  const queryParams = combineQueryParams(toParams)
+  const href = `#${to}${isBlank(queryParams) ? '' : `?${queryParams}`}`
   return {
+    className:
+      className && isActive
+        ? `${className} active`
+        : isActive
+        ? 'active'
+        : className,
     href,
-    // Remove the passed to and toParams props from the rendered HTML.
+    // Remove the passed isActive, to and toParams props from the rendered HTML.
+    isActive: undefined,
     to: undefined,
     toParams: undefined
   }

diff --git a/percy/percy.test.js b/percy/percy.test.js
@@ -282,10 +282,8 @@ async function executeTest(page, isMobile, isCallTaker) {
     await percySnapshotWithWait(page, 'Mobile Sidebar')
   }
 
-  const [routeViewerButton] = await page.$x(
-    "//button[contains(., 'View Routes')]"
-  )
-  await routeViewerButton.click()
+  const [routeViewerLink] = await page.$x("//a[contains(., 'View Routes')]")
+  await routeViewerLink.click()
   await page.waitForSelector('.route-viewer')
   await page.waitForTimeout(5000)
 
@@ -349,10 +347,8 @@ async function executeTest(page, isMobile, isCallTaker) {
     // Wait for animation
     await page.waitForTimeout(200)
   }
-  const [planTripTabButton] = await page.$x(
-    "//button[contains(., 'Plan Trip')]"
-  )
-  await planTripTabButton.click()
+  const [planTripTabLink] = await page.$x("//a[contains(., 'Plan Trip')]")
+  await planTripTabLink.click()
   await page.waitForSelector('.option')
   await page.waitForTimeout(3000)
   const [viewAllOptionsButton] = await page.$x(