feat(refactor): App Navigator

src/services/ui/src/components/Cards/OptionCard.test.tsx

@@ -1,7 +1,6 @@
 import { describe, test, expect, beforeEach } from "vitest";
 import { render, screen } from "@testing-library/react";
 import { OptionCard, OptionFieldset } from "@/components/Cards/OptionCard";
-import { ROUTES } from "@/routes";
 import { BrowserRouter } from "react-router-dom";
 
 describe("OptionCard Component System", () => {
@@ -29,7 +28,7 @@ describe("OptionCard Component System", () => {
       render(
         <BrowserRouter>
           <OptionCard
-            linkTo={ROUTES.HOME}
+            linkTo={"/"}
             title={"Test Card Title"}
             description={"Test Card Description"}
             altBg={altBg}

src/services/ui/src/components/Cards/OptionCard.tsx

@@ -1,16 +1,16 @@
-import React, { PropsWithChildren, ReactNode } from "react";
+import { PropsWithChildren, ReactNode } from "react";
 import { Link } from "react-router-dom";
-import { ROUTES } from "@/routes";
 import { ChevronRight } from "lucide-react";
 import { CardWithTopBorder } from "@/components";
+import { Route } from "../Routing/types";
 
 export type OptionCardFieldsetProps = PropsWithChildren<{
   legend: string;
 }>;
 export type MACFieldsetOption = {
   title: string;
   description: ReactNode;
-  linkTo: ROUTES | string;
+  linkTo: Route;
   altBg?: boolean;
 };
 /** A fieldset for nesting {@link OptionCard} with MACCard styling */

src/services/ui/src/components/Routing/hooks.ts

@@ -3,6 +3,7 @@ import {
   NavigateOptions,
   useNavigate as useNav,
   useParams as usePara,
+  redirect as redir,
 } from "react-router-dom";
 import {
   Route,
@@ -43,3 +44,23 @@ export const useParams = <T extends Route>(_: T) => {
   //@ts-ignore
   return usePara<TupleByCharKeyToInterface<StringToTuple<T, "/">, ":">>();
 };
+
+export const redirect = <T extends Route>(
+  props: {
+    path: T;
+    query?: Record<string, string>;
+    hash?: string;
+  } & Params<T>
+) => {
+  const to = (() => {
+    let url: string = props.path;
+    //@ts-ignore
+    if (props.params) url = urlEmbedParams(url, props.params);
+    if (props.query) url = urlEmbedQuery(url, props.query);
+    if (props.hash) url = urlEmbedHash(url, props.hash);
+
+    return url;
+  })();
+
+  return redir(to);
+};

src/services/ui/src/pages/actions/PackageActionForm.tsx

@@ -1,14 +1,12 @@
-import { Navigate, useParams } from "react-router-dom";
+import { Navigate, useParams } from "@/components/Routing";
 import { useGetItem, useGetPackageActions } from "@/api";
-import { ROUTES } from "@/routes";
 import {
   Alert,
   BreadCrumbs,
   LoadingSpinner,
   SimplePageContainer,
 } from "@/components";
 import { DETAILS_AND_ACTIONS_CRUMBS } from "@/pages/actions/actions-breadcrumbs";
-import { Action } from "shared-types";
 import React, {
   JSXElementConstructor,
   PropsWithChildren,
@@ -18,10 +16,7 @@ import React, {
 type CloneableChild = ReactElement<any, string | JSXElementConstructor<any>>;
 
 export const PackageActionForm = ({ children }: PropsWithChildren) => {
-  const { id, type } = useParams<{
-    id: string;
-    type: Action;
-  }>();
+  const { id, type } = useParams("/action/:id/:type");
   const {
     data: item,
     isLoading: itemIsLoading,
@@ -33,7 +28,7 @@ export const PackageActionForm = ({ children }: PropsWithChildren) => {
     error: actionsError,
   } = useGetPackageActions(id!);
 
-  if (!id || !type) return <Navigate to={ROUTES.DASHBOARD} />;
+  if (!id || !type) return <Navigate path="/" />;
   if (itemIsLoading || actionsAreLoading) return <LoadingSpinner />;
   return (
     <SimplePageContainer>

src/services/ui/src/pages/actions/ToggleRaiResponseWithdraw.tsx

@@ -1,6 +1,5 @@
 import { Navigate, useNavigate, useParams } from "@/components/Routing";
 import { Alert, LoadingSpinner } from "@/components";
-import { ROUTES } from "@/routes";
 import { Action, PlanType, ItemResult } from "shared-types";
 import { Button } from "@/components/Inputs";
 import { useEffect, useMemo, useState } from "react";

src/services/ui/src/pages/actions/WithdrawPackage.tsx

@@ -3,7 +3,6 @@ import { Button } from "@/components/Inputs";
 import { ConfirmationModal } from "@/components/Modal/ConfirmationModal";
 import { useState } from "react";
 import { PlanType, ItemResult } from "shared-types";
-import { ROUTES } from "@/routes";
 import { PackageActionForm } from "./PackageActionForm";
 import { ActionFormIntro, PackageInfo } from "./common";
 import { z } from "zod";
@@ -98,7 +97,7 @@ const WithdrawPackageForm: React.FC = ({ item }: { item?: ItemResult }) => {
           <I.Form {...form}>
             <form onSubmit={form.handleSubmit(handleSubmit)}>
               {/* Change faqLink once we know the anchor */}
-              <AttachmentsSizeTypesDesc faqLink={ROUTES.FAQ} />
+              <AttachmentsSizeTypesDesc faqLink={"/faq"} />
               {attachments.map(({ name, label, required }) => (
                 <I.FormField
                   key={name}

src/services/ui/src/pages/create/create-breadcrumbs.ts

@@ -1,52 +1,50 @@
 // Specific to the path of each Options page
-import { ROUTES } from "@/routes";
 import { BreadCrumbConfig } from "@/components";
 import { dashboardCrumb } from "@/utils/crumbs";
+import { Route } from "@/components/Routing/types";
 
-enum Keys {
-  NEW_SUBMISSION = "new-submission",
-  SPA_TYPE = "spa",
-  SPA_MEDICAID_TYPE = "medicaid",
-  SPA_MEDICAID_LANDING_ELIGIBILITY = "medicaid-eligibility",
-  SPA_MEDICAID_LANDING_ABP = "medicaid-abp",
-  SPA_CHIP_TYPE = "chip",
-  SPA_CHIP_LANDING_ELIGIBILITY = "chip-eligibility",
-  WAIVER_TYPE = "waiver",
-  WAIVER_1915B_TYPE = "b",
-  WAIVER_1915B_B4_TYPE = "b4",
-  WAIVER_1915B_CAP_TYPE = "capitated",
-}
+type Keys =
+  | "new-submission"
+  | "spa"
+  | "medicaid"
+  | "medicaid-eligibility"
+  | "medicaid-abp"
+  | "chip"
+  | "chip-eligibility"
+  | "waiver"
+  | "b"
+  | "b4"
+  | "capitated";
 // Display text mapper
 const newSubmissionPageTitleMapper: Record<Keys, string> = {
-  [Keys.NEW_SUBMISSION]: "Submission Type",
-  [Keys.SPA_TYPE]: "SPA Type",
-  [Keys.SPA_MEDICAID_TYPE]: "Medicaid SPA Type",
-  [Keys.SPA_MEDICAID_LANDING_ELIGIBILITY]:
+  "new-submission": "Submission Type",
+  spa: "SPA Type",
+  medicaid: "Medicaid SPA Type",
+  "medicaid-eligibility":
     "Medicaid Eligibility, Enrollment, Administration, and Health Homes",
-  [Keys.SPA_MEDICAID_LANDING_ABP]:
+  "medicaid-abp":
     "Medicaid Alternative Benefits Plans (ABP), and Medicaid Premiums and Cost Sharing",
-  [Keys.SPA_CHIP_TYPE]: "CHIP SPA Type",
-  [Keys.SPA_CHIP_LANDING_ELIGIBILITY]: "CHIP Eligibility SPAs",
-  [Keys.WAIVER_TYPE]: "Waiver Type",
-  [Keys.WAIVER_1915B_TYPE]: "1915(b) Waiver Type",
-  [Keys.WAIVER_1915B_B4_TYPE]:
-    "1915(b)(4) FFS Selective Contracting Waiver Types",
-  [Keys.WAIVER_1915B_CAP_TYPE]:
-    "1915(b) Comprehensive (Capitated) Waiver Authority Types",
+  chip: "CHIP SPA Type",
+  "chip-eligibility": "CHIP Eligibility SPAs",
+  waiver: "Waiver Type",
+  b: "1915(b) Waiver Type",
+  b4: "1915(b)(4) FFS Selective Contracting Waiver Types",
+  capitated: "1915(b) Comprehensive (Capitated) Waiver Authority Types",
 };
 // Route mapper
-const newSubmissionPageRouteMapper: Record<Keys, ROUTES> = {
-  [Keys.NEW_SUBMISSION]: ROUTES.NEW_SUBMISSION_OPTIONS,
-  [Keys.SPA_TYPE]: ROUTES.SPA_SUBMISSION_OPTIONS,
-  [Keys.SPA_MEDICAID_TYPE]: ROUTES.MEDICAID_SPA_SUB_OPTIONS,
-  [Keys.SPA_MEDICAID_LANDING_ELIGIBILITY]: ROUTES.MEDICAID_ELIGIBILITY_LANDING,
-  [Keys.SPA_MEDICAID_LANDING_ABP]: ROUTES.MEDICAID_ABP_LANDING,
-  [Keys.SPA_CHIP_TYPE]: ROUTES.CHIP_SPA_SUB_OPTIONS,
-  [Keys.SPA_CHIP_LANDING_ELIGIBILITY]: ROUTES.CHIP_ELIGIBILITY_LANDING,
-  [Keys.WAIVER_TYPE]: ROUTES.WAIVER_SUBMISSION_OPTIONS,
-  [Keys.WAIVER_1915B_TYPE]: ROUTES.B_WAIVER_SUBMISSION_OPTIONS,
-  [Keys.WAIVER_1915B_B4_TYPE]: ROUTES.B4_WAIVER_OPTIONS,
-  [Keys.WAIVER_1915B_CAP_TYPE]: ROUTES.BCAP_WAIVER_OPTIONS,
+const newSubmissionPageRouteMapper: Record<Keys, Route> = {
+  "new-submission": "/new-submission",
+  spa: "/new-submission/spa",
+  medicaid: "/new-submission/spa/medicaid",
+  "medicaid-eligibility":
+    "/new-submission/spa/medicaid/landing/medicaid-eligibility",
+  "medicaid-abp": "/new-submission/spa/medicaid/landing/medicaid-abp",
+  chip: "/new-submission/spa/chip",
+  "chip-eligibility": "/new-submission/spa/chip/landing/chip-eligibility",
+  waiver: "/new-submission/waiver",
+  b: "/new-submission/waiver/b",
+  b4: "/new-submission/waiver/b/b4",
+  capitated: "/new-submission/waiver/b/capitated",
 };
 
 export const optionCrumbsFromPath = (path: string): BreadCrumbConfig[] => [

src/services/ui/src/pages/create/external-landing/ExternalAppLandingPage.tsx

@@ -1,9 +1,10 @@
 import { Button } from "@/components/Inputs";
-import { Link, useLocation } from "react-router-dom";
+import { useLocation } from "react-router-dom";
+import { Link } from "@/components/Routing";
 import { PropsWithChildren, ReactElement } from "react";
 import { SimplePageTitle } from "@/pages/create/create-options";
 import { SimplePageContainer } from "@/components";
-import { FAQ_SECTION, ROUTES } from "@/routes";
+import { FAQ_SECTION } from "@/routes";
 import { BreadCrumbs } from "@/components/BreadCrumb";
 import { optionCrumbsFromPath } from "@/pages/create/create-breadcrumbs";
 export enum EXTERNAL_APP {
@@ -32,7 +33,8 @@ const FAQHelperText = () => (
       <Link
         className="text-sky-600 hover:text-sky-800 underline"
         target={"_faq"}
-        to={`${ROUTES.FAQ}/#${FAQ_SECTION.SYSTEM}`}
+        path="/faq"
+        hash={FAQ_SECTION.SYSTEM}
       >
         Crosswalk from Paper-based State Plan to MACPro and MMDL
       </Link>{" "}

src/services/ui/src/pages/create/options.tsx

@@ -1,80 +1,79 @@
-import { ROUTES } from "@/routes";
 import { OptionData } from "@/pages/create/create-options";
 
 export const AUTHORITY_OPTIONS: OptionData[] = [
   {
     title: "State Plan Amendment (SPA)",
     description: "Submit a new Medicaid or CHIP State Plan Amendment",
-    linkTo: ROUTES.SPA_SUBMISSION_OPTIONS,
+    linkTo: "/new-submission/spa",
   },
   {
     title: "Waiver Action",
     description:
       "Submit Waivers, Amendments, Renewals, and Temporary Extensions",
-    linkTo: ROUTES.WAIVER_SUBMISSION_OPTIONS,
+    linkTo: "/new-submission/waiver",
   },
 ];
 
 export const SPA_OPTIONS: OptionData[] = [
   {
     title: "Medicaid SPA",
     description: "Submit a new Medicaid State Plan Amendment",
-    linkTo: ROUTES.MEDICAID_SPA_SUB_OPTIONS,
+    linkTo: "/new-submission/spa/medicaid",
   },
   {
     title: "CHIP SPA",
     description: "Submit a new CHIP State Plan Amendment",
-    linkTo: ROUTES.CHIP_SPA_SUB_OPTIONS,
+    linkTo: "/new-submission/spa/chip",
   },
 ];
 
 export const MEDICAID_SPA_OPTIONS: OptionData[] = [
   {
     title: "Medicaid Eligibility, Enrollment, Administration, and Health Homes",
     description: "Redirects to the MACPro Appian submission system",
-    linkTo: ROUTES.MEDICAID_ELIGIBILITY_LANDING,
+    linkTo: "/new-submission/spa/medicaid/landing/medicaid-eligibility",
   },
   {
     title:
       "Medicaid Alternative Benefits Plans (ABP), and Medicaid Premiums and Cost Sharing",
     description: "Redirects to the MMDL submission system",
-    linkTo: ROUTES.MEDICAID_ABP_LANDING,
+    linkTo: "/new-submission/spa/medicaid/landing/medicaid-abp",
   },
   {
     title: "All Other Medicaid SPA Submissions",
     description: "Create a new Medicaid State Plan Amendment",
-    linkTo: ROUTES.MEDICAID_NEW,
+    linkTo: "/new-submission/spa/medicaid/create",
   },
 ];
 
 export const CHIP_SPA_OPTIONS: OptionData[] = [
   {
     title: "CHIP Eligibility",
     description: "Redirects to the MMDL submission system",
-    linkTo: ROUTES.CHIP_ELIGIBILITY_LANDING,
+    linkTo: "/new-submission/spa/chip/landing/chip-eligibility",
   },
   {
     title: "All Other CHIP SPA Submissions",
     description: "Create a new CHIP State Plan Amendment",
-    linkTo: ROUTES.CHIP_NEW,
+    linkTo: "/new-submission/spa/chip/create",
   },
 ];
 
 export const WAIVER_OPTIONS: OptionData[] = [
   {
     title: "Request Temporary Extension",
     description: "Submit for 1915(b) or 1915(c)",
-    linkTo: ROUTES.HOME,
+    linkTo: "/",
   },
   {
     title: "1915(b) Waiver Actions",
     description: "Submit 1915(b) Waivers, Amendments, and Renewals",
-    linkTo: ROUTES.B_WAIVER_SUBMISSION_OPTIONS,
+    linkTo: "/new-submission/waiver/b",
   },
   {
     title: "1915(c) Appendix K Amendment",
     description: "Create a 1915(c) Appendix K Amendment",
-    linkTo: ROUTES.HOME,
+    linkTo: "/",
   },
 ];
 
@@ -83,7 +82,7 @@ export const B_WAIVER_OPTIONS: OptionData[] = [
     title: "1915(b)(4) FFS Selective Contracting Waivers",
     description:
       "Submit 1915(b)(4) FFS Selective Contracting Waivers, Amendments, and Renewals",
-    linkTo: ROUTES.B4_WAIVER_OPTIONS,
+    linkTo: "/new-submission/waiver/b/b4",
   },
   {
     title: "1915(b) Comprehensive (Capitated) Waiver Authority",
@@ -99,7 +98,7 @@ export const B_WAIVER_OPTIONS: OptionData[] = [
         </b>
       </>
     ),
-    linkTo: ROUTES.BCAP_WAIVER_OPTIONS,
+    linkTo: "/new-submission/waiver/b/capitated",
   },
 ];
 
@@ -108,36 +107,36 @@ export const B4_WAIVER_OPTIONS: OptionData[] = [
     title: "1915(b)(4) FFS Selective Contracting New Initial Waiver",
     description:
       "Create a new 1915(b)(4) FFS Selective Contracting Initial Waiver",
-    linkTo: ROUTES.DASHBOARD,
+    linkTo: "/dashboard",
   },
   {
     title: "1915(b)(4) FFS Selective Contracting Renewal Waiver",
     description:
       "Renew an existing 1915(b)(4) FFS Selective Contracting Waiver",
-    linkTo: ROUTES.DASHBOARD,
+    linkTo: "/dashboard",
   },
   {
     title: "1915(b)(4) FFS Selective Contracting Waiver Amendment",
     description:
       "Amend an existing 1915(b)(4) FFS Selective Contracting Waiver",
-    linkTo: ROUTES.DASHBOARD,
+    linkTo: "/dashboard",
   },
 ];
 export const BCAP_WAIVER_OPTIONS: OptionData[] = [
   {
     title: "1915(b) Comprehensive (Capitated) New Initial Waiver",
     description:
       "Create a new 1915(b) Comprehensive (Capitated) Initial Waiver",
-    linkTo: ROUTES.DASHBOARD,
+    linkTo: "/dashboard",
   },
   {
     title: "1915(b) Comprehensive (Capitated) Renewal Waiver",
     description: "Renew an existing 1915(b) Comprehensive (Capitated) Waiver",
-    linkTo: ROUTES.DASHBOARD,
+    linkTo: "/dashboard",
   },
   {
     title: "1915(b) Comprehensive (Capitated) Waiver Amendment ",
     description: "Amend an existing 1915(b) Comprehensive (Capitated) Waiver",
-    linkTo: ROUTES.DASHBOARD,
+    linkTo: "/dashboard",
   },
 ];