🪟 🐛 Fix out of credits banner (#15216)

* fix out of credits banner

* change intl string id

* show trial expiration over credit issues

Author: teallarson

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

@@ -110,9 +110,10 @@
   "credits.connection": "Connection",
   "credits.usage": "Usage",
   "credits.noData": "Data is empty",
+  "credits.creditProblems.lnkText": "add credits",
   "credits.creditsProblem.negative_within_grace_period": "Your workspace is out of credits! Please add more credits to make sure your syncs keep running!",
-  "credits.creditsProblem.negative_beyond_grace_period": "You’re out of credits! To set up connections and run syncs, <lnk>add credits</lnk>.",
-  "credits.creditsProblem.negative_max_threshold": "You’re out of credits! To set up connections and run syncs, <lnk>add credits</lnk>.",
+  "credits.creditsProblem.negative_beyond_grace_period": "You’re out of credits! To set up connections and run syncs, {lnk}.",
+  "credits.creditsProblem.negative_max_threshold": "You’re out of credits! To set up connections and run syncs, {lnk}.",
   "credits.emailVerificationRequired": "You need to verify your email address before you can buy credits.",
   "credits.emailVerification.resendConfirmation": "We send you a new verification link.",
   "credits.emailVerification.resend": "Send verification link again",

airbyte-webapp/src/packages/cloud/views/layout/MainView/MainView.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { useIntl } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { Link, Outlet } from "react-router-dom";
 import styled from "styled-components";
 
@@ -41,6 +41,8 @@ const MainView: React.FC = (props) => {
   const { formatMessage } = useIntl();
   const workspace = useCurrentWorkspace();
   const cloudWorkspace = useGetCloudWorkspace(workspace.workspaceId);
+  cloudWorkspace.creditStatus = CreditStatus.NEGATIVE_BEYOND_GRACE_PERIOD;
+
   const showCreditsBanner =
     cloudWorkspace.creditStatus &&
     [
@@ -54,13 +56,17 @@ const MainView: React.FC = (props) => {
 
   const alertMessage = useMemo(() => {
     if (alertToShow === "credits") {
-      return formatMessage(
-        { id: `credits.creditsProblem.${cloudWorkspace.creditStatus}` },
-        {
-          values: {
-            lnk: (content: React.ReactNode) => <Link to={CloudRoutes.Credits}>{content}</Link>,
-          },
-        }
+      return (
+        <FormattedMessage
+          id={`credits.creditsProblem.${cloudWorkspace.creditStatus}`}
+          values={{
+            lnk: (
+              <Link to={CloudRoutes.Credits}>
+                <FormattedMessage id="credits.creditProblems.lnkText" />
+              </Link>
+            ),
+          }}
+        />
       );
     } else if (alertToShow === "trial") {
       const { trialExpiryTimestamp } = cloudWorkspace;