Merge branch 'main' into feature/user-rum-session

package.json

@@ -318,7 +318,7 @@
     "url-search-params-polyfill": "^8.1.1",
     "uswds": "1.6.10",
     "vanilla-lazyload": "^16.1.0",
-    "vets-json-schema": "https://github.com/department-of-veterans-affairs/vets-json-schema.git#59bbc8ad75bbb8798fe099ce179d35ad312068a6"
+    "vets-json-schema": "https://github.com/department-of-veterans-affairs/vets-json-schema.git#6941836945d2c45390c96c03e2c0de9e31ece3a5"
   },
   "resolutions": {
     "**/lodash": "4.17.21",

src/applications/appeals/10182/content/boardReview.jsx

@@ -3,55 +3,31 @@ import React from 'react';
 export const boardReviewErrorMessage =
   'Choose a Board review option to proceed';
 
-const title = 'Select a Board review option:';
+export const boardReviewTitle = 'Select a Board review option:';
 
-export const boardReviewTitle = (
-  <h3 className="vads-u-display--inline">{title}</h3>
-);
+// export const boardReviewTitle = (
+//   <h3 className="vads-u-display--inline">{title}</h3>
+// );
 
 /* eslint-disable camelcase */
-export const boardReviewContent = {
-  direct_review: (
-    <>
-      <strong>Request a direct review</strong>
-      <p className="hide-on-review">
-        A Veterans Law Judge will review your appeal based on evidence already
-        submitted. Because the Board has all your evidence, choosing this option
-        will often result in a faster decision.
-      </p>
-    </>
-  ),
-
-  evidence_submission: (
-    <>
-      <strong>Submit more evidence</strong>
-      <p className="hide-on-review">
-        You can submit additional evidence within 90 days after submitting your
-        Board appeal. Choose this option if you want to turn in additional
-        evidence but don’t want to wait for a hearing with a Veterans Law Judge.
-        Choosing this option will extend the time it takes for the Board to
-        decide your appeal.
-      </p>
-    </>
-  ),
-
-  hearing: (
-    <>
-      <strong>Request a hearing</strong>
-      <p className="hide-on-review">
-        You can request a Board hearing with a Veterans Law Judge and submit
-        additional evidence within 90 days after your hearing. Keep in mind that
-        this option has the longest wait time for a decision because there are
-        currently tens of thousands of pending hearing requests.
-      </p>
-    </>
-  ),
+export const boardReviewLabels = {
+  direct_review: 'Request a direct review',
+  evidence_submission: 'Submit more evidence',
+  hearing: 'Request a hearing',
+};
+export const boardReviewDescriptions = {
+  direct_review:
+    'A Veterans Law Judge will review your appeal based on evidence already submitted. Because the Board has all your evidence, choosing this option will often result in a faster decision.',
+  evidence_submission:
+    'You can submit additional evidence within 90 days after submitting your Board appeal. Choose this option if you want to turn in additional evidence but don’t want to wait for a hearing with a Veterans Law Judge. Choosing this option will extend the time it takes for the Board to decide your appeal.',
+  hearing:
+    'You can request a Board hearing with a Veterans Law Judge and submit additional evidence within 90 days after your hearing. Keep in mind that this option has the longest wait time for a decision because there are currently tens of thousands of pending hearing requests.',
 };
 /* eslint-enable camelcase */
 
 export const BoardReviewReviewField = ({ children }) => (
   <div className="review-row">
-    <dt>{title}</dt>
+    <dt>{boardReviewTitle}</dt>
     <dd>
       {children?.props?.formData ? (
         children

src/applications/appeals/10182/pages/boardReview.js

@@ -1,34 +1,54 @@
+import {
+  radioSchema,
+  radioUI,
+} from 'platform/forms-system/src/js/web-component-patterns';
+
 import {
   boardReviewTitle,
-  boardReviewContent,
+  boardReviewLabels,
+  boardReviewDescriptions,
   boardReviewErrorMessage,
   BoardReviewReviewField,
 } from '../content/boardReview';
 
 const boardReview = {
   uiSchema: {
     boardReviewOption: {
-      'ui:title': boardReviewTitle,
-      'ui:reviewField': BoardReviewReviewField,
-      'ui:widget': 'radio',
-      'ui:options': {
-        labels: boardReviewContent,
+      ...radioUI({
+        title: boardReviewTitle,
+        labelHeaderLevel: '3',
+        labels: boardReviewLabels,
+        descriptions: boardReviewDescriptions,
         enableAnalytics: true,
-      },
-      'ui:errorMessages': {
-        required: boardReviewErrorMessage,
-      },
+        errorMessages: {
+          required: boardReviewErrorMessage,
+        },
+      }),
+      'ui:reviewField': BoardReviewReviewField,
     },
+    // boardReviewOption: {
+    //   'ui:title': boardReviewTitle,
+    //   'ui:reviewField': BoardReviewReviewField,
+    //   'ui:widget': 'radio',
+    //   'ui:options': {
+    //     labels: boardReviewContent,
+    //     enableAnalytics: true,
+    //   },
+    //   'ui:errorMessages': {
+    //     required: boardReviewErrorMessage,
+    //   },
+    // },
   },
 
   schema: {
     type: 'object',
     required: ['boardReviewOption'],
     properties: {
-      boardReviewOption: {
-        type: 'string',
-        enum: ['direct_review', 'evidence_submission', 'hearing'],
-      },
+      boardReviewOption: radioSchema([
+        'direct_review',
+        'evidence_submission',
+        'hearing',
+      ]),
     },
   },
 };

src/applications/appeals/10182/tests/pages/boardReview.unit.spec.jsx

@@ -27,7 +27,7 @@ describe('NOD board review page', () => {
       />,
     );
 
-    expect($$('input', container).length).to.equal(3);
+    expect($$('va-radio-option', container).length).to.equal(3);
   });
 
   it('should allow submit', () => {
@@ -43,10 +43,14 @@ describe('NOD board review page', () => {
       />,
     );
 
-    fireEvent.click($('input[value="direct_review"]', container));
+    // fireEvent.click($('va-radio-option[value="direct_review"]', container));
+    $('va-radio', container).__events.vaValueChange({
+      detail: { value: 'direct_review' },
+    });
+
     fireEvent.submit($('form', container));
 
-    expect($$('.usa-input-error-message').length).to.equal(0);
+    expect($$('[error]').length).to.equal(0);
     expect(onSubmit.called).to.be.true;
   });
 
@@ -66,7 +70,7 @@ describe('NOD board review page', () => {
 
     fireEvent.submit($('form', container));
 
-    expect($$('.usa-input-error-message').length).to.equal(1);
+    expect($$('[error]').length).to.equal(1);
     expect(onSubmit.called).to.be.false;
   });
 });

src/applications/claims-status/components/ClaimComplete.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import moment from 'moment';
 
-import CompleteDetails from './CompleteDetails';
+import Payments from './claim-status-tab/Payments';
 
 function ClaimComplete({ completedDate }) {
   return (
@@ -15,7 +15,13 @@ function ClaimComplete({ completedDate }) {
             : null}
         </h3>
       </div>
-      <CompleteDetails className="vads-u-margin--2" />
+      <div>
+        <p>
+          We mailed you a decision letter. It should arrive within 10 days after
+          the date we decided your claim. It can sometimes take longer.
+        </p>
+        <Payments />
+      </div>
     </>
   );
 }

src/applications/claims-status/components/ClaimStatusHeader.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { buildDateFormatter } from '../utils/helpers';
+import { buildDateFormatter, isClaimOpen } from '../utils/helpers';
 
 const isClaimComplete = claim => claim.attributes.status === 'COMPLETE';
 
@@ -15,20 +15,25 @@ const getLastUpdated = claim => {
 };
 
 function ClaimStatusHeader({ claim }) {
+  const { closeDate, status } = claim.attributes;
   const inProgress = !isClaimComplete(claim) ? 'In Progress' : null;
 
+  const isOpen = isClaimOpen(status, closeDate);
+
   return (
     <div className="claim-status-header-container">
       <h2 className="vads-u-margin-y--0">Claim status</h2>
       <p className="vads-u-margin-top--1 vads-u-margin-bottom--3 va-introtext">
         Here’s the latest information on your claim.{' '}
       </p>
-      <div className="vads-u-margin-top--0 vads-u-margin-bottom--4">
-        {inProgress && <span className="usa-label">{inProgress}</span>}
-        <p className="vads-u-margin-top--1 vads-u-margin-bottom--0">
-          {getLastUpdated(claim)}
-        </p>
-      </div>
+      {isOpen && (
+        <div className="vads-u-margin-top--0 vads-u-margin-bottom--4">
+          {inProgress && <span className="usa-label">{inProgress}</span>}
+          <p className="vads-u-margin-top--1 vads-u-margin-bottom--0">
+            {getLastUpdated(claim)}
+          </p>
+        </div>
+      )}
     </div>
   );
 }

src/applications/claims-status/components/ClaimTimeline.jsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 
 import ClaimPhase from './ClaimPhase';
 import PhaseBackWarning from './PhaseBackWarning';
-import CompleteDetails from './CompleteDetails';
 import { getUserPhase } from '../utils/helpers';
 
 const LAST_EVIDENCE_GATHERING_PHASE = 6;
@@ -64,7 +63,21 @@ export default function ClaimTimeline({ currentPhaseBack, id, events, phase }) {
           activity={activityByPhase}
           id={id}
         >
-          {userPhase === 5 && <CompleteDetails />}
+          {userPhase === 5 && (
+            <div>
+              <p>
+                We mailed you a decision letter. It should arrive within 10 days
+                after the date we decided your claim. It can sometimes take
+                longer.
+              </p>
+              <h5 className="vads-u-font-size--h4">Payments</h5>
+              <p>
+                If you are entitled to back payment (based on an effective
+                date), you can expect to receive payment within 1 month of your
+                claim’s decision date.
+              </p>
+            </div>
+          )}
         </ClaimPhase>
       </ol>
     </>

src/applications/claims-status/components/ClaimsDecision.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Link } from 'react-router';
 import moment from 'moment';
 import PropTypes from 'prop-types';
+import NextSteps from './claim-status-tab/NextSteps';
 
 const formatDate = closedDate => moment(closedDate).format('MMMM D, YYYY');
 
@@ -10,7 +11,7 @@ const headerText = closedDate =>
 
 const ClaimsDecision = ({ completedDate, showClaimLettersLink }) => (
   <>
-    <va-alert uswds="false">
+    <va-alert uswds="false" class="vads-u-margin-y--2">
       <h3 className="claims-alert-header" slot="headline">
         {completedDate && headerText(completedDate)}
       </h3>
@@ -53,46 +54,7 @@ const ClaimsDecision = ({ completedDate, showClaimLettersLink }) => (
         </p>
       </va-alert>
     )}
-    <h4 className="claims-paragraph-header vads-u-font-size--h3">Next steps</h4>
-    <p>
-      <strong>If you agree with your claim decision</strong>, you don’t need to
-      do anything else.
-    </p>
-    <p>
-      <strong>If you have new evidence</strong> that shows your condition is
-      service connected, you can file a Supplemental Claim. We’ll review your
-      claim decision using the new evidence.
-      <br />
-      <a href="/decision-reviews/supplemental-claim/">
-        Learn more about Supplemental Claims
-      </a>
-    </p>
-    <p>
-      <strong>
-        If your condition has gotten worse since you filed your claim
-      </strong>
-      , you can file a new claim for an increase in disability compensation.
-      <br />
-      <a href="/disability/how-to-file-claim/">
-        Learn how to file a VA disability claim
-      </a>
-    </p>
-    <p>
-      <strong>If you disagree with your claim decision</strong>, you can request
-      a decision review.
-      <br />
-      <a href="/resources/choosing-a-decision-review-option/">
-        Find out how to choose a decision review option
-      </a>
-    </p>
-    <p>
-      <strong>If you’re not enrolled in VA health care</strong>, you can apply
-      now.
-      <br />
-      <a href="/health-care/apply/application/introduction">
-        Apply for VA health care benefits
-      </a>
-    </p>
+    <NextSteps />
   </>
 );