<commit_before>import React from 'react';
import { format } from 'date-fns';
import PropTypes from 'prop-types';

import environment from 'platform/utilities/environment';

const downloadUrl = id => `${environment.API_URL}/v0/claim_letters/${id}`;

const formatDate = date => {
  return format(new Date(date), 'MMMM dd, yyyy');
};

const ClaimLetterListItem = ({ letter }) => {
  const heading = `Letter dated ${formatDate(letter.receivedAt)}`;

  return (
    <li className="vads-u-border-bottom--1px vads-u-border-color--gray-lighter vads-u-padding-bottom--2">
      <h2 className="vads-u-font-size--h4">{heading}</h2>
      <div className="vads-u-color--gray-warm-dark vads-u-margin-bottom--0p5">
        {letter.typeDescription}
      </div>
      <va-link
        download
        filetype="PDF"
        href={downloadUrl(letter.documentId)}
        text="Download letter"
      />
    </li>
  );
};

ClaimLetterListItem.propTypes = {
  letter: PropTypes.object,
};

export default ClaimLetterListItem;
<commit_msg>48951 add ga to claim letters download (#22681)<commit_after>import React from 'react';
import { format } from 'date-fns';
import PropTypes from 'prop-types';

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

const downloadUrl = id => `${environment.API_URL}/v0/claim_letters/${id}`;

const formatDate = date => {
  return format(new Date(date), 'MMMM dd, yyyy');
};

const downloadHandler = () => {
  recordEvent({ event: 'claim-letters-download' });
};

const ClaimLetterListItem = ({ letter }) => {
  const heading = `Letter dated ${formatDate(letter.receivedAt)}`;

  return (
    <li className="vads-u-border-bottom--1px vads-u-border-color--gray-lighter vads-u-padding-bottom--2">
      <h2 className="vads-u-font-size--h4">{heading}</h2>
      <div className="vads-u-color--gray-warm-dark vads-u-margin-bottom--0p5">
        {letter.typeDescription}
      </div>
      <va-link
        download
        filetype="PDF"
        href={downloadUrl(letter.documentId)}
        onClick={downloadHandler}
        text="Download letter"
      />
    </li>
  );
};

ClaimLetterListItem.propTypes = {
  letter: PropTypes.object,
};

export default ClaimLetterListItem;

{'fraction_non_alphanumeric': 0.15602836879432624, 'fraction_numerical': 0.01152482269503546, 'mean_word_length': 3.5504032258064515, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 24, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 12, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1115571', 'n_tokens_mistral': 744, 'n_tokens_neox': 725, 'n_words': 141}