feat: traffic limits for enterprise-payg (#8596)

frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsage.tsx

@@ -31,6 +31,7 @@ import {
 } from 'hooks/useTrafficData';
 import { customHighlightPlugin } from 'component/common/Chart/customHighlightPlugin';
 import { formatTickValue } from 'component/common/Chart/formatTickValue';
+import { useTrafficLimit } from './hooks/useTrafficLimit';
 
 const StyledBox = styled(Box)(({ theme }) => ({
     display: 'grid',
@@ -136,13 +137,11 @@ const createBarChartOptions = (
     },
 });
 
-const proPlanIncludedRequests = 53_000_000;
-
 export const NetworkTrafficUsage: VFC = () => {
     usePageTitle('Network - Data Usage');
     const theme = useTheme();
 
-    const { isOss, isPro } = useUiConfig();
+    const { isOss } = useUiConfig();
 
     const {
         record,
@@ -157,7 +156,7 @@ export const NetworkTrafficUsage: VFC = () => {
         calculateEstimatedMonthlyCost,
     } = useTrafficDataEstimation();
 
-    const includedTraffic = isPro() ? proPlanIncludedRequests : 0;
+    const includedTraffic = useTrafficLimit();
 
     const options = useMemo(() => {
         return createBarChartOptions(

frontend/src/component/admin/network/NetworkTrafficUsage/hooks/useTrafficLimit.test.ts

@@ -0,0 +1,77 @@
+import { renderHook } from '@testing-library/react';
+import { useTrafficLimit } from './useTrafficLimit';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { useUiFlag } from 'hooks/useUiFlag';
+import { vi, describe, it, expect } from 'vitest';
+
+vi.mock('hooks/api/getters/useUiConfig/useUiConfig');
+vi.mock('hooks/useUiFlag');
+
+describe('useTrafficLimit', () => {
+    it('should return requests limit if user is on pro plan', () => {
+        vi.mocked(useUiConfig).mockReturnValue({
+            isPro: () => true,
+            isEnterprise: () => false,
+            uiConfig: {
+                billing: 'pay-as-you-go',
+            },
+        } as any);
+        vi.mocked(useUiFlag).mockReturnValue(false);
+
+        const { result } = renderHook(() => useTrafficLimit());
+
+        expect(result.current).toBe(53_000_000);
+    });
+
+    it('should return PAYG plan requests limit if enterprise-payg is enabled and billing is pay-as-you-go', () => {
+        vi.mocked(useUiConfig).mockReturnValue({
+            isPro: () => false,
+            isEnterprise: () => true,
+            uiConfig: { billing: 'pay-as-you-go' },
+        } as any);
+        vi.mocked(useUiFlag).mockReturnValue(true);
+
+        const { result } = renderHook(() => useTrafficLimit());
+
+        expect(result.current).toBe(53_000_000);
+    });
+
+    it('should return 0 if user is not on pro plan and pay-as-you-go conditions are not met', () => {
+        vi.mocked(useUiConfig).mockReturnValue({
+            isPro: () => false,
+            isEnterprise: () => false,
+            uiConfig: {},
+        } as any);
+        vi.mocked(useUiFlag).mockReturnValue(false);
+
+        const { result } = renderHook(() => useTrafficLimit());
+
+        expect(result.current).toBe(0);
+    });
+
+    it('should return 0 if user is not on pro plan and flag is disabled', () => {
+        vi.mocked(useUiConfig).mockReturnValue({
+            isPro: () => false,
+            isEnterprise: () => true,
+            uiConfig: { billing: 'pay-as-you-go' },
+        } as any);
+        vi.mocked(useUiFlag).mockReturnValue(false);
+
+        const { result } = renderHook(() => useTrafficLimit());
+
+        expect(result.current).toBe(0);
+    });
+
+    it('should return 0 if enterprise PAYG is enabled but billing is not pay-as-you-go', () => {
+        vi.mocked(useUiConfig).mockReturnValue({
+            isPro: () => false,
+            isEnterprise: () => false,
+            uiConfig: { billing: 'subscription' },
+        } as any);
+        vi.mocked(useUiFlag).mockReturnValue(true);
+
+        const { result } = renderHook(() => useTrafficLimit());
+
+        expect(result.current).toBe(0);
+    });
+});

frontend/src/component/admin/network/NetworkTrafficUsage/hooks/useTrafficLimit.ts

@@ -0,0 +1,24 @@
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { useUiFlag } from 'hooks/useUiFlag';
+
+const proPlanIncludedRequests = 53_000_000;
+const paygPlanIncludedRequests = proPlanIncludedRequests;
+
+export const useTrafficLimit = () => {
+    const { isPro, isEnterprise, uiConfig } = useUiConfig();
+    const isEnterprisePaygEnabled = useUiFlag('enterprise-payg');
+
+    if (isPro()) {
+        return proPlanIncludedRequests;
+    }
+
+    if (
+        isEnterprisePaygEnabled &&
+        isEnterprise() &&
+        uiConfig.billing === 'pay-as-you-go'
+    ) {
+        return paygPlanIncludedRequests;
+    }
+
+    return 0;
+};

frontend/src/interfaces/uiConfig.ts

@@ -92,6 +92,7 @@ export type UiFlags = {
     purchaseAdditionalEnvironments?: boolean;
     unleashAI?: boolean;
     releasePlans?: boolean;
+    'enterprise-payg'?: boolean;
     simplifyProjectOverview?: boolean;
 };
 

src/lib/types/experimental.ts

@@ -60,6 +60,7 @@ export type IFlagKey =
     | 'releasePlans'
     | 'navigationSidebar'
     | 'productivityReportEmail'
+    | 'enterprise-payg'
     | 'simplifyProjectOverview';
 
 export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>;
@@ -297,6 +298,10 @@ const flags: IFlags = {
         process.env.UNLEASH_EXPERIMENTAL_PRODUCTIVITY_REPORT_EMAIL,
         false,
     ),
+    'enterprise-payg': parseEnvVarBoolean(
+        process.env.UNLEASH_EXPERIMENTAL_ENTERPRISE_PAYG,
+        false,
+    ),
     simplifyProjectOverview: parseEnvVarBoolean(
         process.env.UNLEASH_EXPERIMENTAL_SIMPLIFY_PROJECT_OVERVIEW,
         false,