From 13283281725771b5be5dc5af637cdd9f2eb8ca30 Mon Sep 17 00:00:00 2001 From: miles-grant-ibi Date: Wed, 30 Jun 2021 16:51:09 -0400 Subject: [PATCH 1/9] refactor(trip-page): warn on navigating away with unsaved changes --- lib/components/user/monitored-trip/trip-basics-pane.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/lib/components/user/monitored-trip/trip-basics-pane.js b/lib/components/user/monitored-trip/trip-basics-pane.js index fa0210d43..b5d3a0515 100644 --- a/lib/components/user/monitored-trip/trip-basics-pane.js +++ b/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' @@ -107,6 +109,12 @@ class TripBasicsPane extends Component { return (
+ {/* Prevent user from leaving when form is dirty */} + + {/* Do not show trip status when saving trip for the first time (it doesn't exist in backend yet). */} {!isCreating && } From c9bc5ff169b665c2d2f6c070af909633099e0681 Mon Sep 17 00:00:00 2001 From: miles-grant-ibi Date: Wed, 30 Jun 2021 17:30:52 -0400 Subject: [PATCH 2/9] =?UTF-8?q?refactor(trip-page):=20don=E2=80=99t=20show?= =?UTF-8?q?=20prevention=20dialog=20when=20submitting?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/components/user/monitored-trip/trip-basics-pane.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/lib/components/user/monitored-trip/trip-basics-pane.js b/lib/components/user/monitored-trip/trip-basics-pane.js index b5d3a0515..2cb652e2e 100644 --- a/lib/components/user/monitored-trip/trip-basics-pane.js +++ b/lib/components/user/monitored-trip/trip-basics-pane.js @@ -109,10 +109,11 @@ class TripBasicsPane extends Component { return (
- {/* Prevent user from leaving when form is dirty */} + {/* Prevent user from leaving when form has been changed, but + don't show it when they click submit. */} {/* Do not show trip status when saving trip for the first time From ce51a6a0819b8e85c0acf4c2219a1c433699fc12 Mon Sep 17 00:00:00 2001 From: miles-grant-ibi Date: Wed, 30 Jun 2021 17:44:16 -0400 Subject: [PATCH 3/9] refactor(trip-page): don't show navigation prevention prompt when clicking cancel --- .../user/monitored-trip/trip-basics-pane.js | 2 +- lib/components/user/stacked-pane-display.js | 51 ++++++++++--------- 2 files changed, 28 insertions(+), 25 deletions(-) diff --git a/lib/components/user/monitored-trip/trip-basics-pane.js b/lib/components/user/monitored-trip/trip-basics-pane.js index 2cb652e2e..943b553f9 100644 --- a/lib/components/user/monitored-trip/trip-basics-pane.js +++ b/lib/components/user/monitored-trip/trip-basics-pane.js @@ -112,7 +112,7 @@ class TripBasicsPane extends Component { {/* Prevent user from leaving when form has been changed, but don't show it when they click submit. */} diff --git a/lib/components/user/stacked-pane-display.js b/lib/components/user/stacked-pane-display.js index 529fb1964..92e6ba1b7 100644 --- a/lib/components/user/stacked-pane-display.js +++ b/lib/components/user/stacked-pane-display.js @@ -1,5 +1,5 @@ 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' @@ -7,30 +7,33 @@ import { PageHeading, StackedPaneContainer } from './styled' /** * This component handles the flow between screens for new OTP user accounts. */ -const StackedPaneDisplay = ({ onCancel, paneSequence, title }) => ( - <> - {title && {title}} - { - paneSequence.map(({ pane: Pane, props, title }, index) => ( - -

{title}

-
- - )) - } +const StackedPaneDisplay = ({ onCancel, paneSequence, title }) => { + const [isBeingCanceled, updateBeingCanceled] = useState(false) - - -) + return ( + <> + {title && {title}} + { + paneSequence.map(({ pane: Pane, props, title }, index) => ( + +

{title}

+
+ + )) + } + + { updateBeingCanceled(true); onCancel() }, + text: 'Cancel' + }} + okayButton={{ + text: 'Save Preferences', + type: 'submit' + }} + /> + ) +} StackedPaneDisplay.propTypes = { onCancel: PropTypes.func.isRequired, From 96f4939cd5823e2eb81228001359282879af5466 Mon Sep 17 00:00:00 2001 From: miles-grant-ibi Date: Wed, 30 Jun 2021 17:45:16 -0400 Subject: [PATCH 4/9] refactor(trip-page): make comment match code --- lib/components/user/monitored-trip/trip-basics-pane.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/components/user/monitored-trip/trip-basics-pane.js b/lib/components/user/monitored-trip/trip-basics-pane.js index 943b553f9..1f2efa693 100644 --- a/lib/components/user/monitored-trip/trip-basics-pane.js +++ b/lib/components/user/monitored-trip/trip-basics-pane.js @@ -110,7 +110,7 @@ class TripBasicsPane extends Component { return (
{/* Prevent user from leaving when form has been changed, but - don't show it when they click submit. */} + don't show it when they click submit or cancel. */} Date: Wed, 30 Jun 2021 17:46:39 -0400 Subject: [PATCH 5/9] refactor(trip-page): clarify use of new state variable --- lib/components/user/stacked-pane-display.js | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/components/user/stacked-pane-display.js b/lib/components/user/stacked-pane-display.js index 92e6ba1b7..1640b6013 100644 --- a/lib/components/user/stacked-pane-display.js +++ b/lib/components/user/stacked-pane-display.js @@ -8,6 +8,7 @@ import { PageHeading, StackedPaneContainer } from './styled' * This component handles the flow between screens for new OTP user accounts. */ const StackedPaneDisplay = ({ onCancel, paneSequence, title }) => { + // Create indicator of if cancel button was clicked so that child components can know const [isBeingCanceled, updateBeingCanceled] = useState(false) return ( From f5efbc19c77c979477229b947c642788a1c560d2 Mon Sep 17 00:00:00 2001 From: miles-grant-ibi Date: Fri, 2 Jul 2021 09:13:11 -0400 Subject: [PATCH 6/9] refactor(trip-basics-pane.js): address PR comments --- .../user/monitored-trip/trip-basics-pane.js | 24 +++++++++++++++---- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/lib/components/user/monitored-trip/trip-basics-pane.js b/lib/components/user/monitored-trip/trip-basics-pane.js index 1f2efa693..7ac9333f2 100644 --- a/lib/components/user/monitored-trip/trip-basics-pane.js +++ b/lib/components/user/monitored-trip/trip-basics-pane.js @@ -89,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
No itinerary to display.
} else { @@ -109,11 +125,9 @@ class TripBasicsPane extends Component { return (
- {/* Prevent user from leaving when form has been changed, but - don't show it when they click submit or cancel. */} {/* Do not show trip status when saving trip for the first time From 471c3f4f376d5b904c93f9470398f114de6eaeb4 Mon Sep 17 00:00:00 2001 From: miles-grant-ibi Date: Wed, 7 Jul 2021 08:53:47 -0400 Subject: [PATCH 7/9] fix(trip-basics-pane.js): Add warning when navigating away from unsaved trip changes resolve typos, remove string assembly for internationalization --- lib/components/user/monitored-trip/trip-basics-pane.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/components/user/monitored-trip/trip-basics-pane.js b/lib/components/user/monitored-trip/trip-basics-pane.js index 7ac9333f2..6c883893d 100644 --- a/lib/components/user/monitored-trip/trip-basics-pane.js +++ b/lib/components/user/monitored-trip/trip-basics-pane.js @@ -104,9 +104,9 @@ class TripBasicsPane extends Component { // 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.` + const unsavedChangesNewTripMessage = 'You haven\'t saved your new trip yet. If you leave, it will be lost.' + const unsavedChangesExistingTripMessage = 'You haven\'t saved your trip yet. If you leave, changes will be lost.' + const unsavedChangesMessage = isCreating ? unsavedChangesNewTripMessage : unsavedChangesExistingTripMessage if (!itinerary) { return
No itinerary to display.
From 7eb7b8d1fd5ce850b01c7c9dbceda579eb16828d Mon Sep 17 00:00:00 2001 From: miles-grant-ibi Date: Wed, 7 Jul 2021 09:55:43 -0400 Subject: [PATCH 8/9] style(stacked-pane-display.js): remove semicolons --- lib/components/user/stacked-pane-display.js | 24 ++++++++++++--------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/lib/components/user/stacked-pane-display.js b/lib/components/user/stacked-pane-display.js index 1640b6013..8db7380b9 100644 --- a/lib/components/user/stacked-pane-display.js +++ b/lib/components/user/stacked-pane-display.js @@ -14,18 +14,21 @@ const StackedPaneDisplay = ({ onCancel, paneSequence, title }) => { return ( <> {title && {title}} - { - paneSequence.map(({ pane: Pane, props, title }, index) => ( - -

{title}

-
- - )) - } + {paneSequence.map(({ pane: Pane, props, title }, index) => ( + +

{title}

+
+ +
+ + ))} { updateBeingCanceled(true); onCancel() }, + onClick: () => { + updateBeingCanceled(true) + onCancel() + }, text: 'Cancel' }} okayButton={{ @@ -33,7 +36,8 @@ const StackedPaneDisplay = ({ onCancel, paneSequence, title }) => { type: 'submit' }} /> - ) + + ) } StackedPaneDisplay.propTypes = { From 01d34e1f901bbe9f72b5b3ddd213db97cec247a4 Mon Sep 17 00:00:00 2001 From: miles-grant-ibi Date: Wed, 7 Jul 2021 10:09:05 -0400 Subject: [PATCH 9/9] docs(trip-basics-pane.js): add note of caveat of using Prompt component --- lib/components/user/monitored-trip/trip-basics-pane.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lib/components/user/monitored-trip/trip-basics-pane.js b/lib/components/user/monitored-trip/trip-basics-pane.js index 6c883893d..6d782cc56 100644 --- a/lib/components/user/monitored-trip/trip-basics-pane.js +++ b/lib/components/user/monitored-trip/trip-basics-pane.js @@ -125,6 +125,8 @@ class TripBasicsPane extends Component { return (
+ {/* TODO: This component does not block navigation on reload or using the back button. + This will have to be done at a higher level. See #376 */}