From c1b90491769b43ef4a8554879edcf9fdb87ba745 Mon Sep 17 00:00:00 2001
From: Yunus M <myounis.ar@live.com>
Date: Fri, 19 Jan 2024 11:11:29 +0530
Subject: [PATCH] fix: allow workspace blocked users to extend trial (#4393)

Co-authored-by: Vishal Sharma <makeavish786@gmail.com>
---
 .../Steps/DataSource/DataSource.tsx           | 11 ++--
 .../ModuleStepsContainer.tsx                  |  8 ++-
 .../context/OnboardingContext.tsx             |  6 +-
 .../WorkspaceLocked.styles.scss               | 18 ++++--
 .../pages/WorkspaceLocked/WorkspaceLocked.tsx | 60 ++++++++++++++++---
 5 files changed, 79 insertions(+), 24 deletions(-)

diff --git a/frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.tsx b/frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.tsx
index 3090bf6564..9483576bc2 100644
--- a/frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.tsx
+++ b/frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.tsx
@@ -125,8 +125,9 @@ export default function DataSource(): JSX.Element {
 						)}
 						key={dataSource.name}
 						onClick={(): void => {
-							updateSelectedFramework('');
+							updateSelectedFramework(null);
 							updateSelectedDataSource(dataSource);
+							form.setFieldsValue({ selectFramework: null });
 						}}
 					>
 						<div>
@@ -152,6 +153,7 @@ export default function DataSource(): JSX.Element {
 						<Form
 							initialValues={{
 								serviceName,
+								selectFramework: selectedFramework,
 							}}
 							form={form}
 							onValuesChange={(): void => {
@@ -165,7 +167,6 @@ export default function DataSource(): JSX.Element {
 							validateTrigger="onBlur"
 						>
 							<Form.Item
-								hasFeedback
 								name="serviceName"
 								label="Service Name"
 								rules={[{ required: true, message: 'Please enter service name' }]}
@@ -178,13 +179,11 @@ export default function DataSource(): JSX.Element {
 								<div className="framework-selector">
 									<Form.Item
 										label="Select Framework"
-										name="select-framework"
-										hasFeedback
+										name="selectFramework"
 										rules={[{ required: true, message: 'Please select framework' }]}
-										validateTrigger=""
 									>
 										<Select
-											defaultValue={selectedFramework}
+											value={selectedFramework}
 											getPopupContainer={popupContainer}
 											style={{ minWidth: 120 }}
 											placeholder="Select Framework"
diff --git a/frontend/src/container/OnboardingContainer/common/ModuleStepsContainer/ModuleStepsContainer.tsx b/frontend/src/container/OnboardingContainer/common/ModuleStepsContainer/ModuleStepsContainer.tsx
index 3d3349b76e..efc4916790 100644
--- a/frontend/src/container/OnboardingContainer/common/ModuleStepsContainer/ModuleStepsContainer.tsx
+++ b/frontend/src/container/OnboardingContainer/common/ModuleStepsContainer/ModuleStepsContainer.tsx
@@ -78,6 +78,7 @@ export default function ModuleStepsContainer({
 	const [metaData, setMetaData] = useState<MetaDataProps[]>(defaultMetaData);
 	const lastStepIndex = selectedModuleSteps.length - 1;
 
+	// eslint-disable-next-line sonarjs/cognitive-complexity
 	const isValidForm = (): boolean => {
 		const { id: selectedModuleID } = selectedModule;
 		const dataSourceStep = stepsMap.dataSource;
@@ -106,7 +107,10 @@ export default function ModuleStepsContainer({
 					dataSource: selectedDataSource,
 				});
 
-				if (doesHaveFrameworks && selectedFramework === '') {
+				if (
+					doesHaveFrameworks &&
+					(selectedFramework === null || selectedFramework === '')
+				) {
 					return false;
 				}
 
@@ -177,7 +181,7 @@ export default function ModuleStepsContainer({
 					},
 					{
 						name: 'Framework',
-						value: selectedFramework,
+						value: selectedFramework || '',
 					},
 					{
 						name: 'Environment',
diff --git a/frontend/src/container/OnboardingContainer/context/OnboardingContext.tsx b/frontend/src/container/OnboardingContainer/context/OnboardingContext.tsx
index 0a17a6774f..68d7248bb5 100644
--- a/frontend/src/container/OnboardingContainer/context/OnboardingContext.tsx
+++ b/frontend/src/container/OnboardingContainer/context/OnboardingContext.tsx
@@ -14,7 +14,7 @@ interface OnboardingContextData {
 	ingestionData: any;
 	serviceName: string;
 	selectedEnvironment: string;
-	selectedFramework: string;
+	selectedFramework: string | null;
 	selectedModule: ModuleProps | null;
 	selectedMethod: any;
 	selectedDataSource: DataSourceType | null;
@@ -51,7 +51,9 @@ function OnboardingContextProvider({
 
 	const [errorDetails, setErrorDetails] = useState(null);
 	const [selectedEnvironment, setSelectedEnvironment] = useState<string>('');
-	const [selectedFramework, setSelectedFramework] = useState<string>('');
+	const [selectedFramework, setSelectedFramework] = useState<string | null>(
+		null,
+	);
 
 	const [selectedMethod, setSelectedMethod] = useState(
 		OnboardingMethods.QUICK_START,
diff --git a/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.styles.scss b/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.styles.scss
index 7e5b32ab29..c35284241a 100644
--- a/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.styles.scss
+++ b/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.styles.scss
@@ -9,11 +9,19 @@
 	margin: 0 auto;
 }
 
-.update-credit-card-btn {
-	margin: 24px 0;
-	border-radius: 5px;
-}
-
 .contact-us {
 	margin-top: 48px;
 }
+
+.cta {
+	display: flex;
+	gap: 8px;
+	align-items: center;
+	justify-content: center;
+
+	.update-credit-card-btn,
+	.extend-trial-btn {
+		margin: 24px 0;
+		border-radius: 5px;
+	}
+}
diff --git a/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx b/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx
index 1a19e3d6a5..d9df5265df 100644
--- a/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx
+++ b/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx
@@ -1,12 +1,17 @@
 /* eslint-disable react/no-unescaped-entities */
 import './WorkspaceLocked.styles.scss';
 
-import { CreditCardOutlined, LockOutlined } from '@ant-design/icons';
+import {
+	CreditCardOutlined,
+	LockOutlined,
+	SendOutlined,
+} from '@ant-design/icons';
 import { Button, Card, Skeleton, Typography } from 'antd';
 import updateCreditCardApi from 'api/billing/checkout';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import ROUTES from 'constants/routes';
 import FullViewHeader from 'container/FullViewHeader/FullViewHeader';
+import useAnalytics from 'hooks/analytics/useAnalytics';
 import useLicense from 'hooks/useLicense';
 import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
@@ -22,6 +27,7 @@ export default function WorkspaceBlocked(): JSX.Element {
 	const { role } = useSelector<AppState, AppReducer>((state) => state.app);
 	const isAdmin = role === 'ADMIN';
 	const [activeLicense, setActiveLicense] = useState<License | null>(null);
+	const { trackEvent } = useAnalytics();
 
 	const { notifications } = useNotifications();
 
@@ -68,13 +74,36 @@ export default function WorkspaceBlocked(): JSX.Element {
 	);
 
 	const handleUpdateCreditCard = useCallback(async () => {
+		trackEvent('Workspace Blocked: User Clicked Update Credit Card');
+
 		updateCreditCard({
 			licenseKey: activeLicense?.key || '',
 			successURL: window.location.origin,
 			cancelURL: window.location.origin,
 		});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [activeLicense?.key, updateCreditCard]);
 
+	const handleExtendTrial = (): void => {
+		trackEvent('Workspace Blocked: User Clicked Extend Trial');
+
+		const recipient = 'cloud-support@signoz.io';
+		const subject = 'Extend SigNoz Cloud Trial';
+		const body = `I'd like to request an extension for SigNoz Cloud for my account. Please find my account details below
+		
+		SigNoz URL: 
+		Admin Email:
+		`;
+
+		// Create the mailto link
+		const mailtoLink = `mailto:${recipient}?subject=${encodeURIComponent(
+			subject,
+		)}&body=${encodeURIComponent(body)}`;
+
+		// Open the default email client
+		window.location.href = mailtoLink;
+	};
+
 	return (
 		<>
 			<FullViewHeader overrideRoute={ROUTES.WORKSPACE_LOCKED} />
@@ -95,18 +124,31 @@ export default function WorkspaceBlocked(): JSX.Element {
 							account.
 							{!isAdmin && 'Please contact your administrator for further help'}
 						</Typography.Paragraph>
-						{isAdmin && (
+
+						<div className="cta">
+							{isAdmin && (
+								<Button
+									className="update-credit-card-btn"
+									type="primary"
+									icon={<CreditCardOutlined />}
+									size="middle"
+									loading={isLoading}
+									onClick={handleUpdateCreditCard}
+								>
+									Update Credit Card
+								</Button>
+							)}
+
 							<Button
-								className="update-credit-card-btn"
-								type="primary"
-								icon={<CreditCardOutlined />}
+								className="extend-trial-btn"
+								type="default"
+								icon={<SendOutlined />}
 								size="middle"
-								loading={isLoading}
-								onClick={handleUpdateCreditCard}
+								onClick={handleExtendTrial}
 							>
-								Update Credit Card
+								Extend Trial
 							</Button>
-						)}
+						</div>
 						<div className="contact-us">
 							Got Questions?
 							<span>