fix(faq links): Correcting faq llinks and behavior

src/services/ui/src/components/Form/content.tsx

@@ -71,16 +71,17 @@ export const AttachmentsSizeTypesDesc = ({
     <br />
     <p>
       We accept the following file formats:{" "}
-      <strong className="bold">.docx, .jpg, .pdf, .png, .xlsx.</strong> See the
-      full list on the{" "}
+      <strong className="bold">
+        .docx, .docx, .pdf, .jpg, .opd, and more.{" "}
+      </strong>{" "}
       {
         <Link
           to="/faq/acceptable-file-formats"
           target={FAQ_TAB}
           rel="noopener noreferrer"
           className="text-blue-700 hover:underline"
         >
-          FAQ Page
+          See the full list
         </Link>
       }
       .

src/services/ui/src/features/actions/RespondToRai.tsx

@@ -120,9 +120,7 @@ export const RespondToRai = ({
         <PackageInfo item={item} />
         {/* Attachments */}
         <h3 className="font-bold text-2xl font-sans">Attachments</h3>
-        <AttachmentsSizeTypesDesc
-          faqLink={"/faq/medicaid-spa-rai-attachments"}
-        />
+        <AttachmentsSizeTypesDesc faqLink={"/faq/chip-spa-rai-attachments"} />
         {attachments.map(({ name, label, required }) => (
           <FormField
             key={String(name)}

src/services/ui/src/features/faq/content/oneMACFAQContent.tsx

@@ -27,10 +27,10 @@ export const oneMACFAQContent: FAQContent[] = [
     sectionTitle: "General",
     qanda: [
       {
-        anchorText: "system",
+        anchorText: "crosswalk-system",
         question: "Which system should I use for my state’s submission?",
         answerJSX: (
-          <section id={"system"}>
+          <section>
             <p>
               Check which system to submit your state plan in with this
               crosswalk training document.
@@ -414,7 +414,7 @@ export const oneMACFAQContent: FAQContent[] = [
               <tbody>
                 <tr>
                   <td className="border border-gray-300 px-4 py-2">
-                    RAI Response*
+                    RAI Response Letter*
                   </td>
                   <td className="border border-gray-300 px-4 py-2">
                     Letter responding to RAI questions, any updated SPA pages,
@@ -916,7 +916,7 @@ export const oneMACFAQContent: FAQContent[] = [
         ),
       },
       {
-        anchorText: "1915(b)-waiver-extension-attachments",
+        anchorText: "temporary-extensions-b-attachments",
         question:
           "What are the attachments for a 1915(b) Waiver - Request for Temporary Extension?",
         answerJSX: (
@@ -957,9 +957,9 @@ export const oneMACFAQContent: FAQContent[] = [
         ),
       },
       {
-        anchorText: "1915(c)-waiver-extension-attachments",
+        anchorText: "temporary-extensions-b-attachments",
         question:
-          "What are the attachments for a 1915(c) Waiver - Request for Temporary Extension",
+          "What are the attachments for a 1915(c) Waiver - Request for Temporary Extension?",
         answerJSX: (
           <>
             <p>Note: “*” indicates a required attachment.</p>

src/services/ui/src/features/faq/index.tsx

@@ -33,24 +33,24 @@ export const Faq = () => {
       </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 key={"Asdf"} className="mb-8">
+          <article className="mb-8">
             <Accordion
               type="multiple"
               value={openItems}
               onValueChange={setOpenItems}
             >
               {oneMACFAQContent.map(({ sectionTitle, qanda }) => (
                 <article key={sectionTitle} className="mb-8">
-                  <h2 className="text-2xl mb-4 text-primary">
-                    {sectionTitle}
-                  </h2>
+                  <h2 className="text-2xl mb-4 text-primary">{sectionTitle}</h2>
                   {qanda.map(({ anchorText, answerJSX, question }) => (
                     <AccordionItem
                       value={anchorText}
                       id={anchorText}
                       key={anchorText}
                     >
-                      <AccordionTrigger>{question}</AccordionTrigger>
+                      <AccordionTrigger className="text-left">
+                        {question}
+                      </AccordionTrigger>
                       <AccordionContent>{answerJSX}</AccordionContent>
                     </AccordionItem>
                   ))}

src/services/ui/src/features/package-actions/shared-components.tsx

@@ -7,13 +7,11 @@ import {
 } from "@/components";
 import {
   Button,
-  FormDescription,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
   RequiredIndicator,
-  Textarea,
   Upload,
 } from "@/components/Inputs";
 import { FAQ_TAB } from "@/components/Routing/consts";
@@ -26,8 +24,8 @@ import {
   useLocation,
   useNavigate,
   useNavigation,
-  useParams,
   useSubmit,
+  useParams,
 } from "react-router-dom";
 import { Authority } from "shared-types";
 
@@ -67,29 +65,30 @@ export const AttachmentsSection = <T extends string>({
       <h2 className="font-bold text-2xl font-sans mb-2">Attachments</h2>
       {supportingInformation && <p>{supportingInformation}</p>}
       <p>
-        Maximum file size of 80 MB per attachment.{" "}
-        <strong>You can add multiple files per attachment type.</strong> Read
-        the description for each of the attachment types on the{" "}
+        Maximum file size of 80 MB per attachment. You can add multiple files
+        per attachment type. Read the description for each of the attachment
+        types on the
         <Link
           className="text-blue-700 hover:underline"
-          to={"/faq/medicaid-spa-attachments"} // arbitrary default, covered by a bug to be fixed soon
+          to="/faq/temporary-extensions-b-attachments"
           target={FAQ_TAB}
+          rel="noopener noreferrer"
         >
           {" "}
           FAQ Page.
         </Link>
       </p>
       <p>
         We accept the following file formats:{"  "}
-        <strong>.docx, .jpg, .pdf, .png, .xlsx. </strong>
-        See the full list on the{" "}
+        <strong>.docx, .docx, .pdf, .jpg, .opd, and more. </strong>
         <Link
           className="text-blue-700 hover:underline"
           to={"/faq/acceptable-file-formats"}
           target={FAQ_TAB}
+          rel="noopener noreferrer"
         >
           {" "}
-          FAQ Page.
+          See the full list
         </Link>
       </p>
       {attachments.map(({ name, required, registerName }) => (

src/services/ui/src/features/package/hooks.tsx

@@ -1,6 +1,6 @@
 import { useGetItem } from "@/api";
 import { removeUnderscoresAndCapitalize } from "@/utils";
-import { useEffect, useLayoutEffect, useState } from "react";
+import { useLayoutEffect, useState } from "react";
 
 export type DetailsSidebarLink = {
   id: string;
@@ -16,10 +16,9 @@ export const useDetailsSidebarLinks = (
 
   useLayoutEffect(() => {
     const ids = [
-      "package_details",
+      "package_detailss",
       "package_activity",
       "administrative_package_changess",
-      "appendix_k",
     ];
 
     // Check if dataId is not undefined before proceeding

src/services/ui/src/features/package/package-details/index.tsx

@@ -47,7 +47,7 @@ export const PackageDetails: FC<{
   const { data } = usePackageDetailsCache();
   // const title = props.title || `${data.authority} Package Details`;
   return (
-    <DetailsSection id="package_details" title={props.title}>
+    <DetailsSection id="package_detailss" title={props.title}>
       <div className="flex-col gap-4 max-w-2xl">
         <DetailItemsGrid displayItems={recordDetails(data)} />
         <DetailItemsGrid

src/services/ui/src/features/selection-flow/external-landing/ExternalAppLandingPage.tsx

@@ -1,8 +1,7 @@
 import { PropsWithChildren, ReactElement } from "react";
-import { useLocation } from "react-router-dom";
+import { useLocation, Link } from "react-router-dom";
 import {
   Button,
-  Link,
   SimplePageContainer,
   BreadCrumbs,
   FAQ_TAB,
@@ -34,10 +33,10 @@ const FAQHelperText = () => (
       For additional information on where to submit, refer to the{" "}
       {/* TODO: Get desired FAQ `target` from Wale */}
       <Link
-        className="text-sky-700 hover:text-sky-800 underline"
+        to="/faq/crosswalk-system"
         target={FAQ_TAB}
-        path="/faq"
-        hash={"system"}
+        rel="noopener noreferrer"
+        className="text-blue-700 hover:underline flex items-center"
       >
         Crosswalk from Paper-based State Plan to MACPro and MMDL
       </Link>{" "}

src/services/ui/src/features/submission/app-k/index.tsx

@@ -111,7 +111,7 @@ export const AppKSubmissionForm = () => {
               <>
                 <p>
                   <Link
-                    to="/faq/waiver-c-id"
+                    to="/faq/app-k-id"
                     target={C.FAQ_TAB}
                     rel="noopener noreferrer"
                     className="text-blue-700 hover:underline"
@@ -188,8 +188,7 @@ export const AppKSubmissionForm = () => {
             />
           </C.SectionCard>
           <C.SectionCard title="Attachments">
-            <C.AttachmentsSizeTypesDesc faqLink="/faq/#chip-spa-attachments" />
-
+            <C.AttachmentsSizeTypesDesc faqLink="/faq/appk-attachments" />
             <I.FormField
               control={form.control}
               name={"attachments.appk"}

src/services/ui/src/features/submission/waiver/capitated/capitated-1915-b-waiver-amendment.tsx

@@ -226,7 +226,7 @@ export const Capitated1915BWaiverAmendmentPage = () => {
             />
           </SectionCard>
           <SectionCard title="Attachments">
-            <Content.AttachmentsSizeTypesDesc faqLink="/faq/medicaid-spa-attachments" />
+            <Content.AttachmentsSizeTypesDesc faqLink="/faq/waiverb-attachments" />
             {attachmentList.map(({ name, label, required }) => (
               <Inputs.FormField
                 key={name}

src/services/ui/src/features/submission/waiver/capitated/capitated-1915-b-waiver-initial.tsx

@@ -196,7 +196,7 @@ export const Capitated1915BWaiverInitialPage = () => {
             />
           </SectionCard>
           <SectionCard title="Attachments">
-            <Content.AttachmentsSizeTypesDesc faqLink="/faq/medicaid-spa-attachments" />
+            <Content.AttachmentsSizeTypesDesc faqLink="/faq/waiverb-attachments" />
             {attachmentList.map(({ name, label, required }) => (
               <Inputs.FormField
                 key={name}

src/services/ui/src/features/submission/waiver/capitated/capitated-1915-b-waiver-renewal.tsx

@@ -208,7 +208,7 @@ export const Capitated1915BWaiverRenewalPage = () => {
                       1915(b) Waiver Renewal Number <Inputs.RequiredIndicator />
                     </Inputs.FormLabel>
                     <Link
-                      to="/faq/waiver-amendment-id-format"
+                      to="/faq/waiver-renewal-id-format"
                       target={FAQ_TAB}
                       rel="noopener noreferrer"
                       className="text-blue-700 hover:underline flex items-center"
@@ -256,7 +256,7 @@ export const Capitated1915BWaiverRenewalPage = () => {
             />
           </SectionCard>
           <SectionCard title="Attachments">
-            <Content.AttachmentsSizeTypesDesc faqLink="/faq/medicaid-spa-attachments" />
+            <Content.AttachmentsSizeTypesDesc faqLink="/faq/waiverb-attachments" />
             {attachmentList.map(({ name, label, required }) => (
               <Inputs.FormField
                 key={name}

src/services/ui/src/features/submission/waiver/contracting/contracting-1915-b-waiver-amendment.tsx

@@ -223,7 +223,7 @@ export const Contracting1915BWaiverAmendmentPage = () => {
             />
           </SectionCard>
           <SectionCard title="Attachments">
-            <Content.AttachmentsSizeTypesDesc faqLink="/faq/medicaid-spa-attachments" />
+            <Content.AttachmentsSizeTypesDesc faqLink="/faq/waiverb-attachments" />
             {attachmentList.map(({ name, label, required }) => (
               <Inputs.FormField
                 key={name}

src/services/ui/src/features/submission/waiver/contracting/contracting-1915-b-waiver-initial.tsx

@@ -191,7 +191,7 @@ export const Contracting1915BWaiverInitialPage = () => {
             />
           </SectionCard>
           <SectionCard title="Attachments">
-            <Content.AttachmentsSizeTypesDesc faqLink="/faq/medicaid-spa-attachments" />
+            <Content.AttachmentsSizeTypesDesc faqLink="/faq/waiverb-attachments" />
             {attachmentList.map(({ name, label, required }) => (
               <Inputs.FormField
                 key={name}

src/services/ui/src/features/submission/waiver/contracting/contracting-1915-b-waiver-renewal.tsx

@@ -201,7 +201,7 @@ export const Contracting1915BWaiverRenewalPage = () => {
                       1915(b) Waiver Renewal Number <Inputs.RequiredIndicator />
                     </Inputs.FormLabel>
                     <Link
-                      to="/faq/waiver-amendment-id-format"
+                      to="/faq/waiver-renewal-id-format"
                       target={FAQ_TAB}
                       rel="noopener noreferrer"
                       className="text-blue-700 hover:underline flex items-center"
@@ -249,7 +249,7 @@ export const Contracting1915BWaiverRenewalPage = () => {
             />
           </SectionCard>
           <SectionCard title="Attachments">
-            <Content.AttachmentsSizeTypesDesc faqLink="/faq/medicaid-spa-attachments" />
+            <Content.AttachmentsSizeTypesDesc faqLink="/faq/waiver-renewal-id-format" />
             {attachmentList.map(({ name, label, required }) => (
               <Inputs.FormField
                 key={name}