Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 | 4x 4x 3x 12x | import { Link } from "react-router";
import {
ActionForm,
Checkbox,
DatePicker,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
Input,
RequiredIndicator,
Select,
SelectContent,
SelectTrigger,
SelectValue,
SpaIdFormattingDesc,
} from "@/components";
import { FAQ_TAB } from "@/consts";
import { formSchemas } from "@/formSchemas";
export const ChipDetailsForm = () => {
const chipSubmissionType = [
"MAGI Eligibility and Methods",
"Non-Financial Eligibility",
"XXI Medicaid Expansion",
"Eligibility Process",
];
return (
<ActionForm
title="CHIP Eligibility SPA Details"
schema={formSchemas["new-chip-details-submission"]}
breadcrumbText="Submit new CHIP Eligibility SPA"
fields={({ control }) => (
<>
<FormField
control={control}
name="id"
render={({ field }) => (
<FormItem>
<div className="flex gap-4">
<FormLabel className="font-semibold" data-testid="spaid-label">
SPA ID <RequiredIndicator />
</FormLabel>
<Link
to="/faq/spa-id-format"
target={FAQ_TAB}
rel="noopener noreferrer"
className="text-blue-900 underline"
>
What is my SPA ID?
</Link>
</div>
<SpaIdFormattingDesc />
<FormControl>
<Input
className="max-w-sm"
ref={field.ref}
value={field.value}
onChange={(e) => field.onChange(e.currentTarget.value.toUpperCase())}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={control}
name="chipSubmissionType"
render={({ field }) => {
const selectedValues = Array.isArray(field.value) ? field.value : [];
return (
<FormItem className="w-full sm:max-w-[460px] relative">
<FormLabel className="font-bold">CHIP Submission Type</FormLabel>
<Select>
<FormControl>
<SelectTrigger
showIcon={false}
className="relative w-full mt-2 h-[40px] px-[4px] gap-[5px] border border-[#565C65] text-gray-950 flex items-center justify-between rounded-none after:hidden"
>
<div className="flex-1 text-left overflow-hidden">
<SelectValue className="truncate w-full whitespace-nowrap overflow-hidden text-ellipsis">
{selectedValues.length > 0 ? selectedValues.join(", ") : ""}
</SelectValue>
</div>
<div className="flex items-center pl-2 pr-3 h-full border-l border-slate-300">
<svg
className="w-6 h-6"
fill="none"
stroke="#565C65"
strokeWidth={3}
viewBox="0 0 24 24"
>
<path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
</svg>
</div>
</SelectTrigger>
</FormControl>
<SelectContent className=" left-0 top-full mt-1 z-50 w-full bg-white border border-gray-200 shadow-md rounded-md">
{chipSubmissionType.map((option) => {
const isSelected = selectedValues.includes(option);
return (
<div
key={option}
className="flex text-left gap-2 px-4 py-2 cursor-pointer hover:bg-gray-100"
onClick={() => {
const updated = isSelected
? selectedValues.filter((val) => val !== option)
: [...selectedValues, option];
field.onChange(updated);
}}
>
<Checkbox checked={isSelected} />
<span>{option}</span>
</div>
);
})}
</SelectContent>
</Select>
</FormItem>
);
}}
/>
<FormField
control={control}
name="proposedEffectiveDate"
render={({ field }) => (
<FormItem className="max-w-sm">
<FormLabel className="text-lg font-semibold whitespace-nowrap block">
Proposed Effective Date of CHIP Eligibility SPA <RequiredIndicator />
</FormLabel>
<FormControl>
<DatePicker
dataTestId="proposedEffectiveDate"
onChange={(date) => field.onChange(date.getTime())}
date={field.value ? new Date(field.value) : undefined}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</>
)}
defaultValues={{ id: "" }}
attachments={{
instructions: [
<p data-testid="chip-attachments-instructions">
Maximum file size of 80 MB per attachment. You can add multiple files per attachment
type. Read the description for each of the attachment types on the{" "}
<Link
to="/faq/chip-spa-attachments"
target={FAQ_TAB}
rel="noopener noreferrer"
className="text-blue-900 underline"
>
FAQ Page
</Link>
.
</p>,
<p data-testid="accepted-files">
We accept the following file formats:{" "}
<span className="font-bold">.doc, .docx, .pdf, .jpg, .odp, and more. </span>{" "}
<Link
to={"/faq/acceptable-file-formats"}
target={FAQ_TAB}
rel="noopener noreferrer"
className="text-blue-900 underline"
>
See the full list
</Link>
.
</p>,
<p data-testid="chip-attachments-instructions">
View all{" "}
<Link
to="/faq/chip-spa-templates"
target={FAQ_TAB}
rel="noopener noreferrer"
className="text-blue-900 underline"
>
CHIP eligibility SPA templates and implementation guides
</Link>
.
</p>,
],
}}
documentPollerArgs={{
property: "id",
documentChecker: (check) => check.recordExists,
}}
promptOnLeavingForm={{
header: "Stop form submission?",
body: "All information you've entered on this form will be lost if you leave this page.",
acceptButtonText: "Yes, leave form",
cancelButtonText: "Return to form",
areButtonsReversed: true,
}}
/>
);
};
|