feat(ui): Adding new FAQ to FAQ page

react-app/src/components/Banner/MMDLSpaBanner.tsx

@@ -1,6 +1,8 @@
 import { useState } from "react";
 import { Cross2Icon } from "@radix-ui/react-icons";
 import { InfoCircledIcon } from "@radix-ui/react-icons";
+import { FAQ_TAB } from "@/router";
+import { Link } from "react-router";
 const MMDLAlertBanner = () => {
   const [isVisible, setIsVisible] = useState(true);
   const handleDismiss = () => {
@@ -26,14 +28,14 @@ const MMDLAlertBanner = () => {
         </div>
       </div>
       <div className="flex space-x-4 col-start-2 md:col-start-auto">
-        <a
-          href="/faq#mmdl-section"
-          target="_blank"
+        <Link
+          to={"/faq/spa-admendments"}
+          target={FAQ_TAB}
           rel="noopener noreferrer"
           className="border-2 border-black rounded h-[38px] px-4 text font-bold text-center whitespace-nowrap pt-1"
         >
           Go to FAQs
-        </a>
+        </Link>
         <button onClick={handleDismiss} aria-label="Dismiss" className="rounded-full w-6 h-6">
           <Cross2Icon className="w-full h-full" aria-hidden="true" />
         </button>

react-app/src/components/Layout/index.test.tsx

@@ -17,6 +17,9 @@ import { setMockUsername, makoStateSubmitter, AUTH_CONFIG } from "mocks";
 vi.mock("../UsaBanner", () => ({ UsaBanner: () => null }));
 vi.mock("../Footer", () => ({ Footer: () => null }));
 vi.mock("@/components", () => ({
+  Layout: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="mocked-layout">{children}</div>
+  ),
   SimplePageContainer: ({ children }: { children: React.ReactNode }) => children,
   UserPrompt: () => null,
   Banner: () => null,

react-app/src/features/faq/content/oneMACFAQContent.tsx

@@ -220,6 +220,86 @@ export const oneMACFAQContent: FAQContent[] = [
   {
     sectionTitle: "State Plan Amendments (SPAs)",
     qanda: [
+      {
+        anchorText: "spa-admendments",
+        question: "Which state plan amendments (SPAs) can I submit in OneMAC?",
+        answerJSX: (
+          <div className="w-full space-y-3">
+            <p>
+              All Medicaid and CHIP state plan amendments (SPAs), <b>except </b>
+              Medicaid SPA submissions processed in the Medicaid & CHIP Program System portal
+              (MACPro), must be submitted in OneMac.
+            </p>
+            <p>
+              Starting [month,date,year,] Medicaid Model Data Lab (MMDL) no longer accepts new
+              submissions for these SPAs, including:
+            </p>
+            <ul className="ml-8 list-disc space-y-2">
+              <li>Medicaid Alternative Benefit Plan (ABP)</li>
+              <li>Medicaid Premiums & Cost Sharing</li>
+              <li>CHIP Eligibility</li>
+            </ul>
+            <p>
+              Pending SPAs submitted in MMDL before [month, day, year,] including those on RAI
+              (request for additional information) status, will continue to be processed through
+              MMDL.
+            </p>
+            <p>
+              Templates and implementation guides for OneMac SPAs can be downloaded from the
+              respective FAQ:
+            </p>
+            <ul className="ml-8 list-disc space-y-2 text-blue-600">
+              {[
+                {
+                  href: "#abp-spa-templates",
+                  text: "Where can I download Medicaid Alternative Benefit Plan (ABP) SPA templates?",
+                },
+                {
+                  href: "#abp-implementation-guides-spa",
+                  text: "Where can I download Medicaid Alternative Benefit Plan (ABP) SPA implementation guides?",
+                },
+                {
+                  href: "#mpc-spa-templates",
+                  text: "Where can I download Medicaid Premiums and Cost Sharing (MPC) SPA templates?",
+                },
+                {
+                  href: "#mpc-spa-implementation-guides",
+                  text: "Where can I download Medicaid Premiums and Cost Sharing (MPC) SPA implementation guides?",
+                },
+                {
+                  href: "#chip-spa-templates",
+                  text: "Where can I download CHIP eligibility SPA templates?",
+                },
+                {
+                  href: "#chip-spa-implentation-guides",
+                  text: "Where can I download CHIP eligibility SPA implementation guides?",
+                },
+              ].map(({ href, text }) => (
+                <li key={href}>
+                  <a
+                    href={href}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      const targetElement = document.getElementById(href.substring(1));
+                      if (targetElement) {
+                        targetElement.scrollIntoView({ behavior: "smooth", block: "start" });
+
+                        const buttonElement = targetElement.querySelector("button");
+                        if (buttonElement) {
+                          buttonElement.click();
+                        }
+                      }
+                    }}
+                  >
+                    {text}
+                  </a>
+                </li>
+              ))}
+            </ul>
+            <p>For more information, refer to CMCS Information Bulletin #25-TBD.</p>
+          </div>
+        ),
+      },
       {
         anchorText: "spa-id-format",
         question: "What format is used to enter a SPA ID?",
@@ -679,7 +759,7 @@ export const oneMACFAQContent: FAQContent[] = [
         anchorText: "abp-spa-templates",
         question: "Where can I download Medicaid Alternative Benefit Plan (ABP) SPA templates?",
         answerJSX: (
-          <section className="space-y-2 p-2">
+          <section id="abp-spa-templates" className="space-y-2 p-2">
             <p>
               Medicaid Alternative Benefit Plan (ABP) SPA templates can be downloaded at the links
               below. After downloading and completing the templates you need, upload them as part of

react-app/src/features/welcome/index.tsx

@@ -54,7 +54,7 @@ export const Welcome = () => {
               Medicaid Alternative Benefit Plan, Premium and Cost Sharing, and CHIP Eligibility SPA
               templates and implementation guides are now available in OneMAC. New submissions for
               these SPA types are submitted through the OneMAC system effective [add date].{" "}
-              <Link to="/faq" target={FAQ_TAB} className="underline text-[#0071bc]">
+              <Link to="/faq/spa-admendments" target={FAQ_TAB} className="underline text-[#0071bc]">
                 Learn more
               </Link>
             </p>