MessageField.tsx54 lines · main

1	import type { UseFormReturn } from 'react-hook-form'
2	// End of third-party imports
3
4	import { FormControl, FormField, TextArea } from 'ui'
5	import { Admonition } from 'ui-patterns/admonition'
6	import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
7
8	import { IPV4SuggestionAlert } from './IPV4SuggestionAlert'
9	import { IPV4_MIGRATION_STRINGS } from './Support.constants'
10	import type { SupportFormValues } from './SupportForm.schema'
11
12	interface MessageFieldProps {
13	form: UseFormReturn<SupportFormValues>
14	originalError: string | null | undefined
15	}
16
17	export function MessageField({ form, originalError }: MessageFieldProps) {
18	return (
19	<FormField
20	name="message"
21	control={form.control}
22	render={({ field }) => (
23	<FormItemLayout
24	layout="vertical"
25	label="Message"
26	labelOptional="5000 character limit"
27	description={
28	IPV4_MIGRATION_STRINGS.some((str) => field.value.includes(str)) && (
29	<IPV4SuggestionAlert />
30	)
31	}
32	>
33	<FormControl>
34	<TextArea
35	{...field}
36	rows={4}
37	maxLength={5000}
38	placeholder="Describe the issue you’re facing, along with any relevant information. Please be as detailed and specific as possible."
39	/>
40	</FormControl>
41	{originalError && (
42	<Admonition
43	showIcon={false}
44	type="default"
45	className="mt-2 max-h-[150px] overflow-y-auto"
46	title="The error that you ran into will be included in your message for reference"
47	description={`Error: ${originalError}`}
48	/>
49	)}
50	</FormItemLayout>
51	)}
52	/>
53	)
54	}