department-of-veterans-affairs/vets-website

import React, { useCallback, useEffect, useState, useRef } from 'react';
import { useParams } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import FEATURE_FLAG_NAMES from '@department-of-veterans-affairs/platform-utilities/featureFlagNames';
import PageNotFound from '@department-of-veterans-affairs/platform-site-wide/PageNotFound';
import { updatePageTitle } from '@department-of-veterans-affairs/mhv/exports';
import { focusElement } from '@department-of-veterans-affairs/platform-utilities/ui';
import { getDocumentation } from '../api/rxApi';
import { getPrescriptionDetails } from '../actions/prescriptions';
import ApiErrorNotification from '../components/shared/ApiErrorNotification';
import {
  dateFormat,
  sanitizeKramesHtmlStr,
  generateTextFile,
  generateMedicationsPDF,
  convertHtmlForDownload,
} from '../util/helpers';
import PrintDownload from '../components/shared/PrintDownload';
import { buildMedicationInformationPDF } from '../util/pdfConfigs';
import { DOWNLOAD_FORMAT } from '../util/constants';
import { pageType } from '../util/dataDogConstants';
import BeforeYouDownloadDropdown from '../components/shared/BeforeYouDownloadDropdown';

const PrescriptionDetailsDocumentation = () => {
  const { prescriptionId } = useParams();
  const contentRef = useRef();
  const {
    prescription,
    isDisplayingDocumentation,
    hasPrescriptionApiError,
    dob,
    userName,
  } = useSelector(state => ({
    prescription: state.rx.prescriptions.prescriptionDetails,
    isDisplayingDocumentation:
      state.featureToggles[
        FEATURE_FLAG_NAMES.mhvMedicationsDisplayDocumentationContent
      ],
    hasPrescriptionApiError: state.rx.prescriptions?.apiError,
    userName: state.user.profile.userFullName,
    dob: state.user.profile.dob,
  }));

  const dispatch = useDispatch();
  const [htmlContent, setHtmlContent] = useState(null);
  const [hasDocApiError, setHasDocApiError] = useState(false);
  const [isLoadingDoc, setIsLoadingDoc] = useState(false);
  const [isLoadingRx, setIsLoadingRx] = useState(false);
  useEffect(
    () => {
      if (prescriptionId) {
        setIsLoadingDoc(true);
        getDocumentation(prescriptionId)
          .then(response => {
            setHasDocApiError(false);
            setHtmlContent(
              sanitizeKramesHtmlStr(response.data.attributes.html),
            );
          })
          .catch(() => {
            setHasDocApiError(true);
          })
          .finally(() => {
            setIsLoadingDoc(false);
          });
      }
    },
    [prescriptionId],
  );

  useEffect(
    () => {
      if (!prescription && prescriptionId && !isLoadingRx) {
        setIsLoadingRx(true);
        dispatch(getPrescriptionDetails(prescriptionId));
      } else if (prescription && prescriptionId && isLoadingRx) {
        setIsLoadingRx(false);
      }
    },
    [prescriptionId, prescription, dispatch, isLoadingRx],
  );

  const buildMedicationInformationTxt = useCallback(
    information => {
      return (
        `${"\nIf you're ever in crisis and need to talk with someone right away, call the Veterans Crisis Line at 988. Then select 1.\n\n\n" +
          `Information: ${prescription.prescriptionName}\n`}${
          userName.first
            ? `${userName.last}, ${userName.first}`
            : userName.last || ' '
        }\n` +
        `We're providing this content from our trusted health care information partner, WebMD, to help you learn more about the medications you're taking. WebMD content is reviewed and approved by medical experts. But this content isn't directly reviewed by VA health care providers and isn't personalized to your use of the medications. If you have any questions about your medications and your specific needs, ask your VA health care team.\n\n\n\n` +
        `Date of birth: ${dateFormat(dob, 'MMMM D, YYYY')}\n\n` +
        `Report generated by My HealtheVet on VA.gov on ${dateFormat(
          Date.now(),
          'MMMM D, YYYY',
        )}\n\n---------------------------------------------------------------------------------\n\n\n` +
        `${information}`
      );
    },
    [userName, dob, prescription],
  );

  useEffect(() => {
    updatePageTitle(`More about this medication | Veteran Affairs`);
  }, []);

  const downloadText = () => {
    const formattedText = convertHtmlForDownload(htmlContent);
    const textData = buildMedicationInformationTxt(formattedText);
    generateTextFile(
      textData,
      `medication-information-${prescription.prescriptionName}-${
        userName.first ? `${userName.first}-${userName.last}` : userName.last
      }-${dateFormat(Date.now(), 'M-D-YYYY').replace(/\./g, '')}`,
    );
  };

  const downloadPdf = async () => {
    const formattedText = convertHtmlForDownload(
      htmlContent,
      DOWNLOAD_FORMAT.PDF,
    );
    const pdfData = buildMedicationInformationPDF(formattedText);
    const setup = {
      subject: 'Medication Information',
      headerBanner: [
        {
          text:
            'If you’re ever in crisis and need to talk with someone right away, call the Veterans Crisis Line at ',
        },
        {
          text: '988',
          weight: 'bold',
        },
        {
          text: '. Then select 1.',
        },
      ],
      footerRight: 'Page %PAGE_NUMBER% of %TOTAL_PAGES%',
      title: `Medication information: ${prescription?.prescriptionName}`,
      preface: [
        {
          value: `We're providing this content from our trusted health care information partner, WebMD, to help you learn more about the medications you're taking. WebMD content is reviewed and approved by medical experts. But this content isn't directly reviewed by VA health care providers and isn't personalized to your use of the medications. If you have any questions about your medications and your specific needs, ask your VA health care team.`,
        },
      ],
      results: [{ list: [pdfData] }],
    };
    await generateMedicationsPDF(
      'medications',
      `medication-information-${prescription.prescriptionName}-${dateFormat(
        Date.now(),
        'M-D-YYYY',
      ).replace(/\./g, '')}`,
      setup,
    );
  };

  const printPage = () => window.print();

  useEffect(
    () => {
      if (!isLoadingDoc && !hasDocApiError && !isLoadingRx && htmlContent) {
        contentRef.current.innerHTML = htmlContent ?? '';
      }
      focusElement(document.querySelector('h1'));
    },
    [isLoadingDoc, isLoadingRx, hasDocApiError, htmlContent],
  );

  if (!isDisplayingDocumentation) {
    return <PageNotFound />;
  }
  if (hasDocApiError || hasPrescriptionApiError) {
    return (
      <div className="vads-u-margin-top--1">
        <ApiErrorNotification
          errorType="access"
          content="medication information"
        />
      </div>
    );
  }

  return (
    <>
      {isLoadingDoc || isLoadingRx || !htmlContent ? (
        <va-loading-indicator message="Loading information..." set-focus />
      ) : (
        <div>
          <h1 data-testid="medication-information">
            Medication information: {prescription?.prescriptionName}
          </h1>
          <PrintDownload
            onPrint={printPage}
            onText={downloadText}
            onDownload={downloadPdf}
            isSuccess={false}
            isLoading={false}
          />
          <BeforeYouDownloadDropdown page={pageType.DOCUMENTATION} />
          <div className="no-print rx-page-total-info vads-u-border-bottom--2px vads-u-border-color--gray-lighter vads-u-margin-y--5" />
          <va-on-this-page />
          <p>
            We’re providing this content from our trusted health care
            information partner, WebMD, to help you learn more about the
            medications you’re taking. WebMD content is reviewed and approved by
            medical experts. But this content isn’t directly reviewed by VA
            health care providers and isn’t personalized to your use of the
            medications. If you have any questions about your medications and
            your specific needs, ask your VA health care team.
          </p>
        </div>
      )}
      {/* NOTE: The HTML content comes from a reliable source (MHV API/Krames API) */}
      <article>
        <div ref={contentRef} />
      </article>
    </>
  );
};

export default PrescriptionDetailsDocumentation;