diff --git a/lib/actions/form.js b/lib/actions/form.js index bb6c401b9..424eb161a 100644 --- a/lib/actions/form.js +++ b/lib/actions/form.js @@ -157,6 +157,8 @@ export function checkShouldReplanTrip(autoPlan, isMobile, oldQuery, newQuery) { (fromChanged && !toChanged) || (!fromChanged && toChanged) // Check whether a trip should be auto-replanned const strategy = (isMobile && autoPlan?.mobile) || autoPlan?.default + const locationChangedToBlank = + (oldQuery.from && !newQuery.from) || (oldQuery.to && !newQuery.to) const shouldReplanTrip = evaluateAutoPlanStrategy( strategy, @@ -170,6 +172,7 @@ export function checkShouldReplanTrip(autoPlan, isMobile, oldQuery, newQuery) { (oldQuery.from || oldQuery.to) return { fromChanged, + locationChangedToBlank, oneLocationChanged, shouldReplanTrip, toChanged @@ -203,8 +206,13 @@ export function formChanged(oldQuery, newQuery) { const { config, ui } = state.otp const { autoPlan, debouncePlanTimeMs } = config const isMobile = coreUtils.ui.isMobile() - const { fromChanged, oneLocationChanged, shouldReplanTrip, toChanged } = - checkShouldReplanTrip(autoPlan, isMobile, oldQuery, newQuery) + const { + fromChanged, + locationChangedToBlank, + oneLocationChanged, + shouldReplanTrip, + toChanged + } = checkShouldReplanTrip(autoPlan, isMobile, oldQuery, newQuery) dispatch(updateQueryTimeIfLeavingNow()) @@ -222,7 +230,10 @@ export function formChanged(oldQuery, newQuery) { // Return to search screen on mobile only if not currently on welcome // screen (otherwise when the current position is auto-set the screen // will change unexpectedly). - if (ui.mobileScreen !== MobileScreens.WELCOME_SCREEN) { + if ( + ui.mobileScreen !== MobileScreens.WELCOME_SCREEN && + !locationChangedToBlank + ) { dispatch(setMobileScreen(MobileScreens.SEARCH_FORM)) } } diff --git a/lib/components/mobile/location-search.js b/lib/components/mobile/location-search.js index b58b22536..516c1d496 100644 --- a/lib/components/mobile/location-search.js +++ b/lib/components/mobile/location-search.js @@ -46,6 +46,7 @@ class MobileLocationSearch extends Component { this.props const suppressNearby = otherLocation && otherLocation.category === 'CURRENT_LOCATION' + return (
diff --git a/lib/components/mobile/mobile.css b/lib/components/mobile/mobile.css index 570f86c8d..9239e1e49 100644 --- a/lib/components/mobile/mobile.css +++ b/lib/components/mobile/mobile.css @@ -52,11 +52,12 @@ } .otp .navbar .mobile-back { - position: fixed; - top: 12px; - left: 15px; + background: transparent; + border: none; color: white; font-size: 18px; + left: 7px; + position: fixed; } .otp .navbar .mobile-close { diff --git a/lib/components/mobile/navigation-bar.js b/lib/components/mobile/navigation-bar.js index 7a48dc406..4426a244c 100644 --- a/lib/components/mobile/navigation-bar.js +++ b/lib/components/mobile/navigation-bar.js @@ -8,6 +8,7 @@ import styled from 'styled-components' import * as uiActions from '../../actions/ui' import { accountLinks, getAuth0Config } from '../../util/auth' import { ComponentContext } from '../../util/contexts' +import { injectIntl } from 'react-intl' import { StyledIconWrapper } from '../util/styledIcon' import AppMenu from '../app/app-menu' import LocaleSelector from '../app/locale-selector' @@ -29,6 +30,7 @@ class MobileNavigationBar extends Component { extraMenuItems: PropTypes.array, headerAction: PropTypes.element, headerText: PropTypes.string, + intl: PropTypes.object, locale: PropTypes.string, onBackClicked: PropTypes.func, setMobileScreen: PropTypes.func, @@ -51,21 +53,28 @@ class MobileNavigationBar extends Component { extraMenuItems, headerAction, headerText, + intl, locale, showBackButton } = this.props + const backButtonText = intl.formatMessage({ id: 'common.forms.back' }) + return (
{showBackButton ? ( -
+
+ ) : ( )} @@ -122,4 +131,7 @@ const mapDispatchToProps = { setMobileScreen: uiActions.setMobileScreen } -export default connect(mapStateToProps, mapDispatchToProps)(MobileNavigationBar) +export default connect( + mapStateToProps, + mapDispatchToProps +)(injectIntl(MobileNavigationBar)) diff --git a/percy/percy.test.js b/percy/percy.test.js index ccb518ee1..12a558741 100644 --- a/percy/percy.test.js +++ b/percy/percy.test.js @@ -148,11 +148,17 @@ async function executeTest(page, isMobile, isCallTaker) { await page.waitForTimeout(300) // Click the clear button next to it await page.click('.from-form-control + button') + if (isMobile) { + await page.click('.mobile-back') + } await page.click('.to-form-control') await page.waitForTimeout(300) // Click the clear button next to it await page.click('.to-form-control + button') + if (isMobile) { + await page.click('.mobile-back') + } // Fill in new origin await page.hover('.from-form-control')