feat(billing-page): added license condition and log event

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 }),

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()}
 			</div>
 
-			{trialInfo?.trialConvertedToSubscription && <CancelSubscriptionBanner />}
+			{isCloudUserVal && activeLicense?.state === LicenseState.ACTIVATED && (
+				<CancelSubscriptionBanner />
+			)}
 
 			{!trialInfo?.trialConvertedToSubscription && (
 				<div className="upgrade-plan-benefits">

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={<X size={12} />}
-					onClick={(): void => setOpen(true)}
+					onClick={handleOpenCancelDialog}
 				>
 					Cancel Subscription
 				</Button>

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',

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',