diff --git a/src/services/ui/package.json b/src/services/ui/package.json index c4cfd325de..5de0f4a9b5 100644 --- a/src/services/ui/package.json +++ b/src/services/ui/package.json @@ -30,7 +30,7 @@ "@mui/x-data-grid": "^6.10.0", "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-checkbox": "^1.0.4", - "@radix-ui/react-dialog": "^1.0.4", + "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-popover": "^1.0.6", diff --git a/src/services/ui/src/components/Dialog/index.tsx b/src/services/ui/src/components/Dialog/index.tsx new file mode 100644 index 0000000000..161465f3b4 --- /dev/null +++ b/src/services/ui/src/components/Dialog/index.tsx @@ -0,0 +1,132 @@ +import * as React from "react"; +import * as DialogPrimitive from "@radix-ui/react-dialog"; +import { Cross2Icon } from "@radix-ui/react-icons"; + +import { cn } from "@/lib/utils"; + +const Dialog = DialogPrimitive.Root; + +const DialogTrigger = DialogPrimitive.Trigger; + +const DialogPortal = DialogPrimitive.Portal; + +const DialogClose = DialogPrimitive.Close; + +const DialogOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { + className?: string; + } +>(({ className, ...props }, ref) => ( + +)); +DialogOverlay.displayName = DialogPrimitive.Overlay.displayName; + +const DialogContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { + className?: string; + } +>(({ className, children, ...props }, ref) => ( + + + + {children} + + + Close + + + +)); +DialogContent.displayName = DialogPrimitive.Content.displayName; + +const DialogHeader = ({ + className, + ...props +}: React.HTMLAttributes & { + className?: string; +}) => ( +
+); +DialogHeader.displayName = "DialogHeader"; + +const DialogFooter = ({ + className, + ...props +}: React.HTMLAttributes & { + className?: string; +}) => ( +
+); +DialogFooter.displayName = "DialogFooter"; + +const DialogTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { + className?: string; + } +>(({ className, ...props }, ref) => ( + +)); +DialogTitle.displayName = DialogPrimitive.Title.displayName; + +const DialogDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { + className?: string; + } +>(({ className, ...props }, ref) => ( + +)); +DialogDescription.displayName = DialogPrimitive.Description.displayName; + +export { + Dialog, + DialogPortal, + DialogOverlay, + DialogTrigger, + DialogClose, + DialogContent, + DialogHeader, + DialogFooter, + DialogTitle, + DialogDescription, +}; diff --git a/src/services/ui/src/components/Modal/Modal.tsx b/src/services/ui/src/components/Modal/Modal.tsx new file mode 100644 index 0000000000..9d6348e88f --- /dev/null +++ b/src/services/ui/src/components/Modal/Modal.tsx @@ -0,0 +1,59 @@ +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, +} from "../Dialog"; +import { Button } from "../Inputs"; + +type Props = { + open: boolean; + description?: React.ReactNode; + body?: React.ReactNode; + title: React.ReactNode; + onCancel: () => void; + onAccept: () => void; + cancelButtonText?: string; + acceptButtonText?: string; + cancelButtonVisible?: boolean; + acceptButtonVisible?: boolean; +}; + +export function Modal({ + open, + description, + title, + body, + onAccept, + onCancel, + acceptButtonText = "Confirm", + cancelButtonText = "Cancel", + acceptButtonVisible = true, + cancelButtonVisible = true, +}: Props) { + return ( + + + + {title} + {description && {description}} + + {body &&
{body}
} + + {cancelButtonVisible && ( + + )} + {acceptButtonVisible && ( + + )} + + + + ); +} diff --git a/src/services/ui/src/components/index.tsx b/src/services/ui/src/components/index.tsx index b30b6909c3..7d93609bf9 100644 --- a/src/services/ui/src/components/index.tsx +++ b/src/services/ui/src/components/index.tsx @@ -16,3 +16,4 @@ export * from "./RaiResponses"; export * from "./SearchForm"; export * from "./SubmissionInfo"; export * from "./Modal"; +export * from "./Dialog"; diff --git a/src/services/ui/src/pages/form/medicaid-form.tsx b/src/services/ui/src/pages/form/medicaid-form.tsx index 7561998d12..d28c02aa4b 100644 --- a/src/services/ui/src/pages/form/medicaid-form.tsx +++ b/src/services/ui/src/pages/form/medicaid-form.tsx @@ -12,9 +12,9 @@ import { SimplePageContainer, Alert, LoadingSpinner, - Modal, BreadCrumbs, } from "@/components"; +import { Modal } from "@/components/Modal/Modal"; import { FAQ_TARGET, ROUTES } from "@/routes"; import { getUserStateCodes } from "@/utils"; import { NEW_SUBMISSION_CRUMBS } from "@/pages/create/create-breadcrumbs"; @@ -104,9 +104,10 @@ const attachmentList = [ export const MedicaidForm = () => { const location = useLocation(); - const [modalIsOpen, setModalIsOpen] = useState(false); - const [modalChildren, setModalChildren] = useState(
); + const navigate = useNavigate(); const [cancelModalIsOpen, setCancelModalIsOpen] = useState(false); + const [successModalIsOpen, setSuccessModalIsOpen] = useState(false); + const form = useForm({ resolver: zodResolver(formSchema), }); @@ -176,20 +177,13 @@ export const MedicaidForm = () => { state: data.id.split("-")[0], }; - let submissionResponse; try { - submissionResponse = await API.post("os", "/submit", { + await API.post("os", "/submit", { body: dataToSubmit, }); - console.log(submissionResponse); - setModalChildren(); + setSuccessModalIsOpen(true); } catch (err) { console.log(err); - setModalChildren( - - ); - } finally { - setModalIsOpen(true); } }; @@ -389,18 +383,42 @@ export const MedicaidForm = () => { > Cancel + + {/* Success Modal */} { + setSuccessModalIsOpen(false); + navigate(ROUTES.DASHBOARD); + }} + onCancel={() => setSuccessModalIsOpen(false)} + title="Submission Successful" + body={ +

+ Please be aware that it may take up to a minute for your + submission to show in the Dashboard. +

+ } + cancelButtonVisible={false} + acceptButtonText="Go to Dashboard" /> + + {/* Cancel Modal */} + open={cancelModalIsOpen} + onAccept={() => { + setCancelModalIsOpen(false); + navigate(ROUTES.DASHBOARD); + }} + onCancel={() => setCancelModalIsOpen(false)} + cancelButtonText="Return to Form" + acceptButtonText="Yes" + title="Are you sure you want to cancel?" + body={ +

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

} />
@@ -409,96 +427,3 @@ export const MedicaidForm = () => { ); }; -type SuccessModalProps = { id: string }; -const SuccessModalContent = ({ id }: SuccessModalProps) => { - const navigate = useNavigate(); - return ( -
-
-
Submission Success!
-

- {id} was successfully submitted. -
- Please be aware that it may take up to a minute for your submission to - show in the Dashboard. -

-
- navigate(ROUTES.DASHBOARD)} - > - Go to Dashboard - -
- ); -}; -type ErrorModalProps = { id: string; setModalIsOpen: (open: boolean) => void }; -const ErrorModalContent = ({ id, setModalIsOpen }: ErrorModalProps) => { - return ( -
-
-
Submission Error:
-

- An error occurred during submission. -
- You may close this window and try again, however, this likely requires - support. -
-
- Please contact the{" "} - - helpdesk - {" "} - . You may include the following in your support request:
-
-

    -
  • SPA ID: {id}
    • -
  • Timestamp: {Date.now()}
    • -
-

-
- setModalIsOpen(false)} - > - Close - -
- ); -}; - -type CancelModalProps = { setCancelModalIsOpen: (open: boolean) => void }; -const CancelModalContent = ({ setCancelModalIsOpen }: CancelModalProps) => { - const navigate = useNavigate(); - return ( -
-
-
Are you sure you want to cancel?
-

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

-
-
- navigate(ROUTES.DASHBOARD)} - > - Yes - -
- setCancelModalIsOpen(false)} - > - No, Return to Form - -
-
-
- ); -}; diff --git a/yarn.lock b/yarn.lock index 97a07bfe09..bb6aa13452 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4431,7 +4431,7 @@ dependencies: "@babel/runtime" "^7.13.10" -"@radix-ui/react-dialog@^1.0.4": +"@radix-ui/react-dialog@^1.0.5": version "1.0.5" resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz#71657b1b116de6c7a0b03242d7d43e01062c7300" integrity sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==