diff --git a/airbyte-webapp/src/packages/cloud/locales/en.json b/airbyte-webapp/src/packages/cloud/locales/en.json index e154f02eb869..26f743ddd311 100644 --- a/airbyte-webapp/src/packages/cloud/locales/en.json +++ b/airbyte-webapp/src/packages/cloud/locales/en.json @@ -165,7 +165,7 @@ "password.validation": "Your password is too weak", "password.invalid": "Invalid password", - "trial.alertMessage": "You are using a trial of Airbyte. Your trial ends in {value, plural, one {# day} other {# days}}.", + "trial.alertMessage": "You are using a trial of Airbyte. Your trial ends in {remainingDays, plural, one {# day} other {# days}}.", "verifyEmail.notification": "You successfully verified your email. Thank you.", diff --git a/airbyte-webapp/src/packages/cloud/views/layout/MainView/MainView.tsx b/airbyte-webapp/src/packages/cloud/views/layout/MainView/MainView.tsx index d1c0c81dbbff..7390ece7bd4d 100644 --- a/airbyte-webapp/src/packages/cloud/views/layout/MainView/MainView.tsx +++ b/airbyte-webapp/src/packages/cloud/views/layout/MainView/MainView.tsx @@ -1,6 +1,6 @@ import classNames from "classnames"; import React, { useMemo } from "react"; -import { FormattedMessage, useIntl } from "react-intl"; +import { FormattedMessage } from "react-intl"; import { Link, Outlet } from "react-router-dom"; import { LoadingPage } from "components"; @@ -22,7 +22,6 @@ import { InsufficientPermissionsErrorBoundary } from "./InsufficientPermissionsE import styles from "./MainView.module.scss"; const MainView: React.FC> = (props) => { - const { formatMessage } = useIntl(); useIntercom(); const workspace = useCurrentWorkspace(); const cloudWorkspace = useGetCloudWorkspace(workspace.workspaceId); @@ -38,6 +37,7 @@ const MainView: React.FC> = (props) => { const alertToShow = showCreditsBanner ? "credits" : cloudWorkspace.trialExpiryTimestamp ? "trial" : undefined; // exp-speedy-connection const { isExperimentVariant } = useExperimentSpeedyConnection(); + const { hasCorporateEmail } = useAuthService(); const isTrial = Boolean(cloudWorkspace.trialExpiryTimestamp); const showExperimentBanner = isExperimentVariant && isTrial && hasCorporateEmail(); @@ -62,10 +62,18 @@ const MainView: React.FC> = (props) => { // calculate days (rounding up if decimal) const trialRemainingDays = Math.ceil(trialRemainingMilliseconds / (1000 * 60 * 60 * 24)); - return formatMessage({ id: "trial.alertMessage" }, { value: trialRemainingDays }); + return ( + {cta}, + }} + /> + ); } return null; - }, [alertToShow, cloudWorkspace, formatMessage]); + }, [alertToShow, cloudWorkspace]); return (