department-of-veterans-affairs/vets-website

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { VaAlert } from '@department-of-veterans-affairs/component-library/dist/react-bindings';

import recordEvent from 'platform/monitoring/record-event';

import { focusH3AfterAlert } from '../utils/focus';

export const Notice5103Description = ({ onReviewPage }) => {
  const [visibleAlert, setVisibleAlert] = useState(true);
  const Header = onReviewPage ? 'h4' : 'h3';

  const analyticsEvent = {
    'alert-box-type': 'info',
    'alert-box-heading': 'If you have a presumptive condition',
    'alert-box-full-width': false,
    'alert-box-background-only': false,
    'alert-box-closeable': true,
    'reason-for-alert': 'presumptive condition details',
  };

  const hideAlert = () => {
    setVisibleAlert(false);
    recordEvent({ ...analyticsEvent, event: 'int-alert-box-close' });
    setTimeout(focusH3AfterAlert);
  };
  if (visibleAlert) {
    recordEvent({ ...analyticsEvent, event: 'visible-alert-box' });
  }

  return (
    <>
      <VaAlert
        status="info"
        closeBtnAriaLabel="Close notification"
        closeable
        onCloseEvent={hideAlert}
        showIcon
        visible={visibleAlert}
        uswds
      >
        <Header slot="headline">If you have a presumptive condition</Header>
        <p>
          If you’re filing a claim for a condition that we now consider
          presumptive under a new law or regulation (like the PACT Act), you can
          submit this form for review.
        </p>
      </VaAlert>
      <Header id="header">
        Review and acknowledge the notice of evidence needed.
      </Header>
    </>
  );
};

Notice5103Description.propTypes = {
  onReviewPage: PropTypes.bool,
};

export const content = {
  error:
    'You need to certify that you have reviewed the notice of evidence needed.',
  label: 'I certify that I have reviewed the notice of evidence needed.',
  update: 'Update page',
  updateLabel: 'Update notice of evidence needed page',
  descriptionInCheckbox: (
    <>
      <p>
        If you’re filing a Supplemental Claim more than 1 year after you got
        your decision notice, you’ll need to review and acknowledge our notice
        of evidence needed for your disability claim.
      </p>
      <p>
        <a
          href="/disability/how-to-file-claim/evidence-needed/"
          target="_blank"
          rel="noopener noreferrer"
        >
          Review the notice of evidence needed (opens in a new tab)
        </a>
      </p>
    </>
  ),
};

export const reviewField = ({ children }) => (
  <div className="review-row">
    <dt>{content.label}</dt>
    <dd>
      {children?.props?.formData ? (
        'Yes, I certify'
      ) : (
        <span className="usa-input-error-message">No, I didn’t certify</span>
      )}
    </dd>
  </div>
);