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 | 72x 1x 32x 1x | import {
ActionForm,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
RequiredIndicator,
SpaIdFormattingDesc,
Input,
DatePicker,
} from "@/components";
import { Link } from "react-router";
import { formSchemas } from "@/formSchemas";
import { FAQ_TAB } from "@/router";
import { getFAQLinkForAttachments } from "../faqLinks";
export const ChipForm = () => (
<ActionForm
title="CHIP SPA Details"
schema={formSchemas["new-chip-submission"]}
breadcrumbText="Submit new CHIP 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="proposedEffectiveDate"
render={({ field }) => (
<FormItem className="max-w-sm">
<FormLabel className="text-lg font-semibold block">
Proposed Effective Date of CHIP 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={{
faqLink: getFAQLinkForAttachments("new-chip-submission"),
}}
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,
}}
/>
);
|