billing.tsx42 lines · main

1	import { useParams } from 'common'
2	import { useEffect } from 'react'
3
4	import { BillingSettings } from '@/components/interfaces/Organization/BillingSettings/BillingSettings'
5	import { DefaultLayout } from '@/components/layouts/DefaultLayout'
6	import OrganizationLayout from '@/components/layouts/OrganizationLayout'
7	import { UnknownInterface } from '@/components/ui/UnknownInterface'
8	import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
9	import {
10	ORG_SETTINGS_PANEL_KEYS,
11	useOrgSettingsPageStateSnapshot,
12	} from '@/state/organization-settings'
13	import type { NextPageWithLayout } from '@/types'
14
15	const OrgBillingSettings: NextPageWithLayout = () => {
16	const { panel, slug } = useParams()
17	const snap = useOrgSettingsPageStateSnapshot()
18
19	const showBilling = useIsFeatureEnabled('billing:all')
20
21	useEffect(() => {
22	const allowedValues = ['subscriptionPlan', 'costControl']
23	if (panel && typeof panel === 'string' && allowedValues.includes(panel)) {
24	snap.setPanelKey(panel as ORG_SETTINGS_PANEL_KEYS)
25	document.getElementById('billing-page-top')?.scrollIntoView({ behavior: 'smooth' })
26	}
27	// eslint-disable-next-line react-hooks/exhaustive-deps
28	}, [panel])
29
30	if (!showBilling) {
31	return <UnknownInterface urlBack={`/org/${slug}`} />
32	}
33
34	return <BillingSettings />
35	}
36
37	OrgBillingSettings.getLayout = (page) => (
38	<DefaultLayout>
39	<OrganizationLayout title="Billing">{page}</OrganizationLayout>
40	</DefaultLayout>
41	)
42	export default OrgBillingSettings