From 6e20fbb174f08fd4f132d4d22d88f4a411c8d931 Mon Sep 17 00:00:00 2001 From: Yunus M Date: Wed, 18 Oct 2023 21:43:46 +0530 Subject: [PATCH] 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 --- .../BillingContainer/BillingContainer.tsx | 81 ++++++++----------- frontend/src/container/Header/index.tsx | 11 +-- frontend/src/container/SideNav/SideNav.tsx | 18 +---- frontend/src/container/Version/index.tsx | 4 +- .../pages/WorkspaceLocked/WorkspaceLocked.tsx | 6 +- frontend/src/utils/app.ts | 8 ++ frontend/src/utils/timeUtils.ts | 13 +++ 7 files changed, 71 insertions(+), 70 deletions(-) diff --git a/frontend/src/container/BillingContainer/BillingContainer.tsx b/frontend/src/container/BillingContainer/BillingContainer.tsx index f47af4ac0a..f5a35bbeae 100644 --- a/frontend/src/container/BillingContainer/BillingContainer.tsx +++ b/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 = [ { @@ -402,7 +389,7 @@ export default function BillingContainer(): JSX.Element { - You will be charged only when trial period ends + Your billing will start only after the trial period diff --git a/frontend/src/container/Header/index.tsx b/frontend/src/container/Header/index.tsx index d2463a5e76..e3a97f2d8f 100644 --- a/frontend/src/container/Header/index.tsx +++ b/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 && (
You are in free trial period. Your free trial will end on{' '} - {getFormattedDate(licenseData?.payload?.trialEnd)}. + + {getFormattedDate(licenseData?.payload?.trialEnd || Date.now())}. + {role === 'ADMIN' ? ( + {' '} Please{' '}