chore: Improves add-on upgrade pages (#20263)[GEN-7453]
* Display customized billling-related text based on whether billing is done by Supabase or partner * Add warning to PITR page about cancellation of scheduled subscription change * Remove outdated code for project-based billing
This commit is contained in:
@@ -383,38 +383,22 @@ const ComputeInstanceSidePanel = () => {
|
||||
</p>
|
||||
)}
|
||||
|
||||
{hasChanges &&
|
||||
(selectedCategory !== 'micro' && selectedCompute?.price_interval === 'monthly' ? (
|
||||
// Monthly payment with project-level subscription
|
||||
<p className="text-sm text-foreground-light">
|
||||
Upon clicking confirm, the amount of{' '}
|
||||
<span className="text-foreground">
|
||||
${selectedCompute?.price.toLocaleString()}
|
||||
</span>{' '}
|
||||
will be added to your monthly invoice. Any previous compute addon is prorated and
|
||||
you're immediately charged for the remaining days of your billing cycle. The addon
|
||||
is prepaid per month and in case of a downgrade, you get credits for the remaining
|
||||
time.
|
||||
</p>
|
||||
) : selectedCategory !== 'micro' ? (
|
||||
// Hourly usage-billing with org-based subscription
|
||||
<p className="text-sm text-foreground-light">
|
||||
There are no immediate charges when changing compute. Compute Hours are a
|
||||
usage-based item and you're billed at the end of your billing cycle based on your
|
||||
compute usage. Read more about{' '}
|
||||
<Link
|
||||
href="https://supabase.com/docs/guides/platform/org-based-billing#usage-based-billing-for-compute"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="underline"
|
||||
>
|
||||
Compute Billing
|
||||
</Link>
|
||||
.
|
||||
</p>
|
||||
) : (
|
||||
<></>
|
||||
))}
|
||||
{hasChanges && selectedCategory !== 'micro' && (
|
||||
<p className="text-sm text-foreground-light">
|
||||
There are no immediate charges when changing compute. Compute Hours are a
|
||||
usage-based item and you're billed at the end of your billing cycle based on your
|
||||
compute usage. Read more about{' '}
|
||||
<Link
|
||||
href="https://supabase.com/docs/guides/platform/org-based-billing#usage-based-billing-for-compute"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="underline"
|
||||
>
|
||||
Compute Billing
|
||||
</Link>
|
||||
.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{hasChanges && !blockMicroDowngradeDueToPitr && (
|
||||
<Alert
|
||||
@@ -453,7 +437,7 @@ const ComputeInstanceSidePanel = () => {
|
||||
<IconAlertTriangle className="h-4 w-4" />
|
||||
<AlertDescription_Shadcn_>
|
||||
You have a scheduled subscription change that will be canceled if you change
|
||||
your PITR add on.
|
||||
your Optimized Compute add on.
|
||||
</AlertDescription_Shadcn_>
|
||||
</Alert_Shadcn_>
|
||||
)}
|
||||
|
||||
@@ -244,19 +244,32 @@ const CustomDomainSidePanel = () => {
|
||||
<>
|
||||
{selectedOption === 'cd_none' ||
|
||||
(selectedCustomDomain?.price ?? 0) < (subscriptionCDOption?.variant.price ?? 0) ? (
|
||||
<p className="text-sm text-foreground-light">
|
||||
Upon clicking confirm, the amount of that's unused during the current billing
|
||||
cycle will be returned as credits that can be used for subsequent billing cycles
|
||||
</p>
|
||||
subscription?.billing_via_partner === false && (
|
||||
<p className="text-sm text-foreground-light">
|
||||
Upon clicking confirm, the add-on is removed immediately and any unused time in
|
||||
the current billing cycle is added as prorated credits to your organization and
|
||||
used in subsequent billing cycles.
|
||||
</p>
|
||||
)
|
||||
) : (
|
||||
<p className="text-sm text-foreground-light">
|
||||
Upon clicking confirm, the amount of{' '}
|
||||
<span className="text-foreground">
|
||||
${selectedCustomDomain?.price.toLocaleString()}
|
||||
</span>{' '}
|
||||
will be added to your monthly invoice. You're immediately charged for the
|
||||
remaining days of your billing cycle. The addon is prepaid per month and in case
|
||||
of a downgrade, you get credits for the remaining time.
|
||||
will be added to your monthly invoice.{' '}
|
||||
{subscription?.billing_via_partner ? (
|
||||
<>
|
||||
For the current billing cycle you'll be charged a prorated amount at the end
|
||||
of the cycle.{' '}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
The addon is prepaid per month and in case of a downgrade, you get credits for
|
||||
the remaining time. For the current billing cycle you're immediately charged a
|
||||
prorated amount for the remaining days.
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
|
||||
|
||||
@@ -23,6 +23,7 @@ import {
|
||||
IconExternalLink,
|
||||
Radio,
|
||||
SidePanel,
|
||||
IconAlertTriangle,
|
||||
} from 'ui'
|
||||
import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
|
||||
import { AlertTriangleIcon } from 'lucide-react'
|
||||
@@ -341,19 +342,43 @@ const PITRSidePanel = () => {
|
||||
<>
|
||||
{selectedOption === 'pitr_0' ||
|
||||
(selectedPitr?.price ?? 0) < (subscriptionPitr?.variant.price ?? 0) ? (
|
||||
<p className="text-sm text-foreground-light">
|
||||
Upon clicking confirm, the amount of that's unused during the current billing
|
||||
cycle will be returned as credits that can be used for subsequent billing cycles
|
||||
</p>
|
||||
subscription?.billing_via_partner === false && (
|
||||
<p className="text-sm text-foreground-light">
|
||||
Upon clicking confirm, the add-on is removed immediately and any unused time in
|
||||
the current billing cycle is added as prorated credits to your organization and
|
||||
used in subsequent billing cycles.
|
||||
</p>
|
||||
)
|
||||
) : (
|
||||
<p className="text-sm text-foreground-light">
|
||||
Upon clicking confirm, the amount of{' '}
|
||||
<span className="text-foreground">${selectedPitr?.price.toLocaleString()}</span>{' '}
|
||||
will be added to your monthly invoice. You're immediately charged for the
|
||||
remaining days of your billing cycle. The addon is prepaid per month and in case
|
||||
of a downgrade, you get credits for the remaining time.
|
||||
will be added to your monthly invoice.{' '}
|
||||
{subscription?.billing_via_partner ? (
|
||||
<>
|
||||
For the current billing cycle you'll be charged a prorated amount at the end
|
||||
of the cycle.{' '}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
The addon is prepaid per month and in case of a downgrade, you get credits for
|
||||
the remaining time. For the current billing cycle you're immediately charged a
|
||||
prorated amount for the remaining days.
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{subscription?.billing_via_partner &&
|
||||
subscription.scheduled_plan_change?.target_plan !== undefined && (
|
||||
<Alert_Shadcn_ variant={'warning'} className="mb-2">
|
||||
<IconAlertTriangle className="h-4 w-4" />
|
||||
<AlertDescription_Shadcn_>
|
||||
You have a scheduled subscription change that will be canceled if you change
|
||||
your PITR add on.
|
||||
</AlertDescription_Shadcn_>
|
||||
</Alert_Shadcn_>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user