fix: update version check login and other minor UI fixes (#3759)

* fix: update version check login and other minor UI fixes

* fix: update text in billing page

* fix: remove useEffect and replace with onSuccess and fix remaining days bug

frontend/src/container/BillingContainer/BillingContainer.tsx

@@ -17,6 +17,7 @@ import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { License } from 'types/api/licenses/def';
 import AppReducer from 'types/reducer/app';
+import { getFormattedDate } from 'utils/timeUtils';
 
 interface DataType {
 	key: string;
@@ -107,19 +108,6 @@ export const getRemainingDays = (billingEndDate: number): number => {
 	return Math.ceil(timeDifference / (1000 * 60 * 60 * 24));
 };
 
-export const getFormattedDate = (date?: number): string => {
-	if (!date) {
-		return new Date().toLocaleDateString();
-	}
-	const trialEndDate = new Date(date * 1000);
-
-	const options = { day: 'numeric', month: 'short', year: 'numeric' };
-
-	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-	// @ts-ignore
-	return trialEndDate.toLocaleDateString(undefined, options);
-};
-
 export default function BillingContainer(): JSX.Element {
 	const daysRemainingStr = 'days remaining in your billing period.';
 	const [headerText, setHeaderText] = useState('');
@@ -138,35 +126,6 @@ export default function BillingContainer(): JSX.Element {
 
 	const handleError = useAxiosError();
 
-	const { isLoading, data: usageData } = useQuery(
-		[REACT_QUERY_KEY.GET_BILLING_USAGE, user?.userId],
-		{
-			queryFn: () => getUsage(activeLicense?.key || ''),
-			onError: handleError,
-			enabled: activeLicense !== null,
-		},
-	);
-
-	useEffect(() => {
-		const activeValidLicense =
-			licensesData?.payload?.licenses?.find(
-				(license) => license.isCurrent === true,
-			) || null;
-
-		setActiveLicense(activeValidLicense);
-
-		if (!isFetching && licensesData?.payload?.onTrial && !licenseError) {
-			setIsFreeTrial(true);
-			setBillAmount(0);
-			setDaysRemaining(getRemainingDays(licensesData?.payload?.trialEnd));
-			setHeaderText(
-				`You are in free trial period. Your free trial will end on ${getFormattedDate(
-					licensesData?.payload?.trialEnd,
-				)}`,
-			);
-		}
-	}, [isFetching, licensesData?.payload, licenseError]);
-
 	const processUsageData = useCallback(
 		(data: any): void => {
 			const {
@@ -202,23 +161,51 @@ export default function BillingContainer(): JSX.Element {
 			setTotalBillAmount(total);
 
 			if (!licensesData?.payload?.onTrial) {
+				const remainingDays = getRemainingDays(billingPeriodEnd) - 1;
+
 				setHeaderText(
 					`Your current billing period is from ${getFormattedDate(
 						billingPeriodStart,
 					)} to ${getFormattedDate(billingPeriodEnd)}`,
 				);
-				setDaysRemaining(getRemainingDays(billingPeriodEnd) - 1);
+				setDaysRemaining(remainingDays > 0 ? remainingDays : 0);
 				setBillAmount(billTotal);
 			}
 		},
 		[licensesData?.payload?.onTrial],
 	);
 
+	const { isLoading } = useQuery(
+		[REACT_QUERY_KEY.GET_BILLING_USAGE, user?.userId],
+		{
+			queryFn: () => getUsage(activeLicense?.key || ''),
+			onError: handleError,
+			enabled: activeLicense !== null,
+			onSuccess: processUsageData,
+		},
+	);
+
 	useEffect(() => {
-		if (!isLoading && usageData) {
-			processUsageData(usageData);
+		const activeValidLicense =
+			licensesData?.payload?.licenses?.find(
+				(license) => license.isCurrent === true,
+			) || null;
+
+		setActiveLicense(activeValidLicense);
+
+		if (!isFetching && licensesData?.payload?.onTrial && !licenseError) {
+			const remainingDays = getRemainingDays(licensesData?.payload?.trialEnd);
+
+			setIsFreeTrial(true);
+			setBillAmount(0);
+			setDaysRemaining(remainingDays > 0 ? remainingDays : 0);
+			setHeaderText(
+				`You are in free trial period. Your free trial will end on ${getFormattedDate(
+					licensesData?.payload?.trialEnd,
+				)}`,
+			);
 		}
-	}, [isLoading, processUsageData, usageData]);
+	}, [isFetching, licensesData?.payload, licenseError]);
 
 	const columns: ColumnsType<DataType> = [
 		{
@@ -402,7 +389,7 @@ export default function BillingContainer(): JSX.Element {
 							</Typography.Text>
 							<Typography.Text className="plan-benefit">
 								<CheckCircleOutlined />
-								You will be charged only when trial period ends
+								Your billing will start only after the trial period
 							</Typography.Text>
 							<Typography.Text className="plan-benefit">
 								<CheckCircleOutlined />

frontend/src/container/Header/index.tsx

@@ -8,10 +8,7 @@ import {
 import { Button, Divider, MenuProps, Space, Typography } from 'antd';
 import { Logout } from 'api/utils';
 import ROUTES from 'constants/routes';
-import {
-	getFormattedDate,
-	getRemainingDays,
-} from 'container/BillingContainer/BillingContainer';
+import { getRemainingDays } from 'container/BillingContainer/BillingContainer';
 import Config from 'container/ConfigDropdown';
 import { useIsDarkMode, useThemeMode } from 'hooks/useDarkMode';
 import useLicense, { LICENSE_PLAN_STATUS } from 'hooks/useLicense';
@@ -29,6 +26,7 @@ import { useSelector } from 'react-redux';
 import { NavLink } from 'react-router-dom';
 import { AppState } from 'store/reducers';
 import AppReducer from 'types/reducer/app';
+import { getFormattedDate } from 'utils/timeUtils';
 
 import CurrentOrganization from './CurrentOrganization';
 import ManageLicense from './ManageLicense';
@@ -139,9 +137,12 @@ function HeaderContainer(): JSX.Element {
 			{showTrialExpiryBanner && (
 				<div className="trial-expiry-banner">
 					You are in free trial period. Your free trial will end on{' '}
-					<span> {getFormattedDate(licenseData?.payload?.trialEnd)}. </span>
+					<span>
+						{getFormattedDate(licenseData?.payload?.trialEnd || Date.now())}.
+					</span>
 					{role === 'ADMIN' ? (
 						<span>
+							{' '}
 							Please{' '}
 							<Button className="upgrade-link" type="link" onClick={handleUpgrade}>
 								upgrade

frontend/src/container/SideNav/SideNav.tsx

@@ -13,7 +13,7 @@ import { useLocation } from 'react-router-dom';
 import { sideBarCollapse } from 'store/actions/app';
 import { AppState } from 'store/reducers';
 import AppReducer from 'types/reducer/app';
-import { isCloudUser } from 'utils/app';
+import { checkVersionState, isCloudUser } from 'utils/app';
 
 import { routeConfig, styles } from './config';
 import { getQueryString } from './helper';
@@ -110,22 +110,12 @@ function SideNav(): JSX.Element {
 		history.push(ROUTES.VERSION);
 	};
 
-	const checkVersionState = (): boolean => {
-		const versionCore = currentVersion?.split('-')[0];
-
-		if (versionCore) {
-			return versionCore !== latestVersion;
-		}
-
-		return false;
-	};
-
-	const isNotCurrentVersion = checkVersionState();
+	const isLatestVersion = checkVersionState(currentVersion, latestVersion);
 
 	const secondaryMenuItems: MenuItem[] = [
 		{
 			key: SecondaryMenuItemKey.Version,
-			icon: isNotCurrentVersion ? (
+			icon: !isLatestVersion ? (
 				<WarningOutlined style={{ color: '#E87040' }} />
 			) : (
 				<CheckCircleTwoTone twoToneColor={['#D5F2BB', '#1f1f1f']} />
@@ -135,7 +125,7 @@ function SideNav(): JSX.Element {
 					<StyledText ellipsis>
 						{!isCurrentVersionError ? currentVersion : t('n_a')}
 					</StyledText>
-					{isNotCurrentVersion && <RedDot />}
+					{!isLatestVersion && <RedDot />}
 				</MenuLabelContainer>
 			),
 			onClick: onClickVersionHandler,

frontend/src/container/Version/index.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import AppReducer from 'types/reducer/app';
+import { checkVersionState } from 'utils/app';
 
 import { githubReleaseURL } from './constant';
 import { InputComponent } from './styles';
@@ -20,7 +21,8 @@ function Version(): JSX.Element {
 		isLatestVersionError,
 	} = useSelector<AppState, AppReducer>((state) => state.app);
 
-	const isLatestVersion = currentVersion === latestVersion;
+	const isLatestVersion = checkVersionState(currentVersion, latestVersion);
+
 	const isError = isCurrentVersionError || isLatestVersionError;
 
 	const latestVersionUrl = useMemo(

frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx

@@ -5,7 +5,6 @@ import { CreditCardOutlined, LockOutlined } from '@ant-design/icons';
 import { Button, Card, Typography } from 'antd';
 import updateCreditCardApi from 'api/billing/checkout';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
-import { getFormattedDate } from 'container/BillingContainer/BillingContainer';
 import useLicense from 'hooks/useLicense';
 import { useNotifications } from 'hooks/useNotifications';
 import { useCallback, useEffect, useState } from 'react';
@@ -14,6 +13,7 @@ import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { License } from 'types/api/licenses/def';
 import AppReducer from 'types/reducer/app';
+import { getFormattedDate } from 'utils/timeUtils';
 
 export default function WorkspaceBlocked(): JSX.Element {
 	const { role } = useSelector<AppState, AppReducer>((state) => state.app);
@@ -68,8 +68,8 @@ export default function WorkspaceBlocked(): JSX.Element {
 			<Typography.Paragraph className="workpace-locked-details">
 				You have been locked out of your workspace because your trial ended without
 				an upgrade to a paid plan. Your data will continue to be ingested till{' '}
-				{getFormattedDate(licensesData?.payload?.gracePeriodEnd)} , at which point
-				we will drop all the ingested data and terminate the account.
+				{getFormattedDate(licensesData?.payload?.gracePeriodEnd || Date.now())} , at
+				which point we will drop all the ingested data and terminate the account.
 				{!isAdmin && 'Please contact your administrator for further help'}
 			</Typography.Paragraph>
 

frontend/src/utils/app.ts

@@ -17,3 +17,11 @@ export const isCloudUser = (): boolean => {
 
 	return hostname?.endsWith('signoz.cloud');
 };
+
+export const checkVersionState = (
+	currentVersion: string,
+	latestVersion: string,
+): boolean => {
+	const versionCore = currentVersion?.split('-')[0];
+	return versionCore === latestVersion;
+};

frontend/src/utils/timeUtils.ts

@@ -1,4 +1,17 @@
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+
+dayjs.extend(customParseFormat);
+
 export function toUTCEpoch(time: number): number {
 	const x = new Date();
 	return time + x.getTimezoneOffset() * 60 * 1000;
 }
+
+export const getFormattedDate = (epochTimestamp: number): string => {
+	// Convert epoch timestamp to a date
+	const date = dayjs.unix(epochTimestamp);
+
+	// Format the date as "18 Nov 2013"
+	return date.format('DD MMM YYYY');
+};