fix(actions): Updating action template and forms content

src/services/ui/src/hooks/useActionFormController.ts

@@ -6,33 +6,17 @@ import { submit } from "@/api/submissionService";
 import { buildActionUrl } from "@/lib";
 import { PlanType } from "shared-types";
 
-type DataConditionError = {
-  message: string;
-};
-
 export const useActionSubmitHandler = <D extends FieldValues>({
   authority,
-  addDataConditions,
 }: {
   formHookReturn: UseFormReturn<D>;
   authority: PlanType;
-  /** Reserved for things zod cannot check. */
-  addDataConditions?: ((data: D) => DataConditionError | null)[];
 }): SubmitHandler<D> => {
   const { id, type } = useParams("/action/:id/:type");
   const { data: user } = useGetUser();
   const { setSuccessModalOpen, setErrorModalOpen } = useModalContext();
   return async (data) => {
     try {
-      if (addDataConditions?.length) {
-        const errors = addDataConditions
-          .map((fn) => fn(data))
-          .filter((err) => err) // Filter out nulls
-          .map((err) => err?.message);
-        if (errors.length)
-          throw Error(`Additional conditions were not met: ${errors}`);
-      }
-      // TODO: Type update for submit generic
       await submit<D & { id: string }>({
         data: { ...data, id: id! },
         endpoint: buildActionUrl(type!),

src/services/ui/src/pages/actions/IssueRai.tsx

@@ -45,6 +45,9 @@ export const RaiIssue = ({
       attachments={attachments}
       attachmentFaqLink={"/faq/#medicaid-spa-rai-attachments"}
       requireAddlInfo
+      addlInfoInstructions={
+        <p>Add anything else that you would like to share with the State.</p>
+      }
     />
   );
 };

src/services/ui/src/pages/actions/RespondToRai.tsx

@@ -6,6 +6,7 @@ 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";
 
 export const RespondToRai = ({
   item,

src/services/ui/src/pages/actions/WithdrawPackage.tsx

@@ -7,6 +7,39 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useActionSubmitHandler } from "@/hooks/useActionFormController";
 import { ActionFormTemplate } from "@/pages/actions/template";
 import { FormSetup } from "@/pages/actions/setups";
+import { SetupOptions } from "@/pages";
+import { ReactElement } from "react";
+
+const attachmentInstructions: Record<SetupOptions, ReactElement> = {
+  "Medicaid SPA": (
+    <p>
+      Upload your supporting documentation for withdrawal or explain your need
+      for withdrawal in the Additional Information section.
+    </p>
+  ),
+  "CHIP SPA": (
+    <p className="font-normal mb-4">
+      Official withdrawal letters are required and must be on state letterhead
+      signed by the State Medicaid Director or CHIP Director.
+    </p>
+  ),
+};
+
+const addlInfoInstructions: Record<SetupOptions, ReactElement> = {
+  "Medicaid SPA": (
+    <p>
+      Explain your need for withdrawal, or upload supporting documentation.
+      <br />
+      <em>
+        Once you submit this form, a confirmation email is sent to you and to
+        CMS. CMS will use this content to review your package. If CMS needs any
+        additional information, they will follow up by email
+      </em>
+      .
+    </p>
+  ),
+  "CHIP SPA": <p>Explain your need for withdrawal.</p>,
+};
 
 export const WithdrawPackage = ({
   item,
@@ -21,20 +54,6 @@ export const WithdrawPackage = ({
   const handleSubmit = useActionSubmitHandler({
     formHookReturn: form,
     authority: item?._source.authority as PlanType,
-    addDataConditions: [
-      (data) => {
-        if (
-          !data.attachments.supportingDocumentation &&
-          !data.additionalInformation
-        ) {
-          return {
-            message: "An Attachment or Additional Information is required.",
-          };
-        } else {
-          return null;
-        }
-      },
-    ],
   });
 
   if (!item) return <Navigate path={"/"} />; // Prevents optionals below
@@ -56,22 +75,10 @@ export const WithdrawPackage = ({
       attachments={attachments}
       attachmentFaqLink={"/faq"}
       attachmentInstructions={
-        <p className="font-normal mb-4">
-          Official withdrawal letters are required and must be on state
-          letterhead signed by the State Medicaid Director or CHIP Director.
-        </p>
+        attachmentInstructions[item!._source.planType as string as SetupOptions]
       }
       addlInfoInstructions={
-        <p>
-          Explain your need for withdrawal, or upload supporting documentation.
-          <br />
-          <em>
-            Once you submit this form, a confirmation email is sent to you and
-            to CMS. CMS will use this content to review your package. If CMS
-            needs any additional information, they will follow up by email
-          </em>
-          .
-        </p>
+        addlInfoInstructions[item!._source.planType as string as SetupOptions]
       }
     />
   );

src/services/ui/src/pages/actions/WithdrawRai.tsx

@@ -39,6 +39,7 @@ export const WithdrawRai = ({
       attachments={attachments}
       attachmentFaqLink={"/faq/#medicaid-spa-rai-attachments"}
       requireAddlInfo
+      addlInfoInstructions={<p>Explain your need for withdrawal.</p>}
     />
   );
 };

src/services/ui/src/pages/actions/index.tsx

@@ -3,7 +3,7 @@ import { ToggleRaiResponseWithdraw } from "@/pages/actions/ToggleRaiResponseWith
 import { RaiIssue } from "@/pages/actions/IssueRai";
 import { WithdrawPackage } from "@/pages/actions/WithdrawPackage";
 import { RespondToRai } from "@/pages/actions/RespondToRai";
-import { opensearch, Action } from "shared-types";
+import { Action } from "shared-types";
 import { WithdrawRai } from "./WithdrawRai";
 import { useGetItem, useGetPackageActions } from "@/api";
 import {
@@ -24,7 +24,7 @@ import {
   medicaidWithdrawPackageSetup,
 } from "@/pages/actions/setups";
 
-type SetupOptions = "CHIP SPA" | "Medicaid SPA";
+export type SetupOptions = "CHIP SPA" | "Medicaid SPA";
 const getFormSetup = (opt: SetupOptions, type: Action): FormSetup | null => {
   switch (type) {
     case "issue-rai":

src/services/ui/src/pages/actions/setups/_.ts

@@ -1,7 +1,7 @@
-import { ZodObject } from "zod";
+import { ZodEffects, ZodObject } from "zod";
 import { AttachmentRecipe } from "@/lib";
 
 export type FormSetup = {
-  schema: ZodObject<any>;
+  schema: ZodObject<any> | ZodEffects<any>;
   attachments: AttachmentRecipe<any>[];
 };

src/services/ui/src/pages/actions/setups/setupIssueRai.ts

@@ -1,15 +1,16 @@
 import { z } from "zod";
+import {
+  zAdditionalInfo,
+  zAttachmentOptional,
+  zAttachmentRequired,
+} from "@/pages/form/zod";
 
 export const defaultIssueRaiSetup = {
   schema: z.object({
-    additionalInformation: z.string().max(4000),
+    additionalInformation: zAdditionalInfo,
     attachments: z.object({
-      formalRaiLetter: z
-        .array(z.instanceof(File))
-        .refine((value) => value.length > 0, {
-          message: "Required",
-        }),
-      other: z.array(z.instanceof(File)).optional(),
+      formalRaiLetter: zAttachmentRequired({ min: 1 }),
+      other: zAttachmentOptional,
     }),
   }),
   attachments: [

src/services/ui/src/pages/actions/setups/setupRespondToRai.ts

@@ -7,7 +7,7 @@ import {
 
 export const medicaidRespondToRaiSetup = {
   schema: z.object({
-    additionalInformation: zAdditionalInfo,
+    additionalInformation: zAdditionalInfo.optional(),
     attachments: z.object({
       raiResponseLetter: zAttachmentRequired({ min: 1 }),
       other: zAttachmentOptional,
@@ -29,7 +29,7 @@ export const medicaidRespondToRaiSetup = {
 
 export const chipRespondToRaiSetup = {
   schema: z.object({
-    additionalInformation: zAdditionalInfo,
+    additionalInformation: zAdditionalInfo.optional(),
     attachments: z.object({
       revisedAmendedStatePlanLanguage: zAttachmentRequired({ min: 1 }),
       officialRaiResponse: zAttachmentRequired({ min: 1 }),
@@ -47,7 +47,7 @@ export const chipRespondToRaiSetup = {
     },
     {
       name: "officialRaiResponse",
-      label: "Official Rai Response",
+      label: "Official RAI Response",
       required: true,
     },
     {

src/services/ui/src/pages/actions/setups/setupWithdrawPackage.ts

@@ -6,12 +6,28 @@ import {
 } from "@/pages/form/zod";
 
 export const medicaidWithdrawPackageSetup = {
-  schema: z.object({
-    additionalInformation: zAdditionalInfo,
-    attachments: z.object({
-      supportingDocumentation: zAttachmentOptional,
+  schema: z
+    .object({
+      additionalInformation: zAdditionalInfo.optional(),
+      attachments: z.object({
+        supportingDocumentation: zAttachmentOptional,
+      }),
+    })
+    .superRefine((data, ctx) => {
+      if (
+        !data.attachments.supportingDocumentation?.length &&
+        data.additionalInformation === undefined
+      ) {
+        ctx.addIssue({
+          message: "An Attachment or Additional Information is required.",
+          code: z.ZodIssueCode.custom,
+          fatal: true,
+        });
+        // Zod says this is to appease types
+        // https://github.com/colinhacks/zod?tab=readme-ov-file#type-refinements
+        return z.NEVER;
+      }
     }),
-  }),
   attachments: [
     {
       name: "supportingDocumentation",
@@ -23,7 +39,7 @@ export const medicaidWithdrawPackageSetup = {
 
 export const chipWithdrawPackageSetup = {
   schema: z.object({
-    additionalInformation: zAdditionalInfo,
+    additionalInformation: zAdditionalInfo.optional(),
     attachments: z.object({
       officialWithdrawalLetter: zAttachmentRequired({ min: 1 }),
     }),

src/services/ui/src/pages/actions/setups/setupWithdrawRai.ts

@@ -1,10 +1,11 @@
 import { z } from "zod";
+import { zAdditionalInfo, zAttachmentOptional } from "@/pages/form/zod";
 
 export const defaultWithdrawRaiSetup = {
   schema: z.object({
-    additionalInformation: z.string().max(4000),
+    additionalInformation: zAdditionalInfo,
     attachments: z.object({
-      supportingDocumentation: z.array(z.instanceof(File)).nullish(),
+      supportingDocumentation: zAttachmentOptional,
     }),
   }),
   attachments: [

src/services/ui/src/pages/actions/template.tsx

@@ -1,4 +1,4 @@
-import { LoadingSpinner } from "@/components";
+import { Alert, LoadingSpinner } from "@/components";
 import { PackageInfo } from "@/pages/actions/common";
 import { AttachmentsSizeTypesDesc } from "@/pages/form/content";
 import {
@@ -81,9 +81,28 @@ export const ActionFormTemplate = <D extends FieldValues>({
             required: requireAddlInfo,
           })}
         />
+        {Object.keys(formController.formState.errors).length !== 0 && (
+          <Alert className="my-6" variant="destructive">
+            Input validation error(s)
+            <ul className="list-disc">
+              {Object.values(formController.formState.errors).map(
+                (err, idx) =>
+                  err?.message && (
+                    <li className="ml-8 my-2" key={idx}>
+                      {err.message as string}
+                    </li>
+                  )
+              )}
+            </ul>
+          </Alert>
+        )}
         <div className="flex gap-2 my-8">
           <Button type="submit">Submit</Button>
-          <Button onClick={() => setCancelModalOpen(true)} variant="outline">
+          <Button
+            type="button"
+            onClick={() => setCancelModalOpen(true)}
+            variant="outline"
+          >
             Cancel
           </Button>
         </div>

src/services/ui/src/pages/detail/index.tsx

@@ -200,7 +200,10 @@ export const DetailsContent = ({
           <PackageActionsCard id={data._id} />
         </section>
         <div className="flex flex-col gap-3">
-          <DetailsSection id="package-details" title="Medicaid Package Details">
+          <DetailsSection
+            id="package-details"
+            title={`${data._source.planType} Package Details`}
+          >
             <DetailItemsGrid displayItems={spaDetails(data._source)} />
             <DetailItemsGrid displayItems={submissionDetails(data._source)} />
           </DetailsSection>

src/services/ui/src/pages/form/zod.ts

@@ -36,5 +36,4 @@ export const zAttachmentRequired = ({
 
 export const zAdditionalInfo = z
   .string()
-  .max(4000, "This field may only be up to 4000 characters.")
-  .optional();
+  .max(4000, "This field may only be up to 4000 characters.");