ToggleSpendCapButton.tsx44 lines · main

1	import Link from 'next/link'
2	import { PropsWithChildren } from 'react'
3	import { Button } from 'ui'
4
5	import { SupportLink } from '@/components/interfaces/Support/SupportLink'
6	import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
7	import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
8
9	interface ToggleSpendCapButtonProps {
10	action?: 'disable' | 'enable'
11	type?: 'default' | 'primary'
12	}
13
14	export const ToggleSpendCapButton = ({
15	action = 'disable',
16	type = 'default',
17	children,
18	}: PropsWithChildren<ToggleSpendCapButtonProps>) => {
19	const { data: organization } = useSelectedOrganizationQuery()
20	const slug = organization?.slug ?? '_'
21
22	const { billingAll } = useIsFeatureEnabled(['billing:all'])
23
24	const subject = `Enquiry to ${action} spend cap for organization`
25	const message = `Name: ${organization?.name}\nSlug: ${organization?.slug}`
26
27	const href = billingAll ? `/org/${slug}/billing?panel=costControl` : ''
28	const linkChildren = children || `${action} spend cap`
29	const link = billingAll ? (
30	<Link href={href} className="capitalize">
31	{linkChildren}
32	</Link>
33	) : (
34	<SupportLink queryParams={{ orgSlug: slug, category: 'Plan_upgrade', subject, message }}>
35	{linkChildren}
36	</SupportLink>
37	)
38
39	return (
40	<Button type={type} asChild>
41	{link}
42	</Button>
43	)
44	}