VACMS-16913: DUW questions 3

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

@@ -1,11 +1,15 @@
 import {
   DW_UPDATE_FIELD,
   // v2 actions
+  DUW_UPDATE_FORM_STORE,
   DUW_VIEWED_INTRO_PAGE,
   DUW_UPDATE_SERVICE_BRANCH,
   DUW_UPDATE_DISCHARGE_YEAR,
   DUW_UPDATE_DISCHARGE_MONTH,
-  DUW_UPDATE_FORM_STORE,
+  DUW_UPDATE_REASON,
+  DUW_UPDATE_DISCHARGE_TYPE,
+  DUW_UPDATE_COURT_MARTIAL,
+  DUW_UPDATE_INTENTION,
 } from '../constants';
 
 export const updateField = (key, value) => {
@@ -16,6 +20,13 @@ export const updateField = (key, value) => {
   };
 };
 
+export const updateFormStore = value => {
+  return {
+    type: DUW_UPDATE_FORM_STORE,
+    payload: value,
+  };
+};
+
 export const updateIntroPageViewed = value => {
   return {
     type: DUW_VIEWED_INTRO_PAGE,
@@ -44,9 +55,30 @@ export const updateDischargeMonth = value => {
   };
 };
 
-export const updateFormStore = value => {
+export const updateReason = value => {
   return {
-    type: DUW_UPDATE_FORM_STORE,
+    type: DUW_UPDATE_REASON,
+    payload: value,
+  };
+};
+
+export const updateCourtMartial = value => {
+  return {
+    type: DUW_UPDATE_COURT_MARTIAL,
+    payload: value,
+  };
+};
+
+export const updateIntention = value => {
+  return {
+    type: DUW_UPDATE_INTENTION,
+    payload: value,
+  };
+};
+
+export const updateDischargeType = value => {
+  return {
+    type: DUW_UPDATE_DISCHARGE_TYPE,
     payload: value,
   };
 };

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import environment from 'platform/utilities/environment';
 import Breadcrumbs from './Breadcrumbs';
+import BreadcrumbsV2 from './v2/BreadcrumbsV2';
 
 export default function DischargeWizardApp({ children }) {
   const isProd = environment.isProduction();
@@ -16,7 +17,7 @@
   }
   return (
     <div className="row discharge-wizard-v2 vads-u-padding-x--1 large-screen:vads-u-padding-x--0 vads-u-padding-bottom--8">
-      <Breadcrumbs />
+      <BreadcrumbsV2 />
       <div className="usa-width-two-thirds medium-8 columns">{children}</div>
     </div>
   );

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { VaBreadcrumbs } from '@department-of-veterans-affairs/web-components/react-bindings';
+
+const BreadcrumbsV2 = () => (
+  <VaBreadcrumbs
+    class="vads-u-margin-left--1p5"
+    label="Breadcrumbs"
+    uswds
+    breadcrumbList={[
+      {
+        href: '/',
+        label: 'Home',
+      },
+      {
+        href: '/discharge-upgrade-instructions/introduction',
+        label: 'Discharge upgrade',
+      },
+    ]}
+  />
+);
+
+export default BreadcrumbsV2;

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

@@ -69,6 +69,7 @@ const HomePage = ({ router, setIntroPageViewed }) => {
                     {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
                     <Link
                       className="vads-c-action-link--green"
+                      data-testid="duw-start-form"
                       href="#"
                       onClick={startForm}
                     >

src/applications/discharge-wizard/components/v2/questions/CourtMartial.jsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import {
+  QUESTION_MAP,
+  RESPONSES,
+  SHORT_NAME_MAP,
+} from '../../../constants/question-data-map';
+import RadioGroup from './shared/RadioGroup';
+import { updateCourtMartial } from '../../../actions';
+import { pageSetup } from '../../../utilities/page-setup';
+import { ROUTES } from '../../../constants';
+
+const CourtMartial = ({
+  formResponses,
+  setCourtMartial,
+  router,
+  viewedIntroPage,
+}) => {
+  const [formError, setFormError] = useState(false);
+  const shortName = SHORT_NAME_MAP.COURT_MARTIAL;
+  const H1 = QUESTION_MAP[shortName];
+  const courtMartial = formResponses[shortName];
+  const { COURT_MARTIAL_1, COURT_MARTIAL_2, COURT_MARTIAL_3 } = RESPONSES;
+
+  useEffect(
+    () => {
+      pageSetup(H1);
+    },
+    [H1],
+  );
+
+  useEffect(
+    () => {
+      if (!viewedIntroPage) {
+        router.push(ROUTES.HOME);
+      }
+    },
+    [router, viewedIntroPage],
+  );
+
+  return (
+    <RadioGroup
+      formError={formError}
+      formResponses={formResponses}
+      formValue={courtMartial}
+      H1={H1}
+      responses={[COURT_MARTIAL_1, COURT_MARTIAL_2, COURT_MARTIAL_3]}
+      router={router}
+      setFormError={setFormError}
+      shortName={shortName}
+      testId="duw-court_martial"
+      valueSetter={setCourtMartial}
+    />
+  );
+};
+
+CourtMartial.propTypes = {
+  formResponses: PropTypes.object,
+  router: PropTypes.shape({
+    push: PropTypes.func,
+  }),
+  setCourtMartial: PropTypes.func,
+  viewedIntroPage: PropTypes.bool,
+};
+
+const mapStateToProps = state => ({
+  formResponses: state?.dischargeUpgradeWizard?.duwForm?.form,
+  viewedIntroPage: state?.dischargeUpgradeWizard?.duwForm?.viewedIntroPage,
+});
+
+const mapDispatchToProps = {
+  setCourtMartial: updateCourtMartial,
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(CourtMartial);

src/applications/discharge-wizard/components/v2/questions/DischargeMonth.jsx

@@ -2,7 +2,7 @@
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
 import { months } from 'platform/static-data/options-for-select';
 import {
   QUESTION_MAP,
   SHORT_NAME_MAP,
@@ -42,7 +42,11 @@
   const dischargeMonth = formResponses[shortName];
   const monthOptions = months.map(month => {
     return (
-      <option key={month.value} value={month.value}>
+      <option
+        data-testid="va-select-option"
+        key={month.value}
+        value={month.value}
+      >
         {month.label}
       </option>
     );

src/applications/discharge-wizard/components/v2/questions/DischargeType.jsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import {
+  QUESTION_MAP,
+  RESPONSES,
+  SHORT_NAME_MAP,
+} from '../../../constants/question-data-map';
+import RadioGroup from './shared/RadioGroup';
+import { updateDischargeType } from '../../../actions';
+import { pageSetup } from '../../../utilities/page-setup';
+import { ROUTES } from '../../../constants';
+
+const DischargeType = ({
+  formResponses,
+  setDischargeType,
+  router,
+  viewedIntroPage,
+}) => {
+  const [formError, setFormError] = useState(false);
+  const shortName = SHORT_NAME_MAP.DISCHARGE_TYPE;
+  const H1 = QUESTION_MAP[shortName];
+  const dischargeType = formResponses[shortName];
+  const { DISCHARGE_TYPE_1, DISCHARGE_TYPE_2 } = RESPONSES;
+
+  useEffect(
+    () => {
+      pageSetup(H1);
+    },
+    [H1],
+  );
+
+  useEffect(
+    () => {
+      if (!viewedIntroPage) {
+        router.push(ROUTES.HOME);
+      }
+    },
+    [router, viewedIntroPage],
+  );
+
+  return (
+    <RadioGroup
+      formError={formError}
+      formResponses={formResponses}
+      formValue={dischargeType}
+      H1={H1}
+      responses={[DISCHARGE_TYPE_1, DISCHARGE_TYPE_2]}
+      router={router}
+      setFormError={setFormError}
+      shortName={shortName}
+      testId="duw-discharge_type"
+      valueSetter={setDischargeType}
+    />
+  );
+};
+
+DischargeType.propTypes = {
+  formResponses: PropTypes.object,
+  setDischargeType: PropTypes.func,
+  router: PropTypes.shape({
+    push: PropTypes.func,
+  }),
+  viewedIntroPage: PropTypes.bool,
+};
+
+const mapStateToProps = state => ({
+  formResponses: state?.dischargeUpgradeWizard?.duwForm?.form,
+  viewedIntroPage: state?.dischargeUpgradeWizard?.duwForm?.viewedIntroPage,
+});
+
+const mapDispatchToProps = {
+  setDischargeType: updateDischargeType,
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(DischargeType);

src/applications/discharge-wizard/components/v2/questions/DischargeYear.jsx

@@ -44,15 +44,15 @@ const DischargeYear = ({
   const yearOptions = range(currentYear - 1992).map(i => {
     const year = currentYear - i;
     return (
-      <option key={i} value={year.toString()}>
+      <option data-testid="va-select-option" key={i} value={year.toString()}>
         {year.toString()}
       </option>
     );
   });
   const before1992Key = yearOptions.length + 1;
 
   yearOptions.push(
-    <option key={before1992Key} value="1991">
+    <option data-testid="va-select-option" key={before1992Key} value="1991">
       Before 1992
     </option>,
   );

src/applications/discharge-wizard/components/v2/questions/Intention.jsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import {
+  QUESTION_MAP,
+  RESPONSES,
+  SHORT_NAME_MAP,
+} from '../../../constants/question-data-map';
+import RadioGroup from './shared/RadioGroup';
+import { updateIntention } from '../../../actions';
+import { pageSetup } from '../../../utilities/page-setup';
+import { ROUTES } from '../../../constants';
+
+const Intention = ({
+  formResponses,
+  setIntention,
+  router,
+  viewedIntroPage,
+}) => {
+  const [formError, setFormError] = useState(false);
+  const shortName = SHORT_NAME_MAP.INTENTION;
+  const H1 = QUESTION_MAP[shortName];
+  const intention = formResponses[shortName];
+  const { INTENTION_1, INTENTION_2 } = RESPONSES;
+
+  useEffect(
+    () => {
+      pageSetup(H1);
+    },
+    [H1],
+  );
+
+  useEffect(
+    () => {
+      if (!viewedIntroPage) {
+        router.push(ROUTES.HOME);
+      }
+    },
+    [router, viewedIntroPage],
+  );
+
+  return (
+    <RadioGroup
+      formError={formError}
+      formResponses={formResponses}
+      formValue={intention}
+      H1={H1}
+      responses={[INTENTION_1, INTENTION_2]}
+      router={router}
+      setFormError={setFormError}
+      shortName={shortName}
+      testId="duw-intention"
+      valueSetter={setIntention}
+    />
+  );
+};
+
+Intention.propTypes = {
+  formResponses: PropTypes.object,
+  setIntention: PropTypes.func,
+  router: PropTypes.shape({
+    push: PropTypes.func,
+  }),
+  viewedIntroPage: PropTypes.bool,
+};
+
+const mapStateToProps = state => ({
+  formResponses: state?.dischargeUpgradeWizard?.duwForm?.form,
+  viewedIntroPage: state?.dischargeUpgradeWizard?.duwForm?.viewedIntroPage,
+});
+
+const mapDispatchToProps = {
+  setIntention: updateIntention,
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(Intention);