🪟 ☁️ Free alpha/beta connectors pills

airbyte-webapp/src/components/ReleaseStageBadge/ReleaseStageBadge.module.scss

@@ -0,0 +1,31 @@
+@use "scss/colors";
+@use "scss/variables";
+
+.pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 6px;
+  background-color: colors.$grey-100;
+  border-radius: variables.$border-radius-pill;
+  text-transform: uppercase;
+  font-size: 10px;
+  line-height: initial;
+  color: colors.$dark-blue-500;
+  font-weight: 600;
+
+  &--small {
+    font-size: 8px;
+  }
+
+  &--contains-tag {
+    padding-right: 2px;
+  }
+}
+
+.freeTag {
+  background-color: colors.$green-300;
+  color: colors.$white;
+  border-radius: variables.$border-radius-pill;
+  padding: 2px 5px;
+  margin-left: 2px;
+}

airbyte-webapp/src/components/ReleaseStageBadge/ReleaseStageBadge.tsx

@@ -1,21 +1,12 @@
-import { FormattedMessage } from "react-intl";
-import styled from "styled-components";
+import classNames from "classnames";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import { GAIcon } from "components/icons/GAIcon";
 import { Tooltip } from "components/ui/Tooltip";
 
 import { ReleaseStage } from "core/request/AirbyteClient";
 
-const Stage = styled.div<{ $small: boolean }>`
-  display: inline-block;
-  padding: 2px 6px;
-  background: ${({ theme }) => theme.greyColor20};
-  border-radius: 25px;
-  text-transform: uppercase;
-  font-size: ${({ $small }) => ($small ? "8px" : "10px")};
-  line-height: initial;
-  color: ${({ theme }) => theme.textColor};
-`;
+import styles from "./ReleaseStageBadge.module.scss";
 
 interface ReleaseStageBadgeProps {
   small?: boolean;
@@ -24,9 +15,17 @@ interface ReleaseStageBadgeProps {
    * Whether to show a detailed message via a tooltip. If not specified, will be {@code true}.
    */
   tooltip?: boolean;
+  showFreeTag?: boolean;
 }
 
-export const ReleaseStageBadge: React.FC<ReleaseStageBadgeProps> = ({ stage, small, tooltip = true }) => {
+export const ReleaseStageBadge: React.FC<ReleaseStageBadgeProps> = ({
+  stage,
+  small,
+  tooltip = true,
+  showFreeTag = false,
+}) => {
+  const { formatMessage } = useIntl();
+
   if (!stage || stage === ReleaseStage.custom) {
     return null;
   }
@@ -35,9 +34,17 @@ export const ReleaseStageBadge: React.FC<ReleaseStageBadgeProps> = ({ stage, sma
     stage === ReleaseStage.generally_available ? (
       <GAIcon />
     ) : (
-      <Stage $small={!!small}>
+      <div
+        className={classNames(styles.pill, {
+          [styles["pill--small"]]: small,
+          [styles["pill--contains-tag"]]: showFreeTag,
+        })}
+      >
         <FormattedMessage id={`connector.releaseStage.${stage}`} />
-      </Stage>
+        {showFreeTag && (
+          <span className={styles.freeTag}>{formatMessage({ id: "freeConnectorProgram.releaseStageBadge.free" })}</span>
+        )}
+      </div>
     );
 
   return tooltip ? (

airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/EnrollmentModal.module.scss

@@ -18,6 +18,10 @@
 
 .pill {
   z-index: 2;
+
+  // HACK: the hardcoded top margin is to vertically center the image, which was exported
+  // from Figma with an off-center vertical alignment
+  margin-top: 2em;
 }
 
 .contentWrapper {

airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/EnrollmentModal/EnrollmentModal.tsx

@@ -15,6 +15,7 @@ import { StripeCheckoutSessionCreate, StripeCheckoutSessionRead } from "packages
 import { ReactComponent as CardSVG } from "./cards.svg";
 import { ReactComponent as ConnectorGridSvg } from "./connectorGrid.svg";
 import styles from "./EnrollmentModal.module.scss";
+import { ReactComponent as FreeAlphaBetaPillsSVG } from "./free-alpha-beta-pills.svg";
 import { ReactComponent as FreeSVG } from "./free.svg";
 import { ReactComponent as MailSVG } from "./mail.svg";
 
@@ -95,8 +96,7 @@ export const EnrollmentModalContent: React.FC<EnrollmentModalContentProps> = ({
         <div className={styles.headerBackgroundImageContainer}>
           <ConnectorGridSvg />
         </div>
-        <div className={styles.pill}>Pill #1</div>
-        <div className={styles.pill}>Pill #2</div>
+        <FreeAlphaBetaPillsSVG className={styles.pill} />
       </FlexContainer>
       <div className={styles.contentWrapper}>
         <Heading size="lg" as="h2" className={styles.contentHeader}>

airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/hooks/useFreeConnectorProgram.ts

@@ -20,7 +20,10 @@ export const useFreeConnectorProgram = () => {
       ({ hasEligibleConnector, hasPaymentAccountSaved }) => {
         const userIsEligibleToEnroll = !hasPaymentAccountSaved && hasEligibleConnector;
 
-        return freeConnectorProgramEnabled && userIsEligibleToEnroll;
+        return {
+          showEnrollmentUi: freeConnectorProgramEnabled && userIsEligibleToEnroll,
+          isEnrolled: freeConnectorProgramEnabled && hasPaymentAccountSaved,
+        };
       }
     )
   );

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

@@ -191,5 +191,6 @@
   "freeConnectorProgram.enrollmentModal.cancelButtonText": "Cancel",
   "freeConnectorProgram.enrollmentModal.enrollButtonText": "Enroll now!",
   "freeConnectorProgram.enrollmentModal.unvalidatedEmailButtonText": "Resend email validation",
+  "freeConnectorProgram.releaseStageBadge.free": "Free",
   "freeConnectorProgram.youCanEnroll": "You can <enrollLink>enroll</enrollLink> in the <b>Free Connector Program</b> to use Alpha and Beta connectors for <freeText>free</freeText>."
 }

airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/CreditsPage.tsx

@@ -20,7 +20,8 @@ import styles from "./CreditsPage.module.scss";
 const CreditsPage: React.FC = () => {
   const { emailVerified } = useAuthService();
   useTrackPage(PageTrackingCodes.CREDITS);
-  const { data: showEnrollmentUi } = useFreeConnectorProgram();
+  const { data: freeConnectorProgramInfo } = useFreeConnectorProgram();
+  const { showEnrollmentUi } = freeConnectorProgramInfo || {};
 
   return (
     <MainPageWithScroll

airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPageTitle.tsx

@@ -26,7 +26,8 @@ export const ConnectionPageTitle: React.FC = () => {
 
   const { connection } = useConnectionEditService();
 
-  const { data: displayEnrollmentCallout } = useFreeConnectorProgram();
+  const { data: freeConnectorProgramInfo } = useFreeConnectorProgram();
+  const displayEnrollmentCallout = freeConnectorProgramInfo?.showEnrollmentUi;
 
   const steps = useMemo(() => {
     const steps = [