konnosDashboard
NewAwsMarketplaceOrgForm.tsx159 lines · main
1import { zodResolver } from '@hookform/resolvers/zod'
2import { useForm } from 'react-hook-form'
3import {
4 Form,
5 FormControl,
6 FormField,
7 Input,
8 Label,
9 Select,
10 SelectContent,
11 SelectItem,
12 SelectTrigger,
13 SelectValue,
14} from 'ui'
15import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
16import { z } from 'zod'
17
18const ORG_KIND_TYPES = {
19 PERSONAL: 'Personal',
20 EDUCATIONAL: 'Educational',
21 STARTUP: 'Startup',
22 AGENCY: 'Agency',
23 COMPANY: 'Company',
24 UNDISCLOSED: 'N/A',
25}
26
27const ORG_KIND_DEFAULT = 'PERSONAL'
28
29const ORG_SIZE_TYPES = {
30 '1': '1 - 10',
31 '10': '10 - 49',
32 '50': '50 - 99',
33 '100': '100 - 299',
34 '300': 'More than 300',
35}
36
37interface Props {
38 onSubmit: (values: NewMarketplaceOrgForm) => void
39}
40
41export const CREATE_AWS_MANAGED_ORG_FORM_ID = 'create-aws-managed-org-form'
42
43const FormSchema = z.object({
44 name: z.string().trim().min(1, 'Please provide an organization name'),
45 kind: z.string(),
46 size: z.string().optional(),
47})
48
49export type NewMarketplaceOrgForm = z.infer<typeof FormSchema>
50
51const NewAwsMarketplaceOrgForm = ({ onSubmit }: Props) => {
52 const form = useForm<NewMarketplaceOrgForm>({
53 resolver: zodResolver(FormSchema as any),
54 defaultValues: {
55 name: '',
56 kind: ORG_KIND_DEFAULT,
57 },
58 })
59
60 const kind = form.watch('kind')
61
62 return (
63 <Form {...form}>
64 <form id={CREATE_AWS_MANAGED_ORG_FORM_ID} onSubmit={form.handleSubmit(onSubmit)}>
65 <div className="flex flex-col gap-4">
66 <FormField
67 control={form.control}
68 name="name"
69 render={({ field }) => (
70 <FormItemLayout label="Name" layout="horizontal">
71 <FormControl>
72 <>
73 <Input {...field} placeholder="Organization name" />
74 <div className="mt-1">
75 <Label
76 htmlFor="name"
77 className="text-foreground-lighter leading-normal text-sm"
78 >
79 What's the name of your company or team?
80 </Label>
81 </div>
82 </>
83 </FormControl>
84 </FormItemLayout>
85 )}
86 />
87 <FormField
88 control={form.control}
89 name="kind"
90 render={({ field }) => (
91 <FormItemLayout label="Type" layout="horizontal">
92 <FormControl>
93 <>
94 <Select value={field.value} onValueChange={field.onChange}>
95 <SelectTrigger>
96 <SelectValue />
97 </SelectTrigger>
98 <SelectContent>
99 {Object.entries(ORG_KIND_TYPES).map(([k, v]) => (
100 <SelectItem key={k} value={k}>
101 {v}
102 </SelectItem>
103 ))}
104 </SelectContent>
105 </Select>
106 <div className="mt-1">
107 <Label
108 htmlFor="kind"
109 className="text-foreground-lighter leading-normal text-sm"
110 >
111 What would best describe your organization?
112 </Label>
113 </div>
114 </>
115 </FormControl>
116 </FormItemLayout>
117 )}
118 />
119 {kind == 'COMPANY' && (
120 <FormField
121 control={form.control}
122 name="size"
123 render={({ field }) => (
124 <FormItemLayout label="Company size" layout="horizontal">
125 <FormControl>
126 <>
127 <Select value={field.value} onValueChange={field.onChange}>
128 <SelectTrigger>
129 <SelectValue placeholder="How many people are in your company?" />
130 </SelectTrigger>
131 <SelectContent>
132 {Object.entries(ORG_SIZE_TYPES).map(([k, v]) => (
133 <SelectItem key={k} value={k}>
134 {v}
135 </SelectItem>
136 ))}
137 </SelectContent>
138 </Select>
139 <div className="mt-1">
140 <Label
141 htmlFor="size"
142 className="text-foreground-lighter leading-normal text-sm"
143 >
144 How many people are in your company?
145 </Label>
146 </div>
147 </>
148 </FormControl>
149 </FormItemLayout>
150 )}
151 />
152 )}
153 </div>
154 </form>
155 </Form>
156 )
157}
158
159export default NewAwsMarketplaceOrgForm