feat: add banners for manual and auto recharge to billing page (#14011)

Co-authored-by: Joey Marshment-Howell <[email protected]>

Author: Tim Roes

airbyte-webapp/src/locales/en.json

@@ -1024,6 +1024,7 @@
   "settings.organization.members.title": "Organization members",
   "settings.organization.billing.notSetUp": "Billing has not yet been set up for this organization. Start by adding a payment method.",
   "settings.organization.billing.title": "Billing",
+  "settings.organization.billing.manualPaymentStatus": "Reach out to <lnk>Sales</lnk> if you have any questions about your plan.",
   "settings.organization.billing.billingInformation": "Billing information",
   "settings.organization.billing.billingInformationError": "Error loading billing information",
   "settings.organization.billing.update": "Update",

airbyte-webapp/src/packages/cloud/views/billing/OrganizationBillingPage/BillingBanners.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { useIntl } from "react-intl";
+
+import { Link } from "components/ui/Link";
+import { Message } from "components/ui/Message";
+
+import { useCurrentOrganizationInfo } from "core/api";
+import { links } from "core/utils/links";
+import { useExperiment } from "hooks/services/Experiment";
+
+export const BillingBanners: React.FC = () => {
+  const { formatMessage } = useIntl();
+  const { billing } = useCurrentOrganizationInfo();
+  const isAutoRechargeEnabled = useExperiment("billing.autoRecharge", false);
+
+  return (
+    <>
+      {billing?.paymentStatus === "manual" && (
+        <Message
+          type="info"
+          text={formatMessage(
+            { id: "settings.organization.billing.manualPaymentStatus" },
+            {
+              lnk: (node: React.ReactNode) => (
+                <Link opensInNewTab to={links.contactSales} variant="primary">
+                  {node}
+                </Link>
+              ),
+            }
+          )}
+        />
+      )}
+      {isAutoRechargeEnabled && (
+        <Message
+          data-testid="autoRechargeEnabledBanner"
+          text={formatMessage(
+            {
+              id: "credits.autoRechargeEnabled",
+            },
+            {
+              contact: (node: React.ReactNode) => (
+                <Link opensInNewTab to="mailto:[email protected]" variant="primary">
+                  {node}
+                </Link>
+              ),
+            }
+          )}
+        />
+      )}
+    </>
+  );
+};

airbyte-webapp/src/packages/cloud/views/billing/OrganizationBillingPage/OrganizationBillingPage.tsx

@@ -10,6 +10,7 @@ import { Heading } from "components/ui/Heading";
 
 import { useCurrentOrganizationInfo } from "core/api";
 
+import { BillingBanners } from "./BillingBanners";
 import { BillingInformation } from "./BillingInformation";
 import { Invoices } from "./Invoices";
 import { PaymentMethod } from "./PaymentMethod";
@@ -28,6 +29,8 @@ export const OrganizationBillingPage: React.FC = () => {
             <FormattedMessage id="settings.organization.billing.title" />
           </Heading>
 
+          <BillingBanners />
+
           <BorderedTiles>
             <BorderedTile>
               <BillingInformation />