Prevent autoplan if there are validation errors

lib/components/form/advanced-settings-panel.tsx

@@ -30,7 +30,8 @@ import {
   onSettingsUpdate,
   pipe,
   populateSettingWithIcon,
-  setModeButton
+  setModeButton,
+  tripPlannerValidationErrors
 } from './util'
 import { setModeButtonEnabled } from './batch-settings'
 import { styledCheckboxCss } from './styled'
@@ -113,6 +114,7 @@ const DtSelectorContainer = styled.div`
 const AdvancedSettingsPanel = ({
   autoPlan,
   closeAdvancedSettings,
+  currentQuery,
   enabledModeButtons,
   handlePlanTrip,
   innerRef,
@@ -125,6 +127,7 @@ const AdvancedSettingsPanel = ({
 }: {
   autoPlan: boolean
   closeAdvancedSettings: () => void
+  currentQuery: any
   enabledModeButtons: string[]
   handlePlanTrip: () => void
   innerRef: RefObject<HTMLDivElement>
@@ -181,10 +184,13 @@ const AdvancedSettingsPanel = ({
     )
   )
 
+  const tripFormErrors = tripPlannerValidationErrors(currentQuery, intl)
+
   const closePanel = useCallback(() => {
-    autoPlan && handlePlanTrip()
+    // Only autoplan if there are no validation errors
+    tripFormErrors.length === 0 && autoPlan && handlePlanTrip()
     closeAdvancedSettings()
-  }, [autoPlan, closeAdvancedSettings, handlePlanTrip])
+  }, [autoPlan, closeAdvancedSettings, handlePlanTrip, tripFormErrors.length])
 
   const onSaveAndReturnClick = useCallback(async () => {
     await setCloseAdvancedSettingsWithDelay()

lib/components/form/util.tsx

@@ -72,13 +72,10 @@ export const setModeButton =
     )
   }
 
-export const alertUserTripPlan = (
-  intl: IntlShape,
+export const tripPlannerValidationErrors = (
   currentQuery: any,
-  onPlanTripClick: () => void,
-  routingQuery: () => any
-): void => {
-  // Check for any validation issues in query.
+  intl: IntlShape
+): string[] => {
   const issues: string[] = []
   if (!hasValidLocation(currentQuery, 'from')) {
     issues.push(intl.formatMessage({ id: 'components.BatchSettings.origin' }))
@@ -88,6 +85,17 @@ export const alertUserTripPlan = (
       intl.formatMessage({ id: 'components.BatchSettings.destination' })
     )
   }
+  return issues
+}
+
+export const alertUserTripPlan = (
+  intl: IntlShape,
+  currentQuery: any,
+  onPlanTripClick: () => void,
+  routingQuery: () => any
+): void => {
+  // Check for any validation issues in query and alert user.
+  const issues = tripPlannerValidationErrors(currentQuery, intl)
   onPlanTripClick()
   if (issues.length > 0) {
     // TODO: replace with less obtrusive validation.