Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(package actions): Update Enable/Disable RAI Withdraw UI to use ConfirmationModal #205

Merged
merged 3 commits into from
Nov 21, 2023
Merged

feat(package actions): Update Enable/Disable RAI Withdraw UI to use ConfirmationModal #205

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e388a94
Update to use ConfirmationModal
Nov 17, 2023
6be18e2
Merge branch 'master' into bar
Nov 20, 2023
9f67d77
Deploy fix
Nov 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions ...ervices/ui/src/components/Modal/Modal.tsx → ...rc/components/Modal/ConfirmationModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
} from "../Dialog";
import { Button } from "../Inputs";

type Props = {
export type ConfirmationModalProps = {
open: boolean;
description?: React.ReactNode;
body?: React.ReactNode;
Expand All @@ -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,
Expand All @@ -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]">
Expand Down
8 changes: 4 additions & 4 deletions src/services/ui/src/pages/actions/IssueRai.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -295,7 +295,7 @@ export const IssueRai = () => {
>
Cancel
</I.Button>
<Modal
<ConfirmationModal
open={successModalIsOpen}
onAccept={() => {
setSuccessModalIsOpen(false);
Expand All @@ -312,7 +312,7 @@ export const IssueRai = () => {
cancelButtonVisible={false}
acceptButtonText="Exit to Package Details"
/>
<Modal
<ConfirmationModal
open={errorModalIsOpen}
onAccept={() => {
setErrorModalIsOpen(false);
Expand Down Expand Up @@ -348,7 +348,7 @@ export const IssueRai = () => {
cancelButtonText="Return to Form"
acceptButtonText="Exit to Package Details"
/>
<Modal
<ConfirmationModal
open={cancelModalIsOpen}
onAccept={() => {
setCancelModalIsOpen(false);
Expand Down
8 changes: 4 additions & 4 deletions src/services/ui/src/pages/actions/RespondToRai.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -294,7 +294,7 @@ export const RespondToRai = () => {
>
Cancel
</I.Button>
<Modal
<ConfirmationModal
open={successModalIsOpen}
onAccept={() => {
setSuccessModalIsOpen(false);
Expand All @@ -311,7 +311,7 @@ export const RespondToRai = () => {
cancelButtonVisible={false}
acceptButtonText="Exit to Package Details"
/>
<Modal
<ConfirmationModal
open={errorModalIsOpen}
onAccept={() => {
setErrorModalIsOpen(false);
Expand Down Expand Up @@ -347,7 +347,7 @@ export const RespondToRai = () => {
cancelButtonText="Return to Form"
acceptButtonText="Exit to Package Details"
/>
<Modal
<ConfirmationModal
open={cancelModalIsOpen}
onAccept={() => {
setCancelModalIsOpen(false);
Expand Down
70 changes: 46 additions & 24 deletions src/services/ui/src/pages/actions/ToggleRaiResponseWithdraw.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = ({
Expand Down Expand Up @@ -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,
Expand All @@ -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 && (
Expand All @@ -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>
}
/>
</>
);
};
Expand Down
6 changes: 3 additions & 3 deletions src/services/ui/src/pages/form/medicaid-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -385,7 +385,7 @@ export const MedicaidForm = () => {
</I.Button>

{/* Success Modal */}
<Modal
<ConfirmationModal
open={successModalIsOpen}
onAccept={() => {
setSuccessModalIsOpen(false);
Expand All @@ -404,7 +404,7 @@ export const MedicaidForm = () => {
/>

{/* Cancel Modal */}
<Modal
<ConfirmationModal
open={cancelModalIsOpen}
onAccept={() => {
setCancelModalIsOpen(false);
Expand Down
Loading