feat(paywall blocker): improvements for trial end blocker screen

frontend/public/locales/en-GB/workspaceLocked.json

@@ -0,0 +1,22 @@
+{
+	"trialPlanExpired": "Trial Plan Expired",
+	"gotQuestions": "Got Questions?",
+	"contactUs": "Contact Us",
+	"upgradeToContinue": "Upgrade to Continue",
+	"upgradeNow": "Upgrade now to keep enjoying all the great features you’ve been using.",
+	"yourDataIsSafe": "Your data is safe with us until",
+	"actNow": "Act now to avoid any disruptions and continue where you left off.",
+	"contactAdmin": "Contact your admin to proceed with the upgrade.",
+	"continueMyJourney": "Continue My Journey",
+	"needMoreTime": "Need More Time?",
+	"extendTrial": "Extend Trial",
+	"extendTrialMsgPart1": "If you have a specific reason why you were not able to finish your PoC in the trial period, please write to us on",
+	"extendTrialMsgPart2": "with the reason. Sometimes we can extend trial by a few days on a case by case basis",
+	"whyChooseSignoz": "Why choose Signoz",
+	"enterpriseGradeObservability": "Enterprise-grade Observability",
+	"observabilityDescription": "Get access to observability at any scale with advanced security and compliance.",
+	"continueToUpgrade": "Continue to Upgrade",
+	"youAreInGoodCompany": "You are in good company",
+	"faqs": "FAQs",
+	"somethingWentWrong": "Something went wrong"
+}

frontend/public/locales/en/workspaceLocked.json

@@ -0,0 +1,22 @@
+{
+	"trialPlanExpired": "Trial Plan Expired",
+	"gotQuestions": "Got Questions?",
+	"contactUs": "Contact Us",
+	"upgradeToContinue": "Upgrade to Continue",
+	"upgradeNow": "Upgrade now to keep enjoying all the great features you’ve been using.",
+	"yourDataIsSafe": "Your data is safe with us until",
+	"actNow": "Act now to avoid any disruptions and continue where you left off.",
+	"contactAdmin": "Contact your admin to proceed with the upgrade.",
+	"continueMyJourney": "Continue My Journey",
+	"needMoreTime": "Need More Time?",
+	"extendTrial": "Extend Trial",
+	"extendTrialMsgPart1": "If you have a specific reason why you were not able to finish your PoC in the trial period, please write to us on",
+	"extendTrialMsgPart2": "with the reason. Sometimes we can extend trial by a few days on a case by case basis",
+	"whyChooseSignoz": "Why choose Signoz",
+	"enterpriseGradeObservability": "Enterprise-grade Observability",
+	"observabilityDescription": "Get access to observability at any scale with advanced security and compliance.",
+	"continueToUpgrade": "Continue to Upgrade",
+	"youAreInGoodCompany": "You are in good company",
+	"faqs": "FAQs",
+	"somethingWentWrong": "Something went wrong"
+}

frontend/src/container/AppLayout/index.tsx

@@ -214,7 +214,6 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	const pageTitle = t(routeKey);
 	const renderFullScreen =
 		pathname === ROUTES.GET_STARTED ||
-		pathname === ROUTES.WORKSPACE_LOCKED ||
 		pathname === ROUTES.GET_STARTED_APPLICATION_MONITORING ||
 		pathname === ROUTES.GET_STARTED_INFRASTRUCTURE_MONITORING ||
 		pathname === ROUTES.GET_STARTED_LOGS_MANAGEMENT ||
@@ -282,6 +281,14 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 
 	const isSideNavCollapsed = getLocalStorageKey(IS_SIDEBAR_COLLAPSED);
 
+	/**
+	 * Note: Right now we don't have a page-level method to pass the sidebar collapse state.
+	 * Since the use case for overriding is not widely needed, we are setting it here
+	 * so that the workspace locked page will have an expanded sidebar regardless of how users
+	 * have set it or what is stored in localStorage. This will not affect the localStorage config.
+	 */
+	const isWorkspaceLocked = pathname === ROUTES.WORKSPACE_LOCKED;
+
 	return (
 		<Layout
 			className={cx(
@@ -326,7 +333,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 						licenseData={licenseData}
 						isFetching={isFetching}
 						onCollapse={onCollapse}
-						collapsed={collapsed}
+						collapsed={isWorkspaceLocked ? false : collapsed}
 					/>
 				)}
 				<div

frontend/src/pages/WorkspaceLocked/CustomerStoryCard.tsx

@@ -0,0 +1,35 @@
+import './customerStoryCard.styles.scss';
+
+import { Avatar, Card, Space } from 'antd';
+
+interface CustomerStoryCardProps {
+	avatar: string;
+	personName: string;
+	role: string;
+	message: string;
+	link: string;
+}
+
+function CustomerStoryCard({
+	avatar,
+	personName,
+	role,
+	message,
+	link,
+}: CustomerStoryCardProps): JSX.Element {
+	return (
+		<a href={link} target="_blank" rel="noopener noreferrer">
+			<Card className="customer-story-card">
+				<Space size="middle" direction="vertical">
+					<Card.Meta
+						avatar={<Avatar size={48} src={avatar} />}
+						title={personName}
+						description={role}
+					/>
+					{message}
+				</Space>
+			</Card>
+		</a>
+	);
+}
+export default CustomerStoryCard;

frontend/src/pages/WorkspaceLocked/InfoBlocks.tsx

@@ -0,0 +1,30 @@
+import { Col, Row, Space, Typography } from 'antd';
+
+interface InfoItem {
+	title: string;
+	description: string;
+	id: string; // Add a unique identifier
+}
+
+interface InfoBlocksProps {
+	items: InfoItem[];
+}
+
+function InfoBlocks({ items }: InfoBlocksProps): JSX.Element {
+	return (
+		<Space direction="vertical" size="middle">
+			{items.map((item) => (
+				<Row gutter={8} key={item.id}>
+					<Col span={24}>
+						<Typography.Title level={5}>{item.title}</Typography.Title>
+					</Col>
+					<Col span={24}>
+						<Typography>{item.description}</Typography>
+					</Col>
+				</Row>
+			))}
+		</Space>
+	);
+}
+
+export default InfoBlocks;

frontend/src/pages/WorkspaceLocked/WorkspaceLocked.styles.scss

@@ -1,16 +1,161 @@
-.workspace-locked-container {
-	text-align: center;
-	padding: 48px;
-	margin: 24px;
+$light-theme: 'lightMode';
+
+@keyframes gradientFlow {
+	0% {
+		background-position: 0% 50%;
+	}
+	50% {
+		background-position: 100% 50%;
+	}
+	100% {
+		background-position: 0% 50%;
+	}
 }
 
-.workpace-locked-details {
-	width: 50%;
-	margin: 0 auto;
+.workspace-locked {
+	&__modal {
+		.ant-modal-mask {
+			backdrop-filter: blur(2px);
+		}
+	}
+
+	&__tabs {
+		margin-top: 148px;
+
+		.ant-tabs {
+			&-nav {
+				&::before {
+					border-color: var(--bg-slate-500);
+
+					.#{$light-theme} & {
+						border-color: var(--bg-vanilla-300);
+					}
+				}
+			}
+			&-nav-wrap {
+				justify-content: center;
+			}
+		}
+	}
+
+	&__modal {
+		&__header {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			&__actions {
+				display: flex;
+				align-items: center;
+				gap: 16px;
+			}
+		}
+		.ant-modal-content {
+			border-radius: 4px;
+			border: 1px solid var(--bg-slate-400);
+			background: linear-gradient(
+				139deg,
+				rgba(18, 19, 23, 0.8) 0%,
+				rgba(18, 19, 23, 0.9) 98.68%
+			);
+			box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+			backdrop-filter: blur(20px);
+
+			.#{$light-theme} & {
+				border: 1px solid var(--bg-vanilla-300);
+				background: var(--bg-vanilla-100);
+			}
+		}
+
+		.ant-modal-header {
+			background: transparent;
+		}
+
+		.ant-list {
+			&-item {
+				border-color: var(--bg-slate-500);
+
+				.#{$light-theme} & {
+					border-color: var(--bg-vanilla-300);
+				}
+
+				&-meta {
+					align-items: center !important;
+
+					&-title {
+						margin-bottom: 0 !important;
+					}
+
+					&-avatar {
+						display: flex;
+					}
+				}
+			}
+		}
+		&__title {
+			font-weight: 400;
+			color: var(--text-vanilla-400);
+
+			.#{$light-theme} & {
+				color: var(--text-ink-200);
+			}
+		}
+		&__cta {
+			margin-top: 54px;
+		}
+	}
+	&__container {
+		padding-top: 64px;
+	}
+	&__details {
+		width: 80%;
+		margin: 0 auto;
+		color: var(--text-vanilla-400, #c0c1c3);
+		text-align: center;
+		font-size: 16px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 24px; /* 150% */
+
+		.#{$light-theme} & {
+			color: var(--text-ink-200);
+		}
+
+		&__highlight {
+			color: var(--text-vanilla-100, #fff);
+			font-style: normal;
+			font-weight: 700;
+			line-height: 24px;
+
+			.#{$light-theme} & {
+				color: var(--text-ink-100);
+			}
+		}
+	}
+	&__title {
+		background: linear-gradient(
+			99deg,
+			#ead8fd 0%,
+			#7a97fa 33%,
+			#fd5ab2 66%,
+			#ead8fd 100%
+		);
+		background-size: 300% 300%;
+		background-clip: text;
+		-webkit-background-clip: text;
+		-webkit-text-fill-color: transparent;
+		animation: gradientFlow 24s ease infinite;
+		margin-bottom: 18px;
+	}
 }
 
 .contact-us {
 	margin-top: 48px;
+	color: var(--text-vanilla-400);
+
+	.#{$light-theme} & {
+		color: var(--text-ink-200);
+	}
 }
 
 .cta {

frontend/src/pages/WorkspaceLocked/WorkspaceLocked.test.tsx

@@ -20,17 +20,17 @@ describe('WorkspaceLocked', () => {
 		});
 
 		const workspaceLocked = await screen.findByRole('heading', {
-			name: /workspace locked/i,
+			name: /upgrade to continue/i,
 		});
 		expect(workspaceLocked).toBeInTheDocument();
 
 		const gotQuestionText = await screen.findByText(/got question?/i);
 		expect(gotQuestionText).toBeInTheDocument();
 
-		const contactUsLink = await screen.findByRole('link', {
-			name: /contact us/i,
+		const contactUsBtn = await screen.findByRole('button', {
+			name: /Contact Us/i,
 		});
-		expect(contactUsLink).toBeInTheDocument();
+		expect(contactUsBtn).toBeInTheDocument();
 	});
 
 	test('Render for Admin', async () => {
@@ -42,11 +42,11 @@ describe('WorkspaceLocked', () => {
 
 		render(<WorkspaceLocked />);
 		const contactAdminMessage = await screen.queryByText(
-			/please contact your administrator for further help/i,
+			/contact your admin to proceed with the upgrade./i,
 		);
 		expect(contactAdminMessage).not.toBeInTheDocument();
 		const updateCreditCardBtn = await screen.findByRole('button', {
-			name: /update credit card/i,
+			name: /continue my journey/i,
 		});
 		expect(updateCreditCardBtn).toBeInTheDocument();
 	});
@@ -60,12 +60,12 @@ describe('WorkspaceLocked', () => {
 
 		render(<WorkspaceLocked />, {}, 'VIEWER');
 		const updateCreditCardBtn = await screen.queryByRole('button', {
-			name: /update credit card/i,
+			name: /Continue My Journey/i,
 		});
 		expect(updateCreditCardBtn).not.toBeInTheDocument();
 
 		const contactAdminMessage = await screen.findByText(
-			/please contact your administrator for further help/i,
+			/contact your admin to proceed with the upgrade./i,
 		);
 		expect(contactAdminMessage).toBeInTheDocument();
 	});