AffectedServicesSelector.tsx68 lines · main

1	// End of third-party imports
2
3	import { SupportCategories } from '@supabase/shared-types/out/constants'
4	import type { UseFormReturn } from 'react-hook-form'
5	import { FormControl, FormField } from 'ui'
6	import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
7	import {
8	MultiSelector,
9	MultiSelectorContent,
10	MultiSelectorItem,
11	MultiSelectorList,
12	MultiSelectorTrigger,
13	} from 'ui-patterns/multi-select'
14
15	import { SERVICE_OPTIONS, type ExtendedSupportCategories } from './Support.constants'
16	import type { SupportFormValues } from './SupportForm.schema'
17
18	interface AffectedServicesSelectorProps {
19	form: UseFormReturn<SupportFormValues>
20	category: ExtendedSupportCategories
21	}
22
23	export const CATEGORIES_WITHOUT_AFFECTED_SERVICES: ExtendedSupportCategories[] = [
24	SupportCategories.LOGIN_ISSUES,
25	'Plan_upgrade',
26	]
27
28	export function AffectedServicesSelector({ form, category }: AffectedServicesSelectorProps) {
29	if (CATEGORIES_WITHOUT_AFFECTED_SERVICES.includes(category)) return null
30
31	return (
32	<FormField
33	name="affectedServices"
34	control={form.control}
35	render={({ field }) => (
36	<FormItemLayout hideMessage layout="vertical" label="Which services are affected?">
37	<FormControl>
38	<MultiSelector
39	values={field.value.length === 0 ? [] : field.value?.split(', ')}
40	onValuesChange={(services) => field.onChange(services.join(', '))}
41	>
42	<MultiSelectorTrigger
43	mode="inline-combobox"
44	label={field.value.length === 0 ? 'No particular service' : 'Search for a service'}
45	deletableBadge
46	badgeLimit="wrap"
47	showIcon={false}
48	/>
49	<MultiSelectorContent>
50	<MultiSelectorList>
51	{SERVICE_OPTIONS.map((service) => (
52	<MultiSelectorItem
53	key={service.id}
54	value={service.value}
55	disabled={service.disabled}
56	>
57	{service.name}
58	</MultiSelectorItem>
59	))}
60	</MultiSelectorList>
61	</MultiSelectorContent>
62	</MultiSelector>
63	</FormControl>
64	</FormItemLayout>
65	)}
66	/>
67	)
68	}