feat(package actions): Update Enable/Disable RAI Withdraw UI to use C…

…onfirmationModal (#205) * Update to use ConfirmationModal * Deploy fix
Enterprise-CMCS · Nov 21, 2023 · 285b88d · 285b88d
1 parent 03472d1
commit 285b88d
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 38 deletions.
diff --git a/...ervices/ui/src/components/Modal/Modal.tsx → ...rc/components/Modal/ConfirmationModal.tsx b/...ervices/ui/src/components/Modal/Modal.tsx → ...rc/components/Modal/ConfirmationModal.tsx
@@ -8,7 +8,7 @@ import {
 } from "../Dialog";
 import { Button } from "../Inputs";
 
-type Props = {
+export type ConfirmationModalProps = {
   open: boolean;
   description?: React.ReactNode;
   body?: React.ReactNode;
@@ -21,7 +21,8 @@ type Props = {
   acceptButtonVisible?: boolean;
 };
 
-export function Modal({
+/** A modal with optional Cancel and Accept buttons */
+export function ConfirmationModal({
   open,
   description,
   title,
@@ -32,7 +33,7 @@ export function Modal({
   cancelButtonText = "Cancel",
   acceptButtonVisible = true,
   cancelButtonVisible = true,
-}: Props) {
+}: ConfirmationModalProps) {
   return (
     <Dialog open={open} onOpenChange={onCancel}>
       <DialogContent className="sm:max-w-[425px]">

diff --git a/src/services/ui/src/pages/actions/IssueRai.tsx b/src/services/ui/src/pages/actions/IssueRai.tsx
@@ -12,7 +12,7 @@ import {
   LoadingSpinner,
   BreadCrumbs,
 } from "@/components";
-import { Modal } from "@/components/Modal/Modal";
+import { ConfirmationModal } from "@/components/Modal/ConfirmationModal";
 import { FAQ_TARGET, ROUTES } from "@/routes";
 import { Link, useNavigate } from "react-router-dom";
 import { Action, RaiIssueTransform } from "shared-types";
@@ -295,7 +295,7 @@ export const IssueRai = () => {
             >
               Cancel
             </I.Button>
-            <Modal
+            <ConfirmationModal
               open={successModalIsOpen}
               onAccept={() => {
                 setSuccessModalIsOpen(false);
@@ -312,7 +312,7 @@ export const IssueRai = () => {
               cancelButtonVisible={false}
               acceptButtonText="Exit to Package Details"
             />
-            <Modal
+            <ConfirmationModal
               open={errorModalIsOpen}
               onAccept={() => {
                 setErrorModalIsOpen(false);
@@ -348,7 +348,7 @@ export const IssueRai = () => {
               cancelButtonText="Return to Form"
               acceptButtonText="Exit to Package Details"
             />
-            <Modal
+            <ConfirmationModal
               open={cancelModalIsOpen}
               onAccept={() => {
                 setCancelModalIsOpen(false);

diff --git a/src/services/ui/src/pages/actions/RespondToRai.tsx b/src/services/ui/src/pages/actions/RespondToRai.tsx
@@ -12,7 +12,7 @@ import {
   LoadingSpinner,
   BreadCrumbs,
 } from "@/components";
-import { Modal } from "@/components/Modal/Modal";
+import { ConfirmationModal } from "@/components/Modal/ConfirmationModal";
 import { FAQ_TARGET, ROUTES } from "@/routes";
 import { Link, useNavigate } from "react-router-dom";
 import { Action, RaiResponseTransform } from "shared-types";
@@ -294,7 +294,7 @@ export const RespondToRai = () => {
             >
               Cancel
             </I.Button>
-            <Modal
+            <ConfirmationModal
               open={successModalIsOpen}
               onAccept={() => {
                 setSuccessModalIsOpen(false);
@@ -311,7 +311,7 @@ export const RespondToRai = () => {
               cancelButtonVisible={false}
               acceptButtonText="Exit to Package Details"
             />
-            <Modal
+            <ConfirmationModal
               open={errorModalIsOpen}
               onAccept={() => {
                 setErrorModalIsOpen(false);
@@ -347,7 +347,7 @@ export const RespondToRai = () => {
               cancelButtonText="Return to Form"
               acceptButtonText="Exit to Package Details"
             />
-            <Modal
+            <ConfirmationModal
               open={cancelModalIsOpen}
               onAccept={() => {
                 setCancelModalIsOpen(false);

diff --git a/src/services/ui/src/pages/actions/ToggleRaiResponseWithdraw.tsx b/src/services/ui/src/pages/actions/ToggleRaiResponseWithdraw.tsx
@@ -4,10 +4,10 @@ import { ROUTES } from "@/routes";
 import { Action, ItemResult } from "shared-types";
 import { Button } from "@/components/Inputs";
 import { removeUnderscoresAndCapitalize } from "@/utils";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useToggleRaiWithdraw } from "@/api/useToggleRaiWithdraw";
 import { PackageActionForm } from "@/pages/actions/PackageActionForm";
-import { useQueryClient } from "@tanstack/react-query";
+import { ConfirmationModal } from "@/components/Modal/ConfirmationModal";
 
 // Keeps aria stuff and classes condensed
 const SectionTemplate = ({
@@ -59,9 +59,11 @@ const PackageInfo = ({ item }: { item: ItemResult }) => (
 
 const ToggleRaiResponseWithdrawForm = ({ item }: { item?: ItemResult }) => {
   const navigate = useNavigate();
-  const qc = useQueryClient();
   const { id, type } = useParams<{ id: string; type: Action }>();
-  const [awaitingNav, setAwaitingNav] = useState(false);
+
+  const [successModalOpen, setSuccessModalOpen] = useState<boolean>(false);
+  const [cancelModalOpen, setCancelModalOpen] = useState<boolean>(false);
+
   const {
     mutate: toggleRaiWithdraw,
     isLoading: isToggling,
@@ -73,28 +75,14 @@ const ToggleRaiResponseWithdrawForm = ({ item }: { item?: ItemResult }) => {
     [type]
   );
 
+  useEffect(() => {
+    if (toggleSucceeded) setSuccessModalOpen(true);
+  }, [toggleSucceeded]);
+
   if (!item) return <Navigate to={ROUTES.DASHBOARD} />; // Prevents optional chains below
-  if (isToggling || awaitingNav) return <LoadingSpinner />;
-  if (toggleSucceeded) {
-    // Clear actions for package from cache
-    qc.invalidateQueries(["actions", id]).then(() => {
-      setAwaitingNav(true); // Triggers LoadingSpinner
-      // Debounce back nav to give the data pipeline time to update
-      setTimeout(() => {
-        // Go back to package details and render success alert
-        navigate(`/details?id=${id}`, {
-          state: {
-            callout: {
-              heading: `Formal RAI Response Withdraw action has been ${ACTION_WORD.toLowerCase()}d`,
-              body: `You have successfully ${ACTION_WORD.toLowerCase()}d the Formal RAI Response Withdraw action for the State.`,
-            },
-          },
-        });
-      }, 2000);
-    });
-  }
   return (
     <>
+      {isToggling && <LoadingSpinner />}
       <Intro action={ACTION_WORD} />
       <PackageInfo item={item} />
       {toggleError && (
@@ -105,10 +93,44 @@ const ToggleRaiResponseWithdrawForm = ({ item }: { item?: ItemResult }) => {
       )}
       <div className="flex gap-2">
         <Button onClick={() => toggleRaiWithdraw()}>Submit</Button>
-        <Button onClick={() => navigate(-1)} variant="outline">
+        <Button onClick={() => setCancelModalOpen(true)} variant="outline">
           Cancel
         </Button>
       </div>
+      {/* Success Modal */}
+      <ConfirmationModal
+        open={successModalOpen}
+        onAccept={() => {
+          setSuccessModalOpen(false);
+          navigate(`/details?id=${id}`);
+        }}
+        onCancel={() => setSuccessModalOpen(false)} // Should be made optional
+        title={`Formal RAI Response Withdraw Successfully ${ACTION_WORD}d`}
+        body={
+          <p>
+            Please be aware that it may take up to a minute for changes to show
+            up on the Dashboard and Details pages.
+          </p>
+        }
+        cancelButtonVisible={false}
+        acceptButtonText="Go to Package Details"
+      />
+
+      {/* Cancel Modal */}
+      <ConfirmationModal
+        open={cancelModalOpen}
+        onAccept={() => {
+          setCancelModalOpen(false);
+          navigate(`/details?id=${id}`);
+        }}
+        onCancel={() => setCancelModalOpen(false)}
+        cancelButtonText="Return to Form"
+        acceptButtonText="Leave Page"
+        title="Are you sure you want to cancel?"
+        body={
+          <p>If you leave this page you will lose your progress on this form</p>
+        }
+      />
     </>
   );
 };

diff --git a/src/services/ui/src/pages/form/medicaid-form.tsx b/src/services/ui/src/pages/form/medicaid-form.tsx
@@ -14,7 +14,7 @@ import {
   LoadingSpinner,
   BreadCrumbs,
 } from "@/components";
-import { Modal } from "@/components/Modal/Modal";
+import { ConfirmationModal } from "@/components/Modal/ConfirmationModal";
 import { FAQ_TARGET, ROUTES } from "@/routes";
 import { getUserStateCodes } from "@/utils";
 import { NEW_SUBMISSION_CRUMBS } from "@/pages/create/create-breadcrumbs";
@@ -385,7 +385,7 @@ export const MedicaidForm = () => {
             </I.Button>
 
             {/* Success Modal */}
-            <Modal
+            <ConfirmationModal
               open={successModalIsOpen}
               onAccept={() => {
                 setSuccessModalIsOpen(false);
@@ -404,7 +404,7 @@ export const MedicaidForm = () => {
             />
 
             {/* Cancel Modal */}
-            <Modal
+            <ConfirmationModal
               open={cancelModalIsOpen}
               onAccept={() => {
                 setCancelModalIsOpen(false);