Merge branch 'feature/APPEALS-27311' into Div/Spec-fixes

app/controllers/correspondence_controller.rb

@@ -51,6 +51,7 @@ def review_package
     render "correspondence/review_package"
   end
 
+  # rubocop:disable Metrics/MethodLength
   def intake_update
     tasks = Task.where("appeal_id = ? and appeal_type = ?", correspondence.id, "Correspondence")
     begin
@@ -63,16 +64,18 @@ def intake_update
         task.status = "cancelled"
         task.save
       end
-      if correspondence_intake_processor.upload_documents_to_claim_evidence(correspondence, current_user)
+      if upload_documents_to_claim_evidence
         render json: { correspondence: correspondence }
       else
-        render json: {}, status: bad_request
+        render json: {}, status: :bad_request
       end
     rescue StandardError => error
       Rails.logger.error(error.to_s)
-      render json: {}, status: bad_request
+      Raven.capture_exception(error)
+      render json: {}, status: :bad_request
     end
   end
+  # rubocop:enable Metrics/MethodLength
 
   def veteran
     render json: { veteran_id: veteran_by_correspondence&.id, file_number: veteran_by_correspondence&.file_number }

app/views/correspondence/intake.html.erb

@@ -4,6 +4,9 @@
     userId: current_user.id,
     userRole: (current_user.vacols_roles.first || "").capitalize,
     userCssId: current_user.css_id,
+    dropdownUrls: dropdown_urls,
+    applicationUrls: application_urls,
+    feedbackUrl: feedback_url,
     organizations: current_user.selectable_organizations.map {|o| o.slice(:name, :url)},
     featureToggles: {
       correspondence_queue: FeatureToggle.enabled?(:correspondence_queue, user: current_user)

client/app/queue/correspondence/intake/components/ConfirmCorrespondence/ConfirmCorrespondenceView.jsx

@@ -8,23 +8,21 @@ import CorrespondenceDetailsTable from './CorrespondenceDetailsTable';
 import ConfirmTasksNotRelatedToAnAppeal from './ConfirmTasksNotRelatedToAnAppeal';
 import Table from '../../../../../components/Table';
 import ConfirmTasksRelatedToAnAppeal from './ConfirmTasksRelatedToAnAppeal';
+import { COLORS } from '../../../../../constants/AppConstants';
 
 const bodyStyling = css({
   '& > tr > td': {
-    backgroundColor: '#f5f5f5',
+    backgroundColor: COLORS.GREY_BACKGROUND,
     borderBottom: 'none',
-    borderColor: '#d6d7d9',
+    borderColor: COLORS.GREY_LIGHT,
     paddingTop: '0vh',
     paddingBottom: '0vh',
   },
 });
 
 const tableStyling = css({
-  marginBottom: '-2vh',
-  marginTop: '2vh'
-});
-const bottonStyling = css({
-  paddingRight: '0px'
+  marginBottom: '-1vh',
+  marginTop: '1vh'
 });
 
 export const ConfirmCorrespondenceView = (props) => {
@@ -124,59 +122,45 @@ export const ConfirmCorrespondenceView = (props) => {
   };
 
   return (
-    <div className="gray-border" style={{ marginBottom: '2rem', padding: '3rem 4rem' }}>
-      <h1 style={{ marginBottom: '10px' }}>Review and Confirm Correspondence</h1>
+    <div className="gray-border corr">
+      <h1 className="corr-h1">Review and Confirm Correspondence</h1>
       <p style={{ fontSize: '.85em' }}>
         Review the details below to make sure the information is correct before submitting.
         If you need to make changes, please go back to the associated section.
       </p>
-      <br></br>
-      <div>
-        <CorrespondenceDetailsTable />
-      </div>
+      <CorrespondenceDetailsTable />
       <div>
-        <div style={{ display: 'flex' }}>
-          <h2 style={{ margin: '1px 0 15px 0',
-            display: 'inline-block' }}>
-                Associated Prior Mail
-          </h2>
-          <div style={{ marginLeft: 'auto' }}>
-            <Button styling={bottonStyling} linkStyling onClick={() => props.goToStep(1)}>
-              <div style={{ marginLeft: 'auto' }}>
-                <span {...css({ position: 'absolute' })}><PencilIcon /></span>
-                <span {...css({ marginLeft: '20px' })}>Edit Section</span>
-              </div>
+        <div className="corr-flex">
+          <h2 className="corr-h2">Associated Prior Mail</h2>
+          <div className="corr-autoleft">
+            <Button className="corr-button" linkStyling onClick={() => props.goToStep(1)}>
+              <span className="corr-icon"><PencilIcon /></span>
+              <span className="corr-sectionlink">Edit Section</span>
             </Button>
           </div>
         </div>
-
-        <div {...css({ backgroundColor: '#f5f5f5', marginBottom: '20px' })}>
-
-          <div {...css({ backgroundColor: '#f5f5f5', padding: '20px' })}>
+        <div {...css({ backgroundColor: COLORS.GREY_BACKGROUND })}>
+          <div {...css({ backgroundColor: COLORS.GREY_BACKGROUND, padding: '20px' })}>
             <Table
               columns={getDocumentColumns}
               // columnsToDisplay={15}
               rowObjects={relatedCorrespondences}
-              bodyStyling= {bodyStyling}
               styling={tableStyling}
+              bodyStyling={bodyStyling}
             />
-
           </div>
         </div>
-        <div style={{ display: 'flex' }}>
-          <h2 style={{
-            margin: '1px 0 15px 0',
-            display: 'inline-block',
-            marginLeft: '0px'
-          }}>Completed Mail Tasks</h2>
-          <div style={{ marginLeft: 'auto' }}>
-            <Button name="EditMailTasks" styling={bottonStyling} linkStyling onClick={() => props.goToStep(2)}>
-              <span {...css({ position: 'absolute' })}><PencilIcon /></span>
-              <span {...css({ marginLeft: '20px' })}>Edit Section</span>
+      </div>
+      <div>
+        <div className="corr-flex">
+          <h2 className="corr-h2">Completed Mail Tasks</h2>
+          <div className="corr-autoleft">
+            <Button className="corr-button" linkStyling onClick={() => props.goToStep(2)}>
+              <span className="corr-icon"><PencilIcon /></span>
+              <span className="corr-sectionlink">Edit Section</span>
             </Button>
           </div>
-        </div>
-        <div {...css({ backgroundColor: '#f5f5f5', padding: '20px', marginBottom: '20px' })}>
+        </div><div {...css({ backgroundColor: COLORS.GREY_BACKGROUND, padding: '20px' })}>
           <div {...css({
             borderBottom: '1px solid #d6d7d9',
             padding: '10px 0px',
@@ -200,30 +184,22 @@ export const ConfirmCorrespondenceView = (props) => {
         </div>
       </div>
       <div>
-        <div style={{ display: 'flex' }}>
-          <h2 style={{
-            margin: '1px 0 15px 0',
-            display: 'inline-block',
-            marginLeft: '0px'
-          }}>Tasks not related to an Appeal</h2>
-          <div style={{ marginLeft: 'auto' }}>
-            <Button styling={bottonStyling} linkStyling onClick={() => props.goToStep(2)}>
-              <span {...css({ position: 'absolute' })}><PencilIcon /></span>
-              <span {...css({ marginLeft: '20px' })}>Edit Section</span>
+        <div className="corr-flex">
+          <h2 className="corr-h2">Tasks not related to an Appeal</h2>
+          <div className="corr-autoleft">
+            <Button className="corr-button" linkStyling onClick={() => props.goToStep(2)}>
+              <span className="corr-icon"><PencilIcon /></span>
+              <span className="corr-sectionlink">Edit Section</span>
             </Button>
           </div>
         </div>
         <ConfirmTasksNotRelatedToAnAppeal />
-        <div style={{ display: 'flex' }}>
-          <h2 style={{
-            margin: '1px 0 15px 0',
-            display: 'inline-block',
-            marginLeft: '0px'
-          }}>Linked Appeals & New Tasks</h2>
-          <div style={{ marginLeft: 'auto' }}>
-            <Button styling={bottonStyling} linkStyling onClick={() => props.goToStep(2)}>
-              <span {...css({ position: 'absolute' })}><PencilIcon /></span>
-              <span {...css({ marginLeft: '20px' })}>Edit Section</span>
+        <div className="corr-flex">
+          <h2 className="corr-h2">Linked Appeals & New Tasks</h2>
+          <div className="corr-autoleft">
+            <Button className="corr-button" linkStyling onClick={() => props.goToStep(2)}>
+              <span className="corr-icon"><PencilIcon /></span>
+              <span className="corr-sectionlink">Edit Section</span>
             </Button>
           </div>
         </div>

client/app/queue/correspondence/intake/components/ConfirmCorrespondence/ConfirmTasksNotRelatedToAnAppeal.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
+import { COLORS } from '../../../../../constants/AppConstants';
 
-const styling = { backgroundColor: '#f5f5f5' };
+const styling = { backgroundColor: COLORS.GREY_BACKGROUND };
 
 const ConfirmTasksNotRelatedToAnAppeal = () => {
   const tasks = useSelector((state) => state.intakeCorrespondence.unrelatedTasks);
@@ -10,10 +11,10 @@ const ConfirmTasksNotRelatedToAnAppeal = () => {
     return (
       <tr key={task.id}>
         <td
-          style={{ backgroundColor: '#f5f5f5', borderTop: '1px solid #dee2e6', width: '20%' }}>
+          style={{ backgroundColor: COLORS.GREY_BACKGROUND, borderTop: '1px solid #dee2e6', width: '20%' }}>
           {task.label}
         </td>
-        <td style={{ backgroundColor: '#f5f5f5', borderTop: '1px solid #dee2e6' }}>
+        <td style={{ backgroundColor: COLORS.GREY_BACKGROUND, borderTop: '1px solid #dee2e6' }}>
           {task.content}
         </td>
       </tr>
@@ -25,7 +26,7 @@ const ConfirmTasksNotRelatedToAnAppeal = () => {
       <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
       </div>
       <div
-        style={{ background: '#f5f5f5', padding: '2rem', paddingTop: '0.5rem', marginBottom: '2rem' }}>
+        style={{ background: COLORS.GREY_BACKGROUND, padding: '2rem', paddingTop: '0.5rem' }}>
         <table className="usa-table-borderless">
           <thead>
             <tr>

client/app/queue/correspondence/intake/components/ConfirmCorrespondence/CorrespondenceDetailsTable.jsx

@@ -9,8 +9,8 @@ export const CorrespondenceDetailsTable = () => {
 
   return (
     <div>
-      <h2 className="cf-review-about-correspondence">About the Correspondence</h2>
-      <table className="usa-table-alternate-borderless">
+      <h2 className="corr-h2">About the Correspondence</h2>
+      <table className="corr-table-borderless">
         <tbody>
           <tr>
             <th><strong>Portal Entry Date</strong></th>

client/app/queue/correspondence/intake/components/CorrespondenceIntake.jsx

@@ -7,7 +7,7 @@ import { AddTasksAppealsView } from './TasksAppeals/AddTasksAppealsView';
 import { connect, useSelector } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { setUnrelatedTasks } from '../../correspondenceReducer/correspondenceActions';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import { ConfirmCorrespondenceView } from './ConfirmCorrespondence/ConfirmCorrespondenceView';
 import { SubmitCorrespondenceModal } from './ConfirmCorrespondence/SubmitCorrespondenceModal';
 import Alert from 'app/components/Alert';
@@ -39,10 +39,7 @@ export const CorrespondenceIntake = (props) => {
   const [addTasksVisible, setAddTasksVisible] = useState(false);
   const [submitCorrespondenceModalVisible, setSubmitCorrespondenceModalVisible] = useState(false);
   const [errorBannerVisible, setErrorBannerVisible] = useState(false);
-  const { pathname, hash, key } = useLocation();
   const history = useHistory();
-  // For hash routing - Add element id and which step it lives on here
-  const SECTION_MAP = { 'task-not-related-to-an-appeal': 2 };
 
   const handleContinueStatusChange = (isEnabled) => {
     setContinueEnabled(isEnabled);
@@ -96,23 +93,6 @@ export const CorrespondenceIntake = (props) => {
       );
   }, [currentStep]);
 
-  useEffect(() => {
-    if (hash === '') {
-      window.scrollTo(0, 0);
-    } else {
-      setTimeout(() => {
-        const id = hash.replace('#', '');
-
-        setCurrentStep(SECTION_MAP[id]);
-        const element = document.getElementById(id);
-
-        if (element) {
-          element.scrollIntoView();
-        }
-      }, 0);
-    }
-  }, [pathname, hash, key]);
-
   return <div>
     { errorBannerVisible &&
       <Alert title={CORRESPONDENCE_INTAKE_FORM_ERROR_BANNER_TITLE} type="error">

client/app/styles/_table.scss

@@ -179,26 +179,3 @@
     }
   }
 }
-
-// ===========================*
-// Alternate Borderless (no bottom border)
-// ===========================*
-.usa-table-alternate-borderless {
-  background-color: $color-gray-lightest;
-
-  width: 100%;
-
-  th,
-  td {
-    border: 0;
-    background-color: $color-gray-lightest;
-    padding-top: 2rem;
-    padding-bottom: 0;
-  }
-
-  td {
-    margin: 2px;
-    padding-top: 0;
-    padding-bottom: 25px;
-    }
-}

client/app/styles/queue/_correspondence.scss

@@ -95,6 +95,72 @@
   }
 }
 
+//Intake Form Styling
+.corr {
+  color: $color-black;
+  padding: 3rem 4rem;
+
+  p {
+    color: $color-black;
+  }
+
+  h1 {
+    text-align: left;
+    margin-bottom: 20px;
+  }
+
+  h2 {
+    margin-top: 30px;
+    margin-bottom: 20px;
+  }
+
+  button {
+    display: inline-block;
+    margin-top: 30px;
+    margin-right: 10px;
+    padding-right: 0;
+  }
+
+  .corr-icon {
+    position: absolute;
+}
+
+  .corr-sectionlink {
+    margin-left: 20px;
+    margin-right: 10px;
+}
+
+  .corr-flex {
+    display: flex;
+  }
+
+  .corr-autoleft {
+    margin-left: auto;
+}
+
+// Alternate Borderless (no bottom border)
+  .corr-table-borderless {
+    background-color: $caseflow-background;
+
+    width: 100%;
+    margin-bottom: 0;
+    margin-top: 0;
+
+    th,
+    td {
+      border: 0;
+      background-color: $caseflow-background;
+      padding-top: 2rem;
+      padding-bottom: 0;
+    }
+
+    td {
+      margin: 2px;
+      padding-top: 0;
+      padding-bottom: 25px;
+      }
+  }
+}
 .correspondence-doctype-edit-dropdown .cf-select .cf-select__control {
   max-width: 43rem;
 }