Khalin/appeals 45867

client/app/queue/correspondence/correspondenceReducer/reviewPackageActions.js

@@ -40,6 +40,16 @@ export const setVeteranInformation = (veteranInfo) =>
     });
   };
 
+export const setCreateRecordIsReadOnly = (createRecordIsReadOnly) =>
+  (dispatch) => {
+    dispatch({
+      type: ACTIONS.CREATE_RECORD_IS_READ_ONLY,
+      payload: {
+        createRecordIsReadOnly
+      }
+    });
+  };
+
 export const updateCmpInformation = (packageDocumentType, date) =>
   (dispatch) => {
     dispatch({

client/app/queue/correspondence/correspondenceReducer/reviewPackageConstants.js

@@ -12,4 +12,5 @@ export const ACTIONS = {
   SET_BATCH_AUTO_ASSIGN_ATTEMPT_ID: 'SET_BATCH_AUTO_ASSIGN_ATTEMPT_ID',
   SET_AUTO_ASSIGN_BUTTON_DISABLED: 'AUTO_ASSIGN_BUTTON_DISABLED',
   REASSIGN_PACKAGE_ACTION: 'REASSIGN_PACKAGE_ACTION',
+  CREATE_RECORD_IS_READ_ONLY: 'CREATE_RECORD_IS_READ_ONLY',
 };

client/app/queue/correspondence/correspondenceReducer/reviewPackageReducer.js

@@ -9,6 +9,7 @@ export const initialState = {
   lastAction: {},
   taskInstructions: [],
   reasonForRemovePackage: {},
+  createRecordIsReadOnly: 'Select...',
   autoAssign: {
     isButtonDisabled: false,
     batchId: null,
@@ -47,6 +48,15 @@ export const reviewPackageReducer = (state = initialState, action = {}) => {
       }
     });
 
+  case ACTIONS.CREATE_RECORD_IS_READ_ONLY:
+
+    return update(state, {
+
+      createRecordIsReadOnly: {
+        $set: action.payload.createRecordIsReadOnly
+      }
+    });
+
   case ACTIONS.UPDATE_CMP_INFORMATION:
     return update(state, {
       correspondence: {

client/app/queue/correspondence/review_package/CorrespondenceReviewPackage.jsx

@@ -39,13 +39,16 @@ export const CorrespondenceReviewPackage = (props) => {
   const [displayIntakeAppeal, setDisplayIntakeAppeal] = useState(true);
   const [apiResponse, setApiResponse] = useState(null);
   const [disableButton, setDisableButton] = useState(false);
+  const [isReturnToQueue, setIsReturnToQueue] = useState(false);
   const [showModal, setShowModal] = useState(false);
   const [packageActionModal, setPackageActionModal] = useState(null);
   const [errorMessage, setErrorMessage] = useState('');
   const [selectedId, setSelectedId] = useState(0);
   const [isReadOnly, setIsReadOnly] = useState(false);
   const [isReassignPackage, setIsReassignPackage] = useState(false);
   const [isEfolderUploadFailedTask, setIsEfolderUploadFailedTask] = useState(true);
+  const [corrTypeSelected, setCorrTypeSelected] = useState(true);
+  const [corrTypeSaved, setCorrTypeSaved] = useState(-1);
   const [reviewPackageDetails, setReviewPackageDetails] = useState({
     veteranName: '',
     taskId: [],
@@ -168,7 +171,7 @@ export const CorrespondenceReviewPackage = (props) => {
   }, []);
 
   const handleModalClose = () => {
-    if (disableButton) {
+    if (isReturnToQueue) {
       setShowModal(!showModal);
     } else {
       history.goBack();
@@ -189,7 +192,7 @@ export const CorrespondenceReviewPackage = (props) => {
     const selectValueChanged = editableData.default_select_value !== apiResponse.correspondence_type_id;
     const selectDateChanged = editableData.va_date_of_receipt !== apiResponse.va_date_of_receipt;
 
-    return notesChanged || fileNumberChanged || selectValueChanged || selectDateChanged;
+    return notesChanged || fileNumberChanged || selectValueChanged || selectDateChanged || corrTypeSelected;
   };
 
   const intakeAppeal = async () => {
@@ -268,13 +271,18 @@ export const CorrespondenceReviewPackage = (props) => {
               setEditableData,
               disableButton,
               setDisableButton,
+              setIsReturnToQueue,
               fetchData,
               showModal,
               handleModalClose,
               handleReview,
               errorMessage,
               setErrorMessage,
-              isReadOnly
+              isReadOnly,
+              corrTypeSaved,
+              setCorrTypeSaved,
+              corrTypeSelected,
+              setCorrTypeSelected
             }}
             {...props}
             userIsCorrespondenceSupervisor={props.userIsCorrespondenceSupervisor}
@@ -310,7 +318,7 @@ export const CorrespondenceReviewPackage = (props) => {
                 name="Create record"
                 classNames={['usa-button-primary']}
                 onClick={intakeLink}
-                disabled={disableButton || isReadOnly}
+                disabled={corrTypeSelected}
               />
             </a>
           </div>
@@ -331,14 +339,16 @@ CorrespondenceReviewPackage.propTypes = {
   doFileNumberSearch: PropTypes.func,
   userIsCorrespondenceSupervisor: PropTypes.bool,
   userIsCorrespondenceSuperuser: PropTypes.bool,
-  isInboundOpsSuperuser: PropTypes.bool
+  isInboundOpsSuperuser: PropTypes.bool,
+  createRecordIsReadOnly: PropTypes.string
 };
 
 const mapStateToProps = (state) => ({
   correspondence: state.reviewPackage.correspondence,
   correspondenceDocuments: state.reviewPackage.correspondenceDocuments,
   packageDocumentType: state.reviewPackage.packageDocumentType,
   veteranInformation: state.reviewPackage.veteranInformation,
+  createRecordIsReadOnly: state.reviewPackage.createRecordIsReadOnly,
 });
 
 const mapDispatchToProps = (dispatch) => bindActionCreators({

client/app/queue/correspondence/review_package/ReviewForm.jsx

@@ -1,5 +1,5 @@
 import AppSegment from '@department-of-veterans-affairs/caseflow-frontend-toolkit/components/AppSegment';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { connect, useSelector } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import TextField from '../../../components/TextField';
@@ -10,19 +10,50 @@ import ApiUtil from '../../../util/ApiUtil';
 import PropTypes from 'prop-types';
 import Modal from '../../../components/Modal';
 import DateSelector from '../../../components/DateSelector';
-import { updateCmpInformation } from '../correspondenceReducer/reviewPackageActions';
+import { updateCmpInformation, setCreateRecordIsReadOnly } from '../correspondenceReducer/reviewPackageActions';
 import { validateDateNotInFuture } from '../../../intake/util/issues';
 import moment from 'moment';
 
 export const ReviewForm = (props) => {
+  const correspondenceTypes = props.veteranInformation.correspondence_types;
+  // eslint-disable-next-line max-len
+  const [correspondenceTypeID, setCorrespondenceTypeID] = useState(props.editableData.default_select_value);
   // eslint-disable-next-line max-len
   const [vaDORDate, setVADORDate] = useState(moment.utc((props.correspondence.va_date_of_receipt)).format('YYYY-MM-DD'));
   const [dateError, setDateError] = useState(false);
+  const [saveChanges, setSaveChanges] = useState(true);
   const stateCorrespondence = useSelector(
     (state) => state.reviewPackage.correspondence
   );
 
+  useEffect(() => {
+    setCorrespondenceTypeID(-1);
+    setCreateRecordIsReadOnly('Select...');
+  }, []);
+
+  const handleCorrespondenceTypeEmpty = () => {
+    if (correspondenceTypeID < 0) {
+      return 'Select...';
+    }
+
+    return correspondenceTypes[correspondenceTypeID].name;
+  };
+
+  const isCorrTypeSelected = () => {
+    if (props.createRecordIsReadOnly === 'Select...') {
+      props.setCorrTypeSelected(true);
+    // eslint-disable-next-line no-negated-condition
+    } else if (props.createRecordIsReadOnly === '' && props.corrTypeSaved !== -1) {
+      props.setCorrTypeSelected(false);
+    } else {
+      props.setCorrTypeSelected(true);
+    }
+  };
+
   const handleFileNumber = (value) => {
+    setSaveChanges(false);
+    props.setIsReturnToQueue(true);
+    isCorrTypeSelected();
     const isNumeric = value === '' || (/^\d{0,9}$/).test(value);
 
     if (isNumeric) {
@@ -36,6 +67,8 @@ export const ReviewForm = (props) => {
   };
 
   const handleChangeNotes = (value) => {
+    setSaveChanges(false);
+    props.setIsReturnToQueue(true);
     const updatedNotes = {
       ...props.editableData,
       notes: value,
@@ -62,11 +95,16 @@ export const ReviewForm = (props) => {
   };
 
   const handleSelectCorrespondenceType = (val) => {
+    setSaveChanges(false);
+    props.setIsReturnToQueue(true);
+    setCorrespondenceTypeID(val.id - 1);
     const updatedSelectedValue = {
       ...props.editableData,
       default_select_value: val.id,
     };
 
+    props.setCreateRecordIsReadOnly(handleCorrespondenceTypeEmpty());
+    props.setCorrTypeSaved(updatedSelectedValue.default_select_value);
     props.setEditableData(updatedSelectedValue);
   };
 
@@ -100,6 +138,8 @@ export const ReviewForm = (props) => {
   };
 
   const handleSubmit = async () => {
+    props.setCreateRecordIsReadOnly('');
+    isCorrTypeSelected();
     const correspondence = props;
     const payloadData = {
       data: {
@@ -122,9 +162,10 @@ export const ReviewForm = (props) => {
 
       const { body } = response;
 
+      props.setDisableButton((current) => !current);
+      props.setIsReturnToQueue(false);
       if (body.status === 'ok') {
         props.fetchData();
-        props.setDisableButton((current) => !current);
         props.setErrorMessage('');
       }
     } catch (error) {
@@ -133,6 +174,20 @@ export const ReviewForm = (props) => {
       props.setErrorMessage(body.error);
     }
   };
+  // Tracking the Correspondence type value changing for the Create record button
+
+  useEffect(() => {
+    isCorrTypeSelected();
+  }, [handleSubmit]);
+
+  // Prevents save action in case of errorMessage
+  useEffect(() => {
+
+    if (props.errorMessage) {
+      return;
+    }
+    setSaveChanges(true);
+  }, []);
 
   const veteranFileNumStyle = () => {
     if (props.errorMessage) {
@@ -199,7 +254,7 @@ export const ReviewForm = (props) => {
           name="Save changes"
           href="/queue/correspondence/12/intake"
           classNames={['usa-button-primary']}
-          disabled={!props.disableButton || props.isReadOnly || dateError}
+          disabled={!props.disableButton || props.isReadOnly || dateError || saveChanges}
           onClick={handleSubmit}
         />
       </div>
@@ -249,7 +304,7 @@ export const ReviewForm = (props) => {
                 options={generateOptions(props.reviewDetails.dropdown_values)}
                 onChange={handleSelectCorrespondenceType}
                 readOnly={props.isReadOnly}
-                placeholder="Select..."
+                placeholder= {correspondenceTypeID < 0 ? 'Select...' : handleCorrespondenceTypeEmpty}
               />
             </div>
           </div>
@@ -294,10 +349,18 @@ ReviewForm.propTypes = {
     veteran_file_number: PropTypes.string,
     default_select_value: PropTypes.number,
   }),
+  veteranInformation: PropTypes.shape({
+    correspondence_types: PropTypes.array,
+  }),
   disableButton: PropTypes.bool,
+  setIsReturnToQueue: PropTypes.bool,
   setEditableData: PropTypes.func,
+  setCreateRecordIsReadOnly: PropTypes.func,
+  createRecordIsReadOnly: PropTypes.string,
+  setCorrTypeSaved: PropTypes.func,
   setDisableButton: PropTypes.func,
   setErrorMessage: PropTypes.func,
+  corrTypeSaved: PropTypes.number,
   fetchData: PropTypes.func,
   showModal: PropTypes.bool,
   handleModalClose: PropTypes.func,
@@ -308,6 +371,7 @@ ReviewForm.propTypes = {
   userIsCorrespondenceSuperuser: PropTypes.bool,
   userIsCorrespondenceSupervisor: PropTypes.bool,
   correspondence: PropTypes.object,
+  setCorrTypeSelected: PropTypes.bool
 };
 
 const mapStateToProps = (state) => ({
@@ -318,7 +382,8 @@ const mapStateToProps = (state) => ({
 });
 
 const mapDispatchToProps = (dispatch) => bindActionCreators({
-  updateCmpInformation
+  updateCmpInformation,
+  setCreateRecordIsReadOnly
 }, dispatch);
 
 export default

client/test/app/queue/correspondences/ReviewForm.test.js

@@ -26,6 +26,8 @@ describe('ReviewForm', () => {
   });
 
   it('renders the component', () => {
+     const mockFunction = jest.fn();
+    props.setCorrTypeSelected = mockFunction;
     render(
       <Provider store={store}>
         <ReviewForm {...props} />;
@@ -40,6 +42,9 @@ describe('ReviewForm', () => {
   });
 
   it('check if button is disabled', () => {
+    const mockFunction = jest.fn();
+    props.setCorrTypeSelected = mockFunction;
+
     render(
       <Provider store={store}>
         <ReviewForm {...props} />
@@ -53,8 +58,10 @@ describe('ReviewForm', () => {
 
   it('check if button is enable', () => {
     const mockFunction = jest.fn();
-
+    props.setCorrTypeSelected = mockFunction;
     props.setEditableData = mockFunction;
+    props.setIsReturnToQueue = mockFunction;
+
     render(
       <Provider store={store}>
         <ReviewForm {...props} />
@@ -64,7 +71,7 @@ describe('ReviewForm', () => {
     const inputNode = screen.getByRole('textbox', { name: 'veteran-file-number-input' });
 
     fireEvent.change(inputNode, { target: { value: '12345678' } });
-    expect(mockFunction).toHaveBeenCalledTimes(1);
+    expect(mockFunction).toHaveBeenCalledTimes(6);
   });
 
 });