<commit_before>import React, { useEffect } from 'react';
import { useSelector } from 'react-redux';
import { Link } from 'react-router-dom';
import scrollToTop from 'platform/utilities/ui/scrollToTop';
import PropTypes from 'prop-types';
import moment from 'moment';
import Modals from '../components/Modals';
import StatementAddresses from '../components/StatementAddresses';
import AccountSummary from '../components/AccountSummary';

const HTMLStatementPage = ({ match }) => {
  const selectedId = match.params.id;
  const statements = useSelector(({ mcp }) => mcp.statements) ?? [];
  const [selectedCopay] = statements.filter(({ id }) => id === selectedId);
  const statementDate = moment(selectedCopay.pSStatementDate, 'MM-DD').format(
    'MMMM D',
  );
  const title = `${statementDate} statement`;
  const prevPage = `Copay bill for ${selectedCopay.station.facilityName}`;

  useEffect(() => {
    scrollToTop();
  }, []);

  return (
    <>
      <article>
        <va-breadcrumbs className="vads-u-font-family--sans no-wrap">
          <a href="/">Home</a>
          <a href="/health-care">Health care</a>
          <a href="/health-care/pay-copay-bill">Pay your VA copay bill</a>
          <a
            href={`/health-care/pay-copay-bill/your-current-balances/balance-details/${selectedId}`}
          >
            {prevPage}
          </a>
          <a href={`/balance-details/${selectedId}/statement-view`}>{title}</a>
        </va-breadcrumbs>
        <h1 data-testid="statement-page-title">{title}</h1>
        <p
          className="vads-u-font-size--h3 vads-u-margin-top--0 vads-u-margin-bottom--5"
          data-testid="facility-name"
        >
          {`${selectedCopay?.station.facilityName}`}
        </p>
        <Link
          className="vads-u-font-size--sm"
          to={`/balance-details/${selectedId}`}
        >
          <i
            className="fa fa-chevron-left vads-u-margin-right--1"
            aria-hidden="true"
          />
          <strong>Return to facility details</strong>
        </Link>
        <va-on-this-page className="vads-u-margin-top--0" />
        <AccountSummary
          currentBalance={selectedCopay.pHNewBalance}
          newCharges={selectedCopay.pHTotCharges}
          paymentsReceived={selectedCopay.pHTotCredits}
          previousBalance={selectedCopay.pHPrevBal}
          statementDate={statementDate}
        />
        <StatementAddresses id="statement-addresses" copay={selectedCopay} />
        <h2>What if I have questions about my statement?</h2>
        <Modals title="Notice of rights and responsibilities">
          <Modals.Rights />
        </Modals>
        <Link
          className="vads-u-font-size--sm"
          to={`/balance-details/${selectedId}`}
        >
          <i
            className="fa fa-chevron-left vads-u-margin-right--1"
            aria-hidden="true"
          />
          <strong>Return to facility details</strong>
        </Link>
      </article>
    </>
  );
};

HTMLStatementPage.propTypes = {
  match: PropTypes.shape({
    params: PropTypes.shape({
      id: PropTypes.string,
    }),
  }),
};

export default HTMLStatementPage;<commit_msg>[MCP] 35878 Statement Balance Questions  (#20648)<commit_after>import React, { useEffect } from 'react';
import { useSelector } from 'react-redux';
import { Link } from 'react-router-dom';
import scrollToTop from 'platform/utilities/ui/scrollToTop';
import PropTypes from 'prop-types';
import moment from 'moment';
import Modals from '../components/Modals';
import StatementAddresses from '../components/StatementAddresses';
import AccountSummary from '../components/AccountSummary';

const HTMLStatementPage = ({ match }) => {
  const selectedId = match.params.id;
  const statements = useSelector(({ mcp }) => mcp.statements) ?? [];
  const [selectedCopay] = statements.filter(({ id }) => id === selectedId);
  const statementDate = moment(selectedCopay.pSStatementDate, 'MM-DD').format(
    'MMMM D',
  );
  const title = `${statementDate} statement`;
  const prevPage = `Copay bill for ${selectedCopay.station.facilityName}`;

  useEffect(() => {
    scrollToTop();
  }, []);

  return (
    <>
      <article>
        <va-breadcrumbs className="vads-u-font-family--sans no-wrap">
          <a href="/">Home</a>
          <a href="/health-care">Health care</a>
          <a href="/health-care/pay-copay-bill">Pay your VA copay bill</a>
          <a
            href={`/health-care/pay-copay-bill/your-current-balances/balance-details/${selectedId}`}
          >
            {prevPage}
          </a>
          <a href={`/balance-details/${selectedId}/statement-view`}>{title}</a>
        </va-breadcrumbs>
        <h1 data-testid="statement-page-title">{title}</h1>
        <p
          className="vads-u-font-size--h3 vads-u-margin-top--0 vads-u-margin-bottom--5"
          data-testid="facility-name"
        >
          {`${selectedCopay?.station.facilityName}`}
        </p>
        <Link
          className="vads-u-font-size--sm"
          to={`/balance-details/${selectedId}`}
        >
          <i
            className="fa fa-chevron-left vads-u-margin-right--1"
            aria-hidden="true"
          />
          <strong>Return to facility details</strong>
        </Link>
        <va-on-this-page className="vads-u-margin-top--0" />
        <AccountSummary
          currentBalance={selectedCopay.pHNewBalance}
          newCharges={selectedCopay.pHTotCharges}
          paymentsReceived={selectedCopay.pHTotCredits}
          previousBalance={selectedCopay.pHPrevBal}
          statementDate={statementDate}
        />
        <StatementAddresses id="statement-addresses" copay={selectedCopay} />
        <h2>What if I have questions about my statement?</h2>
        <p>
          Contact the VA Health Resource Center at{' '}
          <va-telephone contact="8664001238" /> (TTY:{' '}
          <va-telephone contact="711" />
          ). We’re here Monday through Friday, 8:00 a.m. to 8:00 p.m. ET.
        </p>
        <Modals title="Notice of rights and responsibilities">
          <Modals.Rights />
        </Modals>
        <Link
          className="vads-u-font-size--sm"
          to={`/balance-details/${selectedId}`}
        >
          <i
            className="fa fa-chevron-left vads-u-margin-right--1"
            aria-hidden="true"
          />
          <strong>Return to facility details</strong>
        </Link>
      </article>
    </>
  );
};

HTMLStatementPage.propTypes = {
  match: PropTypes.shape({
    params: PropTypes.shape({
      id: PropTypes.string,
    }),
  }),
};

export default HTMLStatementPage;
{'fraction_non_alphanumeric': 0.1531368102796674, 'fraction_numerical': 0.007407407407407408, 'mean_word_length': 2.3789581205311543, 'pattern_counts': {'":': 0, '<': 83, '<?xml version=': 0, '>': 91, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3435648', 'n_tokens_mistral': 2039, 'n_tokens_neox': 2032, 'n_words': 365}