prompt routes

src/App/App.tsx

@@ -1,8 +1,9 @@
 import { appRoutes, donateWidgetRoutes } from "constants/routes";
 import ModalContext from "contexts/ModalContext";
-import { RouterErrorBoundary } from "errors/ErrorBoundary";
+import { ErrorElement } from "errors/ErrorElement";
 import NProgress from "nprogress";
 import { adminRoute } from "pages/Admin";
+import { promptRoutes, reviewRoute } from "pages/Application/review-route";
 import { routes as blogRoutes } from "pages/Blog";
 import { legalRoutes } from "pages/Legal";
 import OAuthRedirector from "pages/OAuthRedirector";
@@ -53,7 +54,12 @@ const _appRoutes: RO[] = [
   {
     path: appRoutes.applications,
     children: [
-      { path: ":id", lazy: () => import("pages/Application") },
+      {
+        path: ":id",
+        lazy: () => import("pages/Application"),
+        errorElement: <ErrorElement />,
+        children: [reviewRoute, ...promptRoutes],
+      },
       { index: true, lazy: () => import("pages/Applications") },
     ],
   },
@@ -111,7 +117,7 @@ export const routes: RO[] = [
     loader: rootLoader,
     action: rootAction,
     children: rootRoutes,
-    ErrorBoundary: RouterErrorBoundary,
+    ErrorBoundary: ErrorElement,
   },
 ];
 

src/components/Prompt/Prompt.tsx

@@ -1,7 +1,7 @@
 import Modal from "components/Modal";
 import { useModalContext } from "contexts/ModalContext";
 import Icon from "../Icon";
-import LoaderRing from "../LoaderRing";
+import { PromptIcon } from "./prompt-icon";
 import type { Props } from "./types";
 
 export default function Prompt({
@@ -50,24 +50,3 @@ export default function Prompt({
     </Modal>
   );
 }
-
-function PromptIcon({
-  type,
-  classes = "",
-}: Pick<Props, "type"> & { classes?: string }) {
-  const common = `justify-self-center ${classes}`;
-  switch (type) {
-    case "success":
-      return (
-        <Icon type="CheckCircle" size={92} className={common + " text-green"} />
-      );
-    case "error":
-      return (
-        <Icon type="Exclamation" size={80} className={common + " text-red"} />
-      );
-    case "loading":
-      return <LoaderRing thickness={12} classes={common + " h-24"} />;
-    default:
-      return null;
-  }
-}

src/components/Prompt/PromptV2.tsx

@@ -0,0 +1,53 @@
+import { Dialog, DialogBackdrop, DialogPanel } from "@headlessui/react";
+import type { PropsWithChildren, ReactNode } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import Icon from "../Icon";
+import { PromptIcon } from "./prompt-icon";
+
+interface Props extends PropsWithChildren {
+  type?: "success" | "error" | "loading";
+  ack?: ReactNode;
+}
+
+export default function PromptV2({ type, children }: Props) {
+  const navigate = useNavigate();
+  return (
+    <Dialog
+      open={true}
+      onClose={() =>
+        navigate("..", { preventScrollReset: true, replace: true })
+      }
+      className="relative z-50"
+    >
+      <DialogBackdrop className="fixed inset-0 bg-black/30 data-[closed]:opacity-0" />
+      <DialogPanel className="fixed-center z-10 grid text-navy-d4 bg-white sm:w-full w-[90vw] sm:max-w-lg rounded overflow-hidden">
+        <div className="flex justify-end p-4 border-b border-gray-l4">
+          <Link
+            to=".."
+            preventScrollReset
+            replace
+            className="border border-gray-l4 p-2 rounded-md"
+          >
+            <Icon type="Close" size={24} />
+          </Link>
+        </div>
+
+        <PromptIcon type={type} classes="mb-6 sm:mb-8 mt-4 sm:mt-12" />
+        <div className="px-6 pb-4 text-center text-navy-l1 dark:text-navy-l2">
+          {children}
+        </div>
+        <div className="p-3 sm:px-8 sm:py-4 empty:h-12 w-full text-center sm:text-right bg-blue-l5 border-t border-gray-l4">
+          <Link
+            to=".."
+            preventScrollReset
+            replace
+            type="button"
+            className="inline-block btn-blue px-8 py-2 max-sm:w-full"
+          >
+            {type === "success" ? "Done" : "Ok"}
+          </Link>
+        </div>
+      </DialogPanel>
+    </Dialog>
+  );
+}

src/components/Prompt/prompt-icon.tsx

@@ -0,0 +1,24 @@
+import LoaderRing from "components/LoaderRing";
+import Icon from "../Icon";
+import type { Props } from "./types";
+
+export function PromptIcon({
+  type,
+  classes = "",
+}: Pick<Props, "type"> & { classes?: string }) {
+  const common = `justify-self-center ${classes}`;
+  switch (type) {
+    case "success":
+      return (
+        <Icon type="CheckCircle" size={92} className={common + " text-green"} />
+      );
+    case "error":
+      return (
+        <Icon type="Exclamation" size={80} className={common + " text-red"} />
+      );
+    case "loading":
+      return <LoaderRing thickness={12} classes={common + " h-24"} />;
+    default:
+      return null;
+  }
+}

src/errors/DefaultFallback.tsx

@@ -1,11 +1,16 @@
 import Icon from "components/Icon";
 import { GENERIC_ERROR_MESSAGE } from "constants/common";
+import type { ReactNode } from "react";
 
-export default function DefaultFallback() {
+interface Props {
+  acknowledger?: ReactNode;
+}
+export default function DefaultFallback({ acknowledger }: Props) {
   return (
     <div className="grid place-items-center content-center gap-6 p-4">
       <Icon type="Exclamation" className="text-red text-[2em]" />
       <p className="text-center">{GENERIC_ERROR_MESSAGE}</p>
+      {acknowledger}
     </div>
   );
 }

src/errors/ErrorBoundary.tsx

@@ -5,7 +5,6 @@ import {
   type PropsWithChildren,
   type ReactNode,
 } from "react";
-import { useRouteError } from "react-router-dom";
 import DefaultFallback from "./DefaultFallback";
 
 type Props = PropsWithChildren<{ fallback?: ReactNode }>;
@@ -34,9 +33,3 @@ export default class ErrorBoundary extends Component<Props, State> {
       : this.props.children;
   }
 }
-
-export function RouterErrorBoundary() {
-  const error = useRouteError();
-  logger.error(error);
-  return <DefaultFallback />;
-}

src/errors/ErrorElement.tsx

@@ -0,0 +1,34 @@
+import { logger } from "helpers";
+import { useEffect, useRef } from "react";
+import { Link, useRouteError } from "react-router-dom";
+import DefaultFallback from "./DefaultFallback";
+
+export function ErrorElement() {
+  const error = useRouteError();
+
+  const elementRef = useRef<HTMLAnchorElement>(null);
+
+  //biome-ignore lint: log onmount only
+  useEffect(() => {
+    logger.error(error);
+  }, []);
+
+  useEffect(() => {
+    if (!elementRef.current) return;
+    elementRef.current.scrollIntoView({ block: "center" });
+  }, []);
+
+  return (
+    <DefaultFallback
+      acknowledger={
+        <Link
+          ref={elementRef}
+          to="."
+          className="border border-gray-l4 rounded-lg px-6 py-2"
+        >
+          OK
+        </Link>
+      }
+    />
+  );
+}

src/pages/Application/Loaded.tsx

@@ -3,23 +3,11 @@ import { isIrs501c3, isRejected } from "@better-giving/registration/models";
 import ExtLink from "components/ExtLink";
 import Icon from "components/Icon";
 import { appRoutes } from "constants/routes";
-import { useModalContext } from "contexts/ModalContext";
 import type { PropsWithChildren } from "react";
-import { Link } from "react-router-dom";
+import { Link, Outlet } from "react-router-dom";
 import Container from "./Container";
-import Prompt from "./Prompt";
 
 export default function Loaded(props: Application) {
-  const { showModal } = useModalContext();
-
-  const review = (verdict: "approve" | "reject") => () => {
-    showModal(Prompt, {
-      verdict,
-      uuid: props.id,
-      orgName: props.contact.org_name,
-    });
-  };
-
   const prevVerdict =
     props.status === "03"
       ? "approved"
@@ -121,22 +109,26 @@ export default function Loaded(props: Application) {
         >
           back
         </Link>
-        <button
-          disabled={!!prevVerdict}
-          onClick={review("reject")}
+        <Link
+          aria-disabled={!!prevVerdict}
+          to={`rejected?org_name=${props.contact.org_name}`}
           type="button"
           className="px-4 py-1 min-w-[6rem] text-sm uppercase btn-red"
+          preventScrollReset
         >
           reject
-        </button>
-        <button
-          disabled={!!prevVerdict}
-          onClick={review("approve")}
+        </Link>
+        <Link
+          aria-disabled={!!prevVerdict}
+          to={`approved?org_name=${props.contact.org_name}`}
           type="button"
           className="px-4 py-1 min-w-[6rem] text-sm uppercase btn-green"
+          preventScrollReset
         >
           approve
-        </button>
+        </Link>
+        {/** review route renders here */}
+        <Outlet />
       </div>
     </>
   );