feat(errors): show error messaging as banner on failed submissions (#474

) * test implementation * get it working * update RespondToRai old * update ToggleRAIWithdraw old * update WithdrawPackage old * update WithdrawRai old * get working for new actions * update new actions * update chip and med spas * update waivers, bcap * update waivers, bcont * Add scroll to top
Enterprise-CMCS · Apr 3, 2024 · f7e8d9b · f7e8d9b
1 parent df2784a
commit f7e8d9b
Show file tree

Hide file tree

Showing 22 changed files with 179 additions and 30 deletions.
diff --git a/src/services/ui/src/components/Alert/index.tsx b/src/services/ui/src/components/Alert/index.tsx
@@ -20,8 +20,9 @@ const alertVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
+  },
 );
+export type AlertVariant = "default" | "destructive" | "infoBlock" | "success";
 
 const Alert = React.forwardRef<
   HTMLDivElement,

diff --git a/src/services/ui/src/components/Context/alertContext.tsx b/src/services/ui/src/components/Context/alertContext.tsx
@@ -1,7 +1,7 @@
 import { PropsWithChildren, useEffect, useState } from "react";
 import { Check, X } from "lucide-react";
 import { createContextProvider } from "@/utils";
-import { Alert, SimplePageContainer, Route } from "@/components";
+import { Alert, SimplePageContainer, Route, AlertVariant } from "@/components";
 import { useLocation } from "react-router-dom";
 
 type BannerContent = {
@@ -11,6 +11,7 @@ type BannerContent = {
 
 const useAlertController = () => {
   const [bannerShow, setBannerShow] = useState<boolean>(false);
+  const [bannerStyle, setBannerStyle] = useState<AlertVariant>("success");
   const [bannerDisplayOn, setBannerDisplayOn] = useState<Route>("/");
   const [content, setContent] = useState<BannerContent>({
     header: "No header given",
@@ -19,6 +20,8 @@ const useAlertController = () => {
   return {
     content,
     setContent,
+    bannerStyle,
+    setBannerStyle,
     bannerDisplayOn,
     setBannerDisplayOn,
     bannerShow,
@@ -51,7 +54,10 @@ export const AlertProvider = ({ children }: PropsWithChildren) => {
        * Route change*/}
       {context.bannerDisplayOn === location.pathname && context.bannerShow && (
         <SimplePageContainer>
-          <Alert variant={"success"} className="mt-4 mb-8 flex-row text-sm">
+          <Alert
+            variant={context.bannerStyle}
+            className="mt-4 mb-8 flex-row text-sm"
+          >
             <div className={"flex items-start justify-between"}>
               <Check />
               <div className={"ml-2 w-full"}>

diff --git a/src/services/ui/src/features/actions/IssueRai.tsx b/src/services/ui/src/features/actions/IssueRai.tsx
@@ -18,6 +18,7 @@ import {
   useParams,
   useModalContext,
   useAlertContext,
+  Route,
 } from "@/components";
 import {
   ActionFormIntro,
@@ -70,19 +71,28 @@ export const RaiIssue = ({
               header: "RAI issued",
               body: `The RAI for ${item._source.id} has been submitted. An email confirmation will be sent to you and the state.`,
             });
+            alert.setBannerStyle("success");
             alert.setBannerShow(true);
             alert.setBannerDisplayOn(
               // This uses the originRoute map because this value doesn't work
               // when any queries are added, such as the case of /details?id=...
               urlQuery.get(ORIGIN)
                 ? originRoute[urlQuery.get(ORIGIN)! as Origin]
-                : "/dashboard"
+                : "/dashboard",
             );
             navigate(
-              originPath ? { path: originPath } : { path: "/dashboard" }
+              originPath ? { path: originPath } : { path: "/dashboard" },
             );
           } catch (e) {
             console.error(e);
+            alert.setContent({
+              header: "An unexpected error has occurred:",
+              body: e instanceof Error ? e.message : String(e),
+            });
+            alert.setBannerStyle("destructive");
+            alert.setBannerDisplayOn(window.location.pathname as Route);
+            alert.setBannerShow(true);
+            window.scrollTo(0, 0);
           }
         })}
       >
@@ -152,7 +162,7 @@ export const RaiIssue = ({
                     <li className="ml-8 my-2" key={idx}>
                       {err.message as string}
                     </li>
-                  )
+                  ),
               )}
             </ul>
           </Alert>

diff --git a/src/services/ui/src/features/actions/RespondToRai.tsx b/src/services/ui/src/features/actions/RespondToRai.tsx
@@ -17,6 +17,7 @@ import {
   useAlertContext,
   useNavigate,
   useParams,
+  Route,
 } from "@/components";
 
 import {
@@ -74,19 +75,28 @@ export const RespondToRai = ({
               header: "RAI response submitted",
               body: `The RAI response for ${item._source.id} has been submitted.`,
             });
+            alert.setBannerStyle("success");
             alert.setBannerShow(true);
             alert.setBannerDisplayOn(
               // This uses the originRoute map because this value doesn't work
               // when any queries are added, such as the case of /details?id=...
               urlQuery.get(ORIGIN)
                 ? originRoute[urlQuery.get(ORIGIN)! as Origin]
-                : "/dashboard"
+                : "/dashboard",
             );
             navigate(
-              originPath ? { path: originPath } : { path: "/dashboard" }
+              originPath ? { path: originPath } : { path: "/dashboard" },
             );
           } catch (e) {
             console.error(e);
+            alert.setContent({
+              header: "An unexpected error has occurred:",
+              body: e instanceof Error ? e.message : String(e),
+            });
+            alert.setBannerStyle("destructive");
+            alert.setBannerDisplayOn(window.location.pathname as Route);
+            alert.setBannerShow(true);
+            window.scrollTo(0, 0);
           }
         })}
       >
@@ -154,7 +164,7 @@ export const RespondToRai = ({
                     <li className="ml-8 my-2" key={idx}>
                       {err.message as string}
                     </li>
-                  )
+                  ),
               )}
             </ul>
           </Alert>

diff --git a/src/services/ui/src/features/actions/ToggleRaiResponseWithdraw.tsx b/src/services/ui/src/features/actions/ToggleRaiResponseWithdraw.tsx
@@ -9,6 +9,7 @@ import {
   Button,
   useModalContext,
   useAlertContext,
+  Route,
 } from "@/components";
 import { useSubmissionService, useGetUser } from "@/api";
 import {
@@ -48,7 +49,7 @@ export const ToggleRaiResponseWithdraw = ({
 
   const ACTION_WORD = useMemo(
     () => (type === Action.ENABLE_RAI_WITHDRAW ? "Enable" : "Disable"),
-    [type]
+    [type],
   );
 
   useEffect(() => {
@@ -60,15 +61,25 @@ export const ToggleRaiResponseWithdraw = ({
             ? "The state will be able to withdraw its RAI response. It may take up to a minute for this change to be applied."
             : "The state will not be able to withdraw its RAI response. It may take up to a minute for this change to be applied.",
       });
+      alert.setBannerStyle("success");
       alert.setBannerShow(true);
       alert.setBannerDisplayOn(
         // This uses the originRoute map because this value doesn't work
         // when any queries are added, such as the case of /details?id=...
         urlQuery.get(ORIGIN)
           ? originRoute[urlQuery.get(ORIGIN)! as Origin]
-          : "/dashboard"
+          : "/dashboard",
       );
       navigate(originPath ? { path: originPath } : { path: "/dashboard" });
+    } else if (error) {
+      alert.setContent({
+        header: "An unexpected error has occurred:",
+        body: error.response.data.message,
+      });
+      alert.setBannerStyle("destructive");
+      alert.setBannerDisplayOn(window.location.pathname as Route);
+      alert.setBannerShow(true);
+      window.scrollTo(0, 0);
     }
   }, [isSuccess]);
 

diff --git a/src/services/ui/src/features/actions/WithdrawPackage.tsx b/src/services/ui/src/features/actions/WithdrawPackage.tsx
@@ -17,6 +17,7 @@ import {
   useParams,
   useModalContext,
   useAlertContext,
+  Route,
 } from "@/components";
 import {
   SetupOptions,
@@ -53,9 +54,7 @@ const attachmentInstructions: Record<SetupOptions, ReactElement> = {
 
 const addlInfoInstructions: Record<SetupOptions, ReactElement> = {
   "Medicaid SPA": (
-    <p>
-      Explain your need for withdrawal, or upload supporting documentation.
-    </p>
+    <p>Explain your need for withdrawal, or upload supporting documentation.</p>
   ),
   "CHIP SPA": <p>Explain your need for withdrawal.</p>,
 };
@@ -95,17 +94,26 @@ export const WithdrawPackage = ({
           header: "Package withdrawn",
           body: `The package ${item._source.id} has been withdrawn.`,
         });
+        alert.setBannerStyle("success");
         alert.setBannerShow(true);
         alert.setBannerDisplayOn(
           // This uses the originRoute map because this value doesn't work
           // when any queries are added, such as the case of /details?id=...
           urlQuery.get(ORIGIN)
             ? originRoute[urlQuery.get(ORIGIN)! as Origin]
-            : "/dashboard"
+            : "/dashboard",
         );
         navigate(originPath ? { path: originPath } : { path: "/dashboard" });
       } catch (e) {
         console.error(e);
+        alert.setContent({
+          header: "An unexpected error has occurred:",
+          body: e instanceof Error ? e.message : String(e),
+        });
+        alert.setBannerStyle("destructive");
+        alert.setBannerDisplayOn(window.location.pathname as Route);
+        alert.setBannerShow(true);
+        window.scrollTo(0, 0);
       }
     })();
   }, []);
@@ -175,7 +183,7 @@ export const WithdrawPackage = ({
                     <li className="ml-8 my-2" key={idx}>
                       {err.message as string}
                     </li>
-                  )
+                  ),
               )}
             </ul>
           </Alert>

diff --git a/src/services/ui/src/features/actions/WithdrawRai.tsx b/src/services/ui/src/features/actions/WithdrawRai.tsx
@@ -16,6 +16,7 @@ import {
   useParams,
   useModalContext,
   useAlertContext,
+  Route,
 } from "@/components";
 import {
   SlotAdditionalInfo,
@@ -67,17 +68,26 @@ export const WithdrawRai = ({
           header: "RAI response withdrawn",
           body: `The RAI response for ${item._source.id} has been withdrawn. CMS may follow up if additional information is needed.`,
         });
+        alert.setBannerStyle("success");
         alert.setBannerShow(true);
         alert.setBannerDisplayOn(
           // This uses the originRoute map because this value doesn't work
           // when any queries are added, such as the case of /details?id=...
           urlQuery.get(ORIGIN)
             ? originRoute[urlQuery.get(ORIGIN)! as Origin]
-            : "/dashboard"
+            : "/dashboard",
         );
         navigate(originPath ? { path: originPath } : { path: "/dashboard" });
       } catch (e) {
         console.error(e);
+        alert.setContent({
+          header: "An unexpected error has occurred:",
+          body: e instanceof Error ? e.message : String(e),
+        });
+        alert.setBannerStyle("destructive");
+        alert.setBannerDisplayOn(window.location.pathname as Route);
+        alert.setBannerShow(true);
+        window.scrollTo(0, 0);
       }
     })();
   }, []);
@@ -139,7 +149,7 @@ export const WithdrawRai = ({
                     <li className="ml-8 my-2" key={idx}>
                       {err.message as string}
                     </li>
-                  )
+                  ),
               )}
             </ul>
           </Alert>

diff --git a/src/services/ui/src/features/package-actions/IssueRai.tsx b/src/services/ui/src/features/package-actions/IssueRai.tsx
@@ -43,7 +43,7 @@ export const issueRaiDefaultAction: SC.ActionFunction = async ({
     };
   } catch (err) {
     console.log(err);
-    return { submitted: false };
+    return { submitted: false, error: err };
   }
 };
 
@@ -53,7 +53,7 @@ export const IssueRai = () => {
 
   SC.useDisplaySubmissionAlert(
     "RAI issued",
-    `The RAI for ${id} has been submitted. An email confirmation will be sent to you and the state.`
+    `The RAI for ${id} has been submitted. An email confirmation will be sent to you and the state.`,
   );
 
   return (

diff --git a/src/services/ui/src/features/package-actions/RespondToRai.tsx b/src/services/ui/src/features/package-actions/RespondToRai.tsx
@@ -60,6 +60,7 @@ export const onValidSubmission: SC.ActionFunction = async ({
   } catch (err) {
     return {
       submitted: false,
+      error: err,
     };
   }
 };
@@ -70,7 +71,7 @@ export const RespondToRai = () => {
 
   SC.useDisplaySubmissionAlert(
     "RAI response submitted",
-    `The RAI response for ${id} has been submitted.`
+    `The RAI response for ${id} has been submitted.`,
   );
 
   return (

diff --git a/src/services/ui/src/features/package-actions/TemporaryExtension.tsx b/src/services/ui/src/features/package-actions/TemporaryExtension.tsx
@@ -108,7 +108,7 @@ export const onValidSubmission: SC.ActionFunction = async ({ request }) => {
     };
   } catch (err) {
     console.log(err);
-    return { submitted: false };
+    return { submitted: false, error: err };
   }
 };
 

diff --git a/src/services/ui/src/features/package-actions/ToggleRaiResponseWithdraw.tsx b/src/services/ui/src/features/package-actions/ToggleRaiResponseWithdraw.tsx
@@ -37,7 +37,7 @@ export const onValidSubmission: SC.ActionFunction = async ({
 
     return { submitted: true };
   } catch (err) {
-    return { submitted: false };
+    return { submitted: false, error: err };
   }
 };
 
@@ -62,7 +62,7 @@ export const ToggleRaiResponseWithdraw = ({ isEnabled }: Props) => {
     `RAI response withdrawal ${raiTypeText.toLowerCase()}d`,
     raiTypeText === "Enable"
       ? "The state will be able to withdraw its RAI response. It may take up to a minute for this change to be applied."
-      : "The state will not be able to withdraw its RAI response. It may take up to a minute for this change to be applied."
+      : "The state will not be able to withdraw its RAI response. It may take up to a minute for this change to be applied.",
   );
 
   return (

diff --git a/src/services/ui/src/features/package-actions/WithdrawPackage.tsx b/src/services/ui/src/features/package-actions/WithdrawPackage.tsx
@@ -74,7 +74,7 @@ export const onValidSubmission: SC.ActionFunction = async ({
     return { submitted: true };
   } catch (err) {
     console.log(err);
-    return { submitted: false };
+    return { submitted: false, error: err };
   }
 };
 
@@ -85,7 +85,7 @@ export const WithdrawPackage = () => {
 
   SC.useDisplaySubmissionAlert(
     "Package withdrawn",
-    `The package ${id} has been withdrawn.`
+    `The package ${id} has been withdrawn.`,
   );
 
   return (

diff --git a/src/services/ui/src/features/package-actions/WithdrawRai.tsx b/src/services/ui/src/features/package-actions/WithdrawRai.tsx
@@ -54,6 +54,7 @@ export const onValidSubmission: SC.ActionFunction = async ({
   } catch (err) {
     return {
       submitted: false,
+      error: err,
     };
   }
 };
@@ -64,7 +65,7 @@ export const WithdrawRai = () => {
   const { id, authority } = useParams() as { id: string; authority: Authority };
   SC.useDisplaySubmissionAlert(
     "RAI response withdrawn",
-    `The RAI response for ${id} has been withdrawn. CMS may follow up if additional information is needed.`
+    `The RAI response for ${id} has been withdrawn. CMS may follow up if additional information is needed.`,
   );
 
   return (