department-of-veterans-affairs/vets-website

import React from 'react';
import PropTypes from 'prop-types';

import { recordEvent } from '@department-of-veterans-affairs/platform-monitoring/exports';
import environment from '@department-of-veterans-affairs/platform-utilities/environment';

import { buildDateFormatter } from '../../utils/helpers';

const getDownloadUrl = (id, docType) =>
  `${environment.API_URL}/v0/claim_letters/${id}?document_type=${docType}`;

const formatDate = buildDateFormatter();

const docTypeToDescription = {
  27: 'Board decision',
  704: 'List of evidence we may need (5103 notice)',
  706: 'List of evidence we may need (5103 notice)',
  858: 'List of evidence we may need (5103 notice)',
  184: 'Notification letter',
  34: 'Request for specific evidence or information',
  700: 'Request for specific evidence or information',
  859: 'Request for specific evidence or information',
  408: 'Notification: Exam with VHA has been scheduled',
  942: 'Final notification: Request for specific evidence or information',
  864: 'Copy of request for medical records sent to a non-VA provider',
  1605: 'Copy of request for medical records sent to a non-VA provider',
};

const getDescription = docType => {
  const defaultDescription = 'Notification letter';

  return docTypeToDescription[docType] || defaultDescription;
};

const filename = 'ClaimLetter.pdf';

// NOTE: This simulates some of the property values that get
// auto-generated by Google Tag Manager.
// gtm.elementUrl: {{Click URL}}
// gtm.element.textContent: {{Click Text}}
const downloadHandler = docType => {
  recordEvent({
    event: 'claim-letters-download',
    'gtm.element.textContent': 'Download Claim Letter (PDF)',
    'gtm.elementUrl': `${
      environment.API_URL
    }/v0/claim_letters/[${docType}]:id.pdf`,
  });
};

const ClaimLetterListItem = ({ letter }) => {
  const formattedDate = 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-margin-y--0">
        {/*
          Both the heading and subheading, while styled differently, are
          contained in the h2 in an attempt to guarantee uniqueness in headings
          for accessibility.
        */}
        <span className="vads-u-display--block vads-u-font-size--h4 vads-u-margin-top--3 vads-u-margin-bottom--1">
          {getDescription(letter.docType)}
        </span>{' '}
        <span className="vads-u-display--block vads-u-font-size--base vads-u-font-weight--normal vads-u-color--gray-warm-dark vads-u-line-height--4 vads-u-margin-bottom--0p5">
          {formattedDate}
        </span>
      </h2>
      <va-link
        download
        filename={filename}
        filetype="PDF"
        disable-analytics="true"
        href={getDownloadUrl(letter.documentId, letter.docType)}
        onClick={() => downloadHandler(letter.docType)}
        text={`Download ${formattedDate} letter`}
      />
    </li>
  );
};

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

export default ClaimLetterListItem;