feat(billing-page): semantic token correction

frontend/src/container/BillingContainer/BillingContainer.tsx

@@ -34,6 +34,7 @@ import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import { getBaseUrl } from 'utils/basePath';
 import { getFormattedDate, getRemainingDays } from 'utils/timeUtils';
 
+import CancelSubscriptionBanner from './CancelSubscriptionBanner';
 import { BillingUsageGraph } from './BillingUsageGraph/BillingUsageGraph';
 import { prepareCsvData } from './BillingUsageGraph/utils';
 
@@ -535,6 +536,8 @@ export default function BillingContainer(): JSX.Element {
 				{(isLoading || isFetchingBillingData) && renderTableSkeleton()}
 			</div>
 
+			{trialInfo?.trialConvertedToSubscription && <CancelSubscriptionBanner />}
+
 			{!trialInfo?.trialConvertedToSubscription && (
 				<div className="upgrade-plan-benefits">
 					<Row

frontend/src/container/BillingContainer/CancelSubscriptionBanner.styles.scss

@@ -0,0 +1,35 @@
+.cancel-subscription-banner {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: var(--padding-4);
+	border-radius: 4px;
+	border: 1px solid var(--callout-error-border);
+	background-color: var(--callout-error-background);
+	margin: var(--spacing-4) 0 var(--spacing-12);
+
+	&__info {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-2);
+	}
+
+	&__title {
+		font-size: var(--font-size-sm);
+		font-weight: var(--font-weight-medium);
+		color: var(--callout-error-title);
+	}
+
+	&__subtitle {
+		font-size: var(--paragraph-base-400-font-size);
+		font-weight: var(--paragraph-base-400-font-weight);
+		line-height: var(--paragraph-base-400-line-height);
+		color: var(--callout-error-icon);
+	}
+}
+
+.cancel-subscription-dialog__body {
+	font-size: var(--font-size-sm);
+	line-height: var(--line-height-relaxed);
+	color: var(--l2-foreground);
+}

frontend/src/container/BillingContainer/CancelSubscriptionBanner.tsx

@@ -0,0 +1,96 @@
+import { useState } from 'react';
+import { X } from '@signozhq/icons';
+import { Button, DialogWrapper } from '@signozhq/ui';
+import { useAppContext } from 'providers/App/App';
+import { getBaseUrl } from 'utils/basePath';
+
+import './CancelSubscriptionBanner.styles.scss';
+
+function CancelSubscriptionBanner(): JSX.Element {
+	const [open, setOpen] = useState(false);
+	const { user, org } = useAppContext();
+
+	const handleContactSupport = (): void => {
+		const subject = encodeURIComponent('Cancel My SigNoz Subscription');
+		const orgName = org?.[0]?.displayName ?? '';
+		const body = encodeURIComponent(
+			[
+				'Hi SigNoz Team,',
+				'',
+				'I would like to cancel my SigNoz Cloud subscription.',
+				'Please find my account details below.',
+				'',
+				'Account Details:',
+				`  • SigNoz URL:      ${getBaseUrl()}`,
+				...(orgName ? [`  • Organization:   ${orgName}`] : []),
+				`  • Account Email:  ${user?.email ?? ''}`,
+				'',
+				'Reason for Cancellation:',
+				'[Please share the reason for cancellation]',
+				'',
+				'Additional feedback (optional):',
+				'[Any other feedback]',
+				'',
+				'Regards,',
+				'[user name or team name]',
+			].join('\n'),
+		);
+		const link = document.createElement('a');
+		link.href = `mailto:cloud-support@signoz.io?subject=${subject}&body=${body}`;
+		link.click();
+		setOpen(false);
+	};
+
+	const footer = (
+		<>
+			<Button
+				variant="solid"
+				color="secondary"
+				onClick={(): void => setOpen(false)}
+			>
+				Keep Subscription
+			</Button>
+			<Button variant="solid" color="destructive" onClick={handleContactSupport}>
+				Contact Support
+			</Button>
+		</>
+	);
+
+	return (
+		<>
+			<div className="cancel-subscription-banner">
+				<div className="cancel-subscription-banner__info">
+					<span className="cancel-subscription-banner__title">
+						Cancel Subscription
+					</span>
+					<span className="cancel-subscription-banner__subtitle">
+						Cancel your SigNoz subscription.
+					</span>
+				</div>
+				<Button
+					variant="solid"
+					color="destructive"
+					prefix={<X size={12} />}
+					onClick={(): void => setOpen(true)}
+				>
+					Cancel Subscription
+				</Button>
+			</div>
+			<DialogWrapper
+				open={open}
+				onOpenChange={setOpen}
+				title="Cancel your subscription"
+				width="narrow"
+				showCloseButton
+				footer={footer}
+			>
+				<p className="cancel-subscription-dialog__body">
+					To cancel your SigNoz subscription, please reach out to our support team.
+					We&apos;ll be happy to assist you.
+				</p>
+			</DialogWrapper>
+		</>
+	);
+}
+
+export default CancelSubscriptionBanner;