🪟 🧪 Add Purhcase credits CTA on trial expiry banner. (#22207)

Right now there's no clear path for users that want to become customers
during trial.

We want to test different CTAs to see if:
- having a CTA increase conversion to paid
- different CTAs have different impact on conversion to paid

More context: https://airtable.com/appIuY0uKPVnk8TWT/tbl2SxXnUwf6fVCWS/viw9frYvld7ks7aNo/recEy67ZVQHbOFzxJ?blocks=hide

airbyte-webapp/src/packages/cloud/locales/en.json

@@ -167,7 +167,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 <b>{value, plural, one {# day} other {# days}}</b>.",
+  "trial.alertMessage": "You are using a trial of Airbyte. Your trial ends in <b>{remainingDays, plural, one {# day} other {# days}}</b>.",
 
   "verifyEmail.notification": "You successfully verified your email. Thank you.",
 

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<React.PropsWithChildren<unknown>> = (props) => {
-  const { formatMessage } = useIntl();
   useIntercom();
   const workspace = useCurrentWorkspace();
   const cloudWorkspace = useGetCloudWorkspace(workspace.workspaceId);
@@ -38,6 +37,7 @@ const MainView: React.FC<React.PropsWithChildren<unknown>> = (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<React.PropsWithChildren<unknown>> = (props) => {
       // calculate days (rounding up if decimal)
       const trialRemainingDays = Math.ceil(trialRemainingMilliseconds / (1000 * 60 * 60 * 24));
 
-      return formatMessage({ id: "trial.alertMessage" }, { value: trialRemainingDays });
+      return (
+        <FormattedMessage
+          id="trial.alertMessage"
+          values={{
+            remainingDays: trialRemainingDays,
+            lnk: (cta: React.ReactNode) => <Link to={CloudRoutes.Credits}>{cta}</Link>,
+          }}
+        />
+      );
     }
     return null;
-  }, [alertToShow, cloudWorkspace, formatMessage]);
+  }, [alertToShow, cloudWorkspace]);
 
   return (
     <div className={styles.mainContainer}>