VACMS-18405 DUW v2 review update (#31319)

src/applications/discharge-wizard/actions/index.js

@@ -15,6 +15,9 @@ import {
   DUW_UPDATE_PREV_APPLICATION_YEAR,
   DUW_UPDATE_PRIOR_SERVICE,
   DUW_UPDATE_FAILURE_TO_EXHAUST,
+  DUW_EDIT_MODE,
+  DUW_QUESTION_FLOW_CHANGED,
+  DUW_ROUTE_MAP,
 } from '../constants';
 
 export const updateField = (key, value) => {
@@ -39,6 +42,27 @@ export const updateIntroPageViewed = value => {
   };
 };
 
+export const updateEditMode = value => {
+  return {
+    type: DUW_EDIT_MODE,
+    payload: value,
+  };
+};
+
+export const updateQuestionFlowChanged = value => {
+  return {
+    type: DUW_QUESTION_FLOW_CHANGED,
+    payload: value,
+  };
+};
+
+export const updateRouteMap = value => {
+  return {
+    type: DUW_ROUTE_MAP,
+    payload: value,
+  };
+};
+
 export const updateServiceBranch = value => {
   return {
     type: DUW_UPDATE_SERVICE_BRANCH,

src/applications/discharge-wizard/components/DischargeWizardApp.jsx

@@ -18,7 +18,7 @@ export default function DischargeWizardApp({ children }) {
   return (
     <div className="row discharge-wizard-v2 vads-u-padding-bottom--8">
       <BreadcrumbsV2 />
-      <div className="columns">{children}</div>
+      <div className="usa-width-two-thirds medium-8 columns">{children}</div>
     </div>
   );
 }

src/applications/discharge-wizard/components/v2/ResultsPage.jsx

@@ -30,7 +30,7 @@ const ResultsPage = ({ formResponses, router, viewedIntroPage }) => {
   );
 
   return (
-    <article className="dw-guidance" data-testId="duw-results">
+    <article className="dw-guidance" data-testid="duw-results">
       <h1>{H1}</h1>
       <div className="medium-8">
         <ResultsSummary formResponses={formResponses} />

src/applications/discharge-wizard/components/v2/ReviewPage.jsx

@@ -4,12 +4,22 @@ import { connect } from 'react-redux';
 import { VaButtonPair } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
 
 import { answerReviewLabel } from '../../helpers';
-import { SHORT_NAME_MAP } from '../../constants/question-data-map';
+import {
+  SHORT_NAME_MAP,
+  REVIEW_LABEL_MAP,
+} from '../../constants/question-data-map';
+import { updateEditMode } from '../../actions';
 import { pageSetup } from '../../utilities/page-setup';
 import { ROUTES } from '../../constants';
-import { navigateBackward } from '../../utilities/page-navigation';
 
-const ReviewPage = ({ formResponses, router, viewedIntroPage }) => {
+const ReviewPage = ({
+  formResponses,
+  router,
+  viewedIntroPage,
+  questionFlowChanged,
+  toggleEditMode,
+  routeMap,
+}) => {
   const H1 = 'Review your answers';
 
   useEffect(
@@ -29,30 +39,47 @@ const ReviewPage = ({ formResponses, router, viewedIntroPage }) => {
   );
 
   const onEditAnswerClick = route => {
+    toggleEditMode(true);
     router.push(route);
   };
 
+  const onBackClick = () => {
+    const previousRoute = routeMap[routeMap.length - 2];
+    router.push(previousRoute);
+  };
+
   const renderReviewAnswers = () => {
     return Object.keys(SHORT_NAME_MAP).map(shortName => {
       if (formResponses[shortName] === null) {
         return null;
       }
-
-      const reviewLabel = answerReviewLabel(shortName, formResponses);
+      const reviewLabel = REVIEW_LABEL_MAP[shortName];
+      const reviewAnswer = answerReviewLabel(shortName, formResponses);
 
       return (
         reviewLabel && (
           <li
             key={shortName}
-            className="vads-u-margin-bottom--0 vads-u-padding-y--3 vads-u-padding-x--1p5 answer-review"
+            className="vads-u-margin-bottom--0 vads-u-padding-y--3 answer-review-box"
           >
-            {reviewLabel}
-            <va-link
-              class="hydrated vads-u-padding-left--2"
-              onClick={() => onEditAnswerClick(ROUTES[shortName])}
-              name={shortName}
-              text="Edit"
-            />
+            <div className="answer-review-label">
+              <p className="vads-u-margin--0 answer-review">
+                <span className="vads-u-font-weight--bold">{reviewLabel}</span>
+                <span data-testid={`answer-${shortName}`}>{reviewAnswer}</span>
+              </p>
+              <va-link
+                class="vads-u-padding-left--2"
+                data-testid="duw-edit-link"
+                href="#"
+                onClick={event => {
+                  event.preventDefault();
+                  onEditAnswerClick(ROUTES[shortName]);
+                }}
+                name={shortName}
+                label={`Edit ${reviewLabel}`}
+                text="Edit"
+              />
+            </div>
           </li>
         )
       );
@@ -62,18 +89,24 @@ const ReviewPage = ({ formResponses, router, viewedIntroPage }) => {
   return (
     <>
       <h1>{H1}</h1>
-      <p className="vads-u-margin-bottom--4 vads-u-margin-top--0">
-        If any information here is wrong, you can change your answers now. This
-        will help us give you the most accurate instructions.
-      </p>
+      {questionFlowChanged && (
+        <va-alert-expandable
+          class="vads-u-margin-top--4"
+          status="info"
+          trigger="Your information was updated."
+        >
+          Changing the answers to one or more questions caused the review screen
+          to update with new information.
+        </va-alert-expandable>
+      )}
       <ul className="answers vads-u-margin-bottom--2 vads-u-padding--0">
         {renderReviewAnswers()}
       </ul>
       <VaButtonPair
         data-testid="duw-buttonPair"
         class="small-screen:vads-u-margin-x--0p5"
         onPrimaryClick={() => router.push('/results')}
-        onSecondaryClick={() => navigateBackward(router)}
+        onSecondaryClick={onBackClick}
         continue
       />
     </>
@@ -86,11 +119,24 @@ ReviewPage.propTypes = {
     push: PropTypes.func,
   }).isRequired,
   viewedIntroPage: PropTypes.bool.isRequired,
+  questionFlowChanged: PropTypes.bool.isRequired,
+  toggleEditMode: PropTypes.func.isRequired,
+  routeMap: PropTypes.array.isRequired,
+};
+
+const mapDispatchToProps = {
+  toggleEditMode: updateEditMode,
 };
 
 const mapStateToProps = state => ({
   formResponses: state?.dischargeUpgradeWizard?.duwForm?.form,
   viewedIntroPage: state?.dischargeUpgradeWizard?.duwForm?.viewedIntroPage,
+  questionFlowChanged:
+    state?.dischargeUpgradeWizard?.duwForm?.questionFlowChanged,
+  routeMap: state?.dischargeUpgradeWizard?.duwForm?.routeMap,
 });
 
-export default connect(mapStateToProps)(ReviewPage);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(ReviewPage);

src/applications/discharge-wizard/components/v2/questions/shared/Dropdown.jsx

@@ -7,12 +7,18 @@ import {
 } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
 
 import { waitForRenderThenFocus } from '@department-of-veterans-affairs/platform-utilities/ui';
+import { forkableQuestions } from '../../../../constants';
 import {
   navigateBackward,
   navigateForward,
 } from '../../../../utilities/page-navigation';
 import { cleanUpAnswers } from '../../../../utilities/answer-cleanup';
-import { updateFormStore } from '../../../../actions';
+import {
+  updateEditMode,
+  updateFormStore,
+  updateQuestionFlowChanged,
+  updateRouteMap,
+} from '../../../../actions';
 import {
   determineErrorMessage,
   determineLabel,
@@ -31,8 +37,15 @@ const Dropdown = ({
   setFormError,
   testId,
   updateCleanedFormStore,
+  editMode,
+  toggleEditMode,
+  toggleQuestionsFlowChanged,
+  setRouteMap,
+  routeMap,
+  questionFlowChanged,
 }) => {
   const [valueHasChanged, setValueHasChanged] = useState(false);
+  const isForkableQuestion = forkableQuestions.includes(shortName);
 
   useEffect(() => {
     waitForRenderThenFocus('h1');
@@ -58,15 +71,32 @@ const Dropdown = ({
       if (valueHasChanged) {
         // Remove answers from the Redux store if the display path ahead will change.
         cleanUpAnswers(formResponses, updateCleanedFormStore, shortName);
+
+        if (forkableQuestions.includes(shortName) && editMode) {
+          toggleQuestionsFlowChanged(true);
+        }
       }
 
+      toggleEditMode(false);
       setFormError(false);
-      navigateForward(shortName, formResponses, router);
+      navigateForward(
+        shortName,
+        formResponses,
+        router,
+        editMode,
+        setRouteMap,
+        routeMap,
+        questionFlowChanged,
+      );
     }
   };
 
   const onBackClick = () => {
-    navigateBackward(router);
+    if (valueHasChanged && editMode && isForkableQuestion) {
+      cleanUpAnswers(formResponses, updateCleanedFormStore, shortName);
+    }
+    toggleEditMode(false);
+    navigateBackward(router, setRouteMap, routeMap, editMode);
   };
 
   return (
@@ -81,11 +111,23 @@ const Dropdown = ({
         label={determineLabel(shortName)}
         error={formError ? determineErrorMessage(shortName) : null}
         name={`${shortName}_dropdown`}
-        value={formValue}
+        value={formValue || ''}
         onVaSelect={e => onValueChange(e.detail.value)}
       >
         {options}
       </VaSelect>
+      {editMode &&
+        forkableQuestions.includes(shortName) && (
+          <va-alert-expandable
+            class="vads-u-margin-top--4"
+            status="info"
+            trigger="Changing your answer may lead to a new set of questions."
+          >
+            If you change your answer to this question, you may be asked for
+            more information to ensure that we provide you with the best
+            results.
+          </va-alert-expandable>
+        )}
       <VaButtonPair
         class="vads-u-margin-top--3 small-screen:vads-u-margin-x--0p5"
         data-testid="duw-buttonPair"
@@ -108,14 +150,30 @@ Dropdown.propTypes = {
   testId: PropTypes.string.isRequired,
   updateCleanedFormStore: PropTypes.func.isRequired,
   valueSetter: PropTypes.func.isRequired,
+  editMode: PropTypes.bool.isRequired,
+  questionFlowChanged: PropTypes.bool.isRequired,
+  toggleEditMode: PropTypes.func.isRequired,
+  routeMap: PropTypes.array.isRequired,
+  toggleQuestionsFlowChanged: PropTypes.func.isRequired,
+  setRouteMap: PropTypes.func.isRequired,
   formValue: PropTypes.string,
 };
 
 const mapDispatchToProps = {
   updateCleanedFormStore: updateFormStore,
+  toggleEditMode: updateEditMode,
+  toggleQuestionsFlowChanged: updateQuestionFlowChanged,
+  setRouteMap: updateRouteMap,
 };
 
+const mapStateToProps = state => ({
+  editMode: state?.dischargeUpgradeWizard?.duwForm?.editMode,
+  routeMap: state?.dischargeUpgradeWizard?.duwForm?.routeMap,
+  questionFlowChanged:
+    state?.dischargeUpgradeWizard?.duwForm?.questionFlowChanged,
+});
+
 export default connect(
-  null,
+  mapStateToProps,
   mapDispatchToProps,
 )(Dropdown);