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:
Thomas
2024-01-10 12:49:49 +01:00
committed by GitHub
parent 64d0d332de
commit bd808b6fb4
3 changed files with 69 additions and 47 deletions

View File

@@ -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_>
)}

View File

@@ -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>
)}

View File

@@ -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>