feat(webform): new ABP11 form and updated Upload component (#360)

* fix: change Upload to follow other form Input management standard * feat: add Upload to slots - also remove unused import * feat: add new abp form * fix: verbiage update for abp * fix: set initializer for upload * fix: allow ref pass in to be used at some point * spell check * fix: wf location and file upload changes --------- Co-authored-by: Benjamin Paige <[email protected]>
Enterprise-CMCS · Feb 21, 2024 · 7547805 · 7547805
1 parent 6233cf7
commit 7547805
Show file tree

Hide file tree

Showing 18 changed files with 157 additions and 125 deletions.
diff --git a/src/packages/shared-types/forms.ts b/src/packages/shared-types/forms.ts
@@ -64,6 +64,10 @@ export type RHFComponentMap = {
   Checkbox: {
     options: RHFOption[];
   };
+  Upload: {
+    maxFiles?: number;
+    maxSize?: number;
+  };
   FieldArray: {
     appendText?: string;
   };

diff --git a/src/services/api/webforms/ABP11/index.ts b/src/services/api/webforms/ABP11/index.ts
@@ -0,0 +1 @@
+export * from "./v202401";
diff --git a/src/services/api/webforms/ABP11/v202401.ts b/src/services/api/webforms/ABP11/v202401.ts
@@ -0,0 +1,40 @@
+import { FormSchema } from "shared-types";
+
+export const v202401: FormSchema = {
+  header: "ABP 11: Payment methodology",
+  sections: [
+    {
+      title: "Alternative Benefit Plans - Payment methodologies",
+      form: [
+        {
+          slots: [
+            {
+              rhf: "Checkbox",
+              name: "economy_and_efficiency_of_plans",
+              rules: { required: "* Required" },
+              props: {
+                options: [
+                  {
+                    label:
+                      "The state or territory provides assurance that, for each benefit provided under an Alternative Benefit Plan that is not provided through managed care, it will use the payment methodology in its approved state plan or hereby submits state plan amendment Attachment 4.19a, 4.19b, or 4.19d, as appropriate, describing the payment methodology for the benefit.",
+                    value: "assures_alternative_benefit_plan_in_accordance",
+                  },
+                ],
+              },
+            },
+            {
+              rhf: "Upload",
+              name: "state_plan_attchmnt_alt_payment_method",
+              label: "State plan amendment attachment",
+              labelStyling: "font-bold",
+              description:
+                "Only required if not using the payment methodology in the approved state plan",
+              descriptionAbove: true,
+              props: { maxFiles: 3 },
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
diff --git a/src/services/api/webforms/index.ts b/src/services/api/webforms/index.ts
@@ -1,5 +1,6 @@
 import * as ABP1 from "./ABP1";
 import * as ABP10 from "./ABP10";
+import * as ABP11 from "./ABP11";
 import * as ABP3 from "./ABP3";
 import * as ABP3_1 from "./ABP3_1";
 import { FormSchema } from "shared-types";
@@ -18,4 +19,7 @@ export const webformVersions: Record<string, Record<string, FormSchema>> = {
   ABP10: {
     v202401: ABP10.v202401,
   },
+  ABP11: {
+    v202401: ABP11.v202401,
+  },
 };
diff --git a/src/services/ui/src/components/Inputs/upload.tsx b/src/services/ui/src/components/Inputs/upload.tsx
@@ -1,90 +1,93 @@
 import { cn } from "@/lib";
-import { useCallback, useState } from "react";
+import { useCallback, useState, forwardRef } from "react";
 import { useDropzone, FileRejection, Accept } from "react-dropzone";
 import * as I from "@/components/Inputs";
 import { X } from "lucide-react";
 import { FILE_TYPES } from "shared-types/uploads";
 
 type UploadProps = {
   maxFiles?: number;
-  files: File[];
-  setFiles: (files: File[]) => void;
+  value?: File[];
+  onChange: (files: File[]) => void;
+  setError?: (e: string) => void;
 };
 
-export const Upload = ({ maxFiles, files, setFiles }: UploadProps) => {
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+export const Upload = forwardRef<HTMLInputElement, UploadProps>(
+  ({ maxFiles, value = [], onChange, setError }, _ref) => {
+    const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
-  const onDrop = useCallback(
-    (acceptedFiles: File[], fileRejections: FileRejection[]) => {
-      if (fileRejections.length > 0) {
-        setErrorMessage(
-          "Selected file(s) is too large or of a disallowed file type."
-        );
-      } else {
-        setErrorMessage(null);
-        setFiles([...files, ...acceptedFiles]);
-      }
-    },
-    [files]
-  );
+    const onDrop = useCallback(
+      (acceptedFiles: File[], fileRejections: FileRejection[]) => {
+        if (fileRejections.length > 0) {
+          const errormsg =
+            "Selected file(s) is too large or of a disallowed file type.";
+          setError ? setError(errormsg) : setErrorMessage(errormsg);
+        } else {
+          setErrorMessage(null);
+          onChange([...value, ...acceptedFiles]);
+        }
+      },
+      [value]
+    );
 
-  const accept: Accept = {};
-  FILE_TYPES.map((type) =>
-    accept[type.mime]
-      ? accept[type.mime].push(type.extension)
-      : (accept[type.mime] = [type.extension])
-  );
+    const accept: Accept = {};
+    FILE_TYPES.map((type) =>
+      accept[type.mime]
+        ? accept[type.mime].push(type.extension)
+        : (accept[type.mime] = [type.extension])
+    );
 
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    onDrop,
-    accept,
-    maxFiles,
-    maxSize: 80 * 1024 * 1024, // 80MB,
-  });
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({
+      onDrop,
+      accept,
+      maxFiles,
+      maxSize: 80 * 1024 * 1024, // 80MB,
+    });
 
-  return (
-    <>
-      <div className="my-2 flex gap-2">
-        {files.map((file) => (
-          // <div key={file.name} className="my-2 flex gap-2">
-          <div
-            className="flex border-2 rounded-md py-1 pl-2.5 pr-1 border-sky-500 items-center"
-            key={file.name}
-          >
-            <span className="text-sky-700">{file.name}</span>
-            <I.Button
-              onClick={(e) => {
-                e.preventDefault();
-                setFiles(files.filter((a) => a.name !== file.name));
-              }}
-              variant="ghost"
-              className="p-0 h-0"
+    return (
+      <>
+        <div className="my-2 flex gap-2">
+          {value?.map((file) => (
+            // <div key={file.name} className="my-2 flex gap-2">
+            <div
+              className="flex border-2 rounded-md py-1 pl-2.5 pr-1 border-sky-500 items-center"
+              key={file.name}
             >
-              <X className="ml-2 text-sky-700 w-5" />
-            </I.Button>
-            {/* </div> */}
-          </div>
-        ))}
-      </div>
-      {errorMessage && <span className="text-red-500">{errorMessage}</span>}
-      <div
-        {...getRootProps()}
-        className={cn(
-          "w-full flex items-center justify-center border border-dashed  py-6 rounded-sm",
-          isDragActive && "border-blue-700"
-        )}
-      >
-        <p>
-          Drag file here or{" "}
-          <span className="text-sky-700 underline hover:cursor-pointer">
-            choose from folder
-          </span>
-        </p>
-        <input {...getInputProps()} />
-        {/* {isDragActive && <p>Drag is Active</p>} */}
-      </div>
-    </>
-  );
-};
+              <span className="text-sky-700">{file.name}</span>
+              <I.Button
+                onClick={(e) => {
+                  e.preventDefault();
+                  onChange(value?.filter((a) => a.name !== file.name));
+                }}
+                variant="ghost"
+                className="p-0 h-0"
+              >
+                <X className="ml-2 text-sky-700 w-5" />
+              </I.Button>
+              {/* </div> */}
+            </div>
+          ))}
+        </div>
+        {errorMessage && <span className="text-red-500">{errorMessage}</span>}
+        <div
+          {...getRootProps()}
+          className={cn(
+            "w-full flex items-center justify-center border border-dashed  py-6 rounded-sm",
+            isDragActive && "border-blue-700"
+          )}
+        >
+          <p>
+            Drag file here or{" "}
+            <span className="text-sky-700 underline hover:cursor-pointer">
+              choose from folder
+            </span>
+          </p>
+          <input {...getInputProps()} />
+          {/* {isDragActive && <p>Drag is Active</p>} */}
+        </div>
+      </>
+    );
+  }
+);
 
 Upload.displayName = "Upload";
diff --git a/src/services/ui/src/components/RHF/Document.tsx b/src/services/ui/src/components/RHF/Document.tsx
@@ -1,6 +1,5 @@
 import { Control, FieldValues } from "react-hook-form";
 
-import { FormLabel } from "../Inputs";
 import { RHFSection } from "./Section";
 import { FormSchema } from "shared-types";
 

diff --git a/src/services/ui/src/components/RHF/Slot.tsx b/src/services/ui/src/components/RHF/Slot.tsx
@@ -20,6 +20,7 @@ import {
   Calendar,
   FormField,
   Checkbox,
+  Upload,
 } from "../Inputs";
 import { RHFFormGroup } from "./FormGroup";
 import { CalendarIcon } from "lucide-react";
@@ -295,6 +296,13 @@ export const RHFSlot = <
                   </Popover>
                 );
               })()}
+            {/* ----------------------------------------------------------------------------- */}
+            {rhf === "Upload" &&
+              (() => {
+                const hops = props as RHFComponentMap["Upload"];
+
+                return <Upload {...field} {...hops} />;
+              })()}
 
             {/* ----------------------------------------------------------------------------- */}
             {rhf === "FieldArray" && (

diff --git a/src/services/ui/src/components/RHF/utils/initializer.ts b/src/services/ui/src/components/RHF/utils/initializer.ts
@@ -39,6 +39,9 @@ export const slotInitializer = (ACC: GL, SLOT: T.RHFSlotProps): GL => {
     case "FieldGroup":
       ACC[SLOT.name] = [SLOT.fields?.reduce(fieldInitializer, {})];
       break;
+    case "Upload":
+      ACC[SLOT.name] = [];
+      break;
     case "Input":
     case "Select":
     case "Textarea":

diff --git a/src/services/ui/src/components/Webform/index.tsx b/src/services/ui/src/components/Webform/index.tsx
@@ -49,6 +49,12 @@ export const Webforms = () => {
           >
             ABP 10
           </Link>
+          <Link
+            path="/webform/:id/:version"
+            params={{ id: "abp11", version: 202401 }}
+          >
+            ABP 11
+          </Link>
           <Link path="/guides/abp">Implementation Guide</Link>
         </div>
       </section>

diff --git a/src/services/ui/src/pages/actions/renderSlots.tsx b/src/services/ui/src/pages/actions/renderSlots.tsx
@@ -34,7 +34,7 @@ export const SlotAttachments = <
     return (
       <FormItem {...props}>
         <FormLabel>{label}</FormLabel>
-        <Upload files={field?.value ?? []} setFiles={field.onChange} />
+        <Upload {...field} />
         {message}
       </FormItem>
     );

diff --git a/src/services/ui/src/pages/form/chip-form.tsx b/src/services/ui/src/pages/form/chip-form.tsx
@@ -187,10 +187,7 @@ export const ChipSpaFormPage = () => {
                         At least one attachment is required
                       </Inputs.FormDescription>
                     )}
-                    <Inputs.Upload
-                      files={field?.value ?? []}
-                      setFiles={field.onChange}
-                    />
+                    <Inputs.Upload {...field} />
                     <Inputs.FormMessage />
                   </Inputs.FormItem>
                 )}

diff --git a/src/services/ui/src/pages/form/medicaid-form.tsx b/src/services/ui/src/pages/form/medicaid-form.tsx
@@ -197,10 +197,7 @@ export const MedicaidSpaFormPage = () => {
                           : ""}
                       </Inputs.FormDescription>
                     }
-                    <Inputs.Upload
-                      files={field?.value ?? []}
-                      setFiles={field.onChange}
-                    />
+                    <Inputs.Upload {...field} />
                     <Inputs.FormMessage />
                   </Inputs.FormItem>
                 )}

diff --git a/src/services/ui/src/pages/form/waiver/capitated/capitated-1915-b-waiver-amendment.tsx b/src/services/ui/src/pages/form/waiver/capitated/capitated-1915-b-waiver-amendment.tsx
@@ -131,9 +131,7 @@ export const Capitated1915BWaiverAmendmentPage = () => {
               <Inputs.FormLabel className="font-semibold">
                 Waiver Authority
               </Inputs.FormLabel>
-              <span className="text-lg font-thin">
-               1915(b)
-              </span>
+              <span className="text-lg font-thin">1915(b)</span>
             </div>
             <Inputs.FormField
               control={form.control}
@@ -233,10 +231,7 @@ export const Capitated1915BWaiverAmendmentPage = () => {
                       {label}
                       {required ? <Inputs.RequiredIndicator /> : null}
                     </Inputs.FormLabel>
-                    <Inputs.Upload
-                      files={field?.value ?? []}
-                      setFiles={field.onChange}
-                    />
+                    <Inputs.Upload {...field} />
                     <Inputs.FormMessage />
                   </Inputs.FormItem>
                 )}

diff --git a/src/services/ui/src/pages/form/waiver/capitated/capitated-1915-b-waiver-initial.tsx b/src/services/ui/src/pages/form/waiver/capitated/capitated-1915-b-waiver-initial.tsx
@@ -131,9 +131,7 @@ export const Capitated1915BWaiverInitialPage = () => {
               <Inputs.FormLabel className="font-semibold">
                 Waiver Authority
               </Inputs.FormLabel>
-              <span className="text-lg font-thin">
-                1915(b)
-              </span>
+              <span className="text-lg font-thin">1915(b)</span>
             </div>
             <Inputs.FormField
               control={form.control}
@@ -204,10 +202,7 @@ export const Capitated1915BWaiverInitialPage = () => {
                       {label}
                       {required ? <Inputs.RequiredIndicator /> : null}
                     </Inputs.FormLabel>
-                    <Inputs.Upload
-                      files={field?.value ?? []}
-                      setFiles={field.onChange}
-                    />
+                    <Inputs.Upload {...field} />
                     <Inputs.FormMessage />
                   </Inputs.FormItem>
                 )}

diff --git a/src/services/ui/src/pages/form/waiver/capitated/capitated-1915-b-waiver-renewal.tsx b/src/services/ui/src/pages/form/waiver/capitated/capitated-1915-b-waiver-renewal.tsx
@@ -158,9 +158,7 @@ export const Capitated1915BWaiverRenewalPage = () => {
               <Inputs.FormLabel className="font-semibold">
                 Waiver Authority
               </Inputs.FormLabel>
-              <span className="text-lg font-thin">
-                1915(b)
-              </span>
+              <span className="text-lg font-thin">1915(b)</span>
             </div>
             <Inputs.FormField
               control={form.control}
@@ -262,10 +260,7 @@ export const Capitated1915BWaiverRenewalPage = () => {
                       {label}
                       {required ? <Inputs.RequiredIndicator /> : null}
                     </Inputs.FormLabel>
-                    <Inputs.Upload
-                      files={field?.value ?? []}
-                      setFiles={field.onChange}
-                    />
+                    <Inputs.Upload {...field} />
                     <Inputs.FormMessage />
                   </Inputs.FormItem>
                 )}