From 354e4b4b8fd3f0d3dd7d196dbc170ce2ff129125 Mon Sep 17 00:00:00 2001
From: Yunus M <myounis.ar@live.com>
Date: Tue, 20 May 2025 19:40:01 +0530
Subject: [PATCH] feat: show pricing update banner in  home page (#7990)

* feat: show pricing update banner in  home page
---
 frontend/src/constants/localStorage.ts        |  1 +
 frontend/src/container/Home/Home.styles.scss  | 45 +++++++++++++++++++
 frontend/src/container/Home/Home.tsx          | 36 ++++++++++++++-
 .../src/mocks-server/__mockdata__/billing.ts  |  2 +-
 4 files changed, 82 insertions(+), 2 deletions(-)

diff --git a/frontend/src/constants/localStorage.ts b/frontend/src/constants/localStorage.ts
index eccdc175ba..cf9d71a0a1 100644
--- a/frontend/src/constants/localStorage.ts
+++ b/frontend/src/constants/localStorage.ts
@@ -28,5 +28,6 @@ export enum LOCALSTORAGE {
 	DONT_SHOW_SLOW_API_WARNING = 'DONT_SHOW_SLOW_API_WARNING',
 	METRICS_LIST_OPTIONS = 'METRICS_LIST_OPTIONS',
 	SHOW_EXCEPTIONS_QUICK_FILTERS = 'SHOW_EXCEPTIONS_QUICK_FILTERS',
+	BANNER_DISMISSED = 'BANNER_DISMISSED',
 	QUICK_FILTERS_SETTINGS_ANNOUNCEMENT = 'QUICK_FILTERS_SETTINGS_ANNOUNCEMENT',
 }
diff --git a/frontend/src/container/Home/Home.styles.scss b/frontend/src/container/Home/Home.styles.scss
index c86e4a96ea..f27d93137e 100644
--- a/frontend/src/container/Home/Home.styles.scss
+++ b/frontend/src/container/Home/Home.styles.scss
@@ -25,6 +25,51 @@
 		background: var(--bg-slate-500);
 	}
 
+	.home-container-banner {
+		position: relative;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		padding: 8px 12px;
+		width: 100%;
+		background-color: var(--bg-robin-500);
+
+		.home-container-banner-close {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			cursor: pointer;
+			color: var(--bg-vanilla-100);
+
+			position: absolute;
+			right: 12px;
+		}
+
+		.home-container-banner-content {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			gap: 4px;
+			color: var(--bg-vanilla-100);
+			font-family: Inter;
+			font-size: 12px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 20px;
+
+			.home-container-banner-link {
+				color: var(--bg-vanilla-100);
+				font-size: 12px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px;
+				letter-spacing: -0.07px;
+				text-decoration: underline;
+			}
+		}
+	}
+
 	.home-header-left {
 		display: flex;
 		align-items: center;
diff --git a/frontend/src/container/Home/Home.tsx b/frontend/src/container/Home/Home.tsx
index abbe2747f5..58446801a7 100644
--- a/frontend/src/container/Home/Home.tsx
+++ b/frontend/src/container/Home/Home.tsx
@@ -10,6 +10,7 @@ import getAllUserPreferences from 'api/preferences/getAllUserPreference';
 import updateUserPreferenceAPI from 'api/preferences/updateUserPreference';
 import Header from 'components/Header/Header';
 import { DEFAULT_ENTITY_VERSION } from 'constants/app';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import ROUTES from 'constants/routes';
@@ -20,7 +21,7 @@ import { useGetK8sPodsList } from 'hooks/infraMonitoring/useGetK8sPodsList';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import history from 'lib/history';
 import cloneDeep from 'lodash-es/cloneDeep';
-import { CompassIcon, DotIcon, HomeIcon, Plus, Wrench } from 'lucide-react';
+import { CompassIcon, DotIcon, HomeIcon, Plus, Wrench, X } from 'lucide-react';
 import { AnimatePresence } from 'motion/react';
 import * as motion from 'motion/react-client';
 import Card from 'periscope/components/Card/Card';
@@ -61,6 +62,13 @@ export default function Home(): JSX.Element {
 		false,
 	);
 
+	const [isBannerDismissed, setIsBannerDismissed] = useState(false);
+
+	useEffect(() => {
+		const bannerDismissed = localStorage.getItem(LOCALSTORAGE.BANNER_DISMISSED);
+		setIsBannerDismissed(bannerDismissed === 'true');
+	}, []);
+
 	useEffect(() => {
 		const now = new Date();
 		const startTime = new Date(now.getTime() - homeInterval);
@@ -310,9 +318,35 @@ export default function Home(): JSX.Element {
 		logEvent('Homepage: Visited', {});
 	}, []);
 
+	const hideBanner = (): void => {
+		localStorage.setItem(LOCALSTORAGE.BANNER_DISMISSED, 'true');
+		setIsBannerDismissed(true);
+	};
+
 	return (
 		<div className="home-container">
 			<div className="sticky-header">
+				{!isBannerDismissed && (
+					<div className="home-container-banner">
+						<div className="home-container-banner-content">
+							Big news: SigNoz Cloud Teams plan now starting at just $49/Month -
+							<a
+								href="https://signoz.io/blog/cloud-teams-plan-now-at-49usd/"
+								target="_blank"
+								rel="noreferrer"
+								className="home-container-banner-link"
+							>
+								<i>read more</i>
+							</a>
+							🥳🎉
+						</div>
+
+						<div className="home-container-banner-close">
+							<X size={16} onClick={hideBanner} />
+						</div>
+					</div>
+				)}
+
 				<Header
 					leftComponent={
 						<div className="home-header-left">
diff --git a/frontend/src/mocks-server/__mockdata__/billing.ts b/frontend/src/mocks-server/__mockdata__/billing.ts
index 9ee7eec332..a8447767bc 100644
--- a/frontend/src/mocks-server/__mockdata__/billing.ts
+++ b/frontend/src/mocks-server/__mockdata__/billing.ts
@@ -46,7 +46,7 @@ export const billingSuccessResponse = {
 					],
 				},
 			],
-			baseFee: 199,
+			baseFee: 49,
 			billTotal: 1278.3,
 		},
 		discount: 0,