From 91ec0bb45d3bee445753aa2b03c24eabb98c430d Mon Sep 17 00:00:00 2001
From: Kevin Haube <booking@kevinmhaube.com>
Date: Tue, 13 Feb 2024 15:46:07 -0500
Subject: [PATCH] feat(alerts): Modal and Alert banner upgrades (#366)

* Undo template: IssueRai

* Undo template: RespondToRai

* Undo template: WithdrawRai

* Undo template: WithdrawPackage

* Initialize alert content

* Initialize alert content

* Remove random modal usage from ActionCard

* Remove unused alert banner from Details

* Remove unused alert banner from Details

* Initialize new modal context

* Plug in context provider

* Implement CHIP SPA cancel modal; refine interface

* Implement Medicaid SPA cancel modal

* Undo handleSubmit abstraction: IssueRai

* Undo handleSubmit abstraction: RespondToRai

* Undo handleSubmit abstraction: WithdrawRai

* Undo handleSubmit abstraction: WithdrawPackage

* Fix Medicaid SPA routing

* Implement IssueRai cancel modal

* Implement RespondToRai cancel modal

* Implement WithdrawRai cancel modal

* Implement WithdrawPackage cancel modal

* Implement ToggleRaiWithdraw cancel modal

* Remove old modal context

* Modify modalContext for custom onAccept

* Modify Medicaid SPA cancel modal onAccept

* Modify CHIP SPA cancel modal onAccept

* Modify IssueRai cancel modal onAccept

* Modify RespondToRai cancel modal onAccept

* Modify ToggleRaiWithdraw cancel modal onAccept

* Modify WithdrawPackage cancel modal onAccept

* Modify WithdrawRai cancel modal onAccept

* Fix setOnSubmit calls

* Implement confirmation modal for WithdrawPackage

* Implement confirmation modal for WithdrawRai

* Initialize AlertContext

* Style success Alert variant

* Implement alert context for CHIP SPA

* Implement alert context for Medicaid SPA

* Add close button to Alert ui

* Implement alert context for IssueRai

* Implement alert context for RespondToRai

* Implement alert context for ToggleRaiWithdraw

* Implement alert context for WithdrawRai

* Implement alert context for WithdrawPackage

* Update alert with route based hiding

* Update alert with route based hiding; remaining forms

* Update Withdraw confirmation pattern

* Undo destructure for contexts: Medicaid SPA

* Undo destructure for contexts: CHIP SPA

* Undo destructure for contexts: IssueRai

* Undo destructure for contexts: RespondToRai

* Undo destructure for contexts: ToggleRaiWithdraw

* Undo destructure for contexts: WithdrawRai

* Undo destructure for contexts: WithdrawPackage

* Fix isLoading var source

* Update docs with code style

* Add alertContext tests

* Fix alertContext test

* Add modalContext tests

* Implement banners and modals on capitated b waivers

* Implement banners and modals on contracting b waivers

* Fix routing

* Add origin query

* Origin navigation: CHIP SPA

* Origin navigation: Medicaid SPA

* Origin navigation: Capitated B waivers

* Origin navigation: Contracting B waivers

* Origin navigation: Tooling update

* Origin navigation: Actions

* Docs: formOrigin util

* Cleanup: formOrigin
---
 docs/docs/team-norms/code-style.md            |  86 +++++++
 .../ui/src/components/Alert/index.tsx         |   2 +
 .../ui/src/components/Cards/OptionCard.tsx    |   2 +-
 .../components/Context/alertContext.test.tsx  |  64 ++++++
 .../src/components/Context/alertContext.tsx   |  74 ++++++
 .../components/Context/modalContext.test.tsx  |  72 ++++++
 .../src/components/Context/modalContext.tsx   |  54 +++++
 .../ui/src/components/Layout/index.tsx        |  62 ++---
 .../ui/src/hooks/useActionFormController.ts   |  32 ---
 .../ui/src/pages/actions/IssueRai.tsx         | 202 ++++++++++++++---
 .../ui/src/pages/actions/RespondToRai.tsx     | 196 +++++++++++++---
 .../actions/ToggleRaiResponseWithdraw.tsx     |  55 ++++-
 .../ui/src/pages/actions/WithdrawPackage.tsx  | 211 +++++++++++++++---
 .../ui/src/pages/actions/WithdrawRai.tsx      | 199 ++++++++++++++---
 src/services/ui/src/pages/actions/index.tsx   |  11 +-
 .../ui/src/pages/actions/template.tsx         | 126 -----------
 .../dashboard/Lists/renderCells/index.tsx     |   2 +-
 src/services/ui/src/pages/detail/index.tsx    |  82 +------
 src/services/ui/src/pages/form/chip-form.tsx  |  52 ++++-
 .../ui/src/pages/form/medicaid-form.tsx       |  60 +++--
 src/services/ui/src/pages/form/modals.tsx     | 127 -----------
 .../capitated-1915-b-waiver-amendment.tsx     |  52 ++++-
 .../capitated-1915-b-waiver-initial.tsx       |  51 ++++-
 .../capitated-1915-b-waiver-renewal.tsx       |  51 ++++-
 .../contracting-1915-b-waiver-amendment.tsx   |  51 ++++-
 .../contracting-1915-b-waiver-initial.tsx     |  51 ++++-
 .../contracting-1915-b-waiver-renewal.tsx     |  51 ++++-
 src/services/ui/src/utils/formOrigin.ts       |  29 +++
 28 files changed, 1478 insertions(+), 629 deletions(-)
 create mode 100644 docs/docs/team-norms/code-style.md
 create mode 100644 src/services/ui/src/components/Context/alertContext.test.tsx
 create mode 100644 src/services/ui/src/components/Context/alertContext.tsx
 create mode 100644 src/services/ui/src/components/Context/modalContext.test.tsx
 create mode 100644 src/services/ui/src/components/Context/modalContext.tsx
 delete mode 100644 src/services/ui/src/hooks/useActionFormController.ts
 delete mode 100644 src/services/ui/src/pages/actions/template.tsx
 delete mode 100644 src/services/ui/src/pages/form/modals.tsx
 create mode 100644 src/services/ui/src/utils/formOrigin.ts

diff --git a/docs/docs/team-norms/code-style.md b/docs/docs/team-norms/code-style.md
new file mode 100644
index 0000000000..fca3a870c4
--- /dev/null
+++ b/docs/docs/team-norms/code-style.md
@@ -0,0 +1,86 @@
+---
+layout: default
+title: Code Style Cheatsheet
+parent: Team Norms
+nav_order: 2
+---
+
+# Code Style
+
+### What is it?
+
+A set of rules or guidelines used when writing the source code for a computer program.
+
+### Why is it?
+
+It keeps the code looking neat and tidy, so anyone on the team can jump in and not
+get lost in a jungle of curly braces and indentation levels. It's like everyone speaking 
+the same slang in a super cool secret club. Plus, it saves time from arguing over trivial
+stuff, like whether tabs are better than spaces, so there's more time for the fun 
+stuff—coding and creating!
+
+# OneMAC Style Norms
+
+## Cheatsheet
+
+TL;DR? No worries, here's a cheatsheet of the concepts outlined below:
+
+- [DO NOT destructure](#object-access) so we maintain object context for methods and properties used in code
+
+### Object Access
+
+When integrating with complex objects, consider maintaining the object's integrity rather
+than opting for destructuring. This approach ensures that the object's context is 
+preserved, enhancing readability and maintainability.
+
+#### Nomenclature simplification
+
+For instance, rather than breaking
+down the object into individual variables, which can lead to verbose and confusing naming
+conventions, maintain the object as a whole.
+
+```typescript jsx
+const {
+    setModalOpen,
+    setContent: setModalContent,
+    setOnAccept: setModalOnAccept,
+} = useModalContext();
+const {
+    setContent: setBannerContent,
+    setBannerShow,
+    setBannerDisplayOn,
+} = useAlertContext();
+  
+// vs
+
+const modal = useModalContext();
+const alert = useAlertContext();
+```
+
+#### Usage implication
+
+This method simplifies reference to its properties and methods, providing a clearer and 
+more direct understanding of its usage within the code. This strategy is particularly 
+beneficial in scenarios where the object's structure and context significantly contribute
+to its functionality and meaning in the application.
+
+```typescript jsx
+<form
+  onSubmit={form.handleSubmit(async (data) => {
+    try {
+      await submit({
+        //...
+      });
+      alert.setContent({
+        header: "RAI response submitted",
+        body: `The RAI response for ${item._source.id} has been submitted.`,
+      });
+      alert.setBannerShow(true);
+      alert.setBannerDisplayOn("/dashboard");
+      navigate({ path: "/dashboard" });
+    } catch (e) {
+      //...
+    }
+  })}
+>
+```
\ No newline at end of file
diff --git a/src/services/ui/src/components/Alert/index.tsx b/src/services/ui/src/components/Alert/index.tsx
index bd1d5f972a..5478f0700e 100644
--- a/src/services/ui/src/components/Alert/index.tsx
+++ b/src/services/ui/src/components/Alert/index.tsx
@@ -13,6 +13,8 @@ const alertVariants = cva(
           "border-destructive/50 text-destructive [&>svg]:text-destructive",
         infoBlock:
           "border-l-[6px] border-y-0 border-r-0 border-cyan-500 bg-cyan-300/10 rounded-none",
+        success:
+          "border-l-[6px] border-[#2E8540] border-y-0 border-r-0 bg-[#E7F4E4]",
       },
     },
     defaultVariants: {
diff --git a/src/services/ui/src/components/Cards/OptionCard.tsx b/src/services/ui/src/components/Cards/OptionCard.tsx
index 60d098a50f..881a44cb63 100644
--- a/src/services/ui/src/components/Cards/OptionCard.tsx
+++ b/src/services/ui/src/components/Cards/OptionCard.tsx
@@ -37,7 +37,7 @@ export const OptionCard = ({
 }: MACFieldsetOption) => {
   return (
     <label>
-      <Link to={linkTo} relative={"path"}>
+      <Link to={`${linkTo}?origin=options`} relative={"path"}>
         <div
           data-testid={"card-inner-wrapper"}
           className={`flex items-center justify-between gap-6 px-6 py-4 ${
diff --git a/src/services/ui/src/components/Context/alertContext.test.tsx b/src/services/ui/src/components/Context/alertContext.test.tsx
new file mode 100644
index 0000000000..662f1b90a9
--- /dev/null
+++ b/src/services/ui/src/components/Context/alertContext.test.tsx
@@ -0,0 +1,64 @@
+import { act, render, renderHook, screen } from "@testing-library/react";
+import {
+  AlertProvider,
+  useAlertContext,
+} from "@/components/Context/alertContext";
+import { describe, test, expect } from "vitest";
+import { PropsWithChildren, useEffect } from "react";
+import { MemoryRouter } from "react-router-dom";
+
+const wrapper = ({ children }: PropsWithChildren) => (
+  <MemoryRouter>
+    <AlertProvider>{children}</AlertProvider>
+  </MemoryRouter>
+);
+
+describe("useAlertContext", () => {
+  test("hook provides content values and setter", () => {
+    const ctx = renderHook(useAlertContext, { wrapper });
+    expect(ctx.result.current.content).toStrictEqual({
+      header: "No header given",
+      body: "No body given",
+    });
+    act(() =>
+      ctx.result.current.setContent({
+        header: "New header",
+        body: "New body",
+      })
+    );
+    expect(ctx.result.current.content).toStrictEqual({
+      header: "New header",
+      body: "New body",
+    });
+  });
+  test("hook provides switch for showing the banner, defaults to off", () => {
+    const ctx = renderHook(useAlertContext, { wrapper });
+    expect(ctx.result.current.bannerShow).toBe(false);
+    act(() => ctx.result.current.setBannerShow(true));
+    expect(ctx.result.current.bannerShow).toBe(true);
+  });
+  test("hook provides route-specific display criteria and setter", () => {
+    const ctx = renderHook(useAlertContext, { wrapper });
+    expect(ctx.result.current.bannerDisplayOn).toBe("/");
+    act(() => ctx.result.current.setBannerDisplayOn("/dashboard"));
+    expect(ctx.result.current.bannerDisplayOn).toBe("/dashboard");
+  });
+});
+
+const TestChild = () => {
+  const alert = useAlertContext();
+  useEffect(() => {
+    alert.setBannerShow(true);
+  }, []);
+  return <h1>test</h1>;
+};
+describe("AlertProvider", () => {
+  test("renders alert component above children", () => {
+    render(<TestChild />, { wrapper });
+    const child = screen.getByText("test");
+    const alert = screen.getByText("No header given");
+    expect(child.compareDocumentPosition(alert)).toBe(
+      Node.DOCUMENT_POSITION_PRECEDING
+    );
+  });
+});
diff --git a/src/services/ui/src/components/Context/alertContext.tsx b/src/services/ui/src/components/Context/alertContext.tsx
new file mode 100644
index 0000000000..a95293759b
--- /dev/null
+++ b/src/services/ui/src/components/Context/alertContext.tsx
@@ -0,0 +1,74 @@
+import { PropsWithChildren, useEffect, useState } from "react";
+import { Check, X } from "lucide-react";
+import { createContextProvider } from "@/utils";
+import { Alert, SimplePageContainer } from "@/components";
+import { useLocation } from "react-router-dom";
+import { Route } from "@/components/Routing/types";
+
+type BannerContent = {
+  header: string;
+  body: string;
+};
+
+const useAlertController = () => {
+  const [bannerShow, setBannerShow] = useState<boolean>(false);
+  const [bannerDisplayOn, setBannerDisplayOn] = useState<Route>("/");
+  const [content, setContent] = useState<BannerContent>({
+    header: "No header given",
+    body: "No body given",
+  });
+  return {
+    content,
+    setContent,
+    bannerDisplayOn,
+    setBannerDisplayOn,
+    bannerShow,
+    setBannerShow,
+  };
+};
+
+export const [AlertContextProvider, useAlertContext] = createContextProvider<
+  ReturnType<typeof useAlertController>
+>({
+  name: "Banner Context",
+  errorMessage:
+    "This component requires the `AlertProvider` wrapper to make use of banner UIs.",
+});
+
+export const AlertProvider = ({ children }: PropsWithChildren) => {
+  const context = useAlertController();
+  const location = useLocation();
+  /* When a form redirects on success, these two values will match.
+   * Once a user navigates away from that path, we set the show boolean
+   * to false, so we ensure it won't show again if they navigate back to
+   * the Route defined in context.bannerDisplayOn */
+  useEffect(() => {
+    if (context.bannerDisplayOn !== location.pathname)
+      context.setBannerShow(false);
+  }, [location.pathname]);
+  return (
+    <AlertContextProvider value={context}>
+      {/* Relies on the effect above to swap context.bannerShow boolean on
+       * Route change*/}
+      {context.bannerDisplayOn === location.pathname && context.bannerShow && (
+        <SimplePageContainer>
+          <Alert variant={"success"} className="mt-4 mb-8 flex-row text-sm">
+            <div className={"flex items-start justify-between"}>
+              <Check />
+              <div className={"ml-2 w-full"}>
+                <h3 className={"text-lg font-bold"}>
+                  {context.content.header}
+                </h3>
+                <p>{context.content.body}</p>
+              </div>
+              <button onClick={() => context.setBannerShow(false)}>
+                <X size={20} />
+              </button>
+            </div>
+          </Alert>
+        </SimplePageContainer>
+      )}
+      {children}
+    </AlertContextProvider>
+  );
+};
diff --git a/src/services/ui/src/components/Context/modalContext.test.tsx b/src/services/ui/src/components/Context/modalContext.test.tsx
new file mode 100644
index 0000000000..e325299725
--- /dev/null
+++ b/src/services/ui/src/components/Context/modalContext.test.tsx
@@ -0,0 +1,72 @@
+import { act, render, renderHook, screen } from "@testing-library/react";
+import { describe, test, expect, vi } from "vitest";
+import { PropsWithChildren, useEffect } from "react";
+import {
+  useModalContext,
+  ModalProvider,
+} from "@/components/Context/modalContext";
+import { MemoryRouter } from "react-router-dom";
+
+const wrapper = ({ children }: PropsWithChildren) => (
+  <MemoryRouter>
+    <ModalProvider>{children}</ModalProvider>
+  </MemoryRouter>
+);
+
+describe("useAlertContext", () => {
+  test("hook provides content values and setter", () => {
+    const ctx = renderHook(useModalContext, { wrapper });
+    expect(ctx.result.current.content).toStrictEqual({
+      header: "No header given",
+      body: "No body given",
+    });
+    act(() =>
+      ctx.result.current.setContent({
+        header: "New header",
+        body: "New body",
+      })
+    );
+    expect(ctx.result.current.content).toStrictEqual({
+      header: "New header",
+      body: "New body",
+    });
+  });
+  test("hook provides switch for showing the modal, defaults to off", () => {
+    const ctx = renderHook(useModalContext, { wrapper });
+    expect(ctx.result.current.modalOpen).toBe(false);
+    act(() => ctx.result.current.setModalOpen(true));
+    expect(ctx.result.current.modalOpen).toBe(true);
+  });
+  test("hook provides onAccept action property and setter", () => {
+    const ctx = renderHook(useModalContext, { wrapper });
+    const action = vi.fn(() => console.log("test"));
+    expect(ctx.result.current.onAccept).toBe(void {});
+    act(() => ctx.result.current.setOnAccept(() => action));
+    act(() => ctx.result.current.onAccept());
+    expect(action).toHaveBeenCalledOnce();
+  });
+});
+
+describe("ModalProvider", () => {
+  test("accept button is operational", () => {
+    const action = vi.fn(() => console.log("test"));
+    const TestChild = () => {
+      const modal = useModalContext();
+      useEffect(() => {
+        modal.setContent({
+          header: "Test header",
+          body: "Test body",
+          acceptButtonText: "Accept",
+          cancelButtonText: "Cancel",
+        });
+        modal.setOnAccept(() => action);
+        modal.setModalOpen(true);
+      }, []);
+      return <h1>test</h1>;
+    };
+    render(<TestChild />, { wrapper });
+    const accept = screen.getByText("Accept");
+    accept.click();
+    expect(action).toHaveBeenCalledOnce();
+  });
+});
diff --git a/src/services/ui/src/components/Context/modalContext.tsx b/src/services/ui/src/components/Context/modalContext.tsx
new file mode 100644
index 0000000000..27ae43be3e
--- /dev/null
+++ b/src/services/ui/src/components/Context/modalContext.tsx
@@ -0,0 +1,54 @@
+import { PropsWithChildren, useState } from "react";
+import { createContextProvider } from "@/utils";
+import { ConfirmationModal } from "@/components";
+
+type SubmissionAlert = {
+  header: string;
+  body: string;
+  cancelButtonText?: string;
+  acceptButtonText?: string;
+};
+const useModalController = () => {
+  const [modalOpen, setModalOpen] = useState<boolean>(false);
+  const [onAccept, setOnAccept] = useState<VoidFunction>(() => void {});
+  const [content, setContent] = useState<SubmissionAlert>({
+    header: "No header given",
+    body: "No body given",
+  });
+  return {
+    content,
+    setContent,
+    onAccept,
+    setOnAccept,
+    modalOpen,
+    setModalOpen,
+  };
+};
+
+export const [ModalContextProvider, useModalContext] = createContextProvider<
+  ReturnType<typeof useModalController>
+>({
+  name: "Modal Context",
+  errorMessage:
+    "This component requires the `ModalProvider` wrapper to make use of modal UIs.",
+});
+
+export const ModalProvider = ({ children }: PropsWithChildren) => {
+  const context = useModalController();
+  return (
+    <ModalContextProvider value={context}>
+      {children}
+      <ConfirmationModal
+        open={context.modalOpen}
+        onAccept={context.onAccept}
+        onCancel={() => context.setModalOpen(false)}
+        cancelButtonVisible={context.content.cancelButtonText !== undefined}
+        acceptButtonVisible={context.content.acceptButtonText !== undefined}
+        cancelButtonText={context.content.cancelButtonText}
+        acceptButtonText={context.content.acceptButtonText}
+        title={context.content.header}
+        body={context.content.body}
+      />
+    </ModalContextProvider>
+  );
+};
diff --git a/src/services/ui/src/components/Layout/index.tsx b/src/services/ui/src/components/Layout/index.tsx
index 4779de9389..52a2baaa2d 100644
--- a/src/services/ui/src/components/Layout/index.tsx
+++ b/src/services/ui/src/components/Layout/index.tsx
@@ -13,6 +13,8 @@ import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import config from "@/config";
 import { useNavigate } from "../Routing";
 import { FAQ_TAB } from "../Routing/consts";
+import { ModalProvider } from "@/components/Context/modalContext";
+import { AlertProvider } from "@/components/Context/alertContext";
 
 const getLinks = (isAuthenticated: boolean, role?: boolean) => {
   const isProd = window && window.location.hostname === "mako.cms.gov";
@@ -106,35 +108,39 @@ export const Layout = () => {
   const isDesktop = useMediaQuery("(min-width: 768px)");
 
   return (
-    <div className="min-h-full flex flex-col">
-      <UsaBanner />
-      <nav className="bg-primary">
-        <div className="max-w-screen-xl mx-auto px-4 lg:px-8">
-          <div className="h-[70px] flex gap-12 items-center text-white">
-            <Link to="/">
-              <img
-                className="h-10 w-28 min-w-[112px] resize-none"
-                src={oneMacLogo}
-                alt="onemac site logo"
-              />
-            </Link>
-            <ResponsiveNav isDesktop={isDesktop} />
+    <ModalProvider>
+      <div className="min-h-full flex flex-col">
+        <UsaBanner />
+        <nav className="bg-primary">
+          <div className="max-w-screen-xl mx-auto px-4 lg:px-8">
+            <div className="h-[70px] flex gap-12 items-center text-white">
+              <Link to="/">
+                <img
+                  className="h-10 w-28 min-w-[112px] resize-none"
+                  src={oneMacLogo}
+                  alt="onemac site logo"
+                />
+              </Link>
+              <ResponsiveNav isDesktop={isDesktop} />
+            </div>
           </div>
-        </div>
-      </nav>
-      <main className="flex-1">
-        <Outlet />
-      </main>
-      <Footer
-        email="OneMAC_Helpdesk@cms.hhs.gov"
-        address={{
-          city: "Baltimore",
-          state: "MD",
-          street: "7500 Security Boulevard",
-          zip: 21244,
-        }}
-      />
-    </div>
+        </nav>
+        <main className="flex-1">
+          <AlertProvider>
+            <Outlet />
+          </AlertProvider>
+        </main>
+        <Footer
+          email="OneMAC_Helpdesk@cms.hhs.gov"
+          address={{
+            city: "Baltimore",
+            state: "MD",
+            street: "7500 Security Boulevard",
+            zip: 21244,
+          }}
+        />
+      </div>
+    </ModalProvider>
   );
 };
 
diff --git a/src/services/ui/src/hooks/useActionFormController.ts b/src/services/ui/src/hooks/useActionFormController.ts
deleted file mode 100644
index a3dd76bc2b..0000000000
--- a/src/services/ui/src/hooks/useActionFormController.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { FieldValues, SubmitHandler, UseFormReturn } from "react-hook-form";
-import { useParams } from "@/components/Routing";
-import { useGetUser } from "@/api/useGetUser";
-import { useModalContext } from "@/pages/form/modals";
-import { submit } from "@/api/submissionService";
-import { buildActionUrl } from "@/lib";
-import { PlanType } from "shared-types";
-
-export const useActionSubmitHandler = <D extends FieldValues>({
-  authority,
-}: {
-  formHookReturn: UseFormReturn<D>;
-  authority: PlanType;
-}): SubmitHandler<D> => {
-  const { id, type } = useParams("/action/:id/:type");
-  const { data: user } = useGetUser();
-  const { setSuccessModalOpen, setErrorModalOpen } = useModalContext();
-  return async (data) => {
-    try {
-      await submit<D & { id: string }>({
-        data: { ...data, id: id! },
-        endpoint: buildActionUrl(type!),
-        user,
-        authority: authority,
-      });
-      setSuccessModalOpen(true);
-    } catch (e) {
-      console.error(e);
-      setErrorModalOpen(true);
-    }
-  };
-};
diff --git a/src/services/ui/src/pages/actions/IssueRai.tsx b/src/services/ui/src/pages/actions/IssueRai.tsx
index b2b026a0b2..7c6782dd88 100644
--- a/src/services/ui/src/pages/actions/IssueRai.tsx
+++ b/src/services/ui/src/pages/actions/IssueRai.tsx
@@ -1,51 +1,183 @@
-import { useForm } from "react-hook-form";
+import { Path, useForm } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { opensearch, PlanType } from "shared-types";
-import { ActionFormTemplate } from "@/pages/actions/template";
-import { useActionSubmitHandler } from "@/hooks/useActionFormController";
 import { FormSetup } from "@/pages/actions/setups";
+import {
+  Button,
+  Form,
+  FormField,
+  FormMessage,
+  RequiredIndicator,
+} from "@/components/Inputs";
+import { Alert, LoadingSpinner } from "@/components";
+import { ActionFormIntro, PackageInfo } from "@/pages/actions/common";
+import { AttachmentsSizeTypesDesc } from "@/pages/form/content";
+import {
+  SlotAdditionalInfo,
+  SlotAttachments,
+} from "@/pages/actions/renderSlots";
+import { Info } from "lucide-react";
+import { useNavigate, useParams } from "@/components/Routing";
+import { useGetUser } from "@/api/useGetUser";
+import { submit } from "@/api/submissionService";
+import { buildActionUrl } from "@/lib";
+import { useModalContext } from "@/components/Context/modalContext";
+import { useCallback } from "react";
+import { useAlertContext } from "@/components/Context/alertContext";
+import { Origin, ORIGIN, originRoute, useOriginPath } from "@/utils/formOrigin";
+import { useQuery as useQueryString } from "@/hooks";
 
-const preSubmitMessage =
-  "Once you submit this form, a confirmation email is sent to you and to the State.";
 export const RaiIssue = ({
   item,
   schema,
   attachments,
 }: FormSetup & { item: opensearch.main.ItemResult }) => {
+  const navigate = useNavigate();
+  const urlQuery = useQueryString();
+  const { id, type } = useParams("/action/:id/:type");
+  const { data: user } = useGetUser();
   const form = useForm<z.infer<typeof schema>>({
     resolver: zodResolver(schema),
   });
-  const handleSubmit = useActionSubmitHandler<z.infer<typeof schema>>({
-    formHookReturn: form,
-    authority: item?._source.authority as PlanType,
-  });
-
+  const modal = useModalContext();
+  const alert = useAlertContext();
+  const originPath = useOriginPath();
+  const acceptAction = useCallback(() => {
+    modal.setModalOpen(false);
+    navigate(originPath ? { path: originPath } : { path: "/dashboard" });
+  }, [originPath]);
   return (
-    <ActionFormTemplate<z.infer<typeof schema>>
-      item={item}
-      formController={form}
-      submitHandler={handleSubmit}
-      title={"Formal RAI Details"}
-      description={
-        <p className="font-light mb-6 max-w-4xl">
-          Issuance of a Formal RAI in OneMAC will create a Formal RAI email sent
-          to the State. This will also create a section in the package details
-          summary for you and the State to have record. Please attach the Formal
-          RAI Letter along with any additional information or comments in the
-          provided text box. {preSubmitMessage}
-          <strong className="bold">
-            If you leave this page, you will lose your progress on this form.
-          </strong>
-        </p>
-      }
-      preSubmitMessage={preSubmitMessage}
-      attachments={attachments}
-      attachmentFaqLink={"/faq/#medicaid-spa-rai-attachments"}
-      requireAddlInfo
-      addlInfoInstructions={
-        <p>Add anything else that you would like to share with the State.</p>
-      }
-    />
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(async (data) => {
+          try {
+            await submit({
+              data: { ...data, id: id! },
+              endpoint: buildActionUrl(type!),
+              user,
+              authority: item?._source.authority as PlanType,
+            });
+            alert.setContent({
+              header: "RAI issued",
+              body: `The RAI for ${item._source.id} has been submitted. An email confirmation will be sent to you and the state.`,
+            });
+            alert.setBannerShow(true);
+            alert.setBannerDisplayOn(
+              // This uses the originRoute map because this value doesn't work
+              // when any queries are added, such as the case of /details?id=...
+              urlQuery.get(ORIGIN)
+                ? originRoute[urlQuery.get(ORIGIN)! as Origin]
+                : "/dashboard"
+            );
+            navigate(
+              originPath ? { path: originPath } : { path: "/dashboard" }
+            );
+          } catch (e) {
+            console.error(e);
+          }
+        })}
+      >
+        {form.formState.isSubmitting && <LoadingSpinner />}
+        {/* Intro */}
+        <ActionFormIntro title={"Formal RAI Details"}>
+          <RequiredIndicator /> Indicates a required field
+          <p className="font-light mb-6 max-w-4xl">
+            Issuance of a Formal RAI in OneMAC will create a Formal RAI email
+            sent to the State. This will also create a section in the package
+            details summary for you and the State to have record. Please attach
+            the Formal RAI Letter along with any additional information or
+            comments in the provided text box. Once you submit this form, a
+            confirmation email is sent to you and to the State.
+            <strong className="bold">
+              If you leave this page, you will lose your progress on this form.
+            </strong>
+          </p>
+        </ActionFormIntro>
+        {/* Package ID and type info */}
+        <PackageInfo item={item} />
+        {/* Attachments */}
+        <h3 className="font-bold text-2xl font-sans">Attachments</h3>
+        <AttachmentsSizeTypesDesc
+          faqLink={"/faq/#medicaid-spa-rai-attachments"}
+        />
+        {attachments.map(({ name, label, required }) => (
+          <FormField
+            key={String(name)}
+            control={form.control}
+            name={`attachments.${String(name)}` as Path<typeof schema>}
+            render={SlotAttachments({
+              label: (
+                <>
+                  {label}
+                  {required ? <RequiredIndicator /> : ""}
+                </>
+              ),
+              message: <FormMessage />,
+              className: "my-4",
+            })}
+          />
+        ))}
+        {/* Additional Info */}
+        <FormField
+          control={form.control}
+          name={"additionalInformation" as Path<typeof schema>}
+          render={SlotAdditionalInfo({
+            label: (
+              <p>
+                Add anything else that you would like to share with the State.
+              </p>
+            ),
+            description: "4,000 characters allowed",
+            className: "pt-6",
+            required: true,
+          })}
+        />
+        {/* Error banner */}
+        {Object.keys(form.formState.errors).length !== 0 && (
+          <Alert className="my-6" variant="destructive">
+            Input validation error(s)
+            <ul className="list-disc">
+              {Object.values(form.formState.errors).map(
+                (err, idx) =>
+                  err?.message && (
+                    <li className="ml-8 my-2" key={idx}>
+                      {err.message as string}
+                    </li>
+                  )
+              )}
+            </ul>
+          </Alert>
+        )}
+        {/* Pre-submit message banner */}
+        <Alert variant={"infoBlock"} className="my-2 w-full flex-row text-sm">
+          <Info />
+          <p className="ml-2">
+            Once you submit this form, a confirmation email is sent to you and
+            to the State.
+          </p>
+        </Alert>
+        {/* Buttons */}
+        <div className="flex gap-2 my-8">
+          <Button type="submit">Submit</Button>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => {
+              modal.setContent({
+                header: "Stop form submission?",
+                body: "All information you've entered on this form will be lost if you leave this page.",
+                acceptButtonText: "Yes, leave form",
+                cancelButtonText: "Return to form",
+              });
+              modal.setOnAccept(() => acceptAction);
+              modal.setModalOpen(true);
+            }}
+          >
+            Cancel
+          </Button>
+        </div>
+      </form>
+    </Form>
   );
 };
diff --git a/src/services/ui/src/pages/actions/RespondToRai.tsx b/src/services/ui/src/pages/actions/RespondToRai.tsx
index 7cd0f97009..b7145fcf10 100644
--- a/src/services/ui/src/pages/actions/RespondToRai.tsx
+++ b/src/services/ui/src/pages/actions/RespondToRai.tsx
@@ -1,12 +1,32 @@
-import { useForm } from "react-hook-form";
+import { Path, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { opensearch, PlanType } from "shared-types";
-import { useActionSubmitHandler } from "@/hooks/useActionFormController";
-import { ActionFormTemplate } from "@/pages/actions/template";
 import { FormSetup } from "@/pages/actions/setups";
+import { useModalContext } from "@/components/Context/modalContext";
+import {
+  Button,
+  Form,
+  FormField,
+  FormMessage,
+  RequiredIndicator,
+} from "@/components/Inputs";
+import { Alert, LoadingSpinner } from "@/components";
+import { ActionFormIntro, PackageInfo } from "@/pages/actions/common";
+import { AttachmentsSizeTypesDesc } from "@/pages/form/content";
+import {
+  SlotAdditionalInfo,
+  SlotAttachments,
+} from "@/pages/actions/renderSlots";
+import { Info } from "lucide-react";
+import { submit } from "@/api/submissionService";
+import { buildActionUrl } from "@/lib";
+import { useNavigate, useParams } from "@/components/Routing";
+import { useGetUser } from "@/api/useGetUser";
+import { useCallback } from "react";
+import { useAlertContext } from "@/components/Context/alertContext";
+import { Origin, ORIGIN, originRoute, useOriginPath } from "@/utils/formOrigin";
+import { useQuery as useQueryString } from "@/hooks";
 
-const preSubmitMessage =
-  "Once you submit this form, a confirmation email is sent to you and to CMS. CMS will use this content to review your package, and you will not be able to edit this form. If CMS needs any additional information, they will follow up by email.";
 export const RespondToRai = ({
   item,
   schema,
@@ -14,34 +34,152 @@ export const RespondToRai = ({
 }: FormSetup & {
   item: opensearch.main.ItemResult;
 }) => {
+  const navigate = useNavigate();
+  const urlQuery = useQueryString();
+  const { id, type } = useParams("/action/:id/:type");
+  const { data: user } = useGetUser();
+  const modal = useModalContext();
+  const alert = useAlertContext();
+  const originPath = useOriginPath();
+  const acceptAction = useCallback(() => {
+    modal.setModalOpen(false);
+    navigate(originPath ? { path: originPath } : { path: "/dashboard" });
+  }, []);
   const form = useForm({
     resolver: zodResolver(schema),
   });
-  const handleSubmit = useActionSubmitHandler({
-    formHookReturn: form,
-    authority: item?._source.authority as PlanType,
-  });
 
   return (
-    <ActionFormTemplate
-      item={item}
-      formController={form}
-      submitHandler={handleSubmit}
-      title={`${item._source.planType} Formal RAI Response Details`}
-      description={
-        <p className="font-light mb-6 max-w-4xl">
-          {preSubmitMessage}{" "}
-          <strong className="bold">
-            If you leave this page, you will lose your progress on this form.
-          </strong>
-        </p>
-      }
-      preSubmitMessage={preSubmitMessage}
-      attachments={attachments}
-      attachmentFaqLink={"/faq/#medicaid-spa-rai-attachments"}
-      addlInfoInstructions={
-        <p>Add anything else that you would like to share with CMS.</p>
-      }
-    />
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(async (data) => {
+          try {
+            await submit({
+              data: { ...data, id: id! },
+              endpoint: buildActionUrl(type!),
+              user,
+              authority: item?._source.authority as PlanType,
+            });
+            alert.setContent({
+              header: "RAI response submitted",
+              body: `The RAI response for ${item._source.id} has been submitted.`,
+            });
+            alert.setBannerShow(true);
+            alert.setBannerDisplayOn(
+              // This uses the originRoute map because this value doesn't work
+              // when any queries are added, such as the case of /details?id=...
+              urlQuery.get(ORIGIN)
+                ? originRoute[urlQuery.get(ORIGIN)! as Origin]
+                : "/dashboard"
+            );
+            navigate(
+              originPath ? { path: originPath } : { path: "/dashboard" }
+            );
+          } catch (e) {
+            console.error(e);
+          }
+        })}
+      >
+        {form.formState.isSubmitting && <LoadingSpinner />}
+        {/* Intro */}
+        <ActionFormIntro
+          title={`${item._source.planType} Formal RAI Response Details`}
+        >
+          <RequiredIndicator /> Indicates a required field
+          <p className="font-light mb-6 max-w-4xl">
+            Once you submit this form, a confirmation email is sent to you and
+            to CMS. CMS will use this content to review your package, and you
+            will not be able to edit this form. If CMS needs any additional
+            information, they will follow up by email.
+            <strong className="bold">
+              If you leave this page, you will lose your progress on this form.
+            </strong>
+          </p>
+        </ActionFormIntro>
+        {/* Package ID and type info */}
+        <PackageInfo item={item} />
+        {/* Attachments */}
+        <h3 className="font-bold text-2xl font-sans">Attachments</h3>
+        <AttachmentsSizeTypesDesc
+          faqLink={"/faq/#medicaid-spa-rai-attachments"}
+        />
+        {attachments.map(({ name, label, required }) => (
+          <FormField
+            key={String(name)}
+            control={form.control}
+            name={`attachments.${String(name)}` as Path<typeof schema>}
+            render={SlotAttachments({
+              label: (
+                <>
+                  {label}
+                  {required ? <RequiredIndicator /> : ""}
+                </>
+              ),
+              message: <FormMessage />,
+              className: "my-4",
+            })}
+          />
+        ))}
+        {/* Additional Info */}
+        <FormField
+          control={form.control}
+          name={"additionalInformation" as Path<typeof schema>}
+          render={SlotAdditionalInfo({
+            label: (
+              <p>Add anything else that you would like to share with CMS.</p>
+            ),
+            description: "4,000 characters allowed",
+            className: "pt-6",
+            required: false,
+          })}
+        />
+        {/* Error banner */}
+        {Object.keys(form.formState.errors).length !== 0 && (
+          <Alert className="my-6" variant="destructive">
+            Input validation error(s)
+            <ul className="list-disc">
+              {Object.values(form.formState.errors).map(
+                (err, idx) =>
+                  err?.message && (
+                    <li className="ml-8 my-2" key={idx}>
+                      {err.message as string}
+                    </li>
+                  )
+              )}
+            </ul>
+          </Alert>
+        )}
+        {/* Pre-submit message banner */}
+        <Alert variant={"infoBlock"} className="my-2 w-full flex-row text-sm">
+          <Info />
+          <p className="ml-2">
+            Once you submit this form, a confirmation email is sent to you and
+            to CMS. CMS will use this content to review your package, and you
+            will not be able to edit this form. If CMS needs any additional
+            information, they will follow up by email.
+          </p>
+        </Alert>
+        {/* Buttons */}
+        <div className="flex gap-2 my-8">
+          <Button type="submit">Submit</Button>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => {
+              modal.setContent({
+                header: "Stop form submission?",
+                body: "All information you've entered on this form will be lost if you leave this page.",
+                acceptButtonText: "Yes, leave form",
+                cancelButtonText: "Return to form",
+              });
+              modal.setOnAccept(() => acceptAction);
+              modal.setModalOpen(true);
+            }}
+          >
+            Cancel
+          </Button>
+        </div>
+      </form>
+    </Form>
   );
 };
diff --git a/src/services/ui/src/pages/actions/ToggleRaiResponseWithdraw.tsx b/src/services/ui/src/pages/actions/ToggleRaiResponseWithdraw.tsx
index 16252cfdac..9ce07d0fd1 100644
--- a/src/services/ui/src/pages/actions/ToggleRaiResponseWithdraw.tsx
+++ b/src/services/ui/src/pages/actions/ToggleRaiResponseWithdraw.tsx
@@ -1,30 +1,40 @@
-import { Navigate, useParams } from "@/components/Routing";
+import { Navigate, useNavigate, useParams } from "@/components/Routing";
 import { Alert, LoadingSpinner } from "@/components";
 import { Action, PlanType, opensearch } from "shared-types";
 import { Button } from "@/components/Inputs";
-import { FC, useEffect, useMemo } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import { useSubmissionService } from "@/api/submissionService";
 import { buildActionUrl } from "@/lib";
 import { useGetUser } from "@/api/useGetUser";
 import { ActionFormIntro, PackageInfo } from "@/pages/actions/common";
-import { useModalContext } from "@/pages/form/modals";
+import { useModalContext } from "@/components/Context/modalContext";
+import { useAlertContext } from "@/components/Context/alertContext";
+import { Origin, ORIGIN, originRoute, useOriginPath } from "@/utils/formOrigin";
+import { useQuery as useQueryString } from "@/hooks";
 
 export const ToggleRaiResponseWithdraw = ({
   item,
 }: {
   item?: opensearch.main.ItemResult;
 }) => {
+  const navigate = useNavigate();
+  const urlQuery = useQueryString();
   const { id, type } = useParams("/action/:id/:type");
   const { data: user } = useGetUser();
-  const authority = item?._source.authority as PlanType;
-  const { setCancelModalOpen, setSuccessModalOpen } = useModalContext();
+  const modal = useModalContext();
+  const alert = useAlertContext();
+  const originPath = useOriginPath();
+  const acceptAction = useCallback(() => {
+    modal.setModalOpen(false);
+    navigate(originPath ? { path: originPath } : { path: "/dashboard" });
+  }, []);
   const { mutate, isLoading, isSuccess, error } = useSubmissionService<{
     id: string;
   }>({
     data: { id: id! },
     endpoint: buildActionUrl(type!),
     user,
-    authority,
+    authority: item?._source.authority as PlanType,
   });
 
   const ACTION_WORD = useMemo(
@@ -33,7 +43,24 @@ export const ToggleRaiResponseWithdraw = ({
   );
 
   useEffect(() => {
-    if (isSuccess) setSuccessModalOpen(true);
+    if (isSuccess) {
+      alert.setContent({
+        header: `RAI response withdrawal ${ACTION_WORD.toLowerCase()}d`,
+        body:
+          ACTION_WORD === "Enable"
+            ? "The state will be able to withdraw its RAI response. It may take up to a minute for this change to be applied."
+            : "The state will not be able to withdraw its RAI response. It may take up to a minute for this change to be applied.",
+      });
+      alert.setBannerShow(true);
+      alert.setBannerDisplayOn(
+        // This uses the originRoute map because this value doesn't work
+        // when any queries are added, such as the case of /details?id=...
+        urlQuery.get(ORIGIN)
+          ? originRoute[urlQuery.get(ORIGIN)! as Origin]
+          : "/dashboard"
+      );
+      navigate(originPath ? { path: originPath } : { path: "/dashboard" });
+    }
   }, [isSuccess]);
 
   if (!item) return <Navigate path={"/dashboard"} />; // Prevents optional chains below
@@ -62,7 +89,19 @@ export const ToggleRaiResponseWithdraw = ({
       )}
       <div className="flex gap-2">
         <Button onClick={() => mutate()}>Submit</Button>
-        <Button onClick={() => setCancelModalOpen(true)} variant="outline">
+        <Button
+          onClick={() => {
+            modal.setContent({
+              header: "Stop form submission?",
+              body: "All information you've entered on this form will be lost if you leave this page.",
+              acceptButtonText: "Yes, leave form",
+              cancelButtonText: "Return to form",
+            });
+            modal.setOnAccept(() => acceptAction);
+            modal.setModalOpen(true);
+          }}
+          variant="outline"
+        >
           Cancel
         </Button>
       </div>
diff --git a/src/services/ui/src/pages/actions/WithdrawPackage.tsx b/src/services/ui/src/pages/actions/WithdrawPackage.tsx
index d0ae0eb2ed..5117fef5e2 100644
--- a/src/services/ui/src/pages/actions/WithdrawPackage.tsx
+++ b/src/services/ui/src/pages/actions/WithdrawPackage.tsx
@@ -1,13 +1,33 @@
-import { Navigate } from "@/components/Routing";
 import { PlanType, opensearch } from "shared-types";
 import { z } from "zod";
-import { useForm } from "react-hook-form";
+import { Path, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useActionSubmitHandler } from "@/hooks/useActionFormController";
-import { ActionFormTemplate } from "@/pages/actions/template";
 import { FormSetup } from "@/pages/actions/setups";
 import { SetupOptions } from "@/pages";
-import { ReactElement } from "react";
+import { ReactElement, useCallback, useState } from "react";
+import {
+  Button,
+  Form,
+  FormField,
+  FormMessage,
+  RequiredIndicator,
+} from "@/components/Inputs";
+import { Alert, LoadingSpinner } from "@/components";
+import { ActionFormIntro, PackageInfo } from "@/pages/actions/common";
+import { AttachmentsSizeTypesDesc } from "@/pages/form/content";
+import {
+  SlotAdditionalInfo,
+  SlotAttachments,
+} from "@/pages/actions/renderSlots";
+import { Info } from "lucide-react";
+import { submit } from "@/api/submissionService";
+import { buildActionUrl } from "@/lib";
+import { useNavigate, useParams } from "@/components/Routing";
+import { useGetUser } from "@/api/useGetUser";
+import { useModalContext } from "@/components/Context/modalContext";
+import { useAlertContext } from "@/components/Context/alertContext";
+import { useQuery as useQueryString } from "@/hooks";
+import { Origin, ORIGIN, originRoute, useOriginPath } from "@/utils/formOrigin";
 
 const attachmentInstructions: Record<SetupOptions, ReactElement> = {
   "Medicaid SPA": (
@@ -33,8 +53,6 @@ const addlInfoInstructions: Record<SetupOptions, ReactElement> = {
   "CHIP SPA": <p>Explain your need for withdrawal.</p>,
 };
 
-const preSubmitMessage =
-  "Once complete, you will not be able to resubmit this package. CMS will be notified and will use this content to review your request. If CMS needs any additional information, they will follow up by email.";
 export const WithdrawPackage = ({
   item,
   schema,
@@ -42,33 +60,164 @@ export const WithdrawPackage = ({
 }: FormSetup & {
   item: opensearch.main.ItemResult;
 }) => {
+  const navigate = useNavigate();
+  const urlQuery = useQueryString();
+  const { id, type } = useParams("/action/:id/:type");
+  const { data: user } = useGetUser();
   const form = useForm<z.infer<typeof schema>>({
     resolver: zodResolver(schema),
   });
-  const handleSubmit = useActionSubmitHandler({
-    formHookReturn: form,
-    authority: item?._source.authority as PlanType,
-  });
-
-  if (!item) return <Navigate path={"/"} />; // Prevents optionals below
-  return (
-    <ActionFormTemplate<z.infer<typeof schema>>
-      item={item}
-      formController={form}
-      submitHandler={handleSubmit}
-      title={`Withdraw ${item._source.planType} Package`}
-      description={
-        <p>Complete this form to withdraw a package. {preSubmitMessage}</p>
+  const modal = useModalContext();
+  const alert = useAlertContext();
+  const originPath = useOriginPath();
+  const cancelOnAccept = useCallback(() => {
+    modal.setModalOpen(false);
+    navigate(originPath ? { path: originPath } : { path: "/dashboard" });
+  }, []);
+  const confirmOnAccept = useCallback(() => {
+    modal.setModalOpen(false);
+    form.handleSubmit(async (data) => {
+      try {
+        await submit({
+          data: { ...data, id: id! },
+          endpoint: buildActionUrl(type!),
+          user,
+          authority: item?._source.authority as PlanType,
+        });
+        alert.setContent({
+          header: "Package withdrawn",
+          body: `The package ${item._source.id} has been withdrawn.`,
+        });
+        alert.setBannerShow(true);
+        alert.setBannerDisplayOn(
+          // This uses the originRoute map because this value doesn't work
+          // when any queries are added, such as the case of /details?id=...
+          urlQuery.get(ORIGIN)
+            ? originRoute[urlQuery.get(ORIGIN)! as Origin]
+            : "/dashboard"
+        );
+        navigate(originPath ? { path: originPath } : { path: "/dashboard" });
+      } catch (e) {
+        console.error(e);
       }
-      preSubmitMessage={preSubmitMessage}
-      attachments={attachments}
-      attachmentFaqLink={"/faq"}
-      attachmentInstructions={
-        attachmentInstructions[item!._source.planType as string as SetupOptions]
-      }
-      addlInfoInstructions={
-        addlInfoInstructions[item!._source.planType as string as SetupOptions]
-      }
-    />
+    })();
+  }, []);
+  return (
+    <Form {...form}>
+      <form>
+        {form.formState.isSubmitting && <LoadingSpinner />}
+        {/* Intro */}
+        <ActionFormIntro title={`Withdraw ${item._source.planType} Package`}>
+          <RequiredIndicator /> Indicates a required field
+          <p>
+            Complete this form to withdraw a package. Once complete, you will
+            not be able to resubmit this package. CMS will be notified and will
+            use this content to review your request. If CMS needs any additional
+            information, they will follow up by email.
+          </p>
+        </ActionFormIntro>
+        {/* Package ID and type info */}
+        <PackageInfo item={item} />
+        {/* Attachments */}
+        <h3 className="font-bold text-2xl font-sans">Attachments</h3>
+        {
+          attachmentInstructions[
+            item!._source.planType as string as SetupOptions
+          ]
+        }
+        <AttachmentsSizeTypesDesc faqLink={"/faq"} />
+        {attachments.map(({ name, label, required }) => (
+          <FormField
+            key={String(name)}
+            control={form.control}
+            name={`attachments.${String(name)}` as Path<typeof schema>}
+            render={SlotAttachments({
+              label: (
+                <>
+                  {label}
+                  {required ? <RequiredIndicator /> : ""}
+                </>
+              ),
+              message: <FormMessage />,
+              className: "my-4",
+            })}
+          />
+        ))}
+        {/* Additional Info */}
+        <FormField
+          control={form.control}
+          name={"additionalInformation" as Path<typeof schema>}
+          render={SlotAdditionalInfo({
+            label:
+              addlInfoInstructions[
+                item!._source.planType as string as SetupOptions
+              ],
+            description: "4,000 characters allowed",
+            className: "pt-6",
+            required: false,
+          })}
+        />
+        {/* Error banner */}
+        {Object.keys(form.formState.errors).length !== 0 && (
+          <Alert className="my-6" variant="destructive">
+            Input validation error(s)
+            <ul className="list-disc">
+              {Object.values(form.formState.errors).map(
+                (err, idx) =>
+                  err?.message && (
+                    <li className="ml-8 my-2" key={idx}>
+                      {err.message as string}
+                    </li>
+                  )
+              )}
+            </ul>
+          </Alert>
+        )}
+        {/* Pre-submit message banner */}
+        <Alert variant={"infoBlock"} className="my-2 w-full flex-row text-sm">
+          <Info />
+          <p className="ml-2">
+            Once complete, you will not be able to resubmit this package. CMS
+            will be notified and will use this content to review your request.
+            If CMS needs any additional information, they will follow up by
+            email.
+          </p>
+        </Alert>
+        {/* Buttons */}
+        <div className="flex gap-2 my-8">
+          <Button
+            type={"button"}
+            onClick={() => {
+              modal.setContent({
+                header: "Withdraw package?",
+                body: `The package ${item._source.id} will be withdrawn.`,
+                acceptButtonText: "Yes, withdraw package",
+                cancelButtonText: "Cancel",
+              });
+              modal.setOnAccept(() => confirmOnAccept);
+              modal.setModalOpen(true);
+            }}
+          >
+            Submit
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => {
+              modal.setContent({
+                header: "Stop form submission?",
+                body: "All information you've entered on this form will be lost if you leave this page.",
+                acceptButtonText: "Yes, leave form",
+                cancelButtonText: "Return to form",
+              });
+              modal.setOnAccept(() => cancelOnAccept);
+              modal.setModalOpen(true);
+            }}
+          >
+            Cancel
+          </Button>
+        </div>
+      </form>
+    </Form>
   );
 };
diff --git a/src/services/ui/src/pages/actions/WithdrawRai.tsx b/src/services/ui/src/pages/actions/WithdrawRai.tsx
index 4d6cd4ee83..a319c8c43f 100644
--- a/src/services/ui/src/pages/actions/WithdrawRai.tsx
+++ b/src/services/ui/src/pages/actions/WithdrawRai.tsx
@@ -1,44 +1,185 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
+import { Path, useForm } from "react-hook-form";
 import { z } from "zod";
 import { opensearch, PlanType } from "shared-types";
-import { ActionFormTemplate } from "@/pages/actions/template";
-import { useActionSubmitHandler } from "@/hooks/useActionFormController";
 import { FormSetup } from "@/pages/actions/setups";
+import {
+  Button,
+  Form,
+  FormField,
+  FormMessage,
+  RequiredIndicator,
+} from "@/components/Inputs";
+import { Alert, LoadingSpinner } from "@/components";
+import { ActionFormIntro, PackageInfo } from "@/pages/actions/common";
+import { AttachmentsSizeTypesDesc } from "@/pages/form/content";
+import {
+  SlotAdditionalInfo,
+  SlotAttachments,
+} from "@/pages/actions/renderSlots";
+import { Info } from "lucide-react";
+import { useModalContext } from "@/components/Context/modalContext";
+import { submit } from "@/api/submissionService";
+import { buildActionUrl } from "@/lib";
+import { useNavigate, useParams } from "@/components/Routing";
+import { useGetUser } from "@/api/useGetUser";
+import { useCallback } from "react";
+import { useAlertContext } from "@/components/Context/alertContext";
+import { Origin, ORIGIN, originRoute, useOriginPath } from "@/utils/formOrigin";
+import { useQuery as useQueryString } from "@/hooks";
 
-const preSubmitMessage =
-  "Once complete, you and CMS will receive an email confirmation.";
 export const WithdrawRai = ({
   item,
   schema,
   attachments,
 }: FormSetup & { item: opensearch.main.ItemResult }) => {
-  // const [areYouSureModalOpen, setAreYouSureModalOpen] = useState(false);
-  const form = useForm<z.infer<typeof schema>>({
+  const navigate = useNavigate();
+  const urlQuery = useQueryString();
+  const { id, type } = useParams("/action/:id/:type");
+  const { data: user } = useGetUser();
+  const form = useForm({
     resolver: zodResolver(schema),
   });
-  const handleSubmit = useActionSubmitHandler<z.infer<typeof schema>>({
-    formHookReturn: form,
-    authority: item?._source.authority as PlanType,
-  });
-
-  return (
-    <ActionFormTemplate<z.infer<typeof schema>>
-      item={item}
-      formController={form}
-      submitHandler={handleSubmit}
-      title={"Withdraw Formal RAI Response Details"}
-      description={
-        <p className="font-light mb-6 max-w-4xl">
-          Complete this form to withdraw the Formal RAI response.{" "}
-          {preSubmitMessage}
-        </p>
+  const modal = useModalContext();
+  const alert = useAlertContext();
+  const originPath = useOriginPath();
+  const cancelOnAccept = useCallback(() => {
+    modal.setModalOpen(false);
+    navigate(originPath ? { path: originPath } : { path: "/dashboard" });
+  }, []);
+  const confirmOnAccept = useCallback(() => {
+    modal.setModalOpen(false);
+    form.handleSubmit(async (data) => {
+      try {
+        await submit({
+          data: { ...data, id: id! },
+          endpoint: buildActionUrl(type!),
+          user,
+          authority: item?._source.authority as PlanType,
+        });
+        alert.setContent({
+          header: "RAI response withdrawn",
+          body: `The RAI response for ${item._source.id} has been withdrawn. CMS may follow up if additional information is needed.`,
+        });
+        alert.setBannerShow(true);
+        alert.setBannerDisplayOn(
+          // This uses the originRoute map because this value doesn't work
+          // when any queries are added, such as the case of /details?id=...
+          urlQuery.get(ORIGIN)
+            ? originRoute[urlQuery.get(ORIGIN)! as Origin]
+            : "/dashboard"
+        );
+        navigate(originPath ? { path: originPath } : { path: "/dashboard" });
+      } catch (e) {
+        console.error(e);
       }
-      preSubmitMessage={preSubmitMessage}
-      attachments={attachments}
-      attachmentFaqLink={"/faq/#medicaid-spa-rai-attachments"}
-      requireAddlInfo
-      addlInfoInstructions={<p>Explain your need for withdrawal.</p>}
-    />
+    })();
+  }, []);
+  return (
+    <Form {...form}>
+      <form>
+        {form.formState.isSubmitting && <LoadingSpinner />}
+        {/* Intro */}
+        <ActionFormIntro title={"Withdraw Formal RAI Response Details"}>
+          <RequiredIndicator /> Indicates a required field
+          <p className="font-light mb-6 max-w-4xl">
+            Complete this form to withdraw the Formal RAI response. Once
+            complete, you and CMS will receive an email confirmation.
+          </p>
+        </ActionFormIntro>
+        {/* Package ID and type info */}
+        <PackageInfo item={item} />
+        {/* Attachments */}
+        <h3 className="font-bold text-2xl font-sans">Attachments</h3>
+        <AttachmentsSizeTypesDesc
+          faqLink={"/faq/#medicaid-spa-rai-attachments"}
+        />
+        {attachments.map(({ name, label, required }) => (
+          <FormField
+            key={String(name)}
+            control={form.control}
+            name={`attachments.${String(name)}` as Path<typeof schema>}
+            render={SlotAttachments({
+              label: (
+                <>
+                  {label}
+                  {required ? <RequiredIndicator /> : ""}
+                </>
+              ),
+              message: <FormMessage />,
+              className: "my-4",
+            })}
+          />
+        ))}
+        {/* Additional Info */}
+        <FormField
+          control={form.control}
+          name={"additionalInformation" as Path<typeof schema>}
+          render={SlotAdditionalInfo({
+            label: <p>Explain your need for withdrawal.</p>,
+            description: "4,000 characters allowed",
+            className: "pt-6",
+            required: true,
+          })}
+        />
+        {/* Error banner */}
+        {Object.keys(form.formState.errors).length !== 0 && (
+          <Alert className="my-6" variant="destructive">
+            Input validation error(s)
+            <ul className="list-disc">
+              {Object.values(form.formState.errors).map(
+                (err, idx) =>
+                  err?.message && (
+                    <li className="ml-8 my-2" key={idx}>
+                      {err.message as string}
+                    </li>
+                  )
+              )}
+            </ul>
+          </Alert>
+        )}
+        {/* Pre-submit message banner */}
+        <Alert variant={"infoBlock"} className="my-2 w-full flex-row text-sm">
+          <Info />
+          <p className="ml-2">
+            Once complete, you and CMS will receive an email confirmation.
+          </p>
+        </Alert>
+        {/* Buttons */}
+        <div className="flex gap-2 my-8">
+          <Button
+            type={"button"}
+            onClick={() => {
+              modal.setContent({
+                header: "Withdraw RAI response?",
+                body: `The RAI response for ${item._source.id} will be withdrawn, and CMS will be notified.`,
+                acceptButtonText: "Yes, withdraw response",
+                cancelButtonText: "Cancel",
+              });
+              modal.setOnAccept(() => confirmOnAccept);
+              modal.setModalOpen(true);
+            }}
+          >
+            Submit
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => {
+              modal.setContent({
+                header: "Stop form submission?",
+                body: "All information you've entered on this form will be lost if you leave this page.",
+                acceptButtonText: "Yes, leave form",
+                cancelButtonText: "Return to form",
+              });
+              modal.setOnAccept(() => cancelOnAccept);
+              modal.setModalOpen(true);
+            }}
+          >
+            Cancel
+          </Button>
+        </div>
+      </form>
+    </Form>
   );
 };
diff --git a/src/services/ui/src/pages/actions/index.tsx b/src/services/ui/src/pages/actions/index.tsx
index 2f2e2d5f5a..e5a2cf3915 100644
--- a/src/services/ui/src/pages/actions/index.tsx
+++ b/src/services/ui/src/pages/actions/index.tsx
@@ -12,7 +12,6 @@ import {
   LoadingSpinner,
   SimplePageContainer,
 } from "@/components";
-import { ModalProvider } from "@/pages/form/modals";
 import { detailsAndActionsCrumbs } from "@/pages/actions/actions-breadcrumbs";
 import {
   chipRespondToRaiSetup,
@@ -121,12 +120,10 @@ export const ActionFormIndex = () => {
   const { id, type } = useParams("/action/:id/:type");
   return (
     <SimplePageContainer>
-      <ModalProvider>
-        <BreadCrumbs
-          options={detailsAndActionsCrumbs({ id: id, action: type })}
-        />
-        <ActionFormSwitch />
-      </ModalProvider>
+      <BreadCrumbs
+        options={detailsAndActionsCrumbs({ id: id, action: type })}
+      />
+      <ActionFormSwitch />
     </SimplePageContainer>
   );
 };
diff --git a/src/services/ui/src/pages/actions/template.tsx b/src/services/ui/src/pages/actions/template.tsx
deleted file mode 100644
index d4f4748b09..0000000000
--- a/src/services/ui/src/pages/actions/template.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import { Alert, LoadingSpinner } from "@/components";
-import { ActionFormIntro, PackageInfo } from "@/pages/actions/common";
-import { AttachmentsSizeTypesDesc } from "@/pages/form/content";
-import {
-  SlotAdditionalInfo,
-  SlotAttachments,
-} from "@/pages/actions/renderSlots";
-import {
-  Form,
-  Button,
-  FormField,
-  FormMessage,
-  RequiredIndicator,
-} from "@/components/Inputs";
-import { ReactElement, ReactNode } from "react";
-import { opensearch } from "shared-types";
-import {
-  FieldValues,
-  Path,
-  SubmitHandler,
-  UseFormReturn,
-} from "react-hook-form";
-import { AttachmentRecipe } from "@/lib";
-import { useModalContext } from "@/pages/form/modals";
-import { Info } from "lucide-react";
-
-export const ActionFormTemplate = <D extends FieldValues>({
-  item,
-  formController,
-  submitHandler,
-  title,
-  description,
-  preSubmitMessage,
-  attachments,
-  attachmentFaqLink,
-  attachmentInstructions,
-  requireAddlInfo = false,
-  addlInfoInstructions,
-}: {
-  item: opensearch.main.ItemResult;
-  formController: UseFormReturn<D>;
-  submitHandler: SubmitHandler<D>;
-  title: string;
-  description: ReactNode;
-  preSubmitMessage?: string;
-  attachments: AttachmentRecipe<D>[];
-  attachmentFaqLink: string;
-  attachmentInstructions?: ReactElement;
-  requireAddlInfo?: boolean;
-  addlInfoInstructions?: ReactElement;
-}) => {
-  const { setCancelModalOpen } = useModalContext();
-  return (
-    <Form {...formController}>
-      <form onSubmit={formController.handleSubmit(submitHandler)}>
-        {formController.formState.isSubmitting && <LoadingSpinner />}
-        <ActionFormIntro title={title}>
-          <RequiredIndicator /> Indicates a required field
-          {description}
-        </ActionFormIntro>
-        <PackageInfo item={item} />
-        <h3 className="font-bold text-2xl font-sans">Attachments</h3>
-        {attachmentInstructions}
-        <AttachmentsSizeTypesDesc faqLink={attachmentFaqLink} />
-        {attachments.map(({ name, label, required }) => (
-          <FormField
-            key={String(name)}
-            control={formController.control}
-            name={`attachments.${String(name)}` as Path<D>}
-            render={SlotAttachments({
-              label: (
-                <>
-                  {label}
-                  {required ? <RequiredIndicator /> : ""}
-                </>
-              ),
-              message: <FormMessage />,
-              className: "my-4",
-            })}
-          />
-        ))}
-        <FormField
-          control={formController.control}
-          name={"additionalInformation" as Path<D>}
-          render={SlotAdditionalInfo({
-            label: addlInfoInstructions,
-            description: "4,000 characters allowed",
-            className: "pt-6",
-            required: requireAddlInfo,
-          })}
-        />
-        {Object.keys(formController.formState.errors).length !== 0 && (
-          <Alert className="my-6" variant="destructive">
-            Input validation error(s)
-            <ul className="list-disc">
-              {Object.values(formController.formState.errors).map(
-                (err, idx) =>
-                  err?.message && (
-                    <li className="ml-8 my-2" key={idx}>
-                      {err.message as string}
-                    </li>
-                  )
-              )}
-            </ul>
-          </Alert>
-        )}
-        {preSubmitMessage && (
-          <Alert variant={"infoBlock"} className="my-2 w-full flex-row text-sm">
-            <Info />
-            <p className="ml-2">{preSubmitMessage}</p>
-          </Alert>
-        )}
-        <div className="flex gap-2 my-8">
-          <Button type="submit">Submit</Button>
-          <Button
-            type="button"
-            onClick={() => setCancelModalOpen(true)}
-            variant="outline"
-          >
-            Cancel
-          </Button>
-        </div>
-      </form>
-    </Form>
-  );
-};
diff --git a/src/services/ui/src/pages/dashboard/Lists/renderCells/index.tsx b/src/services/ui/src/pages/dashboard/Lists/renderCells/index.tsx
index 3da5207b11..046f466d9d 100644
--- a/src/services/ui/src/pages/dashboard/Lists/renderCells/index.tsx
+++ b/src/services/ui/src/pages/dashboard/Lists/renderCells/index.tsx
@@ -53,7 +53,7 @@ export const renderCellActions = (user: CognitoUserAttributes | null) =>
                       "text-blue-500",
                       "relative flex select-none items-center rounded-sm px-2 py-2 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
                     )}
-                    to={`/action/${data.id}/${action}`}
+                    to={`/action/${data.id}/${action}?origin=actionsDashboard`}
                     key={`${idx}-${action}`}
                     aria-label={action}
                   >
diff --git a/src/services/ui/src/pages/detail/index.tsx b/src/services/ui/src/pages/detail/index.tsx
index 174c1685e1..1884134593 100644
--- a/src/services/ui/src/pages/detail/index.tsx
+++ b/src/services/ui/src/pages/detail/index.tsx
@@ -1,28 +1,25 @@
 import {
-  Alert,
   CardWithTopBorder,
-  ConfirmationModal,
   DetailItemsGrid,
   DetailsSection,
   ErrorAlert,
   LoadingSpinner,
 } from "@/components";
 import { useGetUser } from "@/api/useGetUser";
-import { Action, opensearch, UserRoles } from "shared-types";
+import { opensearch, UserRoles } from "shared-types";
 import { useQuery } from "@/hooks";
 import { useGetItem } from "@/api";
 import { BreadCrumbs } from "@/components/BreadCrumb";
 import { mapActionLabel } from "@/utils";
-import { useLocation } from "react-router-dom";
 import { useGetPackageActions } from "@/api/useGetPackageActions";
-import { PropsWithChildren, useState } from "react";
+import { PropsWithChildren } from "react";
 import { detailsAndActionsCrumbs } from "@/pages/actions/actions-breadcrumbs";
-import { API } from "aws-amplify";
 import { getStatus } from "shared-types/statusHelper";
 import { spaDetails, submissionDetails } from "@/pages/detail/setup/spa";
 import { Link } from "@/components/Routing";
 import { PackageActivities } from "./package-activity";
 import { AdminChanges } from "./admin-changes";
+import { Route } from "@/components/Routing/types";
 
 const DetailCardWrapper = ({
   title,
@@ -79,11 +76,7 @@ const StatusCard = (data: opensearch.main.Document) => {
   );
 };
 const PackageActionsCard = ({ id }: { id: string }) => {
-  const [isWithdrawModalOpen, setIsWithdrawModalOpen] = useState(false);
-  const [isSuccessModalOpen, setIsSuccessModalOpen] = useState(false);
-  const [isErrorModalOpen, setIsErrorModalOpen] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const { data } = useGetPackageActions(id, { retry: false });
+  const { data, isLoading } = useGetPackageActions(id, { retry: false });
   if (isLoading) return <LoadingSpinner />;
   return (
     <DetailCardWrapper title={"Actions"}>
@@ -98,7 +91,10 @@ const PackageActionsCard = ({ id }: { id: string }) => {
               return (
                 <Link
                   key={`${idx}-${type}`}
-                  path="/action/:id/:type"
+                  path={"/action/:id/:type"}
+                  query={{
+                    origin: "actionsDetails",
+                  }}
                   params={{ id, type }}
                   className="text-sky-700 underline"
                 >
@@ -109,59 +105,6 @@ const PackageActionsCard = ({ id }: { id: string }) => {
           </ul>
         )}
       </div>
-
-      {/* Withdraw Modal */}
-      <ConfirmationModal
-        open={isWithdrawModalOpen}
-        onAccept={async () => {
-          setIsWithdrawModalOpen(false);
-          const dataToSubmit = {
-            id,
-          };
-          try {
-            setIsLoading(true);
-            await API.post("os", `/action/${Action.WITHDRAW_RAI}`, {
-              body: dataToSubmit,
-            });
-            setIsLoading(false);
-            setIsWithdrawModalOpen(false); // probably want a success modal?
-            setIsSuccessModalOpen(true);
-          } catch (err) {
-            setIsLoading(false);
-            setIsErrorModalOpen(true);
-            console.log(err); // probably want an error modal?
-          }
-        }}
-        onCancel={() => setIsWithdrawModalOpen(false)}
-        title="Withdraw RAI"
-        body={
-          <p>
-            Are you sure you would like to withdraw the RAI response for{" "}
-            <em>{id}</em>?
-          </p>
-        }
-      />
-
-      {/* Withdraw Success Modal */}
-      <ConfirmationModal
-        open={isSuccessModalOpen}
-        onAccept={async () => {
-          setIsSuccessModalOpen(false);
-        }}
-        onCancel={() => setIsSuccessModalOpen(false)}
-        title="Withdraw RAI Successful"
-      />
-
-      {/* Withdraw Error Modal */}
-      <ConfirmationModal
-        open={isErrorModalOpen}
-        onAccept={async () => {
-          setIsErrorModalOpen(false);
-        }}
-        onCancel={() => setIsErrorModalOpen(false)}
-        title="Failed to Withdraw"
-        body="RAI withdraw failed"
-      />
     </DetailCardWrapper>
   );
 };
@@ -171,7 +114,6 @@ export const DetailsContent = ({
 }: {
   data?: opensearch.main.ItemResult;
 }) => {
-  const { state } = useLocation();
   if (!data?._source) return <LoadingSpinner />;
   return (
     <div className="block md:flex">
@@ -195,14 +137,6 @@ export const DetailsContent = ({
         ))}
       </aside>
       <div className="flex-1">
-        {state?.callout && (
-          <Alert className="bg-green-100 border-green-400" variant="default">
-            <h2 className="text-lg font-bold text-green-900">
-              {state.callout.heading}
-            </h2>
-            <p className="text-green-900">{state.callout.body}</p>
-          </Alert>
-        )}
         <section
           id="package-overview"
           className="sm:flex lg:grid lg:grid-cols-2 gap-4 my-6"
diff --git a/src/services/ui/src/pages/form/chip-form.tsx b/src/services/ui/src/pages/form/chip-form.tsx
index d347361e00..67d01823cb 100644
--- a/src/services/ui/src/pages/form/chip-form.tsx
+++ b/src/services/ui/src/pages/form/chip-form.tsx
@@ -1,7 +1,7 @@
 import { z } from "zod";
 import { Link, useLocation } from "react-router-dom";
 import { useGetUser } from "@/api/useGetUser";
-import { SubmitHandler, useForm } from "react-hook-form";
+import { useForm } from "react-hook-form";
 import { submit } from "@/api/submissionService";
 import { zodResolver } from "@hookform/resolvers/zod";
 import {
@@ -19,9 +19,14 @@ import {
   zSpaIdSchema,
 } from "@/pages/form/zod";
 import * as Content from "@/pages/form/content";
-import { ModalProvider, useModalContext } from "@/pages/form/modals";
 import { formCrumbsFromPath } from "@/pages/form/form-breadcrumbs";
 import { FAQ_TAB } from "@/components/Routing/consts";
+import { useModalContext } from "@/components/Context/modalContext";
+import { useNavigate } from "@/components/Routing";
+import { useCallback } from "react";
+import { useAlertContext } from "@/components/Context/alertContext";
+import { Origin, ORIGIN, originRoute, useOriginPath } from "@/utils/formOrigin";
+import { useQuery as useQueryString } from "@/hooks";
 
 const formSchema = z.object({
   id: zSpaIdSchema,
@@ -63,10 +68,18 @@ const attachmentList = [
   { name: "other", label: "Other", required: false },
 ] as const;
 
-export const ChipForm = () => {
+export const ChipSpaFormPage = () => {
   const location = useLocation();
   const { data: user } = useGetUser();
-  const { setCancelModalOpen, setSuccessModalOpen } = useModalContext();
+  const navigate = useNavigate();
+  const urlQuery = useQueryString();
+  const modal = useModalContext();
+  const alert = useAlertContext();
+  const originPath = useOriginPath();
+  const cancelOnAccept = useCallback(() => {
+    modal.setModalOpen(false);
+    navigate(originPath ? { path: originPath } : { path: "/dashboard" });
+  }, []);
   const form = useForm<ChipFormSchema>({
     resolver: zodResolver(formSchema),
   });
@@ -78,7 +91,19 @@ export const ChipForm = () => {
         user,
         authority: PlanType.CHIP_SPA,
       });
-      setSuccessModalOpen(true);
+      alert.setContent({
+        header: "Package submitted",
+        body: "Your submission has been received.",
+      });
+      alert.setBannerShow(true);
+      alert.setBannerDisplayOn(
+        // This uses the originRoute map because this value doesn't work
+        // when any queries are added, such as the case of /details?id=...
+        urlQuery.get(ORIGIN)
+          ? originRoute[urlQuery.get(ORIGIN)! as Origin]
+          : "/dashboard"
+      );
+      navigate(originPath ? { path: originPath } : { path: "/dashboard" });
     } catch (e) {
       console.error(e);
     }
@@ -214,7 +239,16 @@ export const ChipForm = () => {
             <Inputs.Button
               type="button"
               variant="outline"
-              onClick={() => setCancelModalOpen(true)}
+              onClick={() => {
+                modal.setContent({
+                  header: "Stop form submission?",
+                  body: "All information you've entered on this form will be lost if you leave this page.",
+                  acceptButtonText: "Yes, leave form",
+                  cancelButtonText: "Return to form",
+                });
+                modal.setOnAccept(() => cancelOnAccept);
+                modal.setModalOpen(true);
+              }}
               className="px-12"
             >
               Cancel
@@ -225,9 +259,3 @@ export const ChipForm = () => {
     </SimplePageContainer>
   );
 };
-
-export const ChipSpaFormPage = () => (
-  <ModalProvider>
-    <ChipForm />
-  </ModalProvider>
-);
diff --git a/src/services/ui/src/pages/form/medicaid-form.tsx b/src/services/ui/src/pages/form/medicaid-form.tsx
index 1b31f8712a..6f5a141691 100644
--- a/src/services/ui/src/pages/form/medicaid-form.tsx
+++ b/src/services/ui/src/pages/form/medicaid-form.tsx
@@ -19,9 +19,14 @@ import {
   zAttachmentRequired,
   zSpaIdSchema,
 } from "@/pages/form/zod";
-import { ModalProvider, useModalContext } from "@/pages/form/modals";
 import { formCrumbsFromPath } from "@/pages/form/form-breadcrumbs";
 import { FAQ_TAB } from "@/components/Routing/consts";
+import { useNavigate } from "@/components/Routing";
+import { useModalContext } from "@/components/Context/modalContext";
+import { useCallback } from "react";
+import { useAlertContext } from "@/components/Context/alertContext";
+import { useQuery as useQueryString } from "@/hooks";
+import { Origin, ORIGIN, originRoute, useOriginPath } from "@/utils/formOrigin";
 
 const formSchema = z.object({
   id: zSpaIdSchema,
@@ -67,10 +72,21 @@ const attachmentList = [
   { name: "other", label: "Other", required: false },
 ] as const;
 
-export const MedicaidForm = () => {
-  const location = useLocation();
+export const MedicaidSpaFormPage = () => {
   const { data: user } = useGetUser();
-  const { setCancelModalOpen, setSuccessModalOpen } = useModalContext();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const urlQuery = useQueryString();
+  const modal = useModalContext();
+  const alert = useAlertContext();
+  const originPath = useOriginPath();
+  const cancelOnAccept = useCallback(() => {
+    modal.setModalOpen(false);
+    navigate(originPath ? { path: originPath } : { path: "/dashboard" });
+  }, []);
+  const form = useForm<MedicaidFormSchema>({
+    resolver: zodResolver(formSchema),
+  });
   const handleSubmit: SubmitHandler<MedicaidFormSchema> = async (formData) => {
     try {
       await submit<MedicaidFormSchema>({
@@ -79,16 +95,23 @@ export const MedicaidForm = () => {
         user,
         authority: PlanType.MED_SPA,
       });
-      setSuccessModalOpen(true);
+      alert.setContent({
+        header: "Package submitted",
+        body: "Your submission has been received.",
+      });
+      alert.setBannerShow(true);
+      alert.setBannerDisplayOn(
+        // This uses the originRoute map because this value doesn't work
+        // when any queries are added, such as the case of /details?id=...
+        urlQuery.get(ORIGIN)
+          ? originRoute[urlQuery.get(ORIGIN)! as Origin]
+          : "/dashboard"
+      );
+      navigate(originPath ? { path: originPath } : { path: "/dashboard" });
     } catch (e) {
       console.error(e);
     }
   };
-
-  const form = useForm<MedicaidFormSchema>({
-    resolver: zodResolver(formSchema),
-  });
-
   return (
     <SimplePageContainer>
       <BreadCrumbs options={formCrumbsFromPath(location.pathname)} />
@@ -227,7 +250,16 @@ export const MedicaidForm = () => {
             <Inputs.Button
               type="button"
               variant="outline"
-              onClick={() => setCancelModalOpen(true)}
+              onClick={() => {
+                modal.setContent({
+                  header: "Stop form submission?",
+                  body: "All information you've entered on this form will be lost if you leave this page.",
+                  acceptButtonText: "Yes, leave form",
+                  cancelButtonText: "Return to form",
+                });
+                modal.setOnAccept(() => cancelOnAccept);
+                modal.setModalOpen(true);
+              }}
               className="px-12"
             >
               Cancel
@@ -238,9 +270,3 @@ export const MedicaidForm = () => {
     </SimplePageContainer>
   );
 };
-
-export const MedicaidSpaFormPage = () => (
-  <ModalProvider>
-    <MedicaidForm />
-  </ModalProvider>
-);
diff --git a/src/services/ui/src/pages/form/modals.tsx b/src/services/ui/src/pages/form/modals.tsx
deleted file mode 100644
index 6da7e9d1be..0000000000
--- a/src/services/ui/src/pages/form/modals.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import { ConfirmationModal } from "@/components";
-
-import { Dispatch, PropsWithChildren, SetStateAction, useState } from "react";
-import { createContextProvider } from "@/utils";
-import { useNavigate } from "@/components/Routing";
-
-type ModalProps = {
-  open: boolean;
-  setOpen: Dispatch<SetStateAction<boolean>>;
-};
-
-const Success = ({ open, setOpen }: ModalProps) => {
-  const navigate = useNavigate();
-  return (
-    <ConfirmationModal
-      open={open}
-      onAccept={() => {
-        setOpen(false);
-        navigate({ path: "/dashboard" });
-      }}
-      onCancel={() => setOpen(false)}
-      title="Submission Successful"
-      body={
-        <p>
-          Please be aware that it may take up to a minute for your submission to
-          show in the Dashboard.
-        </p>
-      }
-      cancelButtonVisible={false}
-      acceptButtonText="Go to Dashboard"
-    />
-  );
-};
-
-const Cancel = ({ open, setOpen }: ModalProps) => {
-  const navigate = useNavigate();
-  return (
-    <ConfirmationModal
-      open={open}
-      onAccept={() => {
-        setOpen(false);
-        navigate({ path: "/dashboard" });
-      }}
-      onCancel={() => setOpen(false)}
-      cancelButtonText="Return to Form"
-      acceptButtonText="Yes"
-      title="Are you sure you want to cancel?"
-      body={
-        <p>If you leave this page you will lose your progress on this form</p>
-      }
-    />
-  );
-};
-
-const Error = ({ open, setOpen }: ModalProps) => {
-  return (
-    <ConfirmationModal
-      open={open}
-      onAccept={() => {
-        setOpen(false);
-      }}
-      onCancel={() => setOpen(false)}
-      title="Submission Error"
-      body={
-        <p>
-          An error occurred during issue.
-          <br />
-          You may close this window and try again, however, this likely requires
-          support.
-          <br />
-          <br />
-          Please contact the{" "}
-          <a
-            href="mailto:OneMAC_Helpdesk@cms.hhs.gov"
-            className="text-blue-500"
-          >
-            helpdesk
-          </a>
-        </p>
-      }
-      cancelButtonVisible={false}
-      acceptButtonText="Exit to Package Details"
-    />
-  );
-};
-
-const useFormModalControllers = () => {
-  const [cancelModalOpen, setCancelModalOpen] = useState(false);
-  const [successModalOpen, setSuccessModalOpen] = useState(false);
-  const [errorModalOpen, setErrorModalOpen] = useState(false);
-  return {
-    cancelModalOpen,
-    setCancelModalOpen,
-    successModalOpen,
-    setSuccessModalOpen,
-    errorModalOpen,
-    setErrorModalOpen,
-  };
-};
-
-export const [ModalContextProvider, useModalContext] = createContextProvider<
-  ReturnType<typeof useFormModalControllers>
->({
-  name: "Submission Form Modal Context",
-  errorMessage:
-    "This component requires the `ModalProvider` wrapper to make use of modal UIs.",
-});
-export const ModalProvider = ({ children }: PropsWithChildren) => {
-  const context = useFormModalControllers();
-  return (
-    <ModalContextProvider value={context}>
-      {children}
-      <Success
-        open={context.successModalOpen}
-        setOpen={context.setSuccessModalOpen}
-      />
-      <Cancel
-        open={context.cancelModalOpen}
-        setOpen={context.setCancelModalOpen}
-      />
-      <Error
-        open={context.errorModalOpen}
-        setOpen={context.setErrorModalOpen}
-      />
-    </ModalContextProvider>
-  );
-};
diff --git a/src/services/ui/src/pages/form/waiver/capitated/capitated-1915-b-waiver-amendment.tsx b/src/services/ui/src/pages/form/waiver/capitated/capitated-1915-b-waiver-amendment.tsx
index afacb37897..89e8961b31 100644
--- a/src/services/ui/src/pages/form/waiver/capitated/capitated-1915-b-waiver-amendment.tsx
+++ b/src/services/ui/src/pages/form/waiver/capitated/capitated-1915-b-waiver-amendment.tsx
@@ -21,9 +21,14 @@ import {
   zAttachmentOptional,
   zAttachmentRequired,
 } from "@/pages/form/zod";
-import { ModalProvider, useModalContext } from "@/pages/form/modals";
 import { formCrumbsFromPath } from "@/pages/form/form-breadcrumbs";
 import { FAQ_TAB } from "@/components/Routing/consts";
+import { useModalContext } from "@/components/Context/modalContext";
+import { useNavigate } from "@/components/Routing";
+import { useAlertContext } from "@/components/Context/alertContext";
+import { useCallback } from "react";
+import { Origin, ORIGIN, originRoute, useOriginPath } from "@/utils/formOrigin";
+import { useQuery as useQueryString } from "@/hooks";
 
 const formSchema = z.object({
   waiverNumber: zAmendmentOriginalWaiverNumberSchema,
@@ -64,10 +69,19 @@ const attachmentList = [
   },
 ] as const;
 
-export const Capitated1915BWaiverAmendment = () => {
+export const Capitated1915BWaiverAmendmentPage = () => {
   const location = useLocation();
+  const navigate = useNavigate();
+  const urlQuery = useQueryString();
   const { data: user } = useGetUser();
-  const { setCancelModalOpen, setSuccessModalOpen } = useModalContext();
+  const alert = useAlertContext();
+  const modal = useModalContext();
+  const originPath = useOriginPath();
+  const cancelOnAccept = useCallback(() => {
+    modal.setModalOpen(false);
+    navigate(originPath ? { path: originPath } : { path: "/dashboard" });
+  }, []);
+
   const handleSubmit: SubmitHandler<Waiver1915BCapitatedAmendment> = async (
     formData
   ) => {
@@ -78,7 +92,19 @@ export const Capitated1915BWaiverAmendment = () => {
         user,
         authority: PlanType["1915b"],
       });
-      setSuccessModalOpen(true);
+      alert.setContent({
+        header: "Package submitted",
+        body: "Your submission has been received.",
+      });
+      alert.setBannerShow(true);
+      alert.setBannerDisplayOn(
+        // This uses the originRoute map because this value doesn't work
+        // when any queries are added, such as the case of /details?id=...
+        urlQuery.get(ORIGIN)
+          ? originRoute[urlQuery.get(ORIGIN)! as Origin]
+          : "/dashboard"
+      );
+      navigate(originPath ? { path: originPath } : { path: "/dashboard" });
     } catch (e) {
       console.error(e);
     }
@@ -260,8 +286,16 @@ export const Capitated1915BWaiverAmendment = () => {
             <Inputs.Button
               type="button"
               variant="outline"
-              onClick={() => setCancelModalOpen(true)}
-              className="px-12"
+              onClick={() => {
+                modal.setContent({
+                  header: "Stop form submission?",
+                  body: "All information you've entered on this form will be lost if you leave this page.",
+                  acceptButtonText: "Yes, leave form",
+                  cancelButtonText: "Return to form",
+                });
+                modal.setOnAccept(() => cancelOnAccept);
+                modal.setModalOpen(true);
+              }}
             >
               Cancel
             </Inputs.Button>
@@ -271,9 +305,3 @@ export const Capitated1915BWaiverAmendment = () => {
     </SimplePageContainer>
   );
 };
-
-export const Capitated1915BWaiverAmendmentPage = () => (
-  <ModalProvider>
-    <Capitated1915BWaiverAmendment />
-  </ModalProvider>
-);
diff --git a/src/services/ui/src/pages/form/waiver/capitated/capitated-1915-b-waiver-initial.tsx b/src/services/ui/src/pages/form/waiver/capitated/capitated-1915-b-waiver-initial.tsx
index baca4b5bee..45cbacce70 100644
--- a/src/services/ui/src/pages/form/waiver/capitated/capitated-1915-b-waiver-initial.tsx
+++ b/src/services/ui/src/pages/form/waiver/capitated/capitated-1915-b-waiver-initial.tsx
@@ -20,9 +20,14 @@ import {
   zAttachmentRequired,
   zInitialWaiverNumberSchema,
 } from "@/pages/form/zod";
-import { ModalProvider, useModalContext } from "@/pages/form/modals";
 import { formCrumbsFromPath } from "@/pages/form/form-breadcrumbs";
 import { FAQ_TAB } from "@/components/Routing/consts";
+import { useModalContext } from "@/components/Context/modalContext";
+import { useAlertContext } from "@/components/Context/alertContext";
+import { useCallback } from "react";
+import { useNavigate } from "@/components/Routing";
+import { Origin, ORIGIN, originRoute, useOriginPath } from "@/utils/formOrigin";
+import { useQuery as useQueryString } from "@/hooks";
 
 const formSchema = z.object({
   id: zInitialWaiverNumberSchema,
@@ -64,10 +69,18 @@ const attachmentList = [
   },
 ] as const;
 
-export const Capitated1915BWaiverInitial = () => {
+export const Capitated1915BWaiverInitialPage = () => {
   const location = useLocation();
   const { data: user } = useGetUser();
-  const { setCancelModalOpen, setSuccessModalOpen } = useModalContext();
+  const navigate = useNavigate();
+  const urlQuery = useQueryString();
+  const alert = useAlertContext();
+  const modal = useModalContext();
+  const originPath = useOriginPath();
+  const cancelOnAccept = useCallback(() => {
+    modal.setModalOpen(false);
+    navigate(originPath ? { path: originPath } : { path: "/dashboard" });
+  }, []);
   const handleSubmit: SubmitHandler<Waiver1915BCapitatedAmendment> = async (
     formData
   ) => {
@@ -79,7 +92,19 @@ export const Capitated1915BWaiverInitial = () => {
         user,
         authority: PlanType["1915b"],
       });
-      setSuccessModalOpen(true);
+      alert.setContent({
+        header: "Package submitted",
+        body: "Your submission has been received.",
+      });
+      alert.setBannerShow(true);
+      alert.setBannerDisplayOn(
+        // This uses the originRoute map because this value doesn't work
+        // when any queries are added, such as the case of /details?id=...
+        urlQuery.get(ORIGIN)
+          ? originRoute[urlQuery.get(ORIGIN)! as Origin]
+          : "/dashboard"
+      );
+      navigate(originPath ? { path: originPath } : { path: "/dashboard" });
     } catch (e) {
       console.error(e);
     }
@@ -232,8 +257,16 @@ export const Capitated1915BWaiverInitial = () => {
             <Inputs.Button
               type="button"
               variant="outline"
-              onClick={() => setCancelModalOpen(true)}
-              className="px-12"
+              onClick={() => {
+                modal.setContent({
+                  header: "Stop form submission?",
+                  body: "All information you've entered on this form will be lost if you leave this page.",
+                  acceptButtonText: "Yes, leave form",
+                  cancelButtonText: "Return to form",
+                });
+                modal.setOnAccept(() => cancelOnAccept);
+                modal.setModalOpen(true);
+              }}
             >
               Cancel
             </Inputs.Button>
@@ -243,9 +276,3 @@ export const Capitated1915BWaiverInitial = () => {
     </SimplePageContainer>
   );
 };
-
-export const Capitated1915BWaiverInitialPage = () => (
-  <ModalProvider>
-    <Capitated1915BWaiverInitial />
-  </ModalProvider>
-);
diff --git a/src/services/ui/src/pages/form/waiver/capitated/capitated-1915-b-waiver-renewal.tsx b/src/services/ui/src/pages/form/waiver/capitated/capitated-1915-b-waiver-renewal.tsx
index f26256aa65..e998866f9d 100644
--- a/src/services/ui/src/pages/form/waiver/capitated/capitated-1915-b-waiver-renewal.tsx
+++ b/src/services/ui/src/pages/form/waiver/capitated/capitated-1915-b-waiver-renewal.tsx
@@ -21,9 +21,14 @@ import {
   zAttachmentRequired,
   zRenewalWaiverNumberSchema,
 } from "@/pages/form/zod";
-import { ModalProvider, useModalContext } from "@/pages/form/modals";
 import { formCrumbsFromPath } from "@/pages/form/form-breadcrumbs";
 import { FAQ_TAB } from "@/components/Routing/consts";
+import { useNavigate } from "@/components/Routing";
+import { useAlertContext } from "@/components/Context/alertContext";
+import { useCallback } from "react";
+import { useModalContext } from "@/components/Context/modalContext";
+import { Origin, ORIGIN, originRoute, useOriginPath } from "@/utils/formOrigin";
+import { useQuery as useQueryString } from "@/hooks";
 
 const formSchema = z
   .object({
@@ -91,10 +96,18 @@ const attachmentList = [
   },
 ] as const;
 
-export const Capitated1915BWaiverRenewal = () => {
+export const Capitated1915BWaiverRenewalPage = () => {
   const location = useLocation();
   const { data: user } = useGetUser();
-  const { setCancelModalOpen, setSuccessModalOpen } = useModalContext();
+  const navigate = useNavigate();
+  const urlQuery = useQueryString();
+  const alert = useAlertContext();
+  const modal = useModalContext();
+  const originPath = useOriginPath();
+  const cancelOnAccept = useCallback(() => {
+    modal.setModalOpen(false);
+    navigate(originPath ? { path: originPath } : { path: "/dashboard" });
+  }, []);
   const handleSubmit: SubmitHandler<Waiver1915BCapitatedRenewal> = async (
     formData
   ) => {
@@ -106,7 +119,19 @@ export const Capitated1915BWaiverRenewal = () => {
         user,
         authority: PlanType["1915b"],
       });
-      setSuccessModalOpen(true);
+      alert.setContent({
+        header: "Package submitted",
+        body: "Your submission has been received.",
+      });
+      alert.setBannerShow(true);
+      alert.setBannerDisplayOn(
+        // This uses the originRoute map because this value doesn't work
+        // when any queries are added, such as the case of /details?id=...
+        urlQuery.get(ORIGIN)
+          ? originRoute[urlQuery.get(ORIGIN)! as Origin]
+          : "/dashboard"
+      );
+      navigate(originPath ? { path: originPath } : { path: "/dashboard" });
     } catch (e) {
       console.error(e);
     }
@@ -290,8 +315,16 @@ export const Capitated1915BWaiverRenewal = () => {
             <Inputs.Button
               type="button"
               variant="outline"
-              onClick={() => setCancelModalOpen(true)}
-              className="px-12"
+              onClick={() => {
+                modal.setContent({
+                  header: "Stop form submission?",
+                  body: "All information you've entered on this form will be lost if you leave this page.",
+                  acceptButtonText: "Yes, leave form",
+                  cancelButtonText: "Return to form",
+                });
+                modal.setOnAccept(() => cancelOnAccept);
+                modal.setModalOpen(true);
+              }}
             >
               Cancel
             </Inputs.Button>
@@ -301,9 +334,3 @@ export const Capitated1915BWaiverRenewal = () => {
     </SimplePageContainer>
   );
 };
-
-export const Capitated1915BWaiverRenewalPage = () => (
-  <ModalProvider>
-    <Capitated1915BWaiverRenewal />
-  </ModalProvider>
-);
diff --git a/src/services/ui/src/pages/form/waiver/contracting/contracting-1915-b-waiver-amendment.tsx b/src/services/ui/src/pages/form/waiver/contracting/contracting-1915-b-waiver-amendment.tsx
index f80bdeaec5..9761e8efe4 100644
--- a/src/services/ui/src/pages/form/waiver/contracting/contracting-1915-b-waiver-amendment.tsx
+++ b/src/services/ui/src/pages/form/waiver/contracting/contracting-1915-b-waiver-amendment.tsx
@@ -21,9 +21,14 @@ import {
   zAttachmentOptional,
   zAttachmentRequired,
 } from "@/pages/form/zod";
-import { ModalProvider, useModalContext } from "@/pages/form/modals";
 import { formCrumbsFromPath } from "@/pages/form/form-breadcrumbs";
 import { FAQ_TAB } from "@/components/Routing/consts";
+import { useModalContext } from "@/components/Context/modalContext";
+import { useNavigate } from "@/components/Routing";
+import { useAlertContext } from "@/components/Context/alertContext";
+import { useCallback } from "react";
+import { Origin, ORIGIN, originRoute, useOriginPath } from "@/utils/formOrigin";
+import { useQuery as useQueryString } from "@/hooks";
 
 const formSchema = z.object({
   waiverNumber: zAmendmentOriginalWaiverNumberSchema,
@@ -61,10 +66,18 @@ const attachmentList = [
   },
 ] as const;
 
-export const Contracting1915BWaiverAmendment = () => {
+export const Contracting1915BWaiverAmendmentPage = () => {
   const location = useLocation();
   const { data: user } = useGetUser();
-  const { setCancelModalOpen, setSuccessModalOpen } = useModalContext();
+  const navigate = useNavigate();
+  const urlQuery = useQueryString();
+  const alert = useAlertContext();
+  const modal = useModalContext();
+  const originPath = useOriginPath();
+  const cancelOnAccept = useCallback(() => {
+    modal.setModalOpen(false);
+    navigate(originPath ? { path: originPath } : { path: "/dashboard" });
+  }, []);
   const handleSubmit: SubmitHandler<Waiver1915BContractingAmendment> = async (
     formData
   ) => {
@@ -75,7 +88,19 @@ export const Contracting1915BWaiverAmendment = () => {
         user,
         authority: PlanType["1915b"],
       });
-      setSuccessModalOpen(true);
+      alert.setContent({
+        header: "Package submitted",
+        body: "Your submission has been received.",
+      });
+      alert.setBannerShow(true);
+      alert.setBannerDisplayOn(
+        // This uses the originRoute map because this value doesn't work
+        // when any queries are added, such as the case of /details?id=...
+        urlQuery.get(ORIGIN)
+          ? originRoute[urlQuery.get(ORIGIN)! as Origin]
+          : "/dashboard"
+      );
+      navigate(originPath ? { path: originPath } : { path: "/dashboard" });
     } catch (e) {
       console.error(e);
     }
@@ -257,8 +282,16 @@ export const Contracting1915BWaiverAmendment = () => {
             <Inputs.Button
               type="button"
               variant="outline"
-              onClick={() => setCancelModalOpen(true)}
-              className="px-12"
+              onClick={() => {
+                modal.setContent({
+                  header: "Stop form submission?",
+                  body: "All information you've entered on this form will be lost if you leave this page.",
+                  acceptButtonText: "Yes, leave form",
+                  cancelButtonText: "Return to form",
+                });
+                modal.setOnAccept(() => cancelOnAccept);
+                modal.setModalOpen(true);
+              }}
             >
               Cancel
             </Inputs.Button>
@@ -268,9 +301,3 @@ export const Contracting1915BWaiverAmendment = () => {
     </SimplePageContainer>
   );
 };
-
-export const Contracting1915BWaiverAmendmentPage = () => (
-  <ModalProvider>
-    <Contracting1915BWaiverAmendment />
-  </ModalProvider>
-);
diff --git a/src/services/ui/src/pages/form/waiver/contracting/contracting-1915-b-waiver-initial.tsx b/src/services/ui/src/pages/form/waiver/contracting/contracting-1915-b-waiver-initial.tsx
index 05f4c21cfe..de233d35b4 100644
--- a/src/services/ui/src/pages/form/waiver/contracting/contracting-1915-b-waiver-initial.tsx
+++ b/src/services/ui/src/pages/form/waiver/contracting/contracting-1915-b-waiver-initial.tsx
@@ -20,9 +20,14 @@ import {
   zAttachmentRequired,
   zInitialWaiverNumberSchema,
 } from "@/pages/form/zod";
-import { ModalProvider, useModalContext } from "@/pages/form/modals";
 import { formCrumbsFromPath } from "@/pages/form/form-breadcrumbs";
 import { FAQ_TAB } from "@/components/Routing/consts";
+import { useModalContext } from "@/components/Context/modalContext";
+import { useNavigate } from "@/components/Routing";
+import { useAlertContext } from "@/components/Context/alertContext";
+import { useCallback } from "react";
+import { Origin, ORIGIN, originRoute, useOriginPath } from "@/utils/formOrigin";
+import { useQuery as useQueryString } from "@/hooks";
 
 const formSchema = z.object({
   id: zInitialWaiverNumberSchema,
@@ -58,10 +63,18 @@ const attachmentList = [
   },
 ] as const;
 
-export const Contracting1915BWaiverInitial = () => {
+export const Contracting1915BWaiverInitialPage = () => {
   const location = useLocation();
   const { data: user } = useGetUser();
-  const { setCancelModalOpen, setSuccessModalOpen } = useModalContext();
+  const navigate = useNavigate();
+  const urlQuery = useQueryString();
+  const alert = useAlertContext();
+  const modal = useModalContext();
+  const originPath = useOriginPath();
+  const cancelOnAccept = useCallback(() => {
+    modal.setModalOpen(false);
+    navigate(originPath ? { path: originPath } : { path: "/dashboard" });
+  }, []);
   const handleSubmit: SubmitHandler<Waiver1915BContractingInitial> = async (
     formData
   ) => {
@@ -75,7 +88,19 @@ export const Contracting1915BWaiverInitial = () => {
         user,
         authority: PlanType["1915b"],
       });
-      setSuccessModalOpen(true);
+      alert.setContent({
+        header: "Package submitted",
+        body: "Your submission has been received.",
+      });
+      alert.setBannerShow(true);
+      alert.setBannerDisplayOn(
+        // This uses the originRoute map because this value doesn't work
+        // when any queries are added, such as the case of /details?id=...
+        urlQuery.get(ORIGIN)
+          ? originRoute[urlQuery.get(ORIGIN)! as Origin]
+          : "/dashboard"
+      );
+      navigate(originPath ? { path: originPath } : { path: "/dashboard" });
     } catch (e) {
       console.error(e);
     }
@@ -227,8 +252,16 @@ export const Contracting1915BWaiverInitial = () => {
             <Inputs.Button
               type="button"
               variant="outline"
-              onClick={() => setCancelModalOpen(true)}
-              className="px-12"
+              onClick={() => {
+                modal.setContent({
+                  header: "Stop form submission?",
+                  body: "All information you've entered on this form will be lost if you leave this page.",
+                  acceptButtonText: "Yes, leave form",
+                  cancelButtonText: "Return to form",
+                });
+                modal.setOnAccept(() => cancelOnAccept);
+                modal.setModalOpen(true);
+              }}
             >
               Cancel
             </Inputs.Button>
@@ -238,9 +271,3 @@ export const Contracting1915BWaiverInitial = () => {
     </SimplePageContainer>
   );
 };
-
-export const Contracting1915BWaiverInitialPage = () => (
-  <ModalProvider>
-    <Contracting1915BWaiverInitial />
-  </ModalProvider>
-);
diff --git a/src/services/ui/src/pages/form/waiver/contracting/contracting-1915-b-waiver-renewal.tsx b/src/services/ui/src/pages/form/waiver/contracting/contracting-1915-b-waiver-renewal.tsx
index cdaf89e95f..09f624eede 100644
--- a/src/services/ui/src/pages/form/waiver/contracting/contracting-1915-b-waiver-renewal.tsx
+++ b/src/services/ui/src/pages/form/waiver/contracting/contracting-1915-b-waiver-renewal.tsx
@@ -21,9 +21,14 @@ import {
   zAttachmentRequired,
   zRenewalWaiverNumberSchema,
 } from "@/pages/form/zod";
-import { ModalProvider, useModalContext } from "@/pages/form/modals";
 import { formCrumbsFromPath } from "@/pages/form/form-breadcrumbs";
 import { FAQ_TAB } from "@/components/Routing/consts";
+import { useNavigate } from "@/components/Routing";
+import { useAlertContext } from "@/components/Context/alertContext";
+import { useModalContext } from "@/components/Context/modalContext";
+import { useCallback } from "react";
+import { Origin, ORIGIN, originRoute, useOriginPath } from "@/utils/formOrigin";
+import { useQuery as useQueryString } from "@/hooks";
 
 const formSchema = z
   .object({
@@ -84,10 +89,18 @@ const attachmentList = [
   },
 ] as const;
 
-export const Contracting1915BWaiverRenewal = () => {
+export const Contracting1915BWaiverRenewalPage = () => {
   const location = useLocation();
   const { data: user } = useGetUser();
-  const { setCancelModalOpen, setSuccessModalOpen } = useModalContext();
+  const navigate = useNavigate();
+  const urlQuery = useQueryString();
+  const alert = useAlertContext();
+  const modal = useModalContext();
+  const originPath = useOriginPath();
+  const cancelOnAccept = useCallback(() => {
+    modal.setModalOpen(false);
+    navigate(originPath ? { path: originPath } : { path: "/dashboard" });
+  }, []);
   const handleSubmit: SubmitHandler<Waiver1915BContractingRenewal> = async (
     formData
   ) => {
@@ -99,7 +112,19 @@ export const Contracting1915BWaiverRenewal = () => {
         user,
         authority: PlanType["1915b"],
       });
-      setSuccessModalOpen(true);
+      alert.setContent({
+        header: "Package submitted",
+        body: "Your submission has been received.",
+      });
+      alert.setBannerShow(true);
+      alert.setBannerDisplayOn(
+        // This uses the originRoute map because this value doesn't work
+        // when any queries are added, such as the case of /details?id=...
+        urlQuery.get(ORIGIN)
+          ? originRoute[urlQuery.get(ORIGIN)! as Origin]
+          : "/dashboard"
+      );
+      navigate(originPath ? { path: originPath } : { path: "/dashboard" });
     } catch (e) {
       console.error(e);
     }
@@ -283,8 +308,16 @@ export const Contracting1915BWaiverRenewal = () => {
             <Inputs.Button
               type="button"
               variant="outline"
-              onClick={() => setCancelModalOpen(true)}
-              className="px-12"
+              onClick={() => {
+                modal.setContent({
+                  header: "Stop form submission?",
+                  body: "All information you've entered on this form will be lost if you leave this page.",
+                  acceptButtonText: "Yes, leave form",
+                  cancelButtonText: "Return to form",
+                });
+                modal.setOnAccept(() => cancelOnAccept);
+                modal.setModalOpen(true);
+              }}
             >
               Cancel
             </Inputs.Button>
@@ -294,9 +327,3 @@ export const Contracting1915BWaiverRenewal = () => {
     </SimplePageContainer>
   );
 };
-
-export const Contracting1915BWaiverRenewalPage = () => (
-  <ModalProvider>
-    <Contracting1915BWaiverRenewal />
-  </ModalProvider>
-);
diff --git a/src/services/ui/src/utils/formOrigin.ts b/src/services/ui/src/utils/formOrigin.ts
new file mode 100644
index 0000000000..94dd751547
--- /dev/null
+++ b/src/services/ui/src/utils/formOrigin.ts
@@ -0,0 +1,29 @@
+import { Route } from "@/components/Routing/types";
+import { useMemo } from "react";
+import { useQuery as useQueryString } from "@/hooks";
+import { useParams } from "@/components/Routing";
+
+/** Type for defining possible origin values for routing. */
+export type Origin = "actionsDashboard" | "actionsDetails" | "options";
+/** Constant key for accessing origin in query string. */
+export const ORIGIN = "origin";
+/** Mapping of origin types to their corresponding route strings. */
+export const originRoute: Record<Origin, Route> = {
+  actionsDashboard: "/dashboard",
+  actionsDetails: "/details",
+  options: "/dashboard",
+};
+/**
+ * Hook to compute route based on origin query parameter and URL params.
+ */
+export const useOriginPath = () => {
+  const urlQuery = useQueryString();
+  const { id } = useParams("/action/:id/:type");
+  return useMemo(() => {
+    const origin = urlQuery.get(ORIGIN) as Origin | null;
+    if (!origin || !originRoute[origin]) return null;
+    return origin === "actionsDetails"
+      ? (`${originRoute[origin]}?id=${id}` as Route)
+      : (originRoute[origin] as Route);
+  }, []);
+};