Trip page: Add warning about navigating away with unsaved changes

lib/components/user/monitored-trip/trip-basics-pane.js

@@ -10,10 +10,12 @@ import {
   ProgressBar
 } from 'react-bootstrap'
 import { connect } from 'react-redux'
+import { Prompt } from 'react-router'
 import styled from 'styled-components'
 
 import * as userActions from '../../../actions/user'
 import { getErrorStates } from '../../../util/ui'
+
 import TripStatus from './trip-status'
 import TripSummary from './trip-summary'
 
@@ -87,9 +89,25 @@ class TripBasicsPane extends Component {
   }
 
   render () {
-    const { errors, isCreating, itineraryExistence, values: monitoredTrip } = this.props
+    const {
+      canceled,
+      dirty,
+      errors,
+      isCreating,
+      isSubmitting,
+      itineraryExistence,
+      values: monitoredTrip
+    } = this.props
     const { itinerary } = monitoredTrip
 
+    // Prevent user from leaving when form has been changed,
+    // but don't show it when they click submit or cancel.
+    const unsavedChanges = dirty && !isSubmitting && !canceled
+    // Message changes depending on if the new or existing trip is being edited
+    const unsavedChangesMessage = `You have haven't saved your ${
+      isCreating ? 'new ' : ''
+    }trip yet. If you leave, ${isCreating ? 'it' : 'changes'} will be lost.`
+
     if (!itinerary) {
       return <div>No itinerary to display.</div>
     } else {
@@ -107,6 +125,11 @@ class TripBasicsPane extends Component {
 
       return (
         <div>
+          <Prompt
+            when={unsavedChanges}
+            message={unsavedChangesMessage}
+          />
+
           {/* Do not show trip status when saving trip for the first time
               (it doesn't exist in backend yet). */}
           {!isCreating && <TripStatus monitoredTrip={monitoredTrip} />}

lib/components/user/stacked-pane-display.js

@@ -1,36 +1,40 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, {useState} from 'react'
 
 import FormNavigationButtons from './form-navigation-buttons'
 import { PageHeading, StackedPaneContainer } from './styled'
 
 /**
  * This component handles the flow between screens for new OTP user accounts.
  */
-const StackedPaneDisplay = ({ onCancel, paneSequence, title }) => (
-  <>
-    {title && <PageHeading>{title}</PageHeading>}
-    {
-      paneSequence.map(({ pane: Pane, props, title }, index) => (
-        <StackedPaneContainer key={index}>
-          <h3>{title}</h3>
-          <div><Pane {...props} /></div>
-        </StackedPaneContainer>
-      ))
-    }
+const StackedPaneDisplay = ({ onCancel, paneSequence, title }) => {
+  // Create indicator of if cancel button was clicked so that child components can know
+  const [isBeingCanceled, updateBeingCanceled] = useState(false)
 
-    <FormNavigationButtons
-      backButton={{
-        onClick: onCancel,
-        text: 'Cancel'
-      }}
-      okayButton={{
-        text: 'Save Preferences',
-        type: 'submit'
-      }}
-    />
-  </>
-)
+  return (
+    <>
+      {title && <PageHeading>{title}</PageHeading>}
+      {
+        paneSequence.map(({ pane: Pane, props, title }, index) => (
+          <StackedPaneContainer key={index}>
+            <h3>{title}</h3>
+            <div><Pane canceled={isBeingCanceled} {...props} /></div>
+          </StackedPaneContainer>
+        ))
+      }
+
+      <FormNavigationButtons
+        backButton={{
+          onClick: () => { updateBeingCanceled(true); onCancel() },
+          text: 'Cancel'
+        }}
+        okayButton={{
+          text: 'Save Preferences',
+          type: 'submit'
+        }}
+      />
+    </>)
+}
 
 StackedPaneDisplay.propTypes = {
   onCancel: PropTypes.func.isRequired,