NOD | Ensure API-loaded issues are in place (#26235)

* Ensure API-loaded issues are in place

* Add empty dependency array

* Fix unit test

* Fix unit test, x2

src/applications/appeals/10182/components/ContestableIssuesWidget.jsx

@@ -12,6 +12,8 @@ import {
   FETCH_CONTESTABLE_ISSUES_FAILED,
 } from '../actions';
 import { APP_NAME } from '../constants';
+import { nodPart3UpdateFeature } from '../utils/helpers';
+import { getEligibleContestableIssues } from '../utils/submit';
 
 import {
   LAST_ISSUE,
@@ -50,9 +52,11 @@ import { focusIssue } from '../../shared/utils/focus';
  * @param {Object} registry - contains definitions, fields, widgets & templates
  * @param {Boolean} required - Show required flag
  * @param {Object} schema - array schema
- * @param {Object[]} value - array value
+ * @param {Object[]} value - array value (contested issues only)
  * @param {Object} contestableIssues - API status & loaded issues
  * @param {func} getContestableIssues - API action
+ * @param {Object} formData - full form data
+ * @param {Boolean} showPart3 - feature flag
  * @return {JSX}
  */
 const ContestableIssuesWidget = props => {
@@ -63,9 +67,11 @@ const ContestableIssuesWidget = props => {
     formContext = {},
     apiLoadStatus, // API loaded status
     getContestableIssues,
+    contestableIssues,
     additionalIssues,
     setFormData,
     formData,
+    showPart3,
   } = props;
 
   const [showErrorModal, setShowErrorModal] = useState(false);
@@ -96,6 +102,25 @@ const ContestableIssuesWidget = props => {
     [editState],
   );
 
+  useEffect(() => {
+    // contestedIssues becomes undefined after a new save-in-progress loads
+    // (prefill) and removes formData.contestedIssues added by FormApp
+    // Eventually, we'll move all the API-loading & updating code on to the
+    // contestable issues page and remove it all from FormApp
+    if (formData?.contestedIssues === undefined) {
+      setFormData({
+        ...formData,
+        contestedIssues: getEligibleContestableIssues(
+          contestableIssues?.issues,
+          {
+            showPart3,
+          },
+        ),
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const onReviewPage = formContext?.onReviewPage || false;
   window.sessionStorage.setItem(REVIEW_ISSUES, onReviewPage);
 
@@ -271,16 +296,22 @@ const ContestableIssuesWidget = props => {
 ContestableIssuesWidget.propTypes = {
   additionalIssues: PropTypes.array,
   apiLoadStatus: PropTypes.string,
+  contestableIssues: PropTypes.shape({
+    issues: PropTypes.array,
+  }),
   formContext: PropTypes.shape({
     onReviewPage: PropTypes.bool,
     reviewMode: PropTypes.bool,
     submitted: PropTypes.bool,
   }),
-  formData: PropTypes.shape({}),
+  formData: PropTypes.shape({
+    contestedIssues: PropTypes.array,
+  }),
   getContestableIssues: PropTypes.func,
   id: PropTypes.string,
   options: PropTypes.shape({}),
   setFormData: PropTypes.func,
+  showPart3: PropTypes.bool,
   value: PropTypes.array,
   onChange: PropTypes.func,
 };
@@ -289,6 +320,8 @@ const mapStateToProps = state => ({
   formData: state.form?.data || {},
   apiLoadStatus: state.contestableIssues?.status || '',
   additionalIssues: state.form?.data.additionalIssues || [],
+  contestableIssues: state?.contestableIssues,
+  showPart3: nodPart3UpdateFeature(state),
 });
 const mapDispatchToProps = {
   setFormData: setData,

src/applications/appeals/10182/containers/FormApp.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
 import RoutedSavableApp from 'platform/forms/save-in-progress/RoutedSavableApp';
-import { selectProfile, isLoggedIn } from 'platform/user/selectors';
+import { isLoggedIn } from 'platform/user/selectors';
 import { setData } from 'platform/forms-system/src/js/actions';
 
 import { getContestableIssues as getContestableIssuesAction } from '../actions';
@@ -34,7 +34,6 @@ export const FormApp = ({
   getContestableIssues,
   contestableIssues = {},
 }) => {
-  // Update profile data changes in the form data dynamically
   useEffect(
     () => {
       if (loggedIn) {
@@ -165,15 +164,11 @@ FormApp.propTypes = {
     pathname: PropTypes.string,
   }),
   loggedIn: PropTypes.bool,
-  profile: PropTypes.shape({
-    vapContactInfo: PropTypes.shape({}),
-  }),
   setFormData: PropTypes.func,
   showPart3: PropTypes.bool,
 };
 
 const mapStateToProps = state => ({
-  profile: selectProfile(state),
   formData: state.form?.data || {},
   showPart3: nodPart3UpdateFeature(state),
   contestableIssues: state.contestableIssues,

src/applications/appeals/10182/tests/components/ContestableIssuesWidget.unit.spec.jsx

@@ -12,6 +12,7 @@ import {
 } from '../../actions';
 
 import { SELECTED } from '../../../shared/constants';
+import { getRandomDate } from '../nod.cypress.helpers';
 
 describe('<ContestableIssuesWidget>', () => {
   const getProps = ({
@@ -21,23 +22,39 @@ describe('<ContestableIssuesWidget>', () => {
     setFormData = () => {},
     getContestableIssues = () => {},
     apiLoadStatus = '',
-  } = {}) => ({
-    id: 'id',
-    value: [
-      { attributes: { ratingIssueSubjectText: 'issue-1' } },
-      { attributes: { ratingIssueSubjectText: 'issue-2' } },
-    ],
-    additionalIssues: [{ issue: 'issue-3' }],
-    onChange,
-    formContext: {
-      onReviewPage: review,
-      reviewMode: review,
-      submitted,
-    },
-    setFormData,
-    getContestableIssues,
-    apiLoadStatus,
-  });
+  } = {}) => {
+    const issues = [
+      {
+        attributes: {
+          ratingIssueSubjectText: 'issue-1',
+          approxDecisionDate: getRandomDate(),
+        },
+      },
+      {
+        attributes: {
+          ratingIssueSubjectText: 'issue-2',
+          approxDecisionDate: getRandomDate(),
+        },
+      },
+    ];
+    return {
+      id: 'id',
+      value: issues,
+      additionalIssues: [{ issue: 'issue-3', decisionDate: getRandomDate() }],
+      onChange,
+      formContext: {
+        onReviewPage: review,
+        reviewMode: review,
+        submitted,
+      },
+      formData: { contestedIssues: issues },
+      setFormData,
+      getContestableIssues,
+      contestableIssues: { issues },
+      showPart3: true,
+      apiLoadStatus,
+    };
+  };
 
   it('should render a list of check boxes (IssueCard component)', () => {
     const props = getProps();
@@ -144,7 +161,7 @@ describe('<ContestableIssuesWidget>', () => {
     fireEvent.click(removeButton[0]);
 
     const modal = $('va-modal', container);
-    modal.__events.secondaryButtonClick(); // Remove entry
+    await modal.__events.secondaryButtonClick(); // Remove entry
 
     await waitFor(() => {
       expect(setFormDataSpy.called).to.be.false;