🪟 🧪 [Experiment] Show speedy connection banner only to corporate emai…

…ls (#19354)

* 🪟 🧪 [Experiment] Show speedy connection banner only to corporate emails

* PR comments

* update banner styles to match design. Remove seconds

Co-authored-by: Tim Roes <tim@airbyte.io>

airbyte-webapp/src/packages/cloud/components/experiments/SpeedyConnection/CountDownTimer/CountDownTimer.module.scss

@@ -7,7 +7,7 @@
 }
 
 .countDownTimerItem {
-  color: colors.$orange;
+  color: colors.$blue-100;
   font-size: 16px;
   line-height: 28px;
   font-weight: 700;

airbyte-webapp/src/packages/cloud/components/experiments/SpeedyConnection/CountDownTimer/CountDownTimer.tsx

@@ -3,13 +3,12 @@ import { Text } from "components/ui/Text";
 import styles from "./CountDownTimer.module.scss";
 import { useCountdown } from "./useCountdown";
 export const CountDownTimer: React.FC<{ expiredOfferDate: string }> = ({ expiredOfferDate }) => {
-  const [hours, minutes, seconds] = useCountdown(expiredOfferDate);
+  const [hours, minutes] = useCountdown(expiredOfferDate);
 
   return (
     <div className={styles.countDownTimerContainer}>
       <Text className={styles.countDownTimerItem}>{hours.toString().padStart(2, "0")}h</Text>
       <Text className={styles.countDownTimerItem}>{minutes.toString().padStart(2, "0")}m</Text>
-      <Text className={styles.countDownTimerItem}>{seconds.toString().padStart(2, "0")}s</Text>
     </div>
   );
 };

airbyte-webapp/src/packages/cloud/components/experiments/SpeedyConnection/CountDownTimer/useCountdown.ts

@@ -20,7 +20,6 @@ const getReturnValues = (countDown: number): number[] => {
   // calculate time left
   const hours = Math.floor((countDown % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
   const minutes = Math.floor((countDown % (1000 * 60 * 60)) / (1000 * 60));
-  const seconds = Math.floor((countDown % (1000 * 60)) / 1000);
 
-  return [hours, minutes, seconds];
+  return [hours, minutes];
 };

airbyte-webapp/src/packages/cloud/components/experiments/SpeedyConnection/SpeedyConnectionBanner/SpeedyConnectionBanner.module.scss

@@ -28,12 +28,13 @@
   justify-content: center;
   align-items: center;
   margin: auto;
+  color: colors.$white;
 }
 
 .linkCta {
-  color: colors.$dark-blue;
-}
+  color: colors.$white;
 
-.textDecorationNone {
-  text-decoration: none;
+  p {
+    color: inherit;
+  }
 }

airbyte-webapp/src/packages/cloud/components/experiments/SpeedyConnection/SpeedyConnectionBanner/SpeedyConnectionBanner.tsx

@@ -1,39 +1,30 @@
 import classnames from "classnames";
-import classNames from "classnames";
 import { FormattedMessage } from "react-intl";
-import { Link, useLocation } from "react-router-dom";
+import { Link } from "react-router-dom";
 
 import { Text } from "components/ui/Text";
 
-import { useExperiment } from "hooks/services/Experiment";
 import { CountDownTimer } from "packages/cloud/components/experiments/SpeedyConnection/CountDownTimer";
 import { StepType } from "pages/OnboardingPage/types";
 import { RoutePaths } from "pages/routePaths";
 
 import { useExperimentSpeedyConnection } from "../hooks/useExperimentSpeedyConnection";
-import credits from "./credits.svg";
 import styles from "./SpeedyConnectionBanner.module.scss";
 
 export const SpeedyConnectionBanner = () => {
   const { expiredOfferDate } = useExperimentSpeedyConnection();
-  const location = useLocation();
-  const hideOnboardingExperiment = useExperiment("onboarding.hideOnboarding", false);
 
   return (
     <div className={classnames(styles.container)}>
       <div className={styles.innerContainer}>
-        <img src={credits} alt="" />
-
         <FormattedMessage
           id="experiment.speedyConnection"
           defaultMessage="<link>Set up your first connection</link> in the next <timer></timer> and get <b>100 additonal credits</b> for your trial"
           values={{
             link: (link: React.ReactNode[]) => (
               <Link
-                className={classNames(styles.linkCta, {
-                  [styles.textDecorationNone]: location.pathname.includes("onboarding"),
-                })}
-                to={hideOnboardingExperiment ? RoutePaths.Connections : RoutePaths.Onboarding}
+                className={styles.linkCta}
+                to={`${RoutePaths.Connections}/${RoutePaths.ConnectionNew}`}
                 state={{
                   step: StepType.CREATE_SOURCE,
                 }}
@@ -44,7 +35,6 @@ export const SpeedyConnectionBanner = () => {
             timer: () => <CountDownTimer expiredOfferDate={expiredOfferDate} />,
           }}
         />
-        <img src={credits} alt="" />
       </div>
     </div>
   );

airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx

@@ -16,6 +16,7 @@ import { useAuth } from "packages/firebaseReact";
 import { useInitService } from "services/useInitService";
 import { getUtmFromStorage } from "utils/utmStorage";
 
+import { FREE_EMAIL_SERVICE_PROVIDERS } from "./freeEmailProviders";
 import { actions, AuthServiceState, authStateReducer, initialState } from "./reducer";
 import { EmailLinkErrorCodes } from "./types";
 
@@ -51,6 +52,7 @@ interface AuthContextApi {
   loggedOut: boolean;
   providers: string[] | null;
   hasPasswordLogin: () => boolean;
+  hasCorporateEmail: () => boolean;
   login: AuthLogin;
   loginWithOAuth: (provider: OAuthProviders) => Observable<OAuthLoginState>;
   signUpWithEmailLink: (form: { name: string; email: string; password: string; news: boolean }) => Promise<void>;
@@ -170,6 +172,9 @@ export const AuthenticationProvider: React.FC<React.PropsWithChildren<unknown>>
       hasPasswordLogin(): boolean {
         return !!state.providers?.includes("password");
       },
+      hasCorporateEmail(): boolean {
+        return !FREE_EMAIL_SERVICE_PROVIDERS.some((provider) => state.currentUser?.email.endsWith(`@${provider}`));
+      },
       async login(values: { email: string; password: string }): Promise<void> {
         await authService.login(values.email, values.password);