From 07d75d4e799f1df21a6c8debdaea75ebddd977a5 Mon Sep 17 00:00:00 2001 From: Ignacio Dobronich Date: Fri, 24 Apr 2026 16:58:23 -0300 Subject: [PATCH] feat: add TaxDisclaimer for addons (#45235) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary Adds a reusable `TaxDisclaimer` component ("Prices shown do not include applicable taxes.") and places it on surfaces where users see a price before confirming a billable action. ## Where it appears - **Disk resize review dialog** — `DiskManagementReviewAndSubmitDialog` (below the before/after price comparison) - **Add-on side panels** — PITR, Custom Domain, IPv4 (below the price options) - **Log drain destination form** — stacked under "See full pricing breakdown here" in the footer - **SMS MFA confirmation modal** — below the $75/$10 billing copy - **Read replica pricing dialog** — at the end of the cost breakdown - **Create branch modal** — below the disk/compute cost estimates ## Test plan - [ ]  Open disk/compute resize review dialog — disclaimer appears below the before/after panel - [ ]  Open each add-on side panel (PITR / Custom Domain / IPv4) — disclaimer appears below the price options - [ ]  Open log drain destination sheet — disclaimer stacks under the pricing breakdown link in the footer - [ ]  Trigger SMS MFA confirmation — disclaimer appears below the billing copy - [ ]  Open read replica pricing dialog ("Learn more" from deploy replica) — disclaimer at the bottom - [ ]  Open create branch modal — disclaimer appears after the compute cost block ## Summary by CodeRabbit * **New Features** * Added tax disclaimers across multiple billing and pricing interfaces throughout the platform. Users will now see notices regarding applicable taxes displayed in various authentication settings, branch creation workflows, database disk management dialogs, database replica pricing screens, log drain configuration panels, custom domain settings, IPv4 address configuration, and Point-in-Time Recovery options. --- .../MfaAuthSettingsForm.tsx | 2 ++ .../interfaces/Billing/TaxDisclaimer.tsx | 13 ++++++++++ .../BranchManagement/CreateBranchModal.tsx | 2 ++ .../ReadReplicaPricingDialog.tsx | 2 ++ .../DiskManagementReviewAndSubmitDialog.tsx | 2 ++ .../LogDrainDestinationSheetForm.tsx | 24 +++++++++++-------- .../Settings/Addons/CustomDomainSidePanel.tsx | 2 ++ .../Settings/Addons/IPv4SidePanel.tsx | 2 ++ .../Settings/Addons/PITRSidePanel.tsx | 2 ++ 9 files changed, 41 insertions(+), 10 deletions(-) create mode 100644 apps/studio/components/interfaces/Billing/TaxDisclaimer.tsx diff --git a/apps/studio/components/interfaces/Auth/MfaAuthSettingsForm/MfaAuthSettingsForm.tsx b/apps/studio/components/interfaces/Auth/MfaAuthSettingsForm/MfaAuthSettingsForm.tsx index 6c94c0c953d..4bcd42784f5 100644 --- a/apps/studio/components/interfaces/Auth/MfaAuthSettingsForm/MfaAuthSettingsForm.tsx +++ b/apps/studio/components/interfaces/Auth/MfaAuthSettingsForm/MfaAuthSettingsForm.tsx @@ -39,6 +39,7 @@ import { } from 'ui-patterns/PageSection' import * as z from 'zod' +import { TaxDisclaimer } from '@/components/interfaces/Billing/TaxDisclaimer' import AlertError from '@/components/ui/AlertError' import NoPermission from '@/components/ui/NoPermission' import { UpgradeToPro } from '@/components/ui/UpgradeToPro' @@ -610,6 +611,7 @@ export const MfaAuthSettingsForm = () => { Billing will start immediately upon enabling this add-on, regardless of whether your customers are using SMS MFA.

+ diff --git a/apps/studio/components/interfaces/Billing/TaxDisclaimer.tsx b/apps/studio/components/interfaces/Billing/TaxDisclaimer.tsx new file mode 100644 index 00000000000..4f436f2ff88 --- /dev/null +++ b/apps/studio/components/interfaces/Billing/TaxDisclaimer.tsx @@ -0,0 +1,13 @@ +import { cn } from 'ui' + +interface TaxDisclaimerProps { + className?: string +} + +export const TaxDisclaimer = ({ className }: TaxDisclaimerProps) => { + return ( +

+ Prices shown do not include applicable taxes. +

+ ) +} diff --git a/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx b/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx index 53c987fa0ce..c909450e4eb 100644 --- a/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx +++ b/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx @@ -40,6 +40,7 @@ import { estimateDiskCost, estimateRestoreTime, } from './BranchManagement.utils' +import { TaxDisclaimer } from '@/components/interfaces/Billing/TaxDisclaimer' import { BranchingPITRNotice } from '@/components/layouts/AppLayout/EnableBranchingButton/BranchingPITRNotice' import AlertError from '@/components/ui/AlertError' import { ButtonTooltip } from '@/components/ui/ButtonTooltip' @@ -605,6 +606,7 @@ export const CreateBranchModal = () => { {!hasPitrEnabled && } + diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/ReadReplicaPricingDialog.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/ReadReplicaPricingDialog.tsx index 5523a42c996..4b47819f797 100644 --- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/ReadReplicaPricingDialog.tsx +++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/ReadReplicaPricingDialog.tsx @@ -17,6 +17,7 @@ import { } from 'ui' import { useGetReplicaCost } from './useGetReplicaCost' +import { TaxDisclaimer } from '@/components/interfaces/Billing/TaxDisclaimer' import { DocsButton } from '@/components/ui/DocsButton' import { InlineLinkClassName } from '@/components/ui/InlineLink' import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject' @@ -104,6 +105,7 @@ export const ReadReplicaPricingDialog = () => { .

)} + diff --git a/apps/studio/components/interfaces/DiskManagement/DiskManagementReviewAndSubmitDialog/DiskManagementReviewAndSubmitDialog.tsx b/apps/studio/components/interfaces/DiskManagement/DiskManagementReviewAndSubmitDialog/DiskManagementReviewAndSubmitDialog.tsx index dadd76bfd5a..ee4b35c1493 100644 --- a/apps/studio/components/interfaces/DiskManagement/DiskManagementReviewAndSubmitDialog/DiskManagementReviewAndSubmitDialog.tsx +++ b/apps/studio/components/interfaces/DiskManagement/DiskManagementReviewAndSubmitDialog/DiskManagementReviewAndSubmitDialog.tsx @@ -27,6 +27,7 @@ import { ValueChange, } from './DiskManagementReviewAndSubmitDialog.components' import { useDiskManagementReviewChanges } from './DiskManagementReviewAndSubmitDialog.hooks' +import { TaxDisclaimer } from '@/components/interfaces/Billing/TaxDisclaimer' import { ButtonTooltip } from '@/components/ui/ButtonTooltip' import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions' import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject' @@ -154,6 +155,7 @@ export const DiskManagementReviewAndSubmitDialog = ({ + )} diff --git a/apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx b/apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx index 0d57c917f6f..b28dec28fa8 100644 --- a/apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx +++ b/apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx @@ -50,6 +50,7 @@ import { logDrainHeaderEntriesSchema, type LogDrainHeaderRow, } from './LogDrains.utils' +import { TaxDisclaimer } from '@/components/interfaces/Billing/TaxDisclaimer' import { LogDrainData, useLogDrainsQuery } from '@/data/log-drains/log-drains-query' import { DOCS_URL } from '@/lib/constants' import { useTrack } from '@/lib/telemetry/track' @@ -859,16 +860,19 @@ export function LogDrainDestinationSheetForm({ - - See full pricing breakdown{' '} - - here - - +
+ + See full pricing breakdown{' '} + + here + + + +
diff --git a/apps/studio/components/interfaces/Settings/Addons/CustomDomainSidePanel.tsx b/apps/studio/components/interfaces/Settings/Addons/CustomDomainSidePanel.tsx index 696e40af7fe..e409e26a636 100644 --- a/apps/studio/components/interfaces/Settings/Addons/CustomDomainSidePanel.tsx +++ b/apps/studio/components/interfaces/Settings/Addons/CustomDomainSidePanel.tsx @@ -14,6 +14,7 @@ import { SidePanel, } from 'ui' +import { TaxDisclaimer } from '@/components/interfaces/Billing/TaxDisclaimer' import { DocsButton } from '@/components/ui/DocsButton' import { UpgradeToPro } from '@/components/ui/UpgradeToPro' import { useProjectAddonRemoveMutation } from '@/data/subscriptions/project-addon-remove-mutation' @@ -206,6 +207,7 @@ const CustomDomainSidePanel = () => { /> ))} + {hasChanges && selectedOption !== 'cd_none' && ( diff --git a/apps/studio/components/interfaces/Settings/Addons/IPv4SidePanel.tsx b/apps/studio/components/interfaces/Settings/Addons/IPv4SidePanel.tsx index 3bbff8cb2db..431f5aed705 100644 --- a/apps/studio/components/interfaces/Settings/Addons/IPv4SidePanel.tsx +++ b/apps/studio/components/interfaces/Settings/Addons/IPv4SidePanel.tsx @@ -5,6 +5,7 @@ import { toast } from 'sonner' import { cn, RadioGroup_Shadcn_, RadioGroupLargeItem_Shadcn_, SidePanel } from 'ui' import { Admonition } from 'ui-patterns' +import { TaxDisclaimer } from '@/components/interfaces/Billing/TaxDisclaimer' import { DocsButton } from '@/components/ui/DocsButton' import { InlineLink } from '@/components/ui/InlineLink' import { UpgradeToPro } from '@/components/ui/UpgradeToPro' @@ -198,6 +199,7 @@ const IPv4SidePanel = () => { ))} + )} diff --git a/apps/studio/components/interfaces/Settings/Addons/PITRSidePanel.tsx b/apps/studio/components/interfaces/Settings/Addons/PITRSidePanel.tsx index ab24e498e23..2fe34c44d55 100644 --- a/apps/studio/components/interfaces/Settings/Addons/PITRSidePanel.tsx +++ b/apps/studio/components/interfaces/Settings/Addons/PITRSidePanel.tsx @@ -16,6 +16,7 @@ import { } from 'ui' import { subscriptionHasHipaaAddon } from '@/components/interfaces/Billing/Subscription/Subscription.utils' +import { TaxDisclaimer } from '@/components/interfaces/Billing/TaxDisclaimer' import { SupportLink } from '@/components/interfaces/Support/SupportLink' import { DocsButton } from '@/components/ui/DocsButton' import { UpgradeToPro } from '@/components/ui/UpgradeToPro' @@ -318,6 +319,7 @@ const PITRSidePanel = () => { /> ))} + )}