feat(license): show refetch payment status button to reconcile payments (#8551)

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

@@ -8,5 +8,6 @@
 	"actNow": "Act now to avoid any disruptions and continue where you left off.",
 	"contactAdmin": "Contact your admin to proceed with the upgrade.",
 	"continueMyJourney": "Settle your bill to continue",
-	"somethingWentWrong": "Something went wrong"
+	"somethingWentWrong": "Something went wrong",
+	"refreshPaymentStatus": "Refresh Status"
 }

frontend/public/locales/en/failedPayment.json

@@ -8,5 +8,6 @@
 	"actNow": "Act now to avoid any disruptions and continue where you left off.",
 	"contactAdmin": "Contact your admin to proceed with the upgrade.",
 	"continueMyJourney": "Settle your bill to continue",
-	"somethingWentWrong": "Something went wrong"
+	"somethingWentWrong": "Something went wrong",
+	"refreshPaymentStatus": "Refresh Status"
 }

frontend/src/api/v3/licenses/post.ts

@@ -0,0 +1,24 @@
+import { ApiV3Instance as axios } from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props } from 'types/api/licenses/apply';
+
+const apply = async (
+	props: Props,
+): Promise<SuccessResponseV2<PayloadProps>> => {
+	try {
+		const response = await axios.post<PayloadProps>('/licenses', {
+			key: props.key,
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default apply;

frontend/src/api/v3/licenses/put.ts

@@ -2,15 +2,11 @@ import { ApiV3Instance as axios } from 'api';
 import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Props } from 'types/api/licenses/apply';
+import { PayloadProps } from 'types/api/licenses/apply';
 
-const apply = async (
-	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
+const apply = async (): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
-		const response = await axios.post<PayloadProps>('/licenses', {
-			key: props.key,
-		});
+		const response = await axios.put<PayloadProps>('/licenses');
 
 		return {
 			httpStatusCode: response.status,

frontend/src/components/RefreshPaymentStatus/RefreshPaymentStatus.tsx

@@ -0,0 +1,56 @@
+import { Button, Tooltip } from 'antd';
+import refreshPaymentStatus from 'api/v3/licenses/put';
+import cx from 'classnames';
+import { RefreshCcw } from 'lucide-react';
+import { useAppContext } from 'providers/App/App';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+function RefreshPaymentStatus({
+	btnShape,
+	type,
+}: {
+	btnShape?: 'default' | 'round' | 'circle';
+	type?: 'button' | 'text' | 'tooltip';
+}): JSX.Element {
+	const { t } = useTranslation(['failedPayment']);
+	const { activeLicenseRefetch } = useAppContext();
+
+	const [isLoading, setIsLoading] = useState(false);
+
+	const handleRefreshPaymentStatus = async (): Promise<void> => {
+		setIsLoading(true);
+
+		try {
+			await refreshPaymentStatus();
+
+			await Promise.all([activeLicenseRefetch()]);
+		} catch (e) {
+			console.error(e);
+		}
+		setIsLoading(false);
+	};
+
+	return (
+		<span className="refresh-payment-status-btn-wrapper">
+			<Tooltip title={type === 'tooltip' ? t('refreshPaymentStatus') : ''}>
+				<Button
+					type={type === 'text' ? 'text' : 'default'}
+					shape={btnShape}
+					className={cx('periscope-btn', { text: type === 'text' })}
+					onClick={handleRefreshPaymentStatus}
+					icon={<RefreshCcw size={14} />}
+					loading={isLoading}
+				>
+					{type !== 'tooltip' ? t('refreshPaymentStatus') : ''}
+				</Button>
+			</Tooltip>
+		</span>
+	);
+}
+RefreshPaymentStatus.defaultProps = {
+	btnShape: 'default',
+	type: 'button',
+};
+
+export default RefreshPaymentStatus;

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

@@ -4,6 +4,21 @@
 .app-banner-wrapper {
 	position: relative;
 	width: 100%;
+
+	.refresh-payment-status {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		margin-left: 4px;
+
+		.refresh-payment-status-btn-wrapper {
+			display: inline-block;
+
+			&:hover {
+				text-decoration: underline;
+			}
+		}
+	}
 }
 
 .app-layout {
@@ -12,24 +27,24 @@
 	width: 100%;
 
 	&.isWorkspaceRestricted {
-		height: calc(100% - 32px);
+		height: calc(100% - 48px);
 
 		// same styles as its either trial expired or payment failed
 		&.isTrialExpired {
-			height: calc(100% - 64px);
+			height: calc(100% - 96px);
 		}
 
 		&.isPaymentFailed {
-			height: calc(100% - 64px);
+			height: calc(100% - 96px);
 		}
 	}
 
 	&.isTrialExpired {
-		height: calc(100% - 32px);
+		height: calc(100% - 48px);
 	}
 
 	&.isPaymentFailed {
-		height: calc(100% - 32px);
+		height: calc(100% - 48px);
 	}
 
 	.app-content {
@@ -196,5 +211,5 @@
 .workspace-restricted-banner,
 .trial-expiry-banner,
 .payment-failed-banner {
-	height: 32px;
+	height: 48px;
 }

frontend/src/container/AppLayout/index.tsx

@@ -16,6 +16,7 @@ import cx from 'classnames';
 import ChangelogModal from 'components/ChangelogModal/ChangelogModal';
 import ChatSupportGateway from 'components/ChatSupportGateway/ChatSupportGateway';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+import RefreshPaymentStatus from 'components/RefreshPaymentStatus/RefreshPaymentStatus';
 import { Events } from 'constants/events';
 import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
@@ -181,11 +182,11 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	]);
 
 	useEffect(() => {
-		// refetch the changelog only when the current tab becomes active + there isn't an active request + no changelog already available
-		if (!changelog && !getChangelogByVersionResponse.isLoading && isVisible) {
+		// refetch the changelog only when the current tab becomes active + there isn't an active request
+		if (!getChangelogByVersionResponse.isLoading && isVisible) {
 			getChangelogByVersionResponse.refetch();
 		}
-		/* eslint-disable react-hooks/exhaustive-deps */
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [isVisible]);
 
 	useEffect(() => {
@@ -665,6 +666,10 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 										upgrade
 									</a>
 									to continue using SigNoz features.
+									<span className="refresh-payment-status">
+										{' '}
+										| Already upgraded? <RefreshPaymentStatus type="text" />
+									</span>
 								</span>
 							) : (
 								'Please contact your administrator for upgrading to a paid plan.'
@@ -691,6 +696,10 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 										pay the bill
 									</a>
 									to continue using SigNoz features.
+									<span className="refresh-payment-status">
+										{' '}
+										| Already paid? <RefreshPaymentStatus type="text" />
+									</span>
 								</span>
 							) : (
 								' Please contact your administrator to pay the bill.'

frontend/src/container/BillingContainer/BillingContainer.tsx

@@ -20,6 +20,7 @@ import getUsage, { UsageResponsePayloadProps } from 'api/billing/getUsage';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
 import manageCreditCardApi from 'api/v1/portal/create';
+import RefreshPaymentStatus from 'components/RefreshPaymentStatus/RefreshPaymentStatus';
 import Spinner from 'components/Spinner';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
@@ -440,14 +441,15 @@ export default function BillingContainer(): JSX.Element {
 							</Typography.Text>
 						) : null}
 					</Flex>
-					<Flex gap={20}>
+					<Flex gap={8}>
 						<Button
-							type="dashed"
+							type="default"
 							size="middle"
 							loading={isLoadingBilling || isLoadingManageBilling}
 							disabled={isLoading || isFetchingBillingData}
 							onClick={handleCsvDownload}
 							icon={<CloudDownloadOutlined />}
+							className="periscope-btn"
 						>
 							Download CSV
 						</Button>
@@ -463,6 +465,8 @@ export default function BillingContainer(): JSX.Element {
 								? t('manage_billing')
 								: t('upgrade_plan')}
 						</Button>
+
+						<RefreshPaymentStatus type="tooltip" />
 					</Flex>
 				</Flex>
 

frontend/src/container/Licenses/ApplyLicenseForm.tsx

@@ -1,5 +1,5 @@
 import { Button, Form, Input } from 'antd';
-import apply from 'api/v3/licenses/put';
+import apply from 'api/v3/licenses/post';
 import { useNotifications } from 'hooks/useNotifications';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';

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

@@ -48,7 +48,7 @@ $dark-theme: 'darkMode';
 			&__actions {
 				display: flex;
 				align-items: center;
-				gap: 16px;
+				gap: 8px;
 
 				.ant-btn-link {
 					color: var(--text-vanilla-400);

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

@@ -24,9 +24,6 @@ describe('WorkspaceLocked', () => {
 		});
 		expect(workspaceLocked).toBeInTheDocument();
 
-		const gotQuestionText = await screen.findByText(/got question?/i);
-		expect(gotQuestionText).toBeInTheDocument();
-
 		const contactUsBtn = await screen.findByRole('button', {
 			name: /Contact Us/i,
 		});

frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx

@@ -18,6 +18,7 @@ import {
 } from 'antd';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
+import RefreshPaymentStatus from 'components/RefreshPaymentStatus/RefreshPaymentStatus';
 import ROUTES from 'constants/routes';
 import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
@@ -289,26 +290,28 @@ export default function WorkspaceBlocked(): JSX.Element {
 						</span>
 						<span className="workspace-locked__modal__header__actions">
 							{isAdmin && (
-								<Button
-									className="workspace-locked__modal__header__actions__billing"
-									type="link"
-									size="small"
-									role="button"
-									onClick={handleViewBilling}
-								>
-									View Billing
-								</Button>
+								<Flex gap={8} justify="center" align="center">
+									<Button
+										className="workspace-locked__modal__header__actions__billing"
+										type="link"
+										size="small"
+										role="button"
+										onClick={handleViewBilling}
+									>
+										View Billing
+									</Button>
+
+									<RefreshPaymentStatus btnShape="round" />
+								</Flex>
 							)}
 
-							<Typography.Text className="workspace-locked__modal__title">
-								Got Questions?
-							</Typography.Text>
 							<Button
 								type="default"
 								shape="round"
 								size="middle"
 								href="mailto:cloud-support@signoz.io"
 								role="button"
+								className="periscope-btn"
 								onClick={handleContactUsClick}
 							>
 								Contact Us
@@ -349,7 +352,7 @@ export default function WorkspaceBlocked(): JSX.Element {
 									justify="center"
 									align="middle"
 									className="workspace-locked__modal__cta"
-									gutter={[16, 16]}
+									gutter={[8, 8]}
 								>
 									<Col>
 										<Alert
@@ -360,34 +363,37 @@ export default function WorkspaceBlocked(): JSX.Element {
 								</Row>
 							)}
 							{isAdmin && (
-								<Row
-									justify="center"
-									align="middle"
-									className="workspace-locked__modal__cta"
-									gutter={[16, 16]}
-								>
-									<Col>
-										<Button
-											type="primary"
-											shape="round"
-											size="middle"
-											loading={isLoading}
-											onClick={handleUpdateCreditCard}
-										>
-											Continue my Journey
-										</Button>
-									</Col>
-									<Col>
-										<Button
-											type="default"
-											shape="round"
-											size="middle"
-											onClick={handleExtendTrial}
-										>
-											{t('needMoreTime')}
-										</Button>
-									</Col>
-								</Row>
+								<Flex gap={8} vertical justify="center" align="center">
+									<Row
+										justify="center"
+										align="middle"
+										className="workspace-locked__modal__cta"
+										gutter={[8, 8]}
+									>
+										<Col>
+											<Button
+												type="primary"
+												shape="round"
+												size="middle"
+												loading={isLoading}
+												onClick={handleUpdateCreditCard}
+											>
+												Continue my Journey
+											</Button>
+										</Col>
+										<Col>
+											<Button
+												type="default"
+												shape="round"
+												size="middle"
+												className="periscope-btn"
+												onClick={handleExtendTrial}
+											>
+												{t('needMoreTime')}
+											</Button>
+										</Col>
+									</Row>
+								</Flex>
 							)}
 
 							<div className="workspace-locked__tabs">

frontend/src/pages/WorkspaceSuspended/WorkspaceSuspended.tsx

@@ -4,6 +4,7 @@ import {
 	Alert,
 	Button,
 	Col,
+	Flex,
 	Modal,
 	Row,
 	Skeleton,
@@ -11,6 +12,7 @@ import {
 	Typography,
 } from 'antd';
 import manageCreditCardApi from 'api/v1/portal/create';
+import RefreshPaymentStatus from 'components/RefreshPaymentStatus/RefreshPaymentStatus';
 import ROUTES from 'constants/routes';
 import dayjs from 'dayjs';
 import { useNotifications } from 'hooks/useNotifications';
@@ -146,9 +148,9 @@ function WorkspaceSuspended(): JSX.Element {
 									justify="center"
 									align="middle"
 									className="workspace-suspended__modal__cta"
-									gutter={[16, 16]}
+									gutter={[8, 8]}
 								>
-									<Col>
+									<Flex gap={8} justify="center" align="center">
 										<Button
 											type="primary"
 											shape="round"
@@ -158,7 +160,8 @@ function WorkspaceSuspended(): JSX.Element {
 										>
 											{t('continueMyJourney')}
 										</Button>
-									</Col>
+										<RefreshPaymentStatus btnShape="round" />
+									</Flex>
 								</Row>
 							)}
 							<div className="workspace-suspended__creative">

frontend/src/periscope.scss

@@ -54,6 +54,20 @@
 		}
 	}
 
+	&.text {
+		color: var(--bg-vanilla-100) !important;
+		background-color: transparent !important;
+		border: none;
+		box-shadow: none;
+		box-shadow: none;
+		padding: 4px 4px;
+
+		&:hover {
+			color: var(--bg-vanilla-300) !important;
+			background-color: transparent !important;
+		}
+	}
+
 	&.success {
 		color: var(--bg-forest-400) !important;
 		border-radius: 2px;