mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 09:55:06 +03:00
Joshen Lim
f55ff0e6dd
## Context If an organization is exceeded usage and has the grace period banner - the current copy is really long which causes the text to truncate. <img width="1126" height="67" alt="image" src="https://github.com/user-attachments/assets/f8095dc6-540c-47e5-941a-31a4264a6017" /> Banners are meant to be short and to the point, so opting to revise the copy a little. <img width="1392" height="51" alt="image" src="https://github.com/user-attachments/assets/55596369-ee65-48cd-8616-66747e4d2590" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Copy Updates** - Clarified the grace-period message to explain that projects may be restricted from the displayed date if usage remains over quota. - Updated the available actions to include a billing link alongside “Review usage.” <!-- end of auto-generated comment: release notes by coderabbit.ai -->
60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
import dayjs from 'dayjs'
|
|
import { type ReactNode } from 'react'
|
|
import { TimestampInfo } from 'ui-patterns/TimestampInfo'
|
|
|
|
import { InlineLink } from '@/components/ui/InlineLink'
|
|
|
|
export const RESTRICTION_MESSAGES = {
|
|
GRACE_PERIOD: {
|
|
title: 'Organization exceeded its quota in the previous billing cycle',
|
|
description: (date: string, slug: string): ReactNode => {
|
|
const label = dayjs(date).format('DD MMM, YYYY')
|
|
return (
|
|
<>
|
|
Projects will be restricted from{' '}
|
|
<TimestampInfo className="text-sm" utcTimestamp={date} label={label} /> if your
|
|
organization remains over quota.{' '}
|
|
<InlineLink href={`/org/${slug}/usage`}>Review usage</InlineLink> or{' '}
|
|
<InlineLink href={`/org/${slug}/billing`}>billing</InlineLink>.
|
|
</>
|
|
)
|
|
},
|
|
},
|
|
GRACE_PERIOD_OVER: {
|
|
title: 'Grace period is over',
|
|
description: (slug: string): ReactNode => (
|
|
<>
|
|
Your projects will not be able to serve requests when you use up your quota.{' '}
|
|
<InlineLink href={`/org/${slug}/billing`}>Review billing</InlineLink>
|
|
</>
|
|
),
|
|
},
|
|
RESTRICTED: {
|
|
title: 'Services restricted',
|
|
description: (slug: string): ReactNode => (
|
|
<>
|
|
Your projects are unable to serve requests as your organization has used up its quota.{' '}
|
|
<InlineLink href={`/org/${slug}/billing`}>Resolve billing issues</InlineLink>
|
|
</>
|
|
),
|
|
},
|
|
OVERDUE_INVOICES: {
|
|
title: 'Outstanding invoices',
|
|
description: (slug: string): ReactNode => (
|
|
<>
|
|
Please <InlineLink href={`/org/${slug}/billing#invoices`}>pay your invoices</InlineLink> to
|
|
avoid service disruption
|
|
</>
|
|
),
|
|
},
|
|
OVERDUE_INVOICES_FROM_OTHER_ORGS: {
|
|
title: 'Outstanding invoices in other organization',
|
|
description: (slug: string): ReactNode => (
|
|
<>
|
|
Please <InlineLink href={`/org/${slug}/billing#invoices`}>pay invoices</InlineLink> for
|
|
other organizations to avoid service disruption
|
|
</>
|
|
),
|
|
},
|
|
}
|