From 285b88d7d8503de0378476e8b6b39ecaf3304939 Mon Sep 17 00:00:00 2001 From: Kevin Haube Date: Tue, 21 Nov 2023 09:57:08 -0500 Subject: [PATCH] feat(package actions): Update Enable/Disable RAI Withdraw UI to use ConfirmationModal (#205) * Update to use ConfirmationModal * Deploy fix --- .../{Modal.tsx => ConfirmationModal.tsx} | 7 +- .../ui/src/pages/actions/IssueRai.tsx | 8 +-- .../ui/src/pages/actions/RespondToRai.tsx | 8 +-- .../actions/ToggleRaiResponseWithdraw.tsx | 70 ++++++++++++------- .../ui/src/pages/form/medicaid-form.tsx | 6 +- 5 files changed, 61 insertions(+), 38 deletions(-) rename src/services/ui/src/components/Modal/{Modal.tsx => ConfirmationModal.tsx} (89%) diff --git a/src/services/ui/src/components/Modal/Modal.tsx b/src/services/ui/src/components/Modal/ConfirmationModal.tsx similarity index 89% rename from src/services/ui/src/components/Modal/Modal.tsx rename to src/services/ui/src/components/Modal/ConfirmationModal.tsx index 9d6348e88f..b84ad025a7 100644 --- a/src/services/ui/src/components/Modal/Modal.tsx +++ b/src/services/ui/src/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 ( diff --git a/src/services/ui/src/pages/actions/IssueRai.tsx b/src/services/ui/src/pages/actions/IssueRai.tsx index bef9d62b65..b6c8b805b2 100644 --- 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 - { setSuccessModalIsOpen(false); @@ -312,7 +312,7 @@ export const IssueRai = () => { cancelButtonVisible={false} acceptButtonText="Exit to Package Details" /> - { setErrorModalIsOpen(false); @@ -348,7 +348,7 @@ export const IssueRai = () => { cancelButtonText="Return to Form" acceptButtonText="Exit to Package Details" /> - { setCancelModalIsOpen(false); diff --git a/src/services/ui/src/pages/actions/RespondToRai.tsx b/src/services/ui/src/pages/actions/RespondToRai.tsx index ec200ddea3..96c7af7816 100644 --- 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 - { setSuccessModalIsOpen(false); @@ -311,7 +311,7 @@ export const RespondToRai = () => { cancelButtonVisible={false} acceptButtonText="Exit to Package Details" /> - { setErrorModalIsOpen(false); @@ -347,7 +347,7 @@ export const RespondToRai = () => { cancelButtonText="Return to Form" acceptButtonText="Exit to Package Details" /> - { setCancelModalIsOpen(false); diff --git a/src/services/ui/src/pages/actions/ToggleRaiResponseWithdraw.tsx b/src/services/ui/src/pages/actions/ToggleRaiResponseWithdraw.tsx index 3e58e2b539..7f40a0e039 100644 --- 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(false); + const [cancelModalOpen, setCancelModalOpen] = useState(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 ; // Prevents optional chains below - if (isToggling || awaitingNav) return ; - 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 && } {toggleError && ( @@ -105,10 +93,44 @@ const ToggleRaiResponseWithdrawForm = ({ item }: { item?: ItemResult }) => { )}
-
+ {/* Success Modal */} + { + setSuccessModalOpen(false); + navigate(`/details?id=${id}`); + }} + onCancel={() => setSuccessModalOpen(false)} // Should be made optional + title={`Formal RAI Response Withdraw Successfully ${ACTION_WORD}d`} + body={ +

+ Please be aware that it may take up to a minute for changes to show + up on the Dashboard and Details pages. +

+ } + cancelButtonVisible={false} + acceptButtonText="Go to Package Details" + /> + + {/* Cancel Modal */} + { + 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={ +

If you leave this page you will lose your progress on this form

+ } + /> ); }; diff --git a/src/services/ui/src/pages/form/medicaid-form.tsx b/src/services/ui/src/pages/form/medicaid-form.tsx index 968f25dae2..5cd4543d19 100644 --- 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 = () => { {/* Success Modal */} - { setSuccessModalIsOpen(false); @@ -404,7 +404,7 @@ export const MedicaidForm = () => { /> {/* Cancel Modal */} - { setCancelModalIsOpen(false);