NewAwsMarketplaceOrgModal.tsx85 lines · main

1	import {
2	Dialog,
3	DialogContent,
4	DialogDescription,
5	DialogFooter,
6	DialogHeader,
7	DialogSection,
8	DialogSectionSeparator,
9	DialogTitle,
10	} from '@ui/components/shadcn/ui/dialog'
11	import { SubmitHandler } from 'react-hook-form'
12	import { toast } from 'sonner'
13	import { Button } from 'ui'
14
15	import NewAwsMarketplaceOrgForm, {
16	CREATE_AWS_MANAGED_ORG_FORM_ID,
17	NewMarketplaceOrgForm,
18	} from './NewAwsMarketplaceOrgForm'
19	import { useAwsManagedOrganizationCreateMutation } from '@/data/organizations/organization-create-mutation'
20
21	interface Props {
22	buyerId: string
23	visible: boolean
24	onSuccess: (newlyCreatedOrgSlug: string) => void
25	onClose: () => void
26	}
27
28	const NewAwsMarketplaceOrgModal = ({ buyerId, visible, onSuccess, onClose }: Props) => {
29	const { mutate: createOrganization, isPending: isCreatingOrganization } =
30	useAwsManagedOrganizationCreateMutation({
31	onSuccess: (org) => {
32	//TODO(thomas): send tracking event?
33	onSuccess(org.slug)
34	},
35	onError: (res) => {
36	toast.error(res.message, {
37	duration: 7_000,
38	})
39	},
40	})
41
42	const onSubmit: SubmitHandler<NewMarketplaceOrgForm> = async (values) => {
43	createOrganization({ ...values, buyerId })
44	}
45
46	return (
47	<Dialog
48	open={visible}
49	onOpenChange={(open) => {
50	if (!open) onClose()
51	}}
52	>
53	<DialogContent
54	onOpenAutoFocus={(event) => event.preventDefault()}
55	size="xlarge"
56	onEscapeKeyDown={(e) => (isCreatingOrganization ? e.preventDefault() : onClose())}
57	onPointerDownOutside={(e) => (isCreatingOrganization ? e.preventDefault() : onClose())}
58	className="p-2"
59	>
60	<DialogHeader>
61	<DialogTitle>Create a new organization</DialogTitle>
62	<DialogDescription>
63	A new organization will be created and linked to your AWS Marketplace subscription
64	</DialogDescription>
65	</DialogHeader>
66	<DialogSectionSeparator />
67	<DialogSection>
68	<NewAwsMarketplaceOrgForm onSubmit={onSubmit}></NewAwsMarketplaceOrgForm>
69	</DialogSection>
70	<DialogFooter>
71	<Button
72	form={CREATE_AWS_MANAGED_ORG_FORM_ID}
73	htmlType="submit"
74	loading={isCreatingOrganization}
75	size="medium"
76	>
77	Create and link organization
78	</Button>
79	</DialogFooter>
80	</DialogContent>
81	</Dialog>
82	)
83	}
84
85	export default NewAwsMarketplaceOrgModal