InvoicesSection.tsx39 lines · main

1	import { PermissionAction } from '@supabase/shared-types/out/constants'
2
3	import { InvoicesSettings } from './InvoicesSettings'
4	import {
5	ScaffoldSection,
6	ScaffoldSectionContent,
7	ScaffoldSectionDetail,
8	} from '@/components/layouts/Scaffold'
9	import NoPermission from '@/components/ui/NoPermission'
10	import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
11
12	export const InvoicesSection = () => {
13	const { isSuccess: isPermissionsLoaded, can: canReadInvoices } = useAsyncCheckPermissions(
14	PermissionAction.BILLING_READ,
15	'stripe.subscriptions'
16	)
17
18	return (
19	<ScaffoldSection>
20	<ScaffoldSectionDetail>
21	<div className="sticky space-y-2 top-12 pr-6">
22	<p className="text-foreground text-base m-0">Past Invoices</p>
23
24	<p className="prose text-sm">
25	You get an invoice every time you change your plan or when your monthly billing cycle
26	resets.
27	</p>
28	</div>
29	</ScaffoldSectionDetail>
30	<ScaffoldSectionContent>
31	{isPermissionsLoaded && !canReadInvoices ? (
32	<NoPermission resourceText="view this organization's upcoming invoice" />
33	) : (
34	<InvoicesSettings />
35	)}
36	</ScaffoldSectionContent>
37	</ScaffoldSection>
38	)
39	}