restriction.constants.tsx57 lines · main
1import dayjs from 'dayjs'
2import { type ReactNode } from 'react'
3import { TimestampInfo } from 'ui-patterns'
4
5import { InlineLink } from '@/components/ui/InlineLink'
6
7export const RESTRICTION_MESSAGES = {
8 GRACE_PERIOD: {
9 title: 'Organization exceeded its quota in the previous billing cycle',
10 description: (date: string, slug: string): ReactNode => {
11 const label = dayjs(date).format('DD MMM, YYYY')
12 return (
13 <>
14 You have a grace period until{' '}
15 <TimestampInfo className="text-sm" utcTimestamp={date} label={label} /> to bring usage
16 back under quota. <InlineLink href={`/org/${slug}/usage`}>Review usage</InlineLink>
17 </>
18 )
19 },
20 },
21 GRACE_PERIOD_OVER: {
22 title: 'Grace period is over',
23 description: (slug: string): ReactNode => (
24 <>
25 Your projects will not be able to serve requests when you use up your quota.{' '}
26 <InlineLink href={`/org/${slug}/billing`}>Review billing</InlineLink>
27 </>
28 ),
29 },
30 RESTRICTED: {
31 title: 'Services restricted',
32 description: (slug: string): ReactNode => (
33 <>
34 Your projects are unable to serve requests as your organization has used up its quota.{' '}
35 <InlineLink href={`/org/${slug}/billing`}>Resolve billing issues</InlineLink>
36 </>
37 ),
38 },
39 OVERDUE_INVOICES: {
40 title: 'Outstanding invoices',
41 description: (slug: string): ReactNode => (
42 <>
43 Please <InlineLink href={`/org/${slug}/billing#invoices`}>pay your invoices</InlineLink> to
44 avoid service disruption
45 </>
46 ),
47 },
48 OVERDUE_INVOICES_FROM_OTHER_ORGS: {
49 title: 'Outstanding invoices in other organization',
50 description: (slug: string): ReactNode => (
51 <>
52 Please <InlineLink href={`/org/${slug}/billing#invoices`}>pay invoices</InlineLink> for
53 other organizations to avoid service disruption
54 </>
55 ),
56 },
57}