All files / react-app/src/features/selection-flow/external-landing ExternalAppLandingPage.tsx

55.55% Statements 5/9
100% Branches 2/2
20% Functions 1/5
55.55% Lines 5/9

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166              1x                                                                           1x                                                     1x                                                               1x                                                             1x                                                            
import { PropsWithChildren, ReactElement } from "react";
import { Link, useLocation } from "react-router";
 
import { BreadCrumbs, Button, optionCrumbsFromPath, SimplePageContainer } from "@/components";
import { FAQ_TAB } from "@/consts";
import { SimplePageTitle } from "@/features";
 
export enum EXTERNAL_APP {
  MAC_PRO = "https://www.medicaid.gov/resources-for-states/medicaid-and-chip-program-macpro-portal/index.html#MACPro",
  MMDL = "https://wms-mmdl.cms.gov/MMDL/faces/portal.jsp",
}
 
export interface ExternalAppLandingPageConfig {
  pageTitle: string;
  image: ReactElement;
  description: ReactElement;
  buttonLabel: string;
  buttonLink: EXTERNAL_APP;
}
 
const MACProLogo = () => <img src="/macpro.png" alt="MACPro system logo" />;
const MMDLLogo = () => <img src={"/mmdl.png"} alt={"MMDL system logo"} />;
 
const FAQHelperText = () => (
  <span className="max-w-xl">
    <i>
      For additional information on where to submit, refer to the{" "}
      <Link
        to="/faq/crosswalk-system"
        target={FAQ_TAB}
        rel="noopener noreferrer"
        className="text-blue-900 underline flex items-center"
      >
        Crosswalk from Paper-based State Plan to MACPro and MMDL
      </Link>{" "}
      document in our FAQ section.
    </i>
  </span>
);
 
const LandingPageDescription = ({ children }: PropsWithChildren) => (
  <section className="my-8 max-w-xl">{children}</section>
);
 
/** Config-driven template to build landing pages that link to another site / app. */
const ExternalAppLandingPage = ({
  pageTitle,
  image,
  description,
  buttonLabel,
  buttonLink,
}: ExternalAppLandingPageConfig) => {
  const location = useLocation();
  return (
    <SimplePageContainer>
      <BreadCrumbs options={optionCrumbsFromPath(location.pathname)} />
      {/* TODO: Replace simple page title bar with breadcrumbs */}
      <SimplePageTitle title={pageTitle} />
      <div className="flex flex-col items-center justify-center m-4 pt-4 pb-12">
        {image}
        {description}
        <a className="mb-8" href={buttonLink} target="_blank" rel="noreferrer">
          <Button className="landing-button" aria-label={buttonLabel}>
            {buttonLabel}
          </Button>
        </a>
        <FAQHelperText />
      </div>
    </SimplePageContainer>
  );
};
 
export const MedicaidABPLandingPage = () => (
  <ExternalAppLandingPage
    pageTitle={"Medicaid Alternative Benefits Plans (ABP), and Medicaid Premiums and Cost Sharing"}
    image={<MMDLLogo />}
    description={
      <LandingPageDescription>
        <p className="mb-4">
          <b>
            Medicaid Alternative Benefits Plans (ABP), and Medicaid Premiums and Cost Sharing are
            managed within the{" "}
            <a
              className="text-sky-700 hover:text-sky-800 underline"
              href={EXTERNAL_APP.MMDL}
              target="_blank"
              rel="noreferrer"
            >
              Medicaid Model Data Lab (MMDL)
            </a>
            .
          </b>
        </p>
        <p>
          The MMDL system allows states to apply for changes to their State plan, and access report
          on Medicaid program administration/implementation.
        </p>
      </LandingPageDescription>
    }
    buttonLabel={"Enter the MMDL system"}
    buttonLink={EXTERNAL_APP.MMDL}
  />
);
 
export const MedicaidEligibilityLandingPage = () => (
  <ExternalAppLandingPage
    pageTitle={"Medicaid Eligibility, Enrollment, Administration, and Health Homes"}
    image={<MACProLogo />}
    description={
      <LandingPageDescription>
        <p className="mb-4">
          <b>
            Medicaid Eligibility, Enrollment, Administration, and Health Homes SPA packages are
            submitted within the{" "}
            <a
              className="text-sky-700 hover:text-sky-800 underline"
              href={EXTERNAL_APP.MAC_PRO}
              target="_blank"
              rel="noreferrer"
            >
              MACPro system
            </a>
            .
          </b>
        </p>
        <p>
          The MACPro system allows CMS and states to collaborate online to process certain types of
          Medicaid SPA submissions.
        </p>
      </LandingPageDescription>
    }
    buttonLabel={"Enter the MACPro system"}
    buttonLink={EXTERNAL_APP.MAC_PRO}
  />
);
export const CHIPEligibilityLandingPage = () => (
  <ExternalAppLandingPage
    pageTitle={"CHIP Eligibility SPAs"}
    image={<MMDLLogo />}
    description={
      <LandingPageDescription>
        <p className="mb-4">
          <b>
            CHIP Eligibility SPAs are managed within the{" "}
            <a
              className="text-sky-700 hover:text-sky-800 underline"
              href={EXTERNAL_APP.MMDL}
              target="_blank"
              rel="noreferrer"
            >
              Medicaid Model Data Lab (MMDL)
            </a>
            .
          </b>
        </p>
        <p>
          The MMDL system allows states to apply for changes to their State plan, and access report
          on Medicaid program administration/implementation.
        </p>
      </LandingPageDescription>
    }
    buttonLabel={"Enter the MMDL system"}
    buttonLink={EXTERNAL_APP.MMDL}
  />
);