From bee9813387ae4de930243d519eb0fa8d82bb3ecb Mon Sep 17 00:00:00 2001 From: SagarRajput-7 Date: Tue, 28 Apr 2026 00:37:42 +0530 Subject: [PATCH] feat(billing-page): added license condition and log event --- .../src/AppRoutes/__tests__/Private.test.tsx | 6 +++--- .../BillingContainer/BillingContainer.tsx | 9 ++++++--- .../CancelSubscriptionBanner.tsx | 16 +++++++++++++++- frontend/src/tests/test-utils.tsx | 2 +- frontend/src/types/api/licensesV3/getActive.ts | 2 +- 5 files changed, 26 insertions(+), 9 deletions(-) diff --git a/frontend/src/AppRoutes/__tests__/Private.test.tsx b/frontend/src/AppRoutes/__tests__/Private.test.tsx index 7bbff0cf9d..9e31871be5 100644 --- a/frontend/src/AppRoutes/__tests__/Private.test.tsx +++ b/frontend/src/AppRoutes/__tests__/Private.test.tsx @@ -105,7 +105,7 @@ function createMockLicense( status: '', updated_at: '0', }, - state: LicenseState.ACTIVE, + state: LicenseState.ACTIVATED, status: LicenseStatus.VALID, platform: LicensePlatform.CLOUD, created_at: '0', @@ -931,7 +931,7 @@ describe('PrivateRoute', () => { isFetchingActiveLicense: false, activeLicense: createMockLicense({ platform: LicensePlatform.CLOUD, - state: LicenseState.ACTIVE, + state: LicenseState.ACTIVATED, }), }, isCloudUser: true, @@ -1522,7 +1522,7 @@ describe('PrivateRoute', () => { isFetchingActiveLicense: false, activeLicense: createMockLicense({ platform: LicensePlatform.CLOUD, - state: LicenseState.ACTIVE, + state: LicenseState.ACTIVATED, }), trialInfo: createMockTrialInfo({ workSpaceBlock: false }), user: createMockUser({ role: USER_ROLES.ADMIN as ROLES }), diff --git a/frontend/src/container/BillingContainer/BillingContainer.tsx b/frontend/src/container/BillingContainer/BillingContainer.tsx index acbc767d2a..598655027a 100644 --- a/frontend/src/container/BillingContainer/BillingContainer.tsx +++ b/frontend/src/container/BillingContainer/BillingContainer.tsx @@ -39,6 +39,7 @@ import { BillingUsageGraph } from './BillingUsageGraph/BillingUsageGraph'; import { prepareCsvData } from './BillingUsageGraph/utils'; import './BillingContainer.styles.scss'; +import { LicenseState } from 'types/api/licensesV3/getActive'; interface DataType { key: string; @@ -318,7 +319,7 @@ export default function BillingContainer(): JSX.Element { const handleBilling = useCallback(async () => { if (!trialInfo?.trialConvertedToSubscription) { - logEvent('Billing : Upgrade Plan', { + void logEvent('Billing : Upgrade Plan', { user: pick(user, ['email', 'userId', 'name']), org, }); @@ -327,7 +328,7 @@ export default function BillingContainer(): JSX.Element { url: getBaseUrl(), }); } else { - logEvent('Billing : Manage Billing', { + void logEvent('Billing : Manage Billing', { user: pick(user, ['email', 'userId', 'name']), org, }); @@ -536,7 +537,9 @@ export default function BillingContainer(): JSX.Element { {(isLoading || isFetchingBillingData) && renderTableSkeleton()} - {trialInfo?.trialConvertedToSubscription && } + {isCloudUserVal && activeLicense?.state === LicenseState.ACTIVATED && ( + + )} {!trialInfo?.trialConvertedToSubscription && (
diff --git a/frontend/src/container/BillingContainer/CancelSubscriptionBanner.tsx b/frontend/src/container/BillingContainer/CancelSubscriptionBanner.tsx index a121cd0d3e..b277fd1409 100644 --- a/frontend/src/container/BillingContainer/CancelSubscriptionBanner.tsx +++ b/frontend/src/container/BillingContainer/CancelSubscriptionBanner.tsx @@ -1,6 +1,8 @@ import { useState } from 'react'; import { X } from '@signozhq/icons'; import { Button, DialogWrapper } from '@signozhq/ui'; +import logEvent from 'api/common/logEvent'; +import { pick } from 'lodash-es'; import { useAppContext } from 'providers/App/App'; import { getBaseUrl } from 'utils/basePath'; @@ -10,7 +12,19 @@ function CancelSubscriptionBanner(): JSX.Element { const [open, setOpen] = useState(false); const { user, org } = useAppContext(); + const handleOpenCancelDialog = (): void => { + void logEvent('Billing : Cancel Subscription Clicked', { + user: pick(user, ['email', 'displayName', 'role', 'organization']), + role: user?.role, + }); + setOpen(true); + }; + const handleContactSupport = (): void => { + void logEvent('Billing : Cancel Subscription Confirmed', { + user: pick(user, ['email', 'displayName', 'role', 'organization']), + role: user?.role, + }); const subject = encodeURIComponent('Cancel My SigNoz Subscription'); const orgName = org?.[0]?.displayName ?? ''; const body = encodeURIComponent( @@ -67,7 +81,7 @@ function CancelSubscriptionBanner(): JSX.Element { variant="solid" color="destructive" prefix={} - onClick={(): void => setOpen(true)} + onClick={handleOpenCancelDialog} > Cancel Subscription diff --git a/frontend/src/tests/test-utils.tsx b/frontend/src/tests/test-utils.tsx index b030b18e2a..e26096a2a9 100644 --- a/frontend/src/tests/test-utils.tsx +++ b/frontend/src/tests/test-utils.tsx @@ -119,7 +119,7 @@ export function getAppContextMock( status: '', updated_at: '0', }, - state: LicenseState.ACTIVE, + state: LicenseState.ACTIVATED, status: LicenseStatus.VALID, platform: LicensePlatform.CLOUD, created_at: '0', diff --git a/frontend/src/types/api/licensesV3/getActive.ts b/frontend/src/types/api/licensesV3/getActive.ts index 654a70a857..cc12feb15b 100644 --- a/frontend/src/types/api/licensesV3/getActive.ts +++ b/frontend/src/types/api/licensesV3/getActive.ts @@ -11,7 +11,7 @@ export enum LicenseStatus { export enum LicenseState { DEFAULTED = 'DEFAULTED', - ACTIVE = 'ACTIVE', + ACTIVATED = 'ACTIVATED', EXPIRED = 'EXPIRED', ISSUED = 'ISSUED', EVALUATING = 'EVALUATING',