Billing Address
-This will be reflected in every invoice
+This will be reflected in every upcoming invoice, past invoices are not affected
Included usage summary
{isUsageBillingEnabled ? (- Your plan includes a limited amount of usage. If the usage on your project exceeds - these quotas, your subscription will be charged for the overages. It may take up to - 24 hours for usage stats to update. + Your plan includes a limited amount of usage. If the usage on your organization + exceeds these quotas, your subscription will be charged for the overages. It may + take up to 24 hours for usage stats to update.
) : (- Your plan includes a limited amount of usage. If the usage on your project exceeds - these quotas, you may experience restrictions, as you are currently not billed for - overages. It may take up to 24 hours for usage stats to update. + Your plan includes a limited amount of usage. If the usage on your organization + exceeds these quotas, you may experience restrictions, as you are currently not + billed for overages. It may take up to 24 hours for usage stats to update.
)} diff --git a/studio/components/interfaces/Organization/BillingSettingsV2/BillingBreakdown/BillingMetric.tsx b/studio/components/interfaces/Organization/BillingSettingsV2/BillingBreakdown/BillingMetric.tsx index d731d906c68..63ec35debed 100644 --- a/studio/components/interfaces/Organization/BillingSettingsV2/BillingBreakdown/BillingMetric.tsx +++ b/studio/components/interfaces/Organization/BillingSettingsV2/BillingBreakdown/BillingMetric.tsx @@ -35,7 +35,7 @@ const BillingMetric = ({ idx, slug, metric, usage, subscription }: BillingMetric const isExceededLimit = hasLimit && usageRatio >= 1 const usageCurrentLabel = - metric.units === 'bytes' ? `${usageMeta?.usage ?? 0} GB` : usageMeta?.usage?.toLocaleString() + metric.units === 'bytes' ? `${usageMeta?.usage?.toLocaleString() ?? 0} GB` : usageMeta?.usage?.toLocaleString() const usageLimitLabel = metric.units === 'bytes' ? `${usageMeta?.pricing_free_units ?? 0} GB` diff --git a/studio/components/interfaces/Organization/BillingSettingsV2/PaymentMethods/PaymentMethods.tsx b/studio/components/interfaces/Organization/BillingSettingsV2/PaymentMethods/PaymentMethods.tsx index 4076768a5e5..92cba91045c 100644 --- a/studio/components/interfaces/Organization/BillingSettingsV2/PaymentMethods/PaymentMethods.tsx +++ b/studio/components/interfaces/Organization/BillingSettingsV2/PaymentMethods/PaymentMethods.tsx @@ -57,10 +57,9 @@ const PaymentMethods = () => {Payment methods
-- This copy might need to change, when adding a new payment method, either remove the - old one or go to your projects' subscription to explicitly update the payment - method. +
+ After adding a payment method, make sure to mark it as active to use it for billing. + You can remove unused cards.
${price}
)} -{tierMeta?.costUnit}
+{tierMeta?.costUnitOrg}
Tax ID
-- If you would like to include specific tax ID(s) to your invoices. +
+ If you would like to include specific tax ID(s) to your invoices. Old invoices are not + affected.
Make sure the tax ID looks exactly like the placeholder text. diff --git a/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx b/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx index 184eb20c7d2..1593289f144 100644 --- a/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx +++ b/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx @@ -1,7 +1,7 @@ import { useQueryClient } from '@tanstack/react-query' import { useRouter } from 'next/router' import { useState } from 'react' -import { Button, IconEdit2, IconInfo, Input, Listbox } from 'ui' +import { Button, IconEdit2, IconExternalLink, IconInfo, Input, Listbox } from 'ui' import { PaymentElement, useElements, useStripe } from '@stripe/react-stripe-js' import type { PaymentMethod } from '@stripe/stripe-js' @@ -12,6 +12,7 @@ import { useStore } from 'hooks' import { post } from 'lib/common/fetch' import { API_URL, BASE_PATH, PRICING_TIER_LABELS_ORG } from 'lib/constants' import { getURL } from 'lib/helpers' +import Link from 'next/link' const ORG_KIND_TYPES = { PERSONAL: 'Personal', @@ -185,25 +186,6 @@ const NewOrgForm = ({ onPaymentMethodReset }: NewOrgFormProps) => {
- This is heavy Work-In-Progress and not customer facing yet, use with caution! - This organization will use the new org level billing, instead of having - individual subscriptions per project. There are still a lot of open ends that - may be restrictive for you, follow #team-billing for updates. -
-This is your organization within Supabase.
@@ -331,6 +313,33 @@ const NewOrgForm = ({ onPaymentMethodReset }: NewOrgFormProps) => { )}
+ This organization will use the new organization level billing, which gives you a + single subscription for your entire organization, instead of having individual + subscriptions per project.{' '} +
+@@ -207,7 +207,7 @@ const Addons = () => {
{computeInstance?.variant?.meta?.memory_gb ?? 1} GB
@@ -239,7 +239,7 @@ const Addons = () => {
@@ -260,7 +260,7 @@ const Addons = () => {
diff --git a/studio/components/interfaces/Settings/Addons/ComputeInstanceSidePanel.tsx b/studio/components/interfaces/Settings/Addons/ComputeInstanceSidePanel.tsx index 65a04b504c6..1101fbdbf98 100644 --- a/studio/components/interfaces/Settings/Addons/ComputeInstanceSidePanel.tsx +++ b/studio/components/interfaces/Settings/Addons/ComputeInstanceSidePanel.tsx @@ -16,7 +16,9 @@ import { useCheckPermissions, useSelectedOrganization, useStore } from 'hooks' import { BASE_PATH, PROJECT_STATUS } from 'lib/constants' import Telemetry from 'lib/telemetry' import { useSubscriptionPageStateSnapshot } from 'state/subscription-page' -import { Alert, Button, IconExternalLink, Modal, Radio, SidePanel } from 'ui' +import { Alert, Button, IconExternalLink, IconInfo, Modal, Radio, SidePanel } from 'ui' + +import * as Tooltip from '@radix-ui/react-tooltip' const COMPUTE_CATEGORY_OPTIONS: { id: 'micro' | 'optimized' @@ -287,14 +289,47 @@ const ComputeInstanceSidePanel = () => { {option.meta?.cpu_cores ?? 0}-core ARM CPU ( {option.meta?.cpu_dedicated ? 'Dedicated' : 'Shared'})
-- ${option.price.toLocaleString()} -
-- {' '} - / {option.price_interval === 'monthly' ? 'month' : 'hour'} -
++ ${Number(option.price * 672).toFixed(0)} - $ + {Number(option.price * 744).toFixed(0)} per month +
+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
- ) : ( + ) : selectedCategory !== 'micro' && selectedCompute?.price_interval === 'monthly' ? ( + // Monthly payment with project-level subscriptionUpon clicking confirm, the amount of{' '} @@ -328,6 +364,21 @@ const ComputeInstanceSidePanel = () => { is prepaid per month and in case of a downgrade, you get credits for the remaining time.
+ ) : selectedCategory !== 'micro' ? ( + // Hourly usage-billing with org-level subscription ++ 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{' '} + + + Compute Billing + + + . +
+ ) : ( + <> ))} {hasChanges && !blockMicroDowngradeDueToPitr && ( diff --git a/studio/pages/new/[slug].tsx b/studio/pages/new/[slug].tsx index 0fc67a1b2cc..54ec6a2d565 100644 --- a/studio/pages/new/[slug].tsx +++ b/studio/pages/new/[slug].tsx @@ -38,7 +38,18 @@ import { } from 'lib/constants' import { passwordStrength, pluckObjectFields } from 'lib/helpers' import { NextPageWithLayout } from 'types' -import { Alert, Button, IconHelpCircle, IconInfo, IconUsers, Input, Listbox, Toggle } from 'ui' +import { + Alert, + Button, + IconExternalLink, + IconHelpCircle, + IconInfo, + IconUsers, + Input, + Listbox, + Toggle, +} from 'ui' +import Link from 'next/link' const Wizard: NextPageWithLayout = () => { const router = useRouter() @@ -320,24 +331,6 @@ const Wizard: NextPageWithLayout = () => { )} - {billedViaOrg && ( -- This is heavy Work-In-Progress and not customer facing yet, use with - caution! This organization uses the new org level billing, instead of having - individual subscriptions per project. -
-+ This organization uses organization level billing and is on the{' '} + {orgSubscription?.plan?.name} plan. +
+ + {orgSubscription?.plan?.id !== 'free' && ( ++ Your plan comes with $10 of Compute Credits. Launching another project + incurs additional compute costs - if you exhaust your Compute Credits, the + additional compute hours result in additional usage charges. +
+ )} + +