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 1x 1x 1x 1x 1x 1x 1x 3x 3x | import { useEffect, useState } from "react";
import { helpDeskContact, oneMACFAQContent } from "./content/oneMACFAQContent";
import {
Accordion,
CardWithTopBorder,
AccordionItem,
AccordionContent,
AccordionTrigger,
SubNavHeader,
} from "@/components";
import { useParams } from "react-router";
import { useHideBanner } from "@/hooks/useHideBanner";
export const Faq = () => {
const { id } = useParams<{ id: string }>();
const [openItems, setOpenItems] = useState<string[]>([]);
useEffect(() => {
Iif (id) {
const element = document.getElementById(id);
if (element) {
setOpenItems([id]);
window.scrollTo({
top: element.offsetTop,
behavior: "smooth",
});
}
}
}, [id]);
// Get the flag value for hiding the MMDL banner.
const isBannerHidden = useHideBanner();
const anchorsToHide = [
"spa-admendments",
"abp-spa-templates",
"abp-implementation-guides-spa",
"mpc-spa-templates",
"mpc-spa-implementation-guides",
"chip-spa-templates",
"chip-spa-implentation-guides",
];
const filteredFAQContent = oneMACFAQContent.map((section) => {
Iif (section.sectionTitle === "State Plan Amendments (SPAs)" && isBannerHidden) {
return {
...section,
qanda: section.qanda.filter((qa) => !anchorsToHide.includes(qa.anchorText)),
};
}
return section;
});
return (
<>
<SubNavHeader>
<h1 className="text-xl font-medium">Frequently Asked Questions</h1>
</SubNavHeader>
<section className="block md:flex md:flex-row max-w-screen-xl m-auto px-4 lg:px-8 pt-8 gap-10">
<div className="flex-1">
<article className="mb-8">
<Accordion type="multiple" value={openItems} onValueChange={setOpenItems}>
{filteredFAQContent.map(({ sectionTitle, qanda }) => (
<article key={sectionTitle} className="mb-8">
<h2 className="text-2xl mb-4 text-primary">{sectionTitle}</h2>
{qanda.map(({ anchorText, answerJSX, question }) => (
<AccordionItem value={anchorText} id={anchorText} key={anchorText}>
<AccordionTrigger className="text-left">{question}</AccordionTrigger>
<AccordionContent>{answerJSX}</AccordionContent>
</AccordionItem>
))}
</article>
))}
</Accordion>
</article>
</div>
<div>
<CardWithTopBorder>
<div className="p-4">
<h3 className="text-lg text-bold mb-4">OneMAC Help Desk Contact Info</h3>
<div>
<b>Phone Number</b>
<p className="mb-4 text-primary">
<a className="underline" href={`tel:${helpDeskContact.phone}`}>
{helpDeskContact.phone}
</a>
</p>
<b>Email</b>
<p className="text-primary">
<a className="underline" href={`mailto:${helpDeskContact.email}`}>
{helpDeskContact.email}
</a>
</p>
</div>
</div>
</CardWithTopBorder>
</div>
</section>
</>
);
};
|