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 | 72x 72x 72x | import { PropsWithChildren, ReactElement } from "react";
import { useLocation, Link } from "react-router";
import { Button, SimplePageContainer, BreadCrumbs, optionCrumbsFromPath } from "@/components";
import { SimplePageTitle } from "@/features";
import { FAQ_TAB } from "@/router";
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 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 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}
/>
);
|