Refactor preSubmitMessage

Enterprise-CMCS · Jan 18, 2024 · 0c71d39 · 0c71d39
1 parent c0c67ef
commit 0c71d39
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 63 deletions.
diff --git a/src/services/ui/src/pages/actions/IssueRai.tsx b/src/services/ui/src/pages/actions/IssueRai.tsx
@@ -1,13 +1,13 @@
-import * as I from "@/components/Inputs";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { opensearch, PlanType } from "shared-types";
 import { ActionFormTemplate } from "@/pages/actions/template";
 import { useActionSubmitHandler } from "@/hooks/useActionFormController";
-import { ActionFormIntro } from "@/pages/actions/common";
 import { FormSetup } from "@/pages/actions/setups";
 
+const preSubmitMessage =
+  "Once you submit this form, a confirmation email is sent to you and to the State.";
 export const RaiIssue = ({
   item,
   schema,
@@ -26,22 +26,20 @@ export const RaiIssue = ({
       item={item}
       formController={form}
       submitHandler={handleSubmit}
-      intro={
-        <ActionFormIntro title={"Formal RAI Details"}>
-          <I.RequiredIndicator /> Indicates a required field
-          <p className="font-light mb-6 max-w-4xl">
-            Issuance of a Formal RAI in OneMAC will create a Formal RAI email
-            sent to the State. This will also create a section in the package
-            details summary for you and the State to have record. Please attach
-            the Formal RAI Letter along with any additional information or
-            comments in the provided text box. Once you submit this form, a
-            confirmation email is sent to you and to the State.{" "}
-            <strong className="bold">
-              If you leave this page, you will lose your progress on this form.
-            </strong>
-          </p>
-        </ActionFormIntro>
+      title={"Formal RAI Details"}
+      description={
+        <p className="font-light mb-6 max-w-4xl">
+          Issuance of a Formal RAI in OneMAC will create a Formal RAI email sent
+          to the State. This will also create a section in the package details
+          summary for you and the State to have record. Please attach the Formal
+          RAI Letter along with any additional information or comments in the
+          provided text box. {preSubmitMessage}
+          <strong className="bold">
+            If you leave this page, you will lose your progress on this form.
+          </strong>
+        </p>
       }
+      preSubmitMessage={preSubmitMessage}
       attachments={attachments}
       attachmentFaqLink={"/faq/#medicaid-spa-rai-attachments"}
       requireAddlInfo

diff --git a/src/services/ui/src/pages/actions/RespondToRai.tsx b/src/services/ui/src/pages/actions/RespondToRai.tsx
@@ -1,13 +1,12 @@
-import * as I from "@/components/Inputs";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { opensearch, PlanType } from "shared-types";
 import { useActionSubmitHandler } from "@/hooks/useActionFormController";
-import { ActionFormIntro } from "@/pages/actions/common";
 import { ActionFormTemplate } from "@/pages/actions/template";
 import { FormSetup } from "@/pages/actions/setups";
-import { SetupOptions } from "@/pages";
 
+const preSubmitMessage =
+  "Once you submit this form, a confirmation email is sent to you and to CMS. CMS will use this content to review your package, and you will not be able to edit this form. If CMS needs any additional information, they will follow up by email.";
 export const RespondToRai = ({
   item,
   schema,
@@ -28,20 +27,16 @@ export const RespondToRai = ({
       item={item}
       formController={form}
       submitHandler={handleSubmit}
-      intro={
-        <ActionFormIntro title={`${item._source.planType} Formal RAI Details`}>
-          <I.RequiredIndicator /> Indicates a required field
-          <p className="font-light mb-6 max-w-4xl">
-            Once you submit this form, a confirmation email is sent to you and
-            to CMS. CMS will use this content to review your package, and you
-            will not be able to edit this form. If CMS needs any additional
-            information, they will follow up by email.{" "}
-            <strong className="bold">
-              If you leave this page, you will lose your progress on this form.
-            </strong>
-          </p>
-        </ActionFormIntro>
+      title={`${item._source.planType} Formal RAI Details`}
+      description={
+        <p className="font-light mb-6 max-w-4xl">
+          {preSubmitMessage}{" "}
+          <strong className="bold">
+            If you leave this page, you will lose your progress on this form.
+          </strong>
+        </p>
       }
+      preSubmitMessage={preSubmitMessage}
       attachments={attachments}
       attachmentFaqLink={"/faq/#medicaid-spa-rai-attachments"}
       addlInfoInstructions={

diff --git a/src/services/ui/src/pages/actions/WithdrawPackage.tsx b/src/services/ui/src/pages/actions/WithdrawPackage.tsx
@@ -34,6 +34,8 @@ const addlInfoInstructions: Record<SetupOptions, ReactElement> = {
   "CHIP SPA": <p>Explain your need for withdrawal.</p>,
 };
 
+const preSubmitMessage =
+  "Once complete, you will not be able to resubmit this package. CMS will be notified and will use this content to review your request. If CMS needs any additional information, they will follow up by email.";
 export const WithdrawPackage = ({
   item,
   schema,
@@ -55,16 +57,11 @@ export const WithdrawPackage = ({
       item={item}
       formController={form}
       submitHandler={handleSubmit}
-      intro={
-        <ActionFormIntro title={`Withdraw ${item._source.planType} Package`}>
-          <p>
-            Complete this form to withdraw a package. Once complete, you will
-            not be able to resubmit this package. CMS will be notified and will
-            use this content to review your request. If CMS needs any additional
-            information, they will follow up by email.
-          </p>
-        </ActionFormIntro>
+      title={`Withdraw ${item._source.planType} Package`}
+      description={
+        <p>Complete this form to withdraw a package. {preSubmitMessage}</p>
       }
+      preSubmitMessage={preSubmitMessage}
       attachments={attachments}
       attachmentFaqLink={"/faq"}
       attachmentInstructions={

diff --git a/src/services/ui/src/pages/actions/WithdrawRai.tsx b/src/services/ui/src/pages/actions/WithdrawRai.tsx
@@ -1,13 +1,13 @@
-import * as I from "@/components/Inputs";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { opensearch, PlanType } from "shared-types";
 import { ActionFormTemplate } from "@/pages/actions/template";
 import { useActionSubmitHandler } from "@/hooks/useActionFormController";
-import { ActionFormIntro } from "@/pages/actions/common";
 import { FormSetup } from "@/pages/actions/setups";
 
+const preSubmitMessage =
+  "Once complete, you and CMS will receive an email confirmation.";
 export const WithdrawRai = ({
   item,
   schema,
@@ -27,15 +27,14 @@ export const WithdrawRai = ({
       item={item}
       formController={form}
       submitHandler={handleSubmit}
-      intro={
-        <ActionFormIntro title={"Withdraw Formal RAI Response Details"}>
-          <I.RequiredIndicator /> Indicates a required field
-          <p className="font-light mb-6 max-w-4xl">
-            Complete this form to withdraw the Formal RAI response. Once
-            complete, you and CMS will receive an email confirmation.
-          </p>
-        </ActionFormIntro>
+      title={"Withdraw Formal RAI Response Details"}
+      description={
+        <p className="font-light mb-6 max-w-4xl">
+          Complete this form to withdraw the Formal RAI response.{" "}
+          {preSubmitMessage}
+        </p>
       }
+      preSubmitMessage={preSubmitMessage}
       attachments={attachments}
       attachmentFaqLink={"/faq/#medicaid-spa-rai-attachments"}
       requireAddlInfo

diff --git a/src/services/ui/src/pages/actions/template.tsx b/src/services/ui/src/pages/actions/template.tsx
@@ -1,9 +1,6 @@
 import { Alert, LoadingSpinner } from "@/components";
-import { PackageInfo } from "@/pages/actions/common";
-import {
-  AttachmentsSizeTypesDesc,
-  PreSubmissionMessage,
-} from "@/pages/form/content";
+import { ActionFormIntro, PackageInfo } from "@/pages/actions/common";
+import { AttachmentsSizeTypesDesc } from "@/pages/form/content";
 import {
   SlotAdditionalInfo,
   SlotAttachments,
@@ -15,7 +12,7 @@ import {
   FormMessage,
   RequiredIndicator,
 } from "@/components/Inputs";
-import { ReactElement } from "react";
+import { ReactElement, ReactNode } from "react";
 import { opensearch } from "shared-types";
 import { isStateUser } from "shared-utils";
 import {
@@ -27,12 +24,15 @@ import {
 import { AttachmentRecipe } from "@/lib";
 import { useModalContext } from "@/pages/form/modals";
 import { useGetUser } from "@/api/useGetUser";
+import { Info } from "lucide-react";
 
 export const ActionFormTemplate = <D extends FieldValues>({
   item,
   formController,
   submitHandler,
-  intro,
+  title,
+  description,
+  preSubmitMessage,
   attachments,
   attachmentFaqLink,
   attachmentInstructions,
@@ -42,20 +42,24 @@ export const ActionFormTemplate = <D extends FieldValues>({
   item: opensearch.main.ItemResult;
   formController: UseFormReturn<D>;
   submitHandler: SubmitHandler<D>;
-  intro: ReactElement;
+  title: string;
+  description: ReactNode;
+  preSubmitMessage?: string;
   attachments: AttachmentRecipe<D>[];
   attachmentFaqLink: string;
   attachmentInstructions?: ReactElement;
   requireAddlInfo?: boolean;
   addlInfoInstructions?: ReactElement;
 }) => {
   const { setCancelModalOpen } = useModalContext();
-  const { data: user } = useGetUser();
   return (
     <Form {...formController}>
       <form onSubmit={formController.handleSubmit(submitHandler)}>
         {formController.formState.isSubmitting && <LoadingSpinner />}
-        {intro}
+        <ActionFormIntro title={title}>
+          <RequiredIndicator /> Indicates a required field
+          {description}
+        </ActionFormIntro>
         <PackageInfo item={item} />
         <h3 className="font-bold text-2xl font-sans">Attachments</h3>
         {attachmentInstructions}
@@ -102,7 +106,12 @@ export const ActionFormTemplate = <D extends FieldValues>({
             </ul>
           </Alert>
         )}
-        {isStateUser(user!.user) && <PreSubmissionMessage />}
+        {preSubmitMessage && (
+          <Alert variant={"infoBlock"} className="my-2 w-5/6 flex-row text-sm">
+            <Info />
+            <p className="ml-2">{preSubmitMessage}</p>
+          </Alert>
+        )}
         <div className="flex gap-2 my-8">
           <Button type="submit">Submit</Button>
           <Button