From 3efa9a433f7c9fbc52f4ee17e087f0ec76693ea6 Mon Sep 17 00:00:00 2001
From: Kanishk Dudeja <kanishk@kanishkdudeja.com>
Date: Wed, 14 Jan 2026 16:14:55 +0530
Subject: [PATCH] feat(billing): use entitlements for replication access
 (#41891)

* feat(billing): use entitlements for replication access

* fix ts error

* rename variable to make it clearer
---
 .../DestinationPanel/DestinationPanel.tsx            |  8 +++++++-
 .../interfaces/Database/Replication/Destinations.tsx | 12 +++++++-----
 .../Replication/EnableReplicationCallout.tsx         | 10 ++++------
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationPanel.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationPanel.tsx
index 98a3c64b4ed9b..8360c7f3457c4 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationPanel.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationPanel.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react'
 
 import { useReplicationSourcesQuery } from '@/data/replication/sources-query'
+import { useCheckEntitlements } from 'hooks/misc/useCheckEntitlements'
 import { useFlag, useParams } from 'common'
 import {
   cn,
@@ -41,6 +42,7 @@ export const DestinationPanel = ({
 }: DestinationPanelProps) => {
   const { ref: projectRef } = useParams()
   const unifiedReplication = useFlag('unifiedReplication')
+  const { hasAccess: hasETLReplicationAccess } = useCheckEntitlements('replication.etl')
 
   const [selectedType, setSelectedType] = useState<DestinationType>(
     type || (unifiedReplication ? 'Read Replica' : 'BigQuery')
@@ -84,7 +86,11 @@ export const DestinationPanel = ({
               <ReadReplicaForm onClose={onClose} onSuccess={() => onSuccessCreateReadReplica?.()} />
             ) : unifiedReplication && replicationNotEnabled ? (
               <SheetSection>
-                <EnableReplicationCallout className="!p-6" type={selectedType} />
+                <EnableReplicationCallout
+                  className="!p-6"
+                  type={selectedType}
+                  hasAccess={hasETLReplicationAccess}
+                />
               </SheetSection>
             ) : (
               <DestinationForm
diff --git a/apps/studio/components/interfaces/Database/Replication/Destinations.tsx b/apps/studio/components/interfaces/Database/Replication/Destinations.tsx
index e92d0588d6044..52bfda15eb6e5 100644
--- a/apps/studio/components/interfaces/Database/Replication/Destinations.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/Destinations.tsx
@@ -15,7 +15,7 @@ import { replicationKeys } from 'data/replication/keys'
 import { fetchReplicationPipelineVersion } from 'data/replication/pipeline-version-query'
 import { useReplicationPipelinesQuery } from 'data/replication/pipelines-query'
 import { useReplicationSourcesQuery } from 'data/replication/sources-query'
-import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
+import { useCheckEntitlements } from 'hooks/misc/useCheckEntitlements'
 import { DOCS_URL } from 'lib/constants'
 import {
   Button,
@@ -41,7 +41,8 @@ import { ReadReplicaRow } from './ReadReplicas/ReadReplicaRow'
 export const Destinations = () => {
   const queryClient = useQueryClient()
   const { ref: projectRef } = useParams()
-  const { data: organization } = useSelectedOrganizationQuery()
+  const { hasAccess: hasETLReplicationAccess, isLoading: isLoadingEntitlement } =
+    useCheckEntitlements('replication.etl')
 
   const unifiedReplication = useFlag('unifiedReplication')
 
@@ -92,7 +93,7 @@ export const Destinations = () => {
     projectRef,
   })
   const destinations = destinationsData?.destinations ?? []
-  const hasDestinations = isDestinationsSuccess && destinationsData.destinations.length > 0
+  const hasDestinations = isDestinationsSuccess && destinationsData?.destinations.length > 0
   const filteredDestinations =
     filterString.length === 0
       ? destinations ?? []
@@ -110,7 +111,8 @@ export const Destinations = () => {
     projectRef,
   })
 
-  const isLoading = isSourcesLoading || isDestinationsLoading || isDatabasesLoading
+  const isLoading =
+    isSourcesLoading || isDestinationsLoading || isDatabasesLoading || isLoadingEntitlement
   const hasErrorsFetchingData = isSourcesError || isDestinationsError || isDatabasesError
 
   useEffect(() => {
@@ -215,7 +217,7 @@ export const Destinations = () => {
         {isLoading ? (
           <GenericSkeletonLoader />
         ) : !unifiedReplication && replicationNotEnabled ? (
-          <EnableReplicationCallout />
+          <EnableReplicationCallout hasAccess={hasETLReplicationAccess} />
         ) : (unifiedReplication && hasReplicas) || hasDestinations ? (
           <Card>
             <CardContent className="p-0">
diff --git a/apps/studio/components/interfaces/Database/Replication/EnableReplicationCallout.tsx b/apps/studio/components/interfaces/Database/Replication/EnableReplicationCallout.tsx
index eafacb0713970..fdcdb6208d270 100644
--- a/apps/studio/components/interfaces/Database/Replication/EnableReplicationCallout.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/EnableReplicationCallout.tsx
@@ -3,7 +3,6 @@ import { toast } from 'sonner'
 
 import { DocsButton } from '@/components/ui/DocsButton'
 import { UpgradePlanButton } from '@/components/ui/UpgradePlanButton'
-import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
 import { DOCS_URL } from '@/lib/constants'
 import { useParams } from 'common'
 import { useCreateTenantSourceMutation } from 'data/replication/create-tenant-source-mutation'
@@ -85,24 +84,23 @@ const EnableReplicationModal = () => {
 export const EnableReplicationCallout = ({
   type,
   className,
+  hasAccess,
 }: {
   type?: string
   className?: string
+  hasAccess: boolean
 }) => {
-  const { data: organization, isSuccess } = useSelectedOrganizationQuery()
-  const isPaidPlan = isSuccess && organization?.plan.id !== 'free'
-
   return (
     <div className={cn('border rounded-md p-4 md:p-12 flex flex-col gap-y-4', className)}>
       <div className="flex flex-col gap-y-1">
         <h3>Replicate data to external destinations in real-time</h3>
         <p className="text-sm text-foreground-light">
-          {isPaidPlan ? 'Enable replication' : 'Upgrade to the Pro plan'} to start replicating your
+          {hasAccess ? 'Enable replication' : 'Upgrade to the Pro plan'} to start replicating your
           database changes to {type ?? 'data warehouses and analytics platforms'}
         </p>
       </div>
       <div className="flex gap-x-2">
-        {isPaidPlan ? (
+        {hasAccess ? (
           <EnableReplicationModal />
         ) : (
           <UpgradePlanButton source="replication" featureProposition="use replication" />