fix(billing): separate client side and server side envvars for billing (#966)

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/settings-navigation/settings-navigation.tsx

@@ -8,7 +8,7 @@ import {
   UserCircle,
   Users,
 } from 'lucide-react'
-import { isBillingEnabled } from '@/lib/environment'
+import { getEnv } from '@/lib/env'
 import { cn } from '@/lib/utils'
 import { useSubscriptionStore } from '@/stores/subscription/store'
 
@@ -98,6 +98,9 @@ export function SettingsNavigation({
   const { getSubscriptionStatus } = useSubscriptionStore()
   const subscription = getSubscriptionStatus()
 
+  // Get billing status
+  const isBillingEnabled = getEnv('NEXT_PUBLIC_BILLING_ENABLED') || false
+
   const navigationItems = allNavigationItems.filter((item) => {
     if (item.hideWhenBillingDisabled && !isBillingEnabled) {
       return false

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/settings-modal.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useRef, useState } from 'react'
 import { X } from 'lucide-react'
 import { Button, Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui'
-import { isBillingEnabled } from '@/lib/environment'
+import { getEnv } from '@/lib/env'
 import { createLogger } from '@/lib/logs/console/logger'
 import { cn } from '@/lib/utils'
 import {
@@ -44,6 +44,9 @@ export function SettingsModal({ open, onOpenChange }: SettingsModalProps) {
   const { activeOrganization } = useOrganizationStore()
   const hasLoadedInitialData = useRef(false)
 
+  // Get billing status
+  const isBillingEnabled = getEnv('NEXT_PUBLIC_BILLING_ENABLED') || false
+
   useEffect(() => {
     async function loadAllSettings() {
       if (!open) return

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx

@@ -5,7 +5,7 @@ import { HelpCircle, LibraryBig, ScrollText, Search, Settings, Shapes } from 'lu
 import { useParams, usePathname, useRouter } from 'next/navigation'
 import { Button, ScrollArea, Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui'
 import { useSession } from '@/lib/auth-client'
-import { isBillingEnabled } from '@/lib/environment'
+import { getEnv } from '@/lib/env'
 import { createLogger } from '@/lib/logs/console/logger'
 import { generateWorkspaceName } from '@/lib/naming'
 import { cn } from '@/lib/utils'
@@ -195,6 +195,9 @@ export function Sidebar() {
   const userPermissions = useUserPermissionsContext()
   const isLoading = workflowsLoading || sessionLoading
 
+  // Get billing status
+  const isBillingEnabled = getEnv('NEXT_PUBLIC_BILLING_ENABLED') || false
+
   // Add state to prevent multiple simultaneous workflow creations
   const [isCreatingWorkflow, setIsCreatingWorkflow] = useState(false)
   // Add state to prevent multiple simultaneous workspace creations

apps/sim/lib/env.ts

@@ -179,6 +179,9 @@ export const env = createEnv({
 
     // Asset Storage
     NEXT_PUBLIC_BLOB_BASE_URL:            z.string().url().optional(),            // Base URL for Vercel Blob storage (CDN assets)
+    
+    // Billing
+    NEXT_PUBLIC_BILLING_ENABLED:          z.boolean().optional(),                 // Enable billing enforcement and usage tracking (client-side)
 
     // Google Services - For client-side Google integrations
     NEXT_PUBLIC_GOOGLE_CLIENT_ID:         z.string().optional(),                  // Google OAuth client ID for browser auth
@@ -216,6 +219,7 @@ export const env = createEnv({
     NEXT_PUBLIC_VERCEL_URL: process.env.NEXT_PUBLIC_VERCEL_URL,
     NEXT_PUBLIC_SENTRY_DSN: process.env.NEXT_PUBLIC_SENTRY_DSN,
     NEXT_PUBLIC_BLOB_BASE_URL: process.env.NEXT_PUBLIC_BLOB_BASE_URL,
+    NEXT_PUBLIC_BILLING_ENABLED: process.env.NEXT_PUBLIC_BILLING_ENABLED,
     NEXT_PUBLIC_GOOGLE_CLIENT_ID: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID,
     NEXT_PUBLIC_RB2B_KEY: process.env.NEXT_PUBLIC_RB2B_KEY,
     NEXT_PUBLIC_GOOGLE_API_KEY: process.env.NEXT_PUBLIC_GOOGLE_API_KEY,