chore(deps): bump uplot from 1.6.26 to 1.6.31 in /frontend

Bumps [uplot](https://github.com/leeoniya/uPlot) from 1.6.26 to 1.6.31.
- [Release notes](https://github.com/leeoniya/uPlot/releases)
- [Commits](https://github.com/leeoniya/uPlot/compare/1.6.26...1.6.31)

---
updated-dependencies:
- dependency-name: uplot
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>

frontend/package.json

@@ -123,7 +123,7 @@
 		"ts-node": "^10.2.1",
 		"tsconfig-paths-webpack-plugin": "^3.5.1",
 		"typescript": "^4.0.5",
-		"uplot": "1.6.26",
+		"uplot": "1.6.31",
 		"uuid": "^8.3.2",
 		"web-vitals": "^0.2.4",
 		"webpack": "5.88.2",

frontend/public/locales/en/titles.json

@@ -4,6 +4,7 @@
 	"SERVICE_METRICS": "SigNoz | Service Metrics",
 	"SERVICE_MAP": "SigNoz | Service Map",
 	"GET_STARTED": "SigNoz | Get Started",
+	"ONBOARDING": "SigNoz | Get Started",
 	"GET_STARTED_APPLICATION_MONITORING": "SigNoz | Get Started | APM",
 	"GET_STARTED_LOGS_MANAGEMENT": "SigNoz | Get Started | Logs",
 	"GET_STARTED_INFRASTRUCTURE_MONITORING": "SigNoz | Get Started | Infrastructure",

frontend/src/AppRoutes/Private.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import getLocalStorageApi from 'api/browser/localstorage/get';
+import getOrgUser from 'api/user/getOrgUser';
 import loginApi from 'api/user/login';
 import { Logout } from 'api/utils';
 import Spinner from 'components/Spinner';
@@ -8,8 +9,10 @@ import ROUTES from 'constants/routes';
 import useLicense from 'hooks/useLicense';
 import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
-import { ReactChild, useEffect, useMemo } from 'react';
+import { isEmpty } from 'lodash-es';
+import { ReactChild, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useQuery } from 'react-query';
 import { useDispatch, useSelector } from 'react-redux';
 import { matchPath, Redirect, useLocation } from 'react-router-dom';
 import { Dispatch } from 'redux';
@@ -17,6 +20,7 @@ import { AppState } from 'store/reducers';
 import { getInitialUserTokenRefreshToken } from 'store/utils';
 import AppActions from 'types/actions';
 import { UPDATE_USER_IS_FETCH } from 'types/actions/app';
+import { Organization } from 'types/api/user/getOrganization';
 import AppReducer from 'types/reducer/app';
 import { routePermission } from 'utils/permission';
 
@@ -31,6 +35,14 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 	const location = useLocation();
 	const { pathname } = location;
 
+	const { org, orgPreferences } = useSelector<AppState, AppReducer>(
+		(state) => state.app,
+	);
+
+	const [isOnboardingComplete, setIsOnboardingComplete] = useState<
+		boolean | null
+	>(null);
+
 	const mapRoutes = useMemo(
 		() =>
 			new Map(
@@ -44,6 +56,18 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		[pathname],
 	);
 
+	useEffect(() => {
+		if (orgPreferences && !isEmpty(orgPreferences)) {
+			const onboardingPreference = orgPreferences?.find(
+				(preference: Record<string, any>) => preference.key === 'ORG_ONBOARDING',
+			);
+
+			if (onboardingPreference) {
+				setIsOnboardingComplete(onboardingPreference.value);
+			}
+		}
+	}, [orgPreferences]);
+
 	const {
 		data: licensesData,
 		isFetching: isFetchingLicensesData,
@@ -53,9 +77,11 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		isUserFetching,
 		isUserFetchingError,
 		isLoggedIn: isLoggedInState,
+		isFetchingOrgPreferences,
 	} = useSelector<AppState, AppReducer>((state) => state.app);
 
 	const { t } = useTranslation(['common']);
+
 	const localStorageUserAuthToken = getInitialUserTokenRefreshToken();
 
 	const dispatch = useDispatch<Dispatch<AppActions>>();
@@ -66,6 +92,8 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 
 	const isOldRoute = oldRoutes.indexOf(pathname) > -1;
 
+	const [orgData, setOrgData] = useState<Organization | undefined>(undefined);
+
 	const isLocalStorageLoggedIn =
 		getLocalStorageApi(LOCALSTORAGE.IS_LOGGED_IN) === 'true';
 
@@ -81,6 +109,42 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		}
 	};
 
+	const { data: orgUsers, isLoading: isLoadingOrgUsers } = useQuery({
+		queryFn: () => {
+			if (orgData && orgData.id !== undefined) {
+				return getOrgUser({
+					orgId: orgData.id,
+				});
+			}
+			return undefined;
+		},
+		queryKey: ['getOrgUser'],
+		enabled: !isEmpty(orgData),
+	});
+
+	const checkFirstTimeUser = (): boolean => {
+		const users = orgUsers?.payload || [];
+
+		const remainingUsers = users.filter(
+			(user) => user.email !== 'admin@signoz.cloud',
+		);
+
+		return remainingUsers.length === 1;
+	};
+
+	// Check if the onboarding should be shown based on the org users and onboarding completion status, wait for org users and preferences to load
+	const shouldShowOnboarding = (): boolean => {
+		// Only run this effect if the org users and preferences are loaded
+		if (!isLoadingOrgUsers) {
+			const isFirstUser = checkFirstTimeUser();
+
+			// Redirect to get started if it's not the first user or if the onboarding is complete
+			return isFirstUser && !isOnboardingComplete;
+		}
+
+		return false;
+	};
+
 	const handleUserLoginIfTokenPresent = async (
 		key: keyof typeof ROUTES,
 	): Promise<void> => {
@@ -102,6 +166,16 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 					response.payload.refreshJwt,
 				);
 
+				const showOnboarding = shouldShowOnboarding();
+
+				if (
+					userResponse &&
+					showOnboarding &&
+					userResponse.payload.role === 'ADMIN'
+				) {
+					history.push(ROUTES.ONBOARDING);
+				}
+
 				if (
 					userResponse &&
 					route &&
@@ -160,6 +234,35 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		}
 	}, [isFetchingLicensesData]);
 
+	useEffect(() => {
+		if (org && org.length > 0 && org[0].id !== undefined) {
+			setOrgData(org[0]);
+		}
+	}, [org]);
+
+	const handleRouting = (): void => {
+		const showOnboarding = shouldShowOnboarding();
+
+		if (showOnboarding) {
+			history.push(ROUTES.ONBOARDING);
+		} else {
+			history.push(ROUTES.APPLICATION);
+		}
+	};
+
+	useEffect(() => {
+		// Only run this effect if the org users and preferences are loaded
+		if (!isLoadingOrgUsers && isOnboardingComplete !== null) {
+			const isFirstUser = checkFirstTimeUser();
+
+			// Redirect to get started if it's not the first user or if the onboarding is complete
+			if (isFirstUser && !isOnboardingComplete) {
+				history.push(ROUTES.ONBOARDING);
+			}
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [isLoadingOrgUsers, isOnboardingComplete, orgUsers]);
+
 	// eslint-disable-next-line sonarjs/cognitive-complexity
 	useEffect(() => {
 		(async (): Promise<void> => {
@@ -183,7 +286,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 						// no need to fetch the user and make user fetching false
 
 						if (getLocalStorageApi(LOCALSTORAGE.IS_LOGGED_IN) === 'true') {
-							history.push(ROUTES.APPLICATION);
+							handleRouting();
 						}
 						dispatch({
 							type: UPDATE_USER_IS_FETCH,
@@ -195,7 +298,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 				} else if (pathname === ROUTES.HOME_PAGE) {
 					// routing to application page over root page
 					if (isLoggedInState) {
-						history.push(ROUTES.APPLICATION);
+						handleRouting();
 					} else {
 						navigateToLoginIfNotLoggedIn();
 					}
@@ -214,7 +317,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		return <Redirect to={ROUTES.SOMETHING_WENT_WRONG} />;
 	}
 
-	if (isUserFetching) {
+	if (isUserFetching || (isLoggedInState && isFetchingOrgPreferences)) {
 		return <Spinner tip="Loading..." />;
 	}
 

frontend/src/AppRoutes/index.tsx

@@ -2,6 +2,7 @@ import { ConfigProvider } from 'antd';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';
+import getAllOrgPreferences from 'api/preferences/getAllOrgPreferences';
 import NotFound from 'components/NotFound';
 import Spinner from 'components/Spinner';
 import { FeatureKeys } from 'constants/features';
@@ -24,12 +25,17 @@ import AlertRuleProvider from 'providers/Alert';
 import { DashboardProvider } from 'providers/Dashboard/Dashboard';
 import { QueryBuilderProvider } from 'providers/QueryBuilder';
 import { Suspense, useEffect, useState } from 'react';
+import { useQuery } from 'react-query';
 import { useDispatch, useSelector } from 'react-redux';
 import { Route, Router, Switch } from 'react-router-dom';
 import { Dispatch } from 'redux';
 import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
-import { UPDATE_FEATURE_FLAG_RESPONSE } from 'types/actions/app';
+import {
+	UPDATE_FEATURE_FLAG_RESPONSE,
+	UPDATE_IS_FETCHING_ORG_PREFERENCES,
+	UPDATE_ORG_PREFERENCES,
+} from 'types/actions/app';
 import AppReducer, { User } from 'types/reducer/app';
 import { extractDomain, isCloudUser, isEECloudUser } from 'utils/app';
 
@@ -65,6 +71,30 @@ function App(): JSX.Element {
 	const isPremiumSupportEnabled =
 		useFeatureFlags(FeatureKeys.PREMIUM_SUPPORT)?.active || false;
 
+	const { data: orgPreferences, isLoading: isLoadingOrgPreferences } = useQuery({
+		queryFn: () => getAllOrgPreferences(),
+		queryKey: ['getOrgPreferences'],
+		enabled: isLoggedInState,
+	});
+
+	useEffect(() => {
+		if (orgPreferences && !isLoadingOrgPreferences) {
+			dispatch({
+				type: UPDATE_IS_FETCHING_ORG_PREFERENCES,
+				payload: {
+					isFetchingOrgPreferences: false,
+				},
+			});
+
+			dispatch({
+				type: UPDATE_ORG_PREFERENCES,
+				payload: {
+					orgPreferences: orgPreferences.payload?.data || null,
+				},
+			});
+		}
+	}, [orgPreferences, dispatch, isLoadingOrgPreferences]);
+
 	const featureResponse = useGetFeatureFlag((allFlags) => {
 		dispatch({
 			type: UPDATE_FEATURE_FLAG_RESPONSE,
@@ -182,6 +212,16 @@ function App(): JSX.Element {
 	}, [isLoggedInState, isOnBasicPlan, user]);
 
 	useEffect(() => {
+		if (pathname === ROUTES.ONBOARDING) {
+			window.Intercom('update', {
+				hide_default_launcher: true,
+			});
+		} else {
+			window.Intercom('update', {
+				hide_default_launcher: false,
+			});
+		}
+
 		trackPageView(pathname);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [pathname]);
@@ -204,6 +244,7 @@ function App(): JSX.Element {
 		user,
 		licenseData,
 		isPremiumSupportEnabled,
+		pathname,
 	]);
 
 	useEffect(() => {

frontend/src/AppRoutes/pageComponents.ts

@@ -66,6 +66,10 @@ export const Onboarding = Loadable(
 	() => import(/* webpackChunkName: "Onboarding" */ 'pages/OnboardingPage'),
 );
 
+export const OrgOnboarding = Loadable(
+	() => import(/* webpackChunkName: "OrgOnboarding" */ 'pages/OrgOnboarding'),
+);
+
 export const DashboardPage = Loadable(
 	() =>
 		import(/* webpackChunkName: "DashboardPage" */ 'pages/DashboardsListPage'),

frontend/src/AppRoutes/routes.ts

@@ -32,6 +32,7 @@ import {
 	OldLogsExplorer,
 	Onboarding,
 	OrganizationSettings,
+	OrgOnboarding,
 	PasswordReset,
 	PipelinePage,
 	ServiceMapPage,
@@ -68,6 +69,13 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 		key: 'GET_STARTED',
 	},
+	{
+		path: ROUTES.ONBOARDING,
+		exact: false,
+		component: OrgOnboarding,
+		isPrivate: true,
+		key: 'ONBOARDING',
+	},
 	{
 		component: LogsIndexToFields,
 		path: ROUTES.LOGS_INDEX_FIELDS,

frontend/src/api/apiV1.ts

@@ -4,6 +4,7 @@ export const apiV2 = '/api/v2/';
 export const apiV3 = '/api/v3/';
 export const apiV4 = '/api/v4/';
 export const gatewayApiV1 = '/api/gateway/v1/';
+export const gatewayApiV2 = '/api/gateway/v2/';
 export const apiAlertManager = '/api/alertmanager/';
 
 export default apiV1;

frontend/src/api/index.ts

@@ -15,6 +15,7 @@ import apiV1, {
 	apiV3,
 	apiV4,
 	gatewayApiV1,
+	gatewayApiV2,
 } from './apiV1';
 import { Logout } from './utils';
 
@@ -169,6 +170,19 @@ GatewayApiV1Instance.interceptors.response.use(
 GatewayApiV1Instance.interceptors.request.use(interceptorsRequestResponse);
 //
 
+// gateway Api V2
+export const GatewayApiV2Instance = axios.create({
+	baseURL: `${ENVIRONMENT.baseURL}${gatewayApiV2}`,
+});
+
+GatewayApiV2Instance.interceptors.response.use(
+	interceptorsResponse,
+	interceptorRejected,
+);
+
+GatewayApiV2Instance.interceptors.request.use(interceptorsRequestResponse);
+//
+
 AxiosAlertManagerInstance.interceptors.response.use(
 	interceptorsResponse,
 	interceptorRejected,

frontend/src/api/onboarding/updateProfile.ts

@@ -0,0 +1,20 @@
+import { GatewayApiV2Instance } from 'api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { UpdateProfileProps } from 'types/api/onboarding/types';
+
+const updateProfile = async (
+	props: UpdateProfileProps,
+): Promise<SuccessResponse<UpdateProfileProps> | ErrorResponse> => {
+	const response = await GatewayApiV2Instance.put('/profiles/me', {
+		...props,
+	});
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: response.data.status,
+		payload: response.data.data,
+	};
+};
+
+export default updateProfile;

frontend/src/api/preferences/updateOrgPreference.ts

@@ -10,9 +10,12 @@ const updateOrgPreference = async (
 ): Promise<
 	SuccessResponse<UpdateOrgPreferenceResponseProps> | ErrorResponse
 > => {
-	const response = await axios.put(`/org/preferences`, {
-		preference_value: preferencePayload.value,
-	});
+	const response = await axios.put(
+		`/org/preferences/${preferencePayload.preferenceID}`,
+		{
+			preference_value: preferencePayload.value,
+		},
+	);
 
 	return {
 		statusCode: 200,

frontend/src/api/user/inviteUsers.ts

@@ -0,0 +1,18 @@
+import axios from 'api';
+import { SuccessResponse } from 'types/api';
+import { InviteUsersResponse, UsersProps } from 'types/api/user/inviteUsers';
+
+const inviteUsers = async (
+	users: UsersProps,
+): Promise<SuccessResponse<InviteUsersResponse>> => {
+	const response = await axios.post(`/invite/bulk`, users);
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: response.data.status,
+		payload: response.data,
+	};
+};
+
+export default inviteUsers;

frontend/src/constants/routes.ts

@@ -8,6 +8,7 @@ const ROUTES = {
 	TRACE_DETAIL: '/trace/:id',
 	TRACES_EXPLORER: '/traces-explorer',
 	GET_STARTED: '/get-started',
+	ONBOARDING: '/onboarding',
 	GET_STARTED_APPLICATION_MONITORING: '/get-started/application-monitoring',
 	GET_STARTED_LOGS_MANAGEMENT: '/get-started/logs-management',
 	GET_STARTED_INFRASTRUCTURE_MONITORING:

frontend/src/container/AppLayout/AppLayout.styles.scss

@@ -7,6 +7,8 @@
 		width: calc(100% - 64px);
 		z-index: 0;
 
+		margin: 0 auto;
+
 		.content-container {
 			position: relative;
 			margin: 0 1rem;

frontend/src/container/AppLayout/index.tsx

@@ -191,6 +191,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	const pageTitle = t(routeKey);
 	const renderFullScreen =
 		pathname === ROUTES.GET_STARTED ||
+		pathname === ROUTES.ONBOARDING ||
 		pathname === ROUTES.GET_STARTED_APPLICATION_MONITORING ||
 		pathname === ROUTES.GET_STARTED_INFRASTRUCTURE_MONITORING ||
 		pathname === ROUTES.GET_STARTED_LOGS_MANAGEMENT ||

frontend/src/container/OnboardingQuestionaire/AboutSigNozQuestions/AboutSigNozQuestions.tsx

@@ -0,0 +1,235 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+import '../OnboardingQuestionaire.styles.scss';
+
+import { Color } from '@signozhq/design-tokens';
+import { Button, Input, Typography } from 'antd';
+import logEvent from 'api/common/logEvent';
+import { ArrowLeft, ArrowRight, CheckCircle } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+export interface SignozDetails {
+	hearAboutSignoz: string | null;
+	interestInSignoz: string | null;
+	otherInterestInSignoz: string | null;
+	otherAboutSignoz: string | null;
+}
+
+interface AboutSigNozQuestionsProps {
+	signozDetails: SignozDetails;
+	setSignozDetails: (details: SignozDetails) => void;
+	onNext: () => void;
+	onBack: () => void;
+}
+
+const hearAboutSignozOptions: Record<string, string> = {
+	search: 'Google / Search',
+	hackerNews: 'Hacker News',
+	linkedin: 'LinkedIn',
+	twitter: 'Twitter',
+	reddit: 'Reddit',
+	colleaguesFriends: 'Colleagues / Friends',
+};
+
+const interestedInOptions: Record<string, string> = {
+	savingCosts: 'Saving costs',
+	otelNativeStack: 'Interested in Otel-native stack',
+	allInOne: 'All in one (Logs, Metrics & Traces)',
+};
+
+export function AboutSigNozQuestions({
+	signozDetails,
+	setSignozDetails,
+	onNext,
+	onBack,
+}: AboutSigNozQuestionsProps): JSX.Element {
+	const [hearAboutSignoz, setHearAboutSignoz] = useState<string | null>(
+		signozDetails?.hearAboutSignoz || null,
+	);
+	const [otherAboutSignoz, setOtherAboutSignoz] = useState<string>(
+		signozDetails?.otherAboutSignoz || '',
+	);
+	const [interestInSignoz, setInterestInSignoz] = useState<string | null>(
+		signozDetails?.interestInSignoz || null,
+	);
+	const [otherInterestInSignoz, setOtherInterestInSignoz] = useState<string>(
+		signozDetails?.otherInterestInSignoz || '',
+	);
+	const [isNextDisabled, setIsNextDisabled] = useState<boolean>(true);
+
+	useEffect((): void => {
+		if (
+			hearAboutSignoz !== null &&
+			(hearAboutSignoz !== 'Others' || otherAboutSignoz !== '') &&
+			interestInSignoz !== null &&
+			(interestInSignoz !== 'Others' || otherInterestInSignoz !== '')
+		) {
+			setIsNextDisabled(false);
+		} else {
+			setIsNextDisabled(true);
+		}
+	}, [
+		hearAboutSignoz,
+		otherAboutSignoz,
+		interestInSignoz,
+		otherInterestInSignoz,
+	]);
+
+	const handleOnNext = (): void => {
+		setSignozDetails({
+			hearAboutSignoz,
+			otherAboutSignoz,
+			interestInSignoz,
+			otherInterestInSignoz,
+		});
+
+		logEvent('User Onboarding: About SigNoz Questions Answered', {
+			hearAboutSignoz,
+			otherAboutSignoz,
+			interestInSignoz,
+			otherInterestInSignoz,
+		});
+
+		onNext();
+	};
+
+	const handleOnBack = (): void => {
+		setSignozDetails({
+			hearAboutSignoz,
+			otherAboutSignoz,
+			interestInSignoz,
+			otherInterestInSignoz,
+		});
+
+		onBack();
+	};
+
+	return (
+		<div className="questions-container">
+			<Typography.Title level={3} className="title">
+				Tell Us About Your Interest in SigNoz
+			</Typography.Title>
+			<Typography.Paragraph className="sub-title">
+				We&apos;d love to know a little bit about you and your interest in SigNoz
+			</Typography.Paragraph>
+
+			<div className="questions-form-container">
+				<div className="questions-form">
+					<div className="form-group">
+						<div className="question">Where did you hear about SigNoz?</div>
+						<div className="two-column-grid">
+							{Object.keys(hearAboutSignozOptions).map((option: string) => (
+								<Button
+									key={option}
+									type="primary"
+									className={`onboarding-questionaire-button ${
+										hearAboutSignoz === option ? 'active' : ''
+									}`}
+									onClick={(): void => setHearAboutSignoz(option)}
+								>
+									{hearAboutSignozOptions[option]}
+									{hearAboutSignoz === option && (
+										<CheckCircle size={12} color={Color.BG_FOREST_500} />
+									)}
+								</Button>
+							))}
+
+							{hearAboutSignoz === 'Others' ? (
+								<Input
+									type="text"
+									className="onboarding-questionaire-other-input"
+									placeholder="How you got to know about us"
+									value={otherAboutSignoz}
+									autoFocus
+									addonAfter={
+										otherAboutSignoz !== '' ? (
+											<CheckCircle size={12} color={Color.BG_FOREST_500} />
+										) : (
+											''
+										)
+									}
+									onChange={(e): void => setOtherAboutSignoz(e.target.value)}
+								/>
+							) : (
+								<Button
+									type="primary"
+									className={`onboarding-questionaire-button ${
+										hearAboutSignoz === 'Others' ? 'active' : ''
+									}`}
+									onClick={(): void => setHearAboutSignoz('Others')}
+								>
+									Others
+								</Button>
+							)}
+						</div>
+					</div>
+
+					<div className="form-group">
+						<div className="question">What got you interested in SigNoz?</div>
+						<div className="two-column-grid">
+							{Object.keys(interestedInOptions).map((option: string) => (
+								<Button
+									key={option}
+									type="primary"
+									className={`onboarding-questionaire-button ${
+										interestInSignoz === option ? 'active' : ''
+									}`}
+									onClick={(): void => setInterestInSignoz(option)}
+								>
+									{interestedInOptions[option]}
+									{interestInSignoz === option && (
+										<CheckCircle size={12} color={Color.BG_FOREST_500} />
+									)}
+								</Button>
+							))}
+
+							{interestInSignoz === 'Others' ? (
+								<Input
+									type="text"
+									className="onboarding-questionaire-other-input"
+									placeholder="Please specify your interest"
+									value={otherInterestInSignoz}
+									autoFocus
+									addonAfter={
+										otherInterestInSignoz !== '' ? (
+											<CheckCircle size={12} color={Color.BG_FOREST_500} />
+										) : (
+											''
+										)
+									}
+									onChange={(e): void => setOtherInterestInSignoz(e.target.value)}
+								/>
+							) : (
+								<Button
+									type="primary"
+									className={`onboarding-questionaire-button ${
+										interestInSignoz === 'Others' ? 'active' : ''
+									}`}
+									onClick={(): void => setInterestInSignoz('Others')}
+								>
+									Others
+								</Button>
+							)}
+						</div>
+					</div>
+				</div>
+
+				<div className="next-prev-container">
+					<Button type="default" className="next-button" onClick={handleOnBack}>
+						<ArrowLeft size={14} />
+						Back
+					</Button>
+
+					<Button
+						type="primary"
+						className={`next-button ${isNextDisabled ? 'disabled' : ''}`}
+						onClick={handleOnNext}
+						disabled={isNextDisabled}
+					>
+						Next
+						<ArrowRight size={14} />
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+}

frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.styles.scss

@@ -0,0 +1,122 @@
+.team-member-container {
+	display: flex;
+	align-items: center;
+
+	.team-member-role-select {
+		width: 20%;
+
+		.ant-select-selector {
+			border: 1px solid #1d212d;
+			border-top-left-radius: 0px;
+			border-bottom-left-radius: 0px;
+		}
+	}
+
+	.team-member-email-input {
+		width: 80%;
+		background-color: #121317;
+		border-top-right-radius: 0px;
+		border-bottom-right-radius: 0px;
+
+		.ant-input,
+		.ant-input-group-addon {
+			background-color: #121317 !important;
+			border-right: 0px;
+			border-top-right-radius: 0px;
+			border-bottom-right-radius: 0px;
+		}
+	}
+}
+
+.questions-form-container {
+	.error-message-container,
+	.success-message-container,
+	.partially-sent-invites-container {
+		border-radius: 4px;
+		width: 100%;
+		display: flex;
+		align-items: center;
+
+		.error-message,
+		.success-message {
+			font-size: 12px;
+			font-weight: 400;
+
+			display: flex;
+			align-items: center;
+			gap: 8px;
+		}
+	}
+
+	.invite-users-error-message-container,
+	.invite-users-success-message-container {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 8px;
+
+		.success-message {
+			color: var(--bg-success-500, #00b37e);
+		}
+	}
+
+	.partially-sent-invites-container {
+		margin-top: 16px;
+		padding: 8px;
+		border: 1px solid #1d212d;
+		background-color: #121317;
+
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 8px;
+
+		.partially-sent-invites-message {
+			color: var(--bg-warning-500, #fbbd23);
+
+			font-size: 12px;
+			font-weight: 400;
+
+			display: flex;
+			align-items: center;
+			gap: 8px;
+		}
+	}
+}
+
+.lightMode {
+	.team-member-container {
+		.team-member-role-select {
+			.ant-select-selector {
+				border: 1px solid var(--bg-vanilla-300);
+			}
+		}
+
+		.team-member-email-input {
+			background-color: var(--bg-vanilla-100);
+
+			.ant-input,
+			.ant-input-group-addon {
+				background-color: var(--bg-vanilla-100) !important;
+			}
+		}
+	}
+
+	.questions-form-container {
+		.invite-users-error-message-container,
+		.invite-users-success-message-container {
+			.success-message {
+				color: var(--bg-success-500, #00b37e);
+			}
+		}
+
+		.partially-sent-invites-container {
+			border: 1px solid var(--bg-vanilla-300);
+			background-color: var(--bg-vanilla-100);
+
+			.partially-sent-invites-message {
+				color: var(--bg-warning-500, #fbbd23);
+			}
+		}
+	}
+}

frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.tsx

@@ -0,0 +1,434 @@
+import './InviteTeamMembers.styles.scss';
+
+import { Color } from '@signozhq/design-tokens';
+import { Button, Input, Select, Typography } from 'antd';
+import logEvent from 'api/common/logEvent';
+import inviteUsers from 'api/user/inviteUsers';
+import { AxiosError } from 'axios';
+import { cloneDeep, debounce, isEmpty } from 'lodash-es';
+import {
+	ArrowLeft,
+	ArrowRight,
+	CheckCircle,
+	Plus,
+	TriangleAlert,
+	X,
+} from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
+import { useMutation } from 'react-query';
+import { SuccessResponse } from 'types/api';
+import {
+	FailedInvite,
+	InviteUsersResponse,
+	SuccessfulInvite,
+} from 'types/api/user/inviteUsers';
+import { v4 as uuid } from 'uuid';
+
+interface TeamMember {
+	email: string;
+	role: string;
+	name: string;
+	frontendBaseUrl: string;
+	id: string;
+}
+
+interface InviteTeamMembersProps {
+	teamMembers: TeamMember[] | null;
+	setTeamMembers: (teamMembers: TeamMember[]) => void;
+	onNext: () => void;
+	onBack: () => void;
+}
+
+function InviteTeamMembers({
+	teamMembers,
+	setTeamMembers,
+	onNext,
+	onBack,
+}: InviteTeamMembersProps): JSX.Element {
+	const [teamMembersToInvite, setTeamMembersToInvite] = useState<
+		TeamMember[] | null
+	>(teamMembers);
+	const [emailValidity, setEmailValidity] = useState<Record<string, boolean>>(
+		{},
+	);
+	const [hasInvalidEmails, setHasInvalidEmails] = useState<boolean>(false);
+
+	const [hasErrors, setHasErrors] = useState<boolean>(true);
+
+	const [error, setError] = useState<string | null>(null);
+
+	const [inviteUsersErrorResponse, setInviteUsersErrorResponse] = useState<
+		string[] | null
+	>(null);
+
+	const [inviteUsersSuccessResponse, setInviteUsersSuccessResponse] = useState<
+		string[] | null
+	>(null);
+
+	const [disableNextButton, setDisableNextButton] = useState<boolean>(false);
+
+	const [allInvitesSent, setAllInvitesSent] = useState<boolean>(false);
+
+	const defaultTeamMember: TeamMember = {
+		email: '',
+		role: 'EDITOR',
+		name: '',
+		frontendBaseUrl: window.location.origin,
+		id: '',
+	};
+
+	useEffect(() => {
+		if (isEmpty(teamMembers)) {
+			const teamMember = {
+				...defaultTeamMember,
+				id: uuid(),
+			};
+
+			setTeamMembersToInvite([teamMember]);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [teamMembers]);
+
+	const handleAddTeamMember = (): void => {
+		const newTeamMember = {
+			...defaultTeamMember,
+			id: uuid(),
+		};
+		setTeamMembersToInvite((prev) => [...(prev || []), newTeamMember]);
+	};
+
+	const handleRemoveTeamMember = (id: string): void => {
+		setTeamMembersToInvite((prev) => (prev || []).filter((m) => m.id !== id));
+	};
+
+	// Validation function to check all users
+	const validateAllUsers = (): boolean => {
+		let isValid = true;
+
+		const updatedValidity: Record<string, boolean> = {};
+
+		teamMembersToInvite?.forEach((member) => {
+			const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(member.email);
+			if (!emailValid || !member.email) {
+				isValid = false;
+				setHasInvalidEmails(true);
+			}
+			updatedValidity[member.id!] = emailValid;
+		});
+
+		setEmailValidity(updatedValidity);
+
+		return isValid;
+	};
+
+	const parseInviteUsersSuccessResponse = (
+		response: SuccessfulInvite[],
+	): string[] => response.map((invite) => `${invite.email} - Invite Sent`);
+
+	const parseInviteUsersErrorResponse = (response: FailedInvite[]): string[] =>
+		response.map((invite) => `${invite.email} - ${invite.error}`);
+
+	const handleError = (error: AxiosError): void => {
+		const errorMessage = error.response?.data as InviteUsersResponse;
+
+		if (errorMessage?.status === 'failure') {
+			setHasErrors(true);
+
+			const failedInvitesErrorResponse = parseInviteUsersErrorResponse(
+				errorMessage.failed_invites,
+			);
+
+			setInviteUsersErrorResponse(failedInvitesErrorResponse);
+		}
+	};
+
+	const handleInviteUsersSuccess = (
+		response: SuccessResponse<InviteUsersResponse>,
+	): void => {
+		const inviteUsersResponse = response.payload as InviteUsersResponse;
+
+		if (inviteUsersResponse?.status === 'success') {
+			const successfulInvites = parseInviteUsersSuccessResponse(
+				inviteUsersResponse.successful_invites,
+			);
+
+			setDisableNextButton(true);
+
+			setError(null);
+			setHasErrors(false);
+			setInviteUsersErrorResponse(null);
+			setAllInvitesSent(true);
+
+			setInviteUsersSuccessResponse(successfulInvites);
+
+			setTimeout(() => {
+				setDisableNextButton(false);
+				onNext();
+			}, 1000);
+		} else if (inviteUsersResponse?.status === 'partial_success') {
+			const successfulInvites = parseInviteUsersSuccessResponse(
+				inviteUsersResponse.successful_invites,
+			);
+
+			setInviteUsersSuccessResponse(successfulInvites);
+
+			if (inviteUsersResponse.failed_invites.length > 0) {
+				setHasErrors(true);
+
+				setInviteUsersErrorResponse(
+					parseInviteUsersErrorResponse(inviteUsersResponse.failed_invites),
+				);
+			}
+		}
+	};
+
+	const {
+		mutate: sendInvites,
+		isLoading: isSendingInvites,
+		data: inviteUsersApiResponseData,
+	} = useMutation(inviteUsers, {
+		onSuccess: (response: SuccessResponse<InviteUsersResponse>): void => {
+			logEvent('User Onboarding: Invite Team Members Sent', {
+				teamMembers: teamMembersToInvite,
+			});
+
+			handleInviteUsersSuccess(response);
+		},
+		onError: (error: AxiosError): void => {
+			logEvent('User Onboarding: Invite Team Members Failed', {
+				teamMembers: teamMembersToInvite,
+				error,
+			});
+
+			handleError(error);
+		},
+	});
+
+	const handleNext = (): void => {
+		if (validateAllUsers()) {
+			setTeamMembers(teamMembersToInvite || []);
+
+			setHasInvalidEmails(false);
+			setError(null);
+			setHasErrors(false);
+			setInviteUsersErrorResponse(null);
+			setInviteUsersSuccessResponse(null);
+
+			sendInvites({
+				users: teamMembersToInvite || [],
+			});
+		}
+	};
+
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	const debouncedValidateEmail = useCallback(
+		debounce((email: string, memberId: string) => {
+			const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+			setEmailValidity((prev) => ({ ...prev, [memberId]: isValid }));
+		}, 500),
+		[],
+	);
+
+	const handleEmailChange = (
+		e: React.ChangeEvent<HTMLInputElement>,
+		member: TeamMember,
+	): void => {
+		const { value } = e.target;
+		const updatedMembers = cloneDeep(teamMembersToInvite || []);
+
+		const memberToUpdate = updatedMembers.find((m) => m.id === member.id);
+		if (memberToUpdate) {
+			memberToUpdate.email = value;
+			setTeamMembersToInvite(updatedMembers);
+			debouncedValidateEmail(value, member.id!);
+		}
+	};
+
+	const handleRoleChange = (role: string, member: TeamMember): void => {
+		const updatedMembers = cloneDeep(teamMembersToInvite || []);
+		const memberToUpdate = updatedMembers.find((m) => m.id === member.id);
+		if (memberToUpdate) {
+			memberToUpdate.role = role;
+			setTeamMembersToInvite(updatedMembers);
+		}
+	};
+
+	const handleDoLater = (): void => {
+		logEvent('User Onboarding: Invite Team Members Skipped', {
+			teamMembers: teamMembersToInvite,
+			apiResponse: inviteUsersApiResponseData,
+		});
+
+		onNext();
+	};
+
+	return (
+		<div className="questions-container">
+			<Typography.Title level={3} className="title">
+				Invite your team members
+			</Typography.Title>
+			<Typography.Paragraph className="sub-title">
+				The more your team uses SigNoz, the stronger your observability. Share
+				dashboards, collaborate on alerts, and troubleshoot faster together.
+			</Typography.Paragraph>
+
+			<div className="questions-form-container">
+				<div className="questions-form invite-team-members-form">
+					<div className="form-group">
+						<div className="question-label">
+							Collaborate with your team
+							<div className="question-sub-label">
+								Invite your team to the SigNoz workspace
+							</div>
+						</div>
+
+						<div className="invite-team-members-container">
+							{teamMembersToInvite?.map((member) => (
+								<div className="team-member-container" key={member.id}>
+									<Input
+										placeholder="your-teammate@org.com"
+										value={member.email}
+										type="email"
+										required
+										autoFocus
+										autoComplete="off"
+										className="team-member-email-input"
+										onChange={(e: React.ChangeEvent<HTMLInputElement>): void =>
+											handleEmailChange(e, member)
+										}
+										addonAfter={
+											// eslint-disable-next-line no-nested-ternary
+											emailValidity[member.id!] === undefined ? null : emailValidity[
+													member.id!
+											  ] ? (
+												<CheckCircle size={14} color={Color.BG_FOREST_500} />
+											) : (
+												<TriangleAlert size={14} color={Color.BG_SIENNA_500} />
+											)
+										}
+									/>
+									<Select
+										defaultValue={member.role}
+										onChange={(value): void => handleRoleChange(value, member)}
+										className="team-member-role-select"
+									>
+										<Select.Option value="VIEWER">Viewer</Select.Option>
+										<Select.Option value="EDITOR">Editor</Select.Option>
+										<Select.Option value="ADMIN">Admin</Select.Option>
+									</Select>
+
+									{teamMembersToInvite?.length > 1 && (
+										<Button
+											type="primary"
+											className="remove-team-member-button"
+											icon={<X size={14} />}
+											onClick={(): void => handleRemoveTeamMember(member.id)}
+										/>
+									)}
+								</div>
+							))}
+						</div>
+
+						<div className="invite-team-members-add-another-member-container">
+							<Button
+								type="primary"
+								className="add-another-member-button"
+								icon={<Plus size={14} />}
+								onClick={handleAddTeamMember}
+							>
+								Member
+							</Button>
+						</div>
+					</div>
+
+					{hasInvalidEmails && (
+						<div className="error-message-container">
+							<Typography.Text className="error-message" type="danger">
+								<TriangleAlert size={14} /> Please enter valid emails for all team
+								members
+							</Typography.Text>
+						</div>
+					)}
+
+					{error && (
+						<div className="error-message-container">
+							<Typography.Text className="error-message" type="danger">
+								<TriangleAlert size={14} /> {error}
+							</Typography.Text>
+						</div>
+					)}
+
+					{inviteUsersSuccessResponse && (
+						<div className="success-message-container invite-users-success-message-container">
+							{inviteUsersSuccessResponse?.map((success, index) => (
+								<Typography.Text
+									className="success-message"
+									// eslint-disable-next-line react/no-array-index-key
+									key={`${success}-${index}`}
+								>
+									<CheckCircle size={14} /> {success}
+								</Typography.Text>
+							))}
+						</div>
+					)}
+
+					{hasErrors && (
+						<div className="error-message-container invite-users-error-message-container">
+							{inviteUsersErrorResponse?.map((error, index) => (
+								<Typography.Text
+									className="error-message"
+									type="danger"
+									// eslint-disable-next-line react/no-array-index-key
+									key={`${error}-${index}`}
+								>
+									<TriangleAlert size={14} /> {error}
+								</Typography.Text>
+							))}
+						</div>
+					)}
+				</div>
+
+				{/* Partially sent invites */}
+				{inviteUsersSuccessResponse && inviteUsersErrorResponse && (
+					<div className="partially-sent-invites-container">
+						<Typography.Text className="partially-sent-invites-message">
+							<TriangleAlert size={14} />
+							Some invites were sent successfully. Please fix the errors above and
+							resend invites.
+						</Typography.Text>
+
+						<Typography.Text className="partially-sent-invites-message">
+							You can click on I&apos;ll do this later to go to next step.
+						</Typography.Text>
+					</div>
+				)}
+
+				<div className="next-prev-container">
+					<Button type="default" className="next-button" onClick={onBack}>
+						<ArrowLeft size={14} />
+						Back
+					</Button>
+
+					<Button
+						type="primary"
+						className="next-button"
+						onClick={handleNext}
+						loading={isSendingInvites || disableNextButton}
+					>
+						{allInvitesSent ? 'Invites Sent' : 'Send Invites'}
+
+						{allInvitesSent ? <CheckCircle size={14} /> : <ArrowRight size={14} />}
+					</Button>
+				</div>
+
+				<div className="do-later-container">
+					<Button type="link" onClick={handleDoLater}>
+						I&apos;ll do this later
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default InviteTeamMembers;

frontend/src/container/OnboardingQuestionaire/OnboardingFooter/OnboardingFooter.styles.scss

@@ -0,0 +1,49 @@
+.footer-main-container {
+	display: flex;
+	justify-content: center;
+	box-sizing: border-box;
+}
+
+.footer-container {
+	display: inline-flex;
+	height: 36px;
+	padding: 12px;
+	justify-content: center;
+	align-items: center;
+	gap: 32px;
+	flex-shrink: 0;
+	border-radius: 4px;
+	border: 1px solid var(--Greyscale-Slate-500, #161922);
+	background: var(--Ink-400, #121317);
+
+	width: 100%;
+	max-width: 600px;
+}
+
+.footer-container .footer-content {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+}
+
+.footer-container .footer-link {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	color: #c0c1c3;
+}
+
+.footer-container .footer-text {
+	color: var(--Vanilla-400, var(--Greyscale-Vanilla-400, #c0c1c3));
+	font-size: 12px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: normal;
+	letter-spacing: 0.2px;
+}
+
+.footer-container .footer-dot {
+	width: 4px;
+	height: 4px;
+	fill: var(--Greyscale-Slate-200, #2c3140);
+}

frontend/src/container/OnboardingQuestionaire/OnboardingFooter/OnboardingFooter.tsx

@@ -0,0 +1,31 @@
+import './OnboardingFooter.styles.scss';
+
+import { Dot } from 'lucide-react';
+
+export function OnboardingFooter(): JSX.Element {
+	return (
+		<section className="footer-main-container">
+			<div className="footer-container">
+				<a
+					href="https://trust.signoz.io/"
+					target="_blank"
+					className="footer-content"
+					rel="noreferrer"
+				>
+					<img src="/logos/hippa.svg" alt="HIPPA" className="footer-logo" />
+					<span className="footer-text">HIPPA</span>
+				</a>
+				<Dot size={24} color="#2C3140" />
+				<a
+					href="https://trust.signoz.io/"
+					target="_blank"
+					className="footer-content"
+					rel="noreferrer"
+				>
+					<img src="/logos/soc2.svg" alt="SOC2" className="footer-logo" />
+					<span className="footer-text">SOC2</span>
+				</a>
+			</div>
+		</section>
+	);
+}

frontend/src/container/OnboardingQuestionaire/OnboardingFooter/index.ts

@@ -0,0 +1 @@
+export { OnboardingFooter } from './OnboardingFooter';

frontend/src/container/OnboardingQuestionaire/OnboardingHeader/OnboardingHeader.styles.scss

@@ -0,0 +1,65 @@
+.header-container {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 12px 0px;
+
+	box-sizing: border-box;
+}
+
+.header-container .logo-container {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+}
+
+.header-container .logo-container img {
+	height: 17.5px;
+	width: 17.5px;
+}
+
+.header-container .logo-text {
+	font-family: 'Work Sans', sans-serif;
+	color: var(--bg-vanilla-100);
+	font-size: 15.4px;
+	font-style: normal;
+	font-weight: 500;
+	line-height: 17.5px;
+}
+
+.header-container .get-help-container {
+	display: flex;
+	width: 113px;
+	height: 32px;
+	padding: 6px;
+	justify-content: center;
+	align-items: center;
+	gap: 6px;
+	flex-shrink: 0;
+	border-radius: 2px;
+	border: 1px solid var(--bg-slate-400);
+	background: var(--bg-ink-300);
+	box-shadow: none;
+}
+
+.header-container .get-help-container img {
+	width: 12px;
+	height: 12px;
+	flex-shrink: 0;
+}
+
+.header-container .get-help-text {
+	color: var(--bg-vanilla-400);
+	font-size: 12px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 10px;
+	letter-spacing: 0.12px;
+}
+
+.lightMode {
+	.header-container .logo-text {
+		color: var(--bg-slate-300);
+	}
+}

frontend/src/container/OnboardingQuestionaire/OnboardingHeader/OnboardingHeader.tsx

@@ -0,0 +1,12 @@
+import './OnboardingHeader.styles.scss';
+
+export function OnboardingHeader(): JSX.Element {
+	return (
+		<div className="header-container">
+			<div className="logo-container">
+				<img src="/Logos/signoz-brand-logo.svg" alt="SigNoz" />
+				<span className="logo-text">SigNoz</span>
+			</div>
+		</div>
+	);
+}

frontend/src/container/OnboardingQuestionaire/OnboardingHeader/index.ts

@@ -0,0 +1 @@
+export { OnboardingHeader } from './OnboardingHeader';

frontend/src/container/OnboardingQuestionaire/OnboardingQuestionaire.styles.scss

@@ -0,0 +1,588 @@
+.onboarding-questionaire-container {
+	width: 100%;
+	display: flex;
+	margin: 0 auto;
+	align-items: center;
+	flex-direction: column;
+	height: 100vh;
+	max-width: 1176px;
+
+	.onboarding-questionaire-header {
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		height: 56px;
+	}
+
+	.onboarding-questionaire-content {
+		height: calc(100vh - 56px - 60px);
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		overflow-y: auto;
+
+		.questions-container {
+			color: var(--bg-vanilla-100, #fff);
+			font-family: Inter;
+			font-size: 24px;
+			font-style: normal;
+			font-weight: 600;
+			line-height: 32px;
+			max-width: 600px;
+			margin: 0 auto;
+			border-radius: 8px;
+			max-height: 100%;
+		}
+
+		.title {
+			color: var(--bg-vanilla-100) !important;
+			font-size: 24px !important;
+			line-height: 32px !important;
+			margin-bottom: 8px !important;
+		}
+
+		.sub-title {
+			color: var(--bg-vanilla-400) !important;
+			font-size: 14px !important;
+			font-style: normal;
+			font-weight: 400 !important;
+			line-height: 24px !important;
+			margin-top: 0px !important;
+			margin-bottom: 24px !important;
+		}
+
+		.questions-form-container {
+			max-width: 600px;
+			width: 600px;
+			margin: 0 auto;
+		}
+
+		.questions-form {
+			width: 100%;
+			display: flex;
+			min-height: 420px;
+			padding: 20px 24px 24px 24px;
+			flex-direction: column;
+			align-items: center;
+			gap: 24px;
+			border-radius: 4px;
+			border: 1px solid var(--bg-slate-500);
+			background: var(--bg-ink-400);
+
+			.ant-form-item {
+				margin-bottom: 0px !important;
+
+				.ant-form-item-label {
+					label {
+						color: var(--bg-vanilla-100) !important;
+						font-size: 13px !important;
+						font-weight: 500;
+						line-height: 20px;
+					}
+				}
+			}
+
+			&.invite-team-members-form {
+				min-height: calc(420px - 24px);
+				max-height: calc(420px - 24px);
+
+				.invite-team-members-container {
+					max-height: 260px;
+					overflow-y: auto;
+
+					&::-webkit-scrollbar {
+						width: 0.1rem;
+					}
+					&::-webkit-scrollbar-corner {
+						background: transparent;
+					}
+					&::-webkit-scrollbar-thumb {
+						background: rgb(136, 136, 136);
+						border-radius: 0.625rem;
+					}
+					&::-webkit-scrollbar-track {
+						background: transparent;
+					}
+				}
+			}
+		}
+
+		.invite-team-members-container {
+			display: flex;
+			width: 100%;
+			flex-direction: column;
+			gap: 12px;
+
+			.ant-input-group {
+				width: 100%;
+
+				.ant-input {
+					font-size: 12px;
+
+					height: 32px;
+					background: var(--Ink-300, #16181d);
+					border: 1px solid var(--bg-slate-400);
+					color: var(--bg-vanilla-400);
+				}
+
+				.ant-input-group-addon {
+					font-size: 11px;
+					height: 32px;
+					min-width: 80px;
+					background: var(--Ink-300, #16181d);
+					border: 1px solid var(--Greyscale-Slate-400, #1d212d);
+					border-left: 0px;
+					color: var(--bg-vanilla-400);
+				}
+			}
+		}
+
+		.question-label {
+			color: var(--bg-vanilla-100);
+			font-size: 13px;
+			font-style: normal;
+			font-weight: 500;
+			line-height: 20px;
+		}
+
+		.question-sub-label {
+			color: var(--bg-vanilla-400);
+			font-size: 11px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 16px;
+		}
+
+		.next-prev-container {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			gap: 10px;
+			margin-bottom: 24px;
+
+			.ant-btn {
+				flex: 1;
+			}
+		}
+
+		.form-group {
+			display: flex;
+			flex-direction: column;
+			align-items: flex-start;
+			gap: 8px;
+			align-self: stretch;
+		}
+
+		.slider-container {
+			width: 100%;
+
+			.ant-slider .ant-slider-mark {
+				font-size: 10px;
+			}
+		}
+
+		.do-later-container {
+			width: 100%;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			margin-top: 24px;
+		}
+
+		.question {
+			color: var(--bg-vanilla-100);
+			font-size: 14px;
+			font-style: normal;
+			font-weight: 500;
+			line-height: 20px;
+
+			display: flex;
+			align-items: center;
+			gap: 8px;
+		}
+
+		input[type='text'] {
+			width: 100%;
+			padding: 12px;
+			border-radius: 2px;
+			font-size: 14px;
+			height: 40px;
+			border: 1px solid var(--bg-slate-400);
+			background: var(--bg-ink-300);
+			color: var(--bg-vanilla-100);
+
+			&:focus-visible {
+				outline: none;
+			}
+		}
+
+		.radio-group,
+		.grid,
+		.tool-grid {
+			display: flex;
+			align-items: flex-start;
+			align-content: flex-start;
+			gap: 10px;
+			align-self: stretch;
+			flex-wrap: wrap;
+		}
+
+		.radio-button,
+		.grid-button,
+		.tool-button {
+			border-radius: 4px;
+			border: 1px solid var(--bg-slate-400);
+			background: var(--bg-ink-300);
+			padding: 12px;
+			color: var(--bg-vanilla-400);
+			font-size: 14px;
+			font-style: normal;
+			text-align: left;
+			font-weight: 400;
+			transition: background-color 0.3s ease;
+			min-width: 258px;
+			cursor: pointer;
+			box-sizing: border-box;
+		}
+
+		.radio-button.active,
+		.grid-button.active,
+		.tool-button.active,
+		.radio-button:hover,
+		.grid-button:hover,
+		.tool-button:hover {
+			border: 1px solid rgba(78, 116, 248, 0.4);
+			background: rgba(78, 116, 248, 0.2);
+		}
+
+		.two-column-grid {
+			width: 100%;
+			display: grid;
+			grid-template-columns: 1fr 1fr; /* Two equal columns */
+			gap: 10px;
+		}
+
+		.onboarding-questionaire-button,
+		.add-another-member-button,
+		.remove-team-member-button {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			border-radius: 2px;
+			border: 1px solid var(--bg-slate-400);
+			background: var(--bg-ink-300);
+			color: var(--bg-vanilla-400);
+			box-shadow: none;
+			font-size: 14px;
+			font-style: normal;
+			text-align: left;
+			font-weight: 400;
+			transition: background-color 0.3s ease;
+			cursor: pointer;
+			height: 40px;
+			box-sizing: border-box;
+
+			&:hover {
+				border: 1px solid rgba(78, 116, 248, 0.4);
+				background: rgba(78, 116, 248, 0.2);
+			}
+
+			&:focus-visible {
+				outline: none;
+			}
+
+			&.active {
+				border: 1px solid rgba(78, 116, 248, 0.4);
+				background: rgba(78, 116, 248, 0.2);
+			}
+		}
+
+		.add-another-member-button,
+		.remove-team-member-button {
+			font-size: 12px;
+			height: 32px;
+		}
+
+		.remove-team-member-button {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			border: 1px solid var(--bg-slate-400);
+			border-top-left-radius: 0px;
+			border-bottom-left-radius: 0px;
+			background-color: var(--bg-ink-300);
+
+			border-left: 0px;
+			border-top-left-radius: 0px;
+			border-bottom-left-radius: 0px;
+		}
+
+		.onboarding-questionaire-other-input {
+			.ant-input-group {
+				.ant-input {
+					border-top-right-radius: 0px !important;
+					border-bottom-right-radius: 0px !important;
+				}
+			}
+		}
+
+		.tool-grid {
+			grid-template-columns: repeat(4, 1fr);
+		}
+
+		.input-field {
+			flex: 0;
+			padding: 12px;
+			border: 1px solid var(--bg-slate-400);
+			background: var(--bg-ink-300);
+			color: var(--bg-vanilla-100);
+			border-radius: 4px;
+			font-size: 14px;
+			min-width: 258px;
+		}
+
+		.next-button {
+			display: flex;
+			height: 40px;
+			padding: 8px 12px 8px 16px;
+			justify-content: center;
+			align-items: center;
+			gap: 6px;
+			align-self: stretch;
+			border: 0px;
+			border-radius: 50px;
+			margin-top: 24px;
+			cursor: pointer;
+		}
+
+		.next-button.disabled {
+			opacity: 0.5;
+			cursor: not-allowed;
+			pointer-events: none;
+		}
+
+		.arrow {
+			font-size: 18px;
+			color: var(--bg-vanilla-100);
+		}
+	}
+
+	.onboarding-questionaire-footer {
+		width: 100%;
+		height: 60px;
+		padding: 12px 24px;
+		box-sizing: border-box;
+	}
+
+	.invite-team-members-add-another-member-container {
+		width: 100%;
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		margin-top: 12px;
+	}
+}
+
+.onboarding-questionaire-loading-container {
+	width: 100%;
+	display: flex;
+	height: 100vh;
+	max-width: 600px;
+	justify-content: center;
+	align-items: center;
+	margin: 0 auto;
+}
+
+.lightMode {
+	.onboarding-questionaire-container {
+		.onboarding-questionaire-content {
+			.questions-container {
+				color: var(--bg-slate-300);
+			}
+
+			.title {
+				color: var(--bg-slate-300) !important;
+			}
+
+			.sub-title {
+				color: var(--bg-slate-400) !important;
+			}
+
+			.questions-form {
+				width: 100%;
+				display: flex;
+				min-height: 420px;
+				padding: 20px 24px 24px 24px;
+				flex-direction: column;
+				align-items: center;
+				gap: 24px;
+				border-radius: 4px;
+				border: 1px solid var(--bg-vanilla-300);
+				background: var(--bg-vanilla-100);
+
+				.ant-form-item {
+					margin-bottom: 0px !important;
+
+					.ant-form-item-label {
+						label {
+							color: var(--bg-slate-300) !important;
+							font-size: 13px;
+							font-weight: 500;
+							line-height: 20px;
+						}
+					}
+				}
+
+				&.invite-team-members-form {
+					.invite-team-members-container {
+						max-height: 260px;
+						overflow-y: auto;
+
+						&::-webkit-scrollbar {
+							width: 0.1rem;
+						}
+						&::-webkit-scrollbar-corner {
+							background: transparent;
+						}
+						&::-webkit-scrollbar-thumb {
+							background: rgb(136, 136, 136);
+							border-radius: 0.625rem;
+						}
+						&::-webkit-scrollbar-track {
+							background: transparent;
+						}
+					}
+				}
+			}
+
+			.invite-team-members-container {
+				.ant-input-group {
+					.ant-input {
+						background: var(--bg-vanilla-100);
+						border: 1px solid var(--bg-vanilla-300);
+						color: var(--bg-slate-300);
+					}
+
+					.ant-input-group-addon {
+						font-size: 11px;
+						height: 32px;
+						min-width: 80px;
+						background: var(--bg-vanilla-100);
+						border: 1px solid var(--bg-vanilla-300);
+						border-left: 0px;
+						color: var(--bg-slate-300);
+					}
+				}
+			}
+
+			.question-label {
+				color: var(--bg-slate-300);
+			}
+
+			.question-sub-label {
+				color: var(--bg-slate-400);
+			}
+
+			.question {
+				color: var(--bg-slate-300);
+			}
+
+			input[type='text'] {
+				border: 1px solid var(--bg-vanilla-300);
+				background: var(--bg-vanilla-100);
+				color: var(--text-ink-300);
+			}
+
+			.radio-button,
+			.grid-button,
+			.tool-button {
+				border-radius: 4px;
+				border: 1px solid var(--bg-vanilla-300);
+				background: var(--bg-vanilla-100);
+				padding: 12px;
+				color: var(--bg-slate-300);
+				font-size: 14px;
+				font-style: normal;
+				text-align: left;
+				font-weight: 400;
+				transition: background-color 0.3s ease;
+				min-width: 258px;
+				cursor: pointer;
+				box-sizing: border-box;
+			}
+
+			.radio-button.active,
+			.grid-button.active,
+			.tool-button.active,
+			.radio-button:hover,
+			.grid-button:hover,
+			.tool-button:hover {
+				border: 1px solid rgba(78, 116, 248, 0.4);
+				background: rgba(78, 116, 248, 0.2);
+			}
+
+			.onboarding-questionaire-button,
+			.add-another-member-button,
+			.remove-team-member-button {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				border-radius: 2px;
+				border: 1px solid var(--bg-vanilla-300);
+				background: var(--bg-vanilla-100);
+				color: var(--bg-ink-300);
+				box-shadow: none;
+				font-size: 14px;
+				font-style: normal;
+				text-align: left;
+				font-weight: 400;
+				transition: background-color 0.3s ease;
+				cursor: pointer;
+				height: 40px;
+				box-sizing: border-box;
+
+				&:hover {
+					border: 1px solid rgba(78, 116, 248, 0.4);
+					background: rgba(78, 116, 248, 0.2);
+				}
+
+				&:focus-visible {
+					outline: none;
+				}
+
+				&.active {
+					border: 1px solid rgba(78, 116, 248, 0.4);
+					background: rgba(78, 116, 248, 0.2);
+				}
+			}
+
+			.remove-team-member-button {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+
+				border: 1px solid var(--bg-vanilla-300);
+				border-top-left-radius: 0px;
+				border-bottom-left-radius: 0px;
+				background-color: var(--bg-vanilla-100);
+
+				border-left: 0px;
+				border-top-left-radius: 0px;
+				border-bottom-left-radius: 0px;
+			}
+
+			.input-field {
+				border: 1px solid var(--bg-vanilla-300);
+				background: var(--bg-vanilla-100);
+				color: var(--text-ink-300);
+			}
+
+			.arrow {
+				color: var(--bg-slate-300);
+			}
+		}
+	}
+}

frontend/src/container/OnboardingQuestionaire/OptimiseSignozNeeds/OptimiseSignozNeeds.tsx

@@ -0,0 +1,325 @@
+import { Button, Slider, Typography } from 'antd';
+import logEvent from 'api/common/logEvent';
+import { ArrowLeft, ArrowRight, Loader2, Minus } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+export interface OptimiseSignozDetails {
+	logsPerDay: number;
+	hostsPerDay: number;
+	services: number;
+}
+
+// Define exponential range
+const logsMin = 1; // Set to your minimum value in the exponential range
+const logsMax = 10000; // Set to your maximum value in the exponential range
+
+const hostsMin = 1;
+const hostsMax = 10000;
+
+const servicesMin = 1;
+const servicesMax = 5000;
+
+// Function to convert linear slider value to exponential scale
+const linearToExponential = (
+	value: number,
+	min: number,
+	max: number,
+): number => {
+	const expMin = Math.log10(min);
+	const expMax = Math.log10(max);
+	const expValue = 10 ** (expMin + ((expMax - expMin) * value) / 100);
+	return Math.round(expValue);
+};
+
+const exponentialToLinear = (
+	expValue: number,
+	min: number,
+	max: number,
+): number => {
+	const expMin = Math.log10(min);
+	const expMax = Math.log10(max);
+	const linearValue =
+		((Math.log10(expValue) - expMin) / (expMax - expMin)) * 100;
+	return Math.round(linearValue); // Round to get a whole number within the 0-100 range
+};
+
+interface OptimiseSignozNeedsProps {
+	optimiseSignozDetails: OptimiseSignozDetails;
+	setOptimiseSignozDetails: (details: OptimiseSignozDetails) => void;
+	onNext: () => void;
+	onBack: () => void;
+	onWillDoLater: () => void;
+	isUpdatingProfile: boolean;
+	isNextDisabled: boolean;
+}
+
+const marks = {
+	0: `${linearToExponential(0, logsMin, logsMax).toLocaleString()} GB`,
+	25: `${linearToExponential(25, logsMin, logsMax).toLocaleString()} GB`,
+	50: `${linearToExponential(50, logsMin, logsMax).toLocaleString()} GB`,
+	75: `${linearToExponential(75, logsMin, logsMax).toLocaleString()} GB`,
+	100: `${linearToExponential(100, logsMin, logsMax).toLocaleString()} GB`,
+};
+
+const hostMarks = {
+	0: `${linearToExponential(0, hostsMin, hostsMax).toLocaleString()}`,
+	25: `${linearToExponential(25, hostsMin, hostsMax).toLocaleString()}`,
+	50: `${linearToExponential(50, hostsMin, hostsMax).toLocaleString()}`,
+	75: `${linearToExponential(75, hostsMin, hostsMax).toLocaleString()}`,
+	100: `${linearToExponential(100, hostsMin, hostsMax).toLocaleString()}`,
+};
+
+const serviceMarks = {
+	0: `${linearToExponential(0, servicesMin, servicesMax).toLocaleString()}`,
+	25: `${linearToExponential(25, servicesMin, servicesMax).toLocaleString()}`,
+	50: `${linearToExponential(50, servicesMin, servicesMax).toLocaleString()}`,
+	75: `${linearToExponential(75, servicesMin, servicesMax).toLocaleString()}`,
+	100: `${linearToExponential(100, servicesMin, servicesMax).toLocaleString()}`,
+};
+
+function OptimiseSignozNeeds({
+	isUpdatingProfile,
+	optimiseSignozDetails,
+	setOptimiseSignozDetails,
+	onNext,
+	onBack,
+	onWillDoLater,
+	isNextDisabled,
+}: OptimiseSignozNeedsProps): JSX.Element {
+	const [logsPerDay, setLogsPerDay] = useState<number>(
+		optimiseSignozDetails?.logsPerDay || 0,
+	);
+	const [hostsPerDay, setHostsPerDay] = useState<number>(
+		optimiseSignozDetails?.hostsPerDay || 0,
+	);
+	const [services, setServices] = useState<number>(
+		optimiseSignozDetails?.services || 0,
+	);
+
+	// Internal state for the linear slider
+	const [sliderValues, setSliderValues] = useState({
+		logsPerDay: 0,
+		hostsPerDay: 0,
+		services: 0,
+	});
+
+	useEffect(() => {
+		setSliderValues({
+			logsPerDay: exponentialToLinear(logsPerDay, logsMin, logsMax),
+			hostsPerDay: exponentialToLinear(hostsPerDay, hostsMin, hostsMax),
+			services: exponentialToLinear(services, servicesMin, servicesMax),
+		});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	useEffect(() => {
+		setOptimiseSignozDetails({
+			logsPerDay,
+			hostsPerDay,
+			services,
+		});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [services, hostsPerDay, logsPerDay]);
+
+	const handleOnNext = (): void => {
+		logEvent('User Onboarding: Optimise SigNoz Needs Answered', {
+			logsPerDay,
+			hostsPerDay,
+			services,
+		});
+
+		onNext();
+	};
+
+	const handleOnBack = (): void => {
+		onBack();
+	};
+
+	const handleWillDoLater = (): void => {
+		setOptimiseSignozDetails({
+			logsPerDay: 0,
+			hostsPerDay: 0,
+			services: 0,
+		});
+
+		onWillDoLater();
+
+		logEvent('User Onboarding: Optimise SigNoz Needs Skipped', {
+			logsPerDay: 0,
+			hostsPerDay: 0,
+			services: 0,
+		});
+	};
+
+	const handleSliderChange = (key: string, value: number): void => {
+		setSliderValues({
+			...sliderValues,
+			[key]: value,
+		});
+
+		switch (key) {
+			case 'logsPerDay':
+				setLogsPerDay(linearToExponential(value, logsMin, logsMax));
+				break;
+			case 'hostsPerDay':
+				setHostsPerDay(linearToExponential(value, hostsMin, hostsMax));
+				break;
+			case 'services':
+				setServices(linearToExponential(value, servicesMin, servicesMax));
+				break;
+			default:
+				break;
+		}
+	};
+
+	// Calculate the exponential value based on the current slider position
+	const logsPerDayValue = linearToExponential(
+		sliderValues.logsPerDay,
+		logsMin,
+		logsMax,
+	);
+	const hostsPerDayValue = linearToExponential(
+		sliderValues.hostsPerDay,
+		hostsMin,
+		hostsMax,
+	);
+	const servicesValue = linearToExponential(
+		sliderValues.services,
+		servicesMin,
+		servicesMax,
+	);
+
+	return (
+		<div className="questions-container">
+			<Typography.Title level={3} className="title">
+				Optimize SigNoz for Your Needs
+			</Typography.Title>
+			<Typography.Paragraph className="sub-title">
+				Give us a quick sense of your scale so SigNoz can keep up!
+			</Typography.Paragraph>
+
+			<div className="questions-form-container">
+				<div className="questions-form">
+					<Typography.Paragraph className="question">
+						What does your scale approximately look like?
+					</Typography.Paragraph>
+
+					<div className="form-group">
+						<label className="question" htmlFor="organisationName">
+							Logs / Day
+						</label>
+						<div className="slider-container">
+							<div>
+								<Slider
+									min={0}
+									max={100}
+									value={sliderValues.logsPerDay}
+									marks={marks}
+									onChange={(value: number): void =>
+										handleSliderChange('logsPerDay', value)
+									}
+									styles={{
+										track: {
+											background: '#4E74F8',
+										},
+									}}
+									tooltip={{
+										formatter: (): string => `${logsPerDayValue.toLocaleString()} GB`, // Show whole number
+									}}
+								/>
+							</div>
+						</div>
+					</div>
+
+					<div className="form-group">
+						<label className="question" htmlFor="organisationName">
+							Metrics <Minus size={14} /> Number of Hosts
+						</label>
+						<div className="slider-container">
+							<div>
+								<Slider
+									min={0}
+									max={100}
+									value={sliderValues.hostsPerDay}
+									marks={hostMarks}
+									onChange={(value: number): void =>
+										handleSliderChange('hostsPerDay', value)
+									}
+									styles={{
+										track: {
+											background: '#4E74F8',
+										},
+									}}
+									tooltip={{
+										formatter: (): string => `${hostsPerDayValue.toLocaleString()}`, // Show whole number
+									}}
+								/>
+							</div>
+						</div>
+					</div>
+
+					<div className="form-group">
+						<label className="question" htmlFor="organisationName">
+							Number of services
+						</label>
+						<div className="slider-container">
+							<div>
+								<Slider
+									min={0}
+									max={100}
+									value={sliderValues.services}
+									marks={serviceMarks}
+									onChange={(value: number): void =>
+										handleSliderChange('services', value)
+									}
+									styles={{
+										track: {
+											background: '#4E74F8',
+										},
+									}}
+									tooltip={{
+										formatter: (): string => `${servicesValue.toLocaleString()}`, // Show whole number
+									}}
+								/>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div className="next-prev-container">
+					<Button
+						type="default"
+						className="next-button"
+						onClick={handleOnBack}
+						disabled={isUpdatingProfile}
+					>
+						<ArrowLeft size={14} />
+						Back
+					</Button>
+
+					<Button
+						type="primary"
+						className="next-button"
+						onClick={handleOnNext}
+						disabled={isUpdatingProfile || isNextDisabled}
+					>
+						Next{' '}
+						{isUpdatingProfile ? (
+							<Loader2 className="animate-spin" />
+						) : (
+							<ArrowRight size={14} />
+						)}
+					</Button>
+				</div>
+
+				<div className="do-later-container">
+					<Button type="link" onClick={handleWillDoLater}>
+						Skip for now
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default OptimiseSignozNeeds;

frontend/src/container/OnboardingQuestionaire/OrgQuestions/OrgQuestions.tsx

@@ -0,0 +1,362 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+import '../OnboardingQuestionaire.styles.scss';
+
+import { Color } from '@signozhq/design-tokens';
+import { Button, Input, Typography } from 'antd';
+import logEvent from 'api/common/logEvent';
+import editOrg from 'api/user/editOrg';
+import { useNotifications } from 'hooks/useNotifications';
+import { ArrowRight, CheckCircle, Loader2 } from 'lucide-react';
+import { Dispatch, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
+import AppActions from 'types/actions';
+import { UPDATE_ORG_NAME } from 'types/actions/app';
+import AppReducer from 'types/reducer/app';
+
+export interface OrgData {
+	id: string;
+	isAnonymous: boolean;
+	name: string;
+}
+
+export interface OrgDetails {
+	organisationName: string;
+	usesObservability: boolean | null;
+	observabilityTool: string | null;
+	otherTool: string | null;
+	familiarity: string | null;
+}
+
+interface OrgQuestionsProps {
+	currentOrgData: OrgData | null;
+	orgDetails: OrgDetails;
+	onNext: (details: OrgDetails) => void;
+}
+
+const observabilityTools = {
+	AWSCloudwatch: 'AWS Cloudwatch',
+	DataDog: 'DataDog',
+	NewRelic: 'New Relic',
+	GrafanaPrometheus: 'Grafana / Prometheus',
+	AzureAppMonitor: 'Azure App Monitor',
+	GCPNativeO11yTools: 'GCP-native o11y tools',
+	Honeycomb: 'Honeycomb',
+};
+
+const o11yFamiliarityOptions: Record<string, string> = {
+	beginner: 'Beginner',
+	intermediate: 'Intermediate',
+	expert: 'Expert',
+	notFamiliar: "I'm not familiar with it",
+};
+
+function OrgQuestions({
+	currentOrgData,
+	orgDetails,
+	onNext,
+}: OrgQuestionsProps): JSX.Element {
+	const { user } = useSelector<AppState, AppReducer>((state) => state.app);
+	const { notifications } = useNotifications();
+	const dispatch = useDispatch<Dispatch<AppActions>>();
+
+	const { t } = useTranslation(['organizationsettings', 'common']);
+
+	const [organisationName, setOrganisationName] = useState<string>(
+		orgDetails?.organisationName || '',
+	);
+	const [usesObservability, setUsesObservability] = useState<boolean | null>(
+		orgDetails?.usesObservability || null,
+	);
+	const [observabilityTool, setObservabilityTool] = useState<string | null>(
+		orgDetails?.observabilityTool || null,
+	);
+	const [otherTool, setOtherTool] = useState<string>(
+		orgDetails?.otherTool || '',
+	);
+	const [familiarity, setFamiliarity] = useState<string | null>(
+		orgDetails?.familiarity || null,
+	);
+	const [isNextDisabled, setIsNextDisabled] = useState<boolean>(true);
+
+	useEffect(() => {
+		setOrganisationName(orgDetails.organisationName);
+	}, [orgDetails.organisationName]);
+
+	const [isLoading, setIsLoading] = useState<boolean>(false);
+
+	const handleOrgNameUpdate = async (): Promise<void> => {
+		/* Early bailout if orgData is not set or if the organisation name is not set or if the organisation name is empty or if the organisation name is the same as the one in the orgData */
+		if (
+			!currentOrgData ||
+			!organisationName ||
+			organisationName === '' ||
+			orgDetails.organisationName === organisationName
+		) {
+			onNext({
+				organisationName,
+				usesObservability,
+				observabilityTool,
+				otherTool,
+				familiarity,
+			});
+
+			return;
+		}
+
+		try {
+			setIsLoading(true);
+			const { statusCode, error } = await editOrg({
+				isAnonymous: currentOrgData.isAnonymous,
+				name: organisationName,
+				orgId: currentOrgData.id,
+			});
+			if (statusCode === 200) {
+				dispatch({
+					type: UPDATE_ORG_NAME,
+					payload: {
+						orgId: currentOrgData?.id,
+						name: orgDetails.organisationName,
+					},
+				});
+
+				logEvent('User Onboarding: Org Name Updated', {
+					organisationName: orgDetails.organisationName,
+				});
+
+				onNext({
+					organisationName,
+					usesObservability,
+					observabilityTool,
+					otherTool,
+					familiarity,
+				});
+			} else {
+				logEvent('User Onboarding: Org Name Update Failed', {
+					organisationName: orgDetails.organisationName,
+				});
+
+				notifications.error({
+					message:
+						error ||
+						t('something_went_wrong', {
+							ns: 'common',
+						}),
+				});
+			}
+			setIsLoading(false);
+		} catch (error) {
+			setIsLoading(false);
+			notifications.error({
+				message: t('something_went_wrong', {
+					ns: 'common',
+				}),
+			});
+		}
+	};
+
+	const isValidUsesObservability = (): boolean => {
+		if (usesObservability === null) {
+			return false;
+		}
+
+		if (usesObservability && (!observabilityTool || observabilityTool === '')) {
+			return false;
+		}
+
+		// eslint-disable-next-line sonarjs/prefer-single-boolean-return
+		if (usesObservability && observabilityTool === 'Others' && otherTool === '') {
+			return false;
+		}
+
+		return true;
+	};
+
+	useEffect(() => {
+		const isValidObservability = isValidUsesObservability();
+
+		if (organisationName !== '' && familiarity !== null && isValidObservability) {
+			setIsNextDisabled(false);
+		} else {
+			setIsNextDisabled(true);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [
+		organisationName,
+		usesObservability,
+		familiarity,
+		observabilityTool,
+		otherTool,
+	]);
+
+	const handleOnNext = (): void => {
+		handleOrgNameUpdate();
+	};
+
+	return (
+		<div className="questions-container">
+			<Typography.Title level={3} className="title">
+				Welcome, {user?.name}!
+			</Typography.Title>
+			<Typography.Paragraph className="sub-title">
+				We&apos;ll help you get the most out of SigNoz, whether you&apos;re new to
+				observability or a seasoned pro.
+			</Typography.Paragraph>
+
+			<div className="questions-form-container">
+				<div className="questions-form">
+					<div className="form-group">
+						<label className="question" htmlFor="organisationName">
+							Your Organisation Name
+						</label>
+						<input
+							type="text"
+							name="organisationName"
+							id="organisationName"
+							placeholder="For eg. Simpsonville..."
+							autoComplete="off"
+							value={organisationName}
+							onChange={(e): void => setOrganisationName(e.target.value)}
+						/>
+					</div>
+
+					<div className="form-group">
+						<label className="question" htmlFor="usesObservability">
+							Do you currently use any observability/monitoring tool?
+						</label>
+
+						<div className="two-column-grid">
+							<Button
+								type="primary"
+								name="usesObservability"
+								className={`onboarding-questionaire-button ${
+									usesObservability === true ? 'active' : ''
+								}`}
+								onClick={(): void => {
+									setUsesObservability(true);
+								}}
+							>
+								Yes{' '}
+								{usesObservability === true && (
+									<CheckCircle size={12} color={Color.BG_FOREST_500} />
+								)}
+							</Button>
+							<Button
+								type="primary"
+								className={`onboarding-questionaire-button ${
+									usesObservability === false ? 'active' : ''
+								}`}
+								onClick={(): void => {
+									setUsesObservability(false);
+									setObservabilityTool(null);
+									setOtherTool('');
+								}}
+							>
+								No{' '}
+								{usesObservability === false && (
+									<CheckCircle size={12} color={Color.BG_FOREST_500} />
+								)}
+							</Button>
+						</div>
+					</div>
+
+					{usesObservability && (
+						<div className="form-group">
+							<label className="question" htmlFor="observabilityTool">
+								Which observability tool do you currently use?
+							</label>
+							<div className="two-column-grid">
+								{Object.keys(observabilityTools).map((tool) => (
+									<Button
+										key={tool}
+										type="primary"
+										className={`onboarding-questionaire-button ${
+											observabilityTool === tool ? 'active' : ''
+										}`}
+										onClick={(): void => setObservabilityTool(tool)}
+									>
+										{observabilityTools[tool as keyof typeof observabilityTools]}
+
+										{observabilityTool === tool && (
+											<CheckCircle size={12} color={Color.BG_FOREST_500} />
+										)}
+									</Button>
+								))}
+
+								{observabilityTool === 'Others' ? (
+									<Input
+										type="text"
+										className="onboarding-questionaire-other-input"
+										placeholder="Please specify the tool"
+										value={otherTool || ''}
+										autoFocus
+										addonAfter={
+											otherTool && otherTool !== '' ? (
+												<CheckCircle size={12} color={Color.BG_FOREST_500} />
+											) : (
+												''
+											)
+										}
+										onChange={(e): void => setOtherTool(e.target.value)}
+									/>
+								) : (
+									<button
+										type="button"
+										className={`onboarding-questionaire-button ${
+											observabilityTool === 'Others' ? 'active' : ''
+										}`}
+										onClick={(): void => setObservabilityTool('Others')}
+									>
+										Others
+									</button>
+								)}
+							</div>
+						</div>
+					)}
+
+					<div className="form-group">
+						<div className="question">
+							Are you familiar with setting up observability (o11y)?
+						</div>
+						<div className="two-column-grid">
+							{Object.keys(o11yFamiliarityOptions).map((option: string) => (
+								<Button
+									key={option}
+									type="primary"
+									className={`onboarding-questionaire-button ${
+										familiarity === option ? 'active' : ''
+									}`}
+									onClick={(): void => setFamiliarity(option)}
+								>
+									{o11yFamiliarityOptions[option]}
+									{familiarity === option && (
+										<CheckCircle size={12} color={Color.BG_FOREST_500} />
+									)}
+								</Button>
+							))}
+						</div>
+					</div>
+				</div>
+
+				<div className="next-prev-container">
+					<Button
+						type="primary"
+						className={`next-button ${isNextDisabled ? 'disabled' : ''}`}
+						onClick={handleOnNext}
+						disabled={isNextDisabled}
+					>
+						Next
+						{isLoading ? (
+							<Loader2 className="animate-spin" />
+						) : (
+							<ArrowRight size={14} />
+						)}
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default OrgQuestions;

frontend/src/container/OnboardingQuestionaire/index.tsx

@@ -0,0 +1,313 @@
+import './OnboardingQuestionaire.styles.scss';
+
+import { Skeleton } from 'antd';
+import { NotificationInstance } from 'antd/es/notification/interface';
+import logEvent from 'api/common/logEvent';
+import updateProfileAPI from 'api/onboarding/updateProfile';
+import getAllOrgPreferences from 'api/preferences/getAllOrgPreferences';
+import getOrgPreference from 'api/preferences/getOrgPreference';
+import updateOrgPreferenceAPI from 'api/preferences/updateOrgPreference';
+import getOrgUser from 'api/user/getOrgUser';
+import { AxiosError } from 'axios';
+import { SOMETHING_WENT_WRONG } from 'constants/api';
+import ROUTES from 'constants/routes';
+import { InviteTeamMembersProps } from 'container/OrganizationSettings/PendingInvitesContainer';
+import { useNotifications } from 'hooks/useNotifications';
+import history from 'lib/history';
+import { isEmpty } from 'lodash-es';
+import { Dispatch, useEffect, useState } from 'react';
+import { useMutation, useQuery } from 'react-query';
+import { useDispatch, useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
+import AppActions from 'types/actions';
+import {
+	UPDATE_IS_FETCHING_ORG_PREFERENCES,
+	UPDATE_ORG_PREFERENCES,
+} from 'types/actions/app';
+import AppReducer from 'types/reducer/app';
+
+import {
+	AboutSigNozQuestions,
+	SignozDetails,
+} from './AboutSigNozQuestions/AboutSigNozQuestions';
+import InviteTeamMembers from './InviteTeamMembers/InviteTeamMembers';
+import { OnboardingHeader } from './OnboardingHeader/OnboardingHeader';
+import OptimiseSignozNeeds, {
+	OptimiseSignozDetails,
+} from './OptimiseSignozNeeds/OptimiseSignozNeeds';
+import OrgQuestions, { OrgData, OrgDetails } from './OrgQuestions/OrgQuestions';
+
+export const showErrorNotification = (
+	notifications: NotificationInstance,
+	err: Error,
+): void => {
+	notifications.error({
+		message: err.message || SOMETHING_WENT_WRONG,
+	});
+};
+
+const INITIAL_ORG_DETAILS: OrgDetails = {
+	organisationName: '',
+	usesObservability: true,
+	observabilityTool: '',
+	otherTool: '',
+	familiarity: '',
+};
+
+const INITIAL_SIGNOZ_DETAILS: SignozDetails = {
+	hearAboutSignoz: '',
+	interestInSignoz: '',
+	otherInterestInSignoz: '',
+	otherAboutSignoz: '',
+};
+
+const INITIAL_OPTIMISE_SIGNOZ_DETAILS: OptimiseSignozDetails = {
+	logsPerDay: 0,
+	hostsPerDay: 0,
+	services: 0,
+};
+
+function OnboardingQuestionaire(): JSX.Element {
+	const { notifications } = useNotifications();
+	const { org } = useSelector<AppState, AppReducer>((state) => state.app);
+	const [currentStep, setCurrentStep] = useState<number>(1);
+	const [orgDetails, setOrgDetails] = useState<OrgDetails>(INITIAL_ORG_DETAILS);
+	const [signozDetails, setSignozDetails] = useState<SignozDetails>(
+		INITIAL_SIGNOZ_DETAILS,
+	);
+	const [
+		optimiseSignozDetails,
+		setOptimiseSignozDetails,
+	] = useState<OptimiseSignozDetails>(INITIAL_OPTIMISE_SIGNOZ_DETAILS);
+	const [teamMembers, setTeamMembers] = useState<
+		InviteTeamMembersProps[] | null
+	>(null);
+
+	const { data: orgUsers, isLoading: isLoadingOrgUsers } = useQuery({
+		queryFn: () =>
+			getOrgUser({
+				orgId: (org || [])[0].id,
+			}),
+		queryKey: ['getOrgUser', org?.[0].id],
+	});
+
+	const dispatch = useDispatch<Dispatch<AppActions>>();
+	const [currentOrgData, setCurrentOrgData] = useState<OrgData | null>(null);
+	const [isOnboardingComplete, setIsOnboardingComplete] = useState<boolean>(
+		false,
+	);
+
+	const {
+		data: onboardingPreferenceData,
+		isLoading: isLoadingOnboardingPreference,
+	} = useQuery({
+		queryFn: () => getOrgPreference({ preferenceID: 'ORG_ONBOARDING' }),
+		queryKey: ['getOrgPreferences', 'ORG_ONBOARDING'],
+	});
+
+	const { data: orgPreferences, isLoading: isLoadingOrgPreferences } = useQuery({
+		queryFn: () => getAllOrgPreferences(),
+		queryKey: ['getOrgPreferences'],
+		enabled: isOnboardingComplete,
+	});
+
+	useEffect(() => {
+		if (orgPreferences && !isLoadingOrgPreferences) {
+			dispatch({
+				type: UPDATE_IS_FETCHING_ORG_PREFERENCES,
+				payload: {
+					isFetchingOrgPreferences: false,
+				},
+			});
+
+			dispatch({
+				type: UPDATE_ORG_PREFERENCES,
+				payload: {
+					orgPreferences: orgPreferences.payload?.data || null,
+				},
+			});
+		}
+	}, [orgPreferences, dispatch, isLoadingOrgPreferences]);
+
+	useEffect(() => {
+		if (
+			!isLoadingOnboardingPreference &&
+			!isEmpty(onboardingPreferenceData?.payload?.data)
+		) {
+			const preferenceId = onboardingPreferenceData?.payload?.data?.preference_id;
+			const preferenceValue =
+				onboardingPreferenceData?.payload?.data?.preference_value;
+
+			if (preferenceId === 'ORG_ONBOARDING') {
+				setIsOnboardingComplete(preferenceValue as boolean);
+			}
+		}
+	}, [onboardingPreferenceData, isLoadingOnboardingPreference]);
+
+	const checkFirstTimeUser = (): boolean => {
+		const users = orgUsers?.payload || [];
+
+		const remainingUsers = users.filter(
+			(user) => user.email !== 'admin@signoz.cloud',
+		);
+
+		return remainingUsers.length === 1;
+	};
+
+	useEffect(() => {
+		// Only run this effect if the org users and preferences are loaded
+		if (!isLoadingOrgUsers && !isLoadingOnboardingPreference) {
+			const isFirstUser = checkFirstTimeUser();
+
+			// Redirect to get started if it's not the first user or if the onboarding is complete
+			if (!isFirstUser || isOnboardingComplete) {
+				history.push(ROUTES.GET_STARTED);
+
+				logEvent('User Onboarding: Redirected to Get Started', {
+					isFirstUser,
+					isOnboardingComplete,
+				});
+			} else {
+				logEvent('User Onboarding: Started', {});
+			}
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [
+		isLoadingOrgUsers,
+		isLoadingOnboardingPreference,
+		isOnboardingComplete,
+		orgUsers,
+	]);
+
+	useEffect(() => {
+		if (org) {
+			setCurrentOrgData(org[0]);
+
+			setOrgDetails({
+				...orgDetails,
+				organisationName: org[0].name,
+			});
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [org]);
+
+	const isNextDisabled =
+		optimiseSignozDetails.logsPerDay === 0 &&
+		optimiseSignozDetails.hostsPerDay === 0 &&
+		optimiseSignozDetails.services === 0;
+
+	const { mutate: updateProfile, isLoading: isUpdatingProfile } = useMutation(
+		updateProfileAPI,
+		{
+			onSuccess: () => {
+				setCurrentStep(4);
+			},
+			onError: (error) => {
+				showErrorNotification(notifications, error as AxiosError);
+			},
+		},
+	);
+
+	const { mutate: updateOrgPreference } = useMutation(updateOrgPreferenceAPI, {
+		onSuccess: () => {
+			setIsOnboardingComplete(true);
+		},
+		onError: (error) => {
+			showErrorNotification(notifications, error as AxiosError);
+		},
+	});
+
+	const handleUpdateProfile = (): void => {
+		updateProfile({
+			familiarity_with_observability: orgDetails?.familiarity as string,
+			has_existing_observability_tool: orgDetails?.usesObservability as boolean,
+			existing_observability_tool:
+				orgDetails?.observabilityTool === 'Others'
+					? (orgDetails?.otherTool as string)
+					: (orgDetails?.observabilityTool as string),
+
+			reasons_for_interest_in_signoz:
+				signozDetails?.interestInSignoz === 'Others'
+					? (signozDetails?.otherInterestInSignoz as string)
+					: (signozDetails?.interestInSignoz as string),
+			where_did_you_hear_about_signoz:
+				signozDetails?.hearAboutSignoz === 'Others'
+					? (signozDetails?.otherAboutSignoz as string)
+					: (signozDetails?.hearAboutSignoz as string),
+
+			logs_scale_per_day_in_gb: optimiseSignozDetails?.logsPerDay as number,
+			number_of_hosts: optimiseSignozDetails?.hostsPerDay as number,
+			number_of_services: optimiseSignozDetails?.services as number,
+		});
+	};
+
+	const handleOnboardingComplete = (): void => {
+		updateOrgPreference({
+			preferenceID: 'ORG_ONBOARDING',
+			value: true,
+		});
+	};
+
+	return (
+		<div className="onboarding-questionaire-container">
+			<div className="onboarding-questionaire-header">
+				<OnboardingHeader />
+			</div>
+
+			<div className="onboarding-questionaire-content">
+				{(isLoadingOnboardingPreference || isLoadingOrgUsers) && (
+					<div className="onboarding-questionaire-loading-container">
+						<Skeleton />
+					</div>
+				)}
+
+				{!isLoadingOnboardingPreference && !isLoadingOrgUsers && (
+					<>
+						{currentStep === 1 && (
+							<OrgQuestions
+								currentOrgData={currentOrgData}
+								orgDetails={orgDetails}
+								onNext={(orgDetails: OrgDetails): void => {
+									setOrgDetails(orgDetails);
+									setCurrentStep(2);
+								}}
+							/>
+						)}
+
+						{currentStep === 2 && (
+							<AboutSigNozQuestions
+								signozDetails={signozDetails}
+								setSignozDetails={setSignozDetails}
+								onBack={(): void => setCurrentStep(1)}
+								onNext={(): void => setCurrentStep(3)}
+							/>
+						)}
+
+						{currentStep === 3 && (
+							<OptimiseSignozNeeds
+								isNextDisabled={isNextDisabled}
+								isUpdatingProfile={isUpdatingProfile}
+								optimiseSignozDetails={optimiseSignozDetails}
+								setOptimiseSignozDetails={setOptimiseSignozDetails}
+								onBack={(): void => setCurrentStep(2)}
+								onNext={handleUpdateProfile}
+								onWillDoLater={(): void => setCurrentStep(4)} // This is temporary, only to skip gateway api call as it's not setup on staging yet
+							/>
+						)}
+
+						{currentStep === 4 && (
+							<InviteTeamMembers
+								teamMembers={teamMembers}
+								setTeamMembers={setTeamMembers}
+								onBack={(): void => setCurrentStep(3)}
+								onNext={handleOnboardingComplete}
+							/>
+						)}
+					</>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export default OnboardingQuestionaire;

frontend/src/container/OrganizationSettings/PendingInvitesContainer/index.tsx

@@ -236,7 +236,9 @@ function PendingInvitesContainer(): JSX.Element {
 export interface InviteTeamMembersProps {
 	email: string;
 	name: string;
-	role: ROLES;
+	role: string;
+	id: string;
+	frontendBaseUrl: string;
 }
 
 interface DataProps {

frontend/src/container/SideNav/SideNav.tsx

@@ -113,7 +113,9 @@ function SideNav({
 		if (!isOnboardingEnabled || !isCloudUser()) {
 			let items = [...menuItems];
 
-			items = items.filter((item) => item.key !== ROUTES.GET_STARTED);
+			items = items.filter(
+				(item) => item.key !== ROUTES.GET_STARTED && item.key !== ROUTES.ONBOARDING,
+			);
 
 			setMenuItems(items);
 		}

frontend/src/container/SideNav/config.ts

@@ -27,6 +27,7 @@ export const routeConfig: Record<string, QueryParams[]> = {
 	[ROUTES.ERROR_DETAIL]: [QueryParams.resourceAttributes],
 	[ROUTES.HOME_PAGE]: [QueryParams.resourceAttributes],
 	[ROUTES.GET_STARTED]: [QueryParams.resourceAttributes],
+	[ROUTES.ONBOARDING]: [QueryParams.resourceAttributes],
 	[ROUTES.LIST_ALL_ALERT]: [QueryParams.resourceAttributes],
 	[ROUTES.LIST_LICENSES]: [QueryParams.resourceAttributes],
 	[ROUTES.LOGIN]: [QueryParams.resourceAttributes],

frontend/src/pages/OrgOnboarding/OrgOnboarding.tsx

@@ -0,0 +1,11 @@
+import OnboardingQuestionaire from 'container/OnboardingQuestionaire';
+
+function OrgOnboarding(): JSX.Element {
+	return (
+		<div className="onboarding-v2">
+			<OnboardingQuestionaire />
+		</div>
+	);
+}
+
+export default OrgOnboarding;

frontend/src/pages/OrgOnboarding/index.tsx

@@ -0,0 +1,3 @@
+import OnboardingPage from './OrgOnboarding';
+
+export default OnboardingPage;

frontend/src/pages/SignUp/SignUp.tsx

@@ -261,7 +261,7 @@ function SignUp({ version }: SignUpProps): JSX.Element {
 						values,
 						async (): Promise<void> => {
 							if (isOnboardingEnabled && isCloudUser()) {
-								history.push(ROUTES.GET_STARTED);
+								history.push(ROUTES.ONBOARDING);
 							} else {
 								history.push(ROUTES.APPLICATION);
 							}

frontend/src/store/reducers/app.ts

@@ -8,10 +8,12 @@ import {
 	UPDATE_CURRENT_ERROR,
 	UPDATE_CURRENT_VERSION,
 	UPDATE_FEATURE_FLAG_RESPONSE,
+	UPDATE_IS_FETCHING_ORG_PREFERENCES,
 	UPDATE_LATEST_VERSION,
 	UPDATE_LATEST_VERSION_ERROR,
 	UPDATE_ORG,
 	UPDATE_ORG_NAME,
+	UPDATE_ORG_PREFERENCES,
 	UPDATE_USER,
 	UPDATE_USER_ACCESS_REFRESH_ACCESS_TOKEN,
 	UPDATE_USER_FLAG,
@@ -59,6 +61,8 @@ const InitialValue: InitialValueTypes = {
 	userFlags: {},
 	ee: 'Y',
 	setupCompleted: true,
+	orgPreferences: null,
+	isFetchingOrgPreferences: true,
 };
 
 const appReducer = (
@@ -73,6 +77,17 @@ const appReducer = (
 			};
 		}
 
+		case UPDATE_ORG_PREFERENCES: {
+			return { ...state, orgPreferences: action.payload.orgPreferences };
+		}
+
+		case UPDATE_IS_FETCHING_ORG_PREFERENCES: {
+			return {
+				...state,
+				isFetchingOrgPreferences: action.payload.isFetchingOrgPreferences,
+			};
+		}
+
 		case UPDATE_FEATURE_FLAG_RESPONSE: {
 			return {
 				...state,

frontend/src/styles.scss

@@ -276,26 +276,39 @@ notifications	-  2050
 }
 
 @font-face {
-    font-family: 'Inter';
-    src: url('../public/fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
-    font-weight: 300 700;
-    font-style: normal;
+	font-family: 'Inter';
+	src: url('../public/fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
+	font-weight: 300 700;
+	font-style: normal;
 }
 @font-face {
-    font-family: 'Work Sans';
-    src: url('../public/fonts/WorkSans-VariableFont_wght.ttf') format('truetype');
-    font-weight: 500;
-    font-style: normal;
+	font-family: 'Work Sans';
+	src: url('../public/fonts/WorkSans-VariableFont_wght.ttf') format('truetype');
+	font-weight: 500;
+	font-style: normal;
 }
 @font-face {
-    font-family: 'Space Mono';
-    src: url('../public/fonts/SpaceMono-Regular.ttf') format('truetype');
-    font-weight: normal;
-    font-style: normal;
+	font-family: 'Space Mono';
+	src: url('../public/fonts/SpaceMono-Regular.ttf') format('truetype');
+	font-weight: normal;
+	font-style: normal;
 }
 @font-face {
-    font-family: 'Fira Code';
-    src: url('../public/fonts/FiraCode-VariableFont_wght.ttf') format('truetype');
-    font-weight: 300 700;
-    font-style: normal;
+	font-family: 'Fira Code';
+	src: url('../public/fonts/FiraCode-VariableFont_wght.ttf') format('truetype');
+	font-weight: 300 700;
+	font-style: normal;
+}
+
+@keyframes spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+.animate-spin {
+	animation: spin 1s linear infinite;
 }

frontend/src/types/actions/app.ts

@@ -25,7 +25,10 @@ export const UPDATE_ORG_NAME = 'UPDATE_ORG_NAME';
 export const UPDATE_ORG = 'UPDATE_ORG';
 export const UPDATE_CONFIGS = 'UPDATE_CONFIGS';
 export const UPDATE_USER_FLAG = 'UPDATE_USER_FLAG';
+export const UPDATE_ORG_PREFERENCES = 'UPDATE_ORG_PREFERENCES';
 export const UPDATE_FEATURE_FLAG_RESPONSE = 'UPDATE_FEATURE_FLAG_RESPONSE';
+export const UPDATE_IS_FETCHING_ORG_PREFERENCES =
+	'UPDATE_IS_FETCHING_ORG_PREFERENCES';
 
 export interface LoggedInUser {
 	type: typeof LOGGED_IN;
@@ -130,6 +133,20 @@ export interface UpdateFeatureFlag {
 	};
 }
 
+export interface UpdateOrgPreferences {
+	type: typeof UPDATE_ORG_PREFERENCES;
+	payload: {
+		orgPreferences: AppReducer['orgPreferences'];
+	};
+}
+
+export interface UpdateIsFetchingOrgPreferences {
+	type: typeof UPDATE_IS_FETCHING_ORG_PREFERENCES;
+	payload: {
+		isFetchingOrgPreferences: AppReducer['isFetchingOrgPreferences'];
+	};
+}
+
 export type AppAction =
 	| LoggedInUser
 	| UpdateAppVersion
@@ -143,4 +160,6 @@ export type AppAction =
 	| UpdateOrg
 	| UpdateConfigs
 	| UpdateUserFlag
-	| UpdateFeatureFlag;
+	| UpdateFeatureFlag
+	| UpdateOrgPreferences
+	| UpdateIsFetchingOrgPreferences;

frontend/src/types/api/onboarding/types.ts

@@ -0,0 +1,10 @@
+export interface UpdateProfileProps {
+	reasons_for_interest_in_signoz: string;
+	familiarity_with_observability: string;
+	has_existing_observability_tool: boolean;
+	existing_observability_tool: string;
+	logs_scale_per_day_in_gb: number;
+	number_of_services: number;
+	number_of_hosts: number;
+	where_did_you_hear_about_signoz: string;
+}

frontend/src/types/api/preferences/userOrgPreferences.ts

@@ -1,3 +1,5 @@
+import { OrgPreference } from 'types/reducer/app';
+
 export interface GetOrgPreferenceResponseProps {
 	status: string;
 	data: Record<string, unknown>;
@@ -10,7 +12,7 @@ export interface GetUserPreferenceResponseProps {
 
 export interface GetAllOrgPreferencesResponseProps {
 	status: string;
-	data: Record<string, unknown>;
+	data: OrgPreference[];
 }
 
 export interface GetAllUserPreferencesResponseProps {
@@ -19,12 +21,12 @@ export interface GetAllUserPreferencesResponseProps {
 }
 
 export interface UpdateOrgPreferenceProps {
-	key: string;
+	preferenceID: string;
 	value: unknown;
 }
 
 export interface UpdateUserPreferenceProps {
-	key: string;
+	preferenceID: string;
 	value: unknown;
 }
 

frontend/src/types/api/user/inviteUsers.ts

@@ -0,0 +1,40 @@
+import { User } from 'types/reducer/app';
+
+import { ErrorResponse } from '..';
+
+export interface UserProps {
+	name: User['name'];
+	email: User['email'];
+	role: string;
+	frontendBaseUrl: string;
+}
+
+export interface UsersProps {
+	users: UserProps[];
+}
+
+export interface PayloadProps {
+	data: string;
+}
+
+export interface FailedInvite {
+	email: string;
+	error: string;
+}
+
+export interface SuccessfulInvite {
+	email: string;
+	invite_link: string;
+	status: string;
+}
+
+export interface InviteUsersResponse extends ErrorResponse {
+	status: string;
+	summary: {
+		total_invites: number;
+		successful_invites: number;
+		failed_invites: number;
+	};
+	successful_invites: SuccessfulInvite[];
+	failed_invites: FailedInvite[];
+}

frontend/src/types/reducer/app.ts

@@ -15,6 +15,18 @@ export interface User {
 	profilePictureURL: UserPayload['profilePictureURL'];
 }
 
+export interface OrgPreference {
+	key: string;
+	name: string;
+	description: string;
+	valueType: string;
+	defaultValue: boolean;
+	allowedValues: any[];
+	isDiscreteValues: boolean;
+	allowedScopes: string[];
+	value: boolean;
+}
+
 export default interface AppReducer {
 	isLoggedIn: boolean;
 	currentVersion: string;
@@ -30,6 +42,8 @@ export default interface AppReducer {
 	userFlags: null | UserFlags;
 	ee: 'Y' | 'N';
 	setupCompleted: boolean;
+	orgPreferences: OrgPreference[] | null;
+	isFetchingOrgPreferences: boolean;
 	featureResponse: {
 		data: FeatureFlagPayload[] | null;
 		refetch: QueryObserverBaseResult['refetch'];

frontend/src/utils/error.ts

@@ -0,0 +1,12 @@
+import { NotificationInstance } from 'antd/es/notification/interface';
+import axios from 'axios';
+import { SOMETHING_WENT_WRONG } from 'constants/api';
+
+export const showErrorNotification = (
+	notifications: NotificationInstance,
+	err: Error,
+): void => {
+	notifications.error({
+		message: axios.isAxiosError(err) ? err.message : SOMETHING_WENT_WRONG,
+	});
+};

frontend/src/utils/permission/index.ts

@@ -86,6 +86,7 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	LOGS_PIPELINES: ['ADMIN', 'EDITOR', 'VIEWER'],
 	TRACE_EXPLORER: ['ADMIN', 'EDITOR', 'VIEWER'],
 	GET_STARTED: ['ADMIN', 'EDITOR', 'VIEWER'],
+	ONBOARDING: ['ADMIN'],
 	GET_STARTED_APPLICATION_MONITORING: ['ADMIN', 'EDITOR', 'VIEWER'],
 	GET_STARTED_INFRASTRUCTURE_MONITORING: ['ADMIN', 'EDITOR', 'VIEWER'],
 	GET_STARTED_LOGS_MANAGEMENT: ['ADMIN', 'EDITOR', 'VIEWER'],

frontend/yarn.lock

@@ -16588,10 +16588,10 @@ uplot@1.6.24:
   resolved "https://registry.yarnpkg.com/uplot/-/uplot-1.6.24.tgz#dfa213fa7da92763261920ea972ed1a5f9f6af12"
   integrity sha512-WpH2BsrFrqxkMu+4XBvc0eCDsRBhzoq9crttYeSI0bfxpzR5YoSVzZXOKFVWcVC7sp/aDXrdDPbDZGCtck2PVg==
 
-uplot@1.6.26:
-  version "1.6.26"
-  resolved "https://registry.yarnpkg.com/uplot/-/uplot-1.6.26.tgz#a6012fd141ad4a71741c75af0c71283d0ade45a7"
-  integrity sha512-qN0mveL6UsP40TnHzHAJkUQvpfA3y8zSLXtXKVlJo/sLfj2+vjan/Z3g81MCZjy/hEDUFNtnLftPmETDA4s7Rg==
+uplot@1.6.31:
+  version "1.6.31"
+  resolved "https://registry.yarnpkg.com/uplot/-/uplot-1.6.31.tgz#092a4b586590e9794b679e1df885a15584b03698"
+  integrity sha512-sQZqSwVCbJGnFB4IQjQYopzj5CoTZJ4Br1fG/xdONimqgHmsacvCjNesdGDypNKFbrhLGIeshYhy89FxPF+H+w==
 
 upper-case-first@^2.0.2:
   version "2.0.2"

pkg/query-service/rules/templates.go

@@ -234,15 +234,27 @@ func AlertTemplateData(labels map[string]string, value string, threshold string)
 // If there is a go template block, it won't be replaced.
 // The example for existing go template block is: {{$threshold}} or {{$value}} or any other valid go template syntax.
 func (te *TemplateExpander) preprocessTemplate() {
-	re := regexp.MustCompile(`({{.*?}})|(\$(\w+(?:\.\w+)*))`)
-	te.text = re.ReplaceAllStringFunc(te.text, func(match string) string {
+	// Handle the $variable syntax
+	reDollar := regexp.MustCompile(`({{.*?}})|(\$(\w+(?:\.\w+)*))`)
+	te.text = reDollar.ReplaceAllStringFunc(te.text, func(match string) string {
 		if strings.HasPrefix(match, "{{") {
 			// If it's a Go template block, leave it unchanged
 			return match
 		}
-		// Otherwise, it's our custom $variable syntax
-		path := strings.Split(match[1:], ".")
-		return "{{index $labels \"" + strings.Join(path, ".") + "\"}}"
+		path := match[1:] // Remove the '$'
+		return fmt.Sprintf(`{{index $labels "%s"}}`, path)
+	})
+
+	// Handle the {{.Labels.service.name}} syntax
+	reLabels := regexp.MustCompile(`{{\s*\.Labels\.([a-zA-Z0-9_.]+)(.*?)}}`)
+	te.text = reLabels.ReplaceAllStringFunc(te.text, func(match string) string {
+		submatches := reLabels.FindStringSubmatch(match)
+		if len(submatches) < 3 {
+			return match // Should not happen
+		}
+		path := submatches[1]
+		rest := submatches[2]
+		return fmt.Sprintf(`{{index .Labels "%s"%s}}`, path, rest)
 	})
 }
 

pkg/query-service/rules/templates_test.go

@@ -63,3 +63,14 @@ func TestTemplateExpander_WithMissingKey(t *testing.T) {
 	}
 	require.Equal(t, "test  exceeds 100 and observed at 200", result)
 }
+
+func TestTemplateExpander_WithLablesDotSyntax(t *testing.T) {
+	defs := "{{$labels := .Labels}}{{$value := .Value}}{{$threshold := .Threshold}}"
+	data := AlertTemplateData(map[string]string{"service.name": "my-service"}, "200", "100")
+	expander := NewTemplateExpander(context.Background(), defs+"test {{.Labels.service.name}} exceeds {{$threshold}} and observed at {{$value}}", "test", data, times.Time(time.Now().Unix()), nil)
+	result, err := expander.Expand()
+	if err != nil {
+		t.Fatal(err)
+	}
+	require.Equal(t, "test my-service exceeds 100 and observed at 200", result)
+}